fix:修改首页标点

web

2025-03-31 c29c0efe096aed6d8349f227f909508f8a49c16a

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

@@ -3,8 +3,9 @@
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
                <div class="point-address"></div>
                <div class="point-message">
                <div class="point-address" @click="handleShow(index)"></div>
                <div class="point-message" v-show="item.showMsg">
                    <div class="msg-box">
                    <div class="video-box">
                        <el-icon><VideoPlay /></el-icon>
                    </div>
@@ -36,6 +37,7 @@
            </div>
        </div>
    </div>
    </div>
</template>


@@ -44,8 +46,8 @@

const selectll = ref(0)

const pointList = [
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '46%', top: '70%',
const pointList = reactive([
    { name: '新扎沟口流量监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '18%', top: '67%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
@@ -54,7 +56,7 @@
            { label: '年累计流量', value: 3600000 },
        ]
    },
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '55%', top: '10%',
    { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '60%', top: '12.5%', showMsg: false,
        liuliangOptions: [
            { label: '总计流量', value: 500 },
            { label: '日累计流量', value: 1000 },
@@ -63,7 +65,11 @@
            { label: '年累计流量', value: 3600000 },
        ]
    },
]
])

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

</script>

@@ -97,16 +103,20 @@
            .point-message{
                width: 600px;
                height: 200px;
                background: url("@/assets/images/messageInfo-left.png") no-repeat;
                background: url("@/assets/images/messageInfo-right.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -600px;
                top: -100px;
                padding: 30px 50px 30px 30px;
                left: 30px;
                top: -70px;
                padding: 30px 30px 30px 60px;
                color: #fff;
                .msg-box{
                    width: 100%;
                    height: 100%;
                display: flex;
                align-items: center;
                gap: 20px;
                }
                .video-box{
                    flex-shrink: 0;
                    width: 200px;