更新

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

@@ -10,6 +10,9 @@ import baseUrl from "@/utils/https";
 
 // 分页
 const startItem = ref(0)
+
+const startItemMo = ref(0)
+
 const store = useStore()
 const router = useRouter()
 const isOpenSceneList = ref(false)
@@ -58,11 +61,32 @@ const openUnit = () => {
     </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">
-      <img class="item-bg" src="@/assets/images/home/bg1.png" alt="">
-      <img :src="isOpenSceneList ? IconGy : IconGyAc" alt="">
-      <div style="margin-top: -2vh;" @click="openUnit">公益单位</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>
+      <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">
@@ -177,8 +201,6 @@ const openUnit = () => {
 
     .arrows-right {
       border-radius: 0px 40px 0px 0px;
-
-
     }
 
     .list-item {
@@ -235,7 +257,7 @@ const openUnit = () => {
 
 @media screen and(max-width: 400px) {
   .tabbar-box-mo {
-    width: 95%;
+    width: 90%;
     position: absolute;
     right: 0;
     height: 23vh;
@@ -244,11 +266,130 @@ const openUnit = () => {
     box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.5);
     border-radius: 15px 0 0 0;
     bottom: 0;
-    padding: 10px 20px;
+    padding: 10px 0px 10px 35px;
     box-sizing: border-box;
-    .item-bg{
-      width: 35vw;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    white-space: nowrap;
+
+    // justify-content: left;
+    // align-items: end;
+
+    .gonyi {
+      width: 30vw;
+      height: 100%;
+      position: relative;
+      margin-left: -5%;
+      float: left;
+
+      .item-bg {
+        width: 35vw;
+        position: absolute;
+        top: 0;
+        left: 0;
+        filter: blur(1px);
+        margin-right: -10px;
+      }
+
+      .item-con {
+        width: 90%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: 8%;
+        top: 0;
+        z-index: 2;
+
+        img {
+          width: 70%;
+        }
+
+        div {
+          color: white;
+          font-size: .9em;
+          margin-top: -2vw;
+          font-family: 'AlibabaPuHuiTi2.0-105Heavy';
+        }
+      }
+
+      .item-numbser {
+        color: #C5A16C;
+        font-family: 'SourceHanSansCN-Medium';
+        position: absolute;
+        font-size: .8em;
+        right: 5%;
+        bottom: 20%;
+      }
+    }
+
+    // .arrows-left-mo {
+    //   width: 20px;
+    //   height: 100%;
+    //   display: flex;
+    //   justify-content: center;
+    //   align-items: center;
+    //   cursor: pointer;
+    //   margin-left: 3px;
+    //   margin-right: -2px;
+
+    //   img {
+    //     width: 80%;
+    //   }
+    // }
+
+    .arrows-left-mo {
+      width: 18%;
+      height: 80%;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 3px;
+      margin-right: -2px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      // background: url(@/assets/images/home/arrows-right-mo.png);
+      // background-size: 100% 100%;
+      // background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, black 80%);
+      transform: translateY(-45%);
+      z-index: 4;
+
+      img {
+        width: 30%;
+        // margin-left: 30%;
+        margin-left: 5%;
+      }
+    }
+
+    .arrows-right-mo {
+      width: 18%;
+      height: 80%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 3px;
+      margin-right: -2px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      // background: url(@/assets/images/home/arrows-right-mo.png);
+      // background-size: 100% 100%;
+      background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, black 80%);
+      transform: translateY(-45%);
+      z-index: 4;
+
+      img {
+        width: 30%;
+        margin-left: 30%;
+      }
     }
+
+
   }
 }
 </style>