<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>
        <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>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        //是否显示关闭后的箭头
        isShowOne:false,
        showTwo:false,
        defaultActive:'1-1'
      };
    },
    created() {

    },
    methods: {
        //点击关闭二级窗口
        hideTwo(){
           this.showTwo=false;
           this.isShowOne=true;
        },
        //鼠标移入
        mouseOver(){
            this.showTwo=true;
            this.isShowOne=false;
        },
        changeMenu: function() {
            this.$router.push({
                path: 'Register'
            });
        }
    },
    mounted() {
    }
  };
</script>