Главная Обзор Помощь
Регистрация Вход
wangfumin
/
karamay
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

bugfix

wangfumin 5 месяцев назад
Родитель
aeef482f2e
Сommit
6002c0bfb7
9 измененных файлов с 317 добавлено и 89 удалено
Разделённый вид Показать статистику Diff
  1. 1 1
      index.html
  2. BIN
      public/favicon.ico
  3. 144 5
      src/views/collection/collectDetail.vue
  4. 47 24
      src/views/collection/index.vue
  5. 26 12
      src/views/exhibition/index.vue
  6. 2 2
      src/views/indexPage/activity.vue
  7. 53 22
      src/views/indexPage/index.vue
  8. 41 13
      src/views/indexPage/news.vue
  9. 3 10
      src/views/user/map.vue

+ 1 - 1
index.html
Просмотреть файл 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>克拉玛依博物馆</title>
 
+    <title>克拉玛依市博物馆</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

BIN
public/favicon.ico
Просмотреть файл


+ 144 - 5
src/views/collection/collectDetail.vue
Просмотреть файл 

@@ -60,7 +60,7 @@
 
         <div class="image-container">
 
           <el-carousel
 
             v-if="getFieldValue(artifactData, 'imageFiles') && getFieldValue(artifactData, 'imageFiles').length > 0"
 
-            height="90%" indicator-position="outside" arrow="hover">
 
+            height="90%" arrow="hover" ref="slideCarousel" @change="setActiveItem">
 
             <el-carousel-item v-for="(image, index) in getFieldValue(artifactData, 'imageFiles')" :key="index">
 
               <img :src="image" :alt="`文物图片${index + 1}`" class="carousel-image">
 
             </el-carousel-item>
 
@@ -79,8 +79,8 @@
 
         <div class="artifact-meta">
 
           <span class="year">{{ getFieldValue(artifactData, 'era') }}</span>
 
           <span class="source">{{ getFieldValue(artifactData, 'texture') }}</span>
 
-          <span class="level">{{ getFieldValue(artifactData, 'level') || getFieldValue(artifactData, 'grade') || '等级不详'
 
-            }}</span>
 
+          <span class="level">{{ getFieldValue(artifactData, 'level') || '等级不详'
 
+          }}</span>
 
         </div>
 
         <div class="artifact-size">{{ getFieldValue(artifactData, 'size') || getFieldValue(artifactData, 'dimensions')
 
           || '尺寸不详' }}</div>
 
@@ -99,7 +99,7 @@
 
 </template>
 
 
 <script setup>
 
-import { ref, onMounted, computed } from 'vue'
 
+import { ref, onMounted, computed, nextTick } from 'vue'
 
 import { useRouter, useRoute } from 'vue-router'
 
 import { museumApi } from '@/api/indexPage'
 
 
@@ -162,6 +162,9 @@ const switchTab = (tab) => {
 
   if (isZoomed.value) {
 
     toggleZoom()
 
   }
 
+  if (activeTab.value === 'image') {
 
+    slideBanner()
 
+  }
 
 }
 
 
 // 切换放大缩小状态
 
@@ -180,6 +183,125 @@ const toggleZoom = () => {
 
   }
 
 }
 
 
+// 轮播图引用
 
+const slideCarousel = ref(null)
 
+
 
+// 轮播图切换事件
 
+const setActiveItem = (index) => {
 
+  console.log('轮播图切换到:', index)
 
+}
 
+
 
+// 滑动切换
 
