From 8baca4a7fd5d6e98cc30aed84b58b4c6abae0af0 Mon Sep 17 00:00:00 2001 From: LiuJiaNan Date: Mon, 9 Jun 2025 10:42:48 +0800 Subject: [PATCH] init --- src/views/index/components/left_content.vue | 104 ++++++++++++------- src/views/index/components/right_content.vue | 78 +++++++------- 2 files changed, 110 insertions(+), 72 deletions(-) diff --git a/src/views/index/components/left_content.vue b/src/views/index/components/left_content.vue index 5341682..5ade689 100644 --- a/src/views/index/components/left_content.vue +++ b/src/views/index/components/left_content.vue @@ -246,43 +246,10 @@ const fnInitEcharts1 = () => { padding: 10px; } -.table { - width: 450px; - background-image: url("/src/assets/images/map/bg1.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - text-align: center; - color: #fff; - font-size: 14px; - - .thead { - .tr { - font-weight: bold; - height: 32px; - line-height: 32px; - background-image: url("/src/assets/images/map/bg2.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - display: grid; - grid-template-columns: repeat(4, 1fr); - } - } - - .tbody { - .tr { - margin-top: 5px; - height: 32px; - line-height: 32px; - background-image: url("/src/assets/images/map/bg3.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - display: grid; - grid-template-columns: repeat(4, 1fr); - } - } -} - .block1 { + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); + .tip { margin-top: 5px; margin-left: 10px; @@ -320,8 +287,37 @@ const fnInitEcharts1 = () => { } .table { + width: 100%; + background-image: url("/src/assets/images/map/bg1.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + text-align: center; + color: #fff; + font-size: 14px; margin-top: 20px; height: 192px; + + .thead { + .tr { + font-weight: bold; + height: 32px; + line-height: 32px; + background-color: rgba(19, 62, 126, 0.45); + display: grid; + grid-template-columns: repeat(4, 1fr); + } + } + + .tbody { + .tr { + margin-top: 5px; + height: 32px; + line-height: 32px; + background-color: rgba(19, 62, 126, 0.35); + display: grid; + grid-template-columns: repeat(4, 1fr); + } + } } .level4 { @@ -343,6 +339,8 @@ const fnInitEcharts1 = () => { .block2 { margin-top: 15px; + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); #main1 { width: 450px; @@ -352,9 +350,43 @@ const fnInitEcharts1 = () => { .block3 { margin-top: 15px; + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); .table { + width: 100%; + background-image: url("/src/assets/images/map/bg1.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + text-align: center; + color: #fff; + font-size: 14px; height: 192px; + + .thead { + .tr { + font-weight: bold; + height: 32px; + line-height: 32px; + background-image: url("/src/assets/images/map/bg2.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + display: grid; + grid-template-columns: repeat(4, 1fr); + } + } + + .tbody { + .tr { + height: 32px; + line-height: 32px; + background-image: url("/src/assets/images/map/bg3.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + display: grid; + grid-template-columns: repeat(4, 1fr); + } + } } } diff --git a/src/views/index/components/right_content.vue b/src/views/index/components/right_content.vue index 9e681f9..eb9ec43 100644 --- a/src/views/index/components/right_content.vue +++ b/src/views/index/components/right_content.vue @@ -193,43 +193,9 @@ const fnInitEcharts2 = () => { padding: 10px; } -.table { - width: 450px; - background-image: url("/src/assets/images/map/bg1.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - text-align: center; - color: #fff; - font-size: 14px; - - .thead { - .tr { - font-weight: bold; - height: 32px; - line-height: 32px; - background-image: url("/src/assets/images/map/bg2.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - display: grid; - grid-template-columns: repeat(3, 1fr); - } - } - - .tbody { - .tr { - margin-top: 5px; - height: 32px; - line-height: 32px; - background-image: url("/src/assets/images/map/bg3.png"); - background-size: 450px 100%; - background-repeat: no-repeat; - display: grid; - grid-template-columns: repeat(3, 1fr); - } - } -} - .block1 { + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); #main2 { width: 450px; height: 245px; @@ -237,6 +203,9 @@ const fnInitEcharts2 = () => { } .block2 { + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); + margin-top: 15px; #main3 { width: 450px; height: 245px; @@ -244,6 +213,43 @@ const fnInitEcharts2 = () => { } .block3 { + background-color: rgba(2, 25, 88, 0.25); + border: 1px solid rgba(118, 153, 191, 0.2); margin-top: 15px; + .table { + width: 100%; + background-image: url("/src/assets/images/map/bg1.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + text-align: center; + color: #fff; + font-size: 14px; + + .thead { + .tr { + font-weight: bold; + height: 32px; + line-height: 32px; + background-image: url("/src/assets/images/map/bg2.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + display: grid; + grid-template-columns: repeat(3, 1fr); + } + } + + .tbody { + .tr { + margin-top: 5px; + height: 32px; + line-height: 32px; + background-image: url("/src/assets/images/map/bg3.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + display: grid; + grid-template-columns: repeat(3, 1fr); + } + } + } }