From 7a279b2d4960c451599da4274f5b8c53ca33067e Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 16 九月 2024 22:47:13 +0800
Subject: [PATCH] 新大屏引入
---
src/views/screen/index.vue | 1221 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 1,191 insertions(+), 30 deletions(-)
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 477c690..ee424c6 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,47 +1,1208 @@
<template>
- <div class="screen-container">
- <!-- <screen-title></screen-title> -->
- <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
- <!-- <screen-wrapper></screen-wrapper> -->
- <NewPage></NewPage>
- </v-scale-screen>
- </div>
+ <div class="container" ref="contaner">
+ <header>
+ <img src="@/assets/images/header-bg.png" />
+ </header>
+ <div class="main-contaner">
+ <div class="data-statistics-content">
+ <img src="@/assets/images/workOrder-title.png" class="title" />
+ <div class="main-left-container">
+ <div class="work-order-container">
+ <img
+ src="@/assets/images/subheading1.png"
+ class="subheading-title"
+ />
+ <div class="statistics-container">
+ <div
+ class="item-statistics-container"
+ v-for="(item, index) in statistics"
+ :key="index"
+ >
+ <itemSubheading :isData="item"></itemSubheading>
+ </div>
+ </div>
+ <img
+ src="@/assets/images/decorate-border.png"
+ class="decorate-border"
+ />
+ </div>
+
+ <div class="histogram-container">
+ <img
+ src="@/assets/images/subheading1.png"
+ class="subheading-title"
+ />
+ <div class="statistics-container">
+ <div class="DrawLine-content">
+ <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
+ <lineChart></lineChart>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="map-container" ref="isMap">
+ <mapApp></mapApp>
+ <div class="btn-container">
+ <img src="@/assets/images/btn-bg.png" class="bg-img" />
+ <div class="btn-list">
+ <img
+ :src="activerBtnType === item.id ? item.bgActiver : item.bg"
+ v-for="item in btnList"
+ :key="item.id"
+ @click="activerBtnType = item.id"
+ />
+ </div>
+ </div>
+ </div>
+
+ <div class="data-statistics-content">
+ <div class="facility-container">
+ <img src="@/assets/images/facility-title.png" class="title" />
+ <div class="facility-content">
+ <div class="item-facility-data">
+ <img
+ src="@/assets/images/facility-title-3.png"
+ class="item-facility-icon"
+ />
+ <ul>
+ <li v-for="(item, index) in facilityData.video" :key="index">
+ <div class="value">{{ item.value ? item.value : "-" }}</div>
+ <div class="title">{{ item.title }}</div>
+ </li>
+ </ul>
+ </div>
+ <div class="item-facility-data">
+ <img
+ src="@/assets/images/facility-title-1.png"
+ class="item-facility-icon"
+ />
+ <ul>
+ <li v-for="(item, index) in facilityData.car" :key="index">
+ <div class="value">{{ item.value ? item.value : "-" }}</div>
+ <div class="title">{{ item.title }}</div>
+ </li>
+ </ul>
+ </div>
+ <div class="item-facility-data">
+ <img
+ src="@/assets/images/facility-title-2.png"
+ class="item-facility-icon"
+ />
+ <ul>
+ <li
+ v-for="(item, index) in facilityData.faceDetection"
+ :key="index"
+ >
+ <div class="value">{{ item.value ? item.value : "-" }}</div>
+ <div class="title">{{ item.title }}</div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="normal-container">
+ <img src="@/assets/images/normal-title.png" class="title" />
+ <div class="normal-statistics-content">
+ <ul class="list-title-container">
+ <li>鍦板尯</li>
+ <li>浜鸿劯璁惧</li>
+ <li>杞﹁締璁惧</li>
+ <li>瑙嗛璁惧</li>
+ </ul>
+ <div class="list-content">
+ <div class="list-content-to is-scroll-bar">
+ <ul
+ class="item-list"
+ v-for="(item, index) in facilityNormal"
+ :key="index"
+ >
+ <li class="name">{{ item.name }}</li>
+ <li>{{ item.face }}</li>
+ <li>{{ item.car }}</li>
+ <li>{{ item.video }}</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <img src="@/assets/images/video-title.png" class="video-title" />
+ </div>
+
+ <footer>
+ <img src="@/assets/images/footer-title-bg.png" class="footer-title" />
+ <div class="footer-container">
+ <div class="footer-statistics-container">
+ <div class="face-container">
+ <div
+ class="item-face-container"
+ :style="item.style"
+ v-for="(item, index) in faceData"
+ :key="index"
+ >
+ <div class="proportion">
+ <img src="@/assets/images/face-num-bg.png" />
+ <div class="value">{{ item.proportion }}%</div>
+ </div>
+ <div class="title">{{ item.title }}</div>
+ </div>
+ </div>
+
+ <div class="video-container">
+ <div
+ class="item-video-data"
+ v-for="(item, index) in videoData"
+ :key="index"
+ >
+ <div class="video-data">
+ <div class="proportion">{{ item.proportion }}%</div>
+ </div>
+ <div class="item-video-title">{{ item.title }}</div>
+ </div>
+ </div>
+
+ <div class="car-container">
+ <div
+ class="item-car-container"
+ v-for="(item, index) in carData"
+ :key="index"
+ :style="item.style"
+ >
+ {{ item.title }} <span>{{ item.proportion }}%</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </footer>
+ </div>
</template>
<script>
-import ScreenTitle from './components/screen-title/index.vue';
-import ScreenWrapper from './components/screen-wrapper/index.vue';
-import NewPage from './newPage/index.vue'
+import itemSubheading from '../screen/components/subheading.vue' // 鐜舰缁熻鍥�
+import lineChart from '../screen/components/lineChart.vue' // 鎶樼嚎缁熻鍥�
+import mapApp from '../screen/components/map.vue' // 鍦板浘
export default {
- name: 'App',
- components: {
- ScreenTitle,
- ScreenWrapper,
- NewPage,
- },
- data() {
+ name: 'examineApp',
+ components: { mapApp, itemSubheading, lineChart },
+ data () {
return {
- }
- },
- mounted() {
+ // 璁惧鏁版嵁
+ facilityData: {
+ video: [
+ {
+ value: 4589,
+ title: '璁惧鎬绘暟'
+ },
+ {
+ value: 4294,
+ title: '璁惧姝ｅ父鏁�'
+ },
+ {
+ value: 295,
+ title: '璁惧寮傚父鏁�'
+ }
+ ],
+ car: [
+ {
+ value: 4589,
+ title: '璁惧鎬绘暟'
+ },
+ {
+ value: 4294,
+ title: '璁惧姝ｅ父鏁�'
+ },
+ {
+ value: 295,
+ title: '璁惧寮傚父鏁�'
+ }
+ ],
+ faceDetection: [
+ {
+ value: 4589,
+ title: '璁惧鎬绘暟'
+ },
+ {
+ value: 4294,
+ title: '璁惧姝ｅ父鏁�'
+ },
+ {
+ value: 295,
+ title: '璁惧寮傚父鏁�'
+ }
+ ]
+ },
+ // 璁惧姝ｅ父鐜�
+ facilityNormal: [
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ },
+ {
+ name: '瀵岄『鍖�',
+ face: '23.34%',
+ car: '45.12%',
+ video: '23.12%'
+ }
+ ],
+
+ // 浜鸿劯鑰冩牳
+ faceData: [
+ {
+ title: '瑙嗗浘搴撳鎺ョǔ瀹氭��',
+ proportion: 100,
+ style: {
+ top: '13%',
+ left: '2%'
+ }
+ },
+ {
+ title: '鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�',
+ proportion: 100,
+ style: {
+ top: '13%',
+ right: '2%'
+ }
+ },
+ {
+ title: '鐐逛綅鍦ㄧ嚎鐜�',
+ proportion: 100,
+ style: {
+ top: '23%',
+ left: '19%'
+ }
+ },
+ {
+ title: '鎶撴媿鍥剧墖鍚堟牸鎬�',
+ proportion: 100,
+ style: {
+ top: '23%',
+ right: '19%'
+ }
+ },
+ {
+ title: '鎶撴媿鏁版嵁澶у浘鍙敤鎬�',
+ proportion: 100,
+ style: {
+ bottom: '18%',
+ left: '2%'
+ }
+ },
+ {
+ title: '鐩綍涓�鑷寸巼',
+ proportion: 100,
+ style: {
+ bottom: '18%',
+ right: '2%'
+ }
+ },
+ {
+ title: '淇℃伅閲囬泦鍑嗙‘鐜�',
+ proportion: 100,
+ style: {
+ bottom: '2%',
+ left: '19%'
+ }
+ },
+ {
+ title: '鎶撴媿鏁版嵁鍙婃椂涓婁紶鍑嗘椂鎬�',
+ proportion: 100,
+ style: {
+ bottom: '2%',
+ right: '19%'
+ }
+ }
+ ],
+
+ // 瑙嗛鑰冩牳
+ videoData: [
+ {
+ title: '鐐逛綅鍦ㄧ嚎鐜�',
+ proportion: 100
+ },
+ {
+ title: '閮ㄧ骇鐐逛綅鍦ㄧ嚎鐜�',
+ proportion: 100
+ },
+ {
+ title: '閲嶇偣鐐逛綅鍦ㄧ嚎鐜�',
+ proportion: 100
+ },
+ {
+ title: '閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�',
+ proportion: 100
+ },
+ {
+ title: '褰曞儚鍙敤鐜�',
+ proportion: 10
+ },
+ {
+ title: '閮ㄧ骇宸℃煡褰曞儚鍙敤鐜�',
+ proportion: 100
+ },
+ {
+ title: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�',
+ proportion: 100
+ },
+ {
+ title: '閲嶇偣鐐逛綅鏍囨敞姝ｇ‘鐜�',
+ proportion: 100
+ },
+ {
+ title: '瑙嗛鍥惧儚璧勬簮瀹夊叏绠＄悊',
+ proportion: 100
+ },
+ {
+ title: '閲嶇偣鐐逛綅鏍℃椂姝ｇ‘鐜�',
+ proportion: 100
+ },
+ {
+ title: '涓�鏈轰竴妗ｅ悎鏍艰溅',
+ proportion: 100
+ },
+ {
+ title: '涓�鏈轰竴妗ｆ敞鍐岃溅',
+ proportion: 100
+ },
+ {
+ title: '妗ｆ鑰冩牳姣�',
+ proportion: 100
+ },
+ {
+ title: '骞冲彴鍦ㄧ嚎鐜�',
+ proportion: 100
+ }
+ ],
+
+ // 杞﹁締鑰冩牳
+ carData: [
+ {
+ title: '鎶撴媿鏁版嵁澶у浘鍙敤鎬�',
+ proportion: 100,
+ style: {
+ top: '7%',
+ left: '15%'
+ }
+ },
+ {
+ title: '璁惧鎶撴媿鏁版嵁鍑嗙‘',
+ proportion: 100,
+ style: {
+ top: '7%',
+ left: '59.2%'
+ }
+ },
+ {
+ title: '鑱旂綉鍗″彛璁惧鐩綍涓�鑷崇巼',
+ proportion: 100,
+ style: {
+ top: '26%',
+ left: '5%'
+ }
+ },
+ {
+ title: '淇℃伅閲囬泦鍑嗙‘鐜�',
+ proportion: 100,
+ style: {
+ top: '26%',
+ left: '63%'
+ }
+ },
+ {
+ title: '璁惧鎶撴媿鏁版嵁瀹屾暣鎬�',
+ proportion: 100,
+ style: {
+ top: '46%',
+ left: '12%'
+ }
+ },
+ {
+ title: '鐐逛綅鍦ㄧ嚎鐜�',
+ proportion: 100,
+ style: {
+ top: '46%',
+ left: '66%'
+ }
+ },
+ {
+ title: '璁惧鏃堕挓鍑嗙‘鎬�',
+ proportion: 100,
+ style: {
+ top: '65%',
+ left: '13%'
+ }
+ },
+ {
+ title: '瑙嗗浘搴撳鎺ョǔ瀹氭��',
+ proportion: 100,
+ style: {
+ top: '65%',
+ left: '70%'
+ }
+ },
+ {
+ title: '璁惧URL鍙敤鎬�',
+ proportion: 100,
+ style: {
+ top: '83%',
+ left: '18.5%'
+ }
+ },
+ {
+ title: '鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�',
+ proportion: 100,
+ style: {
+ top: '83%',
+ left: '59.5%'
+ }
+ }
+ ],
+
+ // 榛樿閫変腑鎸夐挳 st 鐪佸巺 qx 鍖哄幙 ga 鍏畨
+ btnList: [
+ {
+ id: 'st',
+ bg: require('@/assets/images/st-btn-1.png'),
+ bgActiver: require('@/assets/images/st-btn-2.png')
+ },
+ {
+ id: 'qx',
+ bg: require('@/assets/images/qx-btn-1.png'),
+ bgActiver: require('@/assets/images/qx-btn-2.png')
+ },
+ {
+ id: 'ga',
+ bg: require('@/assets/images/ga-btn-1.png'),
+ bgActiver: require('@/assets/images/ga-btn-2.png')
+ }
+ ],
+ activerBtnType: 'st',
+ statistics: [
+ {
+ value1: 9688,
+ value2: 0,
+ color: '#e4b54f',
+ title: '宸ュ崟鎬绘暟'
+ },
+ {
+ value1: 1200,
+ value2: 1200,
+ color: '#5cff9a',
+ title: '宸插鐞嗗伐鍗曟暟'
+ },
+ {
+ value1: 18,
+ value2: 1200,
+ color: '#ff7b72',
+ title: '鏈鐞嗗伐鍗曟暟'
+ }
+ ],
+ isFullScreen: false
+ }
}
}
</script>
<style lang="scss" scoped>
-.screen-container {
- user-select: none;
- -webkit-user-select: none;
-}
-.screen {
- background-color: #033c76 !important;
- //background: url('../../assets/images/screen/pageBg1.jpg') !important;
- //background-size: cover !important;
- //background-repeat: no-repeat !important;
- //background-position: center center !important;
+.container {
+ width: 100vw;
+ height: 100vh;
+ // min-width: 1919px;
+ background-image: url("../../assets/images/background-img.jpg");
+ background-color: #fff;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ background-position: center;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ position: relative;
+
+ header {
+ position: relative;
+ z-index: 4;
+ img {
+ width: 100%;
+ display: block;
+ }
+ }
+
+ .main-contaner {
+ flex: 1;
+ width: 100%;
+ height: 0;
+ display: flex;
+ flex-direction: row;
+ margin-top: -2%;
+ position: relative;
+
+ .data-statistics-content {
+ width: 20.833333%;
+ padding-left: 1%;
+ padding-right: 1%;
+ padding-top: 0.5%;
+ box-sizing: border-box;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .title {
+ width: 100%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: block;
+ }
+
+ .main-left-container {
+ position: relative;
+ height: 100%;
+ border-bottom: 1px solid #3e97e4;
+ border-left: 1px solid #3e97e4;
+ padding: 4% 0 4% 4%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ &::after {
+ width: 2px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ left: -6px;
+ top: -18px;
+ background-color: #3e97e4;
+ transform: rotate(-30deg);
+ }
+
+ &::before {
+ width: 43px;
+ height: 40px;
+ content: "";
+ position: absolute;
+ background-image: url("../../assets/images/border-l-icon.png");
+ bottom: 0;
+ left: 0;
+ }
+
+ .work-order-container {
+ height: 40%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+
+ .subheading-title {
+ width: 97%;
+ display: block;
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+
+ .statistics-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ margin: 0 -5px;
+
+ .item-statistics-container {
+ width: calc(33.33% - 10px);
+ margin: 0 5px;
+ }
+ }
+
+ .decorate-border {
+ width: 100%;
+ display: block;
+ }
+ }
+
+ .histogram-container {
+ padding-top: 5%;
+ box-sizing: border-box;
+ height: 60%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+
+ .subheading-title {
+ width: 97.3%;
+ display: block;
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+
+ .statistics-container {
+ flex: 1;
+ position: relative;
+
+ .DrawLine-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ }
+ }
+ }
+ }
+
+ .facility-container {
+ height: 45.9754434%;
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ .title {
+ width: 100%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: block;
+ }
+
+ .facility-content {
+ flex: 1;
+ position: relative;
+ border-bottom: 1px solid #3e97e4;
+ border-right: 1px solid #3e97e4;
+ display: flex;
+ padding-top: 4%;
+ flex-direction: row;
+ overflow: hidden;
+
+ &::after {
+ width: 2px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ right: -6px;
+ top: -18px;
+ background-color: #3e97e4;
+ transform: rotate(30deg);
+ }
+
+ &::before {
+ width: 43px;
+ height: 40px;
+ content: "";
+ position: absolute;
+ background-image: url("../../assets/images/border-icon.png");
+ bottom: 0;
+ right: 0;
+ }
+
+ .item-facility-data {
+ width: 33.33%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ background-image: url("../../assets/images/item-facility.png");
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ display: flex;
+ flex-direction: column;
+
+ .item-facility-icon {
+ margin: 0 auto;
+ margin-top: 10%;
+ width: 73%;
+ display: block;
+ flex-shrink: 0;
+ flex-grow: 0;
+ }
+
+ ul {
+ flex: 1;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ text-align: center;
+ font-size: 14px;
+ list-style-type: none;
+
+ li:nth-child(1) {
+ .value {
+ color: #e4b54f;
+ }
+ .title {
+ color: #dcf8ff;
+ }
+ }
+
+ li:nth-child(2) {
+ .value {
+ color: #5cff9a;
+ }
+ .title {
+ color: #dcf8ff;
+ }
+ }
+
+ li:nth-child(3) {
+ .value {
+ color: #ff7b72;
+ }
+ .title {
+ color: #dcf8ff;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .normal-container {
+ margin-top: 2%;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ height: 0;
+
+ .title {
+ width: 100%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: block;
+ }
+
+ .normal-statistics-content {
+ flex: 1;
+ position: relative;
+ border-bottom: 1px solid #3e97e4;
+ border-right: 1px solid #3e97e4;
+ padding: 4% 4% 4% 0;
+ box-sizing: border-box;
+ height: 0;
+
+ &::after {
+ width: 2px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ right: -6px;
+ top: -18px;
+ background-color: #3e97e4;
+ transform: rotate(30deg);
+ }
+
+ &::before {
+ width: 43px;
+ height: 40px;
+ content: "";
+ position: absolute;
+ background-image: url("../../assets/images/border-icon.png");
+ bottom: 0;
+ right: 0;
+ }
+
+ .list-title-container {
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ list-style-type: none;
+ display: flex;
+ flex-direction: row;
+ background-color: #09316b;
+ box-shadow: inset 0 0 16px rgba(25, 99, 210, 0.1);
+ flex-shrink: 0;
+ flex-grow: 0;
+ position: relative;
+
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
+ width: 15px;
+ height: 15px;
+ background-image: url("../../assets/images/list-t-l-icon.png");
+ }
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ content: "";
+ width: 15px;
+ height: 15px;
+ background-image: url("../../assets/images/list-t-r-icon.png");
+ }
+
+ li {
+ width: 25%;
+ text-align: center;
+ font-size: 14px;
+ color: #00e6f4;
+ flex-shrink: 0;
+ flex-grow: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .list-content {
+ height: calc(100% - 45px);
+
+ background-image: url("../../assets/images/list-bg.png");
+ background-size: 100% 100%;
+ box-shadow: inset 0 0 20px rgba(25, 99, 210, 0.1);
+ position: relative;
+
+ &::after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ content: "";
+ width: 15px;
+ height: 15px;
+ background-image: url("../../assets/images/list-b-l-icon.png");
+ }
+
+ &::before {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ content: "";
+ width: 15px;
+ height: 15px;
+ background-image: url("../../assets/images/list-b-r-icon.png");
+ }
+
+ .list-content-to {
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ .item-list {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ list-style-type: none;
+ border-bottom: 1px dashed #223654;
+ li {
+ width: 25%;
+ text-align: center;
+ font-size: 14px;
+ color: #dcf8ff;
+ flex-shrink: 0;
+ flex-grow: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .name {
+ color: #00b4ff;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .map-container {
+ flex: 1;
+ height: 100%;
+ margin: 0 1%;
+ position: relative;
+ overflow: hidden;
+ // background-image: url('../assets//images/face-num-bg3.png');
+ // border:1px solid #ddd;
+ // box-sizing: border-box;
+
+ .main-map {
+ height: 100%;
+ overflow: hidden;
+ }
+
+ .btn-container {
+ width: 60%;
+ position: absolute;
+ top: 5%;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 99;
+
+ .bg-img {
+ width: 100%;
+ }
+
+ .btn-list {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-top: 3.3%;
+ padding-left: 16.4%;
+ padding-right: 16.4%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ img {
+ width: 26.638484%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: block;
+ cursor: pointer;
+ user-select: none;
+ }
+ }
+ }
+ }
+
+ .video-title {
+ width: 60.5208333%;
+ position: absolute;
+ z-index: 8;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 0;
+ }
+ }
+
+ footer {
+ .footer-title {
+ width: 100%;
+ display: block;
+ }
+
+ .footer-container {
+ height: 220px;
+ box-sizing: border-box;
+ position: relative;
+ background-image: url("../../assets/images/footer-bg.png");
+ background-size: cover;
+ background-position: center;
+
+ .footer-statistics-container {
+ width: 100%;
+ height: 100%;
+ padding-bottom: 24px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+
+ .face-container,
+ .car-container {
+ flex: 1;
+ height: 100%;
+ }
+
+ .face-container {
+ position: relative;
+
+ background-image: url("../../assets/images/face-bg.png");
+ background-size: 500px 200px;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ // .face-bj-img {
+ // position: absolute;
+ // left: 50%;
+ // top: 50%;
+ // transform: translate(-50%, -50%);
+ // width: 83.1946755%;
+ // display: block;
+ // z-index: 2;
+ // }
+
+ .item-face-container {
+ position: absolute;
+ z-index: 4;
+ width: 22.296173%;
+
+ .proportion {
+ width: 50px;
+ margin: 0 auto;
+ color: #00eaff;
+ text-shadow: 2px 2px 4px #152944;
+ position: relative;
+
+ img {
+ width: 100%;
+ display: block;
+ }
+
+ .value {
+ position: absolute;
+ left: 50%;
+ top: 53%;
+ transform: translate(-50%, -50%);
+ font-size: 14px;
+ }
+ }
+
+ .title {
+ text-align: center;
+ font-size: 12px;
+ color: #dcf8ff;
+ white-space: nowrap; /* 涓嶆崲琛� */
+ overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 鐢ㄧ渷鐣ュ彿琛ㄧず琚殣钘忕殑閮ㄥ垎 */
+ }
+ }
+ }
+
+ .car-container {
+ position: relative;
+ background-image: url("../../assets/images/car-bg2.png");
+ background-size: 500px 200px;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ // .car-bj-img {
+ // position: absolute;
+ // left: 50%;
+ // top: 50%;
+ // transform: translate(-50%, -50%);
+ // width: 83.1946755%;
+ // display: block;
+ // z-index: 2;
+ // }
+
+ .item-car-container {
+ background-image: url("../../assets/images/item-car-bg.png");
+ background-size: 100% 100%;
+ color: #dcf8ff;
+ font-size: 12px;
+ line-height: 26px;
+ padding: 0 15px;
+ position: absolute;
+ z-index: 5;
+
+ span {
+ color: #ffc23e;
+ }
+ }
+ }
+
+ .video-container {
+ width: 37.6041667%;
+ height: 100%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: self-start;
+ box-sizing: border-box;
+
+ .item-video-data {
+ width: 14.2857143%;
+ flex-grow: 0;
+ padding: 0 10px;
+ box-sizing: border-box;
+ height: 50%;
+ display: flex;
+ flex-direction: column;
+
+ .video-data {
+ flex: 1;
+ position: relative;
+ background-image: url("../../assets/images/item-video-bg.png");
+ background-size: 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ img {
+ width: 100%;
+ display: block;
+ }
+
+ .proportion {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 20px;
+ font-weight: bold;
+ color: #00fcff;
+ text-shadow: 2px 2px 4px #152944;
+ }
+ }
+
+ .item-video-title {
+ text-align: center;
+ color: #dcf8ff;
+ height: 32px;
+ font-size: 13px;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* 鏄剧ず鐨勮鏁� */
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ }
+ }
+ }
+ }
+ }
}
+.is-scroll-bar::-webkit-scrollbar {
+ width: 4px;
+}
+
+.is-scroll-bar::-webkit-scrollbar-thumb {
+ border-radius: 0px;
+ box-shadow: inset 0 0 5px #1e75d9;
+ background-color: #1e75d9;
+ opacity: 0.2;
+}
+
+.is-scroll-bar::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px #0d172c;
+ border-radius: 0;
+ background-color: #0d172c;
+}
</style>
--
Gitblit v1.8.0