+const slideBanner = () => {
 
+  // 等待DOM更新后再添加事件监听
 
+  nextTick(() => {
 
+    const box = document.querySelector('.el-carousel__container')
 
+    if (!box) return
 
+
 
+    let startPoint = 0
 
+    let stopPoint = 0
 
+    let isDragging = false
 
+
 
+    // 重置坐标
 
+    const resetPoint = () => {
 
+      startPoint = 0
 
+      stopPoint = 0
 
+      isDragging = false
 
+    }
 
+
 
+    // 处理滑动切换逻辑
 
+    const handleSlideChange = () => {
 
+      if (stopPoint === 0 || startPoint - stopPoint === 0) {
 
+        resetPoint()
 
+        return
 
+      }
 
+      console.log(slideCarousel.value, 999)
 
+      if (slideCarousel.value) {
 
+        if (startPoint - stopPoint > 0) {
 
+          // 向左滑动，下一张
 
+          slideCarousel.value.next()
 
+        } else {
 
+          // 向右滑动，上一张
 
+          slideCarousel.value.prev()
 
+        }
 
+      }
 
+      resetPoint()
 
+    }
 
+
 
+    // 移除之前的事件监听器（避免重复绑定）
 
+    box.removeEventListener('touchstart', handleTouchStart)
 
+    box.removeEventListener('touchmove', handleTouchMove)
 
+    box.removeEventListener('touchend', handleTouchEnd)
 
+    box.removeEventListener('mousedown', handleMouseDown)
 
+    box.removeEventListener('mousemove', handleMouseMove)
 
+    box.removeEventListener('mouseup', handleMouseUp)
 
+    box.removeEventListener('mouseleave', handleMouseLeave)
 
+
 
+    // === 触摸事件处理 ===
 
+    // 手指按下
 
+    function handleTouchStart(e) {
 
+      startPoint = e.changedTouches[0].pageX
 
+    }
 
+
 
+    // 手指滑动
 
+    function handleTouchMove(e) {
 
+      stopPoint = e.changedTouches[0].pageX
 
+    }
 
+
 
+    // 手指抬起
 
+    function handleTouchEnd(e) {
 
+      handleSlideChange()
 
+    }
 
+
 
+    // === 鼠标事件处理 ===
 
+    // 鼠标按下
 
+    function handleMouseDown(e) {
 
+      isDragging = true
 
+      startPoint = e.pageX
 
+      box.style.cursor = 'grabbing'
 
+      // 阻止默认的拖拽行为
 
+      e.preventDefault()
 
+    }
 
+
 
+    // 鼠标移动
 
+    function handleMouseMove(e) {
 
+      if (!isDragging) return
 
+      stopPoint = e.pageX
 
+      // 阻止默认行为
 
+      e.preventDefault()
 
+    }
 
+
 
+    // 鼠标抬起
 
+    function handleMouseUp(e) {
 
+      if (!isDragging) return
 
+      box.style.cursor = 'grab'
 
+      handleSlideChange()
 
+    }
 
+
 
+    // 鼠标离开容器
 
+    function handleMouseLeave(e) {
 
+      if (!isDragging) return
 
+      box.style.cursor = 'grab'
 
+      handleSlideChange()
 
+    }
 
+
 
+    // 添加触摸事件监听器
 
+    box.addEventListener('touchstart', handleTouchStart)
 
+    box.addEventListener('touchmove', handleTouchMove)
 
+    box.addEventListener('touchend', handleTouchEnd)
 
+
 
+    // 添加鼠标事件监听器
 
+    box.addEventListener('mousedown', handleMouseDown)
 
+    box.addEventListener('mousemove', handleMouseMove)
 
+    box.addEventListener('mouseup', handleMouseUp)
 
+    box.addEventListener('mouseleave', handleMouseLeave)
 
+
 
+    // 设置初始鼠标样式
 
+    box.style.cursor = 'grab'
 
+  })
 
+}
 
+
 
