修改头部及左侧栏

This commit is contained in:
何童崇 2022-03-07 10:41:39 +08:00
parent d1d9213527
commit 28bb01f3fe
8 changed files with 275 additions and 75 deletions

View File

@ -90,6 +90,7 @@ module.exports = {
src: path.join(paths.appSrc),
forge: path.join(paths.appSrc, 'forge'),
military: path.join(paths.appSrc, 'military'),
components: path.join(paths.appSrc, 'components'),
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
"react-native": "react-native-web",

View File

@ -106,52 +106,6 @@
line-height: 1.6875em;
opacity: 0.8;
}
// 首页特定头部样式起
&.newHeaders {
// background-color: #1a2358;
background-color: #0037af;
z-index: 1000;
}
.newFooter{
background: inherit;
}
.head-nav {
min-width: auto;
}
.head-nav ul#header-nav li a {
font-size: 1em;
color: #fff;
}
.head-nav ul#header-nav li:hover a,
.head-nav ul#header-nav li.active a {
color: #ffa13a;
}
.head-nav ul#header-nav li.active a::after {
background-color: #ffa13a;
}
.logoDiv img {
min-width: 2.8125em;
height: 2.8125em;
}
.color-home {
color: #fff;
}
.color-home:hover {
color: #4154f1;
}
.register-button {
height: 3em;
margin-left: 1.25em;
padding: 0 1.5625em;
font-size: 0.875em;
}
// 首页特定头部样式止
}
// 波浪样式起

View File

@ -0,0 +1,148 @@
/**
* 路由配置表
* key必填唯一标识
* name必填菜单名称
* location路由地址
* icon左侧图标
* target打开方式参考HTML标签的target属性
* urltype路由类别用于拓展其它项目管理菜单self为在当前项目下跳转路由main_web_site_url或其它为匹配setting中对应路参数径
* children子元素数组
*/
export default [
{
"key": "task",
"name": "创客空间",
"location": "",
"icon": "icon-jinggao",
"target": "_self",
"urltype": "self",
"children": [{
"key": "basics",
"name": "基础数据",
"location": "",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "",
"children": [ {
"key": "categories",
"name": "任务领域",
"location": "/admin/categories/list",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "main_web_site_url",
"children": [],
},{
"key": "industries",
"name": "行业信息",
"location": "/managements/industries/list",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "main_web_site_url",
"children": [],
},{
"key": "placements",
"name": "职位信息",
"location": "/managements/placements/list",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "main_web_site_url",
"children": [],
}],
},
{
"key": "commission",
"name": "代办事项",
"location": "",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "",
"children": [{
"key": "categories",
"name": "延期任务处理",
"location": "/managements/task/delayManage",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "self",
"children": [],
},{
"key": "industries",
"name": "支付报酬凭证上传",
"location": "/managements/task/payProof",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_self",
"urltype": "self",
"children": [],
}],
},
{
"key": "placements",
"name": "创客任务列表",
"location": "/managements/task/taskAdmin",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "",
"urltype": "self",
"children": [],
}
],
},
{
"key": "competition",
"name": "竞赛活动",
"location": "",
"icon": "icon-ioon",
"target": "_self",
"urltype": "self",
"children": [{
"key": "competitionList",
"name": "竞赛列表",
"location": "/managements/competition/list",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "",
"urltype": "self",
"children": [],
},
{
"key": "competitionRegion",
"name": "赛区配置",
"location": "/admin/competitions/region_zone_edit",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "_blank",
"urltype": "main_web_site_url",
"children": [],
},
{
"key": "competitionExpert",
"name": "竞赛评审列表",
"location": "/managements/expert/competition",
"menustatus": "Y",
"parentKey": 'task',
"icon": "",
"target": "",
"urltype": "self",
"children": [],
}
],
},
]

View File

