From 4eeaec1eddd5ef2be4b79423154fa2dce81d5566 Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期五, 26 七月 2024 15:28:09 +0800 Subject: [PATCH] 大屏重构 --- src/views/screen/components/screen-map-three/experience/camera.js | 2 src/views/screen/components/screen-examine/components/examine-chart.vue | 2 src/assets/images/screen/bg3.png | 0 src/views/screen/components/wrapper-title/index.vue | 4 src/assets/images/screen/headerBg.png | 0 src/views/screen/newPage/index.vue | 333 +++++++++++++++++++++++++ src/views/screen/components/screen-wrapper/index.vue | 20 src/views/screen/components/screen-map/index.vue | 2 src/views/screen/index.vue | 8 src/views/screen/components/select-item/index.vue | 29 - src/views/screen/components/screen-table/index.vue | 95 +++--- src/views/screen/components/screen-car/index.vue | 6 src/views/screen/components/screen-examine/index.vue | 109 +++++-- src/views/screen/components/screen-face/index.vue | 6 /dev/null | 0 src/views/screen/components/screen-video/index.vue | 6 src/assets/images/screen/lxicon.png | 0 src/views/screen/components/screen-data/index.vue | 111 ++++--- src/assets/images/screen/cardBg.png | 0 src/views/screen/components/screen-map-three/index.vue | 13 src/views/screen/components/screen-examine/components/examine-hola.vue | 4 src/assets/images/screen/bigBg.png | 0 src/assets/images/screen/cardBg1.png | 0 23 files changed, 575 insertions(+), 175 deletions(-) diff --git a/src/assets/images/pay.png b/src/assets/images/pay.png deleted file mode 100644 index bb8b967..0000000 --- a/src/assets/images/pay.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/bg3.png b/src/assets/images/screen/bg3.png new file mode 100644 index 0000000..37d3c0c --- /dev/null +++ b/src/assets/images/screen/bg3.png Binary files differ diff --git a/src/assets/images/screen/bigBg.png b/src/assets/images/screen/bigBg.png new file mode 100644 index 0000000..369e8bb --- /dev/null +++ b/src/assets/images/screen/bigBg.png Binary files differ diff --git a/src/assets/images/screen/cardBg.png b/src/assets/images/screen/cardBg.png new file mode 100644 index 0000000..26f994b --- /dev/null +++ b/src/assets/images/screen/cardBg.png Binary files differ diff --git a/src/assets/images/screen/cardBg1.png b/src/assets/images/screen/cardBg1.png new file mode 100644 index 0000000..abb6545 --- /dev/null +++ b/src/assets/images/screen/cardBg1.png Binary files differ diff --git a/src/assets/images/screen/headerBg.png b/src/assets/images/screen/headerBg.png new file mode 100644 index 0000000..6cc8cd9 --- /dev/null +++ b/src/assets/images/screen/headerBg.png Binary files differ diff --git a/src/assets/images/screen/lxicon.png b/src/assets/images/screen/lxicon.png new file mode 100644 index 0000000..eb9470d --- /dev/null +++ b/src/assets/images/screen/lxicon.png Binary files differ diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue index 2ae312c..5a3f04e 100644 --- a/src/views/screen/components/screen-car/index.vue +++ b/src/views/screen/components/screen-car/index.vue @@ -82,8 +82,10 @@ .car-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + background: url('../../../../assets/images/screen/cardBg.png'); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; .plane { margin-bottom: 10px; diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue index 86a6679..45dd740 100644 --- a/src/views/screen/components/screen-data/index.vue +++ b/src/views/screen/components/screen-data/index.vue @@ -1,37 +1,48 @@ <template> <div class="data-container"> - <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title> + <!-- <wrapper-title + :title="'宸ュ崟鏁版嵁'" + :path="'/work-order-center/maintenance/work-order/work-order'" + ></wrapper-title> --> <div class="data-content"> <div class="data-panel"> <div class="panel-title"> <div class="icon"> - <img src="@/assets/icons/arrow.png" alt=""> + <img src="@/assets/icons/arrow.png" alt="" /> </div> - <div class="title"> - 鏁翠綋宸ュ崟鏁� - </div> + <div class="title">鏁翠綋宸ュ崟鏁�</div> </div> <div class="panel-container"> <div class="panel-item"> - <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola> + <data-hola + :holaTitle="`宸ュ崟鎬绘暟`" + :centerValue="3000" + :holaColor="`#4ea8ff`" + ></data-hola> </div> <div class="panel-item"> - <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola> + <data-hola + :holaTitle="`宸插鐞嗗伐鍗曟暟`" + :centerValue="1600" + :holaColor="`#5dec24`" + ></data-hola> </div> <div class="panel-item"> - <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola> + <data-hola + :holaTitle="`鏈鐞嗗伐鍗曟暟`" + :centerValue="200" + :holaColor="`#dfc639`" + ></data-hola> </div> </div> </div> <div class="data-panel"> <div class="panel-title"> <div class="icon"> - <img src="@/assets/icons/arrow.png" alt=""> + <img src="@/assets/icons/arrow.png" alt="" /> </div> - <div class="title"> - 鍒嗗尯宸ュ崟鏁� - </div> + <div class="title">鍒嗗尯宸ュ崟鏁�</div> </div> <div class="echart-container"> <div id="barChart" ref="barChart"></div> @@ -42,83 +53,90 @@ </template> <script> -import * as echarts from 'echarts'; -import WrapperTitle from '../wrapper-title/index'; -import DataHola from './components/data-hola'; +import * as echarts from "echarts"; +import WrapperTitle from "../wrapper-title/index"; +import DataHola from "./components/data-hola"; let chart = null; export default { - name: 'ScreenData', + name: "ScreenData", components: { WrapperTitle, - DataHola + DataHola, }, data() { return { dataList: { - name: ['瀵岄『鍘�', '鑽e幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'], + name: [ + "瀵岄『鍘�", + "鑽e幙", + "楂樻柊鍖�", + "鑷祦浜曞尯", + "璐′簳鍖�", + "澶у畨鍖�", + "娌挎哗鍖�", + ], data1: [210, 310, 40, 102, 111, 201, 123], data2: [20, 30, 10, 10, 11, 21, 5], }, - } + }; }, methods: { initEchart() { const option = { grid: { - top: '10%', + top: "10%", right: 0, - bottom: '17%', + bottom: "17%", }, legend: { right: 0, textStyle: { - color: '#447ED6' - } + color: "#fff", + }, }, tooltip: {}, xAxis: { - type: 'category', + type: "category", axisLabel: { - color: '#447ED6', - rotate: 45 + color: "#fff", + rotate: 45, }, - data: this.dataList.name + data: this.dataList.name, }, yAxis: { axisLabel: { - color: '#4D76B0', + color: "#fff", }, }, series: [ { - type: 'bar', - name: '宸插鐞嗗伐鍗曟暟', - stack: 'total', + type: "bar", + name: "宸插鐞嗗伐鍗曟暟", + stack: "total", itemStyle: { - color: '#4ea8ff' + color: "#4ea8ff", }, - data: this.dataList.data1 + data: this.dataList.data1, }, { - type: 'bar', - name: '鏈鐞嗗伐鍗曟暟', - stack: 'total', + type: "bar", + name: "鏈鐞嗗伐鍗曟暟", + stack: "total", itemStyle: { - color: '#dfc639' + color: "#dfc639", }, - data: this.dataList.data2 + data: this.dataList.data2, }, - ] - } + ], + }; chart.setOption(option, true); - - } + }, }, mounted() { chart = echarts.init(this.$refs.barChart); this.initEchart(); - } -} + }, +}; </script> <style lang="scss" scoped> @@ -130,10 +148,7 @@ .data-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); padding: 10px; - box-sizing: border-box; } } @@ -174,4 +189,4 @@ height: 110px; } } -</style> \ No newline at end of file +</style> diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue index d12f01e..c8b3bba 100644 --- a/src/views/screen/components/screen-examine/components/examine-chart.vue +++ b/src/views/screen/components/screen-examine/components/examine-chart.vue @@ -2,7 +2,7 @@ <div class="chart-container"> <div class="rank-chart"> <div class="hola-item" v-for="item in dataList" :key="item.id"> - <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value" :bottomTitle="item.name" + <examine-hola :startColor="'#4ea8ff'" :endColor="'#178fff'" :centerValue="item.value" :bottomTitle="item.name" :routerPath="item.routerUrl"></examine-hola> </div> </div> diff --git a/src/views/screen/components/screen-examine/components/examine-hola.vue b/src/views/screen/components/screen-examine/components/examine-hola.vue index 83a0396..38e0308 100644 --- a/src/views/screen/components/screen-examine/components/examine-hola.vue +++ b/src/views/screen/components/screen-examine/components/examine-hola.vue @@ -28,8 +28,8 @@ clip: false, // 鏄惁瑁佸壀瓒呭嚭閮ㄥ垎 // 璁剧疆鑳屾櫙鍦嗙幆鏍峰紡 lineStyle: { - width: 6, // 鍦嗙幆瀹藉害 - color: [[1, '#002865']] // 鍦嗙幆鑳屾櫙鑹� + width: 10, // 鍦嗙幆瀹藉害 + color: [[1, '#ecf6ff']] // 鍦嗙幆鑳屾櫙鑹� } }, // 浠〃鐩樻寚閽� diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue index 8bdd44f..9186007 100644 --- a/src/views/screen/components/screen-examine/index.vue +++ b/src/views/screen/components/screen-examine/index.vue @@ -1,38 +1,78 @@ <template> <div class="examine-container"> - <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/default'"></wrapper-title> + <wrapper-title + :title="'鑰冩牳鏁版嵁'" + :path="'/examine/default'" + ></wrapper-title> <div class="examine-content"> - <div class="examine-wrapper"> <div class="select-container"> - <div class="select-item" :class="{'active-item' : activeIndex === 0}" @click="clickItem(0)"> + <div + class="select-item" + :class="{ 'active-item': activeIndex === 0 }" + @click="clickItem(0)" + > <div class="icon-container"> - <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" - xmlns="http://www.w3.org/2000/svg"> - <path fill="#ffffff" - d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" /> + <svg + class="icon" + width="64px" + height="64.00px" + viewBox="0 0 1024 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#ffffff" + d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" + /> </svg> </div> <div class="label">浜鸿劯鑰冩牳</div> </div> - <div class="select-item" :class="{'active-item' : activeIndex === 1}" @click="clickItem(1)"> + <div + class="select-item" + :class="{ 'active-item': activeIndex === 1 }" + @click="clickItem(1)" + > <div class="icon-container"> - <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" - xmlns="http://www.w3.org/2000/svg"> - <path fill="#ffffff" - d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z" /> + <svg + class="icon" + width="64px" + height="64.00px" + viewBox="0 0 1024 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#ffffff" + d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z" + /> </svg> </div> <div class="label">杞﹁締鑰冩牳</div> </div> - <div class="select-item" :class="{'active-item' : activeIndex === 2}" @click="clickItem(2)"> + <div + class="select-item" + :class="{ 'active-item': activeIndex === 2 }" + @click="clickItem(2)" + > <div class="icon-container"> - <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" - xmlns="http://www.w3.org/2000/svg"> - <path fill="#ffffff" - d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z" /> - <path fill="#ffffff" - d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z" /> + <svg + class="icon" + width="64px" + height="64.00px" + viewBox="0 0 1024 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#ffffff" + d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z" + /> + <path + fill="#ffffff" + d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z" + /> </svg> </div> <div class="label">瑙嗛鑰冩牳</div> @@ -46,28 +86,27 @@ </template> <script> -import WrapperTitle from '../wrapper-title/index'; -import ExamineChart from './components/examine-chart'; -import ExamineTable from './components/examine-table'; +import WrapperTitle from "../wrapper-title/index"; +import ExamineChart from "./components/examine-chart"; +import ExamineTable from "./components/examine-table"; export default { - name: 'ScreenExamine', + name: "ScreenExamine", components: { WrapperTitle, ExamineChart, - ExamineTable + ExamineTable, }, data() { return { - activeIndex: 0 - } + activeIndex: 0, + }; }, methods: { clickItem(index) { this.activeIndex = index; - } - } -} - + }, + }, +}; </script> <style lang="scss" scoped> @@ -76,7 +115,7 @@ width: 100%; display: flex; flex-direction: column; - margin-bottom: 20px + margin-bottom: 20px; } .examine-content { @@ -94,8 +133,10 @@ } .wrapper-item { - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + background: url("../../../../assets/images/screen/cardBg.png"); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; margin-bottom: 20px; &:last-of-type { @@ -127,4 +168,4 @@ background-color: rgba(38, 86, 158, 0.6); } } -</style> \ No newline at end of file +</style> diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue index 488816b..e1d0982 100644 --- a/src/views/screen/components/screen-face/index.vue +++ b/src/views/screen/components/screen-face/index.vue @@ -80,8 +80,10 @@ .face-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + background: url("../../../../assets/images/screen/cardBg.png"); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; .plane { margin-bottom: 10px; diff --git a/src/views/screen/components/screen-map-three/experience/camera.js b/src/views/screen/components/screen-map-three/experience/camera.js index 99dbf26..998674b 100644 --- a/src/views/screen/components/screen-map-three/experience/camera.js +++ b/src/views/screen/components/screen-map-three/experience/camera.js @@ -16,7 +16,7 @@ // 璁剧疆閫忚鐩告満 setInstance() { this.instance = new PerspectiveCamera(45, this.sizes.width / this.sizes.height, 0.1, 200); - this.instance.position.set(0, 37, 37); + this.instance.position.set(0, 25,25); this.scene.add(this.instance); // const help = new CameraHelper(this.instance); // this.scene.add(help); diff --git a/src/views/screen/components/screen-map-three/index.vue b/src/views/screen/components/screen-map-three/index.vue index 806fa3e..f500e99 100644 --- a/src/views/screen/components/screen-map-three/index.vue +++ b/src/views/screen/components/screen-map-three/index.vue @@ -37,12 +37,15 @@ <style lang="scss" scoped> .map-container { width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; + height:100%; + // position: absolute; + // left: 25%; + // top: 65px; z-index: 0; - + // background: url("../../../../assets/images/screen/cardBg.png"); + // background-size: cover !important; + // background-repeat: no-repeat !important; + // background-position: center center !important; .world { width: 100%; height: 100%; diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue index 821c160..5576e0c 100644 --- a/src/views/screen/components/screen-map/index.vue +++ b/src/views/screen/components/screen-map/index.vue @@ -1,6 +1,6 @@ <template> <div class="map-container"> - <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title> + <!-- <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title> --> <div class="map-content"> <div ref="map" class="map-style"></div> </div> diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue index 01e715d..2cf0b6d 100644 --- a/src/views/screen/components/screen-table/index.vue +++ b/src/views/screen/components/screen-table/index.vue @@ -1,13 +1,22 @@ <template> <div class="table-container"> - <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/recovery'"></wrapper-title> + <!-- <wrapper-title + :title="'鍖哄煙璁惧鏁版嵁'" + :path="'/monitorServe/recovery'" + ></wrapper-title> --> <div class="table-content" ref="tabContent"> <div class="table-wrapper"> - <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table"> + <el-table + :data="tableData" + border + :height="tableHeight" + :max-height="tableHeight" + class="rank-table" + > <el-table-column prop="name" label="鍦板尯" align="center" width="100"> </el-table-column> - <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center"> + <el-table-column label="浜鸿劯璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -25,7 +34,7 @@ </template> </el-table-column> - <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center"> + <el-table-column label="杞﹁締璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -43,7 +52,7 @@ </template> </el-table-column> - <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center"> + <el-table-column label="瑙嗛璁惧" align="center"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content"> @@ -63,67 +72,66 @@ </el-table> </div> </div> - </div> </template> <script> -import WrapperTitle from '../wrapper-title/index'; +import WrapperTitle from "../wrapper-title/index"; export default { - name: 'ScreenTable', + name: "ScreenTable", components: { - WrapperTitle + WrapperTitle, }, data() { return { tableHeight: 40, tableData: [ { - name: '瀵岄『鍘�', + name: "瀵岄『鍘�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '鑽e幙', + name: "鑽e幙", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '楂樻柊鍖�', + name: "楂樻柊鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '鑷祦浜曞尯', + name: "鑷祦浜曞尯", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '璐′簳鍖�', + name: "璐′簳鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '澶у畨鍖�', + name: "澶у畨鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, { - name: '娌挎哗鍖�', + name: "娌挎哗鍖�", data1: 1123, data2: 1123, - data3: 1123 + data3: 1123, }, - ] - } + ], + }; }, methods: { computedHeight() { @@ -131,21 +139,21 @@ setTimeout(() => { const content = this.$refs.tabContent; this.tableHeight = content.offsetHeight; - }) - }) - } + }); + }); + }, }, mounted() { this.computedHeight(); - } -} + }, +}; </script> <style lang="scss" scoped> .table-container { width: 100%; // flex: 1; - height: 350px; + height: 240px; position: relative; display: flex; @@ -153,16 +161,12 @@ .table-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); - // position: absolute; - // width: 100%; - // top: 0; - // bottom: 0; + // background: url("../../../../assets/images/screen/cardBg.png"); + // background-size: cover !important; + // background-repeat: no-repeat !important; + // background-position: center center !important; } } - - .rank-table { background-color: transparent !important; @@ -181,7 +185,6 @@ ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th { background-color: transparent !important; - } ::v-deep .el-table--group, @@ -198,8 +201,8 @@ border-color: #56739e99 !important; } -::v-deep .el-table th.el-table__cell>.cell { - color: #447ED6; +::v-deep .el-table th.el-table__cell > .cell { + color: #447ed6; } ::v-deep .el-scrollbar__bar.is-vertical { @@ -212,7 +215,11 @@ background-color: transparent !important; } -::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { +::v-deep + .el-table--enable-row-hover + .el-table__body + tr:hover + > td.el-table__cell { background-color: #447ed648; } @@ -239,4 +246,4 @@ color: #e20c0c; } } -</style> \ No newline at end of file +</style> diff --git a/src/views/screen/components/screen-video/index.vue b/src/views/screen/components/screen-video/index.vue index d97042f..46b2e44 100644 --- a/src/views/screen/components/screen-video/index.vue +++ b/src/views/screen/components/screen-video/index.vue @@ -76,8 +76,10 @@ .video-content { flex: 1; - background: rgba(67, 102, 155, 0.3); - border: 1px solid rgba(47, 91, 157, 0.8); + background: url('../../../../assets/images/screen/cardBg.png'); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; .plane { margin-bottom: 10px; diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index b80e0e0..0257f2d 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -1,27 +1,27 @@ <template> <div class="wrapper-container"> - <select-item></select-item> + <!-- <select-item></select-item> <div class="return-button" @click="returnPath"> 杩斿洖 </div> - <div class="wrapper-content"> + <div class="wrapper-content"> --> <screen-map-three :loadEnd="isEnd"></screen-map-three> - <div class="left-container wrapper"> + <!-- <div class="left-container wrapper"> <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face> <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car> <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video> </div> <div class="center-container center-wrapper"> <screen-map-cover></screen-map-cover> - <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table> + <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table> --> <!-- <screen-detection></screen-detection> --> - </div> + <!-- </div> <div class="right-container wrapper"> <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine> <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data> </div> - </div> + </div> --> </div> </template> @@ -90,11 +90,11 @@ } .wrapper-container { - width: 100%; - height: 100%; + width: 46%; + height: 54%; position: absolute; - top: 0; - left: 0; + top: 11%; + left: 27%; z-index: 1; .wrapper-content { diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue index 6144a10..f93947a 100644 --- a/src/views/screen/components/select-item/index.vue +++ b/src/views/screen/components/select-item/index.vue @@ -1,7 +1,6 @@ <template> <div class="select-container"> <div class="tabs-box"> - <!-- <el-button v-for="item in testData1" class="transparent-button">{{ item.name }} </el-button> --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in testData1" @@ -9,11 +8,6 @@ :name="item.value" ></el-tab-pane> </el-tabs> - <!-- <div> - <el-button> - - </el-button> - </div> --> </div> <!-- <div class="type-select"> <div class="select-label">鏁版嵁婧�</div> @@ -128,7 +122,7 @@ .select-container { position: absolute; top: 0px; - left: 20px; + left: 0px; display: flex; align-items: center; justify-content: space-between; @@ -165,7 +159,7 @@ display: flex; align-items: center; width: 320px; - margin-top: -15px + margin-top: -15px; } } ::v-deep .tabs-box { @@ -173,10 +167,14 @@ width: 40%; .el-tabs__item { color: #ffffff !important; + font-size: 20px; } .is-active { - color: #61aef7 !important; - background: url('../../../../assets/images/screen/button1.png');; + color: #66b5ff !important; + background: url("../../../../assets/images/screen/button1.png"); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; } } ::v-deep .el-input__inner { @@ -192,11 +190,6 @@ ::v-deep .date-select .el-date-editor .el-range-separator { color: #4481dd !important; } -// .transparent-button { -// background-color: transparent; -// border-color: #23f0ed; -// color: #b944dd; /* 杩欓噷璁剧疆鎸夐挳鏂囧瓧棰滆壊 */ - // } /* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */ ::v-deep .el-tabs__nav-wrap::after { @@ -205,12 +198,12 @@ } /* 涓嬪垝绾垮垏鎹㈤珮浜� */ ::v-deep .el-tabs__active-bar { - background-color: #4481DD; + background-color: #4481dd; } -::v-deep .el-tabs__item{ +::v-deep .el-tabs__item { margin: 5px 30px; padding: 0px 25px !important; border-radius: 5px; - background: url('../../../../assets/images/screen/button.png'); + background: url("../../../../assets/images/screen/button.png"); } </style> diff --git a/src/views/screen/components/wrapper-title/index.vue b/src/views/screen/components/wrapper-title/index.vue index 265b777..12857a9 100644 --- a/src/views/screen/components/wrapper-title/index.vue +++ b/src/views/screen/components/wrapper-title/index.vue @@ -4,10 +4,10 @@ <div class="more-button" v-if="path" @click="toPath"> <div class="icon"> - <img src="@/assets/icons/setting.png" alt=""> + <!-- <img src="@/assets/icons/setting.png" alt=""> --> </div> <div class="button-text"> - 鏌ョ湅鏇村 + </div> </div> </div> diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 26ed82b..c445ba1 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -1,8 +1,9 @@ <template> <div class="screen-container"> - <screen-title></screen-title> + <!-- <screen-title></screen-title> --> <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen"> - <screen-wrapper></screen-wrapper> + <!-- <screen-wrapper></screen-wrapper> --> + <NewPage></NewPage> </v-scale-screen> </div> @@ -11,13 +12,14 @@ <script> import ScreenTitle from './components/screen-title/index.vue'; import ScreenWrapper from './components/screen-wrapper/index.vue'; - +import NewPage from './newPage/index.vue' export default { name: 'App', components: { ScreenTitle, ScreenWrapper, + NewPage, }, data() { return { diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue new file mode 100644 index 0000000..15b8974 --- /dev/null +++ b/src/views/screen/newPage/index.vue @@ -0,0 +1,333 @@ +<template> + <div class="new-page"> + <div style="display: flex; justify-content: space-between"> + <div class="header_box"> + <h1>杩愮淮鑰冩牳澶у睆</h1> + <div class="tabs-box"> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane + v-for="item in testData1" + :label="item.name" + :name="item.value" + :key="item.value" + ></el-tab-pane> + </el-tabs> + </div> + </div> + <div class="return-button" @click="returnPath">杩斿洖</div> + </div> + <div style="display: flex; justify-content: space-between"> + <div class="left_box"> + <div class="card"> + <div class="card_header"> + <div class="title">璁惧鏁版嵁</div> + </div> + <div> + <div class="device_data"> + <img + src="../../../assets/images/screen/lxicon.png" + alt="" + style="height: 25px" + /> + <div style="margin: 0 10px">浜鸿劯</div> + <div class="data-info"> + <div class="data-lable">璁惧鎬绘暟</div> + <div class="data-num type1" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧姝e父鏁�</div> + <div class="data-num type2" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧寮傚父鏁�</div> + <div class="data-num type3" v-roll>{{ 1123 }}</div> + </div> + </div> + <div class="device_data"> + <img + src="../../../assets/images/screen/lxicon.png" + alt="" + style="height: 25px" + /> + <div style="margin: 0 10px">杞﹁締</div> + <div class="data-info"> + <div class="data-lable">璁惧鎬绘暟</div> + <div class="data-num type1" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧姝e父鏁�</div> + <div class="data-num type2" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧寮傚父鏁�</div> + <div class="data-num type3" v-roll>{{ 1123 }}</div> + </div> + </div> + <div class="device_data"> + <img + src="../../../assets/images/screen/lxicon.png" + alt="" + style="height: 25px" + /> + <div style="margin: 0 10px">瑙嗛</div> + <div class="data-info"> + <div class="data-lable">璁惧鎬绘暟</div> + <div class="data-num type1" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧姝e父鏁�</div> + <div class="data-num type2" v-roll>{{ 1123 }}</div> + </div> + <div class="data-info"> + <div class="data-lable">璁惧寮傚父鏁�</div> + <div class="data-num type3" v-roll>{{ 1123 }}</div> + </div> + </div> + </div> + </div> + <div class="card"> + <div class="card_header"> + <div class="title">璁惧姝e父鐜�</div> + <div style="margin: 10px 10px"> + <ScreenTable></ScreenTable> + </div> + </div> + </div> + </div> + <div class="large_screen_box"> + <ScreenMap></ScreenMap> + </div> + <div class="left_box"> + <div class="card" style="height: 103px"> + <div class="card_header"></div> + </div> + <div class="card" style="height: 500px"> + <div class="card_header"><div class="title">浜鸿劯鑰冩牳鏁版嵁</div></div> + <div><ScreenData></ScreenData></div> + </div> + </div> + </div> + <div class="footer_box"> + <div class="footer_card"> + <div class="card_header"> + <div class="title">浜鸿劯鑰冩牳鏁版嵁</div> + <div style="width: 500px; margin-left: 40px"> + <ExamineChart class="wrapper-item"></ExamineChart> + </div> + </div> + </div> + <div class="footer_card"> + <div class="card_header"> + <div class="title">杞﹁締鑰冩牳鏁版嵁</div> + <div style="width: 500px; margin-left: 40px"> + <ExamineChart class="wrapper-item"></ExamineChart> + </div> + </div> + </div> + <div class="footer_card"> + <div class="card_header"> + <div class="title">瑙嗛鑰冩牳鏁版嵁</div> + <div style="width: 500px; margin-left: 40px"> + <ExamineChart class="wrapper-item"></ExamineChart> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import ScreenTable from "../components/screen-table/index.vue"; +import ScreenMap from "../components/screen-wrapper/index.vue"; +import ScreenMapThree from "../components/screen-map-three/index"; +import ExamineChart from "../components/screen-examine/components/examine-chart.vue"; +import ScreenData from "../components/screen-data/index.vue"; +export default { + name: "Newpage", + components: { + ScreenTable, + ScreenMapThree, + ScreenMap, + ExamineChart, + ScreenData, + }, + data() { + return { + isEnd: false, + activeName: "1", + testData1: [ + { + name: "鐪佸巺鏁版嵁", + value: "1", + }, + { + name: "甯傚眬鏁版嵁", + value: "2", + }, + { + name: "鍏畨閮ㄦ暟鎹�", + value: "3", + }, + ], + }; + }, + mounted() {}, + methods: { + returnPath() { + this.$router.push('/index'); + }, + handleClick() {}, + }, +}; +</script> + +<style lang="scss" scoped> +.new-page { + color: rgb(255, 255, 255); + .header_box { + display: flex; + align-items: center; + margin-top: 10px; + } + .return-button { + position: absolute; + right: 20px; + top: 20px; + border-radius: 4px; + border: 1px solid #4481DD; + background-color: rgba(67, 102, 155, 0.4); + color: #4481DD; + padding: 5px 20px; + cursor: pointer; +} +} +::v-deep .tabs-box { + margin-top: 5px; + .el-tabs__item { + color: #ffffff !important; + font-size: 20px; + } + .is-active { + color: #66b5ff !important; + background: url("../../../assets/images/screen/button1.png"); + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center center !important; + } +} +::v-deep .el-input__inner { + background: rgba(67, 102, 155, 0.4) !important; + color: #4481dd; + border-color: #4481dd !important; +} + +::v-deep .date-select .el-range-input { + background-color: transparent !important; + color: #4481dd; +} +::v-deep .date-select .el-date-editor .el-range-separator { + color: #4481dd !important; +} +// } +/* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */ +::v-deep .el-tabs__nav-wrap::after { + position: static !important; +// background-color: #fff; +} +::v-deep .el-tabs__active-bar{ + width: 0 !important; +} +::v-deep .el-tabs__item { + margin: 5px 30px; + padding: 0px 25px !important; + border-radius: 5px; + background: url("../../../assets/images/screen/button.png"); + background-size: 100% 100%; + background-repeat: no-repeat !important; + background-position: center center !important; +} +.left_box { + width: 460px; + .card { + height: 300px; + width: 460px; + margin: 20px 0; + .card_header { + height: 40px; + } + } +} +.large_screen_box { + width: 920px; + height: 621px; + margin: 20px 0; + background: url("../../../assets/images/screen/bigBg.png"); + background-size: 100% 100%; + background-repeat: no-repeat !important; + background-position: center center !important; +} +.card { + background: url("../../../assets/images/screen/cardBg1.png"); + background-size: 100% 100%; + background-repeat: no-repeat !important; + background-position: center center !important; +} +.card_header { + background: url("../../../assets/images/screen/headerBg.png"); + background-size: 100% 100%; + background-repeat: no-repeat !important; + background-position: center center !important; +} +.footer_box { + width: 100%; + height: 320px; + background: url("../../../assets/images/screen/cardBg.png"); + background-size: 100% 101%; + background-repeat: no-repeat !important; + background-position: center center !important; + display: flex; + justify-content: space-between; + .footer_card { + width: 33%; + margin: 5px 0; + .card_header { + height: 40px; + } + } +} +.title { + margin-left: 20px; + padding-top: 5px; + color: #fff; + letter-spacing: 2px; + font-size: 20px; + font-style: italic; +} +.data-info { + flex: 1; + color: #5b83bd; + font-size: 16px; + + .data-num { + margin-top: 5px; + font-size: 24px; + color: #fff; + } + + .type1 { + color: #287cfa; + } + .type2 { + color: #0cd81d; + } + .type3 { + color: #e20c0c; + } +} +.device_data { + display: flex; + align-items: center; + justify-content: space-between; + margin: 20px; +} +</style> -- Gitblit v1.8.0