feat: change three model detail style

packages/mobile/src/components/Sidebar.vue

@@ -44,7 +44,7 @@ const TABBAR = [
     name: ["exhibition"],
   },
   {
-    label: "视频资料",
+    label: "多媒体资料",
     name: ["media", "mediaDetail"],
   },
 ];

packages/mobile/src/views/Antiquity/Detail/index.scss

@@ -32,6 +32,9 @@
   &-img {
     padding: 48px;
   }
+  iframe {
+    height: 40vh;
+  }
   &-tools {
     display: flex;
     align-items: center;
@@ -63,32 +66,4 @@
       line-height: 50px;
     }
   }
-  &-three {
-    display: flex;
-    flex-direction: column;
-    padding: 80px 0;
-    gap: 40px;
-    height: 100%;
-
-    h3 {
-      color: #ce1a28;
-      text-align: center;
-      font-size: 36px;
-    }
-    iframe {
-      flex: 1;
-      height: 0;
-    }
-    &-tools {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 60px;
-
-      img {
-        width: 60px;
-        height: 60px;
-      }
-    }
-  }
 }

packages/mobile/src/views/Antiquity/Detail/index.vue

@@ -17,26 +17,10 @@
       <div class="antiquity-detail-tools">
         <img src="@/assets/images/icon_2-min.png" @click="preview = true" />
       </div>
-
-      <div class="antiquity-detail-wrap">
-        <h3>{{ detail?.name }}</h3>
-        <div>
-          <p>文物等级：{{ detail?.level || "--" }}</p>
-          <p>尺寸：{{ detail?.size || "--" }}</p>
-          <p>时代：{{ detail?.sd || "--" }}</p>
-          <p>质地：{{ detail?.zd || "--" }}</p>
-          <p>来源：{{ detail?.from || "--" }}</p>
-          <p>类别：{{ detail?.type || "--" }}</p>
-          <p>存放位置：{{ detail?.address || "--" }}</p>
-          <p v-html="detail?.content" />
-        </div>
-      </div>
     </template>
-
-    <div v-else class="antiquity-detail-three">
-      <h3>{{ detail?.name }}</h3>
+    <template v-else>
       <iframe ref="iframe" :src="iframeUrl" />
-      <div class="antiquity-detail-three-tools">
+      <div class="antiquity-detail-tools">
         <img
           draggable="false"
           src="@/assets/images/icon_5-min.png"
@@ -53,6 +37,20 @@
           @click="handleResetView"
         />
       </div>
+    </template>
+
+    <div class="antiquity-detail-wrap">
+      <h3>{{ detail?.name }}</h3>
+      <div>
+        <p v-if="detail?.level">文物等级：{{ detail?.level || "--" }}</p>
+        <p v-if="detail?.size">尺寸：{{ detail?.size || "--" }}</p>
+        <p v-if="detail?.sd">时代：{{ detail?.sd || "--" }}</p>
+        <p v-if="detail?.zd">质地：{{ detail?.zd || "--" }}</p>
+        <p v-if="detail?.from">来源：{{ detail?.from || "--" }}</p>
+        <p v-if="detail?.type">类别：{{ detail?.type || "--" }}</p>
+        <p v-if="detail?.address">存放位置：{{ detail?.address || "--" }}</p>
+        <p v-html="detail?.content" />
+      </div>
     </div>
   </div>
 

packages/pc/src/components/Topbar.vue

@@ -36,7 +36,7 @@ const TABBAR = [
     name: ["exhibition"],
   },
   {
-    label: "视频资料",
+    label: "多媒体资料",
     name: ["media", "mediaDetail"],
   },
 ];

packages/pc/src/views/Antiquity/Detail/index.scss

@@ -18,7 +18,8 @@
       flex-direction: column;
       width: 594px;
 
-      .el-image {
+      .el-image,
+      iframe {
         height: 459px;
       }
       &-tools {
@@ -26,6 +27,7 @@
         align-items: center;
         justify-content: center;
         margin-top: 70px;
+        gap: 60px;
 
         img {
           width: 60px;
@@ -58,34 +60,4 @@
       }
     }
   }
-  &-three {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 80vw;
-
-    h3 {
-      color: #c90110;
-      font-size: utils.vh-calc(30);
-      line-height: utils.vh-calc(40);
-    }
-    iframe {
-      margin-top: utils.vh-calc(60);
-      min-width: utils.vh-calc(594);
-      width: 100%;
-      height: utils.vh-calc(459);
-    }
-    &-tools {
-      display: flex;
-      align-items: center;
-      gap: utils.vh-calc(60);
-      margin-top: utils.vh-calc(80);
-
-      img {
-        width: utils.vh-calc(60);
-        height: utils.vh-calc(60);
-        cursor: pointer;
-      }
-    }
-  }
 }