@ -1,37 +1,74 @@
import React, { useState ,useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import { Link } from "react-router-dom";
import { Menu,Icon, Dropdown, } from 'antd';
import { Menu, Icon, Dropdown, } from 'antd';
import urlConfig from './config';
import './index.scss';
const { SubMenu } = Menu;
export default (props) => {
const {current_user,history}=props;
const main_web_site_url =localStorage.chromesetting&& JSON.parse(localStorage.chromesetting).main_web_site_url;
const current_main_site_url =localStorage.chromesetting&& JSON.parse(localStorage.chromesetting).current_main_site_url;
const noticeUrl =localStorage.chromesetting&& JSON.parse(localStorage.chromesetting).api_urls.notice;
useEffect(()=>{
sessionStorage.setItem('current_user',JSON.stringify(current_user));
},[current_user.login]);
const { current_user, history } = props;
const setting = localStorage.chromesetting && JSON.parse(localStorage.chromesetting) ||{};
const main_web_site_url = localStorage.chromesetting && JSON.parse(localStorage.chromesetting).main_web_site_url;
useEffect(() => {
sessionStorage.setItem('current_user', JSON.stringify(current_user));
}, [current_user.login]);
const [current,setCurrent]=useState(JSON.parse(sessionStorage.adminRouter||'[]'));
const [title,setTitle]=useState('');
function handleClick (e){
const [current, setCurrent] = useState(JSON.parse(sessionStorage.adminRouter || '[]'));
const [title, setTitle] = useState('');
function handleClick(e) {
setCurrent([e.key]);
setTitle(e.item.props.title);
sessionStorage.setItem( 'adminRouter',JSON.stringify([e.key]));
// setTitle(e.item.props.title);
// sessionStorage.setItem( 'adminRouter',JSON.stringify([e.key]));
};
function getMenuList(menus) {
return menus.map(function (item) {
if (Array.isArray(item.children) && item.children.length > 0) {
let list = [];
let title = (<span><i className={'left-icon iconfont ' + item.icon}></i><span>{item.name}</span></span>);
item.children.map((it) => {
list.push(<Menu.Item key={it.key} >
{
it.urltype == "self" ? <Link target={item.target} to={it.location}>{it.name}</Link>
: <a target={it.target} href={`${setting[it.urltype] + it.location}`}>{it.name}</a>
}
</Menu.Item>)
});
return (
<SubMenu key={item.key} children={item.children} title={title}>
{list}
</SubMenu>
)
}
else {
return (
<Menu.Item title={item.name} key="payProof"><Link target={item.target} to={item.location}>{item.name}</Link></Menu.Item>
)
}
})
}
return (
<div className="layouts">
<Menu
<Menu mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
defaultOpenKeys={['task']}
mode="inline"
onClick={handleClick}
>
{getMenuList(urlConfig)}
</Menu>
{/* <Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['task']}
mode="inline"
>
<SubMenu
@ -48,7 +85,6 @@ export default (props) => {
<Menu.Item key="7" onClick={() => { history.push('/activity') }}>项目活跃度统计</Menu.Item>
</SubMenu>
<SubMenu
key="task"
title={
@ -59,12 +95,12 @@ export default (props) => {
}
>
<SubMenu title="基础数据" >
<Menu.Item><a href={`${main_web_site_url}/admin/categories/list`}>任务领域</a></Menu.Item>
<Menu.Item><a href={`${main_web_site_url}/admin/industries/list`}>行业信息</a></Menu.Item>
<Menu.Item><a href={`${main_web_site_url}/admin/placements/list`}>职位信息</a></Menu.Item>
<Menu.Item><a href={`${main_web_site_url}/admin/task_templates/list`}>需求导入模板</a></Menu.Item>
<Menu.Item><a href={`${main_web_site_url}/admin/agreement_setting`}>签订协议内容</a></Menu.Item>
<Menu.Item><a href={`${main_web_site_url}/admin/sign_agreement_setting`}>应征投稿协议内容</a></Menu.Item>
<Menu.Item key="categories"><a href={`${main_web_site_url}/admin/categories/list`}>任务领域</a></Menu.Item>
<Menu.Item key="industries"><a href={`${main_web_site_url}/admin/industries/list`}>行业信息</a></Menu.Item>
<Menu.Item key="placements"><a href={`${main_web_site_url}/admin/placements/list`}>职位信息</a></Menu.Item>
<Menu.Item key="task_templates"><a href={`${main_web_site_url}/admin/task_templates/list`}>需求导入模板</a></Menu.Item>
<Menu.Item key="agreement_setting"><a href={`${main_web_site_url}/admin/agreement_setting`}>签订协议内容</a></Menu.Item>
<Menu.Item key="sign_agreement_setting"><a href={`${main_web_site_url}/admin/sign_agreement_setting`}>应征投稿协议内容</a></Menu.Item>
</SubMenu>
<SubMenu title="代办事项" >
<Menu.Item title="task" key="delayManage"><Link to="/managements/task/delayManage">延期任务处理</Link></Menu.Item>
@ -73,7 +109,7 @@ export default (props) => {
<Menu.Item title="task" key="taskAdmin"><Link to="/managements/task/taskAdmin">创客任务列表</Link></Menu.Item>
</SubMenu>
</Menu>
</Menu> */}
</div>
);

View File

@ -1,10 +1,19 @@
.layouts {
background: #aaa;
position: fixed;
top: 70px;
bottom: 107px;
left:0;
width: 10vw;
width: 13.75rem;
overflow: hidden;
overflow-y: scroll;
&::-webkit-scrollbar{
width: 0;
}
.left-icon{
font-size: 1.25rem;
margin-right: .625rem;
}
}
@media screen and (max-width: 600px) {

View File

@ -1,5 +1,13 @@
.managements{
.centerbox{
margin-left: 10vw;
margin-left: 13.75rem;
}
}
// 系统默认字体大小是16px大屏的在此基础上增大字体
@media screen and (min-width: 1921px) {
html{
font-size: calc(100% + 6 * (100vw - 1920px) / 1000 );
font-size: calc(100% + 6 * (100vw - 1920px) / 1000 );
}
}

View File

@ -638,7 +638,7 @@ class NewHeader extends Component {
goshowqqgtounp,
visible,
} = this.state;
let activeIndex =match.path === '/'?true: '';
let activeIndex =match.path === '/' || (match.path&&match.path.startsWith('/managements'))?true: '';
let headtypes = '/';
if (settings) {
if (settings.navbar) {

View File

@ -14,3 +14,47 @@
.login-box{
font-size: 15px;
}
/* 新版首页头部样式 */
.homePage.newHeaders {
background-color: #0037af;
z-index: 1000;
}
.homePage .newFooter{
background: inherit;
}
.homePage .head-nav {
min-width: auto;
}
.homePage .head-nav ul#header-nav li a {
font-size: 1em;
color: #fff;
}
.homePage .head-nav ul#header-nav li:hover a,
.homePage .head-nav ul#header-nav li.active a {
color: #ffa13a;
}
.homePage .head-nav ul#header-nav li.active a::after {
background-color: #ffa13a;
}
.homePage .logoDiv img {
min-width: 2.8125em;
height: 2.8125em;
}
.homePage .color-home {
color: #fff;
}
.homePage .color-home:hover {
color: #4154f1;
}
.homePage .register-button {
height: 3em;
margin-left: 1.25em;
padding: 0 1.5625em;
font-size: 0.875em;
}
/* 新版首页头部样式 */