修改页面

马宇豪

2023-10-09 2000726aeae69e167461d47c41463d8fac3d8054

 src/main/resources/static/css/publicity/style.css

@@ -2,26 +2,30 @@

.flexNone{flex:none;}

.container{width:calc(100% - 60px); height:calc(100% - 60px); background:radial-gradient(#072840,#03101E); padding:30px; overflow: hidden;}
.header{height: 7.87vh; position: relative; margin-bottom: 15px; display: flex;}
.header:before{content: ' '; background-image: url(../../img/publicity/head_left_fgx.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; bottom: 0; left: 0; width: 50%; height: 1.95vh;}
.header:after{content: ' '; background-image: url(../../img/publicity/head_right_fgx.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.95vh;}
.container{width:calc(100% - 50px); height:calc(100% - 50px); background:url("../../img/publicity/img.jpg") no-repeat center;background-size: 100% 100%; padding:25px; overflow: hidden;display: flex;flex-direction: column;justify-content: space-between}
.header{width: 100%;margin-bottom: 15px; display: flex;flex-direction: column;align-items: center}
.header .header-cont{width: 100%;height: 100%; position: relative; display: flex;margin-bottom: 10px}
/*.header:before{content: ' '; background-image: url(../../img/publicity/head_left_fgx.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; bottom: 0; left: 0; width: 50%; height: 1.95vh;}*/
/*.header:after{content: ' '; background-image: url(../../img/publicity/head_right_fgx.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.95vh;}*/
.header .title-line{width: 100%;height: 22px;background: url("../../img/publicity/title-line.png") no-repeat center;background-size: 100% 100%;}
.header .header_left{background-image: url(../../img/publicity/head_left_bg.png); background-position: top right; background-size: 100% 100%; background-repeat: no-repeat; height: 5vh; align-items: center; padding-bottom: .5vh; flex: 1; overflow: hidden; display:flex; align-items:center;}
.header .header_left .logo_text{color: #00f3f0; font-size: 2.2vh; letter-spacing: 2px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px;}

.header .header_left{background-image: url(../../img/publicity/head_left_bg.png); background-position: top right; background-size: 100% 100%; background-repeat: no-repeat; height: 5.38vh; align-items: center; padding-bottom: .5vh; flex: 1; overflow: hidden; display:flex; align-items:center;}
.header .header_left .logo_text{color: #00f3f0; font-size: 2.5vh; letter-spacing: 2px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px;}
.header .header_center{color: #00f3f0; font-size: 4vh;font-weight: 600; text-align: center; line-height: 1; letter-spacing: 4px; padding-top: 8px;flex: 1;overflow: hidden;}

.header .header_center{color: #72e0f5; font-size: 4vh;font-weight: 600; text-align: center; line-height: 1; letter-spacing: 4px; padding-top: 8px;flex: 1;overflow: hidden;}

.header .header_right{background-image: url(../../img/publicity/head_right_bg.png); background-position: top left; background-size: 100% 100%; background-repeat: no-repeat; height: 5.38vh; align-items: center; padding-bottom: .5vh; flex: 1;
    overflow: hidden;display: flex;}
.header .header_right .datetime{color: #00f3f0;font-size: 2.5vh; letter-spacing: 2px; text-align: right; line-height: 1; padding-left:2vw;}
.header .header_right .switch_fullscreen{height: 3.71vh; width: 3.71vh; margin-left: 16px; background: #ffffff2b; justify-content: center; line-height: 3.71vh; font-size: 2.5vh; color: #72e0f5; cursor: pointer; display:flex; align-items:center;}
.header .header_right{background-image: url(../../img/publicity/head_right_bg.png); background-position: top left; background-size: 100% 100%; background-repeat: no-repeat; height: 5vh; align-items: center; padding-bottom: .5vh; flex: 1;
    overflow: hidden;display: flex;justify-content: space-between}
.header .header_right .datetime{color: #00f3f0;font-size: 2.2vh; letter-spacing: 2px; text-align: right; line-height: 1; padding-left:3vw;}
.header .header_right .btn-cont{display: flex;align-items: center}
.header .header_right .switch_fullscreen{height: 3.71vh; width: 3.71vh;border-radius: 50%;margin-left: 10px; background: #ffffff2b; justify-content: center; line-height: 3.71vh; font-size: 2.5vh; color: #72e0f5; cursor: pointer; display:flex; align-items:center;}
.header .header_right .switch_fullscreen .anticon{display: inline-block; color: inherit; font-style: normal; line-height: 0; text-align: center; text-transform: none; vertical-align: -.125em; text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}


.firstRow{margin-bottom: 2.97vh; display:flex;}
.firstRow .map{height:100%; flex:1;height:35.13vh;margin: 0 1.67vw; border:1px solid #7CD5FF; position:relative}
.firstRow{width: 100%; margin-bottom: 15px; display:flex;justify-content: space-between}
.firstRow>div{margin-right: 1.6vw}
.firstRow>div:last-of-type{margin-right: 0}
.firstRow .map{height:100%; flex:1;height:35.13vh;border:1px solid #7CD5FF; position:relative}
/*轮播*/
.lunbo{overflow:hidden; width:30vw; height:35.13vh;}
.lunbo .swiper-wrapper{align-items: center;height:35.13vh;}
@@ -38,12 +42,12 @@
.lunbo .swiper-pagination-bullet-active:before{width: 24px!important; opacity: 1; border-radius: 100px; transform: scale(1.2); background: #fa6f66;}

.firstRow .rowCenter{height:35.13vh; flex:1.22;  display: flex; flex-direction: column;}
.firstRow .rowCenter .tj1{position: relative; padding: 0 27px; margin-bottom: 1.13vh; display: flex;}
.firstRow .rowCenter .tj1{position: relative; margin-bottom: 1.13vh; display: flex;justify-content: space-between}
/*.firstRow .rowCenter .tj1:before{content: ' '; background-image: url(../../img/publicity/tj1_top_left.png); background-position: center; background-repeat: no-repeat; position: absolute; height: 21px; width: 21px; top: 0; bottom: 0; margin: auto; left: 0;}*/
/*.firstRow .rowCenter .tj1:after{content: ' '; background-image: url(../../img/publicity/tj1_top_right.png); background-position: center; background-repeat: no-repeat; position: absolute; height: 21px; width: 21px; top: 0; bottom: 0; margin: auto; right: 0;}*/

.firstRow .rowCenter .tj1 .tj1_card{background:url(../../img/publicity/tj1_bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-origin: padding-box; border-width: 10px; border-style: solid; -o-border-image: url(1排中上-4.ee30b40….png) 10 stretch; border-image: url(../../img/publicity/tj1_border.png) 10 stretch; justify-content: center; flex:1;}
.firstRow .rowCenter .tj1 .tj1_card .tj1_card_title{color: #04cfcd; font-size: 2.1vh; line-height: 1.3; text-align: center; margin-bottom: 1.3vh;}
.firstRow .rowCenter .tj1 .tj1_card{width: calc(33% - 10px);background:url(../../img/publicity/tj1_bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-origin: padding-box; border-width: 10px; border-style: solid; -o-border-image: url(1排中上-4.ee30b40….png) 10 stretch; border-image: url(../../img/publicity/tj1_border.png) 10 stretch; justify-content: center; flex:1;}
.firstRow .rowCenter .tj1 .tj1_card .tj1_card_title{color: #00f6ff; font-size: 2.1vh; line-height: 1.3; text-align: center; margin-bottom: 1.3vh;}
.firstRow .rowCenter .tj1 .tj1_card .tj1_card_value{color: #00deff; font-size: 3.7vh; line-height: 1; text-align: center; font-weight: 700;}
.firstRow .rowCenter .tj1 .tj1_card_center{margin: 0 22px; position: relative;}

@@ -53,7 +57,7 @@
.firstRow .rowCenter .tj2 .tj2_content .row{display: flex;padding-bottom: .8vw; border-bottom: 1px solid rgba(3,94,119,.4); flex: 1; overflow: hidden;}
.firstRow .rowCenter .tj2 .tj2_content .row2{padding-top: .8vw; border-top: 1px solid rgba(3,94,119,.4); display: flex; flex: 1; overflow: hidden;}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item{display: flex; flex-direction: column; justify-content: center; width:25vw}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item .tj2_item_title{color: #04cfcd; font-size: 1.7vh; line-height: 1.5; margin-bottom: 1.3vh; overflow: hidden;}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item .tj2_item_title{color: #00f6ff; font-size: 1.7vh; line-height: 1.5; margin-bottom: 1.3vh; overflow: hidden;}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item .tj2_item_value_wrap{font-size: 36px; line-height: 36px;}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item .tj2_item_value_wrap .tj2_item__icon{background-repeat: no-repeat; background-position: center; background-size: contain; width: 3.71vh; height: 3.71vh; float: left;}
.firstRow .rowCenter .tj2 .tj2_content .tj2_item .tj2_item_value_wrap .tj2_item__icon.zdfx{background-image:url(../../img/publicity/zdfx.png)}
@@ -71,7 +75,7 @@
.firstRow .rowRight .gs_card{height:calc(100% - 1.86vh - 20px); background-image: url(../../img/publicity/tj1_bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-origin: padding-box; border-width: 10px; border-style: solid; -o-border-image: url(../../img/publicity/rowRight_border.png) 10 stretch; border-image: url(../../img/publicity/rowRight_border.png) 10 stretch; padding:.93vh; display:flex; overflow:hidden}
.firstRow .rowRight .gs_card .swiper_left{flex:1; border-right:1px solid rgba(3,94,119,.4);padding-right:.93vh}
.firstRow .rowRight .gs_card .swiper_right{flex:1; border-left:1px solid rgba(3,94,119,.4);padding-left:.93vh}
.firstRow .rowRight .gs_card .two_title{background-image: url(../../img/publicity/second_title_pre.png); background-repeat: no-repeat; background-position: left center; background-size: contain; padding-left: 1.67vw; height: 2.46vh; line-height: 1; font-size: 2.46vh; color: #04cfcd; margin-bottom: 1.3vh;}
.firstRow .rowRight .gs_card .two_title{background-image: url(../../img/publicity/second_title_pre2.png); background-repeat: no-repeat; background-position: left center; background-size: contain; padding-left: 1.67vw; height: 2.46vh; line-height: 1; font-size: 2.2vh; color: #00f6ff; margin-bottom: 1.3vh;}


.gongshi{overflow:hidden; width:200px;}
@@ -92,8 +96,8 @@


.endRow{width:100%; display:flex;}
.endRow .two_title{background-image: url(../../img/publicity/second_title_pre.png); background-repeat: no-repeat; background-position: left center; background-size: contain; padding-left: 1.67vw; height: 2.46vh; line-height: 1; font-size: 2.46vh; color: #04cfcd; margin-bottom: 1.3vh;}
.endRow .endRow_left{flex:1; margin-right:1.25vw;display: flex; flex-direction: column; height:45vh;width:50%}
.endRow .two_title{background-image: url(../../img/publicity/second_title_pre2.png); background-repeat: no-repeat; background-position: left center; background-size: contain; padding-left: 1.67vw; height: 2.46vh; line-height: 1; font-size: 2.2vh; color: #00f6ff; margin-bottom: 1.3vh;}
.endRow .endRow_left{flex:1; margin-right:1.25vw;display: flex; flex-direction: column;width:50%}
.endRow .endRow_right{flex:1; display: flex; flex-direction: column;width:50%}
.endRow .chart_card{height: calc(100% - 40px); background-image: url(../../img/publicity/tj1_bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-origin: padding-box; border-width: 20px; border-style: solid; -o-border-image: url(../../img/publicity/count_border_bg.png) 20 stretch; border-image: url(../../img/publicity/count_border_bg.png) 20 stretch; flex:1;overflow: hidden;}