feats

index.html

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./fonts/iconfont.css">
+    <link rel="stylesheet" href="./fonts/STXINGKA.css">
     <script src="./wx/jweixin-1.6.0.js"></script>
     <script src="./config.js"></script>
     <title>和“宁好”一起，跟着诗歌游南京</title>

public/fonts/STXINGKA-embed.css

+@font-face {
+    font-family: "STXINGKA";
+    src: url("STXINGKA.eot"); /* IE9 */
+    src: url("STXINGKA.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+    
+    url(data:application/x-font-ttf;charset=utf-8;base64,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AP8AUgD/AEkA/wBHAP8ASAD/AFQA/wAIAP8AQwD/AAkA/wARAP8AGQD/ABkA/wARAP8ADQD/ABEA/wAZAP8AGQD/ABgA/wAMAP8AIwD/AEgA/wBBAP8ATgD/AEcA/wBaAP8ASAD/AE8A/wBVADAA/wAzAP8ASQD/AE4A/wBPAP8ANAD/AFkA/wBQAP8ARQAwAP8ANAD/AEUA/wBDAP8ASAD/AE4A/wBPAP8ATAD/AE8A/wBHAP8AWQAwAP8AIwD/AE8A/wAOAP8ADAD/ACwA/wBUAP8ARAD/AA4AMAD/ACEA/wBMAP8ATAAwAP8AUgD/AEkA/wBHAP8ASAD/AFQA/wBTADAA/wBSAP8ARQD/AFMA/wBFAP8AUgD/AFYA/wBFAP8ARAD/AA4AMABeADgAXQDeAFMATgBlAIcAUwBwAFIANwBlALAAYgCAAGcALwBnAAkAlgBQAFEAbABTAPgAMAByAEgAZwBDAGIAQABnAAkAMAAAAFMATgBlAIcAiABMAGkAdwBSAGUAZwB1AGwAYQByAFMATgBlAIcAiABMAGkAdwAwAP8ANAD/ADQA/wAmAFMATgBlAIcAiABMAGkAdwBWAGUAcgBzAGkAbwBuACAAMQAuADAAMgD/ADMA/wA0AP8AOAD/AEkA/wBOAP8ARwD/AEsA/wBBAP8ASQD/ADMA/wBJAP8ATgD/AE8A/wA0AP8AWQD/AFAA/wBFAFMAygBTAE4AZQCHAFsAVwBeAJMAZgAvAF4AOABdAN4AUwBOAGUAhwBTAHAAUgA3AGUAsABiAIAAZwAvAGcACQCWAFAAUQBsAFMA+ABOAEsAVQBGAGgABwAwAAIAMAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUABQAAAQIBAwEEAQUHdW5pNzBCOQd1bmk1MUZCB3VuaThGREIHdW5pNTE2NQ==) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+    
+    url("STXINGKA.svg#STXINGKA") format("svg"); /* iOS 4.1- */
+    font-style: normal;
+    font-weight: normal;
+}
+
+

public/fonts/STXINGKA.css

+@font-face {
+    font-family: "STXINGKA";
+    src: url("STXINGKA.eot"); /* IE9 */
+    src: url("STXINGKA.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+    
+    url("STXINGKA.woff") format("woff"), /* chrome、firefox */
+    url("STXINGKA.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+    
+    url("STXINGKA.svg#STXINGKA") format("svg"); /* iOS 4.1- */
+    font-style: normal;
+    font-weight: normal;
+}
+
+

src/components/Loader.vue

 <template>
   <div 
     class="loader-wrapper"
-    :class="{ loaded: !loading, mask: maskReadyRef }"
+    :class="{ loaded: !loading, mask: maskStatusRef > 1 }"
     :style="visibleStyle"
+    @click="playMask"
     @touchmove.prevent
     @mousewheel.prevent
   >
       <p class="progress">
         <div :style="progressStyle"></div>
       </p>
+      <p class="enter" v-if="maskStatusRef > 0">点击进入</p>
     </div>
     <!-- <div class="loader-section section-top"></div>
     <div class="loader-section section-bottom"></div>     -->
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import MaskVue from "./Mask.vue";
 
 const entranceAudio = './audios/entrance.mp3';  
 
 const elRef = ref();
 const maskRef = ref();
-const maskReadyRef = ref(false);
+const maskStatusRef = ref(0);
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
 const visibleStyle = ref({})
 const entranceAudioRef = ref()
-const entranceAudioReady = ref(false)
 
 const onEnd = () => {
   visibleStyle.value = { display: 'none' }
 }
 
 const playMask = () => {
-  if (maskReadyRef.value && entranceAudioReady.value) {
-    entranceAudioRef.value.play();
-    maskRef.value.start();
-  }
+  maskStatusRef.value = 2
+  entranceAudioRef.value.play();
+  maskRef.value.start();
 }
 
 watch(() => props.loading, (newVal, oldVal) => {
   if (oldVal && !newVal) {
-    maskReadyRef.value = true;
-    playMask();
+    maskStatusRef.value = 1
   }
 })
 
-onMounted(() => {
-  const isDev = import.meta.env.DEV
-  if (isDev) {
-    entranceAudioReady.value = true;
-  }
-
-  document.addEventListener("WeixinJSBridgeReady", function () {
-    entranceAudioReady.value = true;
-    playMask();
-  }, false);
-})
-
 </script>
 
 
         border-radius: 50%;
       }
     }
+
+    .enter {
+      margin-top: 2em;
+      font-family: "STXINGKA";
+    }
   }
 
   .loader-section {

src/utils/resources.js

   "栖霞山，位于南京市栖霞区，古称摄山，南朝时山中建有“栖霞精舍”，因此得名。栖霞山被誉为“金陵第一明秀山”，是国家AAAA级旅游景区、中国四大赏枫胜地之一。历史上曾有五王十四帝登临栖霞山，其中乾隆六下江南，五次驻跸栖霞山。栖霞山素有“六朝胜迹”之称，在明代被列为“金陵四十八景”之一，有“一座栖霞山，半部金陵史”的美誉。栖霞山历史古迹遗址80多处，荟萃了宗教文化、帝王文化、绿色文化、民俗文化、地质文化、石刻文化、茶文化。千年古刹、佛学“三论宗”祖庭、佛教“四大丛林”之一的古栖霞寺就座落在栖霞山西麓。",
   "朝天宫位于南京市秦淮区水西门内，是江南地区现存建筑等级最高、规模最大、保存最为完整的明清官式古建筑群落 ，素有“金陵第一胜迹”之美誉。朝天宫东为府学，中为文庙，西为卞壸祠。朝天宫之名，由明太祖朱元璋下诏御赐，取“朝拜上天”、“朝见天子”之意，是明代皇室贵族焚香祈福的道场和节庆前文武百官演习朝拜天子礼仪的场所。朝天宫与神乐观同为明朝最高等级的皇家道观。朝天宫是典型的明清殿宇式建筑，其建筑格局、样式、营造技术等是研究中国古代建筑，特别是研究明清建筑重要而难得的实物资料，具有极高的历史、艺术和科学价值。",
   "梁洲是玄武湖五洲之一，面积8.81公顷，曾名老洲、旧洲、祖洲、莲花洲和美洲，是玄武湖开辟最早的一个洲，为昭明太子编《文选》的读书处，有“梁园”之称，故称梁洲。此洲擅全湖之胜，开明代后湖黄册库之滥觞。洲上人文荟萃，分布着湖神庙遗址、明代黄册库历史文化展馆、览胜楼、闻鸡亭、友谊厅、金陵盆景园等景点。每年一度的玄武湖菊展在此举行，有“梁洲秋菊”之美称。",
-  "后湖印月位于新模范马路隧道门附近，建于2010年，面积为146平方米。该建筑采用唐代建筑风格，是为纪念唐代李白而建，其名称出自李白《金陵三首·其二》“空馀后湖月，波上对瀛洲”一句。李白一生对南京有不解之缘，并多次游历玄武湖，或对“后湖月”，或赏“北湖梅”，留下与玄武湖有关的诗作4首。他曾凭吊郭璞仙墩，在《登金陵凤凰台》中写下了“吴宫花草埋幽径，晋代衣冠成古丘”这一千古名句；曾与好友杨利物泛舟湖上，当舟至覆舟山下，感叹“古之帝宫苑，今仍人樵苏”。",
+  "后湖映月位于新模范马路隧道门附近，建于2010年，面积为146平方米。该建筑采用唐代建筑风格，是为纪念唐代李白而建，其名称出自李白《金陵三首·其二》“空馀后湖月，波上对瀛洲”一句。李白一生对南京有不解之缘，并多次游历玄武湖，或对“后湖月”，或赏“北湖梅”，留下与玄武湖有关的诗作4首。他曾凭吊郭璞仙墩，在《登金陵凤凰台》中写下了“吴宫花草埋幽径，晋代衣冠成古丘”这一千古名句；曾与好友杨利物泛舟湖上，当舟至覆舟山下，感叹“古之帝宫苑，今仍人樵苏”。",
   "台城位于南京市玄武区北极阁北麓、玄武湖以南，是从解放门向西延伸出的一段明城墙，这段城墙下设有南京明城垣史博物馆。这段城墙以条石为城基，城基之上用明初烧制的城砖包砌，长253.15米、高20.16米，西端宽9.8米，东端宽10.3米。明太祖朱元璋筑应天府城时，原计划将这段城墙向西修至鼓楼岗并与石头城相接，明朝洪武十九年“新筑后湖城”，这一段城墙便遭废弃。明代后多将这段城墙附会为东晋至南陈时期的台城，并讹传。",
   "钟山风景名胜区位于江苏省南京市玄武区紫金山，简称钟山风景区，是中国著名的风景游览胜地、首批国家级风景名胜区、首批国家5A级旅游景区、国家森林公园、国家文明风景名胜区、中国旅游胜地四十佳，自古被誉为江南四大名山，有钟山龙蟠的美誉。钟山因山顶常有紫云萦绕，又得名紫金山。紫金山中世界文化遗产1处，全国重点文物保护单位15处，江苏省文物保护单位和市级文物保护单位共31处，“中山伟陵”是金陵新四十景之一。",
   "清凉山古名石头山、石首山、石头城，有“六朝胜迹”之称，园内众多的名胜古迹和历史文化遗址，形成了深厚的历史文化底蕴。诸葛亮曾称金陵形势为“虎踞龙蟠”，虎踞就指今清凉山。战国时楚威王于此置金陵邑，山存有城，名石城山。三国时，东吴改筑石头城，亦名石头山。南唐时曾建避暑行宫于山上。北宋时更名清凉山，后沿用。清代时候的清凉山环境优雅，香烟缭绕，漫山古木参天，浓荫蔽日，清凉寺、扫叶楼等掩映在绿树之中。清“金陵四十八景”中，清凉山占有两个：“石城霁雪”、“清凉问佛”。",