fix:修改首页标点

web

2025-03-31 c29c0efe096aed6d8349f227f909508f8a49c16a

 src/views/screen/temperature/home/index.vue

@@ -2,23 +2,27 @@
    <div class="home">
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point">
                <div class="point-address"></div>
                <div class="point-message">
                    <div class="msg-t">电站尾水出口水温监测点</div>
                    <div class="num">
                        <div class="item">
                            <div class="item-t">水温:</div>
                            <div class="item-num"><span>10</span>°C</div>
                        </div>
                        <div class="item">
                            <div class="item-t">水位:</div>
                            <div class="item-num"><span>1000</span>m</div>
                        </div>
                    </div>
                    <div class="shebei">
                        监测设备： <span>监测设备运行正常(点击跳转)</span>
                    </div>
            <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
                <div class="point-address" @click="handleShow(index)"></div>
                <div class="point-message" v-show="item.showMsg">
                   <div class="msg-box">
                       <div class="msg-t">{{ item.name }}</div>
                       <div class="num">
                           <div class="item">
                               <div class="item-t">水温:</div>
                               <div class="item-num"><span>{{item.temputer}}</span>°C</div>
                           </div>
                           <div class="item">
                               <div class="item-t">水位:</div>
                               <div class="item-num"><span>{{ item.shuiwei }}</span>m</div>
                           </div>
                       </div>
                       <div class="shebei">
                           监测设备：
                           <span v-if="item.device === 1" style="color: #1ab394">监测设备运行正常(点击跳转)</span>
                           <span v-else style="color: #ff0a0a">设备异常</span>
                       </div>
                   </div>
                </div>
            </div>
        </div>
@@ -27,6 +31,15 @@


<script setup>

const pointList = reactive([
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '15%', top: '53%', showMsg: false },
    { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '12%', top: '68%', showMsg: false },
])

const handleShow = (index) => {
    pointList[index].showMsg = !pointList[index].showMsg;
}

</script>

@@ -40,18 +53,17 @@
        top: 0;
        width: 100%;
        height: 100%;
        background: url("@/assets/images/map-bg.png") no-repeat;
        background: url("@/assets/images/tempture-bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: -1;
        z-index: 11;
    }
    .home-c{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 20;
        .point{
            position: absolute;
            left: 58%;
            bottom: 10%;
            .point-address{
                width: 35px;
                height: 40px;
@@ -60,17 +72,21 @@
            }
            .point-message{
                width: 500px;
                height: 200px;
                background: url("@/assets/images/messageInfo-box.png") no-repeat;
                height: 180px;
                background: url("@/assets/images/messageInfo-right.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -500px;
                top: -100px;
                left: 30px;
                top: -60px;
                padding: 30px 50px;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .msg-box{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .msg-t{
                    font-size: 26px;
                    font-weight: bold;
@@ -88,11 +104,6 @@
                            font-size: 22px;
                            font-weight: bold;
                        }
                    }
                }
                .shebei{
                    span{
                        color: #1ab394;
                    }
                }
            }