demo:2023-12-28

大屏可视化适配

<template>
    <div class="dataScreen-container">
        <div class="dataScreen-content" ref="dataScreenRef">
            <div class="dataScreen-header">
                <div class="header-lf">
                    <span class="header-screening">2023年12月28日 星期四 10:33:36</span>
                </div>
                <div class="leftHeader">
                    <span>政务信息资源目录</span>
                    <span>3,448</span>
                </div>
                <div class="header-ct">
                    <div class="header-ct-title">
                        <span class="textTitle">鄂尔多斯废弃矿山生态修复项目管理平台</span>
                    </div>
                </div>
                <div class="header-ri">
                    <span class="header-download">
                        <span>今日天气</span>
                        <img src="" alt="">
                        <span>晴</span>
                        <span>10℃</span>
                    </span>
                </div>
                <div class="rightHeader">
                    <span>已共享资源目录</span>
                    <span>3,1451</span>
                </div>
            </div>
            <div class="dataScreen-main">
                <div class="dataScreen-lf">
                    <div class="BaseLibraryDirectory">
                        <div class="title">
                            <div class="h3">基础库目录</div>
                            <div class="p"><span>4</span>大库</div>
                        </div>
                        <div class="list">
                            <div class="li">
                                <img src="@/assets/dashboardPro/ball.png" alt="">
                                <div class="right">
                                    <div class="category">自然人</div>
                                    <div class="count">
                                        <span>1</span>
                                        类
                                    </div>
                                </div>
                            </div>
                            <div class="li">
                                <img src="@/assets/dashboardPro/ball.png" alt="">
                                <div class="right">
                                    <div class="category">自然人</div>
                                    <div class="count">
                                        <span>1</span>
                                        类
                                    </div>
                                </div>
                            </div>
                            <div class="li">
                                <img src="@/assets/dashboardPro/ball.png" alt="">
                                <div class="right">
                                    <div class="category">自然人</div>
                                    <div class="count">
                                        <span>1</span>
                                        类
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="BaseLibraryDirectory">
                        <div class="title">
                            <div class="h3">项目标段</div>
                            <div class="p"><span>19</span>主题</div>
                        </div>
                        <div class="projectBidList">
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="Consistency" name="1">
                                    <div>
                                        东胜区生态修复治理区施工一标段
                                    </div>
                                    <div>
                                        东胜区生态修复治理区施工二标段
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
                <div class="dataScreen-ct"></div>
                <div class="dataScreen-rg"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const dataScreenRef = ref(null);

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
};

// 初始化的时候直接设置数据大屏的缩放比例，dataScreenRef 为整个大盒子 DOM
onMounted(() => {
    if (dataScreenRef.value) {
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
        dataScreenRef.value.style.width = `1920px`;
        dataScreenRef.value.style.height = `1080px`;
    }
    window.addEventListener("resize", resize);
});

