煞笔玩意儿

src/App.vue

@@ -2,8 +2,9 @@
   <div class="comp-root">
     <router-view />
     <button
+      v-if="$route.name !== 'HomeView'"
       class="back"
-      @click="$router.push({naem: $route.meta.parentRouteName})"
+      @click="$router.go(-1)"
     >
       <img
         class=""
@@ -18,9 +19,6 @@
 <script>
 export default {
   mounted() {
-    this.$mitt.on('test', e => {
-      console.log('test', e)
-    })
   }
 }
 </script>

src/config.js

@@ -1,2 +1,140 @@
 export default {
+  sceneTree: [
+    {
+      name: '桃花源里人家',
+      pos: {
+        x: 540,
+        y: 273,
+      },
+      level2MenuStyle: {
+        paddingTop: '70px',
+        right: '200px',
+        width: '324px',
+        height: '378px',
+      },
+      children: [
+        {
+          name: '文化溯源',
+        },
+        {
+          name: '画里乡村',
+        },
+        {
+          name: '水口园林',
+        },
+      ]
+    },
+    {
+      name: '牌坊',
+      pos: {
+        x: 248,
+        y: 414,
+      },
+      level2MenuStyle: {
+        paddingTop: '70px',
+        right: '200px',
+        width: '324px',
+        height: '378px',
+      },
+      children: [
+        {
+          name: '认识牌坊',
+        },
+        {
+          name: '牌坊形制',
+        },
+        {
+          name: '牌坊构造',
+        },
+      ]
+    },
+    {
+      name: '祠堂',
+      pos: {
+        x: 1247,
+        y: 591,
+      },
+      level2MenuStyle: {
+        paddingTop: '56px',
+        right: '200px',
+        width: '454px',
+        height: '370px',
+      },
+      children: [
+        {
+          name: '认识祠堂',
+        },
+        {
+          name: '祠堂的建筑艺术 ①',
+        },
+        {
+          name: '祠堂的建筑艺术 ②',
+        },
+      ]
+    },
+    {
+      name: '民居',
+      pos: {
+        x: 1389,
+        y: 355,
+      },
+      level2MenuStyle: {
+        paddingTop: '66px',
+        left: '200px',
+        width: '358px',
+        height: '378px',
+      },
+      children: [
+        {
+          name: '认识民居',
+        },
+        {
+          name: '民居的营造 ①',
+        },
+        {
+          name: '民居的营造 ②',
+        },
+      ]
+    }, {
+      name: '匠心独运',
+      pos: {
+        x: 928,
+        y: 657,
+      },
+      level2MenuStyle: {
+        paddingTop: '70px',
+        left: '200px',
+        width: '324px',
+        height: '378px',
+      },
+      children: [
+        {
+          name: '榫卯技艺',
+        },
+        {
+          name: '雕刻艺术 ①',
+        },
+        {
+          name: '雕刻艺术 ②',
+        },
+      ]
+    }, {
+      name: '拾遗',
+      pos: {
+        x: 746,
+        y: 446,
+      },
+      level2MenuStyle: {
+        paddingTop: '80px',
+        left: '200px',
+        width: '438px',
+        height: '174px',
+      },
+      children: [
+        {
+          name: '其他建筑类型鉴赏',
+        },
+      ]
+    },
+  ]
 }

src/router/index.js

@@ -21,65 +21,41 @@ const routes = [
     path: '/l2',
     name: 'Level2',
     component: Level2,
-    meta: {
-      parentRouteName: 'HomeView',
-    }
   },
   {
     path: '/l3',
     name: 'Level3',
     component: Level3,
-    meta: {
-      parentRouteName: 'Level2',
-    }
   },
   {
     path: '/watch',
     name: 'WatchView',
     component: WatchView,
-    meta: {
-      parentRouteName: 'Level3',
-    }
   },
   {
     path: '/learn',
     name: 'LearnView',
     component: LearnView,
-    meta: {
-      parentRouteName: 'Level3',
-    }
   },
   {
     path: '/travel-record',
     name: 'TravelRecord',
     component: TravelRecord,
-    meta: {
-      parentRouteName: 'Level3',
-    }
   },
   {
     path: '/bag',
     name: 'BagView',
     component: BagView,
-    meta: {
-      parentRouteName: 'WatchView',
-    }
   },
   {
     path: '/jigsaw-game',
     name: 'JagsawGame',
     component: JagsawGame,
-    meta: {
-      parentRouteName: 'BagView',
-    }
   },
   {
     path: '/build-town',
     name: 'BuildTown',
     component: BuildTown,
-    meta: {
-      parentRouteName: 'BagView',
-    }
   },
 ]
 

src/views/Home.vue

@@ -46,6 +46,12 @@
         left: labelPosList.value[idx]?.x + 'px' || '-500px',
         bottom: labelPosList.value[idx]?.y + 'px' || '-500px',
       }"
+      @click="$router.push({
+        name: 'Level2',
+        query: {
+          sceneIdx: idx,
+        },
+      })"
     >
       <div
         :style="{
