xjnmt/html/index.html

1577 lines
52 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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: 30px;
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: 30px;
height: 30px;
border-radius: 50%;
background-color: #f80606;
}
.index_wrap .index_header .header_right div:nth-child(3){
box-sizing: border-box;
padding: 10px 20px;
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;
font-size: 30px;
}
.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: 20px;
position: absolute;
top: 27%;
left: 75px;
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: 25%;
left: 20px;
}
.content_two{
height: 65vh;
display: flex;
align-items: center;
position: relative;
margin-left: 20px;
}
.content_two_list{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content_two_item{
width: 100px;
text-align: center;
box-sizing: border-box;
padding: 10px;
margin: 10px 0;
background-color: #3657ff;
color: #ffffff;
font-size: 16px;
}
.content_two_right_row{
font-size: 20px;
position: absolute;
top: 62%;
left:105%;
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: 55%;
background-color: #28466d;
overflow: hidden;
position: relative;
margin: 20px 0 0 10px;
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;
font-size: 30px;
}
.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: 18%;
left: 15%;
}
.content_four{
width: 25vw;
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: 5px 10px;
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: 5px 10px;
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;
font-size: 25px;
}
.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;
font-size: 25px;
}
.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%);
font-size: 12px;
}
.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;
font-size: 25px;
}
.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%);
font-size: 12px;
}
.content_four_tips_one{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 14%;
left: 40%;
}
.content_four_tips_two{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 14%;
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{
width:9%;
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: 12px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
color: #ffffff;
}
.content_four_five_item div:nth-child(2){
width: 10px;
height: 5vh;
background-color: #3657ff;
}
.content_four_five_item div:nth-child(3){
width: 30px;
height: 25vh;
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: 15px;
height: 15px;
border-radius: 50%;
background-color: #000000;
}
.content_four_five_item div:nth-child(3) div:nth-child(2){
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000000;
}
.content_four_five_item div:nth-child(4){
width: 15px;
height: 5vh;
background-color: #3657ff;
}
.content_four_five_item div:nth-child(5){
font-size: 12px;
word-break: break-all;
background-color: #3657ff;
text-align: center;
color: #ffffff;
}
.content_four_six{
width: 100%;
}
.content_four_six_progress{
width: 90%;
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;
font-size: 25px;
}
.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%);
font-size: 12px;
}
.content_four_six_tips{
width: 25px;
height: 25px;
background-color: #3ef510;
border-radius: 50%;
position: absolute;
bottom: 13%;
left: 4%;
}
.content_four_seven{
display: inline-block;
text-align: center;
box-sizing: border-box;
padding: 5px 10px;
font-size: 14px;
background-color: #3657ff;
color: #ffffff;
border-radius: 10px;
margin: 10px 0 0 30%;
}
.content_four_eight_progress{
width: 40%;
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;
font-size: 25px;
}
.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%);
font-size: 12px;
}
.content_four_btns{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-top: 8%;
}
.content_four_btns div{
width: 40%;
text-align: center;
font-size: 14px;
box-sizing: border-box;
padding: 5px 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: 8%;
}
.content_four_six_right_row{
font-size: 25px;
color: #ffffff;
transform: rotate(180deg);
position: absolute;
right: 12%;
bottom: 15%;
}
.content_four_eight_right_row{
font-size: 25px;
color: #ffffff;
position: absolute;
right: -8%;
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;
font-size: 30px;
}
.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: 25vw;
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;
left: 0;
bottom: 100%;
}
.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;
font-size: 30px;
}
.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: 14px;
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: 14px;
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: 14px;
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;
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: 14px;
margin: 5px 0;
color: #ffffff;
}
.conteng_six_two_left_one_left div:nth-child(2){
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(3){
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #3ef510;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(4){
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin: 5px 0;
}
.conteng_six_two_left_one_left div:nth-child(5){
width: 20px;
height: 20px;
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: 20px;
}
.conteng_six_two_left_one_right div:nth-child(1){
font-size: 14px;
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: 14px;
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: 14px;
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: 14px;
background-color: #3657ff;
margin-top: 10px;
color: #ffffff;
}
.conteng_six_two_left_two{
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 0 0 5px;
}
.conteng_six_two_left_two div{
box-sizing: border-box;
padding: 10px 20px;
margin: 0 5px;
}
.conteng_six_two_left_two div:nth-child(1){
background-color: #3657ff;
font-size: 14px;
color: #ffffff;
}
.conteng_six_two_left_two div:nth-child(2){
background-color: #3657ff;
font-size: 14px;
color: #ffffff;
}
.conteng_six_two_left_three{
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 0 0 5px;
}
.conteng_six_two_left_three div{
box-sizing: border-box;
padding: 10px;
margin: 0 5px;
color: #ffffff;
}
.conteng_six_two_left_three div:nth-child(1){
background-color: #3657ff;
font-size: 12px;
}
.conteng_six_two_left_three div:nth-child(2){
background-color: #3657ff;
font-size: 12px;
}
.conteng_six_two_left_three div:nth-child(3){
background-color: #3657ff;
font-size: 12px;
}
.conteng_six_two_left_four{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
}
.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: 14px;
margin-bottom: 10px;
color: #ffffff;
}
.conteng_six_two_left_four_left div:nth-child(2){
font-size: 14px;
margin-bottom: 5px;
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: 14px;
box-sizing: border-box;
padding: 10px;
width: 80px;
text-align: center;
background-color: #3657ff;
color: #ffffff;
}
.conteng_six_two_left_four_right{
margin-left: 20px;
}
.conteng_six_two_left_four_right_top{
font-size: 12px;
box-sizing: border-box;
padding: 10px;
width: 100px;
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: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff0000;
margin-left: 10px;
}
.conteng_six_two_left_four_right_progress{
font-size: 25px;
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: -13px;
}
.conteng_six_two_left_four_right_bottom div:nth-child(1){
display: inline-block;
box-sizing: border-box;
padding: 10px;
font-size: 14px;
background-color: #3657ff;
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: 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: 25px;
}
.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: 5px;
background-color: #3657ff;
font-size: 14px;
margin: 5px 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: 40vh;
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;
font-size: 30px;
}
.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: 20px;
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: 260px;
}
.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;
font-size: 25px;
}
.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;
font-size: 25px;
}
.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: 14px;
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: 25vh;
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: 14px;
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: 10px 10px 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>退&nbsp;&nbsp;</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>