diff --git a/src/assets/images/back.png b/src/assets/images/back.png new file mode 100644 index 0000000..c548462 Binary files /dev/null and b/src/assets/images/back.png differ 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