xjnmt/html/index.html

1577 lines
52 KiB
HTML
Raw Normal View History

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