Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d68197a3 1 parent 4bc8cf82

✨ feat: 轮播图自适应左右切换按钮样式到头判断

Inline Side-by-side
Showing 2 changed files with 176 additions and 27 deletions
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-11 13:30:57 4 + * @LastEditTime: 2024-10-11 17:28:51
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
58 </div> 58 </div>
59 </div> 59 </div>
60 <div v-else> 60 <div v-else>
61 - <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption"> 61 + <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
62 <swiper-slide v-for="(item, index) in solution_list" :key="index"> 62 <swiper-slide v-for="(item, index) in solution_list" :key="index">
63 <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }"> 63 <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }">
64 <p @click="goToSolution(item)">{{ item.title }}</p> 64 <p @click="goToSolution(item)">{{ item.title }}</p>
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
67 </swiper> 67 </swiper>
68 <div class="xs-control"> 68 <div class="xs-control">
69 <div> 69 <div>
70 - <i class="el-icon-arrow-left" @click="prevSolutionBtn()"></i> 70 + <i :class="['el-icon-arrow-left', activeSolutionIndex === 0 ? 'disabled' : '']"@click="prevSolutionBtn()"></i>
71 - <i class="el-icon-arrow-right" @click="nextSolutionBtn()"></i> 71 + <i :class="['el-icon-arrow-right', reach_solution_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
82 </div> 82 </div>
83 </div> 83 </div>
84 <div v-else> 84 <div v-else>
85 - <swiper ref="myProductSwiper" class="swiper" :options="swiperOption"> 85 + <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
86 <swiper-slide v-for="(item, index) in product_list" :key="index"> 86 <swiper-slide v-for="(item, index) in product_list" :key="index">
87 <div @click="goToProduct(item)" class="product-item xs"> 87 <div @click="goToProduct(item)" class="product-item xs">
88 <el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image> 88 <el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image>
...@@ -94,8 +94,8 @@ ...@@ -94,8 +94,8 @@
94 <hager-more></hager-more> 94 <hager-more></hager-more>
95 <div class="xs-control"> 95 <div class="xs-control">
96 <div> 96 <div>
97 - <i class="el-icon-arrow-left" @click="prevProductBtn()"></i> 97 + <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
98 - <i class="el-icon-arrow-right" @click="nextProductBtn()"></i> 98 + <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
...@@ -241,7 +241,11 @@ export default { ...@@ -241,7 +241,11 @@ export default {
241 spaceBetween: 0 241 spaceBetween: 0
242 } 242 }
243 } 243 }
244 - } 244 + },
245 + activeSolutionIndex: 0,
246 + activeProductIndex: 0,
247 + reach_solution_end: false,
248 + reach_product_end: false,
245 } 249 }
246 }, 250 },
247 async mounted () { 251 async mounted () {
...@@ -302,6 +306,26 @@ export default { ...@@ -302,6 +306,26 @@ export default {
302 nextProductBtn () { 306 nextProductBtn () {
303 this.$refs.myProductSwiper.$swiper.slideNext(); 307 this.$refs.myProductSwiper.$swiper.slideNext();
304 }, 308 },
309 + onSolutionSlideChange (swiper) {
310 + this.activeSolutionIndex = swiper.activeIndex;
311 + const isEnd = swiper.isEnd;
312 +
313 + if (isEnd) {
314 + this.reach_solution_end = true;
315 + } else {
316 + this.reach_solution_end = false;
317 + }
318 + },
319 + onProductSlideChange (swiper) {
320 + this.activeProductIndex = swiper.activeIndex;
321 + const isEnd = swiper.isEnd;
322 +
323 + if (isEnd) {
324 + this.reach_product_end = true;
325 + } else {
326 + this.reach_product_end = false;
327 + }
328 + },
305 }, 329 },
306 } 330 }
307 </script> 331 </script>
...@@ -423,6 +447,9 @@ export default { ...@@ -423,6 +447,9 @@ export default {
423 &:hover { 447 &:hover {
424 cursor: pointer; 448 cursor: pointer;
425 } 449 }
450 + &.disabled {
451 + color: #ccc;
452 + }
426 } 453 }
427 } 454 }
428 .news-container { 455 .news-container {
......
...@@ -4,15 +4,37 @@ ...@@ -4,15 +4,37 @@
4 <hager-box class="box-n"> 4 <hager-box class="box-n">
5 <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1> 5 <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
6 <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div> 6 <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
7 - <div class="hager-industry-solutions"> 7 + <div v-if="!is_xs" class="hager-industry-solutions">
8 - <div @click="goToSolution(item)" class="card" v-for="(item, index) in 10" :key="index"> 8 + <div @click="goToSolution(item)" class="card" v-for="(item, index) in solution_list" :key="index">
9 - <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image"> 9 + <img :src="item.src" alt="学校图片" class="card-image">
10 <div class="card-content"> 10 <div class="card-content">
11 - <div style="display: flex; align-items: center; justify-content: space-between;"> 11 + <div class="card-title" style="">
12 - <span>住宅解决方案</span> 12 + <span>{{ item.title }}</span>
13 <i class="el-icon-right"></i> 13 <i class="el-icon-right"></i>
14 </div> 14 </div>
15 - <p>Residential Solution Case</p> 15 + <p class="card-sub">{{ item.sub }}</p>
16 + </div>
17 + </div>
18 + </div>
19 + <div v-else style="margin: 1rem 0;">
20 + <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
21 + <swiper-slide v-for="(item, index) in solution_list" :key="index">
22 + <div @click="goToSolution(item)" class="card" style="margin-bottom: 1rem;">
23 + <img :src="item.src" alt="学校图片" class="card-image">
24 + <div class="card-content">
25 + <div class="card-title">
26 + <span>{{ item.title }}</span>
27 + <i class="el-icon-right"></i>
28 + </div>
29 + <p class="card-sub">{{ item.sub }}</p>
30 + </div>
31 + </div>
32 + </swiper-slide>
33 + </swiper>
34 + <div class="xs-control">
35 + <div>
36 + <i :class="['el-icon-arrow-left', activeIndex === 0 ? 'disabled' : '']" @click="prevSolutionBtn()"></i>
37 + <i :class="['el-icon-arrow-right', reach_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
16 </div> 38 </div>
17 </div> 39 </div>
18 </div> 40 </div>
...@@ -31,7 +53,70 @@ export default { ...@@ -31,7 +53,70 @@ export default {
31 mixins: [mixin.init], 53 mixins: [mixin.init],
32 data () { 54 data () {
33 return { 55 return {
34 - 56 + solution_list: [{
57 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
58 + title: '1住宅解决方案',
59 + sub: 'Residential Solution Case'
60 + }, {
61 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
62 + title: '2住宅解决方案',
63 + sub: 'Residential Solution Case'
64 + }, {
65 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
66 + title: '3住宅解决方案',
67 + sub: 'Residential Solution Case'
68 + }, {
69 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
70 + title: '4住宅解决方案',
71 + sub: 'Residential Solution Case'
72 + }, {
73 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
74 + title: '1住宅解决方案',
75 + sub: 'Residential Solution Case'
76 + }, {
77 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
78 + title: '2住宅解决方案',
79 + sub: 'Residential Solution Case'
80 + }, {
81 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
82 + title: '3住宅解决方案',
83 + sub: 'Residential Solution Case'
84 + }, {
85 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
86 + title: '4住宅解决方案',
87 + sub: 'Residential Solution Case'
88 + }],
89 + swiperOption: {
90 + slidesPerView: 2,
91 + spaceBetween: 50,
92 + preventClicks : true,
93 + slideToClickedSlide: false,
94 + touchRatio: 0,
95 + breakpoints: {
96 + 1024: {
97 + slidesPerView: 4,
98 + spaceBetween: 40
99 + },
100 + 768: {
101 + slidesPerView: 3,
102 + spaceBetween: 30
103 + },
104 + 640: {
105 + slidesPerView: 2,
106 + spaceBetween: 20
107 + },
108 + 320: {
109 + slidesPerView: 2,
110 + spaceBetween: 10
111 + },
112 + 160: {
113 + slidesPerView: 1,
114 + spaceBetween: 0
115 + }
116 + }
117 + },
118 + activeIndex: 0,
119 + reach_end: false,
35 } 120 }
36 }, 121 },
37 mounted () { 122 mounted () {
...@@ -40,9 +125,28 @@ export default { ...@@ -40,9 +125,28 @@ export default {
40 methods: { 125 methods: {
41 goToSolution (v) { 126 goToSolution (v) {
42 this.$router.push({ 127 this.$router.push({
43 - path: '/solution/detail' 128 + path: '/solution/detail',
129 + query: {
130 + id: v.id
131 + }
44 }); 132 });
133 + },
134 + prevSolutionBtn () {
135 + this.$refs.mySolutionSwiper.$swiper.slidePrev();
136 + },
137 + nextSolutionBtn () {
138 + this.$refs.mySolutionSwiper.$swiper.slideNext();
139 + },
140 + onSlideChange (swiper) {
141 + this.activeIndex = swiper.activeIndex;
142 + const isEnd = swiper.isEnd;
143 +
144 + if (isEnd) {
145 + this.reach_end = true;
146 + } else {
147 + this.reach_end = false;
45 } 148 }
149 + },
46 } 150 }
47 } 151 }
48 </script> 152 </script>
...@@ -61,7 +165,7 @@ export default { ...@@ -61,7 +165,7 @@ export default {
61 text-align: center; 165 text-align: center;
62 color: #FFF; 166 color: #FFF;
63 border-radius: 8px; 167 border-radius: 8px;
64 - background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'); 168 + // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
65 background-size: cover; 169 background-size: cover;
66 background-position: top center; 170 background-position: top center;
67 transition: transform 0.3s ease-in-out; 171 transition: transform 0.3s ease-in-out;
...@@ -71,6 +175,7 @@ export default { ...@@ -71,6 +175,7 @@ export default {
71 cursor: pointer; 175 cursor: pointer;
72 } 176 }
73 } 177 }
178 + }
74 .card { 179 .card {
75 // width: 300px; 180 // width: 300px;
76 border-radius: 10px; 181 border-radius: 10px;
...@@ -80,33 +185,50 @@ export default { ...@@ -80,33 +185,50 @@ export default {
80 margin: 0; 185 margin: 0;
81 transition: transform 0.3s ease-in-out; 186 transition: transform 0.3s ease-in-out;
82 &:hover { 187 &:hover {
83 - transform: scale(1.05); 188 + // transform: scale(1.05);
84 - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 189 + // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
85 cursor: pointer; 190 cursor: pointer;
86 } 191 }
87 .card-image { 192 .card-image {
88 width: 100%; 193 width: 100%;
89 - height: auto; 194 + height: 12rem;
90 object-fit: cover; 195 object-fit: cover;
91 } 196 }
92 197
93 .card-content { 198 .card-content {
94 padding: 15px; 199 padding: 15px;
95 - } 200 + .card-title {
96 - 201 + display: flex;
97 - .card h3 { 202 + align-items: center;
98 - font-size: 18px; 203 + justify-content: space-between;
204 + font-size: 1rem;
99 color: #0072c6; 205 color: #0072c6;
100 margin-bottom: 10px; 206 margin-bottom: 10px;
101 } 207 }
102 - 208 + .card-sub {
103 - .card p { 209 + font-size: 0.85rem;
104 - font-size: 14px;
105 color: #333; 210 color: #333;
106 line-height: 1.6; 211 line-height: 1.6;
107 margin-bottom: 15px; 212 margin-bottom: 15px;
108 } 213 }
109 } 214 }
110 } 215 }
216 +
217 + .xs-control {
218 + display: flex;
219 + justify-content: flex-end;
220 + margin-top: 1rem;
221 + margin-bottom: 1rem;
222 + i {
223 + font-size: 1.35rem;
224 + color: #EE6D10;
225 + &:hover {
226 + cursor: pointer;
227 + }
228 + &.disabled {
229 + color: #ccc;
230 + }
231 + }
232 + }
111 } 233 }
112 </style> 234 </style>
......