搞搞搞

README.md

@@ -1,4 +1,9 @@
 ## 测试环境
 文件存放位置：阿里云，4dkk-culture,LiangZhu
 
-访问url：https://culture.4dage.com/LiangZhu/index.html#/
+访问url：https://culture.4dage.com/LiangZhu/index.html#/
+
+https://4dkk-culture.oss-cn-shenzhen.aliyuncs.com/LiangZhu/draws/1.%20%E5%A2%A8%E9%9F%B5%E4%B8%AD%E7%9A%84%E8%89%AF%E6%B8%9A%EF%BC%88%E4%B8%AD%E5%9B%BD%E7%94%BB%E9%83%A8%E5%88%86%EF%BC%89%2B%E8%88%9E%E5%8A%A8%E7%9D%80%E7%9A%84%E7%A5%9E%E5%BE%BD%2B%E5%B0%8F%E9%B3%84%E9%B1%BC/%E6%9D%AD%E8%A1%8C%E8%B7%AF%E5%B0%8F%E5%AD%A6-%E5%B0%8F%E9%B3%84%E9%B1%BC%E7%94%BB%E4%BD%9C/3b7408aab4f7b5fcb581ab89f3c1eb7.jpg
+
+
+https://4dkk-culture.oss-cn-shenzhen.aliyuncs.com/LiangZhu/draws/1.%20%E5%A2%A8%E9%9F%B5%E4%B8%AD%E7%9A%84%E8%89%AF%E6%B8%9A%EF%BC%88%E4%B8%AD%E5%9B%BD%E7%94%BB%E9%83%A8%E5%88%86%EF%BC%89%2B%E8%88%9E%E5%8A%A8%E7%9D%80%E7%9A%84%E7%A5%9E%E5%BE%BD%2B%E5%B0%8F%E9%B3%84%E9%B1%BC/%E6%B1%80%E5%B7%9E%E5%AD%A6%E6%A0%A1%20%E8%88%9E%E5%8A%A8%E7%9D%80%E7%9A%84%E7%A5%9E%E8%BE%89/3b7408aab4f7b5fcb581ab89f3c1eb7.jpg

src/App.vue

@@ -72,6 +72,7 @@ input, textarea {
 
 .fade-out-leave-active {
   transition: opacity 1s;
+  pointer-events: none;
 }
 .fade-out-leave-to {
   opacity: 0;
@@ -94,6 +95,7 @@ input, textarea {
 
 .toast-transition-leave-active {
   transition: opacity 0.5s;
+  pointer-events: none;
 }
 .toast-transition-leave-to {
   opacity: 0;
@@ -115,10 +117,11 @@ input, textarea {
   }
 }
 
-// // vue-viewer
-// .viewer-container {
-//   background-color: rgba(0, 0, 0, 80%) !important;
-// }
+// vue-viewer
+.viewer-container {
+  background-color: rgba(0, 0, 0, 80%) !important;
+  backdrop-filter: blur(5px);
+}
 // 或者
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;

public/draw-tree.js

@@ -772,4 +772,5 @@ export const drawTree = {
       }
     }
   }
-}
+}
+

src/router/index.js

@@ -3,7 +3,7 @@ import HomeView from "@/views/HomeView.vue"
 import StartView from "@/views/StartView.vue"
 import DrawView from "@/views/DrawView.vue"
 import EntryList from "@/views/EntryList.vue"
-import DrawList from "@/views/DrawList.vue"
+import CommonDrawList from "@/views/CommonDrawList.vue"
 
 // import store from '@/store/index.js'
 