+
 
 // 初始化
 
 onMounted(() => {
 
   getArtifactDetail()
 
@@ -302,7 +424,7 @@ onMounted(() => {
 
   }
 
 
   .el-carousel {
 
-    height: 100%;
 
+    height: 96%;
 
 
     .el-carousel__container {
 
       height: 100%;
 
@@ -314,6 +436,23 @@ onMounted(() => {
 
       align-items: center;
 
       height: 100%;
 
     }
 
+
 
+    /*指示器按钮*/
 
+    :deep(.el-carousel__button) {
 
+      width: 10px;
 
+      height: 10px;
 
+      border: none;
 
+      border-radius: 50%;
 
+      background-color: rgba(255, 255, 255, 0.5);
 
+      // margin-left: 6px;
 
+    }
 
+
 
+    /*指示器激活按钮*/
 
+    :deep(.is-active) {
 
+      .el-carousel__button {
 
+        background-color: #fff;
 
+      }
 
+    }
 
   }
 
 
   .carousel-image {

+ 47 - 24
src/views/collection/index.vue
Просмотреть файл 

@@ -14,14 +14,19 @@
 
       </div>
 
 
       <!-- 搜索框 -->
 
-      <div class="search-container">
 
-        <el-input v-model="searchText" placeholder="请输入要搜索的内容..." class="search-input" clearable>
 
+      <div class="search-container-collect">
 
+        <el-input id="realy-input" v-model="searchText" placeholder="请输入要搜索的内容..." class="search-input" clearable>
 
           <template #suffix>
 
-            <el-icon :size="19">
 
+            <el-icon :size="16">
 
               <Search />
 
             </el-icon>
 
           </template>
 
         </el-input>
 
+        <div id="vir-input" class="vir-input">请输入要搜索的内容...
 
+          <el-icon class="vir-icon" :size="16">
 
+            <Search />
 
+          </el-icon>
 
+        </div>
 
       </div>
 
     </div>
 
 
@@ -40,7 +45,7 @@
 
             <div class="item-info">
 
               <div class="item-category">{{ getFieldValue(item, 'category') || '三维文物' }}</div>
 
               <div class="item-title">{{ getFieldValue(item, 'title') || '未知标题' }}</div>
 
-              <div class="item-description">{{ getFieldValue(item, 'description') || '暂无描述' }}</div>
 
+              <div class="item-description">{{ getFieldValue(item, 'remark') || '暂无描述' }}</div>
 
             </div>
 
           </div>
 
         </div>
 
@@ -172,7 +177,45 @@ onMounted(async () => {
 
   }
 
 })
 
 </script>
 
+<style>
 
+.search-container-collect {
 
+  padding: 10px 15px;
 
+}
 
+
 
+.search-container-collect .search-input {
 
+  border-radius: 20px;
 
+  border-color: #5B472E;
 
+}
 
+
 
+.vir-input {
 
+  display: none;
 
+  position: relative;
 
+  border-radius: 20px;
 
+  border: 1px solid #5B472E;
 
+  height: 45px;
 
+  align-items: center;
 
+  color: #5B472E;
 
+  padding: 0 15px;
 
+}
 
+
 
+.vir-icon {
 
+  position: absolute;
 
+  right: 15px;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+}
 
+
 
+.search-container-collect .el-input__wrapper {
 
+  height: 45px;
 
+  border-radius: 20px;
 
+  background-color: transparent;
 
+}
 
 
+.search-container-collect .el-input__inner::placeholder {
 
+  color: rgba(88, 71, 53, 0.5);
 
+  font-size: 16px;
 
+}
 
+</style>
 
 <style lang="scss" scoped>
 
 .collection-container {
 
   height: calc(100vh); // 减去底部导航栏高度
 
@@ -251,26 +294,6 @@ onMounted(async () => {
 
   }
 
 }
 
 
-.search-container {
 
-  padding: 10px 15px;
 
-}
 
-
 
-.search-input {
 
-  border-radius: 20px;
 
-  border: 1px solid #5B472E;
 
-
 
-  :deep(.el-input__wrapper) {
 
-    height: 45px;
 
-    border-radius: 20px;
 
-    background-color: transparent;
 
-  }
 
-
 
-  :deep(.el-input__inner::placeholder) {
 
-    color: rgba(88, 71, 53, 0.5);
 
-    font-size: 16px;
 
-  }
 
-}
 
-
 
 .content-section {
 
   padding: 15px;
 
   height: calc(100vh - 230px);

+ 26 - 12
src/views/exhibition/index.vue
Просмотреть файл 

@@ -2,15 +2,13 @@
 
   <div :class="['exhibition-container', !isFromParam ? 'home-tabar' : '']">
 
     <!-- 轮播图部分 -->
 
     <div class="carousel-section">
 
-      <el-carousel height="160px" :interval="4000">
 
-        <el-carousel-item v-for="(item, index) in carouselList" :key="index" @click="goToDetail(item.exhibitId)">
 
-          <img :src="getFieldValue(item, 'img')" alt="展览图片" class="carousel-img" />
 
-          <div class="online-exhibition" v-if="getFieldValue(item, 'webSite')" @click.stop="goToOnlineExhibition(item)">
 
-            <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
 
-            <span class="online-text">线上观展</span>
 
-          </div>
 
-        </el-carousel-item>
 
-      </el-carousel>
 
+      <div style="position: relative;" @click="goToDetail(item.exhibitId)">
 
+        <img src="https://sit-kelamayi.4dage.com/mini/wxImg/zhanlan.png" alt="展览图片" class="carousel-img" />
 
+        <div class="online-exhibition" @click.stop="goToOnlineExhibition(item)">
 
+          <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
 
+          <span class="online-text">线上观展</span>
 
+        </div>
 
+      </div>
 
     </div>
 
 
     <!-- 展厅分类 -->
 
@@ -192,12 +190,12 @@ const goToDetail = (id) => {
 
     query: query
 
   })
 
 }
 
-const goToOnlineExhibition = (item) => {
 
+const goToOnlineExhibition = () => {
 
   let url;
 
   if (isPreviewMode.value) {
 
-    url = item.webSiteB || item.webSite
 
+    url = 'https://www.4dmodel.com/SuperTwoCustom/KLMYscene/?m=SG-alDn3FU4jQ8'
 
   } else {
 
-    url = item.webSite
 
+    url = 'https://www.4dmodel.com/SuperTwoCustom/KLMYscene/?m=SG-alDn3FU4jQ8'
 
   }
 
   if (url) {
 
     window.open(url, '_blank')
 
@@ -250,6 +248,22 @@ onMounted(async () => {
 
       color: #fff;
 
     }
 
   }
 
+
 
+  /*指示器按钮*/
 
+  :deep(.el-carousel__button) {
 
+    width: 10px;
 
+    height: 10px;
 
+    border: none;
 
+    border-radius: 50%;
 
+    background-color: rgba(255, 255, 255, 0.5);
 
+  }
 
+
 
+  /*指示器激活按钮*/
 
+  :deep(.is-active) {
 
+    .el-carousel__button {
 
+      background-color: #fff;
 
+    }
 
+  }
 
 }
 
 
 .carousel-img {

+ 2 - 2
src/views/indexPage/activity.vue
Просмотреть файл 

@@ -16,7 +16,7 @@
 
       <div class="collection-list">
 
         <div class="collection-item" v-for="(item, index) in activeList" :key="item.id || item.activityId || index">
 
           <div class="item-image-container" @click="viewActivity(item)">
 
-            <img :src="getFieldValue(item, 'indexImg')" :alt="getFieldValue(item, 'title') || '活动图片'"
 
+            <img :src="getFieldValue(item, 'infoImg')" :alt="getFieldValue(item, 'title') || '活动图片'"
 
               class="item-image" />
 
             <div class="view-button">
 
               <span>查看</span><el-icon>
 
@@ -25,7 +25,7 @@
 
             </div>
 
             <div class="item-info">
 
               <div class="item-title">{{ getFieldValue(item, 'title') || '暂无标题' }}</div>
 
-              <div class="item-description">{{ getFieldValue(item, 'description') || getFieldValue(item, 'content') ||
 
+              <div class="item-description">{{ getFieldValue(item, 'remark') ||
 
                 '暂无描述' }}</div>
 
             </div>
 
           </div>

+ 53 - 22
src/views/indexPage/index.vue
Просмотреть файл 

@@ -142,7 +142,7 @@ const getImg = (item) => {
 
 
 // 获取信息图片的方法
 
 const getInfoImg = (item) => {
 
-  return getFieldValue(item, 'infoImg')
 
+  return getFieldValue(item, 'indexImg')
 
 }
 
 
 // 获取索引图片的方法
 
@@ -287,7 +287,7 @@ onMounted(() => {
 
     initAllData({
 
       bannerParams: { pageNum: 1, pageSize: 5, status: statusValue },
 
       newsParams: { pageNum: 1, pageSize: 3, status: statusValue },
 
-      exhibitionParams: { pageNum: 1, pageSize: 5, status: statusValue },
 
+      exhibitionParams: { pageNum: 1, pageSize: 5, status: statusValue, recommend: 1 },
 
       activeParams: { pageNum: 1, pageSize: 5, status: statusValue }
 
     })
 
   }
 
@@ -301,6 +301,7 @@ onMounted(() => {
 
   background: url('@/assets/indexPage/bg.png') no-repeat;
 
   background-size: cover;
 
   box-sizing: border-box;
 
+  padding-bottom: 20px;
 
 }
 
 
 @media (min-width: 1024px) {
 
@@ -323,6 +324,22 @@ onMounted(() => {
 
     height: 100%;
 
     object-fit: cover;
 
   }
 
+
 
+  /*指示器按钮*/
 
+  :deep(.el-carousel__button) {
 
+    width: 10px;
 
+    height: 10px;
 
+    border: none;
 
+    border-radius: 50%;
 
+    background-color: rgba(255, 255, 255, 0.5);
 
+  }
 
+
 
+  /*指示器激活按钮*/
 
+  :deep(.is-active) {
 
+    .el-carousel__button {
 
+      background-color: #fff;
 
+    }
 
+  }
 
 }
 
 
 // 功能区域
 
@@ -378,17 +395,6 @@ onMounted(() => {
 
       position: relative;
 
       padding-left: 10px;
 
 
-      // &::before {
 
-      //   content: '';
 
-      //   position: absolute;
 
-      //   left: 0;
 
-      //   top: 50%;
 
-      //   transform: translateY(-50%);
 
-      //   width: 3px;
 
-      //   height: 16px;
 
-      //   background-color: #8B5D3B;
 
-      //   border-radius: 3px;
 
-      // }
 
     }
 
 
     .view-more {
 
@@ -451,20 +457,45 @@ onMounted(() => {
 
 .scroll-container {
 
   overflow-x: auto;
 
   -webkit-overflow-scrolling: touch;
 
-  scrollbar-width: none;
 
-  /* Firefox */
 
-  -ms-overflow-style: none;
 
-  /* IE and Edge */
 
-
 
-  &::-webkit-scrollbar {
 
-    display: none;
 
-    /* Chrome, Safari, Opera */
 
-  }
 
 
   .scroll-wrapper {
 
     display: flex;
 
     padding-bottom: 5px;
 
   }
 
+
 
+  /* 仅在移动端隐藏滚动条 */
 
+  @media (max-width: 768px) {
 
+    scrollbar-width: none;
 
+    -ms-overflow-style: none;
 
+
 
+    &::-webkit-scrollbar {
 
+      display: none;
 
+    }
 
+  }
 
+
 
+  /* 桌面端显示并美化滚动条 */
 
+  @media (min-width: 769px) {
 
+    scrollbar-width: thin;
 
+    scrollbar-color: #B1967B #f1f1f1;
 
+
 
+    &::-webkit-scrollbar {
 
+      height: 8px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-track {
 
+      background: #f1f1f1;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-thumb {
 
+      background: #B1967B;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-thumb:hover {
 
+      background: #9d8469;
 
+    }
 
+  }
 
 }
 
 
 // 展览项

+ 41 - 13
src/views/indexPage/news.vue
Просмотреть файл 

@@ -16,7 +16,7 @@
 
       <div class="scroll-wrapper">
 
         <div class="all-item" v-for="item in newsList" :key="item.informationId">
 
           <div class="exhibition-item" @click="viewExhibition(item)">
 
-            <img :src="getFieldValue(item, 'indexImg')" :alt="getFieldValue(item, 'title') || '资讯图片'"
 
+            <img :src="getFieldValue(item, 'infoImg')" :alt="getFieldValue(item, 'title') || '资讯图片'"
 
               class="exhibition-img">
 
             <img src="@/assets/indexPage/Frame.png" alt="kuang" class="bg-img">
 
             <div class="exhibition-info">
 
@@ -103,6 +103,12 @@ const viewExhibition = (item) => {
 
   overflow: auto;
 
 }
 
 
+@media (min-width: 1024px) {
 
+  .news-container {
 
+    width: 400px;
 
+  }
 
+}
 
+
 
 .back-button {
 
   position: absolute;
 
   top: 20px;
 
@@ -167,22 +173,44 @@ const viewExhibition = (item) => {
 
 
 // 滚动容器
 
 .scroll-container {
 
-  overflow-x: auto;
 
-  -webkit-overflow-scrolling: touch;
 
-  scrollbar-width: none;
 
-  /* Firefox */
 
-  -ms-overflow-style: none;
 
-  /* IE and Edge */
 
-
 
-  &::-webkit-scrollbar {
 
-    display: none;
 
-    /* Chrome, Safari, Opera */
 
-  }
 
-
 
   .scroll-wrapper {
 
     display: flex;
 
     padding-bottom: 5px;
 
   }
 
+
 
+  /* 仅在移动端隐藏滚动条 */
 
+  @media (max-width: 768px) {
 
+    scrollbar-width: none;
 
+    -ms-overflow-style: none;
 
+
 
+    &::-webkit-scrollbar {
 
+      display: none;
 
+    }
 
+  }
 
+
 
+  /* 桌面端显示并美化滚动条 */
 
+  @media (min-width: 769px) {
 
+    scrollbar-width: thin;
 
+    scrollbar-color: #B1967B #f1f1f1;
 
+
 
+    &::-webkit-scrollbar {
 
+      height: 8px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-track {
 
+      background: #f1f1f1;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-thumb {
 
+      background: #B1967B;
 
+      border-radius: 4px;
 
+    }
 
+
 
+    &::-webkit-scrollbar-thumb:hover {
 
+      background: #9d8469;
 
+    }
 
+  }
 
 }
 
 
 .all-item {

+ 3 - 10
src/views/user/map.vue
Просмотреть файл 

@@ -22,7 +22,7 @@
 
       <div class="line"></div>
 
 
       <!-- 处理后的内容 -->
 
-      <div class="detail-text" v-if="detailData.content || detailData.context">
 
+      <div class="detail-text" v-if="getFieldValue(detailData, 'context')">
 
         <div v-html="processedContent" class="processed-html-content"></div>
 
       </div>
 
 
@@ -84,19 +84,12 @@ const detailData = ref(null)
 
 
 // 处理后的HTML内容
 
 const processedContent = computed(() => {
 
-  const content = getFieldValue(detailData.value, 'content') || getFieldValue(detailData.value, 'context')
 
+  const content = getFieldValue(detailData.value, 'context');
 
   return content ? processHtmlContent(content) : ''
 
 })
 
 // 导航前往
 
 const openNavitor = () => {
 
-  wx.openLocation({
 
-    latitude: 45, // 纬度，浮点数，范围为90 ~ -90
 
-    longitude: 83, // 经度，浮点数，范围为180 ~ -180。
 
-    name: '克拉玛依博物馆', // 位置名
 
-    address: '克拉玛依博物馆', // 地址详情说明
 
-    scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
 
-    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
 
-  })
 
+  
 }
 
 
 // 返回上一页