新增水平图片展示组件

+<!--
+ * @Date: 2024-09-29 16:27:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-29 16:48:19
+ * @FilePath: /hager/src/components/hagerHCarousel.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="hager-h-carousel">
+    <div class="carousel-container">
+      <div v-if="items.length > 4" @click="prevItem" class="arrow left-arrow"><i class="el-icon-arrow-left"></i></div>
+      <div class="carousel">
+        <div class="carousel-track" :style="trackStyle">
+          <div v-for="item in items" :key="item.id" class="carousel-item">
+            <!-- <img :src="item.image" :alt="item.name" style="width: 100%;"> -->
+            <div class="product-item">
+              <el-image style="width: 14rem; height: 14rem;" :src="item.image" fit="fit"></el-image>
+            </div>
+            <h3>{{ item.name }}</h3>
+            <p>{{ item.description }}</p>
+          </div>
+        </div>
+      </div>
+      <div v-if="items.length > 4" @click="nextItem" class="arrow right-arrow"><i class="el-icon-arrow-right"></i></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+      items: [{
+        id: 1,
+        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        name: 'Item 1',
+        description: 'This is the description for Item 1.'
+      }, {
+        id: 2,
+        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        name: 'Item 2',
+        description: 'This is the description for Item 2.'
+      }, {
+        id: 3,
+        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        name: 'Item 3',
+        description: 'This is the description for Item 3.'
+      }, {
+        id: 4,
+        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        name: 'Item 4',
+        description: 'This is the description for Item 4.'
+      }, {
+        id: 5,
+        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        name: 'Item 5',
+        description: 'This is the description for Item 5.'
+      }, {
+        id: 6,
+        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        name: 'Item 6',
+        description: 'This is the description for Item 6.'
+      }],
+      currentIndex: 0,
+    }
+  },
+  mounted () {
+
+  },
+  computed: {
+    trackStyle() {
+      return {
+        transform: `translateX(-${this.currentIndex * 25}%)`
+      };
+    }
+  },
+  methods: {
+    nextItem() {
+      if (this.currentIndex < this.items.length - 4) {
+        this.currentIndex++;
+      } else {
+        this.currentIndex = 0; // Loop back to start
+      }
+    },
+    prevItem() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+      } else {
+        this.currentIndex = this.items.length - 4; // Loop to end
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.hager-h-carousel {
+  .carousel-container {
+    position: relative;
+    width: 100%;
+    // max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carousel {
+    overflow: hidden;
+    width: 100%; /* Adjust based on design */
+  }
+
+  .carousel-track {
+    display: flex;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .carousel-item {
+    flex: 0 0 25%; /* 4 items, so each takes 25% */
+    box-sizing: border-box;
+    padding: 10px;
+    padding-left: 0;
+    // text-align: center;
+    .product-item {
+      height: auto;
+      padding: 1.5rem;
+      text-align: center;
+      color: #333;
+      border-radius: 8px;
+      background-color: #f3f3f3;
+    }
+  }
+
+  .arrow {
+    background-color: #fff;
+    // border: 1px solid #ccc;
+    // padding: 10px;
+    cursor: pointer;
+    font-size: 1.5rem;
+  }
+
+  .left-arrow {
+    position: absolute;
+    left: -2rem;
+  }
+
+  .right-arrow {
+    position: absolute;
+    right: -2rem;
+  }
+}
+</style>