✨ feat(首页解决方案): 自适应轮播图调整

hookehuyr
Commit 558623c63eb42c6de1ac6e449aab2b8480725712 558623c6 1 parent eaa8c808
Showing 4 changed files with 67 additions and 97 deletions
package.json
src/main.js
src/views/index.vue
yarn.lock
--- a/package.json
View file @558623c
+++ b/package.json
View file @558623c
@@ -16,9 +16,9 @@
     "jquery": "^3.7.1",
     "mui-player": "^1.8.1",
     "sass": "1.55.0",
-     "swiper": "4",
+     "swiper": "5",
     "vue": "2.7.13",
-     "vue-awesome-swiper": "3.1.3",
+     "vue-awesome-swiper": "4.1.1",
     "vue-router": "3.6.5"
   },
   "devDependencies": {
--- a/src/main.js
View file @558623c
+++ b/src/main.js
View file @558623c
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-10-10 20:20:18
+  * @LastEditTime: 2024-10-11 10:10:31
  * @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/dist/css/swiper.css'; // 确保引入正确的CSS文件路径
+ import 'swiper/css/swiper.css'; // 确保引入正确的CSS文件路径
 
 Vue.use(VueRouter);
 // Vue.use(ElementUI);
--- a/src/views/index.vue
View file @558623c
+++ b/src/views/index.vue
View file @558623c
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-10-11 10:01:58
+  * @LastEditTime: 2024-10-11 11:21:43
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -49,18 +49,30 @@
     <hager-box class="box-2n" @screen-width="handleScreenWidth">
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div v-if="!is_xs" class="hager-solution">
-         <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"
+         <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>
-         </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>
+       </div>
+       <div v-else>
+         <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption">
+           <swiper-slide
+             @click.native="goToSolution(item)"
+             class="solution-item xs"
+             :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">
+           <div>
+             <i class="el-icon-arrow-left" @click="prevSolutionBtn()"></i>
+             <i class="el-icon-arrow-right" @click="nextSolutionBtn()"></i>
+           </div>
+         </div>
       </div>
     </hager-box>
     <hager-box class="box-n">
@@ -191,7 +203,7 @@ export default {
         title: '三型特决井天'
       }],
       swiperOption: {
-         slidesPerView: 3,
+         // slidesPerView: 3,
         spaceBetween: 50,
         preventClicks : false,
         slideToClickedSlide: false,
@@ -209,8 +221,12 @@ export default {
             spaceBetween: 20
           },
           320: {
-             slidesPerView: 1,
+             slidesPerView: 2,
             spaceBetween: 10
+           },
+           160: {
+             slidesPerView: 1,
+             spaceBetween: 0
           }
         }
       }
@@ -244,21 +260,14 @@ export default {
       });
     },
     handleScreenWidth(width) {
-       // this.is_xs = width < 768;
       this.screen_width = width;
     },
-     prevBtn (list) {
-       this.$refs.mySwiper.swiper.slidePrev();
+     prevSolutionBtn () {
+       this.$refs.mySolutionSwiper.$swiper.slidePrev();
     },
-     nextBtn (list) {
-       this.$refs.mySwiper.swiper.slideNext();
+     nextSolutionBtn () {
+       this.$refs.mySolutionSwiper.$swiper.slideNext();
     },
-     onSwiper (swiper) {
-       console.log(swiper);
-     },
-     onSlideChange () {
-       console.log('slide change');
-     }
   },
 }
 </script>
@@ -327,65 +336,33 @@ export default {
       width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
       gap: 1rem;
     }
-     .solution-item {
-       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;
-       }
-       &.other {
-         display: flex;
-         background-color: #e0f7ff; /* 特殊的样式 */
-         color: @secondary-color;
-         font-weight: bold;
-         // line-height: 8rem;
-         background-image: none;
-         align-items: center;
-         justify-content: center;
-         font-size: 1.5rem;
-       }
-       p {
-         position: absolute;
-         bottom: 0;
-         left: 0;
-         right: 0;
-         height: 2rem;
-         background-color: rgba(0, 0, 0, 0.2);
-         line-height: 2rem;
-       }
-       &.xs {
-         flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
-         // padding: 0 20px;
-         // box-sizing: border-box;
-       }
-     }
   }
-   .solution-item-a {
+   .solution-item {
     position: relative;
     height: 12rem;
-     // padding: 1.5rem;
+     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;
+     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;
     }
+     &.other {
+       display: flex;
+       background-color: #e0f7ff; /* 特殊的样式 */
+       color: @secondary-color;
+       font-weight: bold;
+       // line-height: 8rem;
+       background-image: none;
+       align-items: center;
+       justify-content: center;
+       font-size: 1.5rem;
+     }
     p {
       position: absolute;
       bottom: 0;
@@ -394,6 +371,12 @@ export default {
       height: 2rem;
       background-color: rgba(0, 0, 0, 0.2);
       line-height: 2rem;
+       border-bottom-left-radius: 8px;
+       border-bottom-right-radius: 8px;
+     }
+     &.xs {
+       padding: 0;
+       margin-top: 1rem;
     }
   }
   .xs-control {
--- a/yarn.lock
View file @558623c
+++ b/yarn.lock
View file @558623c
@@ -1552,7 +1552,7 @@ 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:
+ dom7@^2.1.5:
   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==
@@ -2007,11 +2007,6 @@ 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"
@@ -2350,11 +2345,6 @@ 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"
@@ -2379,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@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==
+ swiper@5:
+   version "5.4.5"
+   resolved "https://mirrors.cloud.tencent.com/npm/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
+   integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
   dependencies:
-     dom7 "^2.1.3"
-     ssr-window "^1.0.1"
+     dom7 "^2.1.5"
+     ssr-window "^2.0.0"
 
 systemjs@^6.15.1:
   version "6.15.1"
@@ -2495,13 +2485,10 @@ 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-awesome-swiper@4.1.1:
+   version "4.1.1"
+   resolved "https://mirrors.cloud.tencent.com/npm/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"
+   integrity sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==
 
 vue-router@3.6.5:
   version "3.6.5"