<!-- * @Author: your name * @Date: 2022-01-26 10:52:10 * @LastEditTime: 2024-08-01 10:20:35 * @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 v-if="b" class="pipePressure"> <div class="dx" :class="{ active: active }" @click.stop="showAnimate"> 管道动效 </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 v-if="t" 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 { props: { b: { type: Boolean, default: false, }, t: { type: Boolean, default: false, }, }, data() { // downIcon: true; return { pipeColor, mapStyle: true, active: true, }; }, methods: { showAnimate() { this.active = !this.active; this.$emit("showAnimate", this.active); }, // 更改卫星图 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: 435px; bottom: 50px; padding: 5px; font-size: 14px; pointer-events: none; .dx { position: absolute; z-index: 9999; margin-left: 15px; height: 32px; top: -27px; left: -4px; // margin-bottom:10px; color: #fff; line-height: 32px; text-align: center; /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%); box-shadow: inset 0px 1px 2px 1px #125c9b; */ font-size: 14px; padding: 0px 10px; cursor: pointer; background: rgba(31, 106, 215, 0.32); box-sizing: border-box; border: 1px solid #2d64b4; border-radius: 2px; &:hover { // opacity: 0.7; } &.active { background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%); border-radius: 2px; box-sizing: border-box; border: 1px solid #72c1ff; } pointer-events: auto; } // 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: -32px; color: #fff; padding: 5px; position: absolute; display: flex; z-index: 9999; pointer-events: auto; 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>