mix

src/views/ordinaryPage/components/ImageList/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="image-box">
+    <button @click="prevPage" class="slide-right"><div class="triangle"></div></button>
+    <transition-group name="slide" mode="out-in" class="image-list">
+      <div v-for="(image, index) in paginatedImages" :key="index" class="image-item" @click="handleImageClick(index)">
+        <img :src="image.url" :alt="image.alt">
+      </div>
+    </transition-group>
+    <!-- <span>{{ currentPage }}</span> -->
+    <button @click="nextPage" class="slide-left"><div style="transform: rotate(180deg)" class="triangle"></div></button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    pageSize: {
+      type: Number,
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    paginatedImages() {
+      const startIndex = (this.currentPage - 1) * this.pageSize;
+      const endIndex = startIndex + this.pageSize;
+      return this.images.slice(startIndex, endIndex);
+    }
+  },
+  methods: {
+    handleImageClick(index) {
+      this.$emit("handleImageClick", index);
+    },
+    prevPage() {
+      this.$emit("prev-page");
+    },
+    nextPage() {
+      this.$emit("next-page");
+    }
+  }
+};
+</script>
+
+<style>
+.image-box{
+  display: flex;
+}
+.slide-right,.slide-left{
+  width: 3.95vw;
+  height: 100%;
+
+
+
+}
+.triangle {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-right: 15px solid #CCCCCC;
+  background: linear-gradient(to left, #FFFFFF, #CCCCCC);
+}
+
+.triangle::before {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 15px;
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-right: 15px solid #FFFFFF;
+  transform: translateX(-100%);
+}
+.image-list {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.image-item {
+  margin-right: 1.04vw;
+  cursor: pointer;
+  width: 9.79vw;
+  height: 100%;
+  border-radius: 0.78vw;
+}
+
+.image-item img {
+  max-width: 100%;
+  height: auto;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s;
+}
+
+.slide-enter {
+  transform: translateX(100%);
+}
+
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter {
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter {
+  transform: translateX(100%);
+}
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+</style>

src/views/ordinaryPage/index.less

@@ -3,7 +3,6 @@
   .ordinary-left {
     display: flex;
     width: 63.48vw;
-    height: 67.79vh;
     justify-content: center;
     flex-wrap: wrap;
     .search-container {
@@ -16,10 +15,10 @@
       overflow: hidden;
       position: relative;
       background-color:#33373c;
-      width: 58vw;
+      width: 63.34vw;
       height: 67.79vh;
       border-radius: 40px;
-      margin-left: 100px;
+      margin-top: -10vh;
       img {
         width: 100%;
         height: 100%;
@@ -91,9 +90,7 @@
   }
   .ordinary-list {
     width: 26.36vw;
-    height: 76.94vh;
     margin-left: 1.56vw;
-    margin-top: 11.29vh;
   }
   .ordinary-list {
     .item-image {

src/views/ordinaryPage/origin.less

@@ -0,0 +1,399 @@
+.ordinary-container {
+    display: flex;
+    // float:right;
+    justify-content: flex-end;
+    height: 100%;
+    .ordinary-left {
+      display: flex;
+      width: 63.48vw;
+      justify-content: center;
+      flex-wrap: wrap;
+      .search-container {
+        width: 44.9vw;
+        margin-top: 11.29vh;
+        margin-bottom: 2.13vh;
+      }
+      .origin-map {
+        position: relative;
+        width: 63.34vw;
+        height: 52.63vh;
+        border-radius: 40px;
+        overflow: hidden;
+        background-color: rgba(117, 117, 117, 0.8);
+        // img {
+        //   width: 100%;
+        //   height: 102%;
+        // }
+      }
+      .image-container {
+        width: 100%;
+        height: 11.66vh;
+        margin-top: 6.38vh;
+      }
+  
+      .bench-button {
+        width: 41.14vw;
+        height: 6.67vh;
+        line-height: 6.67vh;
+        background: linear-gradient(
+          358deg,
+          rgba(255, 255, 255, 0.63) 0%,
+          rgba(255, 255, 255, 0) 66%,
+          rgba(84, 84, 84, 0) 100%
+        );
+        border-radius: 79px 79px 79px 79px;
+        position: relative;
+        top: -20.37vh;
+        z-index: 3;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        .btn-item {
+          height: 100%;
+          img {
+            width: 2.23vw;
+          }
+        }
+        i {
+          font-size: 30px;
+        }
+      }
+      .bench-button:before {
+        background: linear-gradient(
+          179deg,
+          rgba(255, 255, 255, 0.36) 0%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        border-radius: 79px 79px 79px 79px;
+        opacity: 1;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        backdrop-filter: blur(2px);
+      }
+    }
+  
+    .origin-right {
+      // margin-top: 11.29vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 20px;
+    }
+  
+    .origin-basic {
+      height: 130px;
+      margin-bottom: 1.85vh;
+      background: rgba(0, 0, 0, 0.49);
+      border-radius: 2.08vw;
+      border: 1px solid #707070;
+      margin-left: 1.56vw;
+      
+    }
+    .origin-list {
+      width: 26.36vw;
+      // height: 60.92vh;
+      margin-left: 1.56vw;
+    }
+    .origin-list {
+      .item-box {
+        width: 100%;
+        padding: 1.04vw 1.66vh 1.04vw;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 20px 20px 20px 20px;
+        opacity: 1;
+        display: flex;
+        justify-content: space-between;
+        .item-right {
+          width: 12vw;
+        }
+        .item-title {
+          height: 4.17vh;
+          font-size: 28px;
+          font-family: PingFang SC-Bold, PingFang SC;
+          font-weight: 400;
+          color: #fbfbfb;
+          line-height: 4.17vh;
+        }
+        .item-description {
+          margin-top: 0.37vh;
+          height: 2.31vh;
+          font-size: 16px;
+          font-family: PingFang SC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #dfdfdf;
+          line-height: 2.31vh;
+        }
+        .item-tag {
+          display: flex;
+          margin-top: 0vh;
+          width: 10vw;
+          .tag {
+            margin-bottom: 0.2vh;
+            //width: 3.13vw;
+            font-size: xx-small;
+            text-align: center;
+            background-color: #5d9a6d;
+            border-radius: 10px;
+            color: #f2f2f2;
+            margin-right: 0.2vw;
+            padding: 5px 10px;
+          }
+        }
+      }
+    }
+  }
+  
+  // .ready {
+  //   color: #65c94c !important;
+  //   font-size: 30px;
+  // }
+  // .occupied {
+  //   color: #478bc3 !important;
+  //   font-size: 30px;
+  // }
+  // .offline {
+  //   color: #cdd0cf !important;
+  //   font-size: 30px;
+  // }
+  // .offline {
+  //   color: red !important;
+  //   font-size: 30px;
+  // }
+  
+  .item-image {
+    width: 7.29vw;
+    height: 7.29vw;
+    border-radius: 15px;
+    border: 2px solid #dfdfdf;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 15px;
+    }
+  }
+  
+  
+  *::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  
+  *::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 5px;
+    box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
+    background: rgba(180, 180, 180, 0.2);
+  }
+  
+  *::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+    border-radius: 10px;
+    background: transparent;
+  }.origin-container {
+  display: flex;
+  // float:right;
+  justify-content: flex-end;
+  height: 100%;
+  .origin-left {
+    display: flex;
+    width: 63.48vw;
+    justify-content: center;
+    flex-wrap: wrap;
+    .search-container {
+      width: 44.9vw;
+      margin-top: 11.29vh;
+      margin-bottom: 2.13vh;
+    }
+    .origin-map {
+      position: relative;
+      width: 63.34vw;
+      height: 52.63vh;
+      border-radius: 40px;
+      overflow: hidden;
+      background-color: rgba(117, 117, 117, 0.8);
+      // img {
+      //   width: 100%;
+      //   height: 102%;
+      // }
+    }
+    .image-container {
+      width: 100%;
+      height: 11.66vh;
+      margin-top: 6.38vh;
+    }
+
+    .bench-button {
+      width: 41.14vw;
+      height: 6.67vh;
+      line-height: 6.67vh;
+      background: linear-gradient(
+        358deg,
+        rgba(255, 255, 255, 0.63) 0%,
+        rgba(255, 255, 255, 0) 66%,
+        rgba(84, 84, 84, 0) 100%
+      );
+      border-radius: 79px 79px 79px 79px;
+      position: relative;
+      top: -20.37vh;
+      z-index: 3;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      .btn-item {
+        height: 100%;
+        img {
+          width: 2.23vw;
+        }
+      }
+      i {
+        font-size: 30px;
+      }
+    }
+    .bench-button:before {
+      background: linear-gradient(
+        179deg,
+        rgba(255, 255, 255, 0.36) 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      border-radius: 79px 79px 79px 79px;
+      opacity: 1;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      backdrop-filter: blur(2px);
+    }
+  }
+
+  .origin-right {
+    // margin-top: 11.29vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 20px;
+  }
+
+  .origin-basic {
+    height: 130px;
+    margin-bottom: 1.85vh;
+    background: rgba(0, 0, 0, 0.49);
+    border-radius: 2.08vw;
+    border: 1px solid #707070;
+    margin-left: 1.56vw;
+    
+  }
+  .origin-list {
+    width: 26.36vw;
+    // height: 60.92vh;
+    margin-left: 1.56vw;
+  }
+  .origin-list {
+    .item-box {
+      width: 100%;
+      padding: 1.04vw 1.66vh 1.04vw;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 20px 20px 20px 20px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      .item-right {
+        width: 12vw;
+      }
+      .item-title {
+        height: 4.17vh;
+        font-size: 28px;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: 400;
+        color: #fbfbfb;
+        line-height: 4.17vh;
+      }
+      .item-description {
+        margin-top: 0.37vh;
+        height: 2.31vh;
+        font-size: 16px;
+        font-family: PingFang SC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #dfdfdf;
+        line-height: 2.31vh;
+      }
+      .item-tag {
+        display: flex;
+        margin-top: 0vh;
+        width: 10vw;
+        .tag {
+          margin-bottom: 0.2vh;
+          //width: 3.13vw;
+          font-size: xx-small;
+          text-align: center;
+          background-color: #5d9a6d;
+          border-radius: 10px;
+          color: #f2f2f2;
+          margin-right: 0.2vw;
+          padding: 5px 10px;
+        }
+      }
+    }
+  }
+}
+
+// .ready {
+//   color: #65c94c !important;
+//   font-size: 30px;
+// }
+// .occupied {
+//   color: #478bc3 !important;
+//   font-size: 30px;
+// }
+// .offline {
+//   color: #cdd0cf !important;
+//   font-size: 30px;
+// }
+// .offline {
+//   color: red !important;
+//   font-size: 30px;
+// }
+
+.item-image {
+  width: 7.29vw;
+  height: 7.29vw;
+  border-radius: 15px;
+  border: 2px solid #dfdfdf;
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+  }
+}
+
+
+*::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
+  background: rgba(180, 180, 180, 0.2);
+}
+
+*::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+  border-radius: 10px;
+  background: transparent;
+}