fix 轮播图测试

hookehuyr
Commit a4a00ae634ca5ce7329842c94dae46107519fa70 a4a00ae6 1 parent 558623c6
Showing 4 changed files with 94 additions and 57 deletions
package.json
src/main.js
src/views/index.vue
yarn.lock
--- a/package.json
View file @a4a00ae
+++ b/package.json
View file @a4a00ae
@@ -16,7 +16,7 @@
     "jquery": "^3.7.1",
     "mui-player": "^1.8.1",
     "sass": "1.55.0",
-    "swiper": "5",
+    "swiper": "6",
     "vue": "2.7.13",
     "vue-awesome-swiper": "4.1.1",
     "vue-router": "3.6.5"
--- a/src/main.js
View file @a4a00ae
+++ b/src/main.js
View file @a4a00ae
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 10:10:31
+ * @LastEditTime: 2024-10-11 13:20:49
  * @FilePath: /hager/src/main.js
  * @Description: 文件描述
  */
@@ -19,7 +19,7 @@ import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import VueAwesomeSwiper from 'vue-awesome-swiper';
-import 'swiper/css/swiper.css'; // 确保引入正确的CSS文件路径
+import 'swiper/swiper-bundle.css'; // 确保引入正确的CSS文件路径
 Vue.use(VueRouter);
 // Vue.use(ElementUI);
--- a/src/views/index.vue
View file @a4a00ae
+++ b/src/views/index.vue
View file @a4a00ae
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 11:21:43
+ * @LastEditTime: 2024-10-11 13:30:57
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -59,12 +59,10 @@
       </div>
       <div v-else>
         <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption">
-          <swiper-slide
+          <swiper-slide v-for="(item, index) in solution_list" :key="index">
-            @click.native="goToSolution(item)"
+            <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }">
-            class="solution-item xs"
+              <p @click="goToSolution(item)">{{ item.title }}</p>
-            :style="{ backgroundImage: 'url('+item.src+')' }"
+            </div>
-            v-for="(item, index) in solution_list" :key="index">
-              <p>{{ item.title }}</p>
           </swiper-slide>
         </swiper>
         <div class="xs-control">
@@ -77,16 +75,29 @@
     </hager-box>
     <hager-box class="box-n">
       <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
-      <div :class="['hager-product-center', is_xs ? 'xs' : '']">
+      <div v-if="!is_xs" class="hager-product-center">
-        <div v-for="(item, index) in product_list" :key="index" :class="['product-item', is_xs ? 'xs' : '']">
+        <div @click ="goToProduct(item)" v-for="(item, index) in product_list" :key="index" class="product-item">
           <el-image style="height: 14rem;" :src="item.src" fit="cover"></el-image>
           <p style="margin-top: 1rem;">{{ item.title }}</p>
         </div>
       </div>
-      <div :class="['hager-product-center-more', is_xs ? 'xs' : '']">
+      <div v-else>
-        <hager-more></hager-more>
+        <swiper ref="myProductSwiper" class="swiper" :options="swiperOption">
-        <div class="xs-control" v-if="is_xs">
+          <swiper-slide v-for="(item, index) in product_list" :key="index">
-          <div><i class="el-icon-arrow-left" @click="prevBtn(product_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(product_list)"></i></div>
+            <div @click="goToProduct(item)" class="product-item xs">
+              <el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image>
+              <p style="margin: 0.5rem;">{{ item.title }}</p>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div class="hager-product-center-more xs">
+          <hager-more></hager-more>
+          <div class="xs-control">
+            <div>
+              <i class="el-icon-arrow-left" @click="prevProductBtn()"></i>
+              <i class="el-icon-arrow-right" @click="nextProductBtn()"></i>
+            </div>
+          </div>
         </div>
       </div>
     </hager-box>
