From be1f4296a09f907fd3218bc423d24b817a761229 Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期四, 16 二月 2023 16:33:21 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.20.39:8989/r/LFWEB_NEW --- src/components/Screen/bottom.vue | 174 ++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 138 insertions(+), 36 deletions(-) diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue index be02463..1fba300 100644 --- a/src/components/Screen/bottom.vue +++ b/src/components/Screen/bottom.vue @@ -3,7 +3,13 @@ <div class="bottom1"> <div class="bottom11"></div> <div class="bottom12"> - <div class="bottombtn"> + <div + :class="currMenu == item.menuName ? 'active' : ''" + v-for="item in menuList" + :key="item.menuName" + class="bottombtn" + @click="handleMenuClick(item)" + > <el-popover popper-class="popover" placement="top" @@ -17,26 +23,15 @@ <div class="popover-content__list"> <div class="popover-content__list__item" - v-for="item in projectInfoList" - :key="item.id" - :class="currProject == item.name ? 'active' : ''" + v-for="child in item.children" + :key="child.id" + :class="currProject == child.name ? 'active' : ''" + @click="handlePopoverClick(child)" > - {{ item.name }} + {{ child.name }} </div> </div> </div> - </el-popover> - </div> - <div class="bottombtn"> - <el-popover placement="top" width="100" trigger="click"> - <!-- 鍐呭 --> - <span slot="reference">宸ョ▼灞曠ず</span> - </el-popover> - </div> - <div class="bottombtn"> - <el-popover placement="top" width="100" trigger="click"> - <!-- 鍐呭 --> - <span slot="reference">宸ョ▼宸¤</span> </el-popover> </div> </div> @@ -55,23 +50,71 @@ return { YXState: true, yxImg: require("../../assets/img/Screen/yximg.png"), + currMenu: "椤圭洰灞曠ず", currProject: "鍏ㄧ悆绠$綉鍥�", - projectInfoList: [ + menuList: [ { - name: "鍏ㄥ浗绠$綉鍥�", - id: "qggwt", + menuName: "椤圭洰灞曠ず", + children: [ + { + name: "鍏ㄥ浗绠$綉鍥�", + id: "qggwt", + }, + { + name: "鍏ㄧ悆绠$綉鍥�", + id: "qqgwt", + }, + { + name: "鍏ㄥ浗椤圭洰", + id: "qgxm", + }, + { + name: "鍏ㄧ悆椤圭洰", + id: "qqxm", + }, + ], }, { - name: "鍏ㄧ悆绠$綉鍥�", - id: "qqgwt", + menuName: "宸ョ▼灞曠ず", + children: [ + { + name: "涓縿涓滅嚎绠¢亾宸ョ▼", + id: "zedx", + }, + { + name: "瑗挎皵涓滆緭涓夌嚎涓柇绠¢亾宸ョ▼", + id: "xqds", + }, + { + name: "涓紖澶╃劧姘旂閬撳伐绋�", + id: "zmtrq", + }, + { + name: "灞变笢瀹樼綉鏂板共绾�", + id: "sdxgx", + }, + ], }, { - name: "鍏ㄥ浗椤圭洰", - id: "qgxm", - }, - { - name: "鍏ㄧ悆椤圭洰", - id: "qqxm", + menuName: "宸ョ▼宸¤", + children: [ + { + name: "涓縿涓滅嚎绠¢亾宸ョ▼", + id: "zedx", + }, + { + name: "瑗挎皵涓滆緭涓夌嚎涓柇绠¢亾宸ョ▼", + id: "xqds", + }, + { + name: "涓紖澶╃劧姘旂閬撳伐绋�", + id: "zmtrq", + }, + { + name: "灞变笢瀹樼綉鏂板共绾�", + id: "sdxgx", + }, + ], }, ], } @@ -91,6 +134,28 @@ Viewer.imageryLayers._layers[3].show = true } this.YXState = !this.YXState + }, + handleMenuClick(menu) { + this.currMenu = menu.menuName + }, + handlePopoverClick(child) { + this.currProject = child.name + }, + + //椤圭洰灞曠ず + DisplayCurrentProject(parm) { + console.log(parm) + //鎵撳紑鎴栬�呭姞杞藉浘灞� + + //椋炲埌鎸囧畾浣嶇疆 + }, + + //宸ョ▼婕父椋炶 + FlyCurrentProject(parm) { + console.log(parm) + //鎵撳紑鎴栬�呭姞杞藉浘灞� + + //寮�濮嬮琛� }, }, } @@ -140,7 +205,7 @@ .bottombtn { height: 36px; width: 147px; - background: url(../../assets/img/Screen/centerbtn.png); + background: url(~@/assets/img/Screen/centerbtn.png); background-size: 100% 100%; background-repeat: no-repeat; font-size: 1rem; @@ -150,6 +215,10 @@ color: #fff; font-weight: 600; cursor: pointer; + &.active { + background: url(~@/assets/img/Screen/centerbtnc.png); + background-size: 100% 100%; + } } } @@ -167,25 +236,58 @@ } } .popover { - background-color: aqua; - + display: flex; + justify-content: center; + width: 163px; + height: 239px; + background: url(~@/assets/img/Screen/centerTooltip.png); + background-size: 100% 100%; + border: none; + .popper__arrow { + display: none; + } .popover-content { &__header { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 130px; + height: 30px; + font-size: 18px; + color: #fff; &::before, &::after { + margin: 0 5px; content: ""; display: inline-block; - background-color: aqua; + background-color: #466c99; border-radius: 50%; - width: 10px; - height: 10px; + width: 8px; + height: 8px; } } &__list { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 190px; + &__item { - background-color: orange; + color: #fff; + width: 130px; + height: 30px; + line-height: 30px; + text-align: center; + // background-color: orange; + cursor: pointer; + background: url(~@/assets/img/Screen/btnbg.png); + background-size: 100% 100%; + &.active { - background-color: aqua; + // background-color: aqua; + background: url(~@/assets/img/Screen/btnc.png); + background-size: 100% 100%; } } } -- Gitblit v1.9.3