更新移动端首页修改

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

@@ -26,6 +26,8 @@ const openUnit = () => {
   isOpenSceneList.value = false
 };
 
+const openMo = ref(false)
+
 </script>
 
 <template>
@@ -60,63 +62,77 @@ const openUnit = () => {
       </div>
     </div>
   </div>
-  <div v-else class="tabbar-box-mo">
-    <!-- 左箭头 -->
-    <div class="arrows-left-mo" v-show="startItemMo != 0" @click="startItemMo -= 1">
-      <img src="@/assets/images/home/arrows-left-mo-icon.png" alt="">
-    </div>
-    <!-- 公益单位 -->
-    <div class="gonyi" v-show="startItemMo == 0">
-      <img class="item-bg" src="@/assets/images/home/bg0.png" alt="">
-      <div class="item-con">
-        <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
-        <div @click="openUnit">公益单位</div>
-      </div>
-    </div>
-    <div class="gonyi" v-for="(item, index) in 3" :key="index">
-      <!-- 在第一位 -->
-      <img v-if="startItemMo != 0 && index == 0" class="item-bg" src="@/assets/images/home/bg1-1.png" alt="">
-      <img v-else class="item-bg" src="@/assets/images/home/bg1.png" alt="">
-      <img v-show="startItemMo + index == store.dataAll.sceneList.length - 1" src="" alt="">
-      <div class="item-con">
-        <img :src="`${baseUrl}/icon/${store.dataAll.sceneList[startItemMo + index].icon}`" alt="">
-        <div @click="openUnit">{{ store.dataAll.sceneList[startItemMo + index].name }}</div>
+  <div v-else>
+    <div v-if="!openMo">
+      <!-- 上箭头 -->
+      <img class="up-icon" src="@/assets/images/home/icon-up-mo.png" alt="" @click="openMo = true">
+      <div class="tabbar-box-mo">
+        <!-- 左箭头 -->
+        <div class="arrows-left-mo" v-show="startItemMo != 0" @click="startItemMo -= 1">
+          <img src="@/assets/images/home/arrows-left-mo-icon.png" alt="">
+        </div>
+        <!-- 公益单位 -->
+        <div class="gonyi" v-show="startItemMo == 0" @click="openUnit">
+          <img class="item-bg" src="@/assets/images/home/bg0.png" alt="">
+          <div class="item-con">
+            <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
+            <div>公益单位</div>
+          </div>
+        </div>
+        <div class="gonyi" v-for="(item, index) in 3" :key="index"
+          @click="() => { router.push({ name: 'scene', query: { code: store.dataAll.sceneList[startItem + item - 1].code } }) }">
+          <!-- 在第一位 -->
+          <img v-if="startItemMo != 0 && index == 0" class="item-bg" src="@/assets/images/home/bg1-1.png" alt="">
+          <img v-else v-show="startItemMo + index != store.dataAll.sceneList.length - 1" class="item-bg"
+            src="@/assets/images/home/bg1.png" alt="">
+          <img class="item-bg-last" v-show="startItemMo + index == store.dataAll.sceneList.length - 1"
+            src="@/assets/images/home/bg3.png" alt="">
+          <div class="item-con">
+            <img :src="`${baseUrl}/icon/${store.dataAll.sceneList[startItemMo + index].icon}`" alt="">
+            <div>{{ store.dataAll.sceneList[startItemMo + index].name }}</div>
+          </div>
+          <div class="item-numbser" v-show="startItemMo + index != store.dataAll.sceneList.length - 1">{{ startItemMo +
+            index
+            + 1 }}</div>
+        </div>
+        <!-- 右箭头 -->
+        <div class="arrows-right-mo" @click="startItemMo += 1" v-show="startItemMo + 3 < store.dataAll.sceneList.length">
+          <img src="@/assets/images/home/arrows-right-mo-icon.png" alt="">
+        </div>
       </div>
-      <div class="item-numbser" v-show="startItemMo + index != store.dataAll.sceneList.length - 1">{{ startItemMo + index + 1 }}</div>
-    </div>
-    <!-- 右箭头 -->
-    <div class="arrows-right-mo" @click="startItemMo += 1" v-show="startItemMo + 3 < store.dataAll.sceneList.length">
-      <img src="@/assets/images/home/arrows-right-mo-icon.png" alt="">
     </div>
-    <!-- 公益单位 -->
-    <!-- <div class="gonyi">
-      <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
-      <div style="margin-top: -2vh;" @click="openUnit">公益单位</div>
-    </div> -->
-    <!-- <div class="scene-box">
-      <div class="scene-icon">
-        <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
-        <div style="margin-top: -2vh;" @click="openUnit">公益单位</div>
-      </div>
-      <div class="scene-list">
-        <img class="icon-up" src="@/assets/images/home/icon-up-mo.png" alt="">
-        <div class="list-item">
-          <img class="item-bg" v-show="index == 0" src="@/assets/images/home/bg1.png" alt="">
-          <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
-          <div style="margin-top: -2vh;" @click="openUnit">公益单位</div>
+    <div v-else>
+      <!-- 下箭头 -->
+      <img class="down-icon" src="@/assets/images/home/icon-down.png" alt="" @click="openMo = false">
+      <div class="tabbar-box-mo open">
+        <div class="open-name">
+          虚拟展厅
         </div>
-        <div class="list-item" v-for="(item, index) in store.dataAll.sceneList" :key="index">
-          <div class="number-icon" v-show="index != store.dataAll.sceneList.length - 1">{{ index + 1 }}</div>
-          <img class="item-bg" v-show="index == 0" src="@/assets/images/home/bg1.png" alt="">
-          <img class="item-bg" v-show="index != 0 && index != store.dataAll.sceneList.length - 1"
-            src="@/assets/images/home/bg2.png" alt="">
-          <img class="item-bg" v-show="index == store.dataAll.sceneList.length - 1" src="@/assets/images/home/bg3.png"
-            alt="">
-          <img :src="`${baseUrl}/icon/${item.icon}`" alt="">
-          <div style="margin-top: -2vh;">{{ item.name }}</div>
+        <div class="scene-list">
+          <div class="scene-list-item" @click="openUnit">
+            <img class="item-bg" style="border-top-left-radius: 60px" src="@/assets/images/home/bg1-1open.png" alt="">
+            <!-- 封面 -->
+            <div class="thumb-img"
+              :style="{ background: `url(${baseUrl}/thumbnail/img-gonyi.png`, backgroundSize: 'cover' }"></div>
+            <div class="item-name">公益单位</div>
+            <div class="item-numbser">1</div>
+          </div>
+          <div class="scene-list-item" v-for="(item, index) in store.dataAll.sceneList" :key="index"
+            @click="() => { router.push({ name: 'scene', query: { code: store.dataAll.sceneList[index].code } }) }">
+            <img v-show="index != store.dataAll.sceneList.length - 1" class="item-bg"
+              src="@/assets/images/home/bg1open.png" alt="">
+            <img v-show="index == store.dataAll.sceneList.length - 1" class="item-bg"
+              src="@/assets/images/home/bg3open.png" alt="">
+            <!-- 封面 -->
+            <div class="thumb-img"
+              :style="{ background: `url(${baseUrl}/thumbnail/${item.thumbnail})`, backgroundSize: 'cover' }"></div>
+            <div class="item-name">{{ store.dataAll.sceneList[startItemMo + index].name }}</div>
+            <div class="item-numbser" v-show="startItemMo + index != store.dataAll.sceneList.length - 1">{{ index + 2 }}
+            </div>
+          </div>
         </div>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -256,6 +272,13 @@ const openUnit = () => {
 }
 
 @media screen and(max-width: 400px) {
+
+  .up-icon {
+    position: absolute;
+    bottom: 23vh;
+    left: 50%;
+  }
+
   .tabbar-box-mo {
     width: 90%;
     position: absolute;
@@ -275,6 +298,8 @@ const openUnit = () => {
     // justify-content: left;
     // align-items: end;
 
+
+
     .gonyi {
       width: 30vw;
       height: 100%;
@@ -291,6 +316,15 @@ const openUnit = () => {
         margin-right: -10px;
       }
 
+      .item-bg-last {
+        width: 32vw;
+        position: absolute;
+        top: 0;
+        left: 0;
+        filter: blur(1px);
+        margin-right: -10px;
+      }
+
       .item-con {
         width: 90%;
         height: 100%;
@@ -391,5 +425,82 @@ const openUnit = () => {
 
 
   }
+
+  .down-icon {
+    position: absolute;
+    top: calc(97.5vw);
+    left: 50%;
+  }
+
+  .open {
+    height: 42vh;
+    background: linear-gradient(#bc121b63, rgba(0, 0, 0, 0.644));
+    font-family: 'AlibabaPuHuiTi2.0-105Heavy';
+    padding: 0;
+
+    .open-name {
+      width: 100%;
+      height: 8vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+    }
+
+    .scene-list {
+      width: 90%;
+      height: 35vh;
+      // background: red;
+      padding: 0 15px;
+      display: flex;
+      justify-content: left;
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      .scene-list-item {
+        width: 30%;
+        position: relative;
+
+        .thumb-img {
+          width: 93%;
+          height: 65%;
+          position: absolute;
+          top: 0;
+          left: 8%;
+        }
+
+        .item-bg {
+          // width: 100%;
+          height: 92%;
+          transform: scale(1.14);
+          filter: blur(1px);
+        }
+
+        .item-name {
+          position: absolute;
+          color: white;
+          bottom: 21%;
+          left: 55%;
+          transform: translateX(-50%);
+          font-size: 13px;
+
+        }
+
+        .item-numbser {
+          color: #C5A16C;
+          font-family: 'SourceHanSansCN-Medium';
+          position: absolute;
+          font-size: .8em;
+          right: -5%;
+          bottom: 20%;
+        }
+      }
+
+    }
+  }
 }
 </style>