style: --

package.json

@@ -8,7 +8,7 @@
     "build:test": "cross-env VITE_APP_TITLE=大理洱海科普馆 run-p type-check \"build-only {@}\" --",
     "push:test": "cross-env node ./scripts/publish.js",
     "serve:wsyd": "cross-env VITE_APP_TITLE=中共一大纪念馆专题展厅 VITE_APP_SCENE=wsyd VITE_APP_HOT_DOMAIN=./hotspot.html vite",
-    "build:wsyd:test": "cross-env VITE_APP_TITLE=中共一大纪念馆专题展厅 VITE_APP_SCENE=wsyd run-p type-check \"build-only {@}\" --",
+    "build:wsyd:test": "cross-env VITE_APP_TITLE=中共一大纪念馆专题展厅 VITE_APP_SCENE=wsyd VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force"

src/hotspot/views/hotspot/index.wsyd.scss

@@ -33,12 +33,9 @@
     max-width: 810px;
     width: calc(100vw - 30vw);
     text-align: justify;
-
-    p {
-      text-indent: 2em;
-      font-size: 18px;
-      font-family: 'Source Han Sans CN-Medium';
-    }
+    text-indent: 2em;
+    font-size: 18px;
+    font-family: 'Source Han Sans CN-Medium';
   }
 
   &-container {
@@ -49,7 +46,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 9vh 20px;
+    padding: 0 20px;
     max-width: 1320px;
     min-width: 400px;
     width: auto;
@@ -115,6 +112,7 @@
     align-items: center;
     gap: 10px;
     transform: translateX(-50%);
+    z-index: 1;
 
     &__item {
       display: flex;
@@ -150,10 +148,7 @@
     &-info {
       margin: 0 auto;
       width: 100%;
-
-      p {
-        font-size: 12px;
-      }
+      font-size: 12px;
     }
     &-container {
       max-width: 100%;

src/hotspot/views/hotspot/index.wsyd.vue

@@ -55,6 +55,7 @@
               preview-teleported
               :preview-src-list="curList"
               :initial-index="idx"
+              @contextmenu.native.prevent
             />
           </div>
         </SwiperSlide>
@@ -96,9 +97,7 @@
     </div>
 
     <el-scrollbar :height="188" style="margin-top: 20px; height: 188px; flex-shrink: 0">
-      <div class="hotspot-page-info">
-        <p>{{ myTxt }}</p>
-      </div>
+      <div class="hotspot-page-info" v-html="myTxt"></div>
     </el-scrollbar>
   </div>
 </template>

src/index/views/home/components/article-popup/index.scss

@@ -35,9 +35,10 @@
 
     li {
       position: relative;
-      margin: 0 utils.vw-calc(60);
+      margin: 0 utils.vw-calc(45);
       font-family: 'Source Han Sans CN-Bold';
       color: #d8171e;
+      white-space: nowrap;
       text-shadow: 4px 0px 4px rgba(104, 58, 13, 0.08);
       cursor: pointer;
 

src/index/views/home/components/article-popup/index.vue

@@ -17,7 +17,7 @@
         v-for="(item, index) in LIST"
         :key="item.title"
         :class="{ active: activeTab === index }"
-        @click="activeTab = index"
+        @click="handleClick(index)"
       >
         <span>{{ item.title }}</span>
       </li>
@@ -59,6 +59,10 @@
       content: `<p>在中国共产党鼓舞下，一场反帝爱国运动在全国范围轰轰烈烈地开展起来。这一运动波及27个省区，有将近700个市、县、城镇投入，参加运动的各方面人士约1700万人。</p>`,
     },
     {
+      title: '烙印·新篇',
+      content: `<p>五卅运动沉重打击了帝国主义，大大提高了中国人民的觉悟。在党的领导下，各地接连举行五卅运动周年纪念，号召民众继续发扬反帝爱国精神，为北伐战争奠定了群众基础，并将国民革命推向高潮，揭开了中国大革命的序幕。</p>`,
+    },
+    {
       title: '结语',
       content: `
       <p>百年前的1925年，五卅运动如一声惊雷，划破黑暗的长空，震撼了整个中国大地。在那风云激荡的岁月里，无数英勇先驱挺身而出，以热血和生命谱写了一曲壮丽的抗争之歌。</p>
@@ -82,6 +86,19 @@
   });
   const activeTab = ref(0);
   const currentItem = computed(() => LIST[activeTab.value]);
+
+  const handleClick = (idx: number) => {
+    // @ts-ignore
+    window.player.director.goToHighlight([idx, 0]);
+    activeTab.value = idx;
+  };
+
+  // watch(show, (v) => {
+  //   if (v) {
+  //     // @ts-ignore
+  //     window.player.director.goToHighlight([0, 0]);
+  //   }
+  // });
 </script>
 
 <style lang="scss">

src/index/views/home/components/guide/index.scss

@@ -55,10 +55,12 @@
 }
 
 .frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: calc(100% - 20px);
   height: 90px;
   margin: 10px;
-  float: left;
 }
 
 .frame .slidee {