前端学习的太差了，一个header写了半天才写个勉强能用的。
vue-cli引入scss
npm install node-sass --savenpm install sass-loader --save从element-ui官方拷贝一个导航栏修改
处理中心我的工作台选项1选项2选项3选项4选项1选项2选项3订单管理 css样式完善
/*顶部导航栏盒子*/.myHeader { /** 导航栏固定在顶部*/ .headBack{ width: 100%; background: rgba(40,52,44,0.6); box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 100; } .headBox .el-menu { background: transparent; border-bottom: none!important; } .headBox .el-menu-demo li.el-menu-item, .headBox .el-menu--horizontal .el-submenu .el-submenu__title { height: 38px; line-height: 38px; border-bottom: none!important; } //导航栏字体修改 .headBox .el-submenu div.el-submenu__title{ color: #fff; } .el-menu--horizontal >ul , .headBox>ul li.el-menu-item:hover, .headBox>ul li.el-submenu:hover .el-submenu__title, .headBox ul .el-submenu .el-menu .el-menu-item , .headBox .el-menu--horizontal.menu ul{ background: #48456C; border-bottom: none; box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.1) !important; } // 如果展开颜色显示和下拉列表一致 .is-opened{ background: #48456C !important; } // 菜单右边 .userInfo{ position: absolute; right: 30px; color: #ffffff; line-height: 38px; } .userInfo a { color: #fff; font-size: 13px; transition: all 0.2s ease-out; } .headBox .userInfo a:hover { color: #48456C; } .pcsearchbox{ max-width: 170px; height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } /*pc搜索框*/ .headBox .pcsearchbox { padding: 0; max-width: 170px; /*min-width: 30px;*/ height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } .headBox .pcsearchbox:hover .pcsearchinput { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox i.pcsearchicon { color: #fff; padding-left: 10px; } .headBox .pcsearchbox .pcsearchinput { width: 180px; padding: 10px 20px 10px 20px; background: rgba(40, 42, 44, 0.6); border-radius: 0 0 2px 2px; position: absolute; right: 0; top: 38px; opacity: 0; visibility: hidden; /*transform: scaleX(0);*/ transform-origin: right; transition: all 0.5s ease-out; } .headBox .pcsearchbox .hasSearched { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox .el-input { width: 100%; } .headBox .el-input__inner { height: 30px; border: none; background: #fff; /*border: 1px solid #333;*/ border-radius: 2px; padding-right: 10px; }}/*下拉选项菜单*/.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title { background-color: #64609E !important; float: none; height: 36px; line-height: 36px; color: #909399; position: relative;}// 下拉菜单body > div.el-menu--horizontal.menu > ul{ list-style: none; position: relative; margin: 0; z-index: 100; min-width: 130px; border: none; padding: 0; border-radius: 2px; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);}body > div.el-menu--horizontal.menu > ul > li:hover { background: #48456C !important;}修改后的页面
处理中心我的工作台选项1选项2选项3订单管理 登录 | 注册 个人中心 喜欢列表 收藏列表 退出登录 效果
