Browse Source

修改典藏模型查看

wangfumin 5 months ago
parent
commit
6637d2cddd
2 changed files with 79 additions and 39 deletions
  1. 2 2
      src/views/collection/collectDetail.vue
  2. 77 37
      src/views/exhibition/allDetailsShow.vue

+ 2 - 2
src/views/collection/collectDetail.vue

@@ -40,7 +40,7 @@
           <iframe
             id="ifr"
             v-if="getFieldValue(artifactData, 'modelFile')"
-            :src="`https://sit-kelamayi.4dage.com/model.html?m=${getFieldValue(artifactData, 'modelFile')}`"
+            :src="`${getFieldValue(artifactData, 'modelFile')}`"
             frameborder="0"
           ></iframe>
           <div v-else class="no-video">
@@ -49,7 +49,7 @@
         </div>
         <!-- 放大镜图标 -->
         <div v-if="getFieldValue(artifactData, 'modelFile')" class="zoom-icon" @click="toggleZoom">
-          <el-icon :size="24">
+          <el-icon style="color: #EFDBAC" :size="24">
             <ZoomIn v-if="!isZoomed" />
             <ZoomOut v-else />
           </el-icon>

+ 77 - 37
src/views/exhibition/allDetailsShow.vue

@@ -2,7 +2,7 @@
   <div class="detail-container">
     <!-- 返回按钮 -->
     <div v-if="isFrom !== 'weixin'" class="back-button" @click="goBack">
-      <img src="@/assets/indexPage/icon_back.png" alt="">
+      <img src="@/assets/indexPage/icon_back.png" alt="" />
     </div>
 
     <!-- 加载状态 -->
@@ -13,12 +13,24 @@
     <!-- 详情内容 -->
     <div v-else-if="detailData" :class="['detail-content', isFrom == 'weixin' ? 'notMargin' : '']">
       <!--标题 -->
-      <div class=" detail-title">{{ (isPreviewMode && detailData.titleB) ? detailData.titleB : (detailData.title ||
-        '克拉玛依市博物馆') }}</div>
+      <div class="detail-title">
+        {{
+          isPreviewMode && detailData.titleB
+            ? detailData.titleB
+            : detailData.title || '克拉玛依市博物馆'
+        }}
+      </div>
 
       <!-- 时间 -->
-      <div class="detail-time" v-if="fromtype != 'museum' && (detailData.publish || detailData.publishB)">
-        {{ formatTimeWithDash(isPreviewMode ? (detailData.publishB || detailData.publish) : detailData.publish) }}
+      <div
+        class="detail-time"
+        v-if="fromtype != 'museum' && (detailData.publish || detailData.publishB)"
+      >
+        {{
+          formatTimeWithDash(
+            isPreviewMode ? detailData.publishB || detailData.publish : detailData.publish,
+          )
+        }}
       </div>
       <div v-else class="line"></div>
       <!-- 主图 -->
@@ -27,22 +39,31 @@
       </div> -->
 
       <!-- 处理后的内容 -->
-      <div class="detail-text" v-if="isPreviewMode ? (detailData.contextB || detailData.context) : detailData.context">
+      <div
+        class="detail-text"
+        v-if="isPreviewMode ? detailData.contextB || detailData.context : detailData.context"
+      >
         <div v-html="processedContent" class="processed-html-content"></div>
       </div>
 
       <!-- 展览特有按钮 -->
-      <div class="exhibition-actions"
-        v-if="fromtype === 'exhibition' && ((isPreviewMode && detailData.webSiteB) || detailData.webSite)">
+      <div
+        class="exhibition-actions"
+        v-if="
+          fromtype === 'exhibition' &&
+          ((isPreviewMode && detailData.webSiteB) || detailData.webSite)
+        "
+      >
         <div class="online-exhibition-btn" @click="goToOnlineExhibition(detailData)">
-          <img src="@/assets/exhibition/online-kz.png" alt="线上观展" class="btn-icon">
+          <img src="@/assets/exhibition/online-kz.png" alt="线上观展" class="btn-icon" />
           线上观展
         </div>
       </div>
-      <div v-if="detailData.personCount > 0 && fromtype == 'activity'" class="active-preview-btn">
-        <a class="preview-btn">
-          活动预约
-        </a>
+      <div
+        v-if="detailData.personCount > 0 && fromtype == 'activity' && isFrom != 'weixin'"
+        class="active-preview-btn"
+      >
+        <a class="preview-btn"> 活动预约 </a>
       </div>
     </div>
 
@@ -186,7 +207,7 @@ onMounted(() => {
 .detail-container {
   position: relative;
   height: 100vh;
-  padding: 20px 20px 40px 20px;
+  padding: 20px 20px 120px 20px; /* 增加底部padding,为按钮留出空间 */
   background: url('@/assets/indexPage/bg.png') no-repeat;
   background-size: cover;
   overflow-y: auto;
@@ -313,19 +334,26 @@ onMounted(() => {
 
 /* 展览特有按钮样式 */
 .exhibition-actions {
-  margin-top: 30px;
-  text-align: center;
+  position: fixed;
+  bottom: 40px;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
 
   .online-exhibition-btn {
     width: 280px;
+    height: 60px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 40px;
-    background: linear-gradient(135deg, #B8956A 0%, #A0845A 100%);
+    background: linear-gradient(135deg, #b8956a 0%, #a0845a 100%);
     color: white;
     border: none;
-    border-radius: 25px;
+    border-radius: 50px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 500;
@@ -338,46 +366,58 @@ onMounted(() => {
       margin-right: 8px;
     }
 
-    &:hover {
-      background: linear-gradient(135deg, #A0845A 0%, #8B7249 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 6px 16px rgba(184, 149, 106, 0.4);
-    }
+    // &:hover {
+    //   background: linear-gradient(135deg, #a0845a 0%, #8b7249 100%);
+    //   transform: translateY(-2px);
+    //   box-shadow: 0 6px 16px rgba(184, 149, 106, 0.4);
+    // }
 
-    &:active {
-      transform: translateY(0);
-    }
+    // &:active {
+    //   transform: translateY(0);
+    // }
   }
 }
 
 .active-preview-btn {
-  height: 60px;
   position: fixed;
-  bottom: 14px;
+  bottom: 40px;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 30px;
+  z-index: 100;
 
   .preview-btn {
-    display: inline-block;
-    width: 320px;
-    height: 60px;
-    background: #B1967B;
-    width: 280px;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 280px;
+    height: 60px;
+    background: linear-gradient(135deg, #b1967b 0%, #9a7f69 100%);
     color: #fff;
-    border-radius: 50px;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(177, 150, 123, 0.3);
+    cursor: pointer;
+    text-decoration: none;
+
+    // &:hover {
+    //   background: linear-gradient(135deg, #9a7f69 0%, #836c59 100%);
+    //   transform: translateY(-2px);
+    //   box-shadow: 0 6px 16px rgba(177, 150, 123, 0.4);
+    // }
+
+    // &:active {
+    //   transform: translateY(0);
+    // }
   }
 }
 
 /* 处理后的HTML内容样式 */
 .processed-html-content {
-
   /* 缩进段落样式 */
   :deep(.indent) {
     text-indent: 2em;
@@ -469,4 +509,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>