style: --

src/App.vue

@@ -274,6 +274,49 @@ provide('startBgAudio', startBgAudio)
     }
   }
 }
+
+.card-title {
+  position: relative;
+  height: 44px;
+  line-height: 44px !important;
+  text-align: center;
+  font-family: "SourceHanSerifCN-SemiBold" !important;
+  font-size: 28px;
+  color: #6A3906;
+  background: linear-gradient(90deg, rgba(255,226,122,0) 0%, #E3C67F 26%, #C9AD83 49%, #DDC38A 70%, rgba(249,226,148,0) 100%);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-50%);
+    background: url('@/assets/images/dot-min.png') no-repeat center / contain;
+    z-index: 1;
+  }
+  &::after {
+    display: none;
+  }
+  &.both {
+    &::before {
+      left: 10px;
+    }
+    &::after {
+      display: block;
+      right: 10px;
+    }
+  }
+  &.left {
+    text-align: left;
+    padding-left: 50px;
+
+    &::before {
+      left: 0;
+    }
+  }
+}
 </style>
 
 <style lang="less" scoped>

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

@@ -269,8 +269,8 @@ const tab1ContentPageNumber = ref(1)
       >img{
         width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(216 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        border: 1px solid #FFE88B;
-        padding: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // border: 1px solid #FFE88B;
+        // padding: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-color: rgba(145,129,117,0.25);
         object-fit: cover;
       }

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

@@ -132,8 +132,8 @@ const emit = defineEmits(['close'])
         width: 100%;
         height: 100%;
         background: rgba(145,129,117,0.25);
-        border: 1px solid #FFE88B;
-        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // border: 1px solid #FFE88B;
+        // padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
   }

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

@@ -7,12 +7,12 @@
     />
     <div class="content-wrap">
       <div class="left">
-        <img
-          class="content"
-          src="@/assets/images/camera-content-1-2-3-content.png"
-          alt=""
-          draggable="false"
-        >
+        <p class="card-title left">
+          忽必烈召见赵孟頫
+        </p>
+        <p>
+          赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
+        </p>
       </div>
       <div class="right">
         <video
