hahaPension_admin/src/views/login/bigScreen.vue

<template>
    <div class="screen-container">
        <div class="container">
            <div class="screen-title">
                居家养老服务数据展示
            </div>
            <div class="screen-content">
                <div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                </div>
                <div>
                    <div>
                        <MapWidthMarkers />
                    </div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content">
                            <borderBox1 />
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                    <div>
                        <div class="card-title">服务对象人口统计</div>
                        <div class="card-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import MapWidthMarkers from '@/components/MapWithMarkers/index.vue'
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
const config1 = ref(
    {

        radius: '40%',
        activeRadius: '45%',
        data: [
            {
                name: '周口',
                value: 55
            },
            {
                name: '南阳',
                value: 120
            },
            {
                name: '西峡',
                value: 78
            },
            {
                name: '驻马店',
                value: 66
            },
            {
                name: '新乡',
                value: 80
            }
        ],
        digitalFlopStyle: {
            fontSize: 20
        },
        showOriginValue: true
    }
)
</script>
<style scoped lang="less">
.screen-container {
    width: 100%;
    height: 100vh;
    background-image: url(./../../assets/imgs/screenbg.png);
    background-size: 100% 100%;

    .container {
        width: 100%;
        height: 100%;
        background-image: url(./../../assets/imgs/bg2.png);
        background-size: 100% 100%;

        .screen-title {
            font-size: clamp(2rem, 3vw, 3rem);
            /* 自适应字体大小 */
            width: 100%;
            height: 10vh;
            /* 高度根据内容自动调整 */
            line-height: 8vh;
            /* 调整行高以适应不同字体大小 */
            text-align: center;
            pointer-events: none;
            background-size: cover;
            /* 假设背景图片应该覆盖整个元素 */
            font-family: ZhenyanG-Flash, sans-serif;
            /* 添加备用字体 */
            color: #fff;
            text-shadow: 0 0 35px rgba(22, 165, 255, .75);
        }

        .screen-content {
            height: 90vh;
            display: flex;
            gap: 5px;
            /* 元素之间的间距，推荐现代写法 */
            padding: 0 15px 15px 15px;
            box-sizing: border-box;

            /* 第一个子元素：左侧，占 1 份 */
            &>div:first-child {
                flex: 1;
                height: 100%;
                // background: black;
                display: flex;
                flex-direction: column;
                gap: 5px;

                &>div {
                    flex: 1;
                    width: 100%;
                    background-color: rgba(69, 117, 147, .2);
                }
            }

            /* 第二个子元素：中间，占 2 份 */
            &>div:nth-child(2) {
                flex: 2;
                height: 100%;
                // background: black;
                display: flex;
                flex-direction: column;
                gap: 5px;

                &>div:first-child {
                    flex: 2;
                    width: 100%;
                }

                &>div:last-child {
                    flex: 1;
                    width: 100%;
                    background-color: rgba(69, 117, 147, .2);
                }
            }

            /* 第三个子元素：右侧，占 1 份 */
            &>div:last-child {
                flex: 1;
                height: 100%;
                // background: black;
                display: flex;
                flex-direction: column;
                gap: 5px;

                &>div {
                    flex: 1;
                    width: 100%;
                    background-color: rgba(69, 117, 147, .2);
                }
            }

            .card-title {
                color: #fff;
                font-size: 1.33333rem;
                height: 4.16667rem;
                // margin: 0 24px;
                line-height: 4.16667rem;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                border-bottom: 1px solid hsla(0, 0%, 60%, .1);
                position: relative;

                &::before {
                    content: "";
                    width: 2.58333rem;
                    height: 1.91667rem;
                    margin: auto 3px auto 0;
                    background: url(data:image/png;base64,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) no-repeat 50%;
                    background-size: 50%;
                }
            }
        }

    }
}
</style>