| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:24 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2022-11-12 11:00:36 |
| | | * @LastEditTime: 2022-11-14 14:13:45 |
| | | * @FilePath: \srs-police-affairs\src\views\lyout\index.vue |
| | | * @Description: |
| | | * |
| | |
| | | |
| | | <!-- 菜单导航 --> |
| | | <div class="menu-list"> |
| | | <div |
| | | class="nav-list" |
| | | :class="{ on: currentUrl == item.path }" |
| | | @click="goToPath(item)" |
| | | v-for="(item, index) in menuList" |
| | | :key="index" |
| | | >{{ item.menuName }}</div> |
| | | <div class="nav-list" :class="{ on: currentUrl == item.path }" @click="goToPath(item)" |
| | | v-for="(item, index) in menuList" :key="index">{{ item.menuName }}</div> |
| | | </div> |
| | | |
| | | <!-- 用户登录展示的 --> |
| | |
| | | <mapBox ref="modalForm" /> |
| | | |
| | | <!-- 主体内容区域 --> |
| | | <div |
| | | class="main-content" |
| | | id="MainContent" |
| | | :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" |
| | | > |
| | | <div class="main-content" id="MainContent" |
| | | :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> |
| | | <router-view ref="target-name"></router-view> |
| | | </div> |
| | | |
| | | <el-button |
| | | v-show="leftShow" |
| | | class="flexible-btn" |
| | | <el-button 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> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | { |
| | | menuName: '社区感知', |
| | | path: '/lyout/house' |
| | | |
| | | }, |
| | | { |
| | | menuName: '警力资源', |
| | |
| | | }, |
| | | ], |
| | | |
| | | show: false, |
| | | show: true, |
| | | |
| | | leftShow: true, |
| | | |
| | |
| | | if (this.show) { |
| | | document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn') |
| | | document.querySelector('.screen-full-btn').classList.add('shrink-btn') |
| | | |
| | | document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn') |
| | | document.querySelector('.image-switch-img-btn').classList.add('shrink-btn') |
| | | } else { |
| | |
| | | } |
| | | }, |
| | | |
| | | resize (val) { |
| | | resize (val, flag = false) { |
| | | this.boxWidth = val |
| | | |
| | | this.show = false |
| | | this.show = flag |
| | | |
| | | if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show) |
| | | |
| | | this.$nextTick(() => { |
| | | if (this.show) { |
| | | |
| | | document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn') |
| | | document.querySelector('.screen-full-btn').classList.add('shrink-btn') |
| | | |
| | | document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn') |
| | | document.querySelector('.image-switch-img-btn').classList.add('shrink-btn') |
| | | } else { |
| | | |
| | | document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn') |
| | | document.querySelector('.screen-full-btn').classList.remove('shrink-btn') |
| | | document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn') |
| | | document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn') |
| | | } |
| | | }) |
| | | }, |
| | | } |
| | | } |
| | |
| | | overflow: hidden; |
| | | letter-spacing: 6px; |
| | | |
| | | & > img { |
| | | &>img { |
| | | // width: 100%; |
| | | height: 80%; |
| | | margin: 0 10px 0 10px; |
| | |
| | | } |
| | | } |
| | | |
| | | .user-infor { |
| | | } |
| | | .user-infor {} |
| | | } |
| | | |
| | | .main-container { |
| | |
| | | width: 400px; |
| | | } |
| | | |
| | | .main-content.ake-back { |
| | | .main-content.take-back { |
| | | width: 0px; |
| | | } |
| | | } |