// 设置响应式
const resize = () => {
    if (dataScreenRef.value) {
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
};
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>

.dataScreen-container {
    width: 100%;
    height: 100%;

    // 大屏背景
    .dataScreen-content {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -9;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.3s;
        transform-origin: left top;
        background: url("@/assets/dashboardPro/bg.png") no-repeat;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
        background-size: cover;

        // 头部区域
        .dataScreen-header {
            width: 100%;
            height: 160px;
            position: relative;
            z-index: -1;

            .header-lf {
                position: absolute;
                top: 40px;
                left: 18px;
                z-index: 9;

                .header-screening {
                    color: #d0cfcf;
                    font-size: 18px;
                }
            }

            .leftHeader {
                width: 354px;
                height: 66px;
                z-index: 999;
                position: absolute;
                top: 76px;
                left: 320px;
                background: url("@/assets/dashboardPro/lhead.png") no-repeat;
                font-size: 18px;

                span {
                    line-height: 52px;
                }

                :first-child {
                    margin-left: 52px;
                    font-style: italic;
                    color: #e8e8e8;
                    text-shadow: 0px 0px 4px #f5f1d6;
                }

                :last-child {
                    margin-left: 36px;
                    font-size: 22px;
                    color: rgb(242, 227, 207);
                    text-shadow: 2px -2px 4px #f9ea89;
                }
            }

            .rightHeader {
                width: 354px;
                height: 66px;
                z-index: 999;
                position: absolute;
                top: 76px;
                right: 320px;
                background: url("@/assets/dashboardPro/rhead.png") no-repeat;
                font-size: 18px;

                span {
                    line-height: 52px;
                }

                :first-child {
                    margin-left: 52px;
                    font-style: italic;
                    color: #e8e8e8;
                    text-shadow: 0px 0px 4px #f5e78b;
                }

                :last-child {
                    margin-left: 36px;
                    font-size: 22px;
                    color: rgb(242, 227, 207);
                    text-shadow: 2px -2px 4px #f9ea89;
                }
            }

            .header-ri {
                position: absolute;
                top: 40px;
                right: 18px;

                .header-download {
                    color: #d0cfcf;
                    font-size: 18px;
                }
            }

            .header-ct {
                position: relative;
                flex: 1;
                height: 100%;
                z-index: -1;

                .header-ct-title {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 160px;
                    font-family: YouSheBiaoTiHei;
                    font-size: 30px;
                    line-height: 60px;
                    color: #fff;
                    text-align: center;
                    letter-spacing: 4px;
                    background: url("@/assets/dashboardPro/header.png") no-repeat;
                    background-size: 100% 100%;
                    z-index: -1;

                    .textTitle {
                        text-shadow: 0px 0px 4px rgba(62, 133, 240, 0.8);
                    }
                }
            }

        }

        // 内容区
        .dataScreen-main {
            height: 100%;
            display: flex;
            margin-top: -70px;

            // 中间地图区域
            .dataScreen-ct {
                flex: 1;
            }

            // 左侧区域
            .dataScreen-lf {
                float: left;
                background: url("@/assets/dashboardPro/boxbg_20.png") no-repeat;
                flex-basis: 345px;
                /* 侧边栏的初始宽度 */
                height: 100%;
                order: -1;
                /* 负序数将左侧侧边栏移动到最前面 */

                .BaseLibraryDirectory {
                    color: #d0cfcf;
                    padding: 10px;

                    .title {
                        display: flex;
                        align-items: center;

                        .h3 {
                            height: 16px;
                            border-left: 3px solid goldenrod;
                            border-right: 3px solid goldenrod;
                            font-weight: normal;
                            font-size: 18px;
                            padding: 0 10px;
                            line-height: 16px;
                        }

                        .p {
                            flex: 1;
                            color: #0099d3;
                            border-bottom: 3px solid #01407c;
                            text-align: right;
                            margin-left: 10px;
                            font-style: italic;

                            span {
                                margin-right: 6px;
                                font-size: 22px;
                            }
                        }
                    }

                    .list {
                        display: flex;
                        flex-wrap: wrap;

                        .li {
                            /* 让一行有两个元素 */
                            width: 50%;
                            /* 或者使用 flex-basis 指定宽度 */
                            height: 52px;
                            height: 100px;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            img {
                                width: 83px;
                                height: 71px;
                            }

                            .right {
                                .category {
                                    color: #0099d3;
                                    font-size: 18px;
                                    line-height: 30px;
                                }

                                .count {
                                    color: #d0cfcf;

                                    span {
                                        font-size: 28px;
                                        color: goldenrod;
                                    }
                                }
                            }
                        }

                        /* 选择子元素为奇数的设置右内边距 */
                        .li:nth-child(odd) {
                            padding-right: 10px;
                            /* 右内边距 */
                        }

                        /* 选择子元素为偶数的设置左内边距 */
                        .li:nth-child(even) {
                            padding-left: 10px;
                            /* 左内边距 */
                        }
                    }
                    .projectBidList{
                        .li{
                            
                        }
                    }
                }
            }

            // 右侧区域
            .dataScreen-rg {
                float: right;
                background: url("@/assets/dashboardPro/boxbg_20.png") no-repeat;
                // width: 345px;
                flex-basis: 345px;
                /* 侧边栏的初始宽度 */
                height: 100%;
                margin-left: auto;
                /* 将右侧侧边栏推到最右边 */
            }
        }
    }
}