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