<!-- * @Author: your name * @Date: 2022-01-26 10:52:10 * @LastEditTime: 2024-07-26 10:07:16 * @LastEditors: 纪泽龙 jizelong@qq.com * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/components/PipeColor.vue --> <template> <div> <div class="pipePressure"> <!-- <div style="float: left;margin-right: 5px;"> <div class="hasColorBox"> <img src="../../assets/image/bigtyx.svg" alt=""> 调压箱 </div> <div class="hasColorBox"> <img src="../../assets/image/bigfmj.svg" alt=""> 阀门井 </div> <div class="hasColorBox"> <img src="../../assets/image/bigcz.svg" alt=""> 厂站 </div> <div class="hasColorBox"> <img src="../../assets/image/biguser.svg" alt=""> 用户 </div> <div class="hasColorBox"> <img src="../../assets/image/bigjk.svg" alt=""> 监控 </div> </div> --> <div class=""> <div class="hasColorBox" :style="{ color: pipeColor[`1`] }"> <div :style="{ backgroundColor: pipeColor[`1`] }"></div> 低压管线 </div> <div class="hasColorBox" :style="{ color: pipeColor[`2`] }"> <div :style="{ backgroundColor: pipeColor[`2`] }"></div> 中压管线 </div> <div class="hasColorBox" :style="{ color: pipeColor[`3`] }"> <div :style="{ backgroundColor: pipeColor[`3`] }"></div> 次高压管线 </div> <div class="hasColorBox" :style="{ color: pipeColor[`4`] }"> <div :style="{ backgroundColor: pipeColor[`4`] }"></div> 高压管线 </div> </div> </div> <div class="mapChange"> <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div> <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div> </div> </div> </template> <script> import { pipeColor } from "@/utils/mapClass/config.js"; export default { data() { downIcon: true; return { pipeColor, mapStyle: true, }; }, methods: { // 更改卫星图 mapChange(num) { if (num == 1) { this.mapStyle = false; } else { this.mapStyle = true; } this.$parent.map.changeMap(this.mapStyle); }, }, }; </script> <style lang="scss" scoped> .pipePressure { width: 130px; height: auto; // border: 1px solid #a5a5a5; background-color: #112238b3; position: fixed; color: rgb(205, 219, 228); right: 400px; bottom: 50px; padding: 5px; font-size: 14px; pointer-events: none; // background: rgba(6, 29, 51, 0.8); .hasColorBox { // border: 1px solid #053b6a; padding: 2px 5px; margin-bottom: 5px; & > div { display: inline-block; width: 20px; height: 10px; margin-right: 10px; } } } .hasColorBox > img { width: 14px; } .mapChange { left: 10px; top: 50px; color: #fff; padding: 5px; position: absolute; display: flex; z-index: 9999; div { width: 128px; height: 32px; text-align: center; line-height: 3px; background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center; line-height: 34px; // background-color: #053b6a; // border: 1px solid #339CC9; // padding: 3px 6px; margin-left: 8px; color: #ffffff; cursor: pointer; font-size: 14px; transition: all 0.2s linear; &.active { background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom center; &:hover { background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom center; opacity: 1; } } &:hover { background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom center; opacity: 0.7; } } } </style>