做适配性

This commit is contained in:
duxp 2024-01-30 10:31:11 +08:00
parent 0686e2be81
commit c70d1ded11
1 changed files with 130 additions and 109 deletions

View File

@ -30,7 +30,7 @@
text-align: right;
box-sizing: border-box;
padding-right: 10%;
font-size: 40px;
font-size: 30px;
color: #ffffff;
font-weight: bolder;
}
@ -44,14 +44,14 @@
color: #ffffff;
}
.index_wrap .index_header .header_right div:nth-child(2){
width: 50px;
height: 50px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f80606;
}
.index_wrap .index_header .header_right div:nth-child(3){
box-sizing: border-box;
padding: 15px 30px;
padding: 10px 20px;
background-color: #a7b6ca;
border-radius: 10px;
}
@ -88,6 +88,7 @@
text-align: center;
animation: flow 1s linear infinite;
color: #ffffff;
font-size: 30px;
}
.content_one_top div:nth-child(2){
width: 100%;
@ -111,10 +112,10 @@
color: #ffffff;
}
.content_one_right_row{
font-size: 30px;
font-size: 20px;
position: absolute;
top: 28%;
left: 110px;
top: 27%;
left: 75px;
transform: translateY(-60%);
color: #ffffff;
font-weight: bolder;
@ -125,35 +126,37 @@
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 28%;
left: 50px;
top: 25%;
left: 20px;
}
.content_two{
height: 100%;
height: 65vh;
display: flex;
align-items: center;
position: relative;
margin-left: 20px;
}
.content_two_list{
height: 70%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content_two_item{
width: 100%;
width: 100px;
text-align: center;
box-sizing: border-box;
padding: 10px;
margin: 10px 0;
background-color: #3657ff;
color: #ffffff ;
color: #ffffff;
font-size: 16px;
}
.content_two_right_row{
font-size: 30px;
font-size: 20px;
position: absolute;
top: 54%;
left:120%;
top: 62%;
left:105%;
transform: translateY(-110%);
color: #ffffff;
font-weight: bolder;
@ -167,11 +170,11 @@
}
.content_three_top{
width: 20px;
height: 50%;
height: 55%;
background-color: #28466d;
overflow: hidden;
position: relative;
margin: 20px 0 0 30px;
margin: 20px 0 0 10px;
border-radius: 10px;
}
.content_three_top div:nth-child(1){
@ -181,6 +184,7 @@
text-align: center;
animation: flow 1s linear infinite;
color: #ffffff;
font-size: 30px;
}
.content_three_top div:nth-child(2){
width: 100%;
@ -202,11 +206,11 @@
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 15%;
left: 12.5%;
top: 18%;
left: 15%;
}
.content_four{
width: 28vw;
width: 25vw;
height: 100%;
box-sizing: border-box;
position: relative;
@ -222,7 +226,7 @@
width: 40%;
text-align: center;
box-sizing: border-box;
padding: 10px 20px;
padding: 5px 10px;
background-color: #3657ff;
font-size: 16px;
color: #ffffff;
@ -231,7 +235,7 @@
width: 40%;
text-align: center;
box-sizing: border-box;
padding: 10px 20px;
padding: 5px 10px;
background-color: #3657ff;
font-size: 16px;
color: #ffffff;
@ -257,6 +261,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_four_item_two_top div:nth-child(2){
position: absolute;
@ -308,6 +313,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_four_item_three_top div:nth-child(2){
position: absolute;
@ -320,6 +326,7 @@
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
}
.content_four_item_three_bottom{
width: 100%;
@ -337,6 +344,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_four_item_three_bottom div:nth-child(2){
position: absolute;
@ -349,6 +357,7 @@
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
}
.content_four_tips_one{
width: 25px;
@ -356,7 +365,7 @@
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 12%;
top: 14%;
left: 40%;
}
.content_four_tips_two{
@ -365,7 +374,7 @@
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 12%;
top: 14%;
left: 90%;
}
.content_four_five{
@ -377,6 +386,7 @@
align-items: center;
}
.content_four_five_item{
width:9%;
display: flex;
flex-direction: column;
align-items: center;
@ -384,20 +394,20 @@
margin: 0 5px;
}
.content_four_five_item div:nth-child(1){
font-size: 16px;
font-size: 12px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
color: #ffffff;
}
.content_four_five_item div:nth-child(2){
width: 25px;
width: 10px;
height: 5vh;
background-color: #3657ff;
}
.content_four_five_item div:nth-child(3){
width: 50px;
height: 30vh;
width: 30px;
height: 25vh;
background-color: #3657ff;
display: flex;
flex-direction: column;
@ -407,24 +417,24 @@
padding: 20px 0;
}
.content_four_five_item div:nth-child(3) div:nth-child(1){
width: 25px;
height: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000000;
}
.content_four_five_item div:nth-child(3) div:nth-child(2){
width: 25px;
height: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000000;
}
.content_four_five_item div:nth-child(4){
width: 25px;
width: 15px;
height: 5vh;
background-color: #3657ff;
}
.content_four_five_item div:nth-child(5){
font-size: 16px;
font-size: 12px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
@ -434,7 +444,7 @@
width: 100%;
}
.content_four_six_progress{
width: 94%;
width: 90%;
margin: 0 auto;
height: 20px;
background-color: #28466d;
@ -449,6 +459,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_four_six_progress div:nth-child(2){
position: absolute;
@ -461,6 +472,7 @@
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
}
.content_four_six_tips{
width: 25px;
@ -472,18 +484,18 @@
left: 4%;
}
.content_four_seven{
width: 20%;
display: inline-block;
text-align: center;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
padding: 5px 10px;
font-size: 14px;
background-color: #3657ff;
margin: 10px auto 0;
color: #ffffff;
border-radius: 10px;
margin: 10px 0 0 30%;
}
.content_four_eight_progress{
width: 30%;
width: 40%;
margin: 0 auto;
height: 20px;
background-color: #28466d;
@ -500,6 +512,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_four_eight_progress div:nth-child(2){
width: 70%;
@ -513,6 +526,7 @@
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
}
.content_four_btns{
width: 100%;
@ -520,14 +534,14 @@
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-top: 4%;
margin-top: 8%;
}
.content_four_btns div{
width: 40%;
text-align: center;
font-size: 16px;
font-size: 14px;
box-sizing: border-box;
padding: 10px;
padding: 5px 10px;
background-color: #3657ff;
color: #ffffff;
border-radius: 10px;
@ -539,7 +553,7 @@
background-color: #ff0000;
position: absolute;
right: 25%;
bottom: 9%;
bottom: 8%;
}
.content_four_six_right_row{
font-size: 25px;
@ -547,13 +561,13 @@
transform: rotate(180deg);
position: absolute;
right: 12%;
bottom: 14%;
bottom: 15%;
}
.content_four_eight_right_row{
font-size: 30px;
font-size: 25px;
color: #ffffff;
position: absolute;
right: -7%;
right: -8%;
bottom: 11%;
}
.content_five{
@ -580,6 +594,7 @@
text-align: center;
animation: flow 1s linear infinite;
color: #ffffff;
font-size: 30px;
}
.content_five_one_top div:nth-child(2){
width: 100%;
@ -601,7 +616,7 @@
left: -20%;
}
.conteng_six{
width: 27vw;
width: 25vw;
height: 100%;
box-sizing: border-box;
padding: 10px;
@ -618,8 +633,8 @@
border-radius: 50%;
background-color: #3ef510;
position: absolute;
top: -130%;
left: -140%;
left: 0;
bottom: 100%;
}
.conteng_six_right_progress{
width: 20%;
@ -643,6 +658,7 @@
text-align: center;
animation: flow 1s linear infinite;
color: #ffffff;
font-size: 30px;
}
.conteng_six_right_progress div:nth-child(2){
width: 100%;
@ -667,7 +683,7 @@
align-items: center;
}
.content_six_one_left div{
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
width: 80px;
text-align: center;
@ -685,7 +701,7 @@
.content_six_one_right_left div{
width: 80px;
text-align: center;
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
margin: 5px 0;
color: #ffffff;
@ -701,7 +717,7 @@
align-items: center;
}
.content_six_one_right_right div{
font-size: 16px;
font-size: 14px;
margin: 5px 0;
font-weight: bolder;
color: #ffffff;
@ -737,7 +753,7 @@
}
.conteng_six_two_left_one_left{
box-sizing: border-box;
padding: 10px 30px;
padding: 10px;
border-radius: 10px;
background-color: #3657ff;
display: flex;
@ -745,34 +761,34 @@
align-items: center;
}
.conteng_six_two_left_one_left div:nth-child(1){
font-size: 16px;
font-size: 14px;
margin: 5px 0;
color: #ffffff;
}
.conteng_six_two_left_one_left div:nth-child(2){
width: 25px;
height: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(3){
width: 25px;
height: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3ef510;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(4){
width: 25px;
height: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(5){
width: 25px;
height: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3ef510;
margin: 5px 0;
@ -781,10 +797,10 @@
display: flex;
flex-direction: column;
align-items: center;
margin-left: 50px;
margin-left: 20px;
}
.conteng_six_two_left_one_right div:nth-child(1){
font-size: 16px;
font-size: 14px;
margin-bottom: 10px;
color: #ffffff;
}
@ -793,7 +809,7 @@
text-align: center;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
margin: 10px 0;
color: #ffffff;
@ -803,7 +819,7 @@
text-align: center;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
margin: 10px 0;
color: #ffffff;
@ -813,7 +829,7 @@
text-align: center;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
margin-top: 10px;
color: #ffffff;
@ -822,52 +838,52 @@
display: flex;
flex-direction: row;
align-items: center;
margin: 20px 0 0 20px;
margin: 10px 0 0 5px;
}
.conteng_six_two_left_two div{
box-sizing: border-box;
padding: 10px 20px;
margin: 0 10px;
margin: 0 5px;
}
.conteng_six_two_left_two div:nth-child(1){
background-color: #3657ff;
font-size: 16px;
font-size: 14px;
color: #ffffff;
}
.conteng_six_two_left_two div:nth-child(2){
background-color: #3657ff;
font-size: 16px;
font-size: 14px;
color: #ffffff;
}
.conteng_six_two_left_three{
display: flex;
flex-direction: row;
align-items: center;
margin: 20px 0 0 10px;
margin: 10px 0 0 5px;
}
.conteng_six_two_left_three div{
box-sizing: border-box;
padding: 10px 20px;
margin: 0 10px;
padding: 10px;
margin: 0 5px;
color: #ffffff;
}
.conteng_six_two_left_three div:nth-child(1){
background-color: #3657ff;
font-size: 16px;
font-size: 12px;
}
.conteng_six_two_left_three div:nth-child(2){
background-color: #3657ff;
font-size: 16px;
font-size: 12px;
}
.conteng_six_two_left_three div:nth-child(3){
background-color: #3657ff;
font-size: 16px;
font-size: 12px;
}
.conteng_six_two_left_four{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 20px;
margin-top: 10px;
}
.conteng_six_two_left_four_left{
display: flex;
@ -875,13 +891,13 @@
align-items: center;
}
.conteng_six_two_left_four_left div:nth-child(1){
font-size: 16px;
font-size: 14px;
margin-bottom: 10px;
color: #ffffff;
}
.conteng_six_two_left_four_left div:nth-child(2){
font-size: 16px;
margin-bottom: 10px;
font-size: 14px;
margin-bottom: 5px;
box-sizing: border-box;
padding: 10px;
width: 80px;
@ -890,7 +906,7 @@
color: #ffffff;
}
.conteng_six_two_left_four_left div:nth-child(3){
font-size: 16px;
font-size: 14px;
box-sizing: border-box;
padding: 10px;
width: 80px;
@ -899,13 +915,13 @@
color: #ffffff;
}
.conteng_six_two_left_four_right{
margin-left: 40px;
margin-left: 20px;
}
.conteng_six_two_left_four_right_top{
font-size: 16px;
font-size: 12px;
box-sizing: border-box;
padding: 20px;
width: 160px;
padding: 10px;
width: 100px;
text-align: center;
background-color: #3657ff;
display: flex;
@ -915,14 +931,14 @@
color: #ffffff;
}
.conteng_six_two_left_four_right_top div:nth-child(2){
width: 25px;
height: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin-left: 20px;
margin-left: 10px;
}
.conteng_six_two_left_four_right_progress{
font-size: 30px;
font-size: 25px;
color: #ffffff;
transform: rotate(180deg);
margin: -10px 100px 10px 0;
@ -931,29 +947,30 @@
display: flex;
flex-direction: row;
align-items: center;
margin-top: -15px;
margin-top: -13px;
}
.conteng_six_two_left_four_right_bottom div:nth-child(1){
display: inline-block;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
font-size: 14px;
background-color: #3657ff;
margin: 0 0 0 75px;
width: 160px;
margin: 0 0 0 25px;
width: 100px;
text-align: center;
color: #ffffff;
}
.conteng_six_two_left_four_right_bottom div:nth-child(2){
font-size: 30px;
font-size: 20px;
color: #ffffff;
margin-left: 5px;
}
.conteng_six_two_left_four_right_bottom2{
width: 25px;
height: 25px;
background-color: #3ef510;
border-radius: 50%;
margin-left: 75px;
margin-left: 25px;
}
.conteng_six_two_left_five_btn{
display: flex;
@ -963,12 +980,13 @@
}
.conteng_six_two_left_five_btn div{
box-sizing: border-box;
padding: 10px 20px;
padding: 5px;
background-color: #3657ff;
font-size: 16px;
margin: 25px 10px 0;
font-size: 14px;
margin: 5px 10px 0;
color: #ffffff;
border-radius: 10px;
border-radius:
10px;
}
.content_six_two_right{
width: 20%;
@ -978,7 +996,7 @@
}
.content_six_two_right_progress{
width: 20px;
height: 50vh;
height: 40vh;
background-color: #28466d;
overflow: hidden;
position: relative;
@ -991,6 +1009,7 @@
text-align: center;
animation: flow 1s linear infinite;
color: #ffffff;
font-size: 30px;
}
.content_six_two_right_progress div:nth-child(2){
width: 100%;
@ -1003,7 +1022,7 @@
transform: translateY(-50%);
}
.content_six_two_right_flow{
font-size: 30px;
font-size: 20px;
color: #ffffff;
}
.content_six_two_right_two{
@ -1035,7 +1054,7 @@
height: 25px;
border-radius: 50%;
background-color: #3ef510;
margin-left: 80px;
margin-left: 260px;
}
.content_seven_one_bottom{
display: flex;
@ -1064,6 +1083,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_seven_one_bottom_right div:nth-child(2){
position: absolute;
@ -1101,6 +1121,7 @@
text-align: center;
animation: flowThree 1s linear infinite;
color: #ffffff;
font-size: 25px;
}
.content_seven_three div:nth-child(2){
position: absolute;
@ -1132,7 +1153,7 @@
color: #ffffff;
}
.content_seven_four_item div:nth-child(1){
font-size: 16px;
font-size: 14px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
@ -1146,7 +1167,7 @@
}
.content_seven_four_item div:nth-child(3){
width: 50px;
height: 33vh;
height: 25vh;
background-color: #3657ff;
display: flex;
flex-direction: column;
@ -1173,7 +1194,7 @@
background-color: #3657ff;
}
.content_seven_four_item div:nth-child(5){
font-size: 16px;
font-size: 14px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
@ -1191,7 +1212,7 @@
box-sizing: border-box;
padding: 10px 20px;
background-color: #3657ff;
margin: 20px 20px 0;
margin: 10px 10px 0;
color: #ffffff;
border-radius: 10px;
}