Merge branch 'master' of http://git.jieweizhineng.com/zzl/kuangshan-project

src/router/index.js

@@ -72,15 +72,6 @@ const routes = [
   },
   //宁东运营部拼图游戏详情
   {
-    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'),
@@ -93,10 +84,14 @@ const routes = [
   {
     path:'/',
 <<<<<<< HEAD
+<<<<<<< HEAD
     redirect:{"name":"tongfeng_xijin"}
 =======
     redirect:{"name":"puzzle-infos"}
 >>>>>>> 92b8cfb605bcdd3ab5813fe21ab53ebc4f66da8f
+=======
+    redirect:{"name":"puzzle"}
+>>>>>>> 4dc4f2de13aeec9d60e608b6522969df45127964
   }
 ]
 

src/views/ningdongyunying/puzzle/puzzle-infos.vue

@@ -1,88 +1,101 @@
 <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 id="apps">
+    <div v-if="shows">
+      <van-nav-bar title="互动学习" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="wrap" ref="wrap">
+      <div class="start-page">
+        <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)"
+          >
+            <div class="img-wrap-imgs">
+              <img :src="item.url" alt="" />
+            </div>
+            <!-- <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="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 class="btn" id="start" @click="startGame(activeClass)">开始游戏</div> -->
+        </div>
+        <div class="footed">
+          <div class="footed-img">
+            <img
+              src="../../../assets/images/ningdongyunying/puzzle/下边云.png"
+            />
+          </div>
+        </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 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="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 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="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 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>
-    <div class="share-bg" v-if="isVisible" @click="isVisible = false" />
   </div>
 </template>
 
@@ -90,7 +103,6 @@
 import * as echarts from "echarts"; //引入echarts
 import "echarts-liquidfill";
 export default {
-  name: "HelloWorld",
   props: {
     msg: String,
   },
@@ -115,7 +127,7 @@ export default {
       imgArr: [
         // { url: require("../assets/images/timg2.jpeg") },
         // { url: require("../assets/images/timg3.jpeg") },
-        // { url: require("../assets/images/timg.jpeg") },
+        { url: require("../../../assets/images/puzzles/timg.jpeg") },
         // { url: require("../assets/images/caixushen.jpg") },
         // { url: require("../assets/images/yang.jpeg") },
         // { url: require("../assets/images/re.jpeg") },
@@ -125,7 +137,7 @@ export default {
         {
           url: require("../../../assets/images/puzzles/2020-10-22-pic47.jpeg"),
         },
-        // { url: require("../assets/images/2020-10-22-pic3.jpeg") },
+        { url: require("../../../assets/images/puzzles/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") },
@@ -139,6 +151,7 @@ export default {
       issuccess: false,
       canvasUrl: "",
       isVisible: false,
+      shows: true,
     };
   },
   methods: {
@@ -223,7 +236,6 @@ export default {
         // 清除样式
         // this.prevEl.className= this.prevEl.className.replace(' active', '');
         this.boxArractivelass = -1;
-
         // 校验是否成功
         if (this.isTestSuccess(this.pool)) {
           // 清除计时器
@@ -447,11 +459,11 @@ export default {
             type: "liquidFill",
             radius: "80px",
             data: [0.45],
-            direction: "none", //取消移动方向
-            amplitude: 0, //波的振幅
-            waveAnimation: false, //动画效果
-            animationDuration: 0,
-            animationDurationUpdate: 0,
+            // direction: "none", //取消移动方向
+            // amplitude: 0, //波的振幅
+            // waveAnimation: false, //动画效果
+            // animationDuration: 0,
+            // animationDurationUpdate: 0,
             label: {
               normal: {
                 color: "#ff7900",
@@ -497,6 +509,10 @@ export default {
         ],
       });
     },
+    //tabber返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
   },
   mounted() {
     document.body.style.backgroundColor = "#39f"; //背景色
@@ -507,6 +523,21 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+#apps{
+  overflow: hidden;
+}
+.van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
 .wrap {
   display: flex;
   width: 400vw;
@@ -524,7 +555,7 @@ div {
   background-color: #06c;
   color: #fff;
   cursor: pointer;
-  margin: 40px auto 10px;
+  margin: 8px auto 10px;
 }
 #back {
   margin-top: 10px;
@@ -541,7 +572,7 @@ div {
 .start-page {
   position: relative;
   width: 100vw;
-  height: 100vh;
+  height: 91vh;
 }
 
 .start-page .title {
@@ -554,17 +585,26 @@ div {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
-  border: 3px solid;
+  border: 5px solid #0938d0;
   justify-content: space-around;
 }
-
+.start-page .album-list::after {
+  content: "";
+  width: 45%;
+}
 .start-page .album-list .img-wrap {
-  margin-bottom: 0;
+  margin-bottom: 5%;
   width: 45%;
+  margin-top: 3%;
   /* height: 22vh; */
   /* overflow: hidden; */
 }
-.img-wrap>img{
+.img-wrap-imgs {
+  border: 4px solid #f6c039;
+  height: 105px;
+  border-radius: 5px;
+}
+.img-wrap-imgs > img {
   width: 100%;
   height: 97px;
 }
@@ -617,7 +657,7 @@ div {
 }
 
 .play-page {
-  background-color: #4e2503;
+  background-color: #39f;
 }
 .play-page .deloy {
   padding: 10px 20px;
@@ -693,7 +733,7 @@ div {
 .result-page {
   padding-left: 20px;
   padding-right: 20px;
-  background-color: #2b2929;
+  background-color: #39f;
 }
 
 .result-page .success-text {

src/views/ningdongyunying/puzzle/puzzle.vue

@@ -12,7 +12,7 @@
         <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
         <div class="kj-content">
           <p>专题标题专题标题专题标题专题标题专题标题</p>
-          <div class="kj-content-item">
+          <div class="kj-content-item" @click="jump">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -30,7 +30,7 @@
         <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
         <div class="kj-content">
           <p>专题标题专题标题专题标题专题标题专题标题</p>
-          <div class="kj-content-item">
+          <div class="kj-content-item" @click="jump">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -54,7 +54,7 @@
         <div class="kj-background-header">有效时间:2021.7.6-2021.7.21</div>
         <div class="kj-content">
           <p>专题标题专题标题专题标题专题标题专题标题</p>
-          <div class="kj-content-item">
+          <div class="kj-content-item" @click="jump">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -72,7 +72,7 @@
         <div class="kj-background-header1">有效时间:2021.7.6-2021.7.21</div>
         <div class="kj-content">
           <p>专题标题专题标题专题标题专题标题专题标题</p>
-          <div class="kj-content-item">
+          <div class="kj-content-item" @click="jump">
             <img
               src="../../../assets/images/ningdongyunying/puzzle/前往.png"
               alt=""
@@ -114,7 +114,9 @@ export default {
     onClickLeft() {
       window.history.back();
     },
-
+    jump(){
+      this.$router.push("/ningdongyunying/puzzle/puzzle-infos")
+    }
   },
 };
 </script>