更新ui

src/App.vue

@@ -87,6 +87,10 @@ input, textarea {
 }
 
 // 字体
+@font-face {
+  font-family: 'jiangxizhuokai-Regular';
+  src: url('@/assets/style/jiangxizhuokai-Regular.ttf');
+}
 // @font-face {
 //   font-family: 'Source Han Serif CN';
 //   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');

src/components/ForeWord.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="fore-word-view">
+    <Transition name="fade-out">
+      <div
+        v-show="isShowForeword && !hasShownForword"
+        class="foreword"
+      >
+        <article>
+          <p>世界文化遗产与童心相遇，会呈现出哪般模样？</p>
+          <p>符号，纹饰，陶器，玉器......这些博物馆和遗址中的文化明珠，恰似古老文明赠予孩童们的灵感之礼。良渚文化，经他们之手，褪去历史的沉重外衣，开始轻盈的青春舞动，向我们展示了无尽的生命力和成长力。</p>
+          <p>蓝染、版画、陶艺、国画、水彩.......一百七十余件艺术作品，传递出包括残障儿童在内的孩子们对于古老文明的独特观察。让我们踏入2023“良渚童huà”儿童艺术展，在亚运会的盛大舞台之上，看孩童们用良渚文化为世界喝彩！</p>
+        </article>
+        <button
+          class="skip"
+          @click="closeFu"
+        >
+          返回首页
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import { hasShownForword } from "@/store/index.js"
+
+const emit = defineEmits(['close'])
+const closeFu = ()=> {
+  emit('close')
+}
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(724, 375)
+
+const isShowForeword = ref(true)
+
+</script>
+
+<style lang="less" scoped>
+.fore-word-view{
+  height: 100%;
+  padding-top: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  padding-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  background-image: url(@/assets/images/foreword-bg.jpg);
+  >.foreword{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    background-image: url(@/assets/images/foreword-bg-new.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    >article{
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-bottom: calc(97 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      overflow: auto;
+      &::-webkit-scrollbar { height: 0; };
+      >p{
+        margin-bottom: 1em;
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+        font-weight: bold;
+        color: #484238;
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >button{
+      position: absolute;
+      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: 16px;
+      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 19px;
+      background-color: rgba(239, 196, 27, 1);
+      border-radius: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
+      box-shadow: 0 calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/CommonDrawList.vue

@@ -47,13 +47,13 @@
         {{ groupName }}
       </li>
     </ul>
-    <button
+    <!-- <button
       v-if="route.query.idx === '3'"
       class="game-entry"
       @click="router.push({
         name: 'StartView',
       })"
-    />
+    /> -->
     <button
       class="like"
       :class="{

src/views/EntryList.vue

@@ -1,26 +1,6 @@
 <template>
   <div class="entry-list-view">
-    <Transition name="fade-out">
-      <div
-        v-show="isShowForeword && !hasShownForword"
-        class="foreword"
-      >
-        <article>
-          <p>世界文化遗产与童心相遇，会呈现出哪般模样？</p>
-          <p>符号，纹饰，陶器，玉器......这些博物馆和遗址中的文化明珠，恰似古老文明赠予孩童们的灵感之礼。良渚文化，经他们之手，褪去历史的沉重外衣，开始轻盈的青春舞动，向我们展示了无尽的生命力和成长力。</p>
-          <p>蓝染、版画、陶艺、国画、水彩.......一百七十余件艺术作品，传递出包括残障儿童在内的孩子们对于古老文明的独特观察。让我们踏入2023“良渚童huà”儿童艺术展，在亚运会的盛大舞台之上，看孩童们用良渚文化为世界喝彩！</p>
-        </article>
-        <button
-          class="skip"
-          @click="onClickSkip"
-        >
-          跳过
-        </button>
-      </div>
-    </Transition>
-
     <ul
-      v-show="!isShowForeword || hasShownForword"
       ref="ulEl"
       class="entry-list"
       @wheel="onWheel"
@@ -71,32 +51,17 @@
 </template>
 
 <script setup>
-import { ref, computed, } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { hasShownForword } from "@/store/index.js"
+import { ref, } from "vue"
+import { useRouter } from "vue-router"
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(724, 375)
 
-const route = useRoute()
 const router = useRouter()
 
-const isShowForeword = ref(true)
-let forewordTimeoutId = null
-forewordTimeoutId = setTimeout(() => {
-  isShowForeword.value = false
-  hasShownForword.value = true
-}, 12000)
-function onClickSkip() {
-  if (isShowForeword.value) {
-    clearTimeout(forewordTimeoutId)
-    forewordTimeoutId = null
-    isShowForeword.value = false
-    hasShownForword.value = true
-  }
-}
+
 
 const ulEl = ref(null)
 function onWheel(e) {
@@ -114,53 +79,6 @@ function onWheel(e) {
   justify-content: space-around;
   align-items: center;
   background-image: url(@/assets/images/foreword-bg.jpg);
-  >.foreword{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 5;
-    background-image: url(@/assets/images/foreword-bg-new.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    >article{
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      padding-right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      padding-bottom: calc(97 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      padding-left: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      overflow: auto;
-      &::-webkit-scrollbar { height: 0; };
-      >p{
-        margin-bottom: 1em;
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-        font-weight: bold;
-        color: #484238;
-        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
-    }
-    >button{
-      position: absolute;
-      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      width: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-size: 16px;
-      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 19px;
-      background-color: rgba(239, 196, 27, 1);
-      border-radius: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
-      box-shadow: 0 calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) rgba(0, 0, 0, 0.3);
-    }
-  }
   >ul.entry-list{
     height: 100%;
     width: 100%;

src/views/HomeView.vue

@@ -26,6 +26,47 @@
         </button>
       </div>
     </Transition>
+
+    <Transition name="fade-in">
+      <div
+        v-show="isShowBtnGroup"
+        class="btn-right"
+      >
+        <div
+          class="right-item"
+          @click="isShowForeword = true"
+        >
+          <div class="item-circle">
+            <img
+              src="@/assets/images/foreword-icon.png"
+              alt=""
+            >
+          </div>
+          策展人说
+        </div>
+        <div class="right-item">
+          <div
+            class="item-circle"
+            style="background: #E89795;"
+            @click="router.push({
+              name: 'StartView',
+            })"
+          >
+            <img
+              src="@/assets/images/pic-icon.png"
+              alt=""
+            >
+          </div>
+          体验版画
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 序言 -->
+    <ForeWord
+      v-show="isShowForeword"
+      @close="close"
+    />
   </div>
 </template>
 
@@ -34,6 +75,7 @@ import Clipboard from "clipboard"
 import { showToast } from "@/store/index.js"
 import { useRoute, useRouter } from "vue-router"
 import { ref } from "vue"
+import ForeWord from "@/components/ForeWord.vue"
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -47,6 +89,11 @@ setTimeout(() => {
   isShowBtnGroup.value = true
 }, 2500)
 
+const isShowForeword = ref(false)
+const close = () => {
+  isShowForeword.value = false
+}
+
 const shareUrl = location.origin + location.pathname
 function onClickBegin() {
   router.push({
@@ -91,28 +138,55 @@ function onClickCopy() {
     align-items: center;
     >button{
       flex: 0 0 auto;
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-      font-weight: bold;
-      color: #484238;
+      // letter-spacing: .3em;
+      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: 'jiangxizhuokai-Regular';
+      // font-weight: bold;
+      color: white;
+      background-color: rgba(239, 196, 27, 1);
+      border-radius: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
       line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     }
     >button:first-of-type{
-      background-image: url(@/assets/images/btn-long-bright.png);
-      background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
       width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       margin-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
     >button:last-of-type{
-      background-image: url(@/assets/images/btn-short-dark.png);
-      background-size: contain;
+      background-color: #4ABBFF;
       background-repeat: no-repeat;
       background-position: center center;
       width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     }
   }
+  >.btn-right {
+    position: absolute;
+    right: 2%;
+    top:8%;
+    >.right-item {
+      margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      >.item-circle {
+        border-radius: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        border: 2px solid white;
+        padding: 13%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: #549E7E;
+
+      }
+
+    }
+  }
 }
 </style>

src/views/StartView.vue

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