提交 62f8592e 作者: 龚洪江

功能:添加备案号,header-nav固定

上级 b5636307
.navHeader {
padding-top: 48px;
}
.navHeaderContent{
width: 100%;
height: 48px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.nav {
width: 1200px;
display: flex;
......
......@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
import { Avatar, Button, Dropdown, Space, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import styles from './index.module.scss';
import { Router, useRouter } from 'next/router';
import { useRouter } from 'next/router';
import LoginModal from '~/components/loginModal';
import PublishModal from './publishModal';
import JoinModal from './joinModal';
......@@ -46,7 +46,7 @@ type Props = {
export default function NavHeader(props: Props) {
const router = useRouter();
const [currentPath, setCurrentPath] = useState('');
const { userInfo, testLogin, logout, setNeedLogin, needLogin } = useContext(UserContext);
const { userInfo, logout, setNeedLogin, needLogin } = useContext(UserContext);
useEffect(() => {
const routerTo = items?.filter((item) => router.route == item.key)[0];
......@@ -55,7 +55,6 @@ export default function NavHeader(props: Props) {
} else {
setCurrentPath(router.route);
}
console.log('currentHash', currentPath);
}, [router.route]);
//导航更改
......@@ -101,52 +100,54 @@ export default function NavHeader(props: Props) {
return (
<div className={styles.navHeader} style={props.style}>
<div className={styles.nav}>
<div className={styles.logo}></div>
<Tabs
className={styles.tabs}
activeKey={currentPath}
items={items}
onChange={onChange}
onTabClick={onChange}
/>
<Space size={16} className={styles.btns}>
<Button type='primary' className={styles.btn1} onClick={onPublish}>
+ 发布需求
</Button>
<Button className={styles.btn2} onClick={onJoin}>
加盟入驻
</Button>
</Space>
{userInfo ? (
<div className={styles.haedImg}>
<Dropdown
menu={{
items: [
{
key: '2',
label: (
<div onClick={() => router.push('/personalCenter/servicesOrders')}>
我的订单
</div>
),
},
{ key: '1', label: <div onClick={onLogout}>退出登录</div> },
],
}}
<div className={styles.navHeaderContent}>
<div className={styles.nav}>
<div className={styles.logo}></div>
<Tabs
className={styles.tabs}
activeKey={currentPath}
items={items}
onChange={onChange}
onTabClick={onChange}
/>
<Space size={16} className={styles.btns}>
<Button type='primary' className={styles.btn1} onClick={onPublish}>
+ 发布需求
</Button>
<Button className={styles.btn2} onClick={onJoin}>
加盟入驻
</Button>
</Space>
{userInfo ? (
<div className={styles.haedImg}>
<Dropdown
menu={{
items: [
{
key: '2',
label: (
<div onClick={() => router.push('/personalCenter/servicesOrders')}>
我的订单
</div>
),
},
{ key: '1', label: <div onClick={onLogout}>退出登录</div> },
],
}}
>
<Avatar size={36} style={{ background: '#bdbdbd' }} src={userInfo.userImg}></Avatar>
</Dropdown>
</div>
) : (
<Button
type='text'
onClick={() => setOpenLoginModal(true)}
style={{ fontWeight: 'bold', fontSize: 16 }}
>
<Avatar size={36} style={{ background: '#bdbdbd' }} src={userInfo.userImg}></Avatar>
</Dropdown>
</div>
) : (
<Button
type='text'
onClick={() => setOpenLoginModal(true)}
style={{ fontWeight: 'bold', fontSize: 16 }}
>
登录
</Button>
)}
登录
</Button>
)}
</div>
</div>
<LoginModal
open={openLoginModal}
......
......@@ -2,8 +2,9 @@
height: 110px;
background: #ffffff;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footerBox {
width: 1200px;
......@@ -24,14 +25,21 @@
display: flex;
align-items: center;
justify-content: space-evenly;
height: 47px;
.qrcodeItem {
margin-right: 206px;
text-align: center;
margin-right: 111px;
display: flex;
align-items: center;
&:nth-last-child(1) {
margin-right: 0;
}
.qrcodeContent{
margin-left: 10px;
.qrcodeTitle {
margin-top: 4px;
font-size: 12px;
color: #959595;
}
}
.qrcodeImg {
width: 60px;
height: 60px;
......@@ -40,14 +48,7 @@
background-color: #fff;
}
.qrcodeTitle {
margin-top: 4px;
font-size: 12px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: 100;
color: #959595;
text-align: center;
}
}
}
......@@ -67,3 +68,9 @@
line-height: 21px;
}
}
.filingNumber{
font-size: 12px;
font-weight: 400;
color: #959595;
margin-top: 15px;
}
import styles from './index.module.scss';
import { Image } from 'antd';
import errImg from '~/assets/errImg';
import img_mmc from './assets/mmc.png';
const qrcodeList = [
{
img: '/assets/mmc.png',
title: '科比特官网',
url: 'http://www.mmcuav.cn/',
img: '/assets/xiaochengxu.png',
title: '轻松玩转',
meta: '云享飞小程序',
},
{
img: '/assets/fuwuhao.png',
title: '云享飞服务号',
meta: '',
},
{
img: '/assets/xiaochengxu.png',
title: '云享飞小程序',
img: '/assets/mmc.png',
title: '科比特官网',
url: 'http://www.mmcuav.cn/',
meta: '',
},
{
img: '/assets/shequn.png',
title: '官方社群',
meta: '',
},
];
......@@ -27,7 +30,7 @@ export default function Footer() {
return (
<div className={styles.footer}>
<div className={styles.footerBox}>
<div className={styles.logo}></div>
{/*<div className={styles.logo}></div>*/}
<div className={styles.qrcodeList}>
{qrcodeList.map((item, i) => {
return (
......@@ -37,7 +40,7 @@ export default function Footer() {
cursor: item.title === '科比特官网' ? 'pointer' : '',
}}
onClick={() => {
if (item.title === '科比特官网') window.location.href = item.url!;
if (item.title === '科比特官网') window.open(item.url, '_blank');
}}
alt=''
className={styles.qrcodeImg}
......@@ -45,16 +48,16 @@ export default function Footer() {
fallback={errImg}
preview={item.title !== '科比特官网'}
></Image>
<div className={styles.qrcodeTitle}>{item.title}</div>
<div className={styles.qrcodeContent}>
<div className={styles.qrcodeTitle}>{item.title}</div>
{item.meta ? <div className={styles.qrcodeTitle}>{item.meta}</div> : ''}
</div>
</div>
);
})}
</div>
</div>
{/* <div className={styles.rightText}>
<div className={styles.number}>100W</div>
<div className={styles.text}>无人机新媒体矩阵等你来关注</div>
</div> */}
<div className={styles.filingNumber}>浙ICP备2023014395号</div>
</div>
);
}
......@@ -4,4 +4,4 @@
width: 1200px;
position: relative;
margin: 0 auto;
}
\ No newline at end of file
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论