@@ -203,10 +214,11 @@ export default {
         title: '三型特决井天'
       }],
       swiperOption: {
-        // slidesPerView: 3,
+        slidesPerView: 2,
         spaceBetween: 50,
-        preventClicks : false,
+        preventClicks : true,
         slideToClickedSlide: false,
+        touchRatio: 0,
         breakpoints: {
           1024: {
             slidesPerView: 4,
@@ -240,6 +252,14 @@ export default {
     // if (boxes.length > 11) {
     //   boxes[boxes.length - 1].classList.add('other');
     // }
+    // this.$nextTick(() => {
+    //   console.warn(this.$refs.mySolutionSwiper);
+    //   this.$refs.mySolutionSwiper.$swiper?.on('click', (evt) => {
+    //     // evt.preventDefault();
+    //     let index = this.$refs.mySolutionSwiper.$swiper.clickedIndex;
+    //     this.goToSolution(this.solution_list[index]);
+    //   });
+    // });
   },
   watch: {
     // 监听$route对象的变化
@@ -256,7 +276,15 @@ export default {
     },
     goToSolution (v) {
       this.$router.push({
-        path: '/solution/detail'
+        path: '/solution/detail',
+        query: {
+          id: v.id
+        }
+      });
+    },
+    goToProduct (v) {
+      this.$router.push({
+        path: '/product/detail'
       });
     },
     handleScreenWidth(width) {
@@ -268,6 +296,12 @@ export default {
     nextSolutionBtn () {
       this.$refs.mySolutionSwiper.$swiper.slideNext();
     },
+    prevProductBtn () {
+      this.$refs.myProductSwiper.$swiper.slidePrev();
+    },
+    nextProductBtn () {
+      this.$refs.myProductSwiper.$swiper.slideNext();
+    },
   },
 }
 </script>
@@ -442,30 +476,33 @@ export default {
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
     gap: 1.5rem; /* 每个项目之间的间距 */
-    &.xs {
+    // &.xs {
-      display: flex;
+    //   display: flex;
-      overflow: hidden; /* 超出部分隐藏 */
+    //   overflow: hidden; /* 超出部分隐藏 */
-      width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
+    //   width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
-      gap: 1rem;
+    //   gap: 1rem;
+    // }
+  }
+  .product-item {
+    height: auto;
+    padding: 1.5rem;
+    text-align: center;
+    color: #333;
+    border-radius: 8px;
+    background-color: #f3f3f3;
+    // transition: transform 0.3s ease-in-out;
+    &:hover {
+      cursor: pointer;
+      // transform: scale(1.05);
+      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
-    .product-item {
+    &.xs {
-      height: auto;
+      // flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
-      padding: 1.5rem;
+      // padding: 0 20px;
-      text-align: center;
+      // box-sizing: border-box;
-      color: #333;
+      padding: 0;
-      border-radius: 8px;
+      margin-top: 1rem;
-      background-color: #f3f3f3;
+      padding-bottom: 0.25rem;
-      // transition: transform 0.3s ease-in-out;
-      &:hover {
-        cursor: pointer;
-        // transform: scale(1.05);
-        // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      }
-      &.xs {
-        flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
-        // padding: 0 20px;
-        // box-sizing: border-box;
-      }
     }
   }
--- a/yarn.lock
View file @a4a00ae
+++ b/yarn.lock
View file @a4a00ae
@@ -1552,12 +1552,12 @@ 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.5:
+dom7@^3.0.0:
-  version "2.1.5"
+  version "3.0.0"
-  resolved "https://mirrors.cloud.tencent.com/npm/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
+  resolved "https://mirrors.cloud.tencent.com/npm/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
-  integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
+  integrity sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==
   dependencies:
-    ssr-window "^2.0.0"
+    ssr-window "^3.0.0-alpha.1"
 electron-to-chromium@^1.5.4:
   version "1.5.13"
@@ -2345,10 +2345,10 @@ 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@^2.0.0:
+ssr-window@^3.0.0, ssr-window@^3.0.0-alpha.1:
-  version "2.0.0"
+  version "3.0.0"
-  resolved "https://mirrors.cloud.tencent.com/npm/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
+  resolved "https://mirrors.cloud.tencent.com/npm/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
-  integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
+  integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
 supports-color@^5.3.0:
   version "5.5.0"
@@ -2369,13 +2369,13 @@ 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@5:
+swiper@6:
-  version "5.4.5"
+  version "6.8.4"
-  resolved "https://mirrors.cloud.tencent.com/npm/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
+  resolved "https://mirrors.cloud.tencent.com/npm/swiper/-/swiper-6.8.4.tgz#938fed4144f4d7952fbf9c44e5832d133a4de794"
-  integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
+  integrity sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==
   dependencies:
-    dom7 "^2.1.5"
+    dom7 "^3.0.0"
-    ssr-window "^2.0.0"
+    ssr-window "^3.0.0"
 systemjs@^6.15.1:
   version "6.15.1"