wangfumin 3 месяцев назад
Родитель
Сommit
470127749f

BIN
public/wxImg/SOURCEHANSANSCN-BOLD.OTF


BIN
public/wxImg/SOURCEHANSANSCN-REGULAR.OTF


BIN
public/wxImg/SOURCEHANSERIFSC-HEAVY.OTF


BIN
public/wxImg/indexPage/active-arrow.png


BIN
public/wxImg/indexPage/news.png


+ 22 - 0
src/assets/base.css

@@ -1,3 +1,25 @@
+/* 自定义字体定义 */
+@font-face {
+  font-family: 'heavy';
+  src: url('/wxImg/SOURCEHANSERIFSC-HEAVY.OTF') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'bold';
+  src: url('/wxImg/SOURCEHANSANSCN-BOLD.OTF') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'regular';
+  src: url('/wxImg/SOURCEHANSANSCN-REGULAR.OTF') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;

BIN
src/assets/indexPage/news.png


+ 1 - 1
src/assets/main.css

@@ -17,7 +17,7 @@ a,
   padding: 3px;
 }
 .home-tabar {
-  height: calc(100vh - 90px) !important;
+  height: calc(100vh - 80px) !important;
 }
 .notMargin {
   margin: 0 !important;

+ 15 - 12
src/views/collection/collectDetail.vue

@@ -7,7 +7,7 @@
         <img src="@/assets/indexPage/icon_back.png" alt="返回" />
       </div>
       <!-- 自定义标签页导航 -->
-      <div class="custom-tabs">
+      <!-- <div class="custom-tabs">
         <div
           class="tab-item"
           :class="{ active: activeTab === 'model' }"
@@ -29,7 +29,7 @@
         >
           图片
         </div>
-      </div>
+      </div> -->
     </div>
 
     <!-- 内容展示区域 -->
@@ -57,7 +57,7 @@
       </div>
 
       <!-- 视频展示 -->
-      <div v-if="activeTab === 'video'" class="video-viewer">
+      <!-- <div v-if="activeTab === 'video'" class="video-viewer">
         <div class="video-container">
           <video
             width="320"
@@ -75,10 +75,10 @@
             <div class="no-video-text">暂无视频资源</div>
           </div>
         </div>
-      </div>
+      </div> -->
 
       <!-- 图片展示 -->
-      <div v-if="activeTab === 'image'" class="image-viewer">
+      <!-- <div v-if="activeTab === 'image'" class="image-viewer">
         <div class="image-container">
           <el-carousel
             v-if="
@@ -104,7 +104,7 @@
             <div class="no-video-text">暂无图片</div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <!-- 底部固定信息卡片 -->
@@ -371,7 +371,7 @@ onMounted(() => {
 .collect-detail-container {
   position: relative;
   height: 100vh;
-  background: #fff;
+  background: #615446;
   background-size: cover;
 }
 
@@ -395,7 +395,9 @@ onMounted(() => {
     max-width: 400px;
   }
 }
-
+:deep(video) {
+  width: 100% !important;
+}
 .back-button {
   width: 40px;
   height: 40px;
@@ -553,9 +555,9 @@ onMounted(() => {
 .artifact-info-card {
   position: absolute;
   top: 48%;
-  max-height: 52%;
+  height: calc(100vh - 50%);
   width: 100%;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
   border-radius: 15px;
   padding: 20px;
   margin: 20px 0;
@@ -570,10 +572,11 @@ onMounted(() => {
   }
 
   .artifact-title {
-    font-size: 36px;
+    font-size: 30px;
     font-weight: bold;
     color: #584735;
     margin-bottom: 10px;
+    font-family: 'heavy';
   }
 
   .artifact-meta {
@@ -623,7 +626,7 @@ onMounted(() => {
   }
 
   .artifact-description {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 1.6;
     color: #584735;
     text-align: justify;

+ 13 - 4
src/views/collection/index.vue

@@ -139,7 +139,7 @@ const navScrollContainer = ref(null)
 
 // 分类数据
 const categories = [
-  { id: '1', name: '织绣' },
+  { id: '1', name: '棉麻丝绸' },
   { id: '2', name: '铁器、其他金属器' },
   { id: '3', name: '文物、宣传品' },
   { id: '4', name: '其他' },
@@ -343,7 +343,9 @@ onUnmounted(() => {
   border-radius: 20px;
   background-color: transparent;
 }
-
+.search-container-collect .el-input__inner {
+  text-align: center;
+}
 .search-container-collect .el-input__inner::placeholder {
   color: rgba(88, 71, 53, 0.5);
   font-size: 16px;
@@ -423,7 +425,8 @@ onUnmounted(() => {
 
       .category-text {
         display: inline-flex;
-        border-bottom: 1px solid #f3b200;
+        border-bottom: 6px solid #f3b200;
+        font-family: 'bold';
       }
     }
 
@@ -509,14 +512,20 @@ onUnmounted(() => {
   }
 
   .item-title {
-    font-size: 36px;
+    font-size: 30px;
     font-weight: bold;
+    line-height: 120%;
     color: #fff;
+    font-family: 'heavy';
+    margin-bottom: 6px;
   }
 
   .item-description {
     font-size: 14px;
     color: #fff;
+    white-space: nowrap;
+    width: 100%;
+    height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
   }

+ 9 - 1
src/views/exhibition/allDetailsShow.vue

@@ -235,6 +235,14 @@ onMounted(() => {
   }
 }
 
+.processed-video {
+  :deep(video) {
+    width: 100% !important;
+  }
+}
+:deep(video) {
+  width: 100% !important;
+}
 .loading-container {
   display: flex;
   justify-content: center;
@@ -396,7 +404,7 @@ onMounted(() => {
     height: 60px;
     background: linear-gradient(135deg, #b1967b 0%, #9a7f69 100%);
     color: #fff;
-    border-radius: 25px;
+    border-radius: 50px;
     font-size: 16px;
     font-weight: 500;
     transition: all 0.3s ease;

+ 9 - 5
src/views/exhibition/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="['exhibition-container', !isFromParam ? 'home-tabar' : '']">
+  <div
+    :class="['exhibition-container', !isFromParam ? 'home-tabar' : '']"
+    ref="listContainer"
+    @scroll="handleScroll"
+  >
     <!-- 轮播图部分 -->
     <div class="carousel-section">
       <div style="position: relative" @click="goToDetail(item.exhibitId)">
@@ -28,7 +32,7 @@
     </div>
 
     <!-- 展览列表 -->
-    <div class="exhibition-list" ref="listContainer" @scroll="handleScroll">
+    <div class="exhibition-list">
       <div
         class="exhibition-item"
         v-for="item in exhibitionList"
@@ -171,7 +175,6 @@ const handleScroll = async () => {
   if (!listContainer.value || loading.value || !hasMore.value) return
 
   const { scrollTop, scrollHeight, clientHeight } = listContainer.value
-
   // 当滚动到底部附近时加载更多
   if (scrollTop + clientHeight >= scrollHeight - 50) {
     // 先递增页码
@@ -228,7 +231,7 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .exhibition-container {
-  height: calc(100vh); // 减去底部导航栏高度
+  height: calc(100vh - 80px); // 减去底部导航栏高度
   overflow-y: auto;
   background: url('@/assets/indexPage/bg.png') no-repeat;
   background-size: cover;
@@ -349,7 +352,7 @@ onMounted(async () => {
 .exhibition-list {
   padding: 0 20px;
   max-height: calc(100vh - 300px);
-  overflow-y: auto;
+  // overflow-y: auto;
 
   // 展览项
   .exhibition-item {
@@ -398,6 +401,7 @@ onMounted(async () => {
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0 10px;
+        font-family: 'heavy';
       }
     }
   }

+ 1 - 0
src/views/indexPage/activity.vue

@@ -226,6 +226,7 @@ const viewActivity = (item) => {
     font-size: 20px;
     font-weight: bold;
     color: #fff;
+    font-family: 'heavy';
   }
 
   .item-description {

+ 107 - 91
src/views/indexPage/index.vue

@@ -10,101 +10,103 @@
       </el-carousel>
     </div>
 
-    <!-- 功能区域 -->
-    <div class="function-section">
-      <div
-        class="function-item"
-        :class="{ disabled: isPreviewMode }"
-        @click="handleFunctionClick('visit')"
-      >
-        <img src="@/assets/indexPage/visit.png" alt="预约参观" class="function-icon" />
-        <span class="function-text">预约参观</span>
-      </div>
-      <div
-        class="function-item"
-        :class="{ disabled: isPreviewMode }"
-        @click="handleFunctionClick('activity')"
-      >
-        <img src="@/assets/indexPage/activity.png" alt="活动预约" class="function-icon" />
-        <span class="function-text">活动预约</span>
-      </div>
-      <div class="function-item" @click="handleFunctionClick('map')">
-        <img src="@/assets/indexPage/map.png" alt="展馆地图" class="function-icon" />
-        <span class="function-text">展馆地图</span>
-      </div>
-      <div class="function-item" @click="handleFunctionClick('introduce')">
-        <img src="@/assets/indexPage/introduce.png" alt="展馆介绍" class="function-icon" />
-        <span class="function-text">展馆介绍</span>
+    <div class="all-content">
+      <!-- 功能区域 -->
+      <div class="function-section">
+        <div
+          class="function-item"
+          :class="{ disabled: isPreviewMode }"
+          @click="handleFunctionClick('visit')"
+        >
+          <img src="@/assets/indexPage/visit.png" alt="预约参观" class="function-icon" />
+          <span class="function-text">预约参观</span>
+        </div>
+        <div
+          class="function-item"
+          :class="{ disabled: isPreviewMode }"
+          @click="handleFunctionClick('activity')"
+        >
+          <img src="@/assets/indexPage/activity.png" alt="活动预约" class="function-icon" />
+          <span class="function-text">活动预约</span>
+        </div>
+        <div class="function-item" @click="handleFunctionClick('map')">
+          <img src="@/assets/indexPage/map.png" alt="展馆地图" class="function-icon" />
+          <span class="function-text">展馆地图</span>
+        </div>
+        <div class="function-item" @click="handleFunctionClick('introduce')">
+          <img src="@/assets/indexPage/introduce.png" alt="展馆介绍" class="function-icon" />
+          <span class="function-text">展馆介绍</span>
+        </div>
       </div>
-    </div>
 
-    <!-- 展览资讯 -->
-    <div class="section">
-      <div class="section-header">
-        <h3 class="section-title">展览资讯</h3>
-        <span class="view-more" @click="viewMore('recommended')">查看更多 +</span>
-      </div>
-      <div
-        class="news-item"
-        v-for="item in newsList"
-        :key="item.informationId"
-        @click="viewNews(item)"
-      >
-        <img :src="getInfoImg(item)" alt="展览资讯" class="news-img" />
-        <div class="news-content">
-          <h4 class="news-title">{{ getTitle(item) }}</h4>
-          <span class="news-desc"
-            ><el-icon> <SortUp /> </el-icon
-          ></span>
+      <!-- 展览资讯 -->
+      <div class="section">
+        <div class="section-header">
+          <h3 class="section-title">展览资讯</h3>
+          <span class="view-more" @click="viewMore('recommended')">查看更多 +</span>
+        </div>
+        <div
+          class="news-item"
+          v-for="item in newsList"
+          :key="item.informationId"
+          @click="viewNews(item)"
+        >
+          <img :src="getInfoImg(item)" alt="展览资讯" class="news-img" />
+          <div class="news-content">
+            <h4 class="news-title">{{ getTitle(item) }}</h4>
+            <span class="news-desc"
+              ><el-icon> <SortUp /> </el-icon
+            ></span>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 推荐展览 -->
-    <div class="section">
-      <div class="section-header">
-        <h3 class="section-title">推荐展览</h3>
-        <span class="view-more" @click="viewMore('exhibition')">查看更多 +</span>
-      </div>
-      <div class="scroll-container">
-        <div class="scroll-wrapper">
-          <div
-            class="exhibition-item"
-            v-for="exhibition in exhibitionList"
-            :key="exhibition.exhibitId"
-            @click="viewExhibition(exhibition)"
-          >
-            <img :src="getImg(exhibition)" alt="展览" class="exhibition-img" />
-            <div class="exhibition-info">
-              <h4 class="exhibition-title">{{ getTitle(exhibition) }}</h4>
+      <!-- 推荐展览 -->
+      <div class="section">
+        <div class="section-header">
+          <h3 class="section-title">推荐展览</h3>
+          <span class="view-more" @click="viewMore('exhibition')">查看更多 +</span>
+        </div>
+        <div class="scroll-container">
+          <div class="scroll-wrapper">
+            <div
+              class="exhibition-item"
+              v-for="exhibition in exhibitionList"
+              :key="exhibition.exhibitId"
+              @click="viewExhibition(exhibition)"
+            >
+              <img :src="getImg(exhibition)" alt="展览" class="exhibition-img" />
+              <div class="exhibition-info">
+                <h4 class="exhibition-title">{{ getTitle(exhibition) }}</h4>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 社教活动 -->
-    <div class="section">
-      <div class="section-header">
-        <h3 class="section-title">社教活动</h3>
-        <span class="view-more" @click="viewMore('activity')">查看更多 +</span>
-      </div>
-      <div class="scroll-container">
-        <div class="scroll-wrapper">
-          <div
-            class="activity-item"
-            v-for="active in activeList"
-            :key="active.activityId"
-            @click="viewActivity(active)"
-          >
-            <div class="active-top">
-              <img :src="getIndexImg(active)" alt="活动" class="activity-img" />
-              <span class="active-go"
-                ><el-icon> <ArrowRight /> </el-icon
-              ></span>
-            </div>
-            <div class="activity-info">
-              <h4 class="activity-title">{{ getTitle(active) }}</h4>
+      <!-- 社教活动 -->
+      <div class="section">
+        <div class="section-header">
+          <h3 class="section-title">社教活动</h3>
+          <span class="view-more" @click="viewMore('activity')">查看更多 +</span>
+        </div>
+        <div class="scroll-container">
+          <div class="scroll-wrapper">
+            <div
+              class="activity-item"
+              v-for="active in activeList"
+              :key="active.activityId"
+              @click="viewActivity(active)"
+            >
+              <div class="active-top">
+                <img :src="getIndexImg(active)" alt="活动" class="activity-img" />
+                <span class="active-go"
+                  ><el-icon> <ArrowRight /> </el-icon
+                ></span>
+              </div>
+              <div class="activity-info">
+                <h4 class="activity-title">{{ getTitle(active) }}</h4>
+              </div>
             </div>
           </div>
         </div>
@@ -314,12 +316,25 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .home-container {
+  position: relative;
   height: calc(100vh); // 减去底部导航栏高度
-  overflow-y: auto;
+  // overflow-y: auto;
+  box-sizing: border-box;
+  // padding-bottom: 20px;
+}
+
+.all-content {
+  position: absolute;
   background: url('@/assets/indexPage/bg.png') no-repeat;
   background-size: cover;
-  box-sizing: border-box;
-  padding-bottom: 20px;
+  top: 170px;
+  width: 100%;
+  height: calc(100% - 160px);
+  overflow: auto;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  z-index: 1000;
+  padding-top: 20px;
 }
 
 @media (min-width: 1024px) {
@@ -335,7 +350,6 @@ onMounted(() => {
 // 轮播图区域
 .carousel-section {
   width: 100%;
-  margin-bottom: 15px;
 
   .carousel-img {
     width: 100%;
@@ -455,6 +469,7 @@ onMounted(() => {
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
+      font-family: 'heavy';
     }
 
     .news-desc {
@@ -519,7 +534,7 @@ onMounted(() => {
 .exhibition-item {
   position: relative;
   flex: 0 0 auto;
-  width: 345px;
+  width: 100%;
   height: 206px;
   margin-right: 10px;
   border-radius: 8px;
@@ -536,7 +551,7 @@ onMounted(() => {
   }
 
   .exhibition-info {
-    width: 345px;
+    width: 100%;
     height: 30px;
     display: flex;
     justify-content: center;
@@ -554,6 +569,7 @@ onMounted(() => {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-family: 'heavy';
     }
   }
 }

+ 7 - 4
src/views/indexPage/news.vue

@@ -29,9 +29,7 @@
           <!-- 查看详情按钮 -->
           <div class="view-details-button" @click="viewExhibition(item)">
             <span>查看详情</span>
-            <el-icon>
-              <Right />
-            </el-icon>
+            <img class="detail-arrow" src="@/assets/indexPage/news.png" alt="" />
           </div>
         </div>
       </div>
@@ -215,6 +213,7 @@ const viewExhibition = (item) => {
     scrollbar-color: #b1967b #f1f1f1;
 
     &::-webkit-scrollbar {
+      display: none;
       height: 8px;
     }
 
@@ -285,6 +284,7 @@ const viewExhibition = (item) => {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-family: 'heavy';
       }
     }
   }
@@ -303,9 +303,12 @@ const viewExhibition = (item) => {
     border-radius: 50px 50px 50px 50px;
     font-size: 20px;
     cursor: pointer;
-
+    .detail-arrow {
+      width: 24px;
+    }
     span {
       margin-right: 16px;
+      color: #fff;
     }
   }
 }

+ 2 - 1
vite.config.js

@@ -28,7 +28,8 @@ export default defineConfig({
     open: true,
     proxy: {
       '/api': {
-        target: 'https://sit-kelamayi.4dage.com',
+        // target: 'https://klmybwg.4dage.com/',
+        target: 'https://sit-kelamayi.4dage.com/',
         changeOrigin: true,
         secure: false,
         rewrite: (path) => path.replace(/^\/api/, '/api'),