@@ -23,9 +23,9 @@ const routes = [
     component: EntryList,
   },
   {
-    path: '/draw-list',
-    name: 'DrawList',
-    component: DrawList,
+    path: '/common-draw-list',
+    name: 'CommonDrawList',
+    component: CommonDrawList,
   },
   {
     path: '/start',

src/views/CommonDrawList.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="common-draw-list-view">
+    <div
+      v-if="route.query.idx === '5'"
+      class="no-content"
+    >
+      <img
+        class="no-content"
+        src="@/assets/images/please-wait.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <ul
+      v-if="route.query.idx !== '5'"
+      class="common-draw-list"
+    >
+      <li
+        v-for="(drawName, idx) in drawList"
+        :key="idx"
+      >
+        <img
+          v-viewer
+          class=""
+          :src="`${imgPrefix}/${drawName}`"
+          alt=""
+          draggable="false"
+        >
+      </li>
+    </ul>
+    <ul
+      v-if="route.query.idx !== '5'"
+      class="group-list"
+    >
+      <li
+        v-for="(groupName, idx) in Object.keys(groupList)"
+        :key="idx"
+        :class="{
+          active: activeGroupIdx === idx
+        }"
+        @click="activeGroupIdx = idx"
+      >
+        {{ groupName }}
+      </li>
+    </ul>
+    <button
+      v-if="route.query.idx === '3'"
+      class="game-entry"
+      @click="router.push({
+        name: 'StartView',
+      })"
+    />
+    <button
+      class="return"
+      @click="router.push({
+        name: 'EntryList',
+      })"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { hasShownForword } from "@/store/index.js"
+import { drawTree } from "@/assets/draw-tree.js"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(724, 375)
+
+const route = useRoute()
+const router = useRouter()
+
+const activeGroupIdx = ref(0)
+
+const groupL1Name = Object.keys(drawTree)[Number(route.query.idx) - 1]
+const groupList = Object.values(drawTree)[Number(route.query.idx) - 1]
+const groupName = computed(() => {
+  return Object.keys(groupList)[activeGroupIdx.value]
+})
+const drawList = computed(() => {
+  return Object.keys(groupList[Object.keys(groupList)[activeGroupIdx.value]])
+})
+const imgPrefix = computed(() => {
+  return `https://4dkk-culture.oss-cn-shenzhen.aliyuncs.com/LiangZhu/draws/${encodeURIComponent(groupL1Name)}/${encodeURIComponent(groupName.value)}`
+})
+</script>
+
+
+
+<style lang="less" scoped>
+.common-draw-list-view{
+  position: relative;
+  height: 100%;
+  padding-top: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  padding-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  background-image: url(@/assets/images/foreword-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >div.no-content{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >img.no-content{
+      height: calc(242 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >ul.common-draw-list{
+    width: 100%;
+    padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    &::-webkit-scrollbar { height: 0; };
+    >li{
+      flex: 0 0 auto;
+      width: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
+      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.1);
+      >img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  >button.game-entry{
+    position: absolute;
+    bottom: 0;
+    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 194px;
+    height: 86px;
+    background-image: url(@/assets/images/game-entry.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >button.return{
+    position: absolute;
+    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/icon_back@2x.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >ul.group-list{
+    width: 100%;
+    padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    &::-webkit-scrollbar { height: 0; };
+    >li{
+      flex: 0 0 auto;
+      display: flex;
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      justify-content: center;
+      align-items: center;
+      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #484238;
+      line-height: 19px;
+      padding-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-color: #fff;
+      border-radius: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      cursor: pointer;
+    }
+    >li.active{
+      background-color: rgba(239, 196, 27, 1);
+      font-weight: bold;
+      color: #FFFFFF;
+      border: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
+      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    }
+  }
+}
+</style>

src/views/DrawList.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="draw-list-view">
-    <ul class="draw-list">
-      <li
-        v-for="(entry, idx) in entryList"
-        :key="entry.name"
-        @click="router.push({
-          name: 'DrawList',
-          query: {
-            idx,
-          }
-        })"
-      >
-        <h3>{{ entry.name }}</h3>
-      </li>
-    </ul>
-    <div class="bottom-wrap">
-      <h2>良渚童画</h2>
-      <button
-        class="return"
-        @click="router.go(-1)"
-      >
-        返回
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useRoute, useRouter } from "vue-router"
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
-const route = useRoute()
-const router = useRouter()
-const entryList = [
-  {
-    name: '墨韵中的良渚（中国画部分）+舞动着的神徽+小鳄鱼',
-  },
-  {
-    name: '来自古国的礼物',
-  },
-  {
-    name: '文明的印迹（东塘中心小学版画）+墨韵中的良渚（版画部分）',
-  },
-  {
-    name: '古老的蓝色记忆',
-  },
-  {
-    name: '奔跑吧陶器-暂无',
-  },
-  {
-    name: '指尖上的飞鸟',
-  },
-]
-</script>
-
-<style lang="less" scoped>
-.draw-list-view{
-  height: 100%;
-  padding: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  >ul.draw-list{
-    height: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    width: 100%;
-    background-color: blue;
-    display: flex;
-    align-items: center;
-    overflow: auto;
-    &::-webkit-scrollbar { height: 0; };
-    padding-left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >li{
-      flex: 0 0 auto;
-      background-color: red;
-      height: 100%;
-      width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      // background-image: url(@/assets/images/sdf);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      >h3{
-        display: inline-block;
-        text-align: center;
-      }
-    }
-  }
-  >.bottom-wrap{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    >h2{
-
-    }
-    >button.return{
-
-    }
-  }
-}
-</style>

src/views/EntryList.vue

@@ -24,7 +24,7 @@
         v-for="idx in 6"
         :key="idx"
         @click="router.push({
-          name: 'DrawList',
+          name: 'CommonDrawList',
           query: {
             idx,
           }
@@ -58,7 +58,9 @@
     </ul>
     <button
       class="return"
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'HomeView',
+      })"
     />
   </div>
 </template>
@@ -90,9 +92,6 @@ function onClickSkip() {
     hasShownForword.value = true
   }
 }
-
-const entryInfo = config.entryList[route.params.idx]
-
 </script>
 
 <style lang="less" scoped>
@@ -104,6 +103,7 @@ const entryInfo = config.entryList[route.params.idx]
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
+  background-image: url(@/assets/images/foreword-bg.jpg);
   >.foreword{
     position: absolute;
     left: 0;
@@ -155,12 +155,10 @@ const entryInfo = config.entryList[route.params.idx]
     height: 100%;
     width: 100%;
     padding-left: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     display: flex;
     align-items: center;
     overflow: auto;
     &::-webkit-scrollbar { height: 0; };
-    padding-left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >li{
       flex: 0 0 auto;
       height: 100%;
@@ -169,7 +167,6 @@ const entryInfo = config.entryList[route.params.idx]
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
-      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: inline-flex;
       justify-content: center;
       align-items: center;

src/views/StartView.vue

@@ -42,7 +42,10 @@ const {
 
 function onClickReturn() {
   router.push({
-    name: 'HomeView'
+    name: 'CommonDrawList',
+    query: {
+      idx: '3',
+    }
   })
 }
 </script>