| | |
| | | <template> |
| | | <div class="synthesis"> |
| | | <div |
| | | class="synthesis" |
| | | v-loading="$store.state.loading" |
| | | element-loading-spinner="el-icon-loading" |
| | | element-loading-background="rgba(0, 0, 0, 0.8)" |
| | | > |
| | | <div class="lefIcon"> |
| | | <ul> |
| | | <li |
| | | v-for="item in showMenuList" |
| | | :class="{ lefMenuActive: showMenuFlag == item.id }" |
| | | > |
| | | <div class="menuDiv" :title="item.name" @click="setMenuChange(item)"> |
| | | <div class="menuImage" :class="item.class"></div> |
| | | <div |
| | | class="menuDiv" |
| | | :title="item.name" |
| | | @click="setMenuChange(item)" |
| | | > |
| | | <div |
| | | class="menuImage" |
| | | :class="item.class" |
| | | ></div> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div class="rightContent"> |
| | | <div class="left_main" :class="{ left_main_show: !openStatus }"> |
| | | <div |
| | | class="left_main" |
| | | :class="{ left_main_show: !openStatus }" |
| | | > |
| | | <div class="right_Map"> |
| | | <left-menu></left-menu> |
| | | </div> |
| | |
| | | }; |
| | | }, |
| | | watch: {}, |
| | | created() {}, |
| | | created() { }, |
| | | methods: { |
| | | //左侧菜单滑动显隐 |
| | | setMenuChange(res) { |
| | |
| | | } |
| | | |
| | | .menu_img1 { |
| | | background: url('../../assets/img/synthesis/系统菜单.png') no-repeat |
| | | background: url("../../assets/img/synthesis/系统菜单.png") no-repeat |
| | | center; |
| | | } |
| | | .menu_img2 { |
| | | background: url('../../assets/img/synthesis/矩形 8 拷贝 2.png') |
| | | background: url("../../assets/img/synthesis/矩形 8 拷贝 2.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img3 { |
| | | background: url('../../assets/img/synthesis/图层 6 拷贝.png') no-repeat |
| | | background: url("../../assets/img/synthesis/图层 6 拷贝.png") no-repeat |
| | | center; |
| | | } |
| | | .menu_img4 { |
| | | background: url('../../assets/img/synthesis/图层 8 拷贝 2.png') |
| | | background: url("../../assets/img/synthesis/图层 8 拷贝 2.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img5 { |
| | | background: url('../../assets/img/synthesis/矢量智能对象 拷贝 3.png') |
| | | background: url("../../assets/img/synthesis/矢量智能对象 拷贝 3.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img6 { |
| | | background: url('../../assets/img/synthesis/图层 9 拷贝 4.png') |
| | | background: url("../../assets/img/synthesis/图层 9 拷贝 4.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img7 { |
| | | background: url('../../assets/img/synthesis/图层 7 拷贝 5.png') |
| | | background: url("../../assets/img/synthesis/图层 7 拷贝 5.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img8 { |
| | | background: url('../../assets/img/synthesis/图层 5 拷贝 6.png') |
| | | background: url("../../assets/img/synthesis/图层 5 拷贝 6.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img9 { |
| | | background: url('../../assets/img/synthesis/矩形 8 拷贝 11.png') |
| | | background: url("../../assets/img/synthesis/矩形 8 拷贝 11.png") |
| | | no-repeat center; |
| | | } |
| | | .menu_img10{ |
| | | background: url('../../assets/img/synthesis/场景打开1.png') |
| | | no-repeat center; |
| | | .menu_img10 { |
| | | background: url("../../assets/img/synthesis/场景打开1.png") no-repeat |
| | | center; |
| | | } |
| | | } |
| | | // li { |
| | |
| | | .active { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center; |
| | | background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | |
| | | .menuLayer { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center; |
| | | background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | } |
| | | } |
| | | /deep/.el-loading-spinner i{ |
| | | color: #1890FF; |
| | | } |
| | | } |
| | | </style> |