@@ -81,25 +81,23 @@ const emit = defineEmits(['close'])
     align-items: center;
     >.left{
       flex: 0 0 auto;
-      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(637 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >img.content{
-        width: 100%;
+      .card-title {
+        margin-bottom: 20px;
+      }
+      p:last-child {
+        font-size: 20px;
       }
     }
     >.right{
       flex: 0 0 auto;
       position: relative;
-      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >video{
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(145,129,117,0.25);
-        background-color: black;
+
+      video {
+        background: black;
+        width: calc(900 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(453 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
   }

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

@@ -6,35 +6,35 @@
       @click="emit('close')"
     />
     <div class="content-wrap">
-      <img
-        class="content"
-        src="@/assets/images/camera-content-1-3-3-content.png"
-        alt=""
-        draggable="false"
-      >
-    </div>
-    <div class="design-wrap-right">
-      <!-- 左右按钮 -->
-      <img
-        class="btn-left"
-        src="@/assets/images/CameraContent-3-1-3-left.png"
-        alt=""
-        :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
-        @click="previous()"
-      >
-      <img
-        class="btn-right"
-        src="@/assets/images/CameraContent-3-1-3-right.png"
-        alt=""
-        :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
-        @click="next()"
-      >
-      <img
-        class="detail-img"
-        draggable="false"
-        :src="require(`@/assets/images/133${currentSwitchIdx + 1}-min.jpg`)"
-        alt=""
-      >
+      <p class="card-title left">
+        重要建筑构件瓦当与滴水
+      </p>
+      <p class="text-indent">
+        瓦当与滴水是用在古代建筑檐口的瓦件，分别与筒瓦、板瓦相连，既具有保护木构的作用，也有装饰和等级意味。元代高等级建筑使用的龙纹瓦当、滴水，在元大都、元中都、元上都都有不少发现，其中以黄绿琉璃最为常见。元人尚白，考古也曾发现白色瓷瓦或琉璃瓦。发现数量更多的是灰陶瓦件，元大都出土的灰陶瓦当、滴水，以花草纹、凤鸟纹、兽面纹为大宗。
+      </p>
+      <div class="design-wrap-right">
+        <!-- 左右按钮 -->
+        <img
+          class="btn-left"
+          src="@/assets/images/CameraContent-3-1-3-left.png"
+          alt=""
+          :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
+          @click="previous()"
+        >
+        <img
+          class="btn-right"
+          src="@/assets/images/CameraContent-3-1-3-right.png"
+          alt=""
+          :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
+          @click="next()"
+        >
+        <img
+          class="detail-img"
+          draggable="false"
+          :src="require(`@/assets/images/133${currentSwitchIdx + 1}.png`)"
+          alt=""
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -50,8 +50,9 @@ const {
 const emit = defineEmits(['close'])
 const currentSwitchIdx = ref(0)
 const imgLists = [
-  '@/assets/images/1331-min.png',
-  // '@/assets/images/1332-min.jpeg',
+  '@/assets/images/1331',
+  '@/assets/images/1332',
+  '@/assets/images/1333',
 ]
 
 const previous = () => {
@@ -98,6 +99,7 @@ const next = () => {
     position: absolute;
     left: 50%;
     top: 54%;
+    padding: 140px 975px 140px 150px;
     width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
@@ -105,22 +107,26 @@ const next = () => {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    >img.content{
-      width: 90%;
+    box-sizing: border-box;
+
+    .card-title {
+      margin-bottom: 20px;
+    }
+    .text-indent {
+      font-size: 20px;
     }
   }
   .design-wrap-right {
-    width: calc(880 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(550 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(816 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(436 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background: rgba(145,129,117,0.25);
     border: 1px solid #FFE88B;
-    padding: 15px 10px;
     position: absolute;
-    top: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    right: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >.btn-left {
       width: 60px;
       height: 60px;
@@ -149,11 +155,6 @@ const next = () => {
         transform: translateY(-50%) scale(1.2);
       }
     }
-    >.detail-img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
   }
 }
 </style>

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

@@ -77,7 +77,7 @@
                 （1）名家收藏
               </div>
               <div class="item-span">
-                文人雅士收藏的宋元时期书画作品。
+                欣赏文人雅士收藏的宋元时期书画作品。
               </div>
             </div>
             <div class="left-list-item">
@@ -93,7 +93,7 @@
                 （3）多元艺术
               </div>
               <div class="item-span">
-                呈现蒙元时代多族互动的文化艺术成果。
+                呈现蒙元时代文化艺术成果。
               </div>
             </div>
             <div class="left-list-item">
@@ -101,7 +101,7 @@
                 （4）交流互鉴
               </div>
               <div class="item-span">
-                现场挥毫泼，品鉴、交流。
+                现场挥毫泼墨，品鉴、交流。
               </div>
             </div>
           </div>

src/components/RelicDetailForHotspot.vue

@@ -44,9 +44,8 @@
       <div
         v-if="relicInfo['年份']"
         class="age"
-      >
-        {{ relicInfo['年份'] }}
-      </div>
+        v-html="relicInfo['年份']"
+      />
       <div
         class="detail"
         v-html="relicInfo['详细描述']"
@@ -238,7 +237,7 @@ const handleFull = () => {
     }
     >.age{
       flex: 0 0 auto;
-      margin-top: 100px;
+      margin-top: 40px;
       font-size: 20px;
       font-family: Source Han Sans SC, Source Han Sans SC;
       font-weight: 300;
@@ -247,10 +246,6 @@ const handleFull = () => {
       letter-spacing: 4px;
       margin-left: calc(70 / 577 * 100%);
       margin-right: calc(70 / 577 * 100%);
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
     }
     >.detail{
       display: flex;

src/views/PanoView.vue

@@ -917,18 +917,12 @@ const hotspotIndex = ref(null)
 //   console.log('parent window: received message!', e)
 // })
 window.showHotspotDetail2 = function(hotspotInfo) {
-  console.log('parent window: 展示热点详情')
+  console.log('parent window: 展示热点高亮')
   console.log(hotspotInfo)
   console.log(hotspotInfo.hotspotTitle)
   hotspotRelicInfo.value = hotspotInfo
   msgVisible.value = false
-
-  if (hotspotInfo.hotspotTitle.split(',').length > 1) {
-    // 多文物
-    isShowHotspotDetail3.value = true
-  } else {
-    isShowHotspotDetail2.value = true
-  }
+  isShowHotspotDetail2.value = true
 }
 window.showHotspotDetail = function(hotspotInfo) {
   console.log('parent window: 展示热点详情')
@@ -936,7 +930,14 @@ window.showHotspotDetail = function(hotspotInfo) {
   console.log(hotspotInfo.hotspotTitle)
   // 约定 hotspotTitle 为场景中宝盒索引
   hotspotRelicInfo.value = hotspotInfo
-  isShowHotspotDetail.value = true
+
+  if (hotspotInfo.hotspotTitle.split(',').length > 1) {
+    // 多文物
+    isShowHotspotDetail3.value = true
+    console.log('====')
+  } else {
+    isShowHotspotDetail.value = true
+  }
 }
 /**
  * end of iframe的逻辑

src/views/RelicDetail.vue

@@ -41,9 +41,10 @@
       <h1 :title="relicInfo['名称']">
         {{ relicInfo['名称'] }}
       </h1>
-      <div class="age text-indent">
-        {{ relicInfo['年份'] }}
-      </div>
+      <div
+        class="age"
+        v-html="relicInfo['年份']"
+      />
       <div
         class="detail text-indent"
         v-html="relicInfo['详细描述']"
@@ -233,7 +234,7 @@ const handleFull = () => {
     }
     >.age{
       flex: 0 0 auto;
-      margin-top: 100px;
+      margin-top: 40px;
       font-size: 20px;
       font-family: Source Han Sans SC, Source Han Sans SC;
       font-weight: 300;
@@ -242,10 +243,6 @@ const handleFull = () => {
       letter-spacing: 4px;
       margin-left: calc(70 / 577 * 100%);
       margin-right: calc(70 / 577 * 100%);
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
     }
     >.detail{
       display: flex;