packages/pc/src/views/Antiquity/Detail/index.vue

@@ -1,18 +1,45 @@
 <template>
   <div class="antiquity-detail">
-    <!-- 二维文物 -->
-    <div v-if="!isThree" class="antiquity-detail-two">
-      <div
-        v-if="Array.isArray(detail?.img) && detail.img.length"
-        class="antiquity-detail-two-left"
-      >
-        <ElImage :src="getEnvImagePath(detail?.minImg)" />
+    <div class="antiquity-detail-two">
+      <template v-if="!isThree">
+        <div
+          v-if="Array.isArray(detail?.img) && detail.img.length"
+          class="antiquity-detail-two-left"
+        >
+          <ElImage :src="getEnvImagePath(detail?.minImg)" />
 
+          <div class="antiquity-detail-two-left-tools">
+            <img
+              draggable="false"
+              src="@/assets/images/icon_2-min.png"
+              @click="handlePreviewImg"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="antiquity-detail-two-left">
+        <iframe ref="iframe" :src="`./model.html?m=${detail?.link}`" />
         <div class="antiquity-detail-two-left-tools">
           <img
             draggable="false"
-            src="@/assets/images/icon_2-min.png"
-            @click="handlePreviewImg"
+            :src="isFullscreen ? UnFullscreenImg : FullscreenImg"
+            @click="toggle"
+          />
+          <img
+            draggable="false"
+            src="@/assets/images/icon_5-min.png"
+            @click="handleZoom"
+          />
+          <img
+            draggable="false"
+            :src="autoPlay ? PauseImg : PlayImg"
+            @click="handleAutoPlay"
+          />
+          <img
+            draggable="false"
+            src="@/assets/images/icon_7-min.png"
+            @click="handleResetView"
           />
         </div>
       </div>
@@ -20,45 +47,17 @@
       <ElScrollbar class="antiquity-detail-two-right">
         <h3>{{ detail?.name }}</h3>
         <div class="antiquity-detail-two-right-content">
-          <p>文物等级：{{ detail?.level || "--" }}</p>
-          <p>尺寸：{{ detail?.size || "--" }}</p>
-          <p>时代：{{ detail?.sd || "--" }}</p>
-          <p>质地：{{ detail?.zd || "--" }}</p>
-          <p>来源：{{ detail?.from || "--" }}</p>
-          <p>类别：{{ detail?.type || "--" }}</p>
-          <p>存放位置：{{ detail?.address || "--" }}</p>
+          <p v-if="detail?.level">文物等级：{{ detail?.level || "--" }}</p>
+          <p v-if="detail?.size">尺寸：{{ detail?.size || "--" }}</p>
+          <p v-if="detail?.sd">时代：{{ detail?.sd || "--" }}</p>
+          <p v-if="detail?.zd">质地：{{ detail?.zd || "--" }}</p>
+          <p v-if="detail?.from">来源：{{ detail?.from || "--" }}</p>
+          <p v-if="detail?.type">类别：{{ detail?.type || "--" }}</p>
+          <p v-if="detail?.address">存放位置：{{ detail?.address || "--" }}</p>
           <p v-html="detail?.content" />
         </div>
       </ElScrollbar>
     </div>
-
-    <!-- 三维文物 -->
-    <div v-else class="antiquity-detail-three">
-      <h3>{{ detail?.name }}</h3>
-      <iframe ref="iframe" :src="`./model.html?m=${detail?.link}`" />
-      <div class="antiquity-detail-three-tools">
-        <img
-          draggable="false"
-          :src="isFullscreen ? UnFullscreenImg : FullscreenImg"
-          @click="toggle"
-        />
-        <img
-          draggable="false"
-          src="@/assets/images/icon_5-min.png"
-          @click="handleZoom"
-        />
-        <img
-          draggable="false"
-          :src="autoPlay ? PauseImg : PlayImg"
-          @click="handleAutoPlay"
-        />
-        <img
-          draggable="false"
-          src="@/assets/images/icon_7-min.png"
-          @click="handleResetView"
-        />
-      </div>
-    </div>
   </div>
 
   <ElImageViewer v-if="preview" :url-list="imgs" @close="preview = false" />