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
Hide 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;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
-ms-flex-preferred-size: auto; -ms-flex-preferred-size: auto;
flex-basis: auto; flex-basis: auto;
-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{
position: relative; .mainContainer .mainLeftMenu {
display: flex; position: relative;
flex-direction: row; display: flex;
color:#fff; flex-direction: row;
} color: #fff;
.mainContainer .leftMenu1{ }
background: #444444;
cursor: pointer; .mainContainer .leftMenu1 {
width: 130px; background: #444444;
height: 100%; cursor: pointer;
overflow-y: auto; width: 130px;
-webkit-user-select: none; height: 100%;
-moz-user-select: none; overflow-y: auto;
-ms-user-select: none; -webkit-user-select: none;
user-select: none; -moz-user-select: none;
} -ms-user-select: none;
.mainContainer .asideInner{ user-select: none;
background: rgba(0, 0, 0, 0.15); }
padding: 6px 6px;
width: 100%; .mainContainer .asideInner {
border-radius: 3px; background: rgba(0, 0, 0, 0.15);
font-weight: bold; padding: 6px 6px;
} width: 100%;
.mainContainer .aside-logo { border-radius: 3px;
height: 60px; font-weight: bold;
background: #444444; }
color: #f2f2f2;
cursor: pointer; .mainContainer .aside-logo {
font-weight: bold; height: 60px;
text-align: center; background: #444444;
padding: 0 15px; color: #f2f2f2;
display: flex; cursor: pointer;
align-items: center; font-weight: bold;
} text-align: center;
.mainContainer .leftUl li{ padding: 0 15px;
list-style-type: none; display: flex;
display: block; align-items: center;
height:60px; }
padding:10px;
width:100%; .mainContainer .leftUl li {
} list-style-type: none;
.mainContainer .menu-item{ display: block;
height: 60px; height: 60px;
padding: 0 10px; padding: 10px;
display: flex; width: 100%;
-webkit-box-align: center; }
-webkit-align-items: center;
-ms-flex-align: center; .mainContainer .menu-item {
align-items: center; height: 60px;
flex-direction: row; padding: 0 10px;
} display: flex;
.mainContainer .vue-line-clamp{ -webkit-box-align: center;
word-break: break-all; -webkit-align-items: center;
-webkit-line-clamp: 1; -ms-flex-align: center;
display: -webkit-box; align-items: center;
-webkit-box-orient: vertical; flex-direction: row;
overflow: hidden; }
text-overflow: ellipsis;
margin-left:5px; .mainContainer .vue-line-clamp {
} word-break: break-all;
.mainContainer .menu-item:hover{ -webkit-line-clamp: 1;
color:#fff; display: -webkit-box;
background-color: #666666; -webkit-box-orient: vertical;
cursor: pointer; overflow: hidden;
} text-overflow: ellipsis;
.mainContainer .menuActive{ margin-left: 5px;
color: #000000!important; }
background: #ffffff!important;
} .mainContainer .menu-item:hover {
.mainContainer .leftMenu2{ color: #fff;
border-right: 1px solid #E6E6E6; background-color: #666666;
position: relative; cursor: pointer;
width: 130px; }
height: 100%;
overflow-y: auto; .mainContainer .menuActive {
-webkit-user-select: none; color: #000000 !important;
-moz-user-select: none; background: #ffffff !important;
-ms-user-select: none; }
user-select: none;
} .mainContainer .leftMenu2 {
.mainContainer .is-show-menu-1 { border-right: 1px solid #E6E6E6;
position: absolute; position: relative;
width: 14px; width: 130px;
background: #F3F3F3; height: 100%;
color: #A1A4A9; overflow-y: auto;
border-radius: 10px 0 0 10px; -webkit-user-select: none;
padding: 2px 8px; -moz-user-select: none;
right: 0; -ms-user-select: none;
top: 17px; user-select: none;
cursor: pointer; }
}
.mainContainer .menu-item-2-title{ .mainContainer .is-show-menu-1 {
width:100%; position: absolute;
color: #909399; width: 14px;
border-bottom: 1px solid #E6E6E6; background: #F3F3F3;
text-align: center; color: #A1A4A9;
height: 59px; border-radius: 10px 0 0 10px;
line-height: 59px; padding: 2px 8px;
} right: 0;
.leftMenu2 .el-submenu__title span{ top: 17px;
padding-left:20px; cursor: pointer;
} }
.leftMenu2 .el-submenu__icon-arrow{
right:80%; .mainContainer .menu-item-2-title {
} width: 100%;
.leftMenu2 .el-submenu__title:hover{ color: #909399;
background: transparent; border-bottom: 1px solid #E6E6E6;
color:#5DA8FC; text-align: center;
} height: 59px;
.leftMenu2 .el-submenu__title:hover i{ line-height: 59px;
color:#5DA8FC; }
}
.leftMenu2 .el-menu-item:hover{ .leftMenu2 .el-submenu__title span {
background-color: transparent; padding-left: 20px;
color:#5DA8FC; }
}
.mainContainer .el-menu-item.is-active{ .leftMenu2 .el-submenu__icon-arrow {
width: 100%; right: 80%;
height: 100%; }
border-radius: 4px;
background-color: transparent; .leftMenu2 .el-submenu__title:hover {
cursor: pointer; background: transparent;
color:#303133; color: #5DA8FC;
} }
.leftMenu2 .el-menu-item-group__title{
padding:0 0 7px 20px!important; .leftMenu2 .el-submenu__title:hover i {
} color: #5DA8FC;
.leftMenu2 .el-menu{ }
border-right:0;
} .leftMenu2 .el-menu-item:hover {
.mainLeftMenu .is-show-menu-2{ background-color: transparent;
position: absolute; color: #5DA8FC;
width: 14px; }
background: #F3F3F3;
color: #A1A4A9; .mainContainer .el-menu-item.is-active {
border-radius: 0 10px 10px 0; width: 100%;
padding: 2px 8px; height: 100%;
right: -30px; border-radius: 4px;
top: 17px; background-color: transparent;
cursor: pointer; cursor: pointer;
z-index: 10; color: #303133;
} }
.mainContainer .isaa{
width: 104px; .leftMenu2 .el-menu-item-group__title {
height: 42px; padding: 0 0 7px 20px !important;
line-height: 42px; }
text-indent: 22px;
display: inline-block; .leftMenu2 .el-menu {
text-align: left; border-right: 0;
}
}
.el-submenu.is-active .isActive{ .mainLeftMenu .is-show-menu-2 {
background: #ebedf0!important; position: absolute;
border-radius:4px; width: 14px;
} background: #F3F3F3;
.el-submenu .el-menu-item{ color: #A1A4A9;
padding-left:0!important; border-radius: 0 10px 10px 0;
min-width: 130px!important; padding: 2px 8px;
padding: 0!important; right: -30px;
text-align: center; top: 17px;
} cursor: pointer;
.mainContainer .mainRightContent{ z-index: 10;
width:100%; }
height:100%;
background-color: #f3f3f3; .mainContainer .isaa {
} width: 104px;
.mainContainer .mainRightTop{ height: 42px;
width:100%; line-height: 42px;
height:60px; text-indent: 22px;
background: #fff; display: inline-block;
display: flex; text-align: left;
justify-content: space-between;
color:#909399; }
}
.mainContainer .mainRightLeft{ .el-submenu.is-active .isActive {
width:110px; background: #ebedf0 !important;
height:60px; border-radius: 4px;
line-height: 62px; }
/* border-bottom:2px solid #409EFF; */
text-align: center; .el-submenu .el-menu-item {
margin-left:30px; padding-left: 0 !important;
cursor: pointer; min-width: 130px !important;
position: relative; padding: 0 !important;
top:-2px; text-align: center;
} }
.mainContainer .marinRightList{
display:flex; .mainContainer .mainRightContent {
flex-wrap: wrap; width: 100%;
align-items: center; height: 100%;
width:300px; background-color: #f3f3f3;
} }
.marinRightList ul{
display:flex; .mainContainer .mainRightTop {
width:100%; width: 100%;
justify-content: space-around; height: 60px;
} background: #fff;
.marinRightList ul li{ display: flex;
display: block; justify-content: space-between;
list-style-type: none; color: #909399;
cursor: pointer; }
color:#909399;
outline: none; .mainContainer .mainRightLeft {
border:none; width: 110px;
} height: 60px;
.mainRightLeft:hover{ line-height: 62px;
color:#303133; /* border-bottom:2px solid #409EFF; */
} text-align: center;
.marinRightList ul li:hover{ margin-left: 30px;
color:#303133; cursor: pointer;
} position: relative;
.marinRightList ul li .el-dropdown>span:hover{ top: -2px;
color:#303133; }
}
.marinRightList ul li .el-dropdown>span{ .mainContainer .marinRightList {
color:#909399; display: flex;
} flex-wrap: wrap;
.mainContainer .main_routerPage{ align-items: center;
padding:20px; width: 300px;
/* height:100%; */ }
}
</style> .marinRightList ul {
display: flex;
width: 100%;
justify-content: space-around;
}
.marinRightList ul li {
display: block;
list-style-type: none;
cursor: pointer;
color: #909399;
outline: none;
border: none;
}
.mainRightLeft:hover {
color: #303133;
}
.marinRightList ul li:hover {
color: #303133;
}
.marinRightList ul li .el-dropdown>span:hover {
color: #303133;
}
.marinRightList ul li .el-dropdown>span {
color: #909399;
}
.mainContainer .main_routerPage {
padding: 20px;
/* height:100%; */
}
</style>
<template> <template>
<div class="mainContainer"> <div class="mainContainer">
<div class="mainLeftMenu"> <div class="mainLeftMenu">
<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>
<ul>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-dianpuguanli"></i>
<div class="vue-line-clamp">店铺管理</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-shangpinguanli"></i>
<div class="vue-line-clamp">商品管理</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-dingdanguanli"></i>
<div class="vue-line-clamp">订单管理</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-yonghuguanli"></i>
<div class="vue-line-clamp">用户管理</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-shujutongji"></i>
<div class="vue-line-clamp">数据统计</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<img src="../assets/img/plugins.png"/>
<div class="vue-line-clamp">营销中心</div>
</li>
<li class="menu-item" @mouseover="mouseOver">
<i class="iconfont icon-shezhi"></i>
<div class="vue-line-clamp">设置</div>
</li>
</ul>
</div>
<div class="leftMenu2" v-if="showTwo">
<div class="is-show-menu-1" @click="hideTwo()"><<</div>
<div class="menu-item-2-title">
店铺管理
</div>
<div>
<el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
<el-submenu index="1">
<template slot="title">
<span>店铺设计</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1" @click="changeMenu()">
<div class="isaa" :class="defaultActive=='1-1'?'isActive':''">轮播图</div>
</el-menu-item>
<el-menu-item index="1-2">
<div class="isaa" :class="defaultActive=='1-2'?'isActive':''">导航图标</div>
</el-menu-item>
<el-menu-item index="1-3">商城风格</el-menu-item>
<el-menu-item index="1-4">图片魔方</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<span>店铺设计</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">轮播图</el-menu-item>
<el-menu-item index="2-2">导航图标</el-menu-item>
<el-menu-item index="2-3">商城风格</el-menu-item>
<el-menu-item index="2-4">图片魔方</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</div>
</div> </div>
<div class="mainRightContent"> <ul>
<div class="mainRightTop"> <li class="menu-item" @mouseover="mouseOver">
<div class="mainRightLeft">微信小程序</div> <i class="iconfont icon-dianpuguanli"></i>
<div class="marinRightList"> <div class="vue-line-clamp">店铺管理</div>
<ul> </li>
<li>缓存</li> <li class="menu-item" @mouseover="mouseOver">
<li title="教程管理"> <i class="iconfont icon-shangpinguanli"></i>
<el-dropdown trigger="click"> <div class="vue-line-clamp">商品管理</div>
<span class="el-dropdown-link"> </li>
教程管理<i class="el-icon-arrow-down el-icon--right"></i> <li class="menu-item" @mouseover="mouseOver">
</span> <i class="iconfont icon-dingdanguanli"></i>
<el-dropdown-menu slot="dropdown"> <div class="vue-line-clamp">订单管理</div>
<el-dropdown-item>操作教程</el-dropdown-item> </li>
</el-dropdown-menu> <li class="menu-item" @mouseover="mouseOver">
</el-dropdown> <i class="iconfont icon-yonghuguanli"></i>
</li> <div class="vue-line-clamp">用户管理</div>
<li title="赞羊严选"> </li>
<el-dropdown trigger="click"> <li class="menu-item" @mouseover="mouseOver">
<span class="el-dropdown-link"> <i class="iconfont icon-shujutongji"></i>
赞羊严选<i class="el-icon-arrow-down el-icon--right"></i> <div class="vue-line-clamp">数据统计</div>
</span> </li>
<el-dropdown-menu slot="dropdown"> <li class="menu-item" @mouseover="mouseOver">
<el-dropdown-item disabled>赞羊严选</el-dropdown-item> <img src="../assets/img/plugins.png" />
<el-dropdown-item disabled>T1219561424(T1219561424)</el-dropdown-item> <div class="vue-line-clamp">营销中心</div>
<el-dropdown-item>返回系统</el-dropdown-item> </li>
</el-dropdown-menu> <li class="menu-item" @mouseover="mouseOver">
</el-dropdown> <i class="iconfont icon-shezhi"></i>
</li> <div class="vue-line-clamp">设置</div>
</ul> </li>
</div> </ul>
</div> </div>
<div class="main_routerPage"> <div class="leftMenu2" v-if="showTwo">
<router-view/> <div class="is-show-menu-1" @click="hideTwo()">
</div> <<</div> <div class="menu-item-2-title">
店铺管理
</div> </div>
<div>
<el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
<el-submenu index="1">
<template slot="title">
<span>店铺设计</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1" @click="changeMenu()">
<div class="isaa" :class="defaultActive=='1-1'?'isActive':''">轮播图</div>
</el-menu-item>
<el-menu-item index="1-2">
<div class="isaa" :class="defaultActive=='1-2'?'isActive':''">导航图标</div>
</el-menu-item>
<el-menu-item index="1-3">商城风格</el-menu-item>
<el-menu-item index="1-4">图片魔方</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<span>店铺设计</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">轮播图</el-menu-item>
<el-menu-item index="2-2">导航图标</el-menu-item>
<el-menu-item index="2-3">商城风格</el-menu-item>
<el-menu-item index="2-4">图片魔方</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</div>
</div>
<div class="mainRightContent">
<div class="mainRightTop">
<div class="mainRightLeft">微信小程序</div>
<div class="marinRightList">
<ul>
<li>缓存</li>
<li title="教程管理">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
教程管理<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>操作教程</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<li :title="currentUser.MallName">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
{{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item>
<el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item>
<el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
</ul>
</div>
</div>
<div class="main_routerPage">
<router-view />
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
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>
\ No newline at end of file </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