Skip to content

E
ElectricitySheep
Commit 485eedf7 authored by zhengke's avatar zhengke
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huangyuanyuan/electricitysheep

parents 0b0a0d41 37240ff3
Show whitespace changes
Inline Side-by-side
Showing with 406 additions and 368 deletions
src/components/mall.vue
View file @ 485eedf7
<style> <style>
.mainContainer{ .mainContainer {
height:100%; height: 100%;
display:flex; display: flex;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
font-size:14px; font-size: 14px;
} }
.mainContainer .mainLeftMenu{
.mainContainer .mainLeftMenu {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color:#fff; color: #fff;
} }
.mainContainer .leftMenu1{
.mainContainer .leftMenu1 {
background: #444444; background: #444444;
cursor: pointer; cursor: pointer;
width: 130px; width: 130px;
...@@ -32,13 +34,15 @@ ...@@ -32,13 +34,15 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.mainContainer .asideInner{
.mainContainer .asideInner {
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
padding: 6px 6px; padding: 6px 6px;
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
} }
.mainContainer .aside-logo { .mainContainer .aside-logo {
height: 60px; height: 60px;
background: #444444; background: #444444;
...@@ -50,14 +54,16 @@ ...@@ -50,14 +54,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.mainContainer .leftUl li{
.mainContainer .leftUl li {
list-style-type: none; list-style-type: none;
display: block; display: block;
height:60px; height: 60px;
padding:10px; padding: 10px;
width:100%; width: 100%;
} }
.mainContainer .menu-item{
.mainContainer .menu-item {
height: 60px; height: 60px;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
...@@ -67,25 +73,29 @@ ...@@ -67,25 +73,29 @@
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
} }
.mainContainer .vue-line-clamp{
.mainContainer .vue-line-clamp {
word-break: break-all; word-break: break-all;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-left:5px; margin-left: 5px;
} }
.mainContainer .menu-item:hover{
color:#fff; .mainContainer .menu-item:hover {
color: #fff;
background-color: #666666; background-color: #666666;
cursor: pointer; cursor: pointer;
} }
.mainContainer .menuActive{
color: #000000!important; .mainContainer .menuActive {
background: #ffffff!important; color: #000000 !important;
background: #ffffff !important;
} }
.mainContainer .leftMenu2{
.mainContainer .leftMenu2 {
border-right: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6;
position: relative; position: relative;
width: 130px; width: 130px;
...@@ -96,6 +106,7 @@ ...@@ -96,6 +106,7 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.mainContainer .is-show-menu-1 { .mainContainer .is-show-menu-1 {
position: absolute; position: absolute;
width: 14px; width: 14px;
...@@ -107,46 +118,56 @@ ...@@ -107,46 +118,56 @@
top: 17px; top: 17px;
cursor: pointer; cursor: pointer;
} }
.mainContainer .menu-item-2-title{
width:100%; .mainContainer .menu-item-2-title {
width: 100%;
color: #909399; color: #909399;
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
text-align: center; text-align: center;
height: 59px; height: 59px;
line-height: 59px; line-height: 59px;
} }
.leftMenu2 .el-submenu__title span{
padding-left:20px; .leftMenu2 .el-submenu__title span {
padding-left: 20px;
} }
.leftMenu2 .el-submenu__icon-arrow{
right:80%; .leftMenu2 .el-submenu__icon-arrow {
right: 80%;
} }
.leftMenu2 .el-submenu__title:hover{
.leftMenu2 .el-submenu__title:hover {
background: transparent; background: transparent;
color:#5DA8FC; color: #5DA8FC;
} }
.leftMenu2 .el-submenu__title:hover i{
color:#5DA8FC; .leftMenu2 .el-submenu__title:hover i {
color: #5DA8FC;
} }
.leftMenu2 .el-menu-item:hover{
.leftMenu2 .el-menu-item:hover {
background-color: transparent; background-color: transparent;
color:#5DA8FC; color: #5DA8FC;
} }
.mainContainer .el-menu-item.is-active{
.mainContainer .el-menu-item.is-active {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
color:#303133; color: #303133;
} }
.leftMenu2 .el-menu-item-group__title{
padding:0 0 7px 20px!important; .leftMenu2 .el-menu-item-group__title {
padding: 0 0 7px 20px !important;
} }
.leftMenu2 .el-menu{
border-right:0; .leftMenu2 .el-menu {
border-right: 0;
} }
.mainLeftMenu .is-show-menu-2{
.mainLeftMenu .is-show-menu-2 {
position: absolute; position: absolute;
width: 14px; width: 14px;
background: #F3F3F3; background: #F3F3F3;
...@@ -158,7 +179,8 @@ ...@@ -158,7 +179,8 @@
cursor: pointer; cursor: pointer;
z-index: 10; z-index: 10;
} }
.mainContainer .isaa{
.mainContainer .isaa {
width: 104px; width: 104px;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
...@@ -167,75 +189,89 @@ ...@@ -167,75 +189,89 @@
text-align: left; text-align: left;
} }
.el-submenu.is-active .isActive{
background: #ebedf0!important; .el-submenu.is-active .isActive {
border-radius:4px; background: #ebedf0 !important;
border-radius: 4px;
} }
.el-submenu .el-menu-item{
padding-left:0!important; .el-submenu .el-menu-item {
min-width: 130px!important; padding-left: 0 !important;
padding: 0!important; min-width: 130px !important;
padding: 0 !important;
text-align: center; text-align: center;
} }
.mainContainer .mainRightContent{
width:100%; .mainContainer .mainRightContent {
height:100%; width: 100%;
height: 100%;
background-color: #f3f3f3; background-color: #f3f3f3;
} }
.mainContainer .mainRightTop{
width:100%; .mainContainer .mainRightTop {
height:60px; width: 100%;
height: 60px;
background: #fff; background: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color:#909399; color: #909399;
} }
.mainContainer .mainRightLeft{
width:110px; .mainContainer .mainRightLeft {
height:60px; width: 110px;
height: 60px;
line-height: 62px; line-height: 62px;
/* border-bottom:2px solid #409EFF; */ /* border-bottom:2px solid #409EFF; */
text-align: center; text-align: center;
margin-left:30px; margin-left: 30px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
top:-2px; top: -2px;
} }
.mainContainer .marinRightList{
display:flex; .mainContainer .marinRightList {
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
width:300px; width: 300px;
} }
.marinRightList ul{
display:flex; .marinRightList ul {
width:100%; display: flex;
width: 100%;
justify-content: space-around; justify-content: space-around;
} }
.marinRightList ul li{
.marinRightList ul li {
display: block; display: block;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
color:#909399; color: #909399;
outline: none; outline: none;
border:none; border: none;
} }
.mainRightLeft:hover{
color:#303133; .mainRightLeft:hover {
color: #303133;
} }
.marinRightList ul li:hover{
color:#303133; .marinRightList ul li:hover {
color: #303133;
} }
.marinRightList ul li .el-dropdown>span:hover{
color:#303133; .marinRightList ul li .el-dropdown>span:hover {
color: #303133;
} }
.marinRightList ul li .el-dropdown>span{
color:#909399; .marinRightList ul li .el-dropdown>span {
color: #909399;
} }
.mainContainer .main_routerPage{
padding:20px; .mainContainer .main_routerPage {
padding: 20px;
/* height:100%; */ /* height:100%; */
} }
</style> </style>
<template> <template>
<div class="mainContainer"> <div class="mainContainer">
...@@ -243,7 +279,7 @@ ...@@ -243,7 +279,7 @@
<div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div> <div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
<div class="leftMenu1"> <div class="leftMenu1">
<div class="aside-logo"> <div class="aside-logo">
<div class="asideInner">赞羊严选</div> <div class="asideInner">{{currentUser.MallName}}</div>
</div> </div>
<ul> <ul>
<li class="menu-item" @mouseover="mouseOver"> <li class="menu-item" @mouseover="mouseOver">
...@@ -267,7 +303,7 @@ ...@@ -267,7 +303,7 @@
<div class="vue-line-clamp">数据统计</div> <div class="vue-line-clamp">数据统计</div>
</li> </li>
<li class="menu-item" @mouseover="mouseOver"> <li class="menu-item" @mouseover="mouseOver">
<img src="../assets/img/plugins.png"/> <img src="../assets/img/plugins.png" />
<div class="vue-line-clamp">营销中心</div> <div class="vue-line-clamp">营销中心</div>
</li> </li>
<li class="menu-item" @mouseover="mouseOver"> <li class="menu-item" @mouseover="mouseOver">
...@@ -277,8 +313,8 @@ ...@@ -277,8 +313,8 @@
</ul> </ul>
</div> </div>
<div class="leftMenu2" v-if="showTwo"> <div class="leftMenu2" v-if="showTwo">
<div class="is-show-menu-1" @click="hideTwo()"><<</div> <div class="is-show-menu-1" @click="hideTwo()">
<div class="menu-item-2-title"> <<</div> <div class="menu-item-2-title">
店铺管理 店铺管理
</div> </div>
<div> <div>
...@@ -329,15 +365,15 @@ ...@@ -329,15 +365,15 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</li> </li>
<li title="赞羊严选"> <li :title="currentUser.MallName">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
赞羊严选<i class="el-icon-arrow-down el-icon--right"></i> {{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item disabled>赞羊严选</el-dropdown-item> <el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item>
<el-dropdown-item disabled>T1219561424(T1219561424)</el-dropdown-item> <el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item>
<el-dropdown-item>返回系统</el-dropdown-item> <el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</li> </li>
...@@ -345,7 +381,7 @@ ...@@ -345,7 +381,7 @@
</div> </div>
</div> </div>
<div class="main_routerPage"> <div class="main_routerPage">
<router-view/> <router-view />
</div> </div>
</div> </div>
</div> </div>
...@@ -355,32 +391,34 @@ ...@@ -355,32 +391,34 @@
data() { data() {
return { return {
//是否显示关闭后的箭头 //是否显示关闭后的箭头
isShowOne:false, isShowOne: false,
showTwo:false, showTwo: false,
defaultActive:'1-1' defaultActive: '1-1',
currentUser: {},
}; };
}, },
created() { created() {
this.currentUser = this.getLocalStorage();
console.log(" this.currentUser", this.currentUser);
}, },
methods: { methods: {
//点击关闭二级窗口 //点击关闭二级窗口
hideTwo(){ hideTwo() {
this.showTwo=false; this.showTwo = false;
this.isShowOne=true; this.isShowOne = true;
}, },
//鼠标移入 //鼠标移入
mouseOver(){ mouseOver() {
this.showTwo=true; this.showTwo = true;
this.isShowOne=false; this.isShowOne = false;
}, },
changeMenu: function() { changeMenu: function () {
this.$router.push({ this.$router.push({
path: 'Register' path: 'Register'
}); });
} }
}, },
mounted() { mounted() {}
}
}; };
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment