feat: --

packages/pc/src/components/Game4/index.vue

@@ -64,7 +64,7 @@ const playAudio = (index) => {
   }
 
   // 播放新音频
-  const audioPath = `/animations/古琴音色包/${audioList[index].file}`;
+  const audioPath = `${import.meta.env.BASE_URL}animations/古琴音色包/${audioList[index].file}`;
   currentAudio = new Audio(audioPath);
   activeIndex.value = index;
 

packages/pc/src/components/Game5/index.vue

@@ -6,11 +6,11 @@
     <template v-if="!activeBook">
       <div class="game5-img">
         <el-image
-          src="/images/1000/（由左至右至下）《朱文公校昌黎先生文集》+《四书集注》+《黄氏补千家注纪年杜工部诗史》+《朱子订定蔡氏（书）集传》.png"
+          :src="`${BASE_URL}images/1000/（由左至右至下）《朱文公校昌黎先生文集》+《四书集注》+《黄氏补千家注纪年杜工部诗史》+《朱子订定蔡氏（书）集传》.png`"
           fit="contain"
           preview-teleported
           :preview-src-list="[
-            '/images/2000/（由左至右至下）《朱文公校昌黎先生文集》+《四书集注》+《黄氏补千家注纪年杜工部诗史》+《朱子订定蔡氏（书）集传》.png',
+            `${BASE_URL}images/2000/（由左至右至下）《朱文公校昌黎先生文集》+《四书集注》+《黄氏补千家注纪年杜工部诗史》+《朱子订定蔡氏（书）集传》.png`,
           ]"
         />
         <p>
@@ -67,51 +67,52 @@ import book6 from "./images/6.png";
 const emit = defineEmits(["close"]);
 const activeBook = ref(null);
 
+const BASE_URL = import.meta.env.BASE_URL;
 const bookList = [
   {
     labelImg: book1,
-    imgPath: "/images/1000/",
-    imgPath2: "/images/2000/",
+    imgPath: `${BASE_URL}images/1000/`,
+    imgPath2: `${BASE_URL}images/2000/`,
     name: "《黄氏补千家注纪年杜工部诗史》",
     age: "元（1271-1368年）",
     desc: "唐杜甫撰，宋黄希、黄鹤补注，此本号称“千家注”，实际上收录了151家注。此书为至元二十四年（1287）月崖书堂刻本，有牌记“武夷詹光祖至元丁亥重刊于月崖书堂”。该书的最大成就是体例为按年编诗，使读者可知其先后的大致出处，且考证较为精确，对后世杜诗的研究有较大的影响。",
   },
   {
     labelImg: book2,
-    imgPath: "/images/1000/《朱子订定蔡氏（书）集传》.png",
-    imgPath2: "/images/2000/《朱子订定蔡氏（书）集传》.png",
+    imgPath: `${BASE_URL}images/1000/《朱子订定蔡氏（书）集传》.png`,
+    imgPath2: `${BASE_URL}images/2000/《朱子订定蔡氏（书）集传》.png`,
     name: "《朱子订定蔡氏（书）集传》",
     age: "元（1271-1368年）",
     desc: "宋蔡沈撰，元董鼎辑注。此书为元刻佚名批校本。蔡沈，南宋人，朱熹门生。此书为元董鼎以蔡沈集传为宗，取朱熹之说为辑录，综合诸家之说纂注而编成。由于该书曾由朱熹订正，故称“朱子订定”。",
   },
   {
     labelImg: book3,
-    imgPath: "/images/1000/《少微家塾点校附音通鉴节要》.png",
-    imgPath2: "/images/2000/《少微家塾点校附音通鉴节要》.png",
+    imgPath: `${BASE_URL}images/1000/《少微家塾点校附音通鉴节要》.png`,
+    imgPath2: `${BASE_URL}images/2000/《少微家塾点校附音通鉴节要》.png`,
     name: "《少微家塾点校附音通鉴节要》",
     age: "元（1271-1368年）",
     desc: "宋江贽撰。书为元至治元年（1321）彭氏钟秀家塾刻本，有双行牌记“至治辛酉彭氏钟秀塾新刊”。江贽，字叔圭，人称少微先生，今武夷山市人，理学名贤。此书是最早缩写的《资治通鉴》，是留于家塾自用的普及性史书。",
   },
   {
     labelImg: book4,
-    imgPath: "/images/1000/《增入音注括例始末胡文定公春秋传》-2.png",
-    imgPath2: "/images/2000/《增入音注括例始末胡文定公春秋传》-2.png",
+    imgPath: `${BASE_URL}images/1000/《增入音注括例始末胡文定公春秋传》-2.png`,
+    imgPath2: `${BASE_URL}images/2000/《增入音注括例始末胡文定公春秋传》-2.png`,
     name: "《增入音注括例始末胡文定公春秋传》",
     age: "元（1271-1368年）",
     desc: "宋胡安国撰，林尧叟音注。此书为元初刻佚名批本，牌记已腐朽，仅剩“绣梓”二字。胡文定公，即胡安国，字康侯，今武夷山市人。“胡传”《春秋》，不仅为史学著作，且有哲学层面上的思考，为研究春秋的经典著作。林尧叟在原书中加入了一些内容，为标注本，对研究“胡传”有较高的参考价值。",
   },
   {
     labelImg: book5,
-    imgPath: "/images/1000/《朱文公校昌黎先生文集》.png",
-    imgPath2: "/images/2000/《朱文公校昌黎先生文集》.png",
+    imgPath: `${BASE_URL}images/1000/《朱文公校昌黎先生文集》.png`,
+    imgPath2: `${BASE_URL}images/2000/《朱文公校昌黎先生文集》.png`,
     name: "《朱文公校昌黎先生文集》",
     age: "元（1271-1368年）",
     desc: "唐韩愈撰，宋朱熹考异，王伯大音释。此书为元至元十八年（1281）日新书堂刻本，有牌记：“至元辛巳日新书堂重刊”。朱文公即朱熹，其认为韩愈文集版本较多，互有异同，故考订后作《韩文考异》。王伯大，字幼学，福州人，宋嘉定七年（1214）进士。",
   },
   {
     labelImg: book6,
-    imgPath: "/images/1000/",
-    imgPath2: "/images/2000/",
+    imgPath: `${BASE_URL}images/1000/`,
+    imgPath2: `${BASE_URL}images/2000/`,
     name: "《四书集注》",
     age: "元（1271-1368年）",
     desc: "宋朱熹撰。此书为元至正二十二年（1362）武林沈氏尚德堂刻本，有牌记“至正壬寅武林沈氏尚德堂刊”。武林沈氏尚德堂，是首次出现的书坊名号。《四书集注》是一部集儒家早期代表人物和程朱理学代表人物思想为一书的重要思想典籍，对中国传统文化有深远影响。",

packages/pc/src/components/Tabbar/index.vue

@@ -1,5 +1,8 @@
 <template>
   <ul class="tabbar">
+    <li v-if="$route.name === 'scroll'">
+      <img src="./images/icon_luwang_active.png" />
+    </li>
     <li
       v-for="(item, index) in FOOTER_LIST"
       :key="index"

packages/pc/src/stores/base.js

@@ -5,10 +5,34 @@ import Img1 from "../views/Home/images/bg_01-min.jpg";
 import Img3 from "../views/Scroll/images/bg.jpg";
 import Img4 from "../components/Game1/images/img_neiyi-min.png";
 import Img2 from "../components/Game1/images/bg-min.jpg";
-import Video1 from "/animations/2.mp4";
-import Video2 from "/animations/3.mp4";
+import imgLc from "../components/Game2/images/img_lc.png";
+import imgQmy from "../components/Game2/images/img_qumy.png";
+import imgLy from "../components/Game2/images/img_yqy.png";
+import imgWsy from "../components/Game2/images/img_wsy.png";
+import imgMwy from "../components/Game2/images/img_mwy.png";
 
-export const RESOURCE_LIST = [Img1, Img3, Img4, Img2, Video1, Video2];
+const BASE_URL = import.meta.env.BASE_URL;
+const Video1 = `${BASE_URL}animations/2.mp4`;
+const Video2 = `${BASE_URL}animations/3.mp4`;
+const ImgAnimations = Array.from(
+  { length: 125 },
+  (_, index) => `${BASE_URL}animations/过场1/过场1_00${index + 147}.png`
+);
+
+export const RESOURCE_LIST = [
+  Img1,
+  Img3,
+  Img4,
+  Img2,
+  ...ImgAnimations,
+  imgLc,
+  imgQmy,
+  imgLy,
+  imgWsy,
+  imgMwy,
+  Video1,
+  Video2,
+];
 
 export const useBaseStore = defineStore("base", () => {
   const mediaUrlMap = ref(new Map());

packages/pc/src/views/Collection/constants.ts

@@ -1,11 +1,13 @@
+// @ts-ignore - Vite 环境变量
+const BASE_URL = import.meta.env.BASE_URL;
 /**
  * 承运藩屏
  */
 export const CYFP_LIST = [
   {
-    img1: "/public/images/500/鲁王之宝木印.png",
-    img2: "/public/images/500/鲁王之宝木印-线稿.png",
-    imgList: ["/鲁王之宝木印.png"],
+    img1: `${BASE_URL}images/500/鲁王之宝木印.png`,
+    img2: `${BASE_URL}images/500/鲁王之宝木印-线稿.png`,
+    imgList: [`${BASE_URL}鲁王之宝木印.png`],
     name: "“鲁王之宝”木印",
     desc2: '"此印为木质贴金。龟钮，系有红色绶带，印面刻阳文篆书“鲁王之宝”。',
     desc: `
@@ -15,9 +17,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/九旒冕.png",
-    img2: "/public/images/500/九旒冕-线稿.png",
-    imgList: ["/九旒冕.png"],
+    img1: `${BASE_URL}images/500/九旒冕.png`,
+    img2: `${BASE_URL}images/500/九旒冕-线稿.png`,
+    imgList: [`${BASE_URL}九旒冕.png`],
     name: "九旒冕",
     desc2: "冕体为细竹丝编制的六边形网格状冠胎，原表敷漆纱。",
     age: "明洪武",
@@ -26,9 +28,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/戗金云龙纹朱漆木箱.png",
-    img2: "/public/images/500/戗金云龙纹朱漆木箱-线稿.png",
-    imgList: ["/戗金云龙纹朱漆木箱.png"],
+    img1: `${BASE_URL}images/500/戗金云龙纹朱漆木箱.png`,
+    img2: `${BASE_URL}images/500/戗金云龙纹朱漆木箱-线稿.png`,
+    imgList: [`${BASE_URL}戗金云龙纹朱漆木箱.png`],
     name: "戗金云龙纹朱漆木匣",
     desc2: "箱内分三层，上部为一朱漆木盒，上扣盝顶箱盖",
     desc: `
@@ -36,9 +38,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/九缝皮弁.png",
-    img2: "/public/images/500/九缝皮弁-线稿.png",
-    imgList: ["/九缝皮弁.png"],
+    img1: `${BASE_URL}images/500/九缝皮弁.png`,
+    img2: `${BASE_URL}images/500/九缝皮弁-线稿.png`,
+    imgList: [`${BASE_URL}九缝皮弁.png`],
     name: "九缝皮弁",
     desc2: "箱内分三层，上部为一朱漆木盒，上扣盝顶箱盖",
     age: "明洪武",
@@ -47,9 +49,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/白玉圭.png",
-    img2: "/public/images/500/白玉圭-线稿.png",
-    imgList: ["/白玉圭.png"],
+    img1: `${BASE_URL}images/500/白玉圭.png`,
+    img2: `${BASE_URL}images/500/白玉圭-线稿.png`,
+    imgList: [`${BASE_URL}白玉圭.png`],
     name: "白玉圭",
     desc2: "玉圭是亲王穿冕服、皮弁服时手持的礼器。",
     desc: `
@@ -57,9 +59,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/镶宝石金带饰.png",
-    img2: "/public/images/500/镶宝石金带饰-线稿.png",
-    imgList: ["/镶宝石金带饰.png"],
+    img1: `${BASE_URL}images/500/镶宝石金带饰.png`,
+    img2: `${BASE_URL}images/500/镶宝石金带饰-线稿.png`,
+    imgList: [`${BASE_URL}镶宝石金带饰.png`],
     name: "镶宝石金带饰",
     desc2: "金质托体，整体呈如意云头形。",
     desc: `
@@ -67,9 +69,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/乌纱折上巾 1.png",
-    img2: "/public/images/500/乌纱折上巾-线稿 1.png",
-    imgList: ["/乌纱折上巾 1.png", "乌纱折上巾-1 1.png"],
+    img1: `${BASE_URL}images/500/乌纱折上巾 1.png`,
+    img2: `${BASE_URL}images/500/乌纱折上巾-线稿 1.png`,
+    imgList: [`${BASE_URL}乌纱折上巾 1.png`, `${BASE_URL}乌纱折上巾-1 1.png`],
     name: "乌纱折上巾",
     desc2: "因帽覆乌纱，两翅向上折于帽后而得名，由幞（fú）头演变而来。",
     desc: `
@@ -77,9 +79,10 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/妆金四团龙纹缎袍 1.png",
-    img2: "/public/images/500/妆金四团龙纹缎袍-线稿 1.png",
-    imgList: ["/妆金四团龙纹缎袍 1.png"],
+    img1: `${BASE_URL}images/500/妆金四团龙纹缎袍 1.png`,
+    img2: `${BASE_URL}images/500/妆金四团龙纹缎袍-线稿 1.png`,
+    imgList: [`${BASE_URL}妆金四团龙纹缎袍 1.png`],
+    imgScale: true,
     name: "明初亲王圆领袍",
     desc2: "明代在洪武元年（1368）便制定了冠服制度",
     age: "明洪武",
@@ -88,9 +91,9 @@ export const CYFP_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/金玉带 1.png",
-    img2: "/public/images/500/金玉带-线稿 1.png",
-    imgList: ["/金玉带 1.png", "/金镶灵芝纹白玉带 1.png"],
+    img1: `${BASE_URL}images/500/金玉带 1.png`,
+    img2: `${BASE_URL}images/500/金玉带-线稿 1.png`,
+    imgList: [`${BASE_URL}金玉带 1.png`, `${BASE_URL}金镶灵芝纹白玉带 1.png`],
     name: "玉带",
     desc2: "根据帝王、官员等级的不同，常服革带的带銙使用玉、金、银等不同材质",
     desc: `
@@ -104,10 +107,11 @@ export const CYFP_LIST = [
  */
 export const ARYZ_LIST = [
   {
-    img1: "/public/images/500/钱选白莲图.png",
-    img2: "/public/images/500/钱选白莲图-线稿.png",
-    imgList: ["/钱选白莲图.png"],
+    img1: `${BASE_URL}images/500/钱选白莲图.png`,
+    img2: `${BASE_URL}images/500/钱选白莲图-线稿.png`,
+    imgList: [`${BASE_URL}钱选白莲图.png`],
     name: "钱选白莲图",
+    imgScale: true,
     desc2: "纸本设色。绘工笔白莲，画面三花三叶",
     age: "元（1271-1368年）",
     desc: `
@@ -115,9 +119,10 @@ export const ARYZ_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/葵花蛱蝶扇面图.png",
-    img2: "/public/images/500/葵花蛱蝶扇面图-线稿.png",
-    imgList: ["/葵花蛱蝶扇面图.png"],
+    img1: `${BASE_URL}images/500/葵花蛱蝶扇面图.png`,
+    img2: `${BASE_URL}images/500/葵花蛱蝶扇面图-线稿.png`,
+    imgList: [`${BASE_URL}葵花蛱蝶扇面图.png`],
+    imgScale: true,
     name: "葵石蛱蝶图",
     desc2: "绢本设色，扇面，两面。通幅赭色渲染",
     age: "宋（960-1279年）",
@@ -126,9 +131,9 @@ export const ARYZ_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/白玉花型杯.png",
-    img2: "/public/images/500/白玉花型杯-线稿.png",
-    imgList: ["/白玉花型杯.png"],
+    img1: `${BASE_URL}images/500/白玉花型杯.png`,
+    img2: `${BASE_URL}images/500/白玉花型杯-线稿.png`,
+    imgList: [`${BASE_URL}白玉花型杯.png`],
     name: "白玉花形杯",
     desc2: "白玉花形杯杯体为和田白玉，采用圆雕与镂雕相结合的手法",
     desc: `
@@ -136,9 +141,9 @@ export const ARYZ_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/水晶鹿镇纸.png",
-    img2: "/public/images/500/水晶鹿镇纸-线稿.png",
-    imgList: ["/水晶鹿镇纸.png"],
+    img1: `${BASE_URL}images/500/水晶鹿镇纸.png`,
+    img2: `${BASE_URL}images/500/水晶鹿镇纸-线稿.png`,
+    imgList: [`${BASE_URL}水晶鹿镇纸.png`],
     name: "水晶鹿镇纸",
     desc2: "",
     desc: `
@@ -151,9 +156,9 @@ export const ARYZ_LIST = [
  */
 export const LFKB_LIST = [
   {
-    img1: "/public/images/500/青白釉云龙纹盖罐.png",
-    img2: "/public/images/500/青白釉云龙纹盖罐-线稿.png",
-    imgList: ["/青白釉云龙纹盖罐.png"],
+    img1: `${BASE_URL}images/500/青白釉云龙纹盖罐.png`,
+    img2: `${BASE_URL}images/500/青白釉云龙纹盖罐-线稿.png`,
+    imgList: [`${BASE_URL}青白釉云龙纹盖罐.png`],
     name: "青白釉云龙纹盖罐",
     desc2: "圆唇，直口，短颈，圆鼓腹，平底，矮圈足。盖呈倒荷叶形，宝珠纽。",
     desc: `
@@ -161,9 +166,9 @@ export const LFKB_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/戗金山字纹黑漆卷木胎罐.png",
-    img2: "/public/images/500/戗金山字纹黑漆卷木胎罐-线稿.png",
-    imgList: ["/戗金山字纹黑漆卷木胎罐.png"],
+    img1: `${BASE_URL}images/500/戗金山字纹黑漆卷木胎罐.png`,
+    img2: `${BASE_URL}images/500/戗金山字纹黑漆卷木胎罐-线稿.png`,
+    imgList: [`${BASE_URL}戗金山字纹黑漆卷木胎罐.png`],
     name: "戗金山字纹黑漆夹纻罐",
     age: "明洪武",
     desc2: "敛口，微鼓腹，平底内凹，矮圈足，下腹近底部有一周凸棱",
@@ -172,9 +177,9 @@ export const LFKB_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/12.52（2）木四足束腰方几-1 1.png",
-    img2: "/public/images/500/12.52（2）木四足束腰方几-1-线稿.png",
-    imgList: ["/12.52（2）木四足束腰方几-1 1.png"],
+    img1: `${BASE_URL}images/500/12.52（2）木四足束腰方几-1 1.png`,
+    img2: `${BASE_URL}images/500/12.52（2）木四足束腰方几-1-线稿.png`,
+    imgList: [`${BASE_URL}12.52（2）木四足束腰方几-1 1.png`],
     name: "朱木四足束腰方几",
     desc2: "明器，朱漆多已脱落",
     desc: `
@@ -182,9 +187,9 @@ export const LFKB_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/37000002-044187-A-1.png",
-    img2: "/public/images/500/37000002-044187-A-1-线稿.png",
-    imgList: ["/37000002-044187-A-1.png"],
+    img1: `${BASE_URL}images/500/37000002-044187-A-1.png`,
+    img2: `${BASE_URL}images/500/37000002-044187-A-1-线稿.png`,
+    imgList: [`${BASE_URL}37000002-044187-A-1.png`],
     name: "卧具",
     desc2: "中国古代家具中的卧具大概可分为四种：榻、罗汉床、架子床、拔步床",
     desc: `
@@ -192,9 +197,9 @@ export const LFKB_LIST = [
     `,
   },
   {
-    img1: "/public/images/500/12.55朱漆木衣架-1.png",
-    img2: "/public/images/500/12.55朱漆木衣架-1-线稿.png",
-    imgList: ["/12.55朱漆木衣架-1.png"],
+    img1: `${BASE_URL}images/500/12.55朱漆木衣架-1.png`,
+    img2: `${BASE_URL}images/500/12.55朱漆木衣架-1-线稿.png`,
+    imgList: [`${BASE_URL}12.55朱漆木衣架-1.png`],
     name: "朱漆木衣架",
     desc2: "明器，通身朱漆。两立柱分立于墩座之上",
     desc: `

packages/pc/src/views/Collection/detail.scss

@@ -9,6 +9,7 @@
 
   &-content {
     position: relative;
+    padding: utils.vh-calc(100) 50px;
     width: calc(100% - utils.vh-calc(517));
     height: 100%;
     transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -17,7 +18,6 @@
       width: 100%;
     }
     &-swiper {
-      padding: utils.vh-calc(100) 100px;
       width: 100%;
       height: 100%;
 
@@ -30,7 +30,7 @@
         --swiper-pagination-bullet-horizontal-gap: 10px;
         --swiper-pagination-color: #fff9c9;
         --swiper-pagination-bullet-inactive-color: white;
-        bottom: utils.vh-calc(60);
+        bottom: 0;
       }
     }
   }
@@ -64,6 +64,7 @@
     background: url("./images/img_pop.png") no-repeat center left / cover;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1;
 
     &.collapsed {
       transform: translateX(100%);

packages/pc/src/views/Collection/detail.vue

@@ -11,13 +11,13 @@
       >
         <SwiperSlide v-for="(item, index) in detail.imgList" :key="item">
           <el-image
-            lazy
+            :lazy="index > 0"
             fit="contain"
-            :src="`/public/images/1000/${item}`"
+            :src="`${BASE_URL}images/1000/${item}`"
             :initial-index="index"
             preview-teleported
             :preview-src-list="
-              detail.imgList.map((item) => `/public/images/2000/${item}`)
+              detail.imgList.map((item) => `${BASE_URL}images/2000/${item}`)
             "
           />
         </SwiperSlide>
@@ -63,6 +63,7 @@ import { Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
 
+const BASE_URL = import.meta.env.BASE_URL;
 const route = useRoute();
 const LIST = [CYFP_LIST, ARYZ_LIST, LFKB_LIST];
 const detail = LIST[route.params.id - 1][route.params.sid];

packages/pc/src/views/Collection/list.scss

@@ -32,15 +32,12 @@
       height: 100%;
       overflow: hidden;
       flex-shrink: 0;
-      border-left: 5px solid #bd9e6f;
+      border-right: 5px solid #bd9e6f;
       cursor: pointer;
 
       > div {
         height: 100%;
       }
-      &:first-child {
-        border-left: none;
-      }
       &:hover {
         overflow: visible;
         z-index: 1;
@@ -90,6 +87,9 @@
         width: utils.vh-calc(250);
         transform: translateY(-50%);
 
+        &.scale {
+          transform: translateY(-50%) scale(1.4);
+        }
         img {
           transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
             filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -98,8 +98,8 @@
 
         .last {
           position: absolute;
-          top: 50%;
-          left: utils.vh-calc(-60);
+          top: 45%;
+          left: utils.vh-calc(-40);
           transform: translateY(-50%) scale(1.2);
           z-index: -1;
         }

packages/pc/src/views/Collection/list.vue

@@ -34,7 +34,10 @@
               <p>{{ item.desc2 }}</p>
             </div>
 
-            <div class="list-content-slide-imgs">
+            <div
+              class="list-content-slide-imgs"
+              :class="{ scale: item.imgScale }"
+            >
               <img :src="item.img1" />
               <img class="last" :src="item.img2" />
             </div>

packages/pc/src/views/Cover/index.vue

@@ -21,6 +21,9 @@
 import { ref, onMounted, watch } from "vue";
 import { usePreloader } from "@shandong/base";
 import { useBaseStore, RESOURCE_LIST } from "@/stores/base";
+import imgLeft from "./images/img_left-min.png";
+import imgRight from "./images/img_right-min.png";
+import imgTip from "./images/img_tip-min.png";
 
 const baseStore = useBaseStore();
 const showCursor = ref(false);
@@ -36,8 +39,37 @@ const {
   },
 });
 
-onMounted(() => {
-  start();
+// 预加载封面图片
+const preloadCoverImages = () => {
+  return Promise.all([
+    new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = resolve;
+      img.onerror = reject;
+      img.src = imgLeft;
+    }),
+    new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = resolve;
+      img.onerror = reject;
+      img.src = imgRight;
+    }),
+    new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = resolve;
+      img.onerror = reject;
+      img.src = imgTip;
+    }),
+  ]);
+};
+
+onMounted(async () => {
+  try {
+    await preloadCoverImages();
+    start();
+  } catch (error) {
+    start();
+  }
 });
 
 watch(loadingProgress, (newVal) => {

packages/pc/src/views/Home/index.vue

@@ -50,6 +50,7 @@ import VideoAni from "@/components/VideoAni/index.vue";
 import { useBaseStore } from "@/stores/base";
 import { storeToRefs } from "pinia";
 
+const BASE_URL = import.meta.env.BASE_URL;
 const route = useRoute();
 const router = useRouter();
 const baseStore = useBaseStore();
@@ -68,7 +69,7 @@ const frameDelay = 1000 / fps; // 每帧间隔约41.67ms
 // 当前帧的图片路径
 const currentFrameSrc = computed(() => {
   const frameNum = String(currentFrame.value).padStart(5, "0");
-  return `/animations/过场1/过场1_${frameNum}.png`;
+  return `${BASE_URL}animations/过场1/过场1_${frameNum}.png`;
 });
 
 // 检查是否需要播放动画
@@ -97,7 +98,7 @@ const startAnimation = () => {
   }
 
   const firstFrameNum = String(147).padStart(5, "0");
-  const firstFrameSrc = `/animations/过场1/过场1_${firstFrameNum}.png`;
+  const firstFrameSrc = `${BASE_URL}animations/过场1/过场1_${firstFrameNum}.png`;
   const img = new Image();
   img.src = firstFrameSrc;
   img.onload = () => {

packages/pc/src/views/Scroll/index.vue

@@ -33,7 +33,7 @@
         </p>
         <div class="model1" :class="`model1-${model1Type}`">
           <video
-            src="/animations/6_batch.mp4"
+            :src="`${BASE_URL}animations/6_batch.mp4`"
             autoplay
             muted
             loop
@@ -51,7 +51,7 @@
         </p>
         <video
           class="video2"
-          src="/animations/2_batch.mp4"
+          :src="`${BASE_URL}animations/2_batch.mp4`"
           autoplay
           muted
           loop
@@ -79,10 +79,12 @@
         </div>
         <video
           class="video3"
-          src="/animations/3_batch.mp4"
+          :src="`${BASE_URL}animations/3_batch.mp4`"
           autoplay
           muted
           loop
+          preload="none"
+          loading="lazy"
           x5-playsinline="true"
           playsinline="true"
           webkit-playsinline="true"
@@ -104,9 +106,11 @@
         </p>
         <video
           class="video4"
-          src="/animations/4_batch.mp4"
+          :src="`${BASE_URL}animations/4_batch.mp4`"
           autoplay
           muted
+          preload="none"
+          loading="lazy"
           loop
           x5-playsinline="true"
           playsinline="true"
@@ -156,9 +160,11 @@
         </p>
         <video
           class="video5"
-          src="/animations/5_batch.mp4"
+          :src="`${BASE_URL}animations/5_batch.mp4`"
           autoplay
           muted
+          preload="none"
+          loading="lazy"
           loop
           x5-playsinline="true"
           playsinline="true"
@@ -253,19 +259,19 @@ import { useBaseStore } from "@/stores/base";
 import { storeToRefs } from "pinia";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { FreeMode, Mousewheel } from "swiper/modules";
-import img2 from "./images/img_02-min.png";
-import img3 from "./images/img_03-min.png";
-import img4 from "./images/img_04-min.png";
-import img5 from "./images/img_05-min.png";
-import img6 from "./images/img_06-min.png";
-import imgBg1 from "./images/img_bg_01-min.png";
-import imgBg2 from "./images/img_bg_02-min.png";
-import imgBg3 from "./images/img_bg_03-min.png";
-import imgBg4 from "./images/img_bg_04-min.png";
-import imgBg5 from "./images/img_bg_05-min.png";
-import imgBg10 from "./images/img_bg_10-min.png";
-import imgBg11 from "./images/img_bg_11-min.png";
-import imgBg12 from "./images/img_bg_12-min.png";
+// import img2 from "./images/img_02-min.png";
+// import img3 from "./images/img_03-min.png";
+// import img4 from "./images/img_04-min.png";
+// import img5 from "./images/img_05-min.png";
+// import img6 from "./images/img_06-min.png";
+// import imgBg1 from "./images/img_bg_01-min.png";
+// import imgBg2 from "./images/img_bg_02-min.png";
+// import imgBg3 from "./images/img_bg_03-min.png";
+// import imgBg4 from "./images/img_bg_04-min.png";
+// import imgBg5 from "./images/img_bg_05-min.png";
+// import imgBg10 from "./images/img_bg_10-min.png";
+// import imgBg11 from "./images/img_bg_11-min.png";
+// import imgBg12 from "./images/img_bg_12-min.png";
 import imgTitle2 from "./images/title2-min.png";
 import imgTitle3 from "./images/title3-min.png";
 import imgTitle4 from "./images/title4-min.png";
@@ -280,6 +286,7 @@ import Game5 from "@/components/Game5/index.vue";
 import Tabbar from "@/components/Tabbar/index.vue";
 import VideoAni from "@/components/VideoAni/index.vue";
 
+const BASE_URL = import.meta.env.BASE_URL;
 const baseStore = useBaseStore();
 const { mediaUrlMap } = storeToRefs(baseStore);
 const showVideo = ref(false);