工业互联网农产品全程溯源项目交接代码

.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?

css/common.css

@@ -0,0 +1,400 @@
+* {
+  font-family: "微软雅黑", "Hiragino Sans GB", "Helvetica Neue", Helvetica, STHeiTi, "Microsoft Yahei", sans-serif;
+}
+
+a:active {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  -ms-tap-highlight-color: rgba(0, 0, 0, 0);
+  -o-tap-highlight-color: rgba(0, 0, 0, 0);
+  tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+ul, li {
+  text-decoration: none;
+  list-style: none;
+}
+
+.mtop {
+  /* margin-top: 0.2rem; */
+}
+
+.wd {
+  font-size: 0.26rem;
+  line-height: 1.8;
+  color: #474040;
+  word-break: break-all;
+  text-transform: uppercase;
+}
+
+.mark {
+  float: left;
+  width: 0.15rem;
+  height: 0.15rem;
+  display: inline-block;
+  border-radius: 50%;
+  background: #19b955;
+  margin-top: 0.5rem;
+  margin-left: 0.18rem;
+  vertical-align: middle;
+}
+
+.clear:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.wrap {
+  position: relative;
+  width: 7.5rem;
+  margin: 0 auto;
+}
+.logo {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: auto;
+  z-index: 10;
+  background-color: rgba(102, 102, 102, 0.7);
+  padding: 0 5px;
+}
+.logo img {
+  /* height: 100%; */
+  max-width: 100%;
+}
+.copyright {
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  height: 0.6rem;
+  z-index: 10;
+  background-color: rgba(102, 102, 102, 0.7);
+  padding: 0 5px;
+}
+.copyright p {
+  text-align: center;
+  font-size: 0.25rem;
+  line-height: 0.3rem;
+  color: #fff;
+}
+.img_info img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+.product {
+  position: relative;
+}
+
+.product_img img {
+  display: block;
+  width: 7.5rem;
+  height: 4.86rem;
+}
+
+.product_detail {
+  position: absolute;
+  width: 5.8rem;
+  background: white;
+  padding: 0.25rem;
+  line-height: 2;
+  border-radius: 5px;
+  box-shadow: 0px 0px 20px #cdd8dd;
+  z-index: 9999999;
+  top: 2.5rem;
+  left: 50%;
+  margin-left: -2.9rem;
+  box-sizing: border-box;
+}
+
+.code_label {
+  font-size: 0.28rem;
+  color: #666;
+}
+
+.code_num {
+  font-size: 0.3rem;
+  color: #000203;
+  font-weight: normal;
+  border-bottom: 1px solid #eee;
+  text-transform: uppercase;
+  word-wrap: break-word;
+  word-break: normal;
+}
+
+.code_num a{
+  /* font-size: 12px;
+  letter-spacing: -0.5px; */
+  text-decoration: underline;
+  color: #0066b3;
+}
+
+.product_detail_box {
+  margin-top: 0.2rem;
+  padding: 0 0.1rem;
+}
+
+.product_detail_box li {
+
+}
+
+.product_detail_box li label{
+  vertical-align: top;
+  /* font-weight: bold;
+  display: inline-block;
+  width: 112px;
+  text-align: right; */
+}
+
+.product_detail_box li label h3{
+  position: relative;
+  padding-left: 12px;
+  font-size: 0.28rem;
+  margin: 12px 0 6px;
+}
+
+.product_detail_box li label h3:before {
+  position: absolute;
+  left: 0;
+  top: 6px;
+  display: inline-block;
+  content: "";
+  width: 6px;
+  height: 15px;
+  background: #19b955;
+}
+
+.product_detail_box li span{
+  float: right;
+}
+
+.product_detail_box li span img{
+  width: 99%;
+}
+
+.product_detail_box li .code_num{
+  /* font-size: 0.24rem; */
+  font-size: 0.26rem;
+  line-height: 1.8;
+  color: #474040;
+  border: 0 none;
+  word-break: break-all;
+  /* letter-spacing: -0.5px; */
+}
+
+.inLine {
+  position: absolute;
+  top: 0.7rem;
+  bottom: -0.6rem;
+  width: 1px;
+  background: #0d93f0;
+  left: 1.07rem;
+  z-index: 1;
+}
+
+.outLine {
+  position: absolute;
+  top: 0;
+  bottom: 0.3rem;
+  width: 1px;
+  background: #19b955;
+  left: 1.25rem;
+  z-index: -1;
+}
+
+.origin_con {
+  position: relative;
+  margin-top: 3rem;
+  margin-bottom: 0.8rem;
+}
+
+.date_box {
+  float: left;
+  width: 0.8rem;
+  font-size: 0.2rem;
+  line-height: 1.5;
+  text-align: right;
+  color: #515151;
+}
+
+.date2_box {
+  float: left;
+  font-size: 0.2rem;
+  text-align: right;
+  color: #515151;
+  width: 1rem;
+  padding: 0.2rem 0;
+}
+
+.date2_box p {
+  height: 0.4rem;
+  line-height: 0.4rem;
+}
+
+.date {
+  font-size: 0.26rem;
+}
+
+.date2 {
+  font-size: 0.2rem;
+}
+
+.origin_tit_box {
+  float: right;
+  width: 6.6rem;
+  height: 0.7rem;
+  background: #19b955;
+  color: white;
+  font-size: 0.34rem;
+  border-radius: 0.4rem 0 0 0.4rem;
+}
+
+.origin_tit_box span {
+  float: left;
+  line-height: 0.7rem;
+  font-size: 0.32rem;
+  letter-spacing: 1px;
+}
+
+.origin_tit_box .icon {
+  width: 0.6rem;
+  height: 0.6rem;
+  float: left;
+  border-radius: 50%;
+  margin: 0.05rem 0.1rem 0.05rem 0.05rem;
+  vertical-align: middle;
+  display: block;
+}
+
+.arrow {
+  float: right;
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.origin_tit_box .arrow img {
+  width: 0.5rem;
+  margin: 0 auto;
+  display: block;
+  margin-top: 0.1rem;
+}
+
+.origin_box {
+  position: relative;
+  overflow-y: auto;
+  margin-bottom: 0.3rem;
+}
+
+.origin_list_con {
+  width: 7.5rem;
+  margin-bottom: 0.3rem;
+  display: none;
+}
+
+.origin_list {
+  margin-top: 0.2rem;
+}
+
+.detail_box {
+  background: #f3f3f3;
+  padding: 0.2rem;
+  width: 6rem;
+  float: right;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.origin_bg {
+  width: 6rem;
+  height: 1.05rem;
+  background: url(../images/barbg.png);
+  background-size: 100%;
+  position: absolute;
+  top: 0.06rem;
+  right: 0;
+}
+
+.tit2 {
+  font-size: 0.28rem;
+  color: #333;
+  height: 0.8rem;
+  line-height: 0.8rem;
+}
+
+.tit2 .tit2_box {
+  float: left;
+}
+
+.table-layout: {
+  width: 100%;
+}
+
+.table {
+  overflow-x: auto;
+  /*border:1px solid #ddd;*/
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table td,
+table th {
+  /*border:1px solid #666;*/
+  white-space: nowrap;
+  padding: 3px 8px;
+}
+
+table tr td {
+  text-align: center;
+}
+
+table thead tr {
+  background: #dfe7eb;
+}
+
+table tbody tr:nth-child(even) {
+  background: #eee;
+  border-bottom: 1px solid #eaeaea;
+  border-top: 1px solid #eaeaea;
+}
+
+/*地图*/
+.BMap_cpyCtrl {
+  display: none;
+}
+
+.anchorBL {
+  display: none;
+}
+
+
+/* 扫码二级页面 */
+.product_detail_table{
+  
+}
+
+.product_detail_table thead td{
+  font-size: 0.28rem;
+  line-height: 1.8;
+}
+
+.product_detail_table tbody td{
+  font-size: 0.26rem;
+  line-height: 1.8;
+  vertical-align: top;
+  white-space: normal;
+  text-align: left;
+}
+
+.product_detail_table tbody .itemName{
+  width: 107px;
+}
+
+.product_detail_table tbody td img{
+  width: 100px;
+}

css/reset.css

@@ -0,0 +1,109 @@
+/*css reset for Mobile*/
+*{
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
+
+}
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+    font-style: inherit;
+}
+
+body {
+    line-height:1;
+}
+
+:focus {
+	outline: 1;
+}
+
+article,aside,canvas,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section,summary { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    border:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+    text-decoration:none;
+}
+
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted #000;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
+/*img{
+    display:block;
+    max-width:100%;
+}*/

index.html

@@ -0,0 +1,494 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size:50px;">
+<head>
+  <meta charset="UTF-8">
+  <title>鸭蛙稻香米</title>
+  <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico'/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/common.css">
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script src="js/rem.js"></script>
+  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jw76xsvI4iWWAMRfFGLlDmGZe42Ls99m"></script>
+  <script type="text/javascript" src="js/echarts.min.js"></script>
+  <script src="js/common.js"></script>
+</head>
+<body style="background:white;">
+<div class="wrap">
+  <div class="logo">
+      <img src="images/logo.png" alt="">
+  </div>
+  <div class="product">
+    <div class="product_img">
+      <img src="images/daomi.png" alt="">
+    </div>
+    <div class="product_detail">
+      <p class="code_label">工业互联网标识码:</p>
+      <h3 class="code_num" id="code_num">
+        <!-- 86.121.1005/166700787707295 -->
+      </h3>
+      <ul class="product_detail_box wd">
+        <li><label>产品名称： </label><span>鸭蛙稻香米</span></li>
+        <li><label>品牌名称： </label><span>鸭蛙稻</span></li>
+        <li><label>包装规格：</label><span>5kg</span></li>
+        <li><label>生产批次：</label><span>JG20211128</span></li>
+        <li><label>生产日期：</label><span>2022-10-13</span></li>
+        <li><label>保质期：&nbsp;&nbsp;&nbsp;&nbsp;</label><span>12个月</span></li>
+        <li><label>产&nbsp;&nbsp;&nbsp;&nbsp;地：&nbsp;&nbsp;&nbsp;&nbsp;</label><span>湖北</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="origin_con" style="margin-top:4rem;">
+    <!-- 终端销售 -->
+    <div class="origin_box">
+      <div class="tit1 clear">
+        <div class="date_box" id="sell_date" style="display: none;">
+          <p class="date">12-29</p>
+          <p class="year">2021</p>
+        </div>
+        <div class="origin_tit_box clear">
+          <p>
+            <img class="icon" src="images/icon01.jpg" alt="">
+            <span>终端销售</span>
+            <a class="arrow" href="javascript:void(0)" data-toggle="autoPlay1">
+              <img src="images/arrow.png" alt="">
+            </a>
+          </p>
+        </div>
+      </div>
+      <div class="origin_list_con" data-id="1" id="sell_button" style="display: none;">
+        <div class="origin_bg">
+          <a class="arrow active" href="javascript:void(0)" data-toggle="autoPlay1"></a>
+        </div>
+        <div class="origin_list" id="sell_content" style="display: none;">
+          <div class="origin_list_box clear">
+            <div class="detail_box">
+              <h3 class="tit2">经营者信息</h3>
+              <div class="wd mtop product_detail_box">
+                <ul>
+                  <li><label>经销商：</label><span>红英粮油</span></li>
+                  <li><label>经营地址：</label><span>武汉市武昌区和平大道幸福里小区</span></li>
+                  <li><label>负责人：</label><span>张丽</span></li>
+                  <li><label>柜台面积：</label><span>8平方米</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加工 -->
+    <div class="origin_box" >
+      <div class="origin_tit_con clear">
+        <div class="date_box" id="machining_date" style="display: none;">
+          <p class="date">12-23</p>
+          <p class="year">2021</p>
+        </div>
+        <div class="origin_tit_box clear">
+          <p>
+            <img class="icon" src="images/icon03.jpg" alt="">
+            <span>生产加工</span>
+            <a class="arrow" href="javascript:void(0)" data-toggle="autoPlay3">
+              <img src="images/arrow.png" alt="">
+            </a>
+          </p>
+        </div>
+      </div>
+      <div class="origin_list_con" data-id="3" id="machining_button" style="display: none;">
+        <div class="origin_bg">
+          <a class="arrow active" href="javascript:void(0)" data-toggle="autoPlay3"></a>
+        </div>
+        <div class="origin_list" id="machining_content" style="display: none;">
+          <div class="origin_list_box clear">
+
+            <div class="detail_box">
+
+              <h3 class="tit2">加工厂信息</h3>
+              <div class="wd mtop product_detail_box">
+                <ul>
+                  <li><label>企业名称：</label><span>湖北宝谷生态农业有限公司</span></li>
+                  <li><label>企业地址：</label><span>湖北省襄阳市谷城县湖北省谷城县茨河镇后庄</span></li>
+                </ul>
+              </div>
+              <div class="img_info mt3">
+                <img src="images/baogu.jpg" alt="">
+              </div>
+            </div>
+          </div>
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">10-16</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="mark"></div>
+            <div class="detail_box">
+              <h3 class="tit2">出库信息</h3>
+              <div class="wd mtop product_detail_box">
+                <ul>
+                  <li><label>出库时间：</label><span>2022-10-16</span></li>
+                  <li><label>出库单编号：</label><span>202210161128</span></li>
+                  <li><label>出库方式：</label><span>扫码出库</span></li>
+                  <li><label>产品名称：</label><span>一级大米</span></li>
+                  <li><label>所属加工批次：</label><span>JG20211128</span></li>
+                  <li><label>目的地：</label><span>武汉市武昌区</span></li>
+                </ul>
+              </div>
+            </div>
+            <div class="detail_box">
+              <h3 class="tit2">食品生产许可证</h3>
+              <div class="img_info mt3">
+                <img src="images/shipbaogu.jpg" alt="">
+              </div>
+            </div>
+          </div>
+          <!-- 入库 -->
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">10-13</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="mark"></div>
+            <div class="detail_box">
+              <h3 class="tit2">产品入库</h3>
+              <div class="table wd mtop">
+                <table>
+                  <thead>
+                  <tr>
+                    <th>生产批次</th>
+                    <th>重量</th>
+                    <th>库位</th>
+                    <th>入库时间</th>
+                    <th>接收人</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>JG20211128</td>
+                    <td>600.0kg</td>
+                    <td>58</td>
+                    <td>2022-10-13 16:00</td>
+                    <td>马云丹</td>
+                  </tr>
+                  <tr>
+                    <td>JG20211128</td>
+                    <td>400.0kg</td>
+                    <td>58</td>
+                    <td>2022-10-13 16:00</td>
+                    <td>马云丹</td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <!-- 抽检 -->
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">10-13</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="mark"></div>
+            <div class="detail_box">
+              <h3 class="tit2">产品抽检</h3>
+              <div class="wd product_detail_box">
+                <ul>
+                  <li><label>加工批次：</label><span>JG20211128</span></li>
+                  <li><label>产品名称：</label><span>鸭蛙稻香米</span></li>
+                  <li><label>抽检时间：</label><span>2022-10-13 15:30</span></li>
+                  <li><label>抽检负责人：</label><span>冯琦</span></li>
+                  <li><label>抽检数量：</label><span>10%</span></li>
+                  <li><label>检验依据：</label><span>GB2021-2165</span></li>
+                  <li><label>检验结果：</label><span>合格</span></li>
+                  <li><label>质量等级：</label><span>一级</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <!-- 产品登记 -->
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">10-12</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="mark"></div>
+            <div class="detail_box">
+              <h3 class="tit2">产品登记</h3>
+              <div class="wd product_detail_box">
+                <ul>
+                  <li><label>产品编号：</label><span>6940600803554</span></li>
+                  <li><label>产品名称：</label><span>鸭蛙稻香米</span></li>
+                  <li><label>品牌名称：</label><span>美好美</span></li>
+                  <li><label>包装规格：</label><span>5.0kg</span></li>
+                  <li><label>包装层级：</label><span>一级</span></li>
+                  <li><label>保质期：</label><span>12月</span></li>
+                  <li><label>生产日期：</label><span>2022-10-12</span></li>
+                  <li><label>产地：</label><span>湖北</span></li>
+                  <li><label>产品图片：</label><span><img src="images/yaguidao.png" alt=""></span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <!-- 加工信息 -->
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">10-11</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="detail_box">
+              <h3 class="tit2">加工信息</h3>
+              <div class="wd product_detail_box">
+                <ul>
+                  <li><label>加工时间：</label><span>2022-10-11</span></li>
+                  <li><label>加工工艺：</label><span>精加工</span></li>
+                  <li><label>加工步骤：</label><span>四道砂辊三道抛光</span></li>
+                  <li><label>加工批次：</label><span>JG20211128</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="origin_list_box clear">
+            <div class="date2_box">
+              <p class="date date2">09-11</p>
+              <p class="year">2022</p>
+            </div>
+            <div class="mark"></div>
+            <div class="detail_box">
+              <h3 class="tit2">原料信息</h3>
+              <div class="wd product_detail_box">
+                <ul>
+                  <li><label>原料名称：</label><span>水稻</span></li>
+                  <li><label>来源种植批次：</label><span>HB14517430</span></li>
+                  <li><label>入库时间：</label><span>2022-09-11</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 种殖 -->
+    <div class="origin_box">
+      <div class="origin_tit_con clear">
+        <div class="date_box">
+          <p class="date">09-30</p>
+          <p class="year">2021</p>
+        </div>
+        <div class="origin_tit_box clear">
+          <p>
+            <img class="icon" src="images/icon05.jpg" alt="">
+            <span>原料信息</span>
+            <a class="arrow" href="javascript:void(0)" data-toggle="autoPlay4">
+              <img src="images/arrow.png" alt="">
+            </a>
+          </p>
+        </div>
+      </div>
+      <div class="origin_list_con" data-id="4"  style="display: block;">
+        <div class="origin_bg">
+          <a class="arrow active" href="javascript:void(0)" data-toggle="autoPlay4"></a>
+        </div>
+
+        <div class="origin_list_box clear" style="padding-top: 0.2rem;">
+          <div class="detail_box">
+            <h3 class="tit2">农场信息</h3>
+            <div class="wd product_detail_box">
+              <ul>
+                <li><label>农场名称：</label><span>麻城市铁门岗乡春喜家庭农场</span></li>
+                <!-- <li><label>注册地址：</label><span>麻城市铁门岗乡陶家寨村一组陶家寨垸9号</span></li> -->
+              </ul>
+            </div>
+            <div class="img_info mt3">
+              <img src="images/chunxi.jpg" alt="">
+            </div>
+          </div>
+          <div class="detail_box">
+            <h3 class="tit2">基地登记信息</h3>
+            <div class="img_info mt3">
+              <img src="images/qslyzzfour.jpg" alt="">
+            </div>
+            <div class="wd product_detail_box">
+              <ul>
+                <li><label>基地编号：</label><span>XYZZ12-03</span></li>
+                <li><label>基地类型：</label><span>种植基地</span></li>
+                <li><label>基地名称：</label><span>良种试验田</span></li>
+                <li><label>经纬度：</label><span>114.03548,30.58811</span></li>
+                <li><label>负责人：</label><span>杨朋军</span></li>
+                <li><label>详细地址：</label><span>湖北省武汉市蔡甸区</span></li>
+                <li><label>基地属性：</label><span>-</span></li>
+              </ul>
+            </div>
+          </div>
+          <div class="detail_box">
+            <h3 class="tit2">种质原料信息</h3>
+            <div class="wd product_detail_box">
+              <ul>
+                <li><label>种植品种名称：</label><span>精品早稻谷</span></li>
+                <li><label>种植品属性：</label><span>优质水稻</span></li>
+              </ul>
+            </div>
+          </div>
+          <div class="detail_box">
+            <h3 class="tit2">种植批次管理</h3>
+            <div class="wd product_detail_box">
+              <ul>
+                <li><label>种植批次：</label><span>20210501</span></li>
+                <li><label>种植（原料）信息：</label><span>精品早稻谷</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="origin_list_box clear">
+          <div class="date2_box">
+            <p class="date date2">09-30</p>
+            <p class="year">2021</p>
+          </div>
+          <div class="mark"></div>
+          <div class="detail_box">
+            <h3 class="tit2">田间管理</h3>
+            <div class="table wd mtop">
+              <table>
+                <thead>
+                  <tr>
+                    <th>地块编号</th>
+                    <th>地块名称</th>
+                    <th>管理处置时间</th>
+                    <th>管理处置内容</th>
+                    <th>使用对象名称</th>
+                    <th>使用对象数量</th>
+                    <th>单位</th>
+                    <th>说明</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>XYZZ12-03</td>
+                    <td>良种试验田</td>
+                    <td>2021-09-30</td>
+                    <td>施肥</td>
+                    <td>碳酸二胺</td>
+                    <td>15</td>
+                    <td>公斤</td>
+                    <td>&nbsp;</td>
+                  </tr>
+                  <tr>
+                    <td>XYZZ12-03</td>
+                    <td>良种试验田</td>
+                    <td>2021-08-25</td>
+                    <td>浇水</td>
+                    <td>水</td>
+                    <td>25</td>
+                    <td>吨</td>
+                    <td>&nbsp;</td>
+                  </tr>
+                  <tr>
+                    <td>XYZZ12-03</td>
+                    <td>良种试验田</td>
+                    <td>2021-07-10</td>
+                    <td>施肥</td>
+                    <td>磷酸二铵</td>
+                    <td>12</td>
+                    <td>公斤</td>
+                    <td>&nbsp;</td>
+                  </tr>
+                  <tr>
+                    <td>XYZZ12-03</td>
+                    <td>良种试验田</td>
+                    <td>2021-06-10</td>
+                    <td>除草</td>
+                    <td>施田补</td>
+                    <td>250</td>
+                    <td>ml</td>
+                    <td>150KG水</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div class="origin_list_box clear">
+          <div class="date2_box">
+            <p class="date date2">05-01</p>
+            <p class="year">2021</p>
+          </div>
+          <div class="mark"></div>
+          <div class="detail_box">
+            <h3 class="tit2">农作物耕种</h3>
+            <div class="table wd mtop">
+              <table>
+                <thead>
+                  <tr>
+                    <th>地块编号</th>
+                    <th>地块名称</th>
+                    <th>耕种时间</th>
+                    <th>种子名称</th>
+                    <th>播种数量</th>
+                    <th>种子单位</th>
+                    <th>肥料名称</th>
+                    <th>施肥数量</th>
+                    <th>肥料单位</th>
+                    <th>药品名称</th>
+                    <th>施药数量</th>
+                    <th>药品单位</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>XYZZ12-03</td>
+                    <td>良种试验田</td>
+                    <td>2021-05-01</td>
+                    <td>精品早稻谷</td>
+                    <td>220</td>
+                    <td>KG</td>
+                    <td>尿素</td>
+                    <td>10</td>
+                    <td>KG</td>
+                    <td>-</td>
+                    <td>-</td>
+                    <td>-</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="outLine"></div>
+  </div>
+  <div class="copyright">
+    <p>Copyright ©2016-2022 北京福通互联科技集团有限公司 版权所有 京ICP备18013351号</p>
+  </div>
+</div>
+
+<script type="text/javascript">
+  function getUrlParam(name) {
+    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+    let r = window.location.search.substr(1).match(reg);  //匹配目标参数
+    if (r != null) return unescape(r[2]);
+    return null; //返回参数值
+  }
+
+  var code = getUrlParam('guid');
+  var type = getUrlParam('type');
+  if (code) {
+    $('.code_num').text(code)
+  }
+  if(type == '2') {
+    $("#machining_content").show()
+    $("#machining_date").show()
+    $("#machining_button").show()
+  } else if(type == '3') {
+    $("#sell_content").show()
+    $("#sell_date").show()
+    $("#sell_button").show()
+    $("#machining_content").show()
+    $("#machining_date").show()
+    $("#machining_button").show()
+
+  }
+</script>
+</body>
+</html>

indexDetail.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size:50px;">
+<head>
+  <meta charset="UTF-8">
+  <title>食品行业工业互联网标识解析二级节点</title>
+  <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico'/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/common.css">
+  <script src="js/jquery-3.3.1.min.js"></script>
+  <script src="js/rem.js"></script>
+  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jw76xsvI4iWWAMRfFGLlDmGZe42Ls99m"></script>
+  <script type="text/javascript" src="js/echarts.min.js"></script>
+  <script src="js/common.js"></script>
+</head>
+<body style="background:white;">
+<div class="wrap">
+  <div class="product">
+    <div class="product_img">
+      <img src="images/banner.png" alt="" style="height: auto;">
+    </div>
+    <div class="product_detail">
+      <ul class="product_detail_box wd">
+        <!-- <li><label>标识码：</label><span class="code_num_child">86.121.1339443412830519296/A0000000000000538624</span></li> -->
+        <li><label>标识码：</label><span id="code_num_son"></span></li>
+        <li><label>商品名称：</label><span>掌鲜意式肉酱</span></li>
+      </ul>
+      <!-- <ul class="product_detail_box wd">
+        <li><label><h3>产品信息</h3></label><span></span></li>
+        <li><label>产品图片：</label><span><img src="images/roujiangDetail.png" alt=""></span></li>
+        <li><label>产品名称：</label><span>顺鑫掌鲜意式肉酱</span></li>
+        <li><label>产品介绍：</label><span>顺鑫掌鲜意式肉酱</span></li>
+        <li><label>生产许可证编号：</label><span>SC10311131410887</span></li>
+        <li><label>保质期：</label><span>365天</span></li>
+        <li><label>规格：</label><span>250g</span></li>
+        <li><label>品牌：</label><span>掌鲜</span></li>
+        <li><label>系列：</label><span>意式肉酱</span></li>
+        <li><label>售卖方式：</label><span>单品</span></li>
+        <li><label>套餐分量：</label><span>2人份</span></li>
+      </ul>
+      <ul class="product_detail_box wd">
+        <li><label><h3>责任主体信息</h3></label><span></span></li>
+        <li><label>企业注册地：</label><span>北京市顺义区高丽营镇金马工业区内</span></li>
+        <li><label>行业类型：</label><span>制造业</span></li>
+        <li><label>信用代码类型：</label><span>统一社会信用代码</span></li>
+        <li><label>信用代码：</label><span>91110113786899465C</span></li>
+        <li><label>责任主体名称：</label><span>北京顺鑫农业股份有限公司创新食品分公司</span></li>
+      </ul> -->
+    </div>
+    <div class="origin_con" style="margin-top:2rem;">
+      <!-- 产品信息 -->
+      <div class="origin_box">
+        <div class="origin_tit_con clear">
+          <div class="origin_tit_box clear">
+            <p>
+              <img class="icon" src="images/icon06.jpg" alt="">
+              <span>产品信息</span>
+              <a class="arrow" href="javascript:void(0)" data-toggle="autoPlay1">
+                <img src="images/arrow.png" alt="">
+              </a>
+            </p>
+          </div>
+        </div>
+        <div class="origin_list_con" data-id="1" style="display: block;">
+          <div class="origin_bg">
+            <a class="arrow active" href="javascript:void(0)" data-toggle="autoPlay1"></a>
+          </div>
+          <div class="origin_list">
+            <div class="origin_list_box clear">
+              <div class="detail_box">
+                <table class="product_detail_table">
+                  <tbody>
+                    <tr>
+                      <td class="itemName">产品图片</td>
+                      <td><img src="images/roujiangDetail.png" alt=""></td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">产品名称</td>
+                      <td>顺鑫掌鲜意式肉酱</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">产品介绍</td>
+                      <td>顺鑫掌鲜意式肉酱</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">生产许可证编号</td>
+                      <td>SC10311131410887</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">保质期</td>
+                      <td>365天</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">规格</td>
+                      <td>250g</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">品牌</td>
+                      <td>掌鲜</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">系列</td>
+                      <td>意式肉酱</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">售卖方式</td>
+                      <td>单品</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">套餐分量</td>
+                      <td>2人份</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            </div>
+          </div>
+      </div>
+      <!-- 责任主体信息 -->
+      <div class="origin_box">
+        <div class="origin_tit_con clear">
+          <div class="origin_tit_box clear">
+            <p>
+              <img class="icon" src="images/icon07.jpg" alt="">
+              <span>责任主体信息</span>
+              <a class="arrow" href="javascript:void(0)" data-toggle="autoPlay2">
+                <img src="images/arrow.png" alt="">
+              </a>
+            </p>
+          </div>
+        </div>
+        <div class="origin_list_con" data-id="2" style="display: block;">
+          <div class="origin_bg">
+            <a class="arrow active" href="javascript:void(0)" data-toggle="autoPlay2"></a>
+          </div>
+          <div class="origin_list">
+            <div class="origin_list_box clear">
+              <div class="detail_box">
+                <table class="product_detail_table">
+                  <tbody>
+                    <tr>
+                      <td class="itemName">企业注册地</td>
+                      <td>北京市顺义区高丽营镇金马工业区内</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">行业类型</td>
+                      <td>制造业</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">信用代码类型</td>
+                      <td>统一社会信用代码</td>
+                    </ttrh>
+                    <tr>
+                      <td class="itemName">信用代码</td>
+                      <td>91110113786899465C</td>
+                    </tr>
+                    <tr>
+                      <td class="itemName">责任主体名称</td>
+                      <td>北京顺鑫农业股份有限公司创新食品分公司</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            </div>
+          </div>
+      </div>
+      <div class="outLine"></div>
+    </div>
+  </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $(function () {
+    function getUrlParam(name) {
+      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+      let r = window.location.search.substr(1).match(reg);  //匹配目标参数
+      if (r != null) return unescape(r[2]);
+      return null; //返回参数值
+    }
+
+    var parents1 = getUrlParam('code_num_son');
+    // console.log("parents1-> " + parents1);
+    $("#code_num_son").html(parents1);
+  })
+</script>
+</body>
+</html>

js/common.js

@@ -0,0 +1,171 @@
+$(function(){
+	$(".arrow").click(function(){
+		var _this=$(this);
+		var _id=$(this).data("toggle").slice(8,$(this).data("toggle").length)
+		var _class=$(this).attr("class")
+		$(".origin_list_con").each(function(){
+			if(_id==$(this).data("id")){
+				if(_class.indexOf("active")>0){
+					$(this).css("display","none")
+				}else{
+					$(this).css("display","block")
+				}
+			}else{
+				// $(this).hide();
+			}
+		})
+	})
+	// PC端 入口鼠标滑过特效
+	$(".enter_item").hover(function(){
+		$(this).addClass("active")
+	},function(){
+		$(this).removeClass("active")
+	})
+	$(".linkPoint_tit").click(function(){
+		// var _len=$(this).siblings(".linkPoint_content").find(".linkPoint_content_ul").children().length;
+		// console.log($(".source").height())
+		// $(".source").css("height",45*_len+150+"px")
+		if($(this).attr("class").indexOf("active")>0){
+			$(this).removeClass("active");
+			$(this).siblings().hide()
+		}else{
+			$(this).addClass("active");
+			$(this).siblings().show()
+		}
+	})
+	$(".linkPoint_content ul li").click(function(){
+		var id=$(this).data("id");
+		$(this).parent(".linkPoint_content_ul").siblings(".modal").each(function(){
+			var _id=$(this).data("item");
+			if(id==_id){
+				$(this).show();
+				$(".mask").show();
+			}
+		})
+	})
+	$(".close").click(function(){
+		$(".mask").hide();
+		$(this).parents(".modal").hide();
+	})
+	$("#tabTit li").click(function(){
+		if($(this).attr("class").indexOf("active")<0){
+			$(this).addClass("active")
+			$(this).siblings().removeClass("active")
+		}
+		var id=$(this).data("id");
+		$(this).parents(".modal_tab_tit").siblings(".modal_tab_item").each(function(){
+			var _id=$(this).data("item");
+			if(id==_id){
+				$(this).show();
+				$(this).siblings(".modal_tab_item").hide();
+			}
+		})
+	})
+
+	//搜索入口
+	$(".searchBtn").click(function(){
+		var _val=$("#searchIpt").val();
+		console.log(_val)
+
+		if(_val!="" && _val!=null && _val!=undefined){
+			if(_val.indexOf("400257")>=0){
+				window.location.href="pcNjsy.html"
+			}else if(_val.indexOf("080135")>=0){
+				window.location.href="pcSsnr.html"
+			}else if(_val.indexOf("925003")>=0){
+				window.location.href="pcYlsy.html"
+			}else if(_val.indexOf("001604")>=0){
+				window.location.href="pcLxnr.html"
+			}else if(_val.indexOf("005013")>=0){
+				window.location.href="pcGxsy.html"
+			}else{
+				alert("您输入的溯源码不存在，请检查！")
+			}
+		}else{
+			alert("请输入溯源码！")
+		}
+	})
+	$(document).keyup(function(event){
+		if(event.keyCode==13){
+			$(".searchBtn").trigger("click")
+		}
+	})
+
+	$(".menuDown").click(function(){
+		if($(this).attr("class").indexOf("active")>0){
+			$(this).removeClass("active")
+			$(".menuDown_list").hide()
+		}else{
+			$(this).addClass("active")
+			$(".menuDown_list").show()
+		}
+	})
+	
+})
+var myIcon=new BMap.Icon("images/car.png",new BMap.Size(40,32),{
+	imageOffset: new BMap.Size(0,0) 
+})
+function run(P1,P2,T1,T2){
+	var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true,enableRotation:true}});    //驾车实例
+	driving.search(P1, P2);
+	driving.setSearchCompleteCallback(function(res){
+		var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
+		map.addOverlay(new BMap.Polyline(pts, {
+			strokeColor: '#000',
+			strokeWeight:1
+		}));
+		var paths = pts.length;    //获得有几个点
+		var carMk = new BMap.Marker(pts[0],{icon:myIcon});
+		map.addOverlay(carMk);
+
+		
+		var startLabel=new BMap.Label(T1,{
+		 	offset:new BMap.Size(30,25)
+		})
+		var endLabel=new BMap.Label(T2,{
+		 	offset:new BMap.Size(30,25)
+		})
+		startLabel.setStyle({
+		 	"background":"rgb(65, 189, 247)",
+		 	"color":"white",
+		 	"font-size":"12px",
+		 	"border":"none",
+		 	"cursor":"pointer",
+		 	"padding":"5px 10px",
+		 	"border-radius":"8px",
+		 	"box-shadow":"2px 2px 6px #d7cccc"
+		})
+		endLabel.setStyle({
+		 	"background":"rgb(65, 189, 247)",
+		 	"color":"white",
+		 	"font-size":"12px",
+		 	"border":"none",
+		 	"cursor":"pointer",
+		 	"padding":"5px 10px",
+		 	"border-radius":"8px",
+		 	"box-shadow":"2px 2px 6px #d7cccc"
+		})
+		var startMk=new BMap.Marker(pts[0]);
+		var endMk=new BMap.Marker(pts[paths-1]);
+	    startMk.setLabel(startLabel);//添加label
+	    endMk.setLabel(endLabel);//添加label
+		map.addOverlay(startMk);
+		map.addOverlay(endMk);
+
+		i=0;
+		function resetMkPoint(i){
+			carMk.setPosition(pts[i]);
+			if(i < paths){
+				setTimeout(function(){
+					i++;
+					resetMkPoint(i);
+				},0.0000000001);
+			}
+		}
+		setTimeout(function(){
+			resetMkPoint(20);
+		},10)
+
+	});
+}
+'asdas'.toLocaleUpperCase()

js/rem.js

@@ -0,0 +1,13 @@
+window.onload = function(){
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    getRem(750,100)
+};
+window.onresize = function(){
+    getRem(750,100)
+};
+function getRem(pwidth,prem){
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth/pwidth*prem + "px";
+}