From 1c6983f3bbb31ef3c4ab993dc4acea5f6f70390e Mon Sep 17 00:00:00 2001 From: wuyy Date: Fri, 28 Aug 2026 18:01:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/back.png | Bin 0 -> 4739 bytes .../statistics/overview/css/index.css | 135 +++--- .../regional/statistics/overview/index.vue | 421 ++++++++---------- 3 files changed, 268 insertions(+), 288 deletions(-) create mode 100644 src/assets/images/back.png diff --git a/src/assets/images/back.png b/src/assets/images/back.png new file mode 100644 index 0000000000000000000000000000000000000000..c548462ec65936244238982da26d7c2fd314064a GIT binary patch literal 4739 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 TRbkhE5)*@_nvQCX3MuqIjlG4^ literal 0 HcmV?d00001 diff --git a/src/views/regional/statistics/overview/css/index.css b/src/views/regional/statistics/overview/css/index.css index 983a1af..54f12db 100644 --- a/src/views/regional/statistics/overview/css/index.css +++ b/src/views/regional/statistics/overview/css/index.css @@ -8,13 +8,15 @@ background: url(../images/bg2.jpg) no-repeat; background-size: 100% 100%; padding-top: 0rem; - padding: 0rem 3.125rem; - + padding: 0rem 1.25rem 0 1.875rem; + overflow: hidden; +} + +.container { + display: flex; + height: calc(100vh - 3.75rem); } -/*.conIn{ - display:flex; - display: -webkit-flex;}*/ .title { width: 100%; font-size: 1.875rem; @@ -22,6 +24,7 @@ color: #0efdff; text-align: center; font-weight: bold; + height: 2.1875rem; } .border_bg_leftTop { @@ -70,20 +73,21 @@ .leftMain { width: 75%; - float: left; - padding-right: 1.5625rem; + padding-right: .625rem; padding-top: 0; + display: flex; + flex-direction: column; } .rightMain { width: 25%; - float: left; + padding-top: 2.5rem; } .leftMain_top { width: 100%; - padding-bottom: 1.5625rem; + margin-bottom: .625rem; } .leftMain_top ul { @@ -133,7 +137,7 @@ color: #fff; position: relative; z-index: 10; - } +} .leftMain_top ul li .liIn .zi .span1 { margin-right: 1.5625rem; @@ -142,14 +146,17 @@ .leftMain_middle { width: 100%; - padding-bottom: 1.5625rem; + flex: 1; display: flex; display: -webkit-flex; } .leftMain_middle .leftMain_middle_left { - width: 60%; - padding-right: 1.5625rem; + width: 70%; + padding-right: .625rem; + height: 100%; + display: flex; + flex-direction: column; } .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn { @@ -158,10 +165,12 @@ min-height: 3.75rem; position: relative; padding: .625rem; + flex: 1; } .leftMain_middle_leftIn_zhe { margin-top: 2vh; + flex: 1; } .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 { @@ -172,18 +181,21 @@ } .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge { - min-height: 12.5rem; + min-height: 0; + height: calc(100% - 2.1875rem); } .leftMain_middle .leftMain_middle_right { - width: 40%; + width: 30%; + height: 100%; + position: relative; + border: 0.125rem solid rgba(14, 253, 255, 0.5); + } .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn { - border: 0.125rem solid rgba(14, 253, 255, 0.5); width: 100%; - min-height: 3.75rem; - position: relative; + padding: .625rem; } @@ -201,28 +213,27 @@ /*左边中间部分排行榜*/ .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai { width: 100%; - height: 58vh; - overflow-y: auto; } /* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{ height: 68vh; } */ - + .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn { display: flex; display: -webkit-flex; align-items: center; color: #fff; - font-size: 0.9375rem; + font-size: 1.125rem; + font-weight: 700; height: 2.5rem; } .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left { width: 30%; position: relative; - padding-left: 1.25rem; + padding-left: .625rem; } .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot { @@ -258,16 +269,15 @@ background: #05d1fc; } -.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi { - } +.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {} .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line { width: 50%; height: 1.25rem; background: rgba(255, 255, 255, 0.5); border-radius: 125rem; - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn { @@ -404,37 +414,34 @@ /*右边部分*/ .rightMain .rightMain_top { + border: 0.125rem solid rgba(14, 253, 255, 0.5); width: 100%; - padding-bottom: 1.5625rem; + position: relative; + height: 100%; } .rightMain .rightMain_topIn { - border: 0.125rem solid rgba(14, 253, 255, 0.5); - width: 100%; - min-height: 3.75rem; - position: relative; + padding: .625rem; } -.proportion { - height: 78vh; - overflow-y: auto; -} +.proportion {} + - .proportion ul li .liIn { display: flex; display: -webkit-flex; align-items: center; color: #fff; - font-size: 0.9375rem; - height: 2.8125rem; -} + font-size: 1.125rem; + font-weight: 700; + margin-bottom: .625rem; + } .proportion ul li .liIn .liIn_left { - width: 43%; + width: 50%; position: relative; - padding-left: 1.25rem; + padding-left: .625rem; } .proportion ul li .liIn .liIn_left .bot { @@ -451,12 +458,12 @@ } .proportion ul li .liIn .liIn_line { - width: 40%; + width: 32%; height: 1.25rem; background: rgba(255, 255, 255, 0.5); border-radius: 125rem; - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .proportion ul li .liIn .liIn_line .line_lineIn { @@ -470,10 +477,10 @@ .line_lineIn .per { position: absolute; top: 0; - left: 50%; + left: 30%; } - + @-webkit-keyframes widthMove1 { 0% { width: 0%; @@ -484,7 +491,7 @@ } } - + .proportion ul li .liIn .num { width: 18%; @@ -587,10 +594,10 @@ } .title_nums { - font-size: 1.25rem; + font-size: 1.25rem; font-weight: 700; color: #fff; - margin: .3125rem 0 .625rem ; + margin: .3125rem 0 .625rem; } .nums_box { @@ -604,34 +611,36 @@ /* 适配你深蓝色科技风的滚动条 */ /* 整体滚动条容器 */ ::-webkit-scrollbar { - width: 10px; /* 控制滚动条宽度，和你图中一致 */ + width: 10px; + /* 控制滚动条宽度，和你图中一致 */ height: 10px; } /* 滚动条轨道（背景） */ ::-webkit-scrollbar-track { - background: rgba(0, 150, 255, 0.1); /* 半透明蓝底，和界面融合 */ + background: rgba(0, 150, 255, 0.1); + /* 半透明蓝底，和界面融合 */ border-radius: 4px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { - background: linear-gradient( - to bottom, - #00d4ff, /* 顶部亮青色，和你的条形颜色呼应 */ - #0099cc /* 底部深蓝色，和背景协调 */ - ); + background: linear-gradient(to bottom, + #00d4ff, + /* 顶部亮青色，和你的条形颜色呼应 */ + #0099cc + /* 底部深蓝色，和背景协调 */ + ); border-radius: 4px; - box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); /* 发光效果，增强科技感 */ + box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); + /* 发光效果，增强科技感 */ } /* 滑块 hover 效果 */ ::-webkit-scrollbar-thumb:hover { - background: linear-gradient( - to bottom, - #00f0ff, - #00aadd - ); + background: linear-gradient(to bottom, + #00f0ff, + #00aadd); box-shadow: 0 0 10px rgba(0, 240, 255, 0.8); } diff --git a/src/views/regional/statistics/overview/index.vue b/src/views/regional/statistics/overview/index.vue index 4a7e805..19db75f 100644 --- a/src/views/regional/statistics/overview/index.vue +++ b/src/views/regional/statistics/overview/index.vue @@ -1,132 +1,130 @@ @@ -447,4 +404,18 @@ onUnmounted(() => { @import './css/icon.css'; @import './css/index.css'; @import './css/public.css'; + + \ No newline at end of file