Daci
2 years ago
commit
ecf4e5db35
38 changed files with 1127 additions and 0 deletions
@ -0,0 +1,24 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
/tests/e2e/videos/ |
|||
/tests/e2e/screenshots/ |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,179 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">牛栏山陈酿52度白酒消费者</title> |
|||
<!-- <script src="./fwm/jquery.min.js"></script> --> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
margin-right: 5px; |
|||
width: 300px; |
|||
color: #fff; |
|||
} |
|||
.img-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
/* padding: 5px; */ |
|||
width: calc(100vw - 315px); |
|||
max-width: 84px; |
|||
} |
|||
.img-block img { |
|||
width:100%; |
|||
height: auto; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
.content-box { |
|||
position: relative; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
background: #fffc; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box-block { |
|||
position: relative; |
|||
} |
|||
.content-box .content-text { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em |
|||
} |
|||
.scan-text { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 50%; |
|||
color: #ff2b38; |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
font-weight: 600; |
|||
} |
|||
.flicker-text { |
|||
font-size: 22px; |
|||
animation: fade 800ms infinite; |
|||
-webkit-animation: fade 800ms infinite; |
|||
} |
|||
@keyframes fade { |
|||
from { |
|||
opacity: 0.5; |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
} |
|||
to { |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box"> |
|||
<div class="content-block"> |
|||
<p class="title text-indent-1">消费者信息</p> |
|||
<div class="content-box"> |
|||
<p class="content-text">产品名称：牛栏山陈酿52度白酒</p> |
|||
<img src="./fwm/img/alcohol2.png" style="width: 80%;" alt="牛栏山陈酿52度白酒"> |
|||
<p class="content-text">生产商：顺鑫农业牛栏山酒厂</p> |
|||
<p class="content-text">地址：北京市顺义区牛栏山镇</p> |
|||
<p class="content-text">经销商：北京晨阳霞光商贸有限公司</p> |
|||
<p class="content-text">地址：北京市朝阳区黄康路康营小区-6区</p> |
|||
<p class="content-text">生产日期：2022年2月26日</p> |
|||
<p class="content-text">配料表：水、高粱、液态法白酒</p> |
|||
<p class="content-text">国家标准：GB/T GB/T10781.1</p> |
|||
<div class="flex-box"> |
|||
<img src="./fwm/img/防伪码2.png" style="width: 50%;" alt="牛栏山陈酿52度白酒"> |
|||
<div class="text-center scan-text"> |
|||
<p>牛栏山系列酒</p> |
|||
<p>识别图片二维码<br><span class="flicker-text">验真伪!</span></p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="img-block"> |
|||
<img src="./fwm/img/终端消费.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
<script> |
|||
window.onload=function(){ |
|||
|
|||
} |
|||
</script> |
|||
|
|||
</html> |
|||
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,186 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">牛栏山陈酿52度白酒经销商</title> |
|||
<!-- <script src="./fwm/jquery.min.js"></script> --> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
margin-right: 5px; |
|||
width: 300px; |
|||
color: #fff; |
|||
} |
|||
.img-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
/* padding: 5px; */ |
|||
width: calc(100vw - 315px); |
|||
max-width: 84px; |
|||
} |
|||
.img-block img { |
|||
width:100%; |
|||
height: auto; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
.content-box { |
|||
position: relative; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
background: #fffc; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box-block { |
|||
position: relative; |
|||
} |
|||
.content-box .content-text { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em |
|||
} |
|||
|
|||
.nla-public { |
|||
position: absolute; |
|||
right: 15px; |
|||
width: 40px; |
|||
height: 40px; |
|||
top: 10px; |
|||
|
|||
} |
|||
.myButton { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
border: 1px solid #dcdfe6; |
|||
color: #606266; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: none; |
|||
margin: 0; |
|||
transition: .1s; |
|||
font-weight: 500; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
padding: 10px 15px; |
|||
font-size: 15px; |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
border-color: #409eff; |
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box"> |
|||
<div class="content-block"> |
|||
<p class="title text-indent-1">经销商信息</p> |
|||
<div class="content-box"> |
|||
<p class="content-text">产品名称：牛栏山陈酿52度白酒</p> |
|||
<p class="content-text">物流公司：北京顺鑫物流有限公司</p> |
|||
<p class="content-text">订单信息：NLSJXSSY202201120127</p> |
|||
<p class="content-text">订单详细：200（箱）X 12</p> |
|||
<p class="content-text">编 号： NLSJXSSY202201120127-001</p> |
|||
<p class="content-text">是否破损： |
|||
<input type="radio" name="isWorn" value="male"> 是 |
|||
|
|||
<input type="radio" name="isWorn" value="female" checked> 否 |
|||
</p> |
|||
<p class="content-text" style="width:100%;">备注信息： |
|||
<br> |
|||
<textarea rows="8" cols="37" style="width:100%;"></textarea> |
|||
</p> |
|||
<div class="flex-box"> |
|||
<input type="button" value="确认入库" class="myButton" onclick="alert('提交成功')"> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="img-block"> |
|||
<img src="./fwm/img/经销商.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
<script> |
|||
window.onload=function(){ |
|||
|
|||
} |
|||
</script> |
|||
|
|||
</html> |
|||
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 509 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 386 B |
|
After Width: | Height: | Size: 738 KiB |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 394 B |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 698 B |
|
After Width: | Height: | Size: 5.7 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,226 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">牛栏山陈酿52度白酒物流</title> |
|||
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Di3uzrPoRAPKso8IAbBG138RUwBTIWbR"></script> |
|||
<!-- <script src="./fwm/jquery.min.js"></script> --> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
margin-right: 5px; |
|||
width: 300px; |
|||
color: #fff; |
|||
} |
|||
.img-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
/* padding: 5px; */ |
|||
width: calc(100vw - 315px); |
|||
max-width: 84px; |
|||
} |
|||
.img-block img { |
|||
width:100%; |
|||
height: auto; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
.content-box { |
|||
position: relative; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
background: #fffc; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box-block { |
|||
position: relative; |
|||
} |
|||
.content-box .content-text { |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em |
|||
} |
|||
|
|||
.nla-public { |
|||
position: absolute; |
|||
right: 15px; |
|||
width: 40px; |
|||
height: 40px; |
|||
top: 10px; |
|||
|
|||
} |
|||
#allmap { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 250px; |
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box"> |
|||
<div class="content-block"> |
|||
|
|||
<p class="title text-indent-1">物流信息</p> |
|||
<div class="content-box"> |
|||
<p class="content-text">产品名称：牛栏山陈酿52度白酒</p> |
|||
<p class="content-text">物流公司：北京顺鑫物流有限公司</p> |
|||
<p class="content-text">订单信息：NLSJXSSY202201120127</p> |
|||
<p class="content-text">订单详细：200（箱）X 12</p> |
|||
<p class="content-text">运输车牌：京ARX698</p> |
|||
<p class="content-text">司机姓名：王大力</p> |
|||
<p class="content-text">司机电话：18622428799</p> |
|||
<p class="content-text">配送日期：2022年2月23日</p> |
|||
<br> |
|||
<p class="content-text">车辆实时位置</p> |
|||
<div id="allmap"></div> |
|||
</div> |
|||
</div> |
|||
<div class="img-block"> |
|||
<img src="./fwm/img/物流.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
<script> |
|||
window.onload=function(){ |
|||
var map = new BMap.Map("allmap"); |
|||
map.centerAndZoom(new BMap.Point(116.386446,39.939281), 13); |
|||
map.enableScrollWheelZoom(true) |
|||
// map.enableContinuousZoom() |
|||
// map.enableInertialDragging() |
|||
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { |
|||
scale: 0.5,//图标缩放大小 |
|||
strokeColor:'#fff',//设置矢量图标的线填充颜色 |
|||
strokeWeight: 2,//设置线宽 |
|||
}); |
|||
|
|||
var icons = new BMap.IconSequence(sy, '10', '30');//设置为true，可以对轨迹进行编辑 |
|||
var pois = [ |
|||
new BMap.Point(116.350658,39.938285), |
|||
new BMap.Point(116.386446,39.939281), |
|||
new BMap.Point(116.389034,39.913828), |
|||
new BMap.Point(116.442501,39.914603) |
|||
] |
|||
var polyLine = new BMap.Polyline(pois,{ |
|||
enableEditing:false, |
|||
enableClicking:true, |
|||
icons:[icons], |
|||
strokeWeight:"8", |
|||
strokeOpacity:0.8, |
|||
strokeColor:"#18a45b" |
|||
}) |
|||
map.addOverlay(polyLine) |
|||
//创建汽车标注 |
|||
var point = new BMap.Point(116.386446,39.939281); |
|||
var carIcon = new BMap.Icon('./fwm/img/car_icon.png',new BMap.Size(35,25)) |
|||
var markerCar = new BMap.Marker(point,{ |
|||
icon:carIcon |
|||
}); |
|||
map.addOverlay(markerCar); |
|||
//创建起点标注 |
|||
var startPoint = new BMap.Point(116.350658,39.938285); |
|||
var startIcon = new BMap.Icon('./fwm/img/start.png',new BMap.Size(21,28),{ |
|||
anchor:new BMap.Size(10,28) |
|||
}) |
|||
var markerStart = new BMap.Marker(startPoint,{ |
|||
icon:startIcon, |
|||
top:-5 |
|||
}); |
|||
map.addOverlay(markerStart); |
|||
//创建终点标注 |
|||
var endPoint = new BMap.Point(116.442501,39.914603); |
|||
var endIcon = new BMap.Icon('./fwm/img/end.png',new BMap.Size(21,28),{ |
|||
anchor:new BMap.Size(10,28) |
|||
}) |
|||
var markerEnd = new BMap.Marker(endPoint,{ |
|||
icon:endIcon |
|||
}); |
|||
map.addOverlay(markerEnd); |
|||
var opts = { |
|||
width : 150, // 信息窗口宽度 |
|||
height: 80, // 信息窗口高度 |
|||
title : "运输车牌：京ARX698" , // 信息窗口标题 |
|||
enableMessage:false,//设置允许信息窗发送短息 |
|||
message:"" |
|||
} |
|||
var infoWindow = new BMap.InfoWindow(`司机姓名：王大力<br>司机电话：18622428799`, opts); // 创建信息窗口对象 |
|||
markerCar.addEventListener("click", function(){ |
|||
map.openInfoWindow(infoWindow,point); //开启信息窗口 |
|||
}); |
|||
map.addEventListener('click',function(e){ |
|||
var newOne=new BMap.Point(e.point.lng+","+e.point.lat) |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
</html> |
|||
@ -0,0 +1,185 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">牛栏山陈酿52度白酒原材料</title> |
|||
<!-- <script src="./fwm/jquery.min.js"></script> --> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
margin-right: 5px; |
|||
width: 300px; |
|||
color: #fff; |
|||
} |
|||
.img-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
/* padding: 5px; */ |
|||
width: calc(100vw - 315px); |
|||
max-width: 84px; |
|||
} |
|||
.img-block img { |
|||
width:100%; |
|||
height: auto; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.content-box { |
|||
position: relative; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
background: #fffc; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box-block { |
|||
position: relative; |
|||
} |
|||
.content-box .content-text { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em |
|||
} |
|||
|
|||
.nla-public { |
|||
position: absolute; |
|||
right: 15px; |
|||
width: 40px; |
|||
height: 40px; |
|||
bottom: 15px; |
|||
|
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box"> |
|||
<div class="content-block"> |
|||
|
|||
<p class="title text-indent-1">原材料信息</p> |
|||
<div class="content-box"> |
|||
<p class="content-text">产品名称：牛栏山陈酿52度白酒</p> |
|||
<p class="content-text">原材料供应商信息：</p> |
|||
<br> |
|||
<div class="content-box-block"> |
|||
<img src="./fwm/img/nls.jpg" class="nla-public"> |
|||
<p class="content-text">瓶身：北京东方龙泰包装制品有限公司</p> |
|||
<p class="content-text">批次号：20220201689990</p> |
|||
<p class="content-text">标识号：86.234.12/NLS/ 20220201689990</p> |
|||
<p class="content-text">生产时间：2022年1月31日</p> |
|||
<p class="content-text">入厂时间：2022年2月3日</p> |
|||
</div> |
|||
<br> |
|||
<div class="content-box-block"> |
|||
<img src="./fwm/img/nls.jpg" class="nla-public"> |
|||
<p class="content-text">瓶盖：北京东方龙泰包装制品有限公司</p> |
|||
<p class="content-text">批次号：20220101488000</p> |
|||
<p class="content-text">标识号：86.234.25/NLS/ 20220101488000</p> |
|||
<p class="content-text">生产时间：2022年1月14日</p> |
|||
<p class="content-text">入厂时间：2022年2月3日</p> |
|||
</div> |
|||
<br> |
|||
<div class="content-box-block"> |
|||
<img src="./fwm/img/nls.jpg" class="nla-public"> |
|||
<p class="content-text">外包装箱：雄县龙达包装材料有限公司</p> |
|||
<p class="content-text">批次号：20220101085631</p> |
|||
<p class="content-text">标识号：86.234.45/NLS/ 20220101085631</p> |
|||
<p class="content-text">生产时间：2022年1月8日</p> |
|||
<p class="content-text">入厂时间：2022年2月3日</p> |
|||
</div> |
|||
<br> |
|||
<div class="content-box-block"> |
|||
<img src="./fwm/img/nls.jpg" class="nla-public"> |
|||
<p class="content-text">酒体信息：牛栏山酒厂香河分厂</p> |
|||
<p class="content-text">批次号：2022010636511</p> |
|||
<p class="content-text">标识号：86.234.65/NLS/ 2022010636511</p> |
|||
<p class="content-text">生产时间：2022年1月6日</p> |
|||
<p class="content-text">入厂时间：2022年2月3日</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="img-block"> |
|||
<img src="./fwm/img/原材料.png" alt=""> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
<script> |
|||
window.onload=function(){ |
|||
|
|||
} |
|||
</script> |
|||
|
|||
</html> |
|||
@ -0,0 +1,325 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">牛栏山陈酿52度白酒生产环节</title> |
|||
<!-- <script src="./fwm/jquery.min.js"></script> --> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
.float-right { |
|||
float: right; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
} |
|||
.flex-box-center { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-wrap { |
|||
flex-wrap: wrap; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
margin-right: 5px; |
|||
width: 300px; |
|||
color: #fff; |
|||
} |
|||
.img-block { |
|||
position: relative; |
|||
margin-top: 12vh; |
|||
margin-bottom: 10px; |
|||
/* padding: 5px; */ |
|||
width: calc(100vw - 315px); |
|||
max-width: 84px; |
|||
} |
|||
.img-block img { |
|||
width:100%; |
|||
height: auto; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
.content-box { |
|||
position: relative; |
|||
width: 100%; |
|||
min-height: 400px; |
|||
background: #fffc; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box .content-text { |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
|
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em; |
|||
|
|||
} |
|||
|
|||
.progress-item { |
|||
width: 49%; |
|||
/* min-width: 130px; */ |
|||
min-height: 130px; |
|||
height: auto; |
|||
padding: 5px; |
|||
} |
|||
.detail-box { |
|||
position: relative; |
|||
width:100%; |
|||
height: 100%; |
|||
background: #2d77df; |
|||
border-radius: 4px; |
|||
padding: 10px 3px 10px 10px; |
|||
text-align: left; |
|||
} |
|||
.detail-box.warn { |
|||
/* animation: warn 1000ms infinite; */ |
|||
} |
|||
.detail-box .step { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
margin-left: 6px; |
|||
} |
|||
.detail-box .status { |
|||
position: relative; |
|||
width: 46px; |
|||
height: 18px; |
|||
border-radius: 4px; |
|||
color: #fff; |
|||
font-size: 10px; |
|||
text-align: center; |
|||
} |
|||
.detail-box .status-green { |
|||
background: #15CE31; |
|||
} |
|||
.detail-box .status-blue { |
|||
background: #00A0E9; |
|||
animation: fade 800ms infinite; |
|||
-webkit-animation: fade 800ms infinite; |
|||
} |
|||
.detail-box .status-orange { |
|||
background: #F44A4A; |
|||
} |
|||
.detail-box .status-yellow { |
|||
background: #F19149; |
|||
} |
|||
.detail-box .title { |
|||
font-size: 12px; |
|||
color: #59D4FC; |
|||
font-size: 14px; |
|||
} |
|||
.line { |
|||
position: relative; |
|||
margin: 22px 0; |
|||
width: 100%; |
|||
height: 4px; |
|||
background: #2D77DF; |
|||
border-radius: 2px; |
|||
} |
|||
.line .dot { |
|||
position: relative; |
|||
width: 10px; |
|||
height: 10px; |
|||
|
|||
border-radius: 50%; |
|||
top: -3px; |
|||
} |
|||
.line .left { |
|||
} |
|||
.line .right { |
|||
margin-left:calc(100% - 10px); |
|||
} |
|||
.line .center { |
|||
margin: 0 58px; |
|||
} |
|||
.line .dot-green { |
|||
background: #15CE31; |
|||
box-shadow: 0px 0px 0px 5px #15ce3171; |
|||
} |
|||
.line .dot-blue { |
|||
background: #00A0E9; |
|||
box-shadow: 0px 0px 0px 5px #00A0E971; |
|||
animation: fade 800ms infinite; |
|||
-webkit-animation: fade 800ms infinite; |
|||
} |
|||
.line .dot-orange { |
|||
background: #F44A4A; |
|||
box-shadow: 0px 0px 0px 5px #F44A4A71; |
|||
} |
|||
.line .dot-yellow { |
|||
background: #F19149; |
|||
box-shadow: 0px 0px 0px 5px #F1914971; |
|||
} |
|||
@keyframes fade { |
|||
from { |
|||
opacity: 0.5; |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
} |
|||
to { |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
@keyframes warn { |
|||
0% { |
|||
transform: scale(1); |
|||
/* opacity: 1; */ |
|||
} |
|||
|
|||
50% { |
|||
transform: scale(1.05); |
|||
/* opacity: 0.9; */ |
|||
} |
|||
|
|||
100% { |
|||
transform: scale(1); |
|||
/* opacity: 0.8; */ |
|||
} |
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box-center"> |
|||
<div class="content-block"> |
|||
<p class="title text-indent-1">生产加工端</p> |
|||
<div class="content-box"> |
|||
<p class="content-text">产品名称：牛栏山陈酿52度白酒</p> |
|||
<p class="content-text">订单信息：NLSJXSSY202201120127</p> |
|||
<p class="content-text">订单数量：200（箱）X 12</p> |
|||
<p class="content-text">客户信息：北京晨阳霞光商贸有限公司</p> |
|||
<p class="content-text">交货日期：2022年2月23日</p> |
|||
<p class="content-text">排产时间：2022年2月22日</p> |
|||
<p class="content-text">产线信息：一车间2产线（24小时）</p> |
|||
<p class="content-text text-center">当前订单进度</p> |
|||
<div class="flex-box-center flex-wrap"> |
|||
<div class="progress-item"> |
|||
<div class="detail-box"> |
|||
<span class="step">勾调</span> |
|||
<span class="status status-green float-right">已完成</span> |
|||
<br> |
|||
<br> |
|||
<p class="title">数量<span class="step">20吨</span></p> |
|||
<p class="title">完成<span class="step">2022-4-28</span></p> |
|||
</div> |
|||
<div class="line flex-box"> |
|||
<div class="dot right dot-green"></div> |
|||
</div> |
|||
</div> |
|||
<div class="progress-item"> |
|||
<div class="detail-box warn"> |
|||
<span class="step">灌装</span> |
|||
<span class="status status-blue float-right">进行中</span> |
|||
<br> |
|||
<br> |
|||
<p class="title">数量<span class="step">2000瓶</span></p> |
|||
<p class="title">进行中<span class="step"></span></p> |
|||
</div> |
|||
<div class="line flex-box"> |
|||
<div class="dot center dot-blue"></div> |
|||
</div> |
|||
</div> |
|||
<div class="progress-item"> |
|||
<div class="detail-box"> |
|||
<span class="step">包装</span> |
|||
<span class="status status-yellow float-right">待完成</span> |
|||
<br> |
|||
<br> |
|||
<p class="title">数量<span class="step">2000瓶</span></p> |
|||
<p class="title">未开始<span class="step"></span></p> |
|||
</div> |
|||
<div class="line flex-box"> |
|||
<div class="dot left dot-yellow"></div> |
|||
</div> |
|||
</div> |
|||
<div class="progress-item"> |
|||
<div class="detail-box"> |
|||
<span class="step">质检</span> |
|||
<span class="status status-yellow float-right">待完成</span> |
|||
<br> |
|||
<br> |
|||
<p class="title">数量<span class="step">2000瓶</span></p> |
|||
<p class="title">未开始<span class="step"></span></p> |
|||
</div> |
|||
<div class="line flex-box"> |
|||
<div class="dot left dot-yellow"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="img-block"> |
|||
<img src="./fwm/img/生产.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
Loading…
Reference in new issue