修改table封装的border样式,解决路由与面包导航显示不一致

This commit is contained in:
许红梅 2022-05-24 17:53:10 +08:00
parent 978f53ea43
commit efc427d1e8
3 changed files with 69 additions and 46 deletions

View File

@ -9,6 +9,7 @@
height: 48px; height: 48px;
display: inline-flex; display: inline-flex;
min-width: 100%; min-width: 100%;
border-bottom: 1px solid #ddd;
} }
.th-td { .th-td {
@ -42,7 +43,6 @@
padding: 28px 0; padding: 28px 0;
color: rgba(0, 0, 0, .6); color: rgba(0, 0, 0, .6);
font-size: 12px; font-size: 12px;
border-top: 1px solid #dfe1e6;
} }
@ -86,7 +86,9 @@
border: none; border: none;
} }
.th-body .tr:first-child .td{
border-top: 0;
}
.td { .td {
display: flex; display: flex;
min-height: 40px; min-height: 40px;

View File

@ -1,39 +1,60 @@
import React from "react" import React from "react"
import ReactDOM from "react-dom" import ReactDOM from "react-dom"
import "./main.less" import "./main.less"
import {Icon} from "zent" import { Icon } from "zent"
import { HashRouter as Router, Route, Link } from "react-router-dom"; import { HashRouter as Router, Route, Link } from "react-router-dom";
import Bus from "../../assets/eventBus.js"; import Bus from "../../assets/eventBus.js";
export default class MouseMenu extends React.Component{ export default class MouseMenu extends React.Component {
constructor(props){ constructor(props) {
super(props); super(props);
this.state={ this.state = {
activeMenuList:[]//总动态路由数据 activeMenuList: []//总动态路由数据
} }
} }
componentDidMount(){ componentDidMount() {
let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu")); let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu"));
this.setState({activeMenuList}); this.setState({ activeMenuList });
} }
closeMenuMask(){ closeMenuMask() {
this.props.mouseLeaveFn(); this.props.mouseLeaveFn();
} }
render(){ //点击菜单
let menuList=this.state.activeMenuList;//路由表 clickMenuItem(e, it) {
const pathname=window.location.href.lastIndexOf('\/'); if (it.router == '/home/distributor-add') {
const pathnamestr=window.location.href.substr(pathname); sessionStorage.setItem('pathname2', '/home/system/distributor-add')
return( let activerou = [{
'pagetitle': '新建', items: [
{
"path": "distributor-list",
"name": "分销商管理"
},
{
"path": "distributor-add",
"name": "新建分销商"
}
]
}]
sessionStorage.setItem('breaknav', JSON.stringify(activerou));
}
this.props.mouseLeaveFn();
}
render() {
let menuList = this.state.activeMenuList;//路由表
const pathname = window.location.href.lastIndexOf('\/');
const pathnamestr = window.location.href.substr(pathname);
return (
<div className="mouseMenu" onMouseLeave={this.closeMenuMask.bind(this)} onMouseEnter={this.props.mouseEnter}> <div className="mouseMenu" onMouseLeave={this.closeMenuMask.bind(this)} onMouseEnter={this.props.mouseEnter}>
<div className="menuBody"> <div className="menuBody">
<div className="first_menu"> <div className="first_menu">
{ {
menuList.map((item,i)=>{ menuList.map((item, i) => {
return( return (
<div key={i}> <div key={i}>
{ {
item.children.map((childItem,childI)=>{ item.children.map((childItem, childI) => {
return( return (
childItem.level==5?<Link key={childI} to={childItem.router} className={childItem.router.includes(pathnamestr)&&item.children.length>=1?'mouse_menuactive menu_items':'menu_items'} onClick={this.closeMenuMask.bind(this)}>{childItem.title}</Link>:null childItem.level == 5 ? <Link key={childI} to={childItem.router} className={childItem.router.includes(pathnamestr) && item.children.length >= 1 ? 'mouse_menuactive menu_items' : 'menu_items'} onClick={(e) => this.clickMenuItem(e, childItem)}>{childItem.title}</Link> : null
) )
}) })
} }
@ -42,7 +63,7 @@ export default class MouseMenu extends React.Component{
}) })
} }
</div> </div>
<Icon type="close" className="closeMenu" onClick={this.closeMenuMask.bind(this)}/> <Icon type="close" className="closeMenu" onClick={this.closeMenuMask.bind(this)} />
</div> </div>
</div>) </div>)
} }

View File

@ -80,11 +80,11 @@ export default class topNav extends React.Component{
let pathnameBreak=sessionStorage.getItem('pathname2') let pathnameBreak=sessionStorage.getItem('pathname2')
const pathname=window.location.href.lastIndexOf('\/'); const pathname=window.location.href.lastIndexOf('\/');
const pathnamestr=window.location.href.substr(pathname); const pathnamestr=window.location.href.substr(pathname);
let breakflag=pathnamestr.includes('add')||pathnamestr.includes('aid')||pathnamestr.includes('key-list')||pathnamestr.includes('key-detail')||pathnamestr.includes('key-edit')||pathnamestr.includes('exchangecode-edit')||pathnamestr.includes('plan-edit')||pathnamestr.includes('product-edit'); let breakflag=pathnamestr.includes('add')||pathnamestr.includes('aid')||pathnamestr.includes('distributor-edit')||pathnamestr.includes('key-list')||pathnamestr.includes('key-detail')||pathnamestr.includes('key-edit')||pathnamestr.includes('exchangecode-edit')||pathnamestr.includes('plan-edit')||pathnamestr.includes('product-edit');
let sedcbreakflag=pathnamestr.includes('plan-create'); let sedcbreakflag=pathnamestr.includes('plan-create');
let planbreakflag = pathnamestr.includes('mytempMould') let planbreakflag = pathnamestr.includes('mytempMould')
let editbreakflag = pathnamestr.includes('edittemplate') let editbreakflag = pathnamestr.includes('edittemplate')
let backshow=pathnamestr.includes('account-add')||pathnamestr.includes('role-add')||pathnamestr.includes('subaccount-add')||pathnamestr.includes('distributor-add')||pathnamestr.includes('exchangecode-edit')||pathnamestr.includes('plan-edit')||pathnamestr.includes('key-list')||pathnamestr.includes('exchange-addcommodity'); let backshow=pathnamestr.includes('account-add')||pathnamestr.includes('role-add')||pathnamestr.includes('subaccount-add')||pathnamestr.includes('exchangecode-edit')||pathnamestr.includes('plan-edit')||pathnamestr.includes('key-list')||pathnamestr.includes('exchange-addcommodity');
let breakchange = pathnamestr.includes('exchangecode-add')|| pathnamestr.includes('key-edit')||pathnamestr.includes('key-detail')||pathnamestr.includes('product-edit')||pathnamestr.includes('plan-edit'); let breakchange = pathnamestr.includes('exchangecode-add')|| pathnamestr.includes('key-edit')||pathnamestr.includes('key-detail')||pathnamestr.includes('product-edit')||pathnamestr.includes('plan-edit');
if(breakchange){ if(breakchange){
breaknav=JSON.parse(sessionStorage.getItem('breakchangenav')) breaknav=JSON.parse(sessionStorage.getItem('breakchangenav'))