347 lines
7.4 KiB
CSS
347 lines
7.4 KiB
CSS
@font-face {
|
|
font-family: "站酷庆科黄油体";
|
|
src: url("../../assets/fonts/站酷庆科黄油体.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
.left_part {
|
|
width: 542px;
|
|
position: absolute;
|
|
top: 82px;
|
|
margin-left: 52px;
|
|
}
|
|
.left_up1 {
|
|
width: 523px;
|
|
height: 224px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/L1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-bottom: 24px;
|
|
padding: 12px 0 0 20px;
|
|
position: relative;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.left_up1_numbg{
|
|
display: inline-block;
|
|
width: 46px;
|
|
height: 62px;
|
|
background: url(../../../public/image/homePage/num_box2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-right: 5px;
|
|
font-family: "站酷庆科黄油体";
|
|
font-size: 58px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
vertical-align: bottom;
|
|
}
|
|
.left_up1_text{
|
|
display: inline-block;
|
|
width: 46px;
|
|
height: 53px;
|
|
background: url(../../../public/image/homePage/num_box3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-right: 5px;
|
|
font-family: "站酷庆科黄油体";
|
|
font-size: 36px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 55px;
|
|
vertical-align: bottom;
|
|
}
|
|
.left_up1_tip {
|
|
position: absolute;
|
|
left: 110px;
|
|
bottom: 30px;
|
|
font-size: 33px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 3px;
|
|
}
|
|
.left_up1_tip::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 430px;
|
|
height: 4px;
|
|
background: linear-gradient( 270deg, rgba(138,231,248,0) 0%, #6FE2FF 51%, rgba(82,203,239,0) 100%);
|
|
filter: blur(1px);
|
|
position: absolute;
|
|
top: 39px;
|
|
left: -60px;
|
|
}
|
|
.left_up2_tip {
|
|
position: absolute;
|
|
left: 50px;
|
|
bottom: 42px;
|
|
font-size: 33px;
|
|
color: #FFFFFF;
|
|
}
|
|
.left_up2_tip::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 210px;
|
|
height: 4px;
|
|
background: linear-gradient( 270deg, rgba(138,231,248,0) 0%, #6FE2FF 51%, rgba(82,203,239,0) 100%);
|
|
filter: blur(1px);
|
|
position: absolute;
|
|
top: 39px;
|
|
left: -19px;
|
|
}
|
|
.left_down1 {
|
|
width: 523px;
|
|
height: 224px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/L2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-bottom: 24px;
|
|
padding: 12px 0 0 20px;
|
|
position: relative;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.left_down1_tip {
|
|
position: absolute;
|
|
left: 66px;
|
|
font-size: 33px;
|
|
color: #FFFFFF;
|
|
}
|
|
.left_down1_numbg{
|
|
display: inline-block;
|
|
width: 45px;
|
|
height: 55px;
|
|
background: url(../../../public/image/homePage/num_box1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-right: 5px;
|
|
font-family: "站酷庆科黄油体";
|
|
font-size: 58px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 55px;
|
|
vertical-align: bottom;
|
|
}
|
|
.left_down1_dotted{
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 9px;
|
|
background: url(../../../public/image/homePage/dotted.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-right: 5px;
|
|
vertical-align: bottom;
|
|
}
|
|
.left_down1_tip::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 236px;
|
|
height: 4px;
|
|
background: linear-gradient( 270deg, rgba(138,231,248,0) 0%, #6FE2FF 51%, rgba(82,203,239,0) 100%);
|
|
filter: blur(1px);
|
|
position: absolute;
|
|
top: 39px;
|
|
left: -19px;
|
|
}
|
|
.left_down2 {
|
|
width: 523px;
|
|
height: 232px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/L2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding: 12px 0 0 20px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
/* 中间部分 */
|
|
.center_up_box {
|
|
width: 4557px;
|
|
height: 624px;
|
|
position: absolute;
|
|
top: 180px;
|
|
left: 602px;
|
|
}
|
|
.center_up_top1 {
|
|
width: 466px;
|
|
height: 152px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/center_top.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 1455px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.center_up_top2 {
|
|
width: 574px;
|
|
height: 152px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/center_top.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 1940px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.center_up_top1_text {
|
|
width: 355px;
|
|
height: 152px;
|
|
padding-top:22px;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
right:0;
|
|
}
|
|
.center_up_top1_text div {
|
|
display: inline-block;
|
|
color:#fff;
|
|
padding:0 15px;
|
|
}
|
|
.center_up_top_text_split {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 85px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(167, 169, 171, 1) 0%,
|
|
rgba(237, 237, 237, 1) 50%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
}
|
|
.center_up_top2_text {
|
|
width: 463px;
|
|
height: 152px;
|
|
padding-top:22px;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
right:0;
|
|
}
|
|
.center_up_top2_text div {
|
|
display: inline-block;
|
|
color:#fff;
|
|
padding:0 15px;
|
|
}
|
|
.line_up {
|
|
width: 4400px;
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/line1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 80px;
|
|
top:100px
|
|
}
|
|
.line_down {
|
|
width: 4400px;
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/line2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 80px;
|
|
bottom:-20px
|
|
}
|
|
.center_up .eqbg1 {
|
|
width: 175px;
|
|
height: 81px;
|
|
position:absolute;
|
|
background: url(../../../public/image/homePage/eq_bg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 8px 0 0 25px;
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.center_up .eqbg_text{
|
|
font-weight: 500;
|
|
font-size: 19px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5px;
|
|
z-index: 2;
|
|
}
|
|
.center_up .eqbg_num{
|
|
font-weight: 500;
|
|
font-size: 41px;
|
|
color: #00F4FF;
|
|
line-height: 34px;
|
|
z-index: 2;
|
|
}
|
|
.center_up .eqbg2 {
|
|
width: 175px;
|
|
height: 81px;
|
|
position:absolute;
|
|
background: url(../../../public/image/homePage/eq_bg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 8px 0 0 25px;
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.center_down_box {
|
|
width: 4600px;
|
|
height: 230px;
|
|
position: absolute;
|
|
bottom: 23px;
|
|
left: 602px;
|
|
}
|
|
.center_down {
|
|
width: 440px;
|
|
height: 230px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/L2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding: 12px 15px 15px;
|
|
position:relative;
|
|
margin-right: 18px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.chart_blur_bg {
|
|
height: 174px;
|
|
padding: 5px 10px 0px 5px;
|
|
box-sizing: border-box;
|
|
background: url(../../../public/image/homePage/cd1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
border-radius: 10px;
|
|
}
|
|
.legend_right {
|
|
position: absolute;
|
|
right: 17px;
|
|
top: 25px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
.legend_right .dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.right_part {
|
|
width: 524px;
|
|
position: absolute;
|
|
top: 82px;
|
|
right: 43px;
|
|
}
|
|
|
|
.dv-scroll-board {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.dv-scroll-board .header .header-item,
|
|
.dv-scroll-board .rows .ceil {
|
|
border-right: 1px solid #0b193e;
|
|
}
|
|
.dv-scroll-board .header .header-item:last-child,
|
|
.dv-scroll-board .rows .ceil:last-child {
|
|
border-right: none;
|
|
border: none;
|
|
}
|
|
.dv-scroll-board .header {
|
|
font-size: 18px;
|
|
}
|
|
.dv-scroll-board .rows .row-item {
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|