fix 滚动组件测试

hookehuyr
Commit eaa8c8081b635aea12bb1047fbd20b2548db67c7 eaa8c808 1 parent 1f2f3082
Showing 5 changed files with 117 additions and 8 deletions
components.d.ts
package.json
src/main.js
src/views/index.vue
yarn.lock
--- a/components.d.ts
View file @eaa8c80
+++ b/components.d.ts
View file @eaa8c80
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    copy: typeof import('./src/components/hagerHCarousel copy.vue')['default']
     ElBreadcrumb: typeof import('element-ui/lib/breadcrumb')['default']
     ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
     ElButton: typeof import('element-ui/lib/button')['default']
@@ -27,6 +28,7 @@ declare module 'vue' {
     HagerHCarousel: typeof import('./src/components/hagerHCarousel.vue')['default']
     HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
     HagerHT: typeof import('./src/components/common/hagerHT.vue')['default']
+    HagerMCarousel: typeof import('./src/components/hagerMCarousel.vue')['default']
     HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
     HagerMore: typeof import('./src/components/hagerMore.vue')['default']
     HagerT: typeof import('./src/components/common/hagerT.vue')['default']
--- a/package.json
View file @eaa8c80
+++ b/package.json
View file @eaa8c80
@@ -16,7 +16,9 @@
     "jquery": "^3.7.1",
     "mui-player": "^1.8.1",
     "sass": "1.55.0",
+    "swiper": "4",
     "vue": "2.7.13",
+    "vue-awesome-swiper": "3.1.3",
     "vue-router": "3.6.5"
   },
   "devDependencies": {
--- a/src/main.js
View file @eaa8c80
+++ b/src/main.js
View file @eaa8c80
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 15:31:44
+ * @LastEditTime: 2024-10-10 20:20:18
  * @FilePath: /hager/src/main.js
  * @Description: 文件描述
  */
@@ -18,11 +18,16 @@ import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，
 // collapse 展开折叠
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import VueAwesomeSwiper from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css'; // 确保引入正确的CSS文件路径
+
 Vue.use(VueRouter);
 // Vue.use(ElementUI);
 // Vue.use(Button).use(Row).use(Col)
 Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.use(VueAwesomeSwiper);
+
 new Vue({
   router,
   render: (h) => h(App),
--- a/src/views/index.vue
View file @eaa8c80
+++ b/src/views/index.vue
View file @eaa8c80
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-10 14:44:15
+ * @LastEditTime: 2024-10-11 10:01:58
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -48,9 +48,17 @@
     </hager-box>
     <hager-box class="box-2n" @screen-width="handleScreenWidth">
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
-      <div :class="['hager-solution', is_xs ? 'xs' : '']">
+      <div v-if="!is_xs" class="hager-solution">
-        <div @click="goToSolution(item)" :class="['solution-item', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
+        <div @click="goToSolution(item)" :class="['solution-item']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
       </div>
+      <swiper v-else  ref="mySwiper" class="swiper" :options="swiperOption">
+        <swiper-slide
+          class="solution-item-a"
+          :style="{ backgroundImage: 'url('+item.src+')' }"
+          v-for="(item, index) in solution_list" :key="index">
+          <p>{{ item.title }}</p>
+        </swiper-slide>
+      </swiper>
       <div class="xs-control" v-if="is_xs">
         <div><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div>
       </div>
@@ -182,6 +190,30 @@ export default {
         src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         title: '三型特决井天'
       }],
+      swiperOption: {
+        slidesPerView: 3,
+        spaceBetween: 50,
+        preventClicks : false,
+        slideToClickedSlide: false,
+        breakpoints: {
+          1024: {
+            slidesPerView: 4,
+            spaceBetween: 40
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 30
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 20
+          },
+          320: {
+            slidesPerView: 1,
+            spaceBetween: 10
+          }
+        }
+      }
     }
   },
   async mounted () {
@@ -216,13 +248,17 @@ export default {
       this.screen_width = width;
     },
     prevBtn (list) {
-      const last = list.pop(); // 移除最后一个元素
+      this.$refs.mySwiper.swiper.slidePrev();
-      list.unshift(last); // 将最后一个元素添加到数组开头
     },
     nextBtn (list) {
-      const first = list.shift(); // 移除第一个元素
+      this.$refs.mySwiper.swiper.slideNext();
-      list.push(first); // 将第一个元素添加到数组末尾
     },
+    onSwiper (swiper) {
+      console.log(swiper);
+    },
+    onSlideChange () {
+      console.log('slide change');
+    }
   },
 }
 </script>
@@ -334,6 +370,32 @@ export default {
       }
     }
   }
+  .solution-item-a {
+    position: relative;
+    height: 12rem;
+    // padding: 1.5rem;
+    text-align: center;
+    color: #FFF;
+    border-radius: 8px;
+    // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+    background-size: cover;
+    background-position: center;
+    // transition: transform 0.3s ease-in-out;
+    &:hover {
+      // transform: scale(1.05);
+      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+    }
+    p {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2rem;
+      background-color: rgba(0, 0, 0, 0.2);
+      line-height: 2rem;
+    }
+  }
   .xs-control {
     display: flex;
     justify-content: flex-end;
--- a/yarn.lock
View file @eaa8c80
+++ b/yarn.lock
View file @eaa8c80
@@ -1552,6 +1552,13 @@ delayed-stream@~1.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+dom7@^2.1.3:
+  version "2.1.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
+  integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
+  dependencies:
+    ssr-window "^2.0.0"
+
 electron-to-chromium@^1.5.4:
   version "1.5.13"
   resolved "https://mirrors.cloud.tencent.com/npm/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz#1abf0410c5344b2b829b7247e031f02810d442e6"
@@ -2000,6 +2007,11 @@ normalize-wheel@^1.0.1:
   resolved "https://mirrors.cloud.tencent.com/npm/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
   integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 object-inspect@^1.13.1:
   version "1.13.2"
   resolved "https://mirrors.cloud.tencent.com/npm/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
@@ -2338,6 +2350,16 @@ source-map@^0.6.1, source-map@~0.6.0:
   resolved "https://mirrors.cloud.tencent.com/npm/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+ssr-window@^1.0.1:
+  version "1.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"
+  integrity sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==
+
+ssr-window@^2.0.0:
+  version "2.0.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
+  integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://mirrors.cloud.tencent.com/npm/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -2357,6 +2379,14 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+swiper@4, swiper@^4.0.7:
+  version "4.5.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/swiper/-/swiper-4.5.1.tgz#ed43998e780ceb478610079c8d23fd425eca636f"
+  integrity sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==
+  dependencies:
+    dom7 "^2.1.3"
+    ssr-window "^1.0.1"
+
 systemjs@^6.15.1:
   version "6.15.1"
   resolved "https://mirrors.cloud.tencent.com/npm/systemjs/-/systemjs-6.15.1.tgz#74175b6810e27a79e1177d21db5f0e3057118cea"
@@ -2465,6 +2495,14 @@ vite@^5.4.1:
   optionalDependencies:
     fsevents "~2.3.3"
+vue-awesome-swiper@3.1.3:
+  version "3.1.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz#05500b501ffb3fec9bf7eb9985bcf4ae8360ed9e"
+  integrity sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==
+  dependencies:
+    object-assign "^4.1.1"
+    swiper "^4.0.7"
+
 vue-router@3.6.5:
   version "3.6.5"
   resolved "https://mirrors.cloud.tencent.com/npm/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"