| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:24 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-04 10:46:36 |
| | | * @LastEditTime: 2023-02-07 10:05:32 |
| | | * @FilePath: \srs-police-affairs\src\views\layout\index.vue |
| | | * @Description: |
| | | * |
| | |
| | | <div class="wrapper"> |
| | | <div class="main-header"> |
| | | <div class="menu-list left"> |
| | | <div |
| | | @mouseenter="item.childrenFlag = true" |
| | | @mouseleave="item.childrenFlag = false" |
| | | class="nav-list" |
| | | @click="goToPath(item)" |
| | | v-for="(item, index) in menuLeftList" |
| | | :key="index" |
| | | > |
| | | <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" |
| | | @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index"> |
| | | <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> |
| | | <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> |
| | | <div |
| | | v-for="(subItem, subIndex) in item.children" |
| | | :key="subIndex" |
| | | @click="goToPath(subItem)" |
| | | > |
| | | <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> |
| | | {{ |
| | | subItem.menuName |
| | | subItem.menuName |
| | | }} |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <!-- 菜单导航 --> |
| | | <div class="menu-list right"> |
| | | <div |
| | | @mouseenter="item.childrenFlag = true" |
| | | @mouseleave="item.childrenFlag = false" |
| | | class="nav-list" |
| | | @click="goToPath(item)" |
| | | v-for="(item, index) in menuRightList" |
| | | :key="index" |
| | | > |
| | | <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" |
| | | @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index"> |
| | | <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> |
| | | <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> |
| | | <div |
| | | v-for="(subItem, subIndex) in item.children" |
| | | :key="subIndex" |
| | | @click="goToPath(subItem)" |
| | | > |
| | | <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> |
| | | {{ |
| | | subItem.menuName |
| | | subItem.menuName |
| | | }} |
| | | </div> |
| | | </div> |
| | |
| | | <!-- 地图区域 --> |
| | | <map-box ref="modalForm"> |
| | | <!-- 主体内容区域 --> |
| | | <div |
| | | slot="mainContent" |
| | | class="main-content" |
| | | id="MainContent" |
| | | :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" |
| | | > |
| | | <div slot="mainContent" class="main-content" id="MainContent" |
| | | :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> |
| | | <router-view ref="target-name"></router-view> |
| | | </div> |
| | | |
| | | <el-button |
| | | slot="showButton" |
| | | v-show="leftShow" |
| | | class="flexible-btn" |
| | | <el-button slot="showButton" v-show="leftShow" class="flexible-btn" |
| | | :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" |
| | | :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" |
| | | id="FlexibleBtn" |
| | | type="primary" |
| | | @click="flexibelClick" |
| | | ></el-button> |
| | | :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" |
| | | @click="flexibelClick"></el-button> |
| | | </map-box> |
| | | </div> |
| | | </div> |
| | |
| | | menuName: '运维管理', |
| | | openExternal: true, |
| | | // 内网 |
| | | path: 'http://10.141.11.11:8081/#/security/security' |
| | | // path: 'http://192.168.0.126:1888/#/security/security' |
| | | // path: 'http://10.141.11.11:8081/#/security/security' |
| | | path: 'http://192.168.0.201:1888/#/security/security' |
| | | } |
| | | ], |
| | | |
| | |
| | | goToPath (params) { |
| | | if (params.openExternal) { |
| | | // 跳过登录方式 |
| | | //var path = params.path + "?token=" + getToken() |
| | | var path = params.path + "?token=" + getToken() |
| | | //账户名密码模拟登录方式 |
| | | var path = params.path + '?securitySupervisionSystem={"tokenMY":"987654321S","data":{"rese":"admin","sap":"admin","dip":"000000"}}' |
| | | // var path = params.path + '?securitySupervisionSystem={"tokenMY":"987654321S","data":{"rese":"admin","sap":"admin","dip":"000000"}}' |
| | | // console.log(path,5555) |
| | | window.open(path) |
| | | return |
| | |
| | | overflow: hidden; |
| | | letter-spacing: 6px; |
| | | |
| | | & > img { |
| | | &>img { |
| | | // width: 100%; |
| | | height: 80%; |
| | | margin: 0 10px 0 10px; |
| | |
| | | // border-radius: 10px 16px 10px 16px; |
| | | transform: skew(58deg); |
| | | |
| | | & > span { |
| | | &>span { |
| | | transform: skew(-58deg); |
| | | } |
| | | } |
| | |
| | | // border-radius: 16px 10px 16px 10px; |
| | | transform: skew(-58deg); |
| | | |
| | | & > span { |
| | | &>span { |
| | | transform: skew(58deg); |
| | | } |
| | | } |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | & > .nav-list { |
| | | &>.nav-list { |
| | | |
| | | // color: rgba(32, 106, 181, 1); |
| | | // border-bottom: 2px solid #409eff; |
| | | & > span.on { |
| | | &>span.on { |
| | | color: rgba(252, 189, 86, 1); |
| | | } |
| | | } |
| | |
| | | justify-content: space-around; |
| | | padding-top: 4px; |
| | | |
| | | & > div { |
| | | &>div { |
| | | width: 100px; |
| | | height: 40px; |
| | | background-color: rgba(168, 222, 255, 0.6); |