完成 前言

src/views/EntryList.vue

@@ -1,5 +1,24 @@
 <template>
   <div class="entry-list-view">
+    <Transition name="fade-out">
+      <div
+        v-show="isShowForeword"
+        class="foreword"
+      >
+        <article>
+          <p>世界文化遗产与童心相遇，会呈现出哪般模样？</p>
+          <p>符号，纹饰，陶器，玉器......这些博物馆和遗址中的文化明珠，恰似古老文明赠予孩童们的灵感之礼。良渚文化，经他们之手，褪去历史的沉重外衣，开始轻盈的青春舞动，向我们展示了无尽的生命力和成长力。</p>
+          <p>蓝染、版画、陶艺、国画、水彩.......一百七十余件艺术作品，传递出包括残障儿童在内的孩子们对于古老文明的独特观察。让我们踏入2023“良渚童huà”儿童艺术展，在亚运会的盛大舞台之上，看孩童们用良渚文化为世界喝彩！</p>
+        </article>
+        <button
+          class="skip"
+          @click="onClickSkip"
+        >
+          跳过
+        </button>
+      </div>
+    </Transition>
+
     <ul class="entry-list">
       <li
         v-for="(entry, idx) in entryList"
@@ -27,16 +46,30 @@
 </template>
 
 <script setup>
+import { ref, computed, } from "vue"
 import { useRoute, useRouter } from "vue-router"
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+} = useSizeAdapt(724, 375)
 
 const route = useRoute()
 const router = useRouter()
 
+const isShowForeword = ref(true)
+let forewordTimeoutId = null
+forewordTimeoutId = setTimeout(() => {
+  isShowForeword.value = false
+}, 12000)
+function onClickSkip() {
+  if (isShowForeword.value) {
+    clearTimeout(forewordTimeoutId)
+    forewordTimeoutId = null
+    isShowForeword.value = false
+  }
+}
+
 const entryInfo = config.entryList[route.params.idx]
 
 </script>
@@ -49,6 +82,53 @@ const entryInfo = config.entryList[route.params.idx]
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
+  >.foreword{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    background-image: url(@/assets/images/foreword-bg.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: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: 100%;