feat:修改公益单位案例详情页面

zhengquan/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    ProjectDetail: typeof import('./src/components/projectDetail.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']

zhengquan/src/components/projectDetail.vue

@@ -0,0 +1,276 @@
+<script setup lang='ts'>
+
+import baseUrl from "@/utils/https";
+
+const props = defineProps({
+  curProject: {
+    type: [String, Object],
+    default: () => {
+      return ''
+    }
+  },
+  curUnit: {
+    type: [Object],
+    default: () => {
+      return {}
+    }
+  }
+})
+
+const emit = defineEmits(["closeDetail"])
+
+// 关闭弹窗
+const closeDetail = () => {
+  emit('closeDetail');
+}
+
+const currentIndex = ref(0)
+
+// 当前是图片状态还是视频状态
+// 0
+const currentType = ref('')
+
+
+const prev = () => {
+  if (typeof props.curProject === 'string') {
+    return
+  }
+  switch (currentType.value) {
+    case '':
+      break;
+    case 'images':
+      currentIndex.value === 0 ? '' : currentIndex.value--
+      break;
+    case 'videos':
+      currentIndex.value === 0 ? '' : currentIndex.value--
+      break;
+    default:
+      break;
+  }
+}
+
+const next = () => {
+  if (typeof props.curProject === 'string') {
+    return
+  }
+  switch (currentType.value) {
+    case '':
+      break;
+    case 'images':
+      currentIndex.value === props.curProject.images.length - 1 ? '' : currentIndex.value++
+      break;
+    case 'videos':
+      currentIndex.value === props.curProject.videos.length - 1 ? '' : currentIndex.value++
+      break;
+    default:
+      break;
+  }
+}
+
+const changType = (type: string) => {
+  if (type === currentType.value) {
+    return
+  }
+  currentType.value = type
+  currentIndex.value = 0
+}
+
+
+onMounted(() => {
+  if (typeof props.curProject !== 'string') {
+    currentType.value = props.curProject.images.length == 0 && props.curProject.videos.length == 0 ? '' : props.curProject.images.length > 0 ? 'images' : 'videos'
+  }
+})
+
+</script>
+
+<template>
+  <div class='projectDetail'>
+    <!-- 关闭按钮 -->
+    <img class="close-icon" src="@/assets/images/close-icon.png" @click="closeDetail()" />
+    <!-- 只有展板/视频 -->
+    <div v-if="typeof props.curProject === 'string'" class="stringType">
+      <video v-show="props.curProject.split('&')[1].includes('.mp4')" :src="props.curProject.split('&')[1]" controls
+        autoplay></video>
+      <viewer class="viewerCla" ref="viewer">
+        <img v-show="props.curProject.split('&')[1].includes('.jpg') || props.curProject.split('&')[1].includes('.png')"
+          :src="props.curProject.split('&')[1]" alt="">
+      </viewer>
+    </div>
+    <div v-else class="obj-box"
+      style="width: 100%;height:100%; display: flex; flex-direction: column; justify-content: center;align-items: center;">
+      <!-- 视频/图片容器 -->
+      <div class="multimedia-container" v-show="currentType != ''">
+        <img class="content-image" v-show="props.curProject.images[currentIndex] && currentType === 'images'"
+          :src="`${baseUrl}/project/${props.curUnit.title}/${props.curProject.title}/${props.curProject.images[currentIndex]}`">
+
+        <video class="content-video" v-show="props.curProject.videos[currentIndex] && currentType === 'videos'"
+          :src="`${baseUrl}/project/${props.curUnit.title}/${props.curProject.title}/${props.curProject.videos[currentIndex]}`"
+          controls></video>
+        <!-- 上一个 -->
+        <img @click="prev()" class="icon-left" v-show="currentType != '' && currentIndex != 0"
+          src="@/assets/images/home/icon-left.png" alt="">
+
+
+        <!-- 下一个 -->
+        <img @click="next()" class="icon-right"
+          v-show="currentType != '' && currentIndex != props.curProject[currentType].length - 1"
+          src="@/assets/images/home/icon-right.png" alt="">
+
+        <!-- 视频/图片切换按钮 -->
+        <div class="btns" v-show="currentType === 'images' || currentType === 'videos'">
+          <div class="btn" v-show="props.curProject.images.length > 0"
+            :style="{ background: currentType === 'images' ? '#BC121A' : '' }" @click="changType('images')">图片<span
+              v-show="currentType === 'images'">{{
+      currentIndex + 1 + '/' + props.curProject.images.length }}</span></div>
+
+          <div class="btn" v-show="props.curProject.videos.length > 0"
+            :style="{ background: currentType === 'videos' ? '#BC121A' : '' }" @click="changType('videos')">视频<span
+              v-show="currentType === 'videos'">{{
+      currentIndex + 1 + '/' + props.curProject.videos.length }}</span></div>
+        </div>
+      </div>
+      <div class="title">
+        {{ props.curProject.title }}
+      </div>
+      <div class="desc" :style="{ maxHeight: currentType == '' ? '90%' : '' }">
+        {{ props.curProject.intro }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.projectDetail {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.623);
+
+  .close-icon {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    position: fixed;
+    top: 3%;
+    right: 3%;
+    z-index: 10;
+  }
+
+  .stringType {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      // height: 100%;
+      width: 95%;
+      max-height: 100%;
+    }
+
+    img {
+      // height: 100%;
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+
+  .obj-box {
+    color: white;
+
+    .multimedia-container {
+      width: 60%;
+      height: 60%;
+      // background: green;
+      margin-bottom: 3%;
+      position: relative;
+
+      .content-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .content-video {
+        width: 100%;
+        height: 100%;
+      }
+
+      .icon-left {
+        width: 30px;
+        // height: 40px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 10px;
+        cursor: pointer;
+
+      }
+
+      .icon-right {
+        width: 30px;
+        // height: 40px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 10px;
+        cursor: pointer;
+
+      }
+
+      .btns {
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+
+        // bottom: 20px;
+        .btn {
+          padding: 5px 20px;
+          background: #bc121bb0;
+          border-radius: 10px;
+          margin: 5px 10px;
+          cursor: pointer;
+
+          span {
+            font-size: .8em;
+            margin-left: 5px;
+          }
+        }
+
+        .btn:hover {
+          background: #BC121A;
+
+        }
+      }
+
+
+    }
+
+    .title {
+      font-size: 1.4em;
+      font-weight: bold;
+    }
+
+    .desc {
+      width: 80%;
+      letter-spacing: 2px;
+      line-height: 30px;
+      max-height: 20%;
+      overflow: auto;
+      margin-top: 10px;
+      text-indent: 2em;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+
+  }
+
+
+}
+</style>

zhengquan/src/views/Home/components/unitList.vue

@@ -7,6 +7,8 @@ import 'swiper/swiper-bundle.css'
 import IconDown from '@/assets/images/home/down.png'
 import IconUp from '@/assets/images/home/up.png'
 
+// import projectDetail from '@/components/projectDetail.vue';
+
 
 const store = useStore()
 
@@ -131,13 +133,10 @@ onMounted(() => {
 
 const isOpenProject = ref(true)
 
-const curProject = ref('')
+const curProject = ref('' as any)
 
 const isShowProject = ref(false)
 
-watch(curProject, (newValue: string) => {
-  console.log(newValue)
-})
 
 // 判断是否为平板横屏
 const isFlatLandscape = computed(() => {
@@ -168,6 +167,9 @@ const isFlatLandscape = computed(() => {
                 <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
                   @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ item.split("&")[0] }} <img
                     src="@/assets/images/home/icon-right.png" alt=""></div>
+                <!-- <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
+                  @click="() => { curProject = item; isShowProject = true }">{{ typeof item === 'string' ? item.split("&")[0] : item.title }} <img
+                    src="@/assets/images/home/icon-right.png" alt=""></div> -->
               </div>
             </div>
           </div>
@@ -176,9 +178,10 @@ const isFlatLandscape = computed(() => {
     </div>
     <!-- 项目详情显示 -->
     <div class="project-box" v-if="curProject && isShowProject">
+
+      <!-- <projectDetail :curUnit="curUnit" :curProject="curProject" @closeDetail="() => { isShowProject = false }" /> -->
       <img class="close-icon" src="@/assets/images/close-icon.png" @click="isShowProject = false" />
       <video v-show="curProject.includes('.mp4')" :src="curProject" controls autoplay></video>
-      <!-- 查看图片 -->
       <viewer class="viewerCla" ref="viewer">
         <img v-show="curProject.includes('.jpg') || curProject.includes('.png')" :src="curProject" alt="">
       </viewer>
@@ -198,7 +201,7 @@ const isFlatLandscape = computed(() => {
             alt=""></div>
         <div class="option-list" v-show="isOpenProject">
           <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
-            @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ item.split("&")[0] }} <img
+            @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ typeof item === 'string' ? item.split("&")[0] : item.title  }} <img
               src="@/assets/images/home/icon-right.png" alt=""></div>
         </div>
       </div>
@@ -220,15 +223,15 @@ const isFlatLandscape = computed(() => {
             <div v-if="false" class="defaultLogo"
               :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
               {{
-                store.dataAll.welfareList[startItem + item - 1].title }}</div>
+        store.dataAll.welfareList[startItem + item - 1].title }}</div>
             <img v-else ref="hoverDiv"
               :src="`${baseResourceUrl}/logo/${store.dataAll.welfareList[startItem + item - 1].title}${hoverIndex == item ? ' 1' : ''}.png`"
               alt="">
           </div>
           <div v-if="startItem + item - 1 < store.dataAll.welfareList.length"
-            :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"
-            > {{ store.dataAll.welfareList[startItem + item -
-              1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
+            :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"> {{
+        store.dataAll.welfareList[startItem + item -
+          1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
         </div>
       </div>
       <!-- 右箭头 -->
@@ -247,7 +250,7 @@ const isFlatLandscape = computed(() => {
           <div v-if="false" class="defaultLogo"
             :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
             {{
-              item.title }}</div>
+        item.title }}</div>
           <img v-else :src="`${baseResourceUrl}/logo/${item.title}.png`" alt="">
           <div class="name-box">{{ item.title }}</div>
         </div>
@@ -285,11 +288,15 @@ const isFlatLandscape = computed(() => {
     background: rgba(0, 0, 0, 0.478);
 
     video {
-      height: 100%;
+      // height: 100%;
+      width: 95%;
+      max-height: 100%;
     }
 
     img {
-      height: 100%;
+      // height: 100%;
+      width: 100vw;
+      height: 100vh;
     }
 
     .close-icon {

zhengquan/src/views/Home/homePage.vue

@@ -94,7 +94,7 @@ onMounted(() => {
     <!-- 未登录弹窗 -->
     <div class="noLogin" v-if="!isLogin">
       <div class="noLogin-box">
-        <div class="title" v-show="!isNext">完成注册并登录，即可获得积分。<br />积分可用于兑换礼品。</div>
+        <div class="title" v-show="!isNext">您可直接观展，也可注册后观展。注册观展可获得积分，积分可兑换纪念品。</div>
         <div class="scoreSM title" v-show="isNext">积分规则：</div>
         <!-- <div class="gameItem">乡村林场：完成任一环节（浇水，施肥，除虫，修剪）可得分 12分</div> -->
         <div class="gameItem" v-show="isNext" v-for="(item, index) in displayText" :key="index">
@@ -183,9 +183,10 @@ onMounted(() => {
       box-sizing: border-box;
       color: white;
       border-radius: 10px;
+      position: relative;
 
       .title {
-        font-size: 2em;
+        font-size: 1.7em;
         font-weight: bold;
         letter-spacing: 1px;
         margin-bottom: 20px;

zhengquan/src/views/UnitWall/components/unitList.vue

@@ -98,14 +98,10 @@ const goWebSite = (path: string) => {
 
 const isOpenProject = ref(true)
 
-const curProject = ref('')
+const curProject = ref('' as any)
 
 const isShowProject = ref(false)
 
-watch(curProject, (newValue: string) => {
-  console.log(newValue)
-})
-
 </script>
 
 <template>
@@ -135,6 +131,9 @@ watch(curProject, (newValue: string) => {
                 <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
                   @click="() => { curProject = item.split('&')[1]; isShowProject = true }">{{ item.split("&")[0] }} <img
                     src="@/assets/images/home/icon-right.png" alt=""></div>
+                    <!-- <div class="list-item" v-for="(item, index) in curUnit.projects" :key="index"
+                  @click="() => { curProject = item; isShowProject = true }">{{ item.split("&")[0] }} <img
+                    src="@/assets/images/home/icon-right.png" alt=""></div> -->
               </div>
             </div>
           </div>
@@ -145,11 +144,9 @@ watch(curProject, (newValue: string) => {
     <div class="project-box" v-if="curProject && isShowProject">
       <img class="close-icon" src="@/assets/images/close-icon.png" @click="isShowProject = false" />
       <video v-show="curProject.includes('.mp4')" :src="curProject" controls autoplay></video>
-      <!-- 查看图片 -->
       <viewer class="viewerCla" ref="viewer">
         <img v-show="curProject.includes('.jpg') || curProject.includes('.png')" :src="curProject" alt="">
       </viewer>
-
     </div>
     <!-- 信息展示移动端 -->
     <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile && !isFlatLandscape">
@@ -264,11 +261,16 @@ watch(curProject, (newValue: string) => {
     background: rgba(0, 0, 0, 0.478);
 
     video {
-      height: 100%;
+      // height: 100%;
+      width: 95%;
+      max-height: 100%;
     }
 
     img {
-      height: 100%;
+      width: 100%;
+      height: auto;
+      // object-fit: contain;
+
     }
 
     .close-icon {