第一次提交
This commit is contained in:
346
src/page/HomePage/index.css
Normal file
346
src/page/HomePage/index.css
Normal file
@@ -0,0 +1,346 @@
|
||||
@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);
|
||||
}
|
||||
Reference in New Issue
Block a user