fix:修改框架

web

2025-06-09 f9ac8fe8cbbb5a91fb047a9e90dec81efca11a01

 src/views/screen/home/index.vue

@@ -1,146 +1,16 @@
<template>
    <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="video-box">
                        <el-icon><VideoPlay /></el-icon>
                    </div>
                    <div class="info-box">
                        <div class="info-t">水电站流量监测点</div>
                        <div class="info-sw">水位：<span>500</span>m</div>
                        <div class="info-ls">流速：<span>15</span>m/s</div>
                        <div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
                        <div class="info-ljll">
                            累计流量：
                            <el-select
                                v-model="selectll"
                                class="m-2"
                                placeholder="Select"
                                size="small"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="(item, idx) in liuliangOptions"
                                    :key="idx"
                                    :label="item.label"
                                    :value="idx"
                                />
                            </el-select>
                            <span>{{ liuliangOptions[selectll].value }}</span>m/s
                        </div>
                    </div>
                </div>
            </div>
        </div>
        11111
    </div>
</template>


<script setup>

import {ref} from "vue";

const selectll = ref(0)

const liuliangOptions = [
    { label: '总计流量', value: 500 },
    { label: '日累计流量', value: 1000 },
    { label: '周累计流量', value: 10000 },
    { label: '月累计流量', value: 300000 },
    { label: '年累计流量', value: 3600000 },
]

</script>


<style scoped lang="scss">
.home{
    height: 100%;
    .home-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("@/assets/images/map-bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: 11;
    }
    .home-c{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 20;
        .point{
            position: absolute;
            left: 58%;
            top: 30%;
            .point-address{
                width: 35px;
                height: 40px;
                background: url("@/assets/images/point.png") no-repeat;
                background-size: 100% 100%;
            }
            .point-message{
                width: 600px;
                height: 200px;
                background: url("@/assets/images/messageInfo-box.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -600px;
                top: -100px;
                padding: 30px 50px 30px 30px;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 20px;
                .video-box{
                    flex-shrink: 0;
                    width: 200px;
                    height: 138px;
                    line-height: 138px;
                    text-align: center;
                    font-size: 38px;
                    background: #cccb40;
                }
                .info-box{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .info-t{
                        font-size: 20px;
                    }
                    .info-ljll{
                        display: flex;
                        align-items: center;
                        :deep(.el-select){
                            width: 100px !important;
                            .el-select__wrapper{
                                color: #fff;
                                background: transparent;
                                .el-select__selected-item{
                                    color: #fff;
                                }
                                .el-select__suffix .el-icon{
                                    color: #fff;
                                }
                                &:hover{
                                    box-shadow: none;
                                }
                            }
                        }
                    }
                    span{
                        display: inline-block;
                        padding: 0 10px;
                    }
                }
            }
        }
    }
}
</style>