1556 lines
52 KiB
HTML
1556 lines
52 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>犇牛饲料厂压片玉米车间</title>
|
|||
|
|
<style>
|
|||
|
|
*{
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
.index_wrap{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-image: url(./index_bg.jpg);
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_header{
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_header .header_left{
|
|||
|
|
flex: 2;
|
|||
|
|
text-align: right;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-right: 10%;
|
|||
|
|
font-size: 40px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_header .header_right{
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_header .header_right div:nth-child(2){
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_header .header_right div:nth-child(3){
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px 30px;
|
|||
|
|
background-color: #a7b6ca;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.index_wrap .index_content{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 85vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background-color: #22283393;
|
|||
|
|
}
|
|||
|
|
.content_one{
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_one_top{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 70%;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
margin: 120% 0 0 10px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_one_top div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flow 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_one_top div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
@keyframes flow {
|
|||
|
|
0% { transform: translateY(0); } /* 初始状态，y轴位移为0 */
|
|||
|
|
100% { transform: translateY(-30px); } /* 结束状态，y轴位移为-30像素 */
|
|||
|
|
}
|
|||
|
|
.content_one_bottom{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 10px 0 0 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_one_right_row{
|
|||
|
|
font-size: 30px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 28%;
|
|||
|
|
left: 110px;
|
|||
|
|
transform: translateY(-60%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
}
|
|||
|
|
.content_one_tips_circle{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 28%;
|
|||
|
|
left: 50px;
|
|||
|
|
}
|
|||
|
|
.content_two{
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.content_two_list{
|
|||
|
|
height: 70%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_two_item{
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff ;
|
|||
|
|
}
|
|||
|
|
.content_two_right_row{
|
|||
|
|
font-size: 30px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 54%;
|
|||
|
|
left:120%;
|
|||
|
|
transform: translateY(-110%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
}
|
|||
|
|
.content_three{
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 1%;
|
|||
|
|
}
|
|||
|
|
.content_three_top{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
margin: 20px 0 0 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_three_top div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flow 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_three_top div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
@keyframes flow {
|
|||
|
|
0% { transform: translateY(0); } /* 初始状态，y轴位移为0 */
|
|||
|
|
100% { transform: translateY(-30px); } /* 结束状态，y轴位移为-30像素 */
|
|||
|
|
}
|
|||
|
|
.content_three_tips_circle{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15%;
|
|||
|
|
left: 12.5%;
|
|||
|
|
}
|
|||
|
|
.content_four{
|
|||
|
|
width: 28vw;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.content_four_item_one{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.content_four_item_one .item_one_left{
|
|||
|
|
width: 40%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_one .item_one_right{
|
|||
|
|
width: 40%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_two{
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_item_two_top{
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_item_two_top div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_two_top div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
@keyframes flowThree {
|
|||
|
|
0% { transform: translateX(-30px); } /* 初始状态，y轴位移为0 */
|
|||
|
|
100% { transform: translateX(10px); } /* 结束状态，y轴位移为-30像素 */
|
|||
|
|
}
|
|||
|
|
.content_four_item_two_bottom{
|
|||
|
|
display: inline-block;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three div{
|
|||
|
|
width: 46%;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_top{
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_top div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_top div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_bottom{
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_bottom div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_item_three_bottom div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_four_tips_one{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12%;
|
|||
|
|
left: 40%;
|
|||
|
|
}
|
|||
|
|
.content_four_tips_two{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12%;
|
|||
|
|
left: 90%;
|
|||
|
|
}
|
|||
|
|
.content_four_five{
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0 5px;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(1){
|
|||
|
|
font-size: 16px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 5vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(3){
|
|||
|
|
width: 50px;
|
|||
|
|
height: 30vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(3) div:nth-child(1){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(3) div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #000000;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(4){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 5vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
}
|
|||
|
|
.content_four_five_item div:nth-child(5){
|
|||
|
|
font-size: 16px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_six{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.content_four_six_progress{
|
|||
|
|
width: 94%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_six_progress div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_six_progress div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_four_six_tips{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 13%;
|
|||
|
|
left: 4%;
|
|||
|
|
}
|
|||
|
|
.content_four_seven{
|
|||
|
|
width: 20%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 10px auto 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_eight_progress{
|
|||
|
|
width: 30%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: absolute;
|
|||
|
|
overflow: hidden;
|
|||
|
|
right: -2%;
|
|||
|
|
bottom: 12%;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_eight_progress div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_four_eight_progress div:nth-child(2){
|
|||
|
|
width: 70%;
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_four_btns{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
margin-top: 4%;
|
|||
|
|
}
|
|||
|
|
.content_four_btns div{
|
|||
|
|
width: 40%;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_four_eight_tips{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 25%;
|
|||
|
|
bottom: 9%;
|
|||
|
|
}
|
|||
|
|
.content_four_six_right_row{
|
|||
|
|
font-size: 25px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
position: absolute;
|
|||
|
|
right: 12%;
|
|||
|
|
bottom: 14%;
|
|||
|
|
}
|
|||
|
|
.content_four_eight_right_row{
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -7%;
|
|||
|
|
bottom: 11%;
|
|||
|
|
}
|
|||
|
|
.content_five{
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
margin-left: 1%;
|
|||
|
|
}
|
|||
|
|
.content_five_one_top{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 85%;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
margin: 20px 0 0 20px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_five_one_top div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flow 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_five_one_top div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
.content_five_one_right_row{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 4%;
|
|||
|
|
left: -20%;
|
|||
|
|
}
|
|||
|
|
.conteng_six{
|
|||
|
|
width: 27vw;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right{
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right_circle_tips{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
position: absolute;
|
|||
|
|
top: -130%;
|
|||
|
|
left: -140%;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right_progress{
|
|||
|
|
width: 20%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-top: -260px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right_progress{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 30vh;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right_progress div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flow 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_right_progress div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
.content_six_one{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.content_six_one_left{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_six_one_left div{
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_left{
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_left div{
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_left div:nth-child(2){
|
|||
|
|
height: 100px;
|
|||
|
|
line-height: 100px;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_right{
|
|||
|
|
margin-left: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_right div{
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_right div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.content_six_one_right_right div:nth-child(3){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
}
|
|||
|
|
.content_six_two{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_six_two_left{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left div:nth-child(1){
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left div:nth-child(3){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left div:nth-child(4){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_left div:nth-child(5){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_right{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 50px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_right div:nth-child(1){
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_right div:nth-child(2){
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_right div:nth-child(3){
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_one_right div:nth-child(4){
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_two{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20px 0 0 20px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_two div{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_two div:nth-child(1){
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_two div:nth-child(2){
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_three{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20px 0 0 10px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_three div{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_three div:nth-child(1){
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_three div:nth-child(2){
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_three div:nth-child(3){
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_left{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_left div:nth-child(1){
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_left div:nth-child(2){
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_left div:nth-child(3){
|
|||
|
|
font-size: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right{
|
|||
|
|
margin-left: 40px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_top{
|
|||
|
|
font-size: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px;
|
|||
|
|
width: 160px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_top div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_progress{
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
margin: -10px 100px 10px 0;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_bottom{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: -15px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_bottom div:nth-child(1){
|
|||
|
|
display: inline-block;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 0 0 0 75px;
|
|||
|
|
width: 160px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_bottom div:nth-child(2){
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_four_right_bottom2{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-left: 75px;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_five_btn{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.conteng_six_two_left_five_btn div{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin: 25px 10px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_six_two_right{
|
|||
|
|
width: 20%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
.content_six_two_right_progress{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 50vh;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_six_two_right_progress div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flow 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_six_two_right_progress div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
.content_six_two_right_flow{
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_six_two_right_two{
|
|||
|
|
width: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_seven{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
width: 25vw;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.content_seven_error{
|
|||
|
|
width: 80%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #f0cd0a;
|
|||
|
|
font-size: 16px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
.content_seven_one{
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_top{
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
margin-left: 80px;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_bottom{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_bottom_left{
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-left: -20px;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_bottom_right{
|
|||
|
|
width: 94%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_bottom_right div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_seven_one_bottom_right div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_seven_two_flow{
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
margin-left: 50%;
|
|||
|
|
margin-top: -4%;
|
|||
|
|
}
|
|||
|
|
.content_seven_three{
|
|||
|
|
width: 94%;
|
|||
|
|
margin-left: 5%;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: #28466d;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.content_seven_three div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: flowThree 1s linear infinite;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_seven_three div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #f80606;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.content_seven_four{
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0 5px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(1){
|
|||
|
|
font-size: 16px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 5vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(3){
|
|||
|
|
width: 50px;
|
|||
|
|
height: 33vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(3) div:nth-child(1){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #ff0000;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(3) div:nth-child(2){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #3ef510;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(4){
|
|||
|
|
width: 25px;
|
|||
|
|
height: 5vh;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
}
|
|||
|
|
.content_seven_four_item div:nth-child(5){
|
|||
|
|
font-size: 16px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
.content_seven_five_btns{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.content_seven_five_btns div{
|
|||
|
|
width: 40%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #3657ff;
|
|||
|
|
margin: 20px 20px 0;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="index_wrap">
|
|||
|
|
<div class="index_header">
|
|||
|
|
<div class="header_left">犇牛饲料厂压片玉米车间</div>
|
|||
|
|
<div class="header_right">
|
|||
|
|
<div>2024年1月19日</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>退 出</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="index_content">
|
|||
|
|
<div class="content_one">
|
|||
|
|
<div class="content_one_top">
|
|||
|
|
<div>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div>
|
|||
|
|
<div>1号提升机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_one_bottom">手电动插板</div>
|
|||
|
|
<div class="content_one_right_row">></div>
|
|||
|
|
<div class="content_one_tips_circle"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_two">
|
|||
|
|
<div class="content_two_list">
|
|||
|
|
<div class="content_two_item">初清筛</div>
|
|||
|
|
<div class="content_two_item">风选器1</div>
|
|||
|
|
<div class="content_two_item">风选器2</div>
|
|||
|
|
<div class="content_two_item">风选放料</div>
|
|||
|
|
<div class="content_two_item">去石机</div>
|
|||
|
|
<div class="content_two_item">风机</div>
|
|||
|
|
<div class="content_two_item">排杂1</div>
|
|||
|
|
<div class="content_two_item">排杂2</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_two_right_row">></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_three">
|
|||
|
|
<div class="content_three_top">
|
|||
|
|
<div>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div>
|
|||
|
|
<div>2号提升机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_three_tips_circle"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four">
|
|||
|
|
<div class="content_four_item_one">
|
|||
|
|
<div class="item_one_left">1号加水</div>
|
|||
|
|
<div class="item_one_right">2号加水</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_item_two">
|
|||
|
|
<div class="content_four_item_two_top">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>浸润绞龙</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_item_two_bottom">电动插板</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_item_three">
|
|||
|
|
<div class="content_four_item_three_top">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>分配器1</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_item_three_bottom">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>分配器2</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_tips_one"></div>
|
|||
|
|
<div class="content_four_tips_two"></div>
|
|||
|
|
<div class="content_four_five">
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓1</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板1号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓2</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板2号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓3</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板3号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓4</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板4号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓5</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板5号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓6</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板6号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓7</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #3ef510;"></div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板7号</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_five_item">
|
|||
|
|
<div>浸润仓8</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
<div style="background-color: #ff0000;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>插板8号</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_six">
|
|||
|
|
<div class="content_four_six_progress">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>长出料刮板</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_six_right_row">^</div>
|
|||
|
|
<div class="content_four_six_tips"></div>
|
|||
|
|
<div class="content_four_seven">闸门手动</div>
|
|||
|
|
<div class="content_four_eight_progress">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>短出料刮板</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_four_eight_right_row">></div>
|
|||
|
|
<div class="content_four_eight_tips"></div>
|
|||
|
|
<div class="content_four_btns">
|
|||
|
|
<div>开始上料</div>
|
|||
|
|
<div>结束上料</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_five">
|
|||
|
|
<div class="content_five_one_top">
|
|||
|
|
<div>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div>
|
|||
|
|
<div>3号提升机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_five_one_right_row"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six">
|
|||
|
|
<div class="conteng_six_left">
|
|||
|
|
<div class="content_six_one">
|
|||
|
|
<div class="content_six_one_left">
|
|||
|
|
<div>3号加水</div>
|
|||
|
|
<div>纹龙</div>
|
|||
|
|
<div>喂料器</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_six_one_right">
|
|||
|
|
<div class="content_six_one_right_left">
|
|||
|
|
<div>进水</div>
|
|||
|
|
<div>温水箱</div>
|
|||
|
|
<div>出水泵</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_six_one_right_right">
|
|||
|
|
<div>上液位</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>下液位</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_six_two">
|
|||
|
|
<div class="content_six_two_left">
|
|||
|
|
<div class="conteng_six_two_left_one">
|
|||
|
|
<div class="conteng_six_two_left_one_left">
|
|||
|
|
<div>调质塔</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_one_right">
|
|||
|
|
<div>温度</div>
|
|||
|
|
<div>91.5℃</div>
|
|||
|
|
<div>60.4℃</div>
|
|||
|
|
<div>113.7℃</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_two">
|
|||
|
|
<div>压片机</div>
|
|||
|
|
<div>吸湿风机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_three">
|
|||
|
|
<div>热风风机</div>
|
|||
|
|
<div>布料器</div>
|
|||
|
|
<div>冷却风机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_four">
|
|||
|
|
<div class="conteng_six_two_left_four_left">
|
|||
|
|
<div>温度</div>
|
|||
|
|
<div>100.5℃</div>
|
|||
|
|
<div>103.6℃</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_four_right">
|
|||
|
|
<div class="conteng_six_two_left_four_right_top">
|
|||
|
|
<div>烘干箱</div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_four_right_progress">^</div>
|
|||
|
|
<div class="conteng_six_two_left_four_right_bottom">
|
|||
|
|
<div>出料板</div>
|
|||
|
|
<div>></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_four_right_bottom2"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_two_left_five_btn">
|
|||
|
|
<div>开始进调质塔</div>
|
|||
|
|
<div>停止进调质塔</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_six_two_right">
|
|||
|
|
<div class="content_six_two_right_progress">
|
|||
|
|
<div>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div>
|
|||
|
|
<div>4号提升机</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_six_two_right_flow">></div>
|
|||
|
|
<div class="content_six_two_right_two">圆筒筛</div>
|
|||
|
|
<div class="content_six_two_right_flow">></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conteng_six_right">
|
|||
|
|
<div class="conteng_six_right_circle_tips"></div>
|
|||
|
|
<div class="conteng_six_right_progress">
|
|||
|
|
<div>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</div>
|
|||
|
|
<div>5号提升机</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven">
|
|||
|
|
<div class="content_seven_error">
|
|||
|
|
1号提升机堵塞！2号提升机堵塞！3号提升机堵塞！4号提升机堵塞！
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_one">
|
|||
|
|
<div class="content_seven_one_top"></div>
|
|||
|
|
<div class="content_seven_one_bottom">
|
|||
|
|
<div class="content_seven_one_bottom_left">></div>
|
|||
|
|
<div class="content_seven_one_bottom_right">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>进仓刮板</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_two_flow">^</div>
|
|||
|
|
<div class="content_seven_three">
|
|||
|
|
<div>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
|
|||
|
|
<div>分配器3</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_four">
|
|||
|
|
<div class="content_seven_four_item">
|
|||
|
|
<div>成品1</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>放料1</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_four_item">
|
|||
|
|
<div>成品2</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>放料2</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_four_item">
|
|||
|
|
<div>成品3</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>放料3</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_four_item">
|
|||
|
|
<div>成品4</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div></div>
|
|||
|
|
<div>放料4</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content_seven_five_btns">
|
|||
|
|
<div>开始装料</div>
|
|||
|
|
<div>结束装料</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="index_footer"></div>
|
|||
|
|
</div>
|
|||
|
|
<script src="./jquery-3.1.1.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
//1号提升机状态变化
|
|||
|
|
let _is_one_timer = false;
|
|||
|
|
let _one_timer = setInterval(function(){
|
|||
|
|
_is_one_timer = !_is_one_timer;
|
|||
|
|
if(_is_one_timer){
|
|||
|
|
$('.content_one_tips_circle').css('background-color','#3ef510');
|
|||
|
|
$('.content_three_tips_circle').css('background-color','#ff0000');
|
|||
|
|
$('.content_four_tips_one').css('background-color','#3ef510');
|
|||
|
|
$('.content_four_tips_two').css('background-color','#ff0000');
|
|||
|
|
}else{
|
|||
|
|
$('.content_one_tips_circle').css('background-color','#ff0000');
|
|||
|
|
$('.content_three_tips_circle').css('background-color','#3ef510');
|
|||
|
|
$('.content_four_tips_one').css('background-color','#ff0000');
|
|||
|
|
$('.content_four_tips_two').css('background-color','#3ef510');
|
|||
|
|
}
|
|||
|
|
},2000)
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
</script>
|
|||
|
|
</html>
|