工业互联网展厅北斗展会牛酒区块链项目交接代码第一次提交

2 years ago · ecf4e5db35
38 changed files with 1127 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/consumer.html
+++ b/consumer.html
@ -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>
--- a/favicon.ico
+++ b/favicon.ico
--- a/franchiser.html
+++ b/franchiser.html
@ -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">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号： NLSJXSSY202201120127-001</p>
                <p class="content-text">是否破损：
                    <input type="radio" name="isWorn" value="male">&nbsp;是
                    &nbsp;
                    <input type="radio" name="isWorn" value="female" checked>&nbsp;否
                </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>
--- a/fwm/img/alcohol2.png
+++ b/fwm/img/alcohol2.png
--- a/fwm/img/car_icon.png
+++ b/fwm/img/car_icon.png
--- a/fwm/img/car_icon2.png
+++ b/fwm/img/car_icon2.png
--- a/fwm/img/close.png
+++ b/fwm/img/close.png
--- a/fwm/img/end.png
+++ b/fwm/img/end.png
--- a/fwm/img/nls.jpg
+++ b/fwm/img/nls.jpg
--- a/fwm/img/old-img/原材料.png
+++ b/fwm/img/old-img/原材料.png
--- a/fwm/img/old-img/物流.png
+++ b/fwm/img/old-img/物流.png
--- a/fwm/img/old-img/生产.png
+++ b/fwm/img/old-img/生产.png
--- a/fwm/img/old-img/终端消费.png
+++ b/fwm/img/old-img/终端消费.png
--- a/fwm/img/old-img/经销商.png
+++ b/fwm/img/old-img/经销商.png
--- a/fwm/img/play.png
+++ b/fwm/img/play.png
--- a/fwm/img/search-bg.png
+++ b/fwm/img/search-bg.png
--- a/fwm/img/sound.png
+++ b/fwm/img/sound.png
--- a/fwm/img/start.png
+++ b/fwm/img/start.png
--- a/fwm/img/stop.png
+++ b/fwm/img/stop.png
--- a/fwm/img/原材料.png
+++ b/fwm/img/原材料.png
--- a/fwm/img/物流.png
+++ b/fwm/img/物流.png
--- a/fwm/img/生产.png
+++ b/fwm/img/生产.png
--- a/fwm/img/终端消费.png
+++ b/fwm/img/终端消费.png
--- a/fwm/img/经销商.png
+++ b/fwm/img/经销商.png
--- a/fwm/img/防伪码.png
+++ b/fwm/img/防伪码.png
--- a/fwm/img/防伪码2.png
+++ b/fwm/img/防伪码2.png
--- a/fwm/jquery.min.js
+++ b/fwm/jquery.min.js
--- a/logistics.html
+++ b/logistics.html
@ -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>
--- a/material.html
+++ b/material.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>
--- a/production.html
+++ b/production.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>
--- a/二维码/二维码.rar
+++ b/二维码/二维码.rar
--- a/二维码/原材料.png
+++ b/二维码/原材料.png
--- a/二维码/消费者.png
+++ b/二维码/消费者.png
--- a/二维码/物流.png
+++ b/二维码/物流.png
--- a/二维码/生产环节.png
+++ b/二维码/生产环节.png
--- a/二维码/经销商.png
+++ b/二维码/经销商.png
--- a/演示文稿2.pptx
+++ b/演示文稿2.pptx