调整外链
This commit is contained in:
myf
parent
9588a3cdcb
commit
719b5e3a24
|
|
@ -75,71 +75,118 @@ const Menu: React.FC<NavProps> = ({
|
|||
profile,
|
||||
children,
|
||||
inviteUrl,
|
||||
outLink,
|
||||
// outLink,
|
||||
}) => {
|
||||
// const outLink = [
|
||||
// {
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// list: [
|
||||
// {
|
||||
// name: "淘宝",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// {
|
||||
// name: "淘宝1",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// {
|
||||
// name: "淘宝2",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// list: [
|
||||
// {
|
||||
// name: "淘宝",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// list: [
|
||||
// {
|
||||
// name: "京东1",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// list: [
|
||||
// {
|
||||
// name: "京东1",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// {
|
||||
// name: "京东2",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// {
|
||||
// name: "京东3",
|
||||
// link: "www.taobao.com",
|
||||
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
const outLink = [
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "淘宝",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "淘宝1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "淘宝2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "淘宝",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
name: "11",
|
||||
list: [
|
||||
{
|
||||
name: "京东1",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东2",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
{
|
||||
name: "京东3",
|
||||
link: "www.taobao.com",
|
||||
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
console.log("outLink-----:", outLink);
|
||||
console.log(setLang);
|
||||
const { isXl } = useMatchBreakpoints();
|
||||
const isMobile = isXl === false;
|
||||
const [isPushed, setIsPushed] = useState(!isMobile);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import Text from "../../../components/Text/Text";
|
|||
import Dropdown from "../../../components/Dropdown/Dropdown";
|
||||
import Link from "../../../components/Link/Link";
|
||||
import MoreIcon from "../../../components/Svg/Icons/More";
|
||||
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
|
||||
|
||||
interface Props extends PanelProps, PushedProps {}
|
||||
|
||||
|
|
@ -42,6 +43,7 @@ const Image = styled.img`
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
`;
|
||||
const ImageDiv = styled.div`
|
||||
position: relative;
|
||||
|
|
@ -53,7 +55,7 @@ const ImageDiv = styled.div`
|
|||
display: none;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
/* padding: 0 10px; */
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
|
|
@ -73,7 +75,7 @@ const ImageDiv = styled.div`
|
|||
}
|
||||
`;
|
||||
const ImageItem = styled.div`
|
||||
padding: 5px 0;
|
||||
/* padding: 5px 0; */
|
||||
position: relative;
|
||||
.itemDiv {
|
||||
display: none;
|
||||
|
|
@ -95,6 +97,19 @@ const ImageItem = styled.div`
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
& > .content-item {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
& > .content-item:hover {
|
||||
background-color: rgba(112, 112, 112, 0.2);
|
||||
}
|
||||
`;
|
||||
const SingleLink = styled(Link)`
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
:hover {
|
||||
background-color: rgba(112, 112, 112, 0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
const MoreIconSvg = styled(MoreIcon)`
|
||||
|
|
@ -118,9 +133,10 @@ const PanelFooter: React.FC<Props> = ({
|
|||
let defaultList: OutLink[] | undefined;
|
||||
let moreList: OutLink[] | undefined;
|
||||
if (outLink && outLink.length > 2) {
|
||||
const list = outLink;
|
||||
const list = JSON.parse(JSON.stringify(outLink));
|
||||
const listLink = JSON.parse(JSON.stringify(outLink));
|
||||
moreList = list.slice(2, outLink.length);
|
||||
defaultList = outLink.splice(0, 2);
|
||||
defaultList = listLink.splice(0, 2);
|
||||
covers = outLink[0].icon;
|
||||
} else {
|
||||
defaultList = outLink;
|
||||
|
|
@ -143,11 +159,11 @@ const PanelFooter: React.FC<Props> = ({
|
|||
{defaultList && defaultList.length > 0
|
||||
? defaultList.map((item) => {
|
||||
return item.list && item.list.length > 1 ? (
|
||||
<Dropdown position="top-right" target={<Image src={item.icon} />}>
|
||||
<Dropdown position="top-right" target={<Image src={item.icon} title={item.name} />}>
|
||||
{item.list && item.list.length > 0
|
||||
? item.list?.map((childItem) => {
|
||||
return (
|
||||
<Link href={childItem.link} color="textSubtle">
|
||||
<Link external href={childItem.link} color="textSubtle">
|
||||
<Text>{childItem.name}</Text>
|
||||
</Link>
|
||||
);
|
||||
|
|
@ -155,8 +171,8 @@ const PanelFooter: React.FC<Props> = ({
|
|||
: ""}
|
||||
</Dropdown>
|
||||
) : item.list && item.list.length > 0 ? (
|
||||
<Link href={item.list[0].link} color="textSubtle">
|
||||
<Image src={item.icon} />
|
||||
<Link external href={item.list[0].link} color="textSubtle">
|
||||
<Image src={item.icon} title={item.name} />
|
||||
</Link>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -172,11 +188,17 @@ const PanelFooter: React.FC<Props> = ({
|
|||
{moreList?.map((item) => {
|
||||
return item.list && item.list.length > 1 ? (
|
||||
<ImageItem>
|
||||
<Image src={item.icon} />
|
||||
<Flex className="content-item" alignItems="center" justifyContent="space-between">
|
||||
<>
|
||||
<Image src={item.icon} title={item.name} />
|
||||
<Text marginLeft="5px">{item.name}</Text>
|
||||
</>
|
||||
<ChevronRightIcon />
|
||||
</Flex>
|
||||
<div className="itemDiv">
|
||||
{item.list?.map((childItem) => {
|
||||
return (
|
||||
<Link href={childItem.link} color="textSubtle">
|
||||
<Link external href={childItem.link} color="textSubtle">
|
||||
<Text>{childItem.name}</Text>
|
||||
</Link>
|
||||
);
|
||||
|
|
@ -184,9 +206,9 @@ const PanelFooter: React.FC<Props> = ({
|
|||
</div>
|
||||
</ImageItem>
|
||||
) : item.list && item.list.length > 0 ? (
|
||||
<Link href={item.list[0].link} color="textSubtle">
|
||||
<Image src={item.icon} />
|
||||
</Link>
|
||||
<SingleLink external href={item.list[0].link} color="textSubtle">
|
||||
<Image src={item.icon} title={item.name} />
|
||||
</SingleLink>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ export interface NavProps extends PanelProps {
|
|||
|
||||
export interface OutLink {
|
||||
icon?: string;
|
||||
name?: string;
|
||||
list?: OutList[];
|
||||
}
|
||||
export interface OutList {
|
||||
|
|
|
|||
Loading…
Reference in New Issue