背包页

src/config.js

@@ -16,14 +16,17 @@ export default {
         {
           name: '文化溯源',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '画里乡村',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '水口园林',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
       ]
     },
@@ -43,14 +46,17 @@ export default {
         {
           name: '认识牌坊',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
         {
           name: '牌坊形制',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
         {
           name: '牌坊构造',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
       ]
     },
@@ -70,14 +76,17 @@ export default {
         {
           name: '认识祠堂',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '祠堂的建筑艺术 ①',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '祠堂的建筑艺术 ②',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
       ]
     },
@@ -97,14 +106,17 @@ export default {
         {
           name: '认识民居',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
         {
           name: '民居的营造 ①',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
         {
           name: '民居的营造 ②',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
       ]
     }, {
@@ -123,14 +135,17 @@ export default {
         {
           name: '榫卯技艺',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '雕刻艺术 ①',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
         {
           name: '雕刻艺术 ②',
           lionGender: 'female',
+          jagsawNumber: 3,
         },
       ]
     }, {
@@ -149,6 +164,7 @@ export default {
         {
           name: '其他建筑类型鉴赏',
           lionGender: 'male',
+          jagsawNumber: 3,
         },
       ]
     },

src/temp.js

@@ -0,0 +1,69 @@
+<div
+class="scene"
+style="width: calc(467 / 1080 * 100vh); height: calc(204 / 1080 * 100vh); top: calc(420 / 1080 * 100vh); left: calc(40 / 1080 * 100vh);"
+>
+<img
+  class=""
+  src="@/assets/images/bg-6.jpg"
+  alt=""
+  draggable="false"
+>
+<div class="text-wrap">
+  <span>拾遗 （已完成）</span>
+  <div class="bottom-right">
+    <img
+      class="fraction"
+      src=""
+      alt=""
+      draggable="false"
+    >
+
+  </div>
+</div>
+</div>
+<div
+class="scene"
+style="width: calc(234 / 1080 * 100vh); height: calc(186 / 1080 * 100vh); top: calc(634 / 1080 * 100vh); left: calc(40 / 1080 * 100vh);"
+>
+<img
+  class=""
+  src="@/assets/images/bg-4.jpg"
+  alt=""
+  draggable="false"
+>
+<div class="text-wrap">
+  <span>民居 （已完成）</span>
+  <div class="bottom-right">
+    <img
+      class="fraction"
+      src=""
+      alt=""
+      draggable="false"
+    >
+
+  </div>
+</div>
+</div>
+<div
+class="scene"
+style="width: calc(223 / 1080 * 100vh); height: calc(186 / 1080 * 100vh); top: calc(634 / 1080 * 100vh); left: calc(283 / 1080 * 100vh);"
+>
+<img
+  class=""
+  src="@/assets/images/bg-2.jpg"
+  alt=""
+  draggable="false"
+>
+<div class="text-wrap">
+  <span>牌坊 （已完成）</span>
+  <div class="bottom-right">
+    <img
+      class="fraction"
+      src=""
+      alt=""
+      draggable="false"
+    >
+
+  </div>
+</div>
+</div>

src/views/Bag.vue

@@ -1,25 +1,119 @@
 <template>
   <div
-    class="home"
+    class="bag"
   >
-    {{ $env.BASE_URL }}
+    <div class="left-wrap">
+      <div
+        v-for="(item, idx) in sceneList"
+        :key="idx"
+        class="scene"
+        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
+        :style="{
+          width: `calc(${item.width} / 1080 * 100vh)`,
+          height: `calc(${item.height} / 1080 * 100vh)`,
+          top: `calc(${item.top} / 1080 * 100vh)`,
+          left: `calc(${item.left} / 1080 * 100vh)`,
+        }"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
+          alt=""
+          draggable="false"
+        >
+        <div class="text-wrap">
+          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }} {{ gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? '（已完成）' : '(未完成)' }}</span>
+          <div class="bottom-right">
+            <img
+              class="fraction"
+              :src="require(`@/assets/images/jagsaw-shade-${gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'}.png`)"
+              alt=""
+              draggable="false"
+            >
+            &ensp;× {{ sceneTree[item.idxInConfig].children.reduce((a, b) => {
+              return {
+                jagsawNumber: a.jagsawNumber + b.jagsawNumber
+              }
+            }).jagsawNumber }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right-wrap">
+      <img
+        src="@/assets/images/title-game-rule.png"
+        alt=""
+        class="title"
+      >
+      <p>每完成一节课，即可获得一块碎片</p>
+      <p>收集碎片完成拼图游戏，解锁章节图纸</p>
+      <p>解锁所有章节图纸，建设古镇</p>
+      <button class="build" />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HomeView',
+  name: 'BagView',
   data() {
     return {
+      sceneList: [
+        {
+          idxInConfig: 0,
+          width: 586,
+          height: 360,
+          top: 50,
+          left: 40,
+        },
+        {
+          idxInConfig: 4,
+          width: 324,
+          height: 360,
+          top: 50,
+          left: 637,
+        },
+        {
+          idxInConfig: 5,
+          width: 467,
+          height: 204,
+          top: 420,
+          left: 40,
+        },
+        {
+          idxInConfig: 3,
+          width: 234,
+          height: 186,
+          top: 634,
+          left: 40,
+        },
+        {
+          idxInConfig: 1,
+          width: 223,
+          height: 186,
+          top: 634,
+          left: 283,
+        },
+        {
+          idxInConfig: 2,
+          width: 444,
+          height: 400,
+          top: 420,
+          left: 516,
+        },
+
+      ]
     }
   },
   computed: {
     ...mapState([
+      'gameProgress',
     ]),
+    sceneTree() {
+      return config.sceneTree
+    },
   },
   mounted() {
-    console.log(process.env)
-    this.$mitt.emit('test', { msg: 'home mounted' })
   },
   unmounted() {
   },
@@ -31,11 +125,113 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home {
+.bag {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  background-image: url(@/assets/images/bg-game.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  >.left-wrap {
+    position: relative;
+    background-image: url(@/assets/images/bg-bag-page-frame.jpg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 92.59vh;
+    height: 80.56vh;
+    padding: calc(50 / 1080 * 100vh) calc(40 / 1080 * 100vh);
+    flex: 0 0 auto;
+    >.scene {
+      position: absolute;
+      cursor: pointer;
+      >img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      >.text-wrap {
+        position: absolute;
+        left: 0;
+        background: rgba(255,255,255,0.7);
+        bottom: 0;
+        width: 100%;
+        height: calc(40 / 1080 * 100vh);
+        padding-left: calc(9 / 1080 * 100vh);
+        padding-right: calc(9 / 1080 * 100vh);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: calc(16 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        >span {
+        }
+        >.bottom-right {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          >img.fraction {
+          }
+        }
+      }
+    }
+    .scene.unlock {
+      >.text-wrap {
+        color: #30B07A;
+      }
+    }
+    .scene.lock {
+      >.text-wrap {
+        color: #C26827;
+      }
+    }
+  }
+  >.right-wrap {
+    width: 51.39vh;
+    height: 100vh;
+    counter-reset: game-rule;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    >img.title {
+      width: calc(311 / 1080 * 100vh);
+      height: calc(74 / 1080 * 100vh);
+      margin-bottom: calc(60 / 1080 * 100vh);
+    }
+    >p {
+      margin-bottom: 1em;
+      font-size: calc(30 / 1080 * 100vh);
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #C26827;
+      counter-increment: game-rule;
+      &::before {
+        display: inline-block;
+        content: counter(game-rule) '.' ' ';
+        white-space: pre;
+      }
+    }
+    >button.build {
+      margin-top: calc(60 / 1080 * 100vh);
+      background-image: url(@/assets/images/btn-build-town.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(323 / 1080 * 100vh);
+      height: calc(120 / 1080 * 100vh);
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }
 </style>

src/views/Watch.vue

@@ -42,6 +42,9 @@
         src="@/assets/images/bag.png"
         alt=""
         draggable="false"
+        @click="$router.push({
+          name: 'BagView',
+        })"
       >
     </div>
   </div>
@@ -177,6 +180,7 @@ export default {
       position: relative;
       width: 100%;
       z-index: 2;
+      cursor: pointer;
     }
   }
 }