@@ -68,7 +74,7 @@ export default {
     const bgImgWidth = 1920
     const bgImgHeight = 1080
     const labelPosList = reactive({ value: [] })
-    function computeActualWindowRatio() {
+    function computeLabelsPos() {
       labelPosList.value = []
       for (const iterator of menu) {
         labelPosList.value.push(getLabelPos(iterator.pos))
@@ -76,16 +82,16 @@ export default {
       console.log(labelPosList)
     }
     onMounted(() => {
-      computeActualWindowRatio()
-      window.addEventListener('resize', computeActualWindowRatio)
+      computeLabelsPos()
+      window.addEventListener('resize', computeLabelsPos)
     })
     onUnmounted(() => {
-      window.removeEventListener('resize', computeActualWindowRatio)
+      window.removeEventListener('resize', computeLabelsPos)
     })
-    // true: 实际窗口更宽扁，背景图与实际窗口等宽，上下被裁减
-    // false: 实际窗口更窄高，背景图与实际窗口等高，左右被裁减
 
     function getLabelPos(posRaw) {
+      // true: 实际窗口更宽扁，背景图与实际窗口等宽，上下被裁减
+      // false: 实际窗口更窄高，背景图与实际窗口等高，左右被裁减
       if (window.innerWidth / window.innerHeight > bgImgWidth / bgImgHeight) {
         const scale = window.innerWidth / bgImgWidth
         return {
@@ -102,109 +108,7 @@ export default {
     }
 
     const isHideMenu = ref(true)
-    const menu = reactive([
-      {
-        name: '桃花源里人家',
-        pos: {
-          x: 540,
-          y: 273,
-        },
-
-        children: [
-          {
-            name: '文化溯源',
-          },
-          {
-            name: '画里乡村',
-          },
-          {
-            name: '水口园林',
-          },
-        ]
-      },
-      {
-        name: '牌坊',
-        pos: {
-          x: 248,
-          y: 414,
-        },
-        children: [
-          {
-            name: '认识牌坊',
-          },
-          {
-            name: '牌坊形制',
-          },
-          {
-            name: '牌坊构造',
-          },
-        ]
-      },
-      {
-        name: '祠堂',
-        pos: {
-          x: 1247,
-          y: 591,
-        },
-        children: [
-          {
-            name: '认识祠堂',
-          },
-          {
-            name: '祠堂的建筑艺术 ①',
-          },
-          {
-            name: '祠堂的建筑艺术 ②',
-          },
-        ]
-      },
-      {
-        name: '民居',
-        pos: {
-          x: 1389,
-          y: 355,
-        },
-        children: [
-          {
-            name: '认识民居',
-          },
-          {
-            name: '民居的营造 ①',
-          },
-          {
-            name: '民居的营造 ②',
-          },
-        ]
-      }, {
-        name: '匠心独运',
-        pos: {
-          x: 928,
-          y: 657,
-        },
-        children: [
-          {
-            name: '榫卯技艺',
-          },
-          {
-            name: '雕刻艺术 ①',
-          },
-          {
-            name: '雕刻艺术 ②',
-          },
-        ]
-      }, {
-        name: '拾遗',
-        pos: {
-          x: 746,
-          y: 446,
-        },
-        children: [
-          {
-            name: '其他建筑类型鉴赏',
-          },
-        ]
-      },
-    ])
+    const menu = reactive(config.sceneTree)
 
     return {
       labelPosList,
@@ -221,8 +125,6 @@ export default {
     ]),
   },
   mounted() {
-    console.log(process.env)
-    this.$mitt.emit('test', { msg: 'home mounted' })
   },
   unmounted() {
   },
@@ -285,7 +187,7 @@ export default {
     background-repeat: no-repeat;
     background-position: center center;
     counter-reset: lalala;
-    transition: all 1s;
+    transition: all 0.7s;
     >.level1 {
       font-size: 24px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;

src/views/Level2.vue

@@ -1,14 +1,30 @@
 <template>
   <div
-    class="home"
+    class="level-2"
+    :style="{
+      backgroundImage: `url(${getBgImgUrl()})`,
+    }"
   >
-    {{ $env.BASE_URL }}
+    <menu
+      :style="{
+        backgroundImage: `url(${getMenuBgImgUrl()})`,
+        ...sceneInfo.level2MenuStyle,
+      }"
+    >
+      <div
+        v-for="(item, idx) in sceneInfo.children"
+        :key="idx"
+        class="menu-item"
+      >
+        <h2>{{ item.name }}</h2>
+      </div>
+    </menu>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HomeView',
+  name: 'Level2View',
   data() {
     return {
     }
@@ -16,23 +32,57 @@ export default {
   computed: {
     ...mapState([
     ]),
+    sceneInfo() {
+      return config.sceneTree[Number(this.$route.query.sceneIdx)]
+    },
   },
   mounted() {
-    console.log(process.env)
-    this.$mitt.emit('test', { msg: 'home mounted' })
   },
   unmounted() {
   },
   methods: {
     ...mapMutations([
     ]),
+    getBgImgUrl() {
+      return require(`@/assets/images/bg-level2-${Number(this.$route.query.sceneIdx) + 1}.jpg`)
+    },
+    getMenuBgImgUrl() {
+      return require(`@/assets/images/bg-menu-level2-${Number(this.$route.query.sceneIdx) + 1}.png`)
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.home {
+.level-2 {
+  position: relative;
   width: 100%;
   height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >menu {
+    position: absolute;
+    top: 0;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    >.menu-item {
+      height: 94px;
+      font-size: 38px;
+      font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
+      font-weight: 400;
+      color: #2D241D;
+      line-height: 1.3;
+      cursor: pointer;
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &.hide {
+      transform: translateX(110%);
+    }
+  }
 }
 </style>