新增照片墙跳转逻辑

scene/public/static/js/loadCAD.js

@@ -31,7 +31,7 @@ window.grendCAD = (function grendCAD() {
     let $name = document.createElement("div");
 
     $name.className = "name";
-    $name.textContent = "当前位置：元大都展";
+    $name.textContent = "";
     $layer.appendChild($name);
 
     $layer.className = "cad";
@@ -43,7 +43,7 @@ window.grendCAD = (function grendCAD() {
       .cad {
         position: absolute;
         right: 20px;
-        top: 20px;
+        top: 10%;
         width: 180px;
         height: 180px;
         background:  rgba(56,56,56,0.56);

zhengquan/src/router/index.ts

@@ -27,6 +27,13 @@ const routes = [
     //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
     component: () => import('@/views/Game/gamePage.vue')
   },
+  // 照片墙
+  {
+    path: '/wall',
+    name: 'wall',
+    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
+    component: () => import('@/views/UnitWall/UnitWall.vue')
+  },
   // 其他页面
   {
     path: '/homePageMo',

zhengquan/src/utils/browser.ts

@@ -14,7 +14,7 @@ function versions () {
     // 火狐内核
     gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
     // 是否为移动终端
-    mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
+    mobile: /Android|webOS|iPhone|iPod|BlackBerry|SM-T|GT-P|Note|Tab|Nexus|Pixel|Tablet|Mi-Tab|Mi-Box|Huawei|Redmi|Mobile|XiaoMi/i.test(navigator.userAgent),
     // ios终端
     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
     // android终端或者uc浏览器

zhengquan/src/views/Game/gamePage.vue

@@ -65,10 +65,16 @@ onMounted(() => {
     width: 100%;
     height: 100%;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       width: 100%;
       // height: 100%;
     }
+
+    // @media screen and (orientation: portrait) {
+    //   width: 100%;
+    // }
+
   }
 }
 </style>

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

@@ -273,7 +273,8 @@ const openMo = ref(false)
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
 
   .up-icon {
     position: absolute;
@@ -434,6 +435,8 @@ const openMo = ref(false)
     position: absolute;
     bottom: 42vh;
     left: 50%;
+    transform: translateX(-50%);
+    margin-left: 5%;
   }
 
   .open {
@@ -507,4 +510,15 @@ const openMo = ref(false)
     }
   }
 }
+
+@media screen and (min-width: 700px),
+(orientation: portrait) {
+  .item-bg {
+    width: 30vw;
+    height: 94%;
+  }
+  .item-numbser {
+    bottom: 22% !important;
+  }
+}
 </style>

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

@@ -583,12 +583,14 @@ watch(curProject, (newValue: string) => {
   .icon-down {
     position: absolute;
     bottom: 80%;
-    left: 45%;
-
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: 2%;
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
   .scene-list-box {
     justify-content: end;
     height: 100%;

zhengquan/src/views/Home/homePage.vue

@@ -20,6 +20,7 @@ const openUnitList = () => {
 const closeUnitList = () => {
   isShowUnitList.value = false
 }
+
 </script>
 
 <template>
@@ -45,7 +46,23 @@ const closeUnitList = () => {
   }
 }
 
-@media screen and (max-width: 700px)  {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .homePage {
+    background: url(../../assets/images/home/bgMo.jpg);
+    background-size: cover;
+    background-position: center center;
+    overflow: hidden;
+
+    .logo {
+      position: absolute;
+      right: 3%;
+      top: 5%;
+    }
+  }
+}
+
+@media screen and (orientation: portrait) {
   .homePage {
     background: url(../../assets/images/home/bgMo.jpg);
     background-size: cover;

zhengquan/src/views/HomeMo/homePageMo.vue

@@ -66,7 +66,8 @@ onMounted(() => {
     width: 100%;
     height: 100%;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       width: 100%;
       // height: 100%;
     }

zhengquan/src/views/Scene/ScenePage.vue

@@ -117,7 +117,9 @@ const getAllHotspot = () => {
         currentHotsUnit.value = currentUnit.value
         store.currentUnit = currentUnit.value
         localStorage.setItem('currentUnit', JSON.stringify(currentUnit.value))
-        if (route.query.name == '尾厅') pointInfo.value = '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
+        if (route.query.name == '尾厅') {
+          pointInfo.value = route.query.pano ? route.query.pano.toString() : '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
+        }
       }
     })
   })
@@ -548,8 +550,11 @@ onMounted(() => {
 
   // 热点跳转展厅/游戏
   window.changeUnitByHot = (v: string, point: string) => {
+    console.log(v, point)
     if (v === 'game') {
       openGame(parseInt(point) - 1)
+    } else if (v === 'zhaopianqiang') {
+      router.replace('wall')
     } else {
       const unit = store.hotspots.find((item: any) => {
         return item.code == v
@@ -774,7 +779,8 @@ const changePassFu = () => {
       width: 100%;
       height: 100%;
 
-      @media screen and (max-width: 700px) {
+      @media screen and (max-width: 700px),
+      (orientation: portrait) {
         width: 100%;
         // height: 100%;
       }
@@ -1285,7 +1291,8 @@ const changePassFu = () => {
       font-family: 'AlibabaPuHuiTi2.0-105Heavy';
       color: white;
 
-      @media screen and (max-width: 700px) {
+      @media screen and (max-width: 700px),
+      (orientation: portrait) {
         display: flex;
         flex-direction: column;
         overflow: auto;
@@ -1309,7 +1316,8 @@ const changePassFu = () => {
           margin-bottom: 10px;
           border-radius: 15px;
 
-          @media screen and (max-width: 700px) {
+          @media screen and (max-width: 700px),
+          (orientation: portrait) {
             width: 100%;
             height: 100%;
             margin-bottom: 0;
@@ -1362,7 +1370,8 @@ const changePassFu = () => {
 
 
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 700px),
+  (orientation: portrait) {
     .hots-box {
       width: 100%;
       height: 100%;

zhengquan/src/views/UnitWall/UnitWall.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import UnitList from './components/unitList.vue';
+
+</script>
+
+<template>
+  <div class='wall'>
+    <UnitList />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.wall {
+  width: 100%;
+  height: 100%;
+  background: url(../../assets/images/home/bg.png);
+  background-size: 100% 100%;
+}
+
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .wall {
+    background: url(../../assets/images/home/bgMo.jpg);
+    background-size: cover;
+
+  }
+}
+</style>

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

@@ -0,0 +1,934 @@
+<script setup lang='ts'>
+import browser from '@/utils/browser'
+import { useStore } from '@/stores';
+import baseResourceUrl from '@/utils/https';
+import Swiper from 'swiper'
+import 'swiper/swiper-bundle.css'
+import IconDown from '@/assets/images/home/down.png'
+import IconUp from '@/assets/images/home/up.png'
+import { nextTick, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+
+const store = useStore()
+const router = useRouter()
+
+// 分页
+const startItem = ref(0)
+
+// 当前单位显示
+const curUnit = ref({} as any)
+
+const isShowInfoBox = ref(false)
+
+
+
+const hoverDiv = ref(null)
+const hoverIndex = ref(-1)
+
+
+
+watch(hoverIndex, () => {
+
+
+}, { immediate: true })
+
+
+// watch(curUnit, (newVal: any) => {
+//   if (newVal) {
+
+//   }
+// }, {
+//   deep: true,
+//   immediate: true
+// })
+
+const goBack = () => {
+  router.replace({
+    path: '/scene',
+    query: {
+      code: 'SHANGJJ',
+      name: '尾厅',
+      pano: '&firstView=pano:43,qua:0.6820978937219361,0.05183622250679035,-0.7273241007475139,0.05527320016286095&qs=1'
+    }
+  })
+}
+
+// @ts-ignore
+let swiper2 = null as any
+const swiper2Index = ref(0)
+// @ts-ignore
+let swiper = null as any
+onMounted(() => {
+  swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1,
+    loop: false,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+    },
+  });
+  swiper2 = new Swiper(".mySwiper2", {
+    slidesPerView: 1,
+    loop: false,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination2",
+    },
+    on: {
+      slideChange: function (swiper2: any) {
+        nextTick(() => {
+          swiper2Index.value = swiper2.activeIndex
+        });
+      },
+    },
+  });
+
+  curUnit.value = store.dataAll.welfareList[0]
+})
+
+const goWebSite = (path: string) => {
+  window.location.href = path
+}
+
+
+const isOpenProject = ref(true)
+
+const curProject = ref('')
+
+const isShowProject = ref(false)
+
+watch(curProject, (newValue: string) => {
+  console.log(newValue)
+})
+
+</script>
+
+<template>
+  <div class='scene-list-box'>
+    <img class="backBtn" src="@/assets/images/scene/back.png" alt="" @click="goBack()">
+    <!-- 信息展示 -->
+    <div class="info-shade" v-show="curUnit && isShowInfoBox && !browser.mobile">
+      <div id="infoBoxPc" class="info-box">
+        <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
+        <div class="info-box-top"></div>
+        <div class="info-box-bottom">
+          <div class="bottom-left">
+            <div class="left-top">
+              <h2>{{ curUnit ? curUnit.title : '' }}</h2>
+              <div class="website-btn" @click="goWebSite(curUnit.websitePath)"><img
+                  src="@/assets/images/scene/website.png" alt="">查看官网</div>
+            </div>
+            <div class="left-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+            <!-- 项目案例 -->
+            <div class="project-list">
+              <div class="selected-box" v-show="curUnit.projects && curUnit.projects.length > 0"
+                @click="isOpenProject = !isOpenProject">项目案例
+                <img :src="isOpenProject ? IconUp : IconDown" 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
+                    src="@/assets/images/home/icon-right.png" alt=""></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 项目详情显示 -->
+    <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">
+      <!-- 返回按钮 -->
+      <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
+      <div class="content-info">
+        <div class="left-top">
+          <h4>{{ curUnit ? curUnit.title : '' }}</h4>
+          <div class="website-btn" @click="goWebSite(curUnit.websitePath)"><img src="@/assets/images/scene/website.png"
+              alt="">查看官网</div>
+        </div>
+        <!-- <h4>{{ curUnit ? curUnit.title : '' }}</h4> -->
+        <div class="info-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+        <!-- 项目案例 -->
+        <div class="selected" @click="isOpenProject = !isOpenProject"
+          v-show="curUnit.projects && curUnit.projects.length > 0">项目案例 <img :src="isOpenProject ? IconUp : IconDown"
+            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
+              src="@/assets/images/home/icon-right.png" alt=""></div>
+        </div>
+      </div>
+
+    </div>
+    <div class="content" v-if="!browser.mobile">
+      <!-- 左箭头 -->
+      <div class="arrows-left" :style="{ opacity: startItem != 0 ? '1' : '0' }"
+        @click="() => { startItem != 0 ? startItem -= 21 : '' }">
+        <img src="@/assets/images/home/icon-left.png" alt="">
+      </div>
+      <div class="content-list">
+        <div class="list-item" v-for="(item, index) in 21" :key="index"
+          @click="curUnit = store.dataAll.welfareList[startItem + item - 1], isShowInfoBox = true"
+          :style="{ boxShadow: startItem + item - 1 < store.dataAll.welfareList.length ? '' : 'none' }"
+          @mouseover="hoverIndex = item">
+          <div class="list-item-con" v-if="startItem + item - 1 < store.dataAll.welfareList.length">
+            <!-- 默认图片--无logo情况下显示 -->
+            <div
+              v-if="store.dataAll.welfareList[startItem + item - 1].title == '鹏华基金管理有限公司' || store.dataAll.welfareList[startItem + item - 1].title == '北京中金公益基金会'"
+              class="defaultLogo"
+              :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
+              {{
+                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' : ''"
+            :style="{ whiteSpace: 'nowrap', marginTop: '-0.2vh' }"> {{ store.dataAll.welfareList[startItem + item -
+              1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
+        </div>
+      </div>
+      <!-- 右箭头 -->
+      <div class="arrows-left arrows-right"
+        @click="() => { startItem + 21 < store.dataAll.welfareList.length ? startItem += 21 : '' }"
+        :style="{ opacity: startItem + 21 < store.dataAll.welfareList.length ? '1' : '0' }">
+        <img src="@/assets/images/home/icon-right.png" alt="">
+      </div>
+    </div>
+    <div class="content" v-else>
+      <div class="title-box">公益单位</div>
+      <div class="grid-box">
+        <div class="content-item" v-for="(item, index) in store.dataAll.welfareList" :key="index"
+          @click="curUnit = item, isShowInfoBox = true">
+          <!-- 默认图片--无logo情况下显示 -->
+          <div v-if="item.title == '鹏华基金管理有限公司' || item.title == '北京中金公益基金会'" class="defaultLogo"
+            :style="{ backgroundImage: `url(${baseResourceUrl}/logo/logo-default${hoverIndex == item ? 'Ac' : ''}.png)`, backgroundSize: 'cover' }">
+            {{
+              item.title }}</div>
+          <img v-else :src="`${baseResourceUrl}/logo/${item.title}.png`" alt="">
+          <div class="name-box">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- <img v-show="browser.mobile" class="icon-down" src="@/assets/images/home/icon-down.png" alt="" @click="close">
+    <img v-show="!browser.mobile" class="line-down" src="@/assets/images/home/line-down.png" alt="" @click="close"> -->
+  </div>
+</template>
+
+<style lang='less' scoped>
+.scene-list-box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  // align-items: end;
+  z-index: 2;
+  overflow: hidden;
+
+  .backBtn {
+    position: fixed;
+    left: 3%;
+    top: 3%;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .project-box {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.478);
+
+    video {
+      height: 100%;
+    }
+
+    img {
+      height: 100%;
+    }
+
+    .close-icon {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 3%;
+      right: 1%;
+      cursor: pointer;
+    }
+  }
+
+  .info-shade {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.349);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .info-box {
+      position: absolute;
+      // top: 10%;
+      // left: 10%;
+      width: 45%;
+      height: 60%;
+      z-index: 2;
+      // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      border-radius: 25px 25px 0 0;
+
+      .close-icon {
+        width: 40px;
+        position: absolute;
+        right: 3%;
+        top: 4%;
+        cursor: pointer;
+      }
+
+      &-top {
+        width: 100%;
+        height: 20%;
+        background: url(@/assets/images/home/info-top.png);
+        background-size: cover;
+        background-position: center;
+        border-radius: 20px 20px 0 0;
+      }
+
+      &-bottom {
+        width: 100%;
+        min-height: 70%;
+        // max-height: 90%;
+        background: url(@/assets/images/home/info-bottom.png);
+        background-size: 110% 110%;
+        // background-size: auto;
+        background-position: center center;
+        padding: 30px 20px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-around;
+        overflow-y: auto;
+
+        .bottom-left {
+          width: 90%;
+
+          .left-top {
+            display: flex;
+            justify-content: left;
+            align-items: center;
+
+            .website-btn {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 2px 10px;
+              color: white;
+              font-weight: 500;
+              border-radius: 5px;
+              border: 1px solid white;
+              margin-left: 25px;
+              height: 30px;
+              cursor: pointer;
+
+              img {
+                width: 20px;
+                height: 20px;
+                margin-right: 5px;
+              }
+            }
+          }
+
+          .left-disc {
+            font-size: 16px;
+            text-indent: 2em;
+            text-align: justify;
+            margin-top: 10px;
+            max-height: 26vh;
+            overflow: auto;
+            line-height: 24px;
+
+            &::-webkit-scrollbar {
+              width: 0;
+            }
+          }
+
+          .project-list {
+            margin-top: 10px;
+            width: auto;
+            position: relative;
+
+            .selected-box {
+              min-width: 80%;
+              max-width: 100%;
+              background: #BC121A;
+              padding: 10px;
+              color: white;
+              display: flex;
+              justify-content: space-between;
+              box-sizing: border-box;
+
+              img {
+                height: 20px;
+              }
+
+            }
+
+            .option-list {
+              min-width: 80%;
+              max-width: 100%;
+              max-height: 150px;
+              overflow-y: auto;
+              // position: absolute;
+              top: 100%;
+              background: rgba(0, 0, 0, 0.342);
+
+              &::-webkit-scrollbar {
+                width: 0px;
+              }
+
+              .list-item {
+                padding: 3px 10px;
+                cursor: pointer;
+                color: white;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                img {
+                  opacity: 0;
+                  width: 13px;
+                }
+              }
+
+              .list-item:hover {
+                background-color: #bc121bb0;
+
+                img {
+                  opacity: 1;
+                }
+              }
+            }
+          }
+
+
+        }
+
+        .bottom-right {
+          width: 60%;
+          height: 100%;
+
+          .swiper-vertical {
+            touch-action: none !important;
+          }
+
+          .swiper-horizontal {
+            touch-action: none !important;
+          }
+
+
+          .swiper {
+            width: 100%;
+            height: 50%;
+
+            .swiper-wrapper {
+              width: 100%;
+              height: 100%;
+
+              .swiper-slide {
+                width: 100%;
+                height: 100%;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                  cursor: pointer;
+                  object-fit: cover;
+                }
+              }
+            }
+
+            .swiper-pagination {
+              width: 100%;
+              height: .2rem;
+              text-align: center;
+              position: absolute;
+              bottom: 0 !important;
+              line-height: .2rem;
+              box-sizing: border-box;
+              padding: 0 .3rem;
+              font-size: 0;
+              z-index: 1;
+            }
+          }
+        }
+      }
+
+    }
+
+  }
+
+
+  .content {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    background: #ffffff7c;
+    // border-radius: 40px 40px 0 0;
+    backdrop-filter: blur(10px);
+    // padding: 10% 5%;
+    box-sizing: border-box;
+    padding: 3% 0;
+
+    .arrows-left {
+      cursor: pointer;
+      margin-right: 1.5%;
+    }
+
+    .arrows-right {
+      margin-left: 1.5%;
+    }
+
+    .content-list {
+      width: 100%;
+      // height: 80%;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+      gap: 10px 10px;
+
+      .list-item {
+        width: 90%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+
+        .list-item-con {
+          width: 100%;
+          height: 90%;
+          // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+
+
+          // object-fit: cover;
+          img {
+            width: 100%;
+            // height: 0%;
+            object-fit: cover;
+          }
+
+          .defaultLogo {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .number {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            color: red;
+            font-size: 40px;
+          }
+        }
+
+        .item-name {
+          width: 100%;
+          animation: identifier1 8s linear infinite;
+          white-space: nowrap;
+
+        }
+
+        @keyframes identifier1 {
+          0% {
+            transform: translate(100%);
+          }
+
+          100% {
+            transform: translate(-100%);
+          }
+        }
+
+      }
+    }
+  }
+
+  .line-down {
+    position: absolute;
+    width: 70%;
+    bottom: 1%;
+    cursor: pointer;
+  }
+
+  .icon-down {
+    position: absolute;
+    bottom: 80%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: 2%;
+  }
+}
+
+@media screen and (max-width: 700px),
+(orientation: portrait) {
+  .scene-list-box {
+    justify-content: end;
+    height: 100%;
+    // position: relative;
+
+    .project-box {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 99;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.788);
+
+      video {
+        width: 100%;
+        height: auto;
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+
+      .close-icon {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: 3%;
+        right: 1%;
+        cursor: pointer;
+      }
+    }
+
+    .info-box-mo {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: #C5A16C;
+      z-index: 3;
+      font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+
+      .back-icon {
+        margin-left: 5%;
+        margin-top: 5%;
+      }
+
+      .content-info {
+        padding: 8%;
+        max-height: 80%;
+        overflow: auto;
+
+        .left-top {
+          display: flex;
+          justify-content: left;
+          align-items: center;
+
+          .website-btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px;
+            color: white;
+            font-weight: 500;
+            border-radius: 5px;
+            border: 1px solid white;
+            margin-left: 10px;
+            height: 25px;
+            font-size: .8em;
+            cursor: pointer;
+
+            img {
+              width: 15px;
+              height: 15px;
+              margin-right: 3px;
+            }
+          }
+        }
+
+        .info-disc {
+          margin-top: 10px;
+          font-size: 14px;
+          letter-spacing: .3em;
+          line-height: 24px;
+        }
+
+        .selected {
+          // width: 100%;
+          background: #BC121A;
+          color: white;
+          padding: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          img {
+            width: 10px;
+          }
+
+          .option-list {
+            width: 100%;
+            top: 100%;
+            background: rgba(0, 0, 0, 0.342);
+
+            .list-item {
+              padding: 5px 10px;
+              cursor: pointer;
+              color: white;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              img {
+                opacity: 0;
+                width: 13px;
+              }
+            }
+
+            .list-item:hover {
+              background-color: #bc121bb0;
+
+              img {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        .option-list {
+          width: 100%;
+          top: 100%;
+          background: rgba(0, 0, 0, 0.342);
+
+          .list-item {
+            padding: 5px 10px;
+            cursor: pointer;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img {
+              opacity: 0;
+              width: 13px;
+            }
+          }
+
+          .list-item:hover {
+            background-color: #bc121bb0;
+
+            img {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+
+
+      .swiper-vertical {
+        touch-action: none !important;
+      }
+
+      .swiper {
+        width: 100%;
+        height: 30%;
+
+
+        .swiper-wrapper {
+          flex-direction: row;
+
+          .swiper-slide {
+            text-align: center;
+            font-size: 18px;
+            background: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              display: block;
+              width: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+
+        .swiper-button-next:after {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 3px 3px 5px black;
+        }
+
+        .swiper-button-prev:after {
+          font-size: 14px;
+          color: #fff;
+          text-shadow: 3px 3px 5px black;
+        }
+
+        .pagination2 {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          bottom: 10px;
+          z-index: 3;
+
+          .pagination2-item {
+            width: 5px;
+            height: 5px;
+            border-radius: 50px;
+            margin-right: 10px;
+            background: gray;
+
+          }
+
+          .pagination2-item:last-child {
+            margin-right: 0;
+          }
+
+          .active {
+            width: 7px;
+            height: 7px;
+            background: #fff;
+          }
+        }
+
+      }
+    }
+
+    .content {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(#bc121b93, rgba(0, 0, 0, 0.26));
+      backdrop-filter: blur(2px);
+      box-sizing: border-box;
+      padding: 20px 10px;
+      font-size: 14px;
+      color: white;
+      flex-direction: column;
+      font-family: 'SourceHanSansCN-Medium';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      overflow: inherit;
+
+      .icon-down {
+        position: absolute;
+        top: 0;
+        transform: translateY(-100%);
+      }
+
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+
+      .title-box {
+        color: white;
+        font-weight: bold;
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+
+      .grid-box {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+        overflow: auto;
+        margin: auto;
+        padding: 15px;
+        box-sizing: border-box;
+
+
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+
+        .content-item {
+          display: flex;
+          flex-direction: column;
+          // justify-content: center;
+          align-items: flex-start;
+
+          .defaultLogo {
+            width: 40vw;
+            height: 40vw;
+            border-radius: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: black;
+          }
+
+
+          img {
+            width: 40vw;
+            height: 40vw;
+            object-fit: cover;
+            border-radius: 10px;
+          }
+
+          .name-box {
+            margin-top: 5px;
+            text-align: left;
+          }
+        }
+      }
+
+
+
+    }
+
+    .backBtn {
+      top: 2%;
+    }
+
+  }
+}
+</style>

zhengquan/src/views/WelcomePage/WelcomePage.vue

@@ -14,7 +14,7 @@ const router = useRouter()
 const countDownNumber = ref(5)
 
 onMounted(() => {
-  
+
   let timer = setInterval(() => {
     if (countDownNumber.value > 0) {
       countDownNumber.value--;
@@ -96,7 +96,8 @@ onMounted(() => {
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+(orientation: portrait) {
   .welcome-page {
     .logo {
       position: absolute;