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>
.mainContainer{
height:100%;
display:flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 0;
font-size:14px;
}
.mainContainer .mainLeftMenu{
position: relative;
display: flex;
flex-direction: row;
color:#fff;
}
.mainContainer .leftMenu1{
background: #444444;
cursor: pointer;
width: 130px;
height: 100%;
overflow-y: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mainContainer .asideInner{
background: rgba(0, 0, 0, 0.15);
padding: 6px 6px;
width: 100%;
border-radius: 3px;
font-weight: bold;
}
.mainContainer .aside-logo {
height: 60px;
background: #444444;
color: #f2f2f2;
cursor: pointer;
font-weight: bold;
text-align: center;
padding: 0 15px;
display: flex;
align-items: center;
}
.mainContainer .leftUl li{
list-style-type: none;
display: block;
height:60px;
padding:10px;
width:100%;
}
.mainContainer .menu-item{
height: 60px;
padding: 0 10px;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
flex-direction: row;
}
.mainContainer .vue-line-clamp{
word-break: break-all;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-left:5px;
}
.mainContainer .menu-item:hover{
color:#fff;
background-color: #666666;
cursor: pointer;
}
.mainContainer .menuActive{
color: #000000!important;
background: #ffffff!important;
}
.mainContainer .leftMenu2{
border-right: 1px solid #E6E6E6;
position: relative;
width: 130px;
height: 100%;
overflow-y: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mainContainer .is-show-menu-1 {
position: absolute;
width: 14px;
background: #F3F3F3;
color: #A1A4A9;
border-radius: 10px 0 0 10px;
padding: 2px 8px;
right: 0;
top: 17px;
cursor: pointer;
}
.mainContainer .menu-item-2-title{
width:100%;
color: #909399;
border-bottom: 1px solid #E6E6E6;
text-align: center;
height: 59px;
line-height: 59px;
}
.leftMenu2 .el-submenu__title span{
padding-left:20px;
}
.leftMenu2 .el-submenu__icon-arrow{
right:80%;
}
.leftMenu2 .el-submenu__title:hover{
background: transparent;
color:#5DA8FC;
}
.leftMenu2 .el-submenu__title:hover i{
color:#5DA8FC;
}
.leftMenu2 .el-menu-item:hover{
background-color: transparent;
color:#5DA8FC;
}
.mainContainer .el-menu-item.is-active{
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color:#303133;
}
.leftMenu2 .el-menu-item-group__title{
padding:0 0 7px 20px!important;
}
.leftMenu2 .el-menu{
border-right:0;
}
.mainLeftMenu .is-show-menu-2{
position: absolute;
width: 14px;
background: #F3F3F3;
color: #A1A4A9;
border-radius: 0 10px 10px 0;
padding: 2px 8px;
right: -30px;
top: 17px;
cursor: pointer;
z-index: 10;
}
.mainContainer .isaa{
width: 104px;
height: 42px;
line-height: 42px;
text-indent: 22px;
display: inline-block;
text-align: left;
}
.el-submenu.is-active .isActive{
background: #ebedf0!important;
border-radius:4px;
}
.el-submenu .el-menu-item{
padding-left:0!important;
min-width: 130px!important;
padding: 0!important;
text-align: center;
}
.mainContainer .mainRightContent{
width:100%;
height:100%;
background-color: #f3f3f3;
}
.mainContainer .mainRightTop{
width:100%;
height:60px;
background: #fff;
display: flex;
justify-content: space-between;
color:#909399;
}
.mainContainer .mainRightLeft{
width:110px;
height:60px;
line-height: 62px;
/* border-bottom:2px solid #409EFF; */
text-align: center;
margin-left:30px;
cursor: pointer;
position: relative;
top:-2px;
}
.mainContainer .marinRightList{
display:flex;
flex-wrap: wrap;
align-items: center;
width:300px;
}
.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>
.mainContainer {
height: 100%;
display: flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 0;
font-size: 14px;
}
.mainContainer .mainLeftMenu {
position: relative;
display: flex;
flex-direction: row;
color: #fff;
}
.mainContainer .leftMenu1 {
background: #444444;
cursor: pointer;
width: 130px;
height: 100%;
overflow-y: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mainContainer .asideInner {
background: rgba(0, 0, 0, 0.15);
padding: 6px 6px;
width: 100%;
border-radius: 3px;
font-weight: bold;
}
.mainContainer .aside-logo {
height: 60px;
background: #444444;
color: #f2f2f2;
cursor: pointer;
font-weight: bold;
text-align: center;
padding: 0 15px;
display: flex;
align-items: center;
}
.mainContainer .leftUl li {
list-style-type: none;
display: block;
height: 60px;
padding: 10px;
width: 100%;
}
.mainContainer .menu-item {
height: 60px;
padding: 0 10px;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
flex-direction: row;
}
.mainContainer .vue-line-clamp {
word-break: break-all;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 5px;
}
.mainContainer .menu-item:hover {
color: #fff;
background-color: #666666;
cursor: pointer;
}
.mainContainer .menuActive {
color: #000000 !important;
background: #ffffff !important;
}
.mainContainer .leftMenu2 {
border-right: 1px solid #E6E6E6;
position: relative;
width: 130px;
height: 100%;
overflow-y: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mainContainer .is-show-menu-1 {
position: absolute;
width: 14px;
background: #F3F3F3;
color: #A1A4A9;
border-radius: 10px 0 0 10px;
padding: 2px 8px;
right: 0;
top: 17px;
cursor: pointer;
}
.mainContainer .menu-item-2-title {
width: 100%;
color: #909399;
border-bottom: 1px solid #E6E6E6;
text-align: center;
height: 59px;
line-height: 59px;
}
.leftMenu2 .el-submenu__title span {
padding-left: 20px;
}
.leftMenu2 .el-submenu__icon-arrow {
right: 80%;
}
.leftMenu2 .el-submenu__title:hover {
background: transparent;
color: #5DA8FC;
}
.leftMenu2 .el-submenu__title:hover i {
color: #5DA8FC;
}
.leftMenu2 .el-menu-item:hover {
background-color: transparent;
color: #5DA8FC;
}
.mainContainer .el-menu-item.is-active {
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color: #303133;
}
.leftMenu2 .el-menu-item-group__title {
padding: 0 0 7px 20px !important;
}
.leftMenu2 .el-menu {
border-right: 0;
}
.mainLeftMenu .is-show-menu-2 {
position: absolute;
width: 14px;
background: #F3F3F3;
color: #A1A4A9;
border-radius: 0 10px 10px 0;
padding: 2px 8px;
right: -30px;
top: 17px;
cursor: pointer;
z-index: 10;
}
.mainContainer .isaa {
width: 104px;
height: 42px;
line-height: 42px;
text-indent: 22px;
display: inline-block;
text-align: left;
}
.el-submenu.is-active .isActive {
background: #ebedf0 !important;
border-radius: 4px;
}
.el-submenu .el-menu-item {
padding-left: 0 !important;
min-width: 130px !important;
padding: 0 !important;
text-align: center;
}
.mainContainer .mainRightContent {
width: 100%;
height: 100%;
background-color: #f3f3f3;
}
.mainContainer .mainRightTop {
width: 100%;
height: 60px;
background: #fff;
display: flex;
justify-content: space-between;
color: #909399;
}
.mainContainer .mainRightLeft {
width: 110px;
height: 60px;
line-height: 62px;
/* border-bottom:2px solid #409EFF; */
text-align: center;
margin-left: 30px;
cursor: pointer;
position: relative;
top: -2px;
}
.mainContainer .marinRightList {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 300px;
}
.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>
<div class="mainContainer">
<div class="mainLeftMenu">
<div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
<div class="leftMenu1">
<div class="aside-logo">
<div class="asideInner">赞羊严选</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 class="mainContainer">
<div class="mainLeftMenu">
<div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
<div class="leftMenu1">
<div class="aside-logo">
<div class="asideInner">{{currentUser.MallName}}</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="赞羊严选">
<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 disabled>赞羊严选</el-dropdown-item>
<el-dropdown-item disabled>T1219561424(T1219561424)</el-dropdown-item>
<el-dropdown-item>返回系统</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
</ul>
</div>
</div>
<div class="main_routerPage">
<router-view/>
</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 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>
</template>
<script>
export default {
data() {
return {
//是否显示关闭后的箭头
isShowOne:false,
showTwo:false,
defaultActive:'1-1'
isShowOne: false,
showTwo: false,
defaultActive: '1-1',
currentUser: {},
};
},
created() {
this.currentUser = this.getLocalStorage();
console.log(" this.currentUser", this.currentUser);
},
methods: {
//点击关闭二级窗口
hideTwo(){
this.showTwo=false;
this.isShowOne=true;
},
//鼠标移入
mouseOver(){
this.showTwo=true;
this.isShowOne=false;
},
changeMenu: function() {
this.$router.push({
path: 'Register'
});
}
//点击关闭二级窗口
hideTwo() {
this.showTwo = false;
this.isShowOne = true;
},
//鼠标移入
mouseOver() {
this.showTwo = true;
this.isShowOne = false;
},
changeMenu: function () {
this.$router.push({
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