%!s(int64=4) %!d(string=hai) anos · 137fc4355b
--- a/dist/css/chunk-12ee4ba7.75dbefa2.css
+++ b/dist/css/chunk-12ee4ba7.75dbefa2.css
@@ -0,0 +1 @@
 
				+.leader-home[data-v-54bfedc5]{width:90%;margin:0 auto;display:flex;justify-content:space-around}.leader-home li[data-v-54bfedc5]{width:33%;text-align:center}.leader-home li img[data-v-54bfedc5]{width:100%}.van-nav-bar[data-v-54bfedc5]{background:#39f}[data-v-54bfedc5] .van-nav-bar .van-icon,[data-v-54bfedc5] .van-nav-bar__title{color:#fff}[class*=van-hairline][data-v-54bfedc5]:after{border:none}
			
--- a/dist/css/chunk-5359fcfc.7bc245e3.css
+++ b/dist/css/chunk-5359fcfc.7bc245e3.css
--- a/dist/css/chunk-73acbfa2.74549f19.css
+++ b/dist/css/chunk-73acbfa2.74549f19.css
@@ -1 +0,0 @@
 
				-.leader-home[data-v-42be67eb]{width:90%;margin:0 auto;display:flex;justify-content:space-around}.leader-home li[data-v-42be67eb]{width:33%;text-align:center}.leader-home li img[data-v-42be67eb]{width:100%}.van-nav-bar[data-v-42be67eb]{background:#39f}[data-v-42be67eb] .van-nav-bar .van-icon,[data-v-42be67eb] .van-nav-bar__title{color:#fff}[class*=van-hairline][data-v-42be67eb]:after{border:none}
			
--- a/dist/img/头部.8cef78bf.png
+++ b/dist/img/头部.8cef78bf.png
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/js/app.5ea5ad4b.js
+++ b/dist/js/app.5ea5ad4b.js
--- a/dist/js/app.5ea5ad4b.js.map
+++ b/dist/js/app.5ea5ad4b.js.map
--- a/dist/js/chunk-12ee4ba7.2af3e330.js
+++ b/dist/js/chunk-12ee4ba7.2af3e330.js
--- a/dist/js/chunk-12ee4ba7.2af3e330.js.map
+++ b/dist/js/chunk-12ee4ba7.2af3e330.js.map
--- a/dist/js/chunk-2ed13906.02819ae2.js
+++ b/dist/js/chunk-2ed13906.02819ae2.js
--- a/dist/js/chunk-2ed13906.02819ae2.js.map
+++ b/dist/js/chunk-2ed13906.02819ae2.js.map
--- a/dist/js/chunk-2ed13906.1dbc84c5.js
+++ b/dist/js/chunk-2ed13906.1dbc84c5.js
--- a/dist/js/chunk-2ed13906.1dbc84c5.js.map
+++ b/dist/js/chunk-2ed13906.1dbc84c5.js.map
--- a/dist/js/chunk-32bd2a5c.056b9c0c.js
+++ b/dist/js/chunk-32bd2a5c.056b9c0c.js
--- a/dist/js/chunk-32bd2a5c.056b9c0c.js.map
+++ b/dist/js/chunk-32bd2a5c.056b9c0c.js.map
--- a/dist/js/chunk-32bd2a5c.da36888a.js
+++ b/dist/js/chunk-32bd2a5c.da36888a.js
--- a/dist/js/chunk-32bd2a5c.da36888a.js.map
+++ b/dist/js/chunk-32bd2a5c.da36888a.js.map
--- a/dist/js/chunk-5359fcfc.1de8f9bb.js
+++ b/dist/js/chunk-5359fcfc.1de8f9bb.js
--- a/dist/js/chunk-5359fcfc.1de8f9bb.js.map
+++ b/dist/js/chunk-5359fcfc.1de8f9bb.js.map
--- a/dist/js/chunk-5f77cb3a.137279c4.js
+++ b/dist/js/chunk-5f77cb3a.137279c4.js
--- a/dist/js/chunk-5f77cb3a.137279c4.js.map
+++ b/dist/js/chunk-5f77cb3a.137279c4.js.map
--- a/dist/js/chunk-5f77cb3a.f642447b.js
+++ b/dist/js/chunk-5f77cb3a.f642447b.js
--- a/dist/js/chunk-5f77cb3a.f642447b.js.map
+++ b/dist/js/chunk-5f77cb3a.f642447b.js.map
--- a/dist/js/chunk-673edbc0.5e01d564.js
+++ b/dist/js/chunk-673edbc0.5e01d564.js
--- a/dist/js/chunk-673edbc0.5e01d564.js.map
+++ b/dist/js/chunk-673edbc0.5e01d564.js.map
--- a/dist/js/chunk-673edbc0.e357d71e.js
+++ b/dist/js/chunk-673edbc0.e357d71e.js
--- a/dist/js/chunk-673edbc0.e357d71e.js.map
+++ b/dist/js/chunk-673edbc0.e357d71e.js.map
--- a/dist/js/chunk-73acbfa2.b2544780.js.map
+++ b/dist/js/chunk-73acbfa2.b2544780.js.map
--- a/dist/js/chunk-e1666184.54061440.js
+++ b/dist/js/chunk-e1666184.54061440.js
--- a/dist/js/chunk-e1666184.54061440.js.map
+++ b/dist/js/chunk-e1666184.54061440.js.map
--- a/dist/js/chunk-e1666184.6753aba1.js
+++ b/dist/js/chunk-e1666184.6753aba1.js
--- a/dist/js/chunk-e1666184.6753aba1.js.map
+++ b/dist/js/chunk-e1666184.6753aba1.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,10 +11,14 @@
 
				   "dependencies": {
			
 
				     "axios": "^0.21.1",
			
 
				     "core-js": "^3.6.5",
			
 
				+    "dayjs": "^1.10.6",
			
 
				+    "echarts": "^5.1.2",
			
 
				+    "echarts-liquidfill": "^3.0.0",
			
 
				     "vant": "^2.12.22",
			
 
				     "vue": "^2.6.11",
			
 
				     "vue-router": "^3.2.0",
			
 
				-    "vuex": "^3.4.0"
			
 
				+    "vuex": "^3.4.0",
			
 
				+    "vusui-layer": "^1.0.0"
			
 
				   },
			
 
				   "devDependencies": {
			
 
				     "@vue/cli-plugin-babel": "~4.5.0",
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,16 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <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">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/assets/images/ningdongyunying/puzzle/下边云.png
+++ b/src/assets/images/ningdongyunying/puzzle/下边云.png
--- a/src/assets/images/ningdongyunying/puzzle/前往.png
+++ b/src/assets/images/ningdongyunying/puzzle/前往.png
--- a/src/assets/images/ningdongyunying/puzzle/单位.png
+++ b/src/assets/images/ningdongyunying/puzzle/单位.png
--- a/src/assets/images/ningdongyunying/puzzle/抬头.png
+++ b/src/assets/images/ningdongyunying/puzzle/抬头.png
--- a/src/assets/images/ningdongyunying/puzzle/未按.png
+++ b/src/assets/images/ningdongyunying/puzzle/未按.png
--- a/src/assets/images/ningdongyunying/puzzle/灰按钮.png
+++ b/src/assets/images/ningdongyunying/puzzle/灰按钮.png
--- a/src/assets/images/ningdongyunying/puzzle/蓝框.png
+++ b/src/assets/images/ningdongyunying/puzzle/蓝框.png
--- a/src/assets/images/ningdongyunying/puzzle/限时灰.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时灰.png
--- a/src/assets/images/ningdongyunying/puzzle/限时蓝.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时蓝.png
--- a/src/assets/images/ningdongyunying/puzzle/限时黄.png
+++ b/src/assets/images/ningdongyunying/puzzle/限时黄.png
--- a/src/assets/images/ningdongyunying/puzzle/黄按钮.png
+++ b/src/assets/images/ningdongyunying/puzzle/黄按钮.png
--- a/src/assets/images/ningdongyunying/puzzle/黄框.png
+++ b/src/assets/images/ningdongyunying/puzzle/黄框.png
--- a/src/assets/images/puzzles/2020-10-22-pic1.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic1.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic2.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic2.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic3.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic3.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic4.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic4.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic47.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic47.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic5.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic5.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic7.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic7.jpeg
--- a/src/assets/images/puzzles/2020-10-22-pic8.jpeg
+++ b/src/assets/images/puzzles/2020-10-22-pic8.jpeg
--- a/src/assets/images/puzzles/caixushen.jpg
+++ b/src/assets/images/puzzles/caixushen.jpg
--- a/src/assets/images/puzzles/code.jpg
+++ b/src/assets/images/puzzles/code.jpg
--- a/src/assets/images/puzzles/logo.png
+++ b/src/assets/images/puzzles/logo.png
--- a/src/assets/images/puzzles/re.jpeg
+++ b/src/assets/images/puzzles/re.jpeg
--- a/src/assets/images/puzzles/share.png
+++ b/src/assets/images/puzzles/share.png
--- a/src/assets/images/puzzles/timg.jpeg
+++ b/src/assets/images/puzzles/timg.jpeg
--- a/src/assets/images/puzzles/timg2.jpeg
+++ b/src/assets/images/puzzles/timg2.jpeg
--- a/src/assets/images/puzzles/timg3.jpeg
+++ b/src/assets/images/puzzles/timg3.jpeg
--- a/src/assets/images/puzzles/timg4.jpeg
+++ b/src/assets/images/puzzles/timg4.jpeg
--- a/src/assets/images/puzzles/timg6.jpeg
+++ b/src/assets/images/puzzles/timg6.jpeg
--- a/src/assets/images/puzzles/yang.jpeg
+++ b/src/assets/images/puzzles/yang.jpeg
--- a/src/assets/images/zaoquan/kuangjingshui/头部.png
+++ b/src/assets/images/zaoquan/kuangjingshui/头部.png
--- a/src/assets/images/zaoquan/kuangjingshui/快滤池.png
+++ b/src/assets/images/zaoquan/kuangjingshui/快滤池.png
--- a/src/assets/images/zaoquan/kuangjingshui/高密沉淀.png
+++ b/src/assets/images/zaoquan/kuangjingshui/高密沉淀.png
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -4,36 +4,13 @@
 
				         <!-- 例如当前模块多个页面需要，我们可以把这个模块封装出来，达到组件复用的效果
			
 
				              可以按需载入，也可以全局载入，按照项目需求来完成
			
 
				          -->
			
 
				-        <div v-for="(item,index) in header" :key="index" @click="gethome">
			
 
				-            <h1 class="h1">{{item.value}}</h1>
			
 
				-        </div>
			
 
				+        <h1>123</h1>
			
 
				     </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				     export default {
			
 
				-        data(){
			
 
				-            return{
			
 
				-                header:[]
			
 
				-            }
			
 
				-        },
			
 
				-        methods:{
			
 
				-            //获取头部标题
			
 
				-            getheader(){
			
 
				-                this.$http.get("/config/values?keys=mallName").then(res=>{
			
 
				-                    // console.log(res.data.data);
			
 
				-                    this.header=res.data.data
			
 
				-                })
			
 
				-            },
			
 
				-            //点击事件，当处于其他页面时返回首页
			
 
				-            gethome(){
			
 
				-                this.$router.push("/home/homepage" ?"/home/homepage" : "");
			
 
				-            }
			
 
				-            
			
 
				-        },
			
 
				-        mounted(){
			
 
				-            this.getheader()
			
 
				-        }
			
 
				+        
			
 
				     }
			
 
				 </script>
			
 
				 
			
--- a/src/main.js
+++ b/src/main.js
@@ -2,8 +2,12 @@ import Vue from 'vue'
 
				 import App from './App.vue'
			
 
				 import router from './router'
			
 
				 import store from './store'
			
 
				+<<<<<<< HEAD
			
 
				 import './assets/css/global.css'
			
 
				+=======
			
 
				+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
			
 
				 import "./plugins/axios.js"
			
 
				+
			
 
				 // import axios from "axios"
			
 
				 //区别开发环境和测试环境
			
 
				 // axios.defaults.baseURL=process.env.VUE_APP_APIURL
			
@@ -20,6 +24,12 @@ Vue.use(Lazyload);
 
				 Vue.use(Dialog);
			
 
				 Vue.use(Vant);
			
 
				 Vue.config.productionTip = false
			
 
				+router.beforeEach((to,from,next)=>{
			
 
				+  if(to.meta.title){
			
 
				+    document.title=to.meta.title
			
 
				+  }
			
 
				+  next()
			
 
				+})
			
 
				 new Vue({
			
 
				   router,
			
 
				   store,
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,7 @@ const routes = [
 
				     name:'leader-mailbox-reply',
			
 
				     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
			
 
				   },
			
 
				+<<<<<<< HEAD
			
 
				 
			
 
				 
			
 
				 
			
@@ -50,11 +51,52 @@ const routes = [
 
				     path:'/tongfeng/zaoquan/tongfeng_xijin',
			
 
				     name:'tongfeng_xijin',
			
 
				     component:()=>import('../views/tongfeng/zaoquan/tongfeng_xijin.vue')
			
 
				+=======
			
 
				+  //枣泉矿井水系统
			
 
				+  {
			
 
				+    path:'/zaoquan/kuangjingshui/kuangjingshui',
			
 
				+    name:'kuangjingshui',
			
 
				+    component:()=>import('../views/zaoquan/kuangjingshui/kuangjingshui.vue'),
			
 
				+    meta:{
			
 
				+      title:'矿井水处理'
			
 
				+    }
			
 
				+  },
			
 
				+  //宁东运营部拼图游戏
			
 
				+  {
			
 
				+    path:"/ningdongyunying/puzzle/puzzle",
			
 
				+    name:'puzzle',
			
 
				+    component:()=>import('../views/ningdongyunying/puzzle/puzzle.vue'),
			
 
				+    meta:{
			
 
				+      title:'拼图游戏'
			
 
				+    }
			
 
				+  },
			
 
				+  //宁东运营部拼图游戏详情
			
 
				+  {
			
 
				+    path:"/ningdongyunying/puzzle/puzzle-info",
			
 
				+    name:'puzzle-info',
			
 
				+    component:()=>import('../views/ningdongyunying/puzzle/puzzle-info.vue'),
			
 
				+    meta:{
			
 
				+      title:'拼图游戏'
			
 
				+    }
			
 
				+  },
			
 
				+  //宁东运营部拼图游戏详情1
			
 
				+  {
			
 
				+    path:"/ningdongyunying/puzzle/puzzle-infos",
			
 
				+    name:'puzzle-infos',
			
 
				+    component:()=>import('../views/ningdongyunying/puzzle/puzzle-infos.vue'),
			
 
				+    meta:{
			
 
				+      title:'拼图游戏'
			
 
				+    }
			
 
				+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
			
 
				   },
			
 
				   //路由重定向
			
 
				   {
			
 
				     path:'/',
			
 
				+<<<<<<< HEAD
			
 
				     redirect:{"name":"tongfeng_xijin"}
			
 
				+=======
			
 
				+    redirect:{"name":"puzzle-infos"}
			
 
				+>>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
			
 
				   }
			
 
				 ]
			
 
				 
			
--- a/src/views/ningdongyunying/puzzle/Cutdown.vue
+++ b/src/views/ningdongyunying/puzzle/Cutdown.vue
@@ -0,0 +1,76 @@
 
				+<template>
			
 
				+  <div>
			
 
				+      <div class="deloy">倒计时：<span id="time">{{count}}</span></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      count: 180,
			
 
				+      dealTime:0,
			
 
				+      timer: null
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  props:{
			
 
				+      success:{
			
 
				+        type: Boolean,
			
 
				+        default :false
			
 
				+      },
			
 
				+  },
			
 
				+
			
 
				+  created(){
			
 
				+      this.cutDown();
			
 
				+  },
			
 
				+//   mounted(){
			
 
				+// this.cutDown();
			
 
				+//   },
			
 
				+
			
 
				+  methods: {
			
 
				+    cutDown() {
			
 
				+    //   const TIME_COUNT = 180;
			
 
				+      if (!this.timer) {
			
 
				+        // this.count = TIME_COUNT;
			
 
				+        this.timer = setInterval(() => {
			
 
				+          if (this.count > 0 ) {
			
 
				+            this.count--;
			
 
				+            if(this.success) {
			
 
				+                this.stopCutdown();
			
 
				+            }
			
 
				+          } else {
			
 
				+            clearInterval(this.timer);
			
 
				+            this.timer = null;
			
 
				+          }
			
 
				+        }, 1000);
			
 
				+      }
			
 
				+    },
			
 
				+    initTime(){ // 返回的时候初始化倒计时
			
 
				+        // this.clearTimer();
			
 
				+         clearInterval(this.timer);
			
 
				+        this.timer = null;
			
 
				+        this.count = 180;
			
 
				+        this.cutDown();
			
 
				+    },
			
 
				+    stopCutdown(){ //拼图成功要清理掉倒计时,然后向父组件传递用时
			
 
				+       
			
 
				+        this.dealTime = 180-this.count;
			
 
				+        this.$emit('overtime',this.dealTime);
			
 
				+        clearInterval(this.timer);
			
 
				+        this.timer = null;
			
 
				+    },
			
 
				+    clearTimer(){ //拼图成功后清除定时器
			
 
				+        clearInterval(this.timer);
			
 
				+        this.timer = null;
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style  scoped>
			
 
				+.play-page .deloy {
			
 
				+  padding: 10px 20px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/ningdongyunying/puzzle/puzzle-info.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle-info.vue
@@ -0,0 +1,264 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <div v-if="shows">
			
 
				+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
			
 
				+    </div>
			
 
				+    <div class="headers">
			
 
				+      <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
			
 
				+      <div class="headers-left">5</div>
			
 
				+      <div class="headers-right">4</div>
			
 
				+      <div class="header-content">
			
 
				+        <div
			
 
				+          style="width: 100px; height: 100px"
			
 
				+          ref="hygrometer"
			
 
				+          id="hygrometer"
			
 
				+        ></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="contents">
			
 
				+      <div class="contents-list">
			
 
				+        <div class="contents-list-item">
			
 
				+          <div class="contents-list-item-img">
			
 
				+            <img src="../../../assets/images/puzzles/timg.jpeg" />
			
 
				+            <p>最快时长 1:23:25</p>
			
 
				+          </div>
			
 
				+          <div class="contents-list-item-button">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
			
 
				+            />
			
 
				+            <p>图片名称</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="contents-list-item">
			
 
				+          <div class="contents-list-item-img">
			
 
				+            <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
			
 
				+          </div>
			
 
				+          <div class="contents-list-item-button">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
			
 
				+            />
			
 
				+            <p>未破解</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="contents-list-item">
			
 
				+          <div class="contents-list-item-img">
			
 
				+            <img src="../../../assets/images/ningdongyunying/puzzle/未按.png" />
			
 
				+          </div>
			
 
				+          <div class="contents-list-item-button">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/灰按钮.png"
			
 
				+            />
			
 
				+            <p>未破解</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="footed">
			
 
				+      <div class="footed-img">
			
 
				+        <img src="../../../assets/images/ningdongyunying/puzzle/下边云.png" />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as echarts from "echarts"; //引入echarts
			
 
				+import "echarts-liquidfill";
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      shows: true,
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    document.body.style.backgroundColor = "#39f"; //背景色
			
 
				+    this.drawLiquidfill();
			
 
				+  },
			
 
				+  methods: {
			
 
				+    drawLiquidfill() {
			
 
				+      // 基于准备好的dom，初始化echarts实例
			
 
				+      let hygrometer = echarts.init(document.getElementById("hygrometer"));
			
 
				+      // 使用指定的配置项和数据显示图表
			
 
				+      hygrometer.setOption({
			
 
				+        tooltip: {
			
 
				+          show: true,
			
 
				+        },
			
 
				+
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "puzzle",
			
 
				+            type: "liquidFill",
			
 
				+            radius: "80px",
			
 
				+            data: [0.45],
			
 
				+            direction: "none",//取消移动方向
			
 
				+            amplitude: 0,//波的振幅
			
 
				+            waveAnimation: false,//动画效果
			
 
				+            animationDuration: 0,
			
 
				+            animationDurationUpdate: 0,
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                color: "#ff7900",
			
 
				+                insideColor: "#ff7900",
			
 
				+                textStyle: {
			
 
				+                  fontSize: 20,
			
 
				+                  fontWeight: "bold",
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            backgroundStyle: {
			
 
				+              color: "#fff",
			
 
				+            },
			
 
				+            color: [
			
 
				+              {
			
 
				+                type: "linear",
			
 
				+                x: 0,
			
 
				+                y: 1,
			
 
				+                x2: 0,
			
 
				+                y2: 0,
			
 
				+                colorStops: [
			
 
				+                  {
			
 
				+                    offset: 1,
			
 
				+                    color: ["#ffff00"], // 0% 处的颜色
			
 
				+                  },
			
 
				+                  {
			
 
				+                    offset: 0,
			
 
				+                    color: ["#ffff00"], // 100% 处的颜色
			
 
				+                  },
			
 
				+                ],
			
 
				+                global: false, // 缺省为 false
			
 
				+              },
			
 
				+            ],
			
 
				+            outline: {
			
 
				+              show: true,
			
 
				+              borderDistance: 0,
			
 
				+              itemStyle: {
			
 
				+                borderColor: "#fdd35d",
			
 
				+                borderWidth: 3,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.van-nav-bar {
			
 
				+  background: #39f;
			
 
				+}
			
 
				+>>> .van-nav-bar__title {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+>>> .van-nav-bar .van-icon {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+[class*="van-hairline"]:after {
			
 
				+  border: none;
			
 
				+}
			
 
				+.footed {
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  bottom: 0;
			
 
				+  z-index: -1;
			
 
				+}
			
 
				+.footed > .footed-img {
			
 
				+  width: 100%;
			
 
				+  height: 76px;
			
 
				+  position: fixed;
			
 
				+  bottom: 0;
			
 
				+}
			
 
				+.footed-img > img {
			
 
				+  width: 100%;
			
 
				+  height: 76px;
			
 
				+}
			
 
				+.headers {
			
 
				+  width: 90%;
			
 
				+  margin: 2% auto;
			
 
				+  position: relative;
			
 
				+}
			
 
				+.headers > img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+.headers-left {
			
 
				+  width: 20%;
			
 
				+  text-align: center;
			
 
				+  position: absolute;
			
 
				+  left: 4%;
			
 
				+  top: 37%;
			
 
				+  font-size: 30px;
			
 
				+  color: #fbd91f;
			
 
				+}
			
 
				+.headers-right {
			
 
				+  width: 20%;
			
 
				+  text-align: center;
			
 
				+  position: absolute;
			
 
				+  left: 76%;
			
 
				+  top: 37%;
			
 
				+  font-size: 30px;
			
 
				+  color: #fbd91f;
			
 
				+}
			
 
				+.header-content {
			
 
				+  position: absolute;
			
 
				+  left: 35%;
			
 
				+  top: 27%;
			
 
				+}
			
 
				+.contents {
			
 
				+  width: 90%;
			
 
				+  margin: 0 auto 8%;
			
 
				+  background: #1559de;
			
 
				+  border: 2px solid #0938d0;
			
 
				+}
			
 
				+.contents-list {
			
 
				+  width: 97%;
			
 
				+  margin: 1% auto;
			
 
				+  background: #39f;
			
 
				+  border: 2px solid #0938d0;
			
 
				+  display: flex;
			
 
				+  justify-content: space-around;
			
 
				+  flex-wrap: wrap;
			
 
				+}
			
 
				+.contents-list::after {
			
 
				+  content: "";
			
 
				+  width: 45%;
			
 
				+}
			
 
				+.contents-list-item {
			
 
				+  width: 45%;
			
 
				+  text-align: center;
			
 
				+  margin-top: 3%;
			
 
				+  margin-bottom: 5%;
			
 
				+}
			
 
				+.contents-list-item-img {
			
 
				+  width: 100%;
			
 
				+  text-align: center;
			
 
				+  border-bottom: 1px solid transparent;
			
 
				+  height: 97px;
			
 
				+}
			
 
				+.contents-list-item-img > img {
			
 
				+  width: 100%;
			
 
				+  height: 97px;
			
 
				+}
			
 
				+.contents-list-item-img > p {
			
 
				+  margin-top: -19%;
			
 
				+  border-bottom: 1px solid transparent;
			
 
				+  font-size: 13px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.contents-list-item-button {
			
 
				+  width: 65%;
			
 
				+  text-align: center;
			
 
				+  margin: 3% auto;
			
 
				+}
			
 
				+.contents-list-item-button > img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+.contents-list-item-button > p {
			
 
				+  margin-top: -31%;
			
 
				+  font-size: 13px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/ningdongyunying/puzzle/puzzle-infos.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle-infos.vue
@@ -0,0 +1,812 @@
 
				+<template>
			
 
				+  <!-- :style="{transform: `translateX(${clickStartBtn?-100:0}vw)`}" -->
			
 
				+  <div class="wrap" ref="wrap">
			
 
				+    <div class="start-page">
			
 
				+      <!-- <h1>{{ msg }}</h1> -->
			
 
				+      <div class="headers">
			
 
				+        <img src="../../../assets/images/ningdongyunying/puzzle/抬头.png" />
			
 
				+        <div class="headers-left">5</div>
			
 
				+        <div class="headers-right">4</div>
			
 
				+        <div class="header-content">
			
 
				+          <div
			
 
				+            style="width: 100px; height: 100px"
			
 
				+            ref="hygrometer"
			
 
				+            id="hygrometer"
			
 
				+          ></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="album-list">
			
 
				+        <div
			
 
				+          class="img-wrap"
			
 
				+          v-for="(item, index) in imgArr"
			
 
				+          :class="activeClass == index ? 'active' : ''"
			
 
				+          :key="index"
			
 
				+          @click="getItem(index)"
			
 
				+        >
			
 
				+          <img :src="item.url" alt="" />
			
 
				+          <!-- <button @click="startGame(index)">开始</button> -->
			
 
				+          <div class="contents-list-item-button" @click="startGame(index)">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/黄按钮.png"
			
 
				+            />
			
 
				+            <p>图片名称</p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- <div class="img-wrap" v-if="!uploadimg">
			
 
				+          <div class="file-wrap" ref="filewrap">
			
 
				+            <input type="file" id="file" @change="onFileChange">
			
 
				+          </div>
			
 
				+        </div> -->
			
 
				+        <!-- <div class="btn" id="start" @click="startGame(activeClass)">开始游戏</div> -->
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="play-page">
			
 
				+      <div class="deloy">
			
 
				+        倒计时：<span id="time">{{ dealtime }}</span>
			
 
				+      </div>
			
 
				+      <!-- <Cutdown ref="child" :success="issuccess" @overtime="overtime"></Cutdown> -->
			
 
				+      <div class="play-area" id="playArea">
			
 
				+        <!-- :style="{backgroundImage:'url('+selectedImg+')',transform: `translate(${matrixArr[item].x}vw, ${matrixArr[item].y}vh)`}" -->
			
 
				+        <div
			
 
				+          v-for="item in boxArr"
			
 
				+          :index="item"
			
 
				+          :key="item"
			
 
				+          :class="[
			
 
				+            'piece',
			
 
				+            'piece-' + item,
			
 
				+            item == boxArractivelass ? 'active' : '',
			
 
				+          ]"
			
 
				+          :style="{ backgroundImage: 'url(' + selectedImg + ')' }"
			
 
				+          @click="changePositon($event, item)"
			
 
				+          :ref="'piece' + item"
			
 
				+        ></div>
			
 
				+      </div>
			
 
				+      <div class="btn" id="change" @click="reOrder()">重新排序</div>
			
 
				+      <div class="btn" id="back" @click="goBack()">返回</div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="result-page">
			
 
				+      <div class="success-text">恭喜闯关成功~!</div>
			
 
				+      <div class="total-time">
			
 
				+        用时: <span id="use_time">{{ 180 - dealtime }}</span
			
 
				+        >s
			
 
				+      </div>
			
 
				+      <div class="btn" @click="generateImg">生成战绩海报</div>
			
 
				+      <div class="btn" @click="onceAgain()">再来一次</div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="preview-page last-page">
			
 
				+      <img :src="canvasUrl" alt="图片" />
			
 
				+      <div class="btn play-again" @click="reStart()">重新再来</div>
			
 
				+      <div class="btn share-other" @click="isVisible = true">我要分享</div>
			
 
				+    </div>
			
 
				+    <div class="share-bg" v-if="isVisible" @click="isVisible = false" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as echarts from "echarts"; //引入echarts
			
 
				+import "echarts-liquidfill";
			
 
				+export default {
			
 
				+  name: "HelloWorld",
			
 
				+  props: {
			
 
				+    msg: String,
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      startDx: 0, // 初始位移，用于返回上一页
			
 
				+      activeClass: -1,
			
 
				+      boxArractivelass: -1,
			
 
				+      prevIndex: null,
			
 
				+      curIndex: 0,
			
 
				+      curposArr: [],
			
 
				+      clickStartBtn: false,
			
 
				+      uploadimg: "",
			
 
				+      selectedImg: "",
			
 
				+      boxArr: new Array(9).fill(1).map((item, index) => {
			
 
				+        return index;
			
 
				+      }),
			
 
				+      pieces: document.querySelectorAll(".piece"),
			
 
				+      pool: this.generateMatrix(3, 28, 20),
			
 
				+      matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
			
 
				+      //  matrixArr:this.shuffle(this.pieces, this.pool),
			
 
				+      imgArr: [
			
 
				+        // { url: require("../assets/images/timg2.jpeg") },
			
 
				+        // { url: require("../assets/images/timg3.jpeg") },
			
 
				+        // { url: require("../assets/images/timg.jpeg") },
			
 
				+        // { url: require("../assets/images/caixushen.jpg") },
			
 
				+        // { url: require("../assets/images/yang.jpeg") },
			
 
				+        // { url: require("../assets/images/re.jpeg") },
			
 
				+        // { url: require("../assets/images/timg4.jpeg") },
			
 
				+        // { url: require("../assets/images/timg6.jpeg") }
			
 
				+        { url: require("../../../assets/images/puzzles/2020-10-22-pic2.jpeg") },
			
 
				+        {
			
 
				+          url: require("../../../assets/images/puzzles/2020-10-22-pic47.jpeg"),
			
 
				+        },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic3.jpeg") },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic5.jpeg") },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic4.jpeg") },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic1.jpeg") },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic7.jpeg") },
			
 
				+        // { url: require("../assets/images/2020-10-22-pic8.jpeg") }
			
 
				+      ],
			
 
				+      wall: 0,
			
 
				+      prevEl: null, // 上一个元素,
			
 
				+      dealtime: 180,
			
 
				+      timer: null,
			
 
				+      issuccess: false,
			
 
				+      canvasUrl: "",
			
 
				+      isVisible: false,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    getItem(index) {
			
 
				+      this.activeClass = index;
			
 
				+    },
			
 
				+    onFileChange(e) {
			
 
				+      var files = e.target.files || e.dataTransfer.files;
			
 
				+      if (!files.length) return;
			
 
				+      this.createImage(files[0]);
			
 
				+    },
			
 
				+    createImage(file) {
			
 
				+      //   var image = new Image();
			
 
				+      var reader = new FileReader();
			
 
				+      var vm = this;
			
 
				+
			
 
				+      reader.onload = (e) => {
			
 
				+        vm.uploadimg = e.target.result;
			
 
				+        // console.log(123,e.target.result)
			
 
				+        this.imgArr.push({
			
 
				+          url: e.target.result,
			
 
				+        });
			
 
				+      };
			
 
				+      reader.readAsDataURL(file);
			
 
				+    },
			
 
				+    startGame(picIndex) {
			
 
				+      // if (this.activeClass == -1) {
			
 
				+      //   alert("请选择图片");
			
 
				+      //   return;
			
 
				+      // }
			
 
				+      //   this.dealtime = 180;
			
 
				+      this.timer = setInterval(this.timeStart, 1000);
			
 
				+      this.startDx = this.startDx - 100;
			
 
				+      this.transformX(this.$refs.wrap, this.startDx + "vw");
			
 
				+      this.selectedImg = this.imgArr[picIndex].url;
			
 
				+
			
 
				+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
			
 
				+      //   console.log(222);
			
 
				+    },
			
 
				+    reOrder() {
			
 
				+      //this.matrixArr = this.upsetArr(this.generateMatrix(3, 28, 20));
			
 
				+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
			
 
				+    },
			
 
				+    // 点击高亮并且切换对应位置 (想办法交换对应索引位置的x,y值即可)
			
 
				+    changePositon(e, item) {
			
 
				+      //点击小图片切换位置方法
			
 
				+      let reg = /active/g;
			
 
				+      // console.log(e, item);
			
 
				+      this.boxArractivelass = item;
			
 
				+      let pieces = document.querySelectorAll(".piece");
			
 
				+      if (!this.wall) {
			
 
				+        this.wall = 1;
			
 
				+        this.prevEl = e.target;
			
 
				+        for (var i = 0, len = pieces.length; i < len; i++) {
			
 
				+          // 使用replace为了避免元素后期加入其他类名
			
 
				+          pieces[i].className = pieces[i].className.replace(" active", "");
			
 
				+        }
			
 
				+        !reg.test(this.className) && (this.className += " active");
			
 
				+        // this.className= this.className.replace(' active', '');
			
 
				+      } else {
			
 
				+        this.wall = 0;
			
 
				+        var prevIndex = +this.prevEl.getAttribute("index"),
			
 
				+          curIndex = +e.target.getAttribute("index");
			
 
				+
			
 
				+        // 置换数组
			
 
				+        this.swap(this.pool, prevIndex, curIndex);
			
 
				+        // console.log("prevIndex", "curIndex", prevIndex, curIndex);
			
 
				+        this.prevEl.style.transform =
			
 
				+          "translate(" +
			
 
				+          this.pool[prevIndex].x +
			
 
				+          "vw," +
			
 
				+          this.pool[prevIndex].y +
			
 
				+          "vh" +
			
 
				+          ")";
			
 
				+        e.target.style.transform =
			
 
				+          "translate(" +
			
 
				+          this.pool[curIndex].x +
			
 
				+          "vw," +
			
 
				+          this.pool[curIndex].y +
			
 
				+          "vh" +
			
 
				+          ")";
			
 
				+        // 清除样式
			
 
				+        // this.prevEl.className= this.prevEl.className.replace(' active', '');
			
 
				+        this.boxArractivelass = -1;
			
 
				+
			
 
				+        // 校验是否成功
			
 
				+        if (this.isTestSuccess(this.pool)) {
			
 
				+          // 清除计时器
			
 
				+          // alert('success');
			
 
				+          // this.clickStartBtn = true;
			
 
				+          clearInterval(this.timer);
			
 
				+          this.startDx -= 100;
			
 
				+          this.issuccess = true;
			
 
				+
			
 
				+          // $('#playArea')[0].classList.add('active');
			
 
				+          // $('#use_time').html(180-dealtime);
			
 
				+          //   setTimeout(function() {
			
 
				+          this.transformX(this.$refs.wrap, this.startDx + "vw");
			
 
				+          //   }, 1200);
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    timeStart() {
			
 
				+      this.dealtime--;
			
 
				+      if (this.dealtime < 1) {
			
 
				+        clearInterval(this.timer);
			
 
				+        alert("挑战失败，请返回重新开始");
			
 
				+      }
			
 
				+    },
			
 
				+    // overtime(num) {
			
 
				+    //   this.step = num;
			
 
				+    // },
			
 
				+    // 滑动元素
			
 
				+    transformX(el, dx) {
			
 
				+      el.style.transform = "translateX(" + dx + ")";
			
 
				+    },
			
 
				+    resetTime() {
			
 
				+      this.dealtime = 180;
			
 
				+      clearInterval(this.timer);
			
 
				+    },
			
 
				+    goBack() {
			
 
				+      // 清理定时器,返回
			
 
				+      //   this.clickStartBtn = false;
			
 
				+      this.startDx += 100;
			
 
				+      this.transformX(this.$refs.wrap, this.startDx + "vw");
			
 
				+      this.resetTime();
			
 
				+    },
			
 
				+    onceAgain() {
			
 
				+      this.shuffle(document.querySelectorAll(".piece"), this.pool);
			
 
				+      this.startDx = -100;
			
 
				+      this.transformX(this.$refs.wrap, this.startDx + "vw");
			
 
				+      this.resetTime();
			
 
				+      this.dealtime = 180;
			
 
				+      this.timer = setInterval(this.timeStart, 1000);
			
 
				+      //    this.$refs.child.initTime();
			
 
				+    },
			
 
				+    reStart() {
			
 
				+      this.startDx = this.startDx + 300;
			
 
				+      this.transformX(this.$refs.wrap, this.startDx + "vw");
			
 
				+      this.resetTime();
			
 
				+      // this.dealtime = 180;
			
 
				+      // this.timer = setInterval(this.timeStart, 1000);
			
 
				+    },
			
 
				+    // 生成战绩海报
			
 
				+    generateImg() {
			
 
				+      var canvas = document.createElement("canvas");
			
 
				+
			
 
				+      if (canvas.getContext) {
			
 
				+        var winW = window.innerWidth,
			
 
				+          winH = window.innerHeight,
			
 
				+          ctx = canvas.getContext("2d");
			
 
				+        canvas.width = winW;
			
 
				+        canvas.height = winH;
			
 
				+
			
 
				+        // 绘制背景
			
 
				+        // ctx.fillStyle = '#06c';
			
 
				+        var linear = ctx.createLinearGradient(0, 0, 0, winH);
			
 
				+        linear.addColorStop(0, "#a1c4fd");
			
 
				+        linear.addColorStop(1, "#c2e9fb");
			
 
				+        ctx.fillStyle = linear;
			
 
				+        ctx.fillRect(0, 0, winW, winH);
			
 
				+        ctx.fill();
			
 
				+
			
 
				+        // 绘制顶部图像
			
 
				+        var imgH = 0;
			
 
				+        var that = this;
			
 
				+        var img = new Image();
			
 
				+        img.src = that.selectedImg;
			
 
				+        img.setAttribute("crossOrigin", "Anonymous");
			
 
				+        img.onload = function () {
			
 
				+          // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
			
 
				+          imgH = (0.5 * winW * this.height) / this.width;
			
 
				+          // ctx.drawImage(img, 0.2 * winW, 0.1 * winH, 0.6 * winW, imgH);
			
 
				+          ctx.drawImage(img, 0.2 * winW, 20, 0.6 * winW, imgH);
			
 
				+          // drawText();
			
 
				+          // ctx.save();
			
 
				+          ctx.fillStyle = "#fff";
			
 
				+          ctx.font = 20 + "px Helvetica";
			
 
				+          ctx.textBaseline = "hanging";
			
 
				+          ctx.textAlign = "center";
			
 
				+          ctx.moveTo(10, 10);
			
 
				+          ctx.fillText(
			
 
				+            "我只用了" + (180 - that.dealtime) + "s," + "快来挑战！",
			
 
				+            winW / 2,
			
 
				+            0.1 * winH + imgH
			
 
				+            // 80+imgH
			
 
				+            // 100
			
 
				+          );
			
 
				+          // ctx.restore();
			
 
				+          // drawTip();
			
 
				+
			
 
				+          // ctx.save();
			
 
				+          ctx.fillStyle = "#000";
			
 
				+          ctx.font = 14 + "px Helvetica";
			
 
				+          ctx.textBaseline = "hanging";
			
 
				+          ctx.textAlign = "center";
			
 
				+          ctx.moveTo(-30, 10);
			
 
				+          ctx.fillText("关注下方二维码开始游戏", winW / 2, 0.18 * winH + imgH);
			
 
				+          // ctx.restore();
			
 
				+          // drawCode();
			
 
				+
			
 
				+          var imgCode = new Image();
			
 
				+          imgCode.src = require("../../../assets/images/puzzles/code.jpg");
			
 
				+          imgCode.onload = function () {
			
 
				+            ctx.drawImage(
			
 
				+              imgCode,
			
 
				+              0.35 * winW,
			
 
				+              0.25 * winH + imgH,
			
 
				+              0.3 * winW,
			
 
				+              0.3 * winW
			
 
				+            );
			
 
				+
			
 
				+            // 生成预览图
			
 
				+            var img = new Image();
			
 
				+            img.src = that.convertCanvasToImage(canvas, 1).src;
			
 
				+            img.setAttribute("crossOrigin", "Anonymous");
			
 
				+            img.className = "previewImg";
			
 
				+            img.onload = function () {
			
 
				+              that.canvasUrl = this.src;
			
 
				+              that.startDx = that.startDx - 100;
			
 
				+              that.transformX(that.$refs.wrap, that.startDx + "vw");
			
 
				+            };
			
 
				+          };
			
 
				+        };
			
 
				+      } else {
			
 
				+        alert("浏览器不支持canvas！");
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 生成n维矩阵
			
 
				+    generateMatrix(n, dx, dy) {
			
 
				+      var arr = [],
			
 
				+        index = 0;
			
 
				+      for (var i = 0; i < n; i++) {
			
 
				+        for (var j = 0; j < n; j++) {
			
 
				+          arr.push({ x: j * dx, y: i * dy, index: index });
			
 
				+          index++;
			
 
				+        }
			
 
				+      }
			
 
				+      return arr;
			
 
				+    },
			
 
				+
			
 
				+    shuffle(els, arr) {
			
 
				+      this.upsetArr(arr);
			
 
				+      for (var i = 0, len = els.length; i < len; i++) {
			
 
				+        var el = els[i];
			
 
				+        el.setAttribute("index", i); // 将打乱后的数组索引缓存到元素中
			
 
				+        el.style.transform =
			
 
				+          "translate(" + arr[i].x + "vw," + arr[i].y + "vh" + ")";
			
 
				+      }
			
 
				+    },
			
 
				+    // https://www.xiabingbao.com/post/javascript/js-random-array.html
			
 
				+    upsetArr(arr) {
			
 
				+      //   console.log("arr", JSON.stringify(arr));
			
 
				+      // 方法1:
			
 
				+      return arr.sort(function () {
			
 
				+        return Math.random() > 0.5 ? -1 : 1;
			
 
				+      });
			
 
				+    },
			
 
				+    // 置换数组(对应索引的x,y值进行交换)
			
 
				+    swap(arr, indexA, indexB) {
			
 
				+      // let targetArr = [];
			
 
				+      // arr.map(item => {
			
 
				+      //   if (item.index == indexA || item.index == indexB) {
			
 
				+      //     targetArr.push(item);
			
 
				+      //   }
			
 
				+      // });
			
 
				+      // [targetArr[0].x, targetArr[1].x] = [targetArr[1].x, targetArr[0].x];
			
 
				+      // [targetArr[0].y, targetArr[1].y] = [targetArr[1].y, targetArr[0].y];
			
 
				+
			
 
				+      // return targetArr;
			
 
				+      // var cache = arr[indexA];
			
 
				+      // arr[indexA] = arr[indexB];
			
 
				+      // arr[indexB] = cache;
			
 
				+
			
 
				+      // ES6的解耦交换方式： [arr[index], arr[n]] = [arr[n], arr[index]];
			
 
				+      [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
			
 
				+    },
			
 
				+
			
 
				+    // 校验是否成功方法
			
 
				+    isTestSuccess(arr) {
			
 
				+      return arr.every(function (item, i) {
			
 
				+        return item.index === i;
			
 
				+      });
			
 
				+    },
			
 
				+    // 将canvas转化为图片
			
 
				+    convertCanvasToImage(canvas, quality) {
			
 
				+      var image = new Image();
			
 
				+      image.src = canvas.toDataURL("image/png", quality);
			
 
				+      return image;
			
 
				+    },
			
 
				+
			
 
				+    drawLiquidfill() {
			
 
				+      // 基于准备好的dom，初始化echarts实例
			
 
				+      let hygrometer = echarts.init(document.getElementById("hygrometer"));
			
 
				+      // 使用指定的配置项和数据显示图表
			
 
				+      hygrometer.setOption({
			
 
				+        tooltip: {
			
 
				+          show: true,
			
 
				+        },
			
 
				+
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "puzzle",
			
 
				+            type: "liquidFill",
			
 
				+            radius: "80px",
			
 
				+            data: [0.45],
			
 
				+            direction: "none", //取消移动方向
			
 
				+            amplitude: 0, //波的振幅
			
 
				+            waveAnimation: false, //动画效果
			
 
				+            animationDuration: 0,
			
 
				+            animationDurationUpdate: 0,
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                color: "#ff7900",
			
 
				+                insideColor: "#ff7900",
			
 
				+                textStyle: {
			
 
				+                  fontSize: 20,
			
 
				+                  fontWeight: "bold",
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            backgroundStyle: {
			
 
				+              color: "#fff",
			
 
				+            },
			
 
				+            color: [
			
 
				+              {
			
 
				+                type: "linear",
			
 
				+                x: 0,
			
 
				+                y: 1,
			
 
				+                x2: 0,
			
 
				+                y2: 0,
			
 
				+                colorStops: [
			
 
				+                  {
			
 
				+                    offset: 1,
			
 
				+                    color: ["#ffff00"], // 0% 处的颜色
			
 
				+                  },
			
 
				+                  {
			
 
				+                    offset: 0,
			
 
				+                    color: ["#ffff00"], // 100% 处的颜色
			
 
				+                  },
			
 
				+                ],
			
 
				+                global: false, // 缺省为 false
			
 
				+              },
			
 
				+            ],
			
 
				+            outline: {
			
 
				+              show: true,
			
 
				+              borderDistance: 0,
			
 
				+              itemStyle: {
			
 
				+                borderColor: "#fdd35d",
			
 
				+                borderWidth: 3,
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    document.body.style.backgroundColor = "#39f"; //背景色
			
 
				+    this.drawLiquidfill();
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped>
			
 
				+.wrap {
			
 
				+  display: flex;
			
 
				+  width: 400vw;
			
 
				+  transition: transform 1s cubic-bezier(0.52, 0.37, 0.16, 1.32);
			
 
				+}
			
 
				+
			
 
				+div {
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.btn {
			
 
				+  display: inline-block;
			
 
				+  padding: 10px 60px;
			
 
				+  width: 300px;
			
 
				+  background-color: #06c;
			
 
				+  color: #fff;
			
 
				+  cursor: pointer;
			
 
				+  margin: 40px auto 10px;
			
 
				+}
			
 
				+#back {
			
 
				+  margin-top: 10px;
			
 
				+}
			
 
				+.play-page,
			
 
				+.result-page,
			
 
				+.start-page,
			
 
				+.start-page .title {
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.play-page,
			
 
				+.preview-page,
			
 
				+.result-page,
			
 
				+.start-page {
			
 
				+  position: relative;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.start-page .title {
			
 
				+  line-height: 4em;
			
 
				+  font-size: 24px;
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list {
			
 
				+  width: 90%;
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  margin: 0 auto;
			
 
				+  border: 3px solid;
			
 
				+  justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list .img-wrap {
			
 
				+  margin-bottom: 0;
			
 
				+  width: 45%;
			
 
				+  /* height: 22vh; */
			
 
				+  /* overflow: hidden; */
			
 
				+}
			
 
				+.img-wrap>img{
			
 
				+  width: 100%;
			
 
				+  height: 97px;
			
 
				+}
			
 
				+.start-page .album-list .img-wrap.active {
			
 
				+  /* border: 4px solid #f00; */
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list .img-wrap img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list .img-wrap .file-wrap {
			
 
				+  position: relative;
			
 
				+  height: 100%;
			
 
				+  background-position: center center;
			
 
				+  background-size: 100%;
			
 
				+  background-repeat: no-repeat;
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list .img-wrap .file-wrap::before {
			
 
				+  content: "+";
			
 
				+  position: absolute;
			
 
				+  top: 50%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+  font-size: 60px;
			
 
				+  color: #ccc;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.start-page .album-list .img-wrap .file-wrap input {
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  top: 0;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.start-page-ft {
			
 
				+  position: absolute;
			
 
				+  width: 100%;
			
 
				+  bottom: 20px;
			
 
				+  font-size: 12px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+.start-page-ft a {
			
 
				+  color: #06c;
			
 
				+}
			
 
				+
			
 
				+.play-page {
			
 
				+  background-color: #4e2503;
			
 
				+}
			
 
				+.play-page .deloy {
			
 
				+  padding: 10px 20px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.play-page .play-area {
			
 
				+  position: relative;
			
 
				+  width: 84vw;
			
 
				+  height: 60vh;
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  margin: 20px auto;
			
 
				+  outline: #ccc solid 4px;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area.active {
			
 
				+  outline-color: #1f8b40;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece {
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  top: 0;
			
 
				+  width: 28vw;
			
 
				+  height: 20vh;
			
 
				+  border: 1px solid transparent;
			
 
				+  /* background-image: url(../assets/images/caixushen.jpg); */
			
 
				+  background-repeat: no-repeat;
			
 
				+  background-size: 84vw 60vh;
			
 
				+  transition: transform 0.6s ease-in-out;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece.active {
			
 
				+  border: 3px solid red;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-0 {
			
 
				+  background-position: 0 0;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-1 {
			
 
				+  background-position: -28vw 0;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-2 {
			
 
				+  background-position: -56vw 0;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-3 {
			
 
				+  background-position: 0 -20vh;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-4 {
			
 
				+  background-position: -28vw -20vh;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-5 {
			
 
				+  background-position: -56vw -20vh;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-6 {
			
 
				+  background-position: 0 -40vh;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-7 {
			
 
				+  background-position: -28vw -40vh;
			
 
				+}
			
 
				+
			
 
				+.play-page .play-area .piece-8 {
			
 
				+  background-position: -56vw -40vh;
			
 
				+}
			
 
				+
			
 
				+.result-page {
			
 
				+  padding-left: 20px;
			
 
				+  padding-right: 20px;
			
 
				+  background-color: #2b2929;
			
 
				+}
			
 
				+
			
 
				+.result-page .success-text {
			
 
				+  padding-top: 160px;
			
 
				+  padding-bottom: 20px;
			
 
				+  font-size: 36px;
			
 
				+  color: #e4d721;
			
 
				+  font-weight: 700;
			
 
				+}
			
 
				+
			
 
				+.result-page .total-time {
			
 
				+  display: block;
			
 
				+  margin-bottom: 30px;
			
 
				+  color: #fff;
			
 
				+  font-size: 24px;
			
 
				+}
			
 
				+.last-page {
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.last-page img {
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  top: 0;
			
 
				+}
			
 
				+
			
 
				+.play-again {
			
 
				+  position: absolute;
			
 
				+  bottom: 10px;
			
 
				+  left: 5px;
			
 
				+  z-index: 10;
			
 
				+  width: 48%;
			
 
				+}
			
 
				+
			
 
				+.share-other {
			
 
				+  position: absolute;
			
 
				+  bottom: 10px;
			
 
				+  right: 5px;
			
 
				+  z-index: 10;
			
 
				+  width: 48%;
			
 
				+}
			
 
				+
			
 
				+.share-bg {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  width: 0;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background: url("../../../assets/images/puzzles/share.png") no-repeat
			
 
				+    rgba(0, 0, 0, 0.8);
			
 
				+  background-position: top right;
			
 
				+  z-index: 11;
			
 
				+  /* background-size:75%; */
			
 
				+}
			
 
				+
			
 
				+.footed {
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  bottom: 0;
			
 
				+  z-index: -1;
			
 
				+}
			
 
				+.footed > .footed-img {
			
 
				+  width: 100%;
			
 
				+  height: 76px;
			
 
				+  position: fixed;
			
 
				+  bottom: 0;
			
 
				+}
			
 
				+.footed-img > img {
			
 
				+  width: 100%;
			
 
				+  height: 76px;
			
 
				+}
			
 
				+.headers {
			
 
				+  width: 90%;
			
 
				+  margin: 2% auto;
			
 
				+  position: relative;
			
 
				+}
			
 
				+.headers > img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+.headers-left {
			
 
				+  width: 20%;
			
 
				+  text-align: center;
			
 
				+  position: absolute;
			
 
				+  left: 4%;
			
 
				+  top: 37%;
			
 
				+  font-size: 30px;
			
 
				+  color: #fbd91f;
			
 
				+}
			
 
				+.headers-right {
			
 
				+  width: 20%;
			
 
				+  text-align: center;
			
 
				+  position: absolute;
			
 
				+  left: 76%;
			
 
				+  top: 37%;
			
 
				+  font-size: 30px;
			
 
				+  color: #fbd91f;
			
 
				+}
			
 
				+.header-content {
			
 
				+  position: absolute;
			
 
				+  left: 35%;
			
 
				+  top: 27%;
			
 
				+}
			
 
				+.contents-list-item-button {
			
 
				+  width: 65%;
			
 
				+  text-align: center;
			
 
				+  margin: 3% auto;
			
 
				+}
			
 
				+.contents-list-item-button > img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+.contents-list-item-button > p {
			
 
				+  margin-top: -31%;
			
 
				+  font-size: 13px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/ningdongyunying/puzzle/puzzle.vue
+++ b/src/views/ningdongyunying/puzzle/puzzle.vue
@@ -0,0 +1,254 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <div v-if="show">
			
 
				+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
			
 
				+    </div>
			
 
				+    <div class="kj">
			
 
				+      <div class="kj-position">
			
 
				+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
			
 
				+        <p class="mk">梅花井煤矿</p>
			
 
				+      </div>
			
 
				+      <div class="kj-background " id="kj-backgrounds">
			
 
				+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
			
 
				+        <div class="kj-content">
			
 
				+          <p>专题标题专题标题专题标题专题标题专题标题</p>
			
 
				+          <div class="kj-content-item">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
			
 
				+              alt=""
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="kj-progress">
			
 
				+          <div class="kj-progress-item">
			
 
				+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
			
 
				+          </div>
			
 
				+          <span>50%</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="kj-background">
			
 
				+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
			
 
				+        <div class="kj-content">
			
 
				+          <p>专题标题专题标题专题标题专题标题专题标题</p>
			
 
				+          <div class="kj-content-item">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
			
 
				+              alt=""
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="kj-progress">
			
 
				+          <div class="kj-progress-item">
			
 
				+            <van-progress :percentage="50" color="#00fff8" :show-pivot="false"/>
			
 
				+          </div>
			
 
				+          <span>50%</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="kj">
			
 
				+      <div class="kj-position">
			
 
				+        <img src="../../../assets/images/ningdongyunying/puzzle/单位.png" />
			
 
				+        <p class="mk">单位</p>
			
 
				+      </div>
			
 
				+      <div class="kj-background1 " id="kj-backgrounds1">
			
 
				+        <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
			
 
				+        <div class="kj-content">
			
 
				+          <p>专题标题专题标题专题标题专题标题专题标题</p>
			
 
				+          <div class="kj-content-item">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
			
 
				+              alt=""
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="kj-progress">
			
 
				+          <div class="kj-progress-item">
			
 
				+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
			
 
				+          </div>
			
 
				+          <span>50%</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="kj-background1 " >
			
 
				+        <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
			
 
				+        <div class="kj-content">
			
 
				+          <p>专题标题专题标题专题标题专题标题专题标题</p>
			
 
				+          <div class="kj-content-item">
			
 
				+            <img
			
 
				+              src="../../../assets/images/ningdongyunying/puzzle/前往.png"
			
 
				+              alt=""
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="kj-progress">
			
 
				+          <div class="kj-progress-item">
			
 
				+            <van-progress :percentage="50" color="#fea201" :show-pivot="false"/>
			
 
				+          </div>
			
 
				+          <span>50%</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import {} from "../../../assets/images/ningdongyunying/puzzle/单位.png";
			
 
				+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      show: true,
			
 
				+      token: sessionStorage.getItem("mytoken")
			
 
				+        ? sessionStorage.getItem("mytoken")
			
 
				+        : "", //token值保存在本地，有的话取值，没有为空
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    document.body.style.backgroundColor = "#39f"; //背景色
			
 
				+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
			
 
				+    this.token = `Bearer ${this.gettoken}`; //获取token值
			
 
				+    sessionStorage.setItem("mytoken", this.token); //存入token值
			
 
				+    // this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
			
 
				+  },
			
 
				+  methods: {
			
 
				+    //tabber返回按钮
			
 
				+    onClickLeft() {
			
 
				+      window.history.back();
			
 
				+    },
			
 
				+
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.van-nav-bar {
			
 
				+  background: #39f;
			
 
				+}
			
 
				+>>> .van-nav-bar__title {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+>>> .van-nav-bar .van-icon {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+[class*="van-hairline"]:after {
			
 
				+  border: none;
			
 
				+}
			
 
				+.kj {
			
 
				+  width: 90%;
			
 
				+  height: 250px;
			
 
				+  margin: 5% auto 10%;
			
 
				+  background: #fff;
			
 
				+  border: 2px solid #242290;
			
 
				+  border-radius: 5px;
			
 
				+  position: relative;
			
 
				+}
			
 
				+.kj > .kj-position {
			
 
				+  width: 40%;
			
 
				+  height: 45px;
			
 
				+  position: absolute;
			
 
				+  top: -10%;
			
 
				+  left: 8%;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kj-position > img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+.kj-position > .mk {
			
 
				+  font-size: 20px;
			
 
				+  color: #06a3f4;
			
 
				+  font-weight: 600;
			
 
				+  text-shadow: 0px 2px 0px #fff;
			
 
				+  margin-top: -26%;
			
 
				+}
			
 
				+#kj-backgrounds{
			
 
				+    margin-top: 9%;
			
 
				+}
			
 
				+.kj-background {
			
 
				+  width: 95%;
			
 
				+  height: 95px;
			
 
				+  background: url("../../../assets/images/ningdongyunying/puzzle/蓝框.png");
			
 
				+  background-size: cover;
			
 
				+  margin: 5% auto ;
			
 
				+  border: 1px solid transparent;
			
 
				+}
			
 
				+.kj-background-header {
			
 
				+  width: 54%;
			
 
				+  height: 19px;
			
 
				+  background: url("../../../assets/images/ningdongyunying/puzzle/限时黄.png");
			
 
				+  background-size: cover;
			
 
				+  margin-top: 3%;
			
 
				+  margin-left: 3%;
			
 
				+  font-size: 10px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kj-content {
			
 
				+  width: 95%;
			
 
				+  height: 40px;
			
 
				+  display: flex;
			
 
				+  justify-content: left;
			
 
				+  margin-left: 3%;
			
 
				+}
			
 
				+.kj-content > p {
			
 
				+  width: 85%;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.kj-content > .kj-content-item {
			
 
				+  width: 18%;
			
 
				+  padding-left: 2%;
			
 
				+}
			
 
				+.kj-content-item > img {
			
 
				+  width: 40px;
			
 
				+}
			
 
				+.kj-content-size {
			
 
				+  font-size: 30px;
			
 
				+}
			
 
				+.kj-progress {
			
 
				+  width: 95%;
			
 
				+  display: flex;
			
 
				+  justify-content: left;
			
 
				+  margin-left: 3%;
			
 
				+}
			
 
				+.kj-progress .kj-progress-item {
			
 
				+  width: 84%;
			
 
				+  margin-top: 3%;
			
 
				+}
			
 
				+.kj-progress > span {
			
 
				+  font-size: 10px;
			
 
				+  margin-top: 1%;
			
 
				+  margin-left: 2%;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.kj-background-header1 {
			
 
				+  width: 54%;
			
 
				+  height: 19px;
			
 
				+  background: url("../../../assets/images/ningdongyunying/puzzle/限时灰.png");
			
 
				+  background-size: cover;
			
 
				+  margin-top: 3%;
			
 
				+  margin-left: 3%;
			
 
				+  font-size: 10px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+#kj-backgrounds1{
			
 
				+    margin-top: 9%;
			
 
				+}
			
 
				+.kj-background1 {
			
 
				+  width: 95%;
			
 
				+  height: 95px;
			
 
				+  background: url("../../../assets/images/ningdongyunying/puzzle/黄框.png");
			
 
				+  background-size: cover;
			
 
				+  margin: 5% auto ;
			
 
				+  border: 1px solid transparent;
			
 
				+}
			
 
				+.kj-background1>.kj-background-header{
			
 
				+  width: 54%;
			
 
				+  height: 19px;
			
 
				+  background: url("../../../assets/images/ningdongyunying/puzzle/限时蓝.png");
			
 
				+  background-size: cover;
			
 
				+  margin-top: 3%;
			
 
				+  margin-left: 3%;
			
 
				+  font-size: 10px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kj-background1>.kj-content > p{
			
 
				+  color: black;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/xixuanzhongxin/leader-mailbox/leader-home.vue
+++ b/src/views/xixuanzhongxin/leader-mailbox/leader-home.vue
@@ -74,6 +74,7 @@ export default {
 
				           }
			
 
				         });
			
 
				     },
			
 
				+    
			
 
				     //我的提交
			
 
				     leader_home_list3() {
			
 
				       this.$router.push(
			
@@ -90,7 +91,7 @@ export default {
 
				     this.gettoken =getAllUrlParams(window.location.href).token;
			
 
				     this.token = `Bearer ${this.gettoken}`; //获取token值
			
 
				     sessionStorage.setItem("mytoken", this.token); //存入token值
			
 
				-    this.show = Boolean(getAllUrlParams(window.location.href).tabber); //获取tabber
			
 
				+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
			
 
				   },
			
 
				 };
			
 
				 </script>
			
--- a/src/views/zaoquan/kuangjingshui/kuangjingshui.vue
+++ b/src/views/zaoquan/kuangjingshui/kuangjingshui.vue
@@ -0,0 +1,326 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <div v-if="show">
			
 
				+      <van-nav-bar title="矿井水处理" left-arrow @click-left="onClickLeft" />
			
 
				+    </div>
			
 
				+    <div class="kjs">
			
 
				+      <div class="kjs-header">
			
 
				+        <img
			
 
				+          src="../../../assets/images/zaoquan/kuangjingshui/头部.png"
			
 
				+          alt=""
			
 
				+        />
			
 
				+      </div>
			
 
				+      <div class="kjs-header-item">
			
 
				+        <h2>矿井水处理系统</h2>
			
 
				+      </div>
			
 
				+      <div class="kjs-header-item1">
			
 
				+        <p>{{ time | parsetime }}</p>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="content">
			
 
				+      <div class="kjs-content1">
			
 
				+        <div class="kjs-content1-header">
			
 
				+          <img
			
 
				+            src="../../../assets/images/zaoquan/kuangjingshui/高密沉淀.png"
			
 
				+          />
			
 
				+          <p>高密沉淀</p>
			
 
				+        </div>
			
 
				+        <div>
			
 
				+          <div>
			
 
				+            <div class="kjs-content1-content">
			
 
				+              <div class="kjs-content1-color"></div>
			
 
				+              <p>矸石山调节池液位</p>
			
 
				+            </div>
			
 
				+            <div class="kjs-content1-content1">
			
 
				+              <p>矸石山调节池A</p>
			
 
				+              <p class="kjs-content1-content1-p">{{ gaoA }}</p>
			
 
				+              <span>m</span>
			
 
				+            </div>
			
 
				+            <div class="kjs-content1-content1">
			
 
				+              <p>矸石山调节池B</p>
			
 
				+              <p class="kjs-content1-content1-p">{{ gaoB }}</p>
			
 
				+              <span>m</span>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <div>
			
 
				+            <div class="kjs-content1-content">
			
 
				+              <div class="kjs-content1-color"></div>
			
 
				+              <p>外排水池液位</p>
			
 
				+            </div>
			
 
				+            <div class="kjs-content1-content1">
			
 
				+              <p>外排水池A液位</p>
			
 
				+              <p class="kjs-content1-content1-p">{{ waiA }}</p>
			
 
				+              <span>m</span>
			
 
				+            </div>
			
 
				+            <div class="kjs-content1-content1">
			
 
				+              <p>外排水池B液位</p>
			
 
				+              <p class="kjs-content1-content1-p">{{ waiB }}</p>
			
 
				+              <span>m</span>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="kjs-footer"></div>
			
 
				+      </div>
			
 
				+      <div class="kjs-content1">
			
 
				+        <div class="kjs-content1-header">
			
 
				+          <img src="../../../assets/images/zaoquan/kuangjingshui/快滤池.png" />
			
 
				+          <p>快滤池</p>
			
 
				+        </div>
			
 
				+        <div>
			
 
				+          <div class="kjs-content1-content2">
			
 
				+            <p>滤池出水流量</p>
			
 
				+            <div>
			
 
				+              <p class="kjs-content1-content1-p">{{ lvA }}</p>
			
 
				+            </div>
			
 
				+            <span>m3/h</span>
			
 
				+          </div>
			
 
				+          <div class="kjs-content1-content2">
			
 
				+            <p>滤池出水流量累积</p>
			
 
				+            <div>
			
 
				+              <p class="kjs-content1-content1-p">{{ lvB }}</p>
			
 
				+            </div>
			
 
				+            <span>m3</span>
			
 
				+          </div>
			
 
				+          <div class="kjs-content1-content2">
			
 
				+            <p>矿井水进水瞬时流量</p>
			
 
				+            <div>
			
 
				+              <p class="kjs-content1-content1-p">{{ kuangA }}</p>
			
 
				+            </div>
			
 
				+            <span>m3/h</span>
			
 
				+          </div>
			
 
				+          <div class="kjs-content1-content2">
			
 
				+            <p>矿井水进水流量累积</p>
			
 
				+            <div>
			
 
				+              <p class="kjs-content1-content1-p">{{ kuangB }}</p>
			
 
				+            </div>
			
 
				+            <span>m3</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+//时间戳
			
 
				+var getTime = function () {
			
 
				+  var date = new Date();
			
 
				+  var year = date.getFullYear();
			
 
				+  var month =
			
 
				+    date.getMonth() + 1 < 10
			
 
				+      ? "0" + (date.getMonth() + 1)
			
 
				+      : date.getMonth() + 1;
			
 
				+  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			
 
				+  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			
 
				+  var minutes =
			
 
				+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			
 
				+  var seconds =
			
 
				+    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			
 
				+  var week = date.getDay();
			
 
				+  var weeks = ["日", "一", "二", "三", "四", "五", "六"];
			
 
				+  var getWeek = "星期" + weeks[week];
			
 
				+  return (
			
 
				+    year +
			
 
				+    "年" +
			
 
				+    month +
			
 
				+    "月" +
			
 
				+    day +
			
 
				+    "日" +
			
 
				+    hour +
			
 
				+    ":" +
			
 
				+    minutes +
			
 
				+    ":" +
			
 
				+    seconds +
			
 
				+    getWeek
			
 
				+  );
			
 
				+};
			
 
				+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      time: "", //时间戳时间
			
 
				+      token: sessionStorage.getItem("mytoken")
			
 
				+        ? sessionStorage.getItem("mytoken")
			
 
				+        : "", //token值保存在本地，有的话取值，没有为空
			
 
				+      show: false, //tabber是否显示
			
 
				+      info: "zaoquan",
			
 
				+      gaoA: [],
			
 
				+      gaoB: [],
			
 
				+      waiA: [],
			
 
				+      waiB: [],
			
 
				+      lvA: [],
			
 
				+      lvB: [],
			
 
				+      kuangA: [],
			
 
				+      kuangB: [],
			
 
				+    };
			
 
				+  },
			
 
				+  filters: {
			
 
				+    parsetime: getTime, //过滤动态显示时间
			
 
				+  },
			
 
				+  methods: {
			
 
				+    refreshTime() {
			
 
				+      var newtime = getTime();
			
 
				+      this.time = newtime;
			
 
				+    },
			
 
				+    //tabber返回按钮
			
 
				+    onClickLeft() {
			
 
				+      window.history.back();
			
 
				+    },
			
 
				+    getkjsitem() {
			
 
				+      this.$http
			
 
				+        .post(
			
 
				+          "http://nmjt.nxjiewei.com:8011/api/automate/mine_water/get_list",
			
 
				+          {
			
 
				+            mine_id: this.info,
			
 
				+          }
			
 
				+        )
			
 
				+        .then((res) => {
			
 
				+          this.waiA = res.data.content.data[0].point_value.toFixed(2);
			
 
				+          this.waiB = res.data.content.data[1].point_value.toFixed(2);
			
 
				+          this.lvA = res.data.content.data[2].point_value.toFixed(2);
			
 
				+          this.lvB = res.data.content.data[3].point_value;
			
 
				+          this.kuangA = res.data.content.data[4].point_value.toFixed(2);
			
 
				+          this.kuangB = res.data.content.data[5].point_value;
			
 
				+          this.gaoA = res.data.content.data[6].point_value
			
 
				+            ? res.data.content.data[6].point_value
			
 
				+            : "暂无数据";
			
 
				+          this.gaoB = res.data.content.data[7].point_value
			
 
				+            ? res.data.content.data[7].point_value
			
 
				+            : "暂无数据";
			
 
				+        });
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    document.body.style.backgroundColor = "#39f"; //背景色
			
 
				+    this.timer = setInterval(this.refreshTime, 1000); //每隔一秒更新时间
			
 
				+    this.infos = setInterval(this.getkjsitem, 3000); //每隔3秒更新数据
			
 
				+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
			
 
				+    this.token = `Bearer ${this.gettoken}`; //获取token值
			
 
				+    sessionStorage.setItem("mytoken", this.token); //存入token值
			
 
				+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
			
 
				+    this.getkjsitem();
			
 
				+  },
			
 
				+  beforeDestroy() {
			
 
				+    clearInterval(this.timer); //销毁阶段清除定时器
			
 
				+    clearInterval(this.infos); //销毁阶段清除定时器
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.van-nav-bar {
			
 
				+  background: #39f;
			
 
				+}
			
 
				+>>> .van-nav-bar__title {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+>>> .van-nav-bar .van-icon {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+[class*="van-hairline"]:after {
			
 
				+  border: none;
			
 
				+}
			
 
				+.kjs {
			
 
				+  width: 100%;
			
 
				+  height: 180px;
			
 
				+}
			
 
				+.kjs-header {
			
 
				+  width: 100%;
			
 
				+  height: 80px;
			
 
				+  z-index: -1;
			
 
				+}
			
 
				+.kjs-header > img {
			
 
				+  width: 100%;
			
 
				+  height: 180px;
			
 
				+}
			
 
				+.kjs-header-item {
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kjs-header-item > h2 {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.kjs-header-item1 > p {
			
 
				+  padding-left: 35%;
			
 
				+  padding-top: 8%;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.kjs-content1 {
			
 
				+  width: 95%;
			
 
				+  margin: 3% auto;
			
 
				+  background: #fff;
			
 
				+  border-radius: 10px;
			
 
				+}
			
 
				+.kjs-content1-header {
			
 
				+  text-align: center;
			
 
				+  border-bottom: 1px solid #f0f0f0;
			
 
				+  width: 95%;
			
 
				+  padding-bottom: 5px;
			
 
				+  margin: 0 auto;
			
 
				+  position: relative;
			
 
				+}
			
 
				+.kjs-content1-header > img {
			
 
				+  width: 40px;
			
 
				+  height: 40px;
			
 
				+  position: absolute;
			
 
				+  top: 9%;
			
 
				+  left: 27%;
			
 
				+}
			
 
				+.kjs-content1-header > p {
			
 
				+  line-height: 48px;
			
 
				+  margin-left: 5%;
			
 
				+}
			
 
				+.kjs-content1-content {
			
 
				+  display: flex;
			
 
				+  justify-content: left;
			
 
				+  margin-top: 4%;
			
 
				+}
			
 
				+.kjs-content1-color {
			
 
				+  width: 4px;
			
 
				+  height: 30px;
			
 
				+  background: #39f;
			
 
				+  margin-left: 2%;
			
 
				+}
			
 
				+.kjs-content1-content > p {
			
 
				+  line-height: 30px;
			
 
				+  margin-left: 2%;
			
 
				+}
			
 
				+.kjs-content1-content1 {
			
 
				+  display: flex;
			
 
				+  justify-content: space-around;
			
 
				+  border-bottom: 1px solid #f0f0f0;
			
 
				+  width: 95%;
			
 
				+  padding-bottom: 4%;
			
 
				+  margin: 5% auto 0;
			
 
				+}
			
 
				+.kjs-content1-content1-p {
			
 
				+  width: 90px;
			
 
				+  background: #8adaff;
			
 
				+  text-align: center;
			
 
				+  line-height: 21px;
			
 
				+}
			
 
				+.kjs-content1-content2 {
			
 
				+  display: flex;
			
 
				+  justify-content: space-around;
			
 
				+  border-bottom: 1px solid #f0f0f0;
			
 
				+  width: 95%;
			
 
				+  padding-bottom: 4%;
			
 
				+  margin: 5% auto 0;
			
 
				+}
			
 
				+.kjs-content1-content2 > p {
			
 
				+  width: 48%;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kjs-content1-content2 > div {
			
 
				+  width: 32%;
			
 
				+}
			
 
				+.kjs-content1-content2 > div > p {
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+.kjs-content1-content2 > span {
			
 
				+  width: 20%;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kjs-footer {
			
 
				+  height: 20px;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/zaoquan/tongfen/tongfen.vue
+++ b/src/views/zaoquan/tongfen/tongfen.vue
@@ -0,0 +1,19 @@
 
				+<template>
			
 
				+    <div>
			
 
				+        <Header></Header>
			
 
				+        <h1>通风</h1>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    import Header from "../../../components/Header/Header.vue"
			
 
				+    export default {
			
 
				+        components:{
			
 
				+            Header
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/yarn.lock
+++ b/yarn.lock
@@ -2910,6 +2910,11 @@ dashdash@^1.12.0:
 
				   dependencies:
			
 
				     assert-plus "^1.0.0"
			
 
				 
			
 
				+dayjs@^1.10.6:
			
 
				+  version "1.10.6"
			
 
				+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
			
 
				+  integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==
			
 
				+
			
 
				 de-indent@^1.0.2:
			
 
				   version "1.0.2"
			
 
				   resolved "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
			
@@ -3199,6 +3204,19 @@ ecc-jsbn@~0.1.1:
 
				     jsbn "~0.1.0"
			
 
				     safer-buffer "^2.1.0"
			
 
				 
			
 
				+echarts-liquidfill@^3.0.0:
			
 
				+  version "3.0.0"
			
 
				+  resolved "https://registry.yarnpkg.com/echarts-liquidfill/-/echarts-liquidfill-3.0.0.tgz#1d41e6cd4016281b525f2f7b5be7879deffa821d"
			
 
				+  integrity sha512-asBu62Zxpod9ZRYHweBoBvp7e+XtQbQoha19aTEJf2UptJJ2Bppcx8TdwQZnTjPM9s/yYD6Tk4/qcRqZ6s8HZA==
			
 
				+
			
 
				+echarts@^5.1.2:
			
 
				+  version "5.1.2"
			
 
				+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
			
 
				+  integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
			
 
				+  dependencies:
			
 
				+    tslib "2.0.3"
			
 
				+    zrender "5.1.1"
			
 
				+
			
 
				 ee-first@1.1.1:
			
 
				   version "1.1.1"
			
 
				   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
			
@@ -7315,6 +7333,11 @@ ts-pnp@^1.1.6:
 
				   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
			
 
				   integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
			
 
				 
			
 
				+tslib@2.0.3:
			
 
				+  version "2.0.3"
			
 
				+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
			
 
				+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
			
 
				+
			
 
				 tty-browserify@0.0.0:
			
 
				   version "0.0.0"
			
 
				   resolved "https://registry.nlark.com/tty-browserify/download/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
			
@@ -7661,6 +7684,11 @@ vuex@^3.4.0:
 
				   resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
			
 
				   integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
			
 
				 
			
 
				+vusui-layer@^1.0.0:
			
 
				+  version "1.0.0"
			
 
				+  resolved "https://registry.yarnpkg.com/vusui-layer/-/vusui-layer-1.0.0.tgz#62b7d71bbcd6bdf30c94d16922b44d753dd96940"
			
 
				+  integrity sha512-+qFJoF9Ug5bjeWXthtpZi7Z0zJDq/qyxWIIioOGyLun6TVxqJyzSSV1ghyiK5wfZep75sC+yXsvNr8rFpwR4xA==
			
 
				+
			
 
				 watchpack-chokidar2@^2.0.1:
			
 
				   version "2.0.1"
			
 
				   resolved "https://registry.nlark.com/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
			
@@ -7983,3 +8011,10 @@ yargs@^16.0.0:
 
				     string-width "^4.2.0"
			
 
				     y18n "^5.0.5"
			
 
				     yargs-parser "^20.2.2"
			
 
				+
			
 
				+zrender@5.1.1:
			
 
				+  version "5.1.1"
			
 
				+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
			
 
				+  integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
			
 
				+  dependencies:
			
 
				+    tslib "2.0.3"