style: --

src/App.vue

@@ -96,6 +96,12 @@ provide('startBgAudio', startBgAudio)
 
 #app {
   height: 100%;
+
+  p {
+    font-family: Source Han Sans SC light;
+    line-height: 34px;
+    letter-spacing: 4px;
+  }
 }
 
 .text-indent {
@@ -109,32 +115,32 @@ provide('startBgAudio', startBgAudio)
 
 // 字体
 @font-face {
-  font-family: "Source Han Serif CN";
-  src: url("@/assets/style/SourceHanSerifCN-Regular.otf");
+  font-family: "Source Han Sans SC Bold";
+  src: url("@/assets/style/Source Han Sans SC Bold.otf");
 }
 @font-face {
-  font-family: "Source Han Serif CN-Bold";
-  src: url("@/assets/style/SourceHanSerifCN-Bold.otf");
+  font-family: "Source Han Sans SC light";
+  src: url("@/assets/style/Source Han Sans SC light.otf");
 }
 @font-face {
-  font-family: "JingHuaLaoSong";
-  src: url("@/assets/style/jing-hua-lao-song-ti.ttf");
+  font-family: "Source Han Sans SC Normal";
+  src: url("@/assets/style/Source Han Sans SC Normal.otf");
 }
 @font-face {
-  font-family: "SourceHanSansCN-Medium";
-  src: url("@/assets/style/SourceHanSansCN-Medium.otf");
+  font-family: "Source Han Sans SC Regular";
+  src: url("@/assets/style/Source Han Sans SC Regular.otf");
 }
 @font-face {
-  font-family: "SourceHanSerifCN-Heavy";
-  src: url("@/assets/style/SourceHanSerifCN-Heavy.otf");
+  font-family: "Source Han Serif CN Heavy";
+  src: url("@/assets/style/Source Han Serif CN-Heavy.otf");
 }
 @font-face {
-  font-family: "SourceHanSansSC-Bold";
-  src: url("@/assets/style/SourceHanSansSC-Bold-2.otf");
+  font-family: "SourceHanSansSC-ExtraLight";
+  src: url("@/assets/style/SourceHanSansSC-ExtraLight.otf");
 }
 @font-face {
-  font-family: "SourceHanSansSC-Normal";
-  src: url("@/assets/style/SourceHanSansSC-Normal-2.otf");
+  font-family: "SourceHanSerifCN-SemiBold";
+  src: url("@/assets/style/SourceHanSerifCN-SemiBold.otf");
 }
 // i {
 //   font-style: italic;

src/components/CameraContent-1-1-1.vue

@@ -309,8 +309,7 @@ setInterval(() => {
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
-    font-weight: 800;
+    font-family: "Source Han Serif CN Heavy";
     color: #FFFFFF;
     line-height: calc(38 / @page-height-design-px * 100vh);
     display: flex;
@@ -376,13 +375,11 @@ setInterval(() => {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        padding-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >span:first-of-type{
           display: block;
           writing-mode: vertical-lr;
           font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif SC, Source Han Serif SC;
-          font-weight: 600;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #FFF7D9;
           line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -392,8 +389,7 @@ setInterval(() => {
           display: block;
           writing-mode: vertical-lr;
           font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Sans CN, Source Han Sans CN;
-          font-weight: 500;
+          font-family: "Source Han Sans SC Regular";
           color: #43310E;
           line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -408,8 +404,7 @@ setInterval(() => {
         background: #796545;
         border-radius: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #FFFFFF;
         line-height: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -430,8 +425,7 @@ setInterval(() => {
         background-position: center center;
         writing-mode: vertical-lr;
         font-size: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #43310E;
         line-height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -508,8 +502,7 @@ setInterval(() => {
         padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
         font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: "SourceHanSansSC-Normal";
-        font-weight: bold;
+        font-family: "Source Han Serif CN Heavy";
         color: #43310E;
         line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -524,12 +517,7 @@ setInterval(() => {
         padding-right: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >p{
           font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: 300;
           color: #000000;
-          letter-spacing: 2px;
-          line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          // letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
       >img.city{
@@ -681,8 +669,7 @@ setInterval(() => {
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: bold;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #43310E;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-1-1-2.vue

@@ -134,7 +134,7 @@ const tab1ContentPageNumber = ref(1)
       left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(217 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Serif CN;
+      font-family: "SourceHanSerifCN-SemiBold";
       color: #FBF7DC;
       line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       writing-mode: vertical-lr;
@@ -158,6 +158,7 @@ const tab1ContentPageNumber = ref(1)
         background: #AC997F;
         font-size: 18px;
         letter-spacing: 8px;
+        font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
       }
       >button.active{

src/components/CameraContent-1-1-3.vue

@@ -92,8 +92,7 @@ const emit = defineEmits(['close'])
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
         line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-1-2-1.vue

@@ -180,7 +180,7 @@ const displayingHotspotIdx = ref(-1)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
+    font-family: "Source Han Serif CN Heavy";
     font-weight: 800;
     color: #FFFFFF;
     line-height: calc(38 / @page-height-design-px * 100vh);
@@ -233,8 +233,7 @@ const displayingHotspotIdx = ref(-1)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: bold;
+          font-family: "Source Han Serif CN Heavy";
           color: #F4D085;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: 0.5em;
@@ -332,8 +331,7 @@ const displayingHotspotIdx = ref(-1)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: bold;
+          font-family: "Source Han Serif CN Heavy";
           color: #43310E;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-1-2-2.vue

@@ -140,6 +140,7 @@ const activeTabIdx = ref(0)
       line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       writing-mode: vertical-lr;
       letter-spacing: 0.3em;
+      font-family: "SourceHanSerifCN-SemiBold";
     }
     >.tabbar{
       position: absolute;
@@ -160,6 +161,7 @@ const activeTabIdx = ref(0)
         color: #FFF3C3;
         letter-spacing: 8px;
         font-size: 19px;
+        font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
       }
       >button.active{

src/components/CameraContent-1-3-2.vue

@@ -137,8 +137,7 @@ const displayingHotspotIdx = ref(0)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
-    font-weight: 800;
+    font-family: "Source Han Serif CN Heavy";
     color: #FFFFFF;
     line-height: calc(38 / @page-height-design-px * 100vh);
     display: flex;
@@ -186,12 +185,11 @@ const displayingHotspotIdx = ref(0)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: bold;
+          font-family: "Source Han Serif CN Heavy";
           color: #F4D085;
           line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: 0.5em;
-          padding-right: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-right: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           padding-bottom: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           z-index: 5;
         }
@@ -263,8 +261,7 @@ const displayingHotspotIdx = ref(0)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: "SourceHanSansSC-Normal";
-          font-weight: bold;
+          font-family: "Source Han Serif CN Heavy";
           color: #43310E;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-2-2-1.vue

@@ -93,20 +93,16 @@ const emit = defineEmits(['close'])
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
-        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{

src/components/CameraContent-2-2-2.vue

@@ -8,7 +8,7 @@
     <div class="content-wrap">
       <div class="left">
         <h2 class="one">
-          磁县漕船
+          磁县漕船（模型）
         </h2>
         <p class=" text-indent">
           船长108cm、船宽28cm、船高26cm
@@ -33,6 +33,7 @@
           alt=""
           draggable="false"
         >
+        <p> 图注：模型（依据史料定制复原）</p>
       </div>
     </div>
   </div>
@@ -99,20 +100,16 @@ const emit = defineEmits(['close'])
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
-        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
@@ -133,15 +130,15 @@ const emit = defineEmits(['close'])
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >img{
-        position: absolute;
-        left: 0;
-        top: 0;
         width: 100%;
         height: 100%;
-        background: rgba(145,129,117,0.25);
-        border: 1px solid #FFE88B;
         padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
+      >p{
+        text-align: center;
+        line-height: 1.5;
+        // margin-top: 120%;
+      }
     }
   }
 }

src/components/CameraContent-2-2-3.vue

@@ -97,20 +97,16 @@ const emit = defineEmits(['close'])
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
-        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
@@ -136,8 +132,6 @@ const emit = defineEmits(['close'])
         // top: 0;
         width: 100%;
         height: 100%;
-        background: rgba(145,129,117,0.25);
-        border: 1px solid #FFE88B;
         margin: 0;
         padding: 0;
         padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-2-3-1.vue

@@ -92,10 +92,9 @@ const currentSwitchIdx = ref(0)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
-    font-weight: 800;
+    font-family: "Source Han Serif CN Heavy";
     color: #514418;
-    line-height: calc(38 / @page-height-design-px * 100vh);
+    line-height: calc(35 / @page-height-design-px * 100vh);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -124,20 +123,16 @@ const currentSwitchIdx = ref(0)
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
-        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
@@ -153,9 +148,9 @@ const currentSwitchIdx = ref(0)
       }
     }
     >.right{
-      flex: 0 0 auto;
+      flex-shrink: 0;
       position: relative;
-      width: calc(788 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 788px;
       height: calc(387 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background: rgba(145,129,117,0.25);
       border: 1px solid #FFE88B;

src/components/CameraContent-2-3-2.vue

@@ -93,11 +93,9 @@
       <div
         v-if="activeTabIdx === 3"
         class="tab-content tab-2-content"
-        style="align-items: center;"
       >
         <p
           class="text-indent"
-          style="width: 288px;"
         >
           元代龙泉窑蓬勃发展，生产规模扩大，产量剧增。龙泉窑遗址曾发现印有八思巴文的碗、盘等遗物，因此有专家认为龙泉窑曾为官府烧造瓷器。龙泉窑瓷器也是元大都遗址出土瓷器的重要种类之一。
         </p>
@@ -114,18 +112,15 @@
           </p>
           <div
             class="img-box__bg"
-            style="left: 0; bottom: -10px;"
           />
         </div>
       </div>
       <div
         v-if="activeTabIdx === 4"
         class="tab-content tab-2-content "
-        style="align-items: center; justify-content: center;"
       >
         <p
           class="text-indent"
-          style="width: 282px;  padding-right: 55px;"
         >
           以磁州窑为代表的许多北方窑场，在元代烧制以白地黑花或剔划花为主的陶瓷器，其中不乏器形较大、胎体厚重、装饰题材丰富的器物，具有突出的时代风格。有学者曾进行统计，经考古发掘在元大都出土的瓷器（包括瓷片）中，以磁州窑系的数量最多，约占总数的 40%。
         </p>
@@ -179,8 +174,8 @@ const activeTabIdx = ref(1)
 
 <style lang="less" scoped>
 .img-tips {
-  position:absolute;left:0;right: 0;text-align:center;bottom:18px;color: #43310E; text-indent: 0;
-  letter-spacing: 2px;
+  position:absolute;left:0;right: 0;text-align:center;bottom:0;color: #43310E; text-indent: 0;
+  letter-spacing: 2px !important;
   font-size: 14px;
 }
 .camera-content-1-1 {
@@ -222,13 +217,14 @@ const activeTabIdx = ref(1)
     >h1 {
       position: absolute;
       left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(208 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Source Han Serif CN;
       color: #FBF7DC;
       line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       writing-mode: vertical-lr;
       letter-spacing: 0.3em;
+      font-family: "SourceHanSerifCN-SemiBold";
     }
 
     >.tabbar {
@@ -250,6 +246,7 @@ const activeTabIdx = ref(1)
         color: #FFF3C3;
         font-size: 19px;
         letter-spacing: 1px;
+        font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0, 0, 0, 0.25);
       }
 
@@ -277,11 +274,13 @@ const activeTabIdx = ref(1)
       height: calc(750 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: flex;
       justify-content: center;
+      align-items: center;
     }
 
     .img-box {
       position: relative;
-      width: calc(448 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 410px;
+      flex-shrink: 0;
       padding: 10px;
       box-sizing: border-box;
       display: flex;
@@ -333,7 +332,6 @@ const activeTabIdx = ref(1)
             padding-right: 0.5em;
             margin-left: 10px;
             letter-spacing: 4px;
-            font-family: "SourceHanSansSC-Normal";
           }
 
         }
@@ -349,8 +347,7 @@ const activeTabIdx = ref(1)
           background-repeat: no-repeat;
           background-position: left center;
           font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN;
-          font-weight: 600;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #6A3906;
           line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -381,8 +378,7 @@ const activeTabIdx = ref(1)
           background-repeat: no-repeat;
           background-position: center center;
           font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN;
-          font-weight: 600;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #6A3906;
           line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -433,7 +429,6 @@ const activeTabIdx = ref(1)
       justify-content: space-between;
 
       >p {
-        margin-top: 20px;
         padding-left: 40px;
         width: calc(410 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         max-height: calc(650 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -443,7 +438,6 @@ const activeTabIdx = ref(1)
         // font-weight: 300;
         color: #000000;
         line-height: 30px;
-        font-family: "SourceHanSansSC-Normal";
         box-sizing: content-box;
         // letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }

src/components/CameraContent-2-3-3.vue

@@ -80,20 +80,16 @@ const emit = defineEmits(['close'])
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
-        font-weight: 600;
+        font-family: "SourceHanSerifCN-SemiBold";
         color: #6A3906;
-        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{

src/components/CameraContent-3-1-1.vue

@@ -127,13 +127,13 @@ const activeTabIdx = ref(1)
     >h1{
       position: absolute;
       left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(181 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(190 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Serif CN;
+      font-family: "SourceHanSerifCN-SemiBold";
       color: #FBF7DC;
       line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       writing-mode: vertical-lr;
-      letter-spacing: 0.3em;
+      letter-spacing: 0.23em;
     }
     >.tabbar{
       position: absolute;
@@ -153,6 +153,7 @@ const activeTabIdx = ref(1)
         font-size: 19px;
         color: #FFF3C3;
         letter-spacing: 1px;
+        font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
       }
       >button.active{
@@ -191,8 +192,7 @@ const activeTabIdx = ref(1)
           background-repeat: no-repeat;
           background-position: center center;
           font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN;
-          font-weight: 600;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #6A3906;
           line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-3-1-2.vue

@@ -167,13 +167,13 @@ const activeTabIdx = ref(1)
     >h1{
       position: absolute;
       left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(181 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: calc(190 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Serif CN;
+      font-family: "SourceHanSerifCN-SemiBold";
       color: #FBF7DC;
       line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       writing-mode: vertical-lr;
-      letter-spacing: 0.3em;
+      letter-spacing: 0.23em;
     }
     >.tabbar{
       position: absolute;
@@ -193,6 +193,7 @@ const activeTabIdx = ref(1)
         font-size: 19px;
         color: #FFF3C3;
         letter-spacing: 1px;
+        font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
       }
       >button.active{
@@ -234,8 +235,7 @@ const activeTabIdx = ref(1)
           background-repeat: no-repeat;
           background-position: center center;
           font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN;
-          font-weight: 600;
+          font-family: "SourceHanSerifCN-SemiBold";
           color: #6A3906;
           line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -326,13 +326,13 @@ const activeTabIdx = ref(1)
             >.item-title{
               color: #AC9468;
               font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              font-family: 'SourceHanSansSC-Bold';
+              font-family: "Source Han Sans SC Bold";
             }
             >.item-span{
               color: #000000;
               margin-top: 10px;
               font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              font-family: 'SourceHanSansSC-Normal';
+              font-family: "Source Han Sans SC Normal";
             }
           }
           >img {

src/components/CameraContent-3-2-2.vue

@@ -113,8 +113,7 @@ const next = () => {
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
-    font-weight: 800;
+    font-family: "SourceHanSerifCN-SemiBold";
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);
     display: flex;
@@ -180,28 +179,26 @@ const next = () => {
         width: calc(700 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >.left-title {
           width: calc(579 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #6A3906 ;
-          font-family: 'SourceHanSansSC-Bold';
+          font-family: "SourceHanSerifCN-SemiBold";
           font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           background: url(@/assets/images/camera-content-3-1-3-tab-1-img.png);
           background-size: cover;
-          line-height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          padding-left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          padding-top: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
         >.left-text {
-          font-family: 'SourceHanSansSC-Normal';
-          margin-top: 25px;
+          margin-top: 15px;
           height: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           overflow: auto;
-          font-family: 'SourceHanSansSC-Normal';
-          // letter-spacing: 3px;
           line-height: 30px;
-          >strong {
+          >strong p {
             color: #000000;
-            font-family: 'SourceHanSansSC-Bold';
-            margin-bottom: 10px;
+            font-family: "Source Han Sans SC Bold" !important;
+          }
+          p {
+            font-family: "Source Han Sans SC Normal" !important;
           }
         }
       }

src/components/CameraContent-3-2-3.vue

@@ -94,8 +94,7 @@ const title = '表演元曲的著名演员'
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: "SourceHanSansSC-Normal";
-    font-weight: 800;
+    font-family: "SourceHanSerifCN-SemiBold";
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);
     display: flex;
@@ -199,14 +198,14 @@ const title = '表演元曲的著名演员'
         position: relative;
         padding: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >.right-title {
-          width: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: 76px;
+          height: 242px;
           background: url(@/assets/images/CameraContent-3-2-3-right-title-bg.png);
           background-size: cover;
           color: #43310E ;
-          font-family: 'Source Han Serif CN-Bold';
+          font-family: "Source Han Serif CN Heavy";
           position: absolute;
-          left: calc(-30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: -29px;
           top: 10%;
           font-size: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           writing-mode: vertical-lr;
@@ -217,12 +216,8 @@ const title = '表演元曲的著名演员'
           align-items: center;
         }
         >p {
-          max-width: 80%;
           max-height: 90%;
-          overflow: auto;
           font-size: 20px;
-          // letter-spacing: 0.3em;
-          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
     }

src/components/HotspotDialog-1.vue

@@ -635,7 +635,7 @@ const currentMsg = computed(() => {
       return ["戏台上有元代刻石的砂石柱（蒙大元国至元二十年岁次癸未季春竖"]
     }
     return [
-      "17:55方寸戏台演绎人生百态，折射出普通人的情感、精神与现实生活。离开雅集活动现场，赵孟頫来到一座表演元曲的戏台，舞台上大都的著名演员正在进行元曲表演，精彩之处不时引得台下阵阵掌声。",
+      "方寸戏台演绎人生百态，折射出普通人的情感、精神与现实生活。离开雅集活动现场，赵孟頫来到一座表演元曲的戏台，舞台上大都的著名演员正在进行元曲表演，精彩之处不时引得台下阵阵掌声。",
     ]
   }
 

src/components/UserGuide.vue

@@ -148,6 +148,10 @@ const handleClose = () => {
       animation-iteration-count: infinite;
     }
   }
+  span,
+  p {
+    font-family: "Source Han Sans SC Regular" !important;
+  }
 }
 @keyframes character-default-animation {
   0% {
@@ -301,7 +305,7 @@ const handleClose = () => {
     font-size: 21px;
     color: rgba(255,255,255,0.85);
     cursor: pointer;
-    font-family: "SourceHanSansSC-Normal";
+    font-family: "Source Han Sans SC Regular";
     background: url('@/assets/images/guide/Rectangle346-min.png');
   }
   &-1 {