瞎jb搞

src/config.js

@@ -1,6 +1,26 @@
 // hasToolOrder: 一个步骤中，使用多个工具时，是否有顺序限制
 // needWait：一个步骤中，使用多个工具时，选中了一个工具后，是否要等一下（比如，等待这个工具使用完毕）才允许选择下一个工具
 export default {
+  entryList: [
+    {
+      name: '墨韵中的良渚（中国画部分）+舞动着的神徽+小鳄鱼',
+    },
+    {
+      name: '来自古国的礼物',
+    },
+    {
+      name: '文明的印迹（东塘中心小学版画）+墨韵中的良渚（版画部分）',
+    },
+    {
+      name: '古老的蓝色记忆',
+    },
+    {
+      name: '奔跑吧陶器-暂无',
+    },
+    {
+      name: '指尖上的飞鸟',
+    },
+  ],
   stepList: [
     {
       name: '完成线稿',
@@ -32,5 +52,5 @@ export default {
       name: '完成转印',
       toolIdxList: [],
     },
-  ]
+  ],
 }

src/router/index.js

@@ -1,13 +1,31 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+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 store from '@/store/index.js'
 
 const routes = [
   {
     path: '/',
-    redirect: '/start',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'HomeView',
+    component: HomeView,
+  },
+  {
+    path: '/entry-list',
+    name: 'EntryList',
+    component: EntryList,
+  },
+  {
+    path: '/draw-list',
+    name: 'DrawList',
+    component: DrawList,
   },
   {
     path: '/start',

src/views/DrawList.vue

@@ -0,0 +1,111 @@
+<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

@@ -0,0 +1,94 @@
+<template>
+  <div class="entry-list-view">
+    <ul class="entry-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 entryInfo = config.entryList[route.params.idx]
+
+</script>
+
+<style lang="less" scoped>
+.entry-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.entry-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/HomeView.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="home">
+    <div class="btn-group">
+      <button @click="onClickBegin">
+        开始探索
+      </button>
+      <button
+        id="copy-text"
+        :data-clipboard-text="shareUrl"
+        data-clipboard-action="copy"
+        @click="onClickCopy"
+      >
+        分享
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Clipboard from "clipboard"
+import { showToast } from "@/store/index.js"
+import { useRoute, useRouter } from "vue-router"
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const route = useRoute()
+const router = useRouter()
+
+const shareUrl = location.origin + location.pathname
+function onClickBegin() {
+  router.push({
+    name: 'EntryList'
+  })
+}
+function onClickCopy() {
+  let clipboard = new Clipboard("#copy-text")
+  clipboard.on("success", function() {
+    showToast('地址已复制到剪贴板')
+  })
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.home{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  >.btn-group{
+    position: absolute;
+    left: 50%;
+    bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    >button{
+
+    }
+    >button:first-of-type{
+      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
+</style>

src/views/StartView.vue

@@ -20,29 +20,29 @@
         id="copy-text"
         :data-clipboard-text="shareUrl"
         data-clipboard-action="copy"
-        @click="onClickCopy"
+        @click="onClickReturn"
       >
-        分享
+        返回
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import Clipboard from "clipboard"
 import { watch, ref } from "vue"
 import { showToast } from "@/store/index.js"
+import { useRoute, useRouter } from "vue-router"
+
+const router = useRouter()
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const shareUrl = location.origin + location.pathname
-function onClickCopy() {
-  let clipboard = new Clipboard("#copy-text")
-  clipboard.on("success", function() {
-    showToast('地址已复制到剪贴板')
+function onClickReturn() {
+  router.push({
+    name: 'HomeView'
   })
 }
 </script>