大屏可视化适配
<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;
/* 将右侧侧边栏推到最右边 */
}
}
}
}