Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ee56c986 1 parent 43170a48

解决方案自适应样式优化

Inline Side-by-side
Showing 2 changed files with 130 additions and 56 deletions
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 18:55:21
* @LastEditTime: 2024-10-21 14:43:11
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -18,7 +18,7 @@
</div>
</div>
</hager-box>
<hager-box class="box-n">
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="0">
<el-col :span="12" style="height: 25rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
......@@ -27,7 +27,7 @@
</el-carousel-item>
</el-carousel>
</el-col>
<el-col class="brief-introduction" :span="12">
<el-col :span="12" class="brief-introduction">
<div class="intro-box">
<hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
<p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
......@@ -36,24 +36,67 @@
</el-col>
</el-row>
</hager-box>
<div v-else>
<div style="height: 25rem; margin-top: 2rem;">
<el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
<el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
<el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
</el-carousel-item>
</el-carousel>
</div>
<div class="brief-introduction xs">
<div class="intro-box xs">
<hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
<p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
<i class="el-icon-right"></i>
</div>
</div>
</div>
<hager-box class="box-2n">
<hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
<div class="hager-success-cases">
<div class="card" v-for="(item, index) in success_data_list" :key="index">
<img :src="item.img" alt="学校图片" class="card-image">
<div class="card-content">
<h3>{{ item.title }}</h3>
<p>{{ item.sub }}</p>
<i class="el-icon-right"></i>
<div v-if="!is_xs">
<div class="hager-success-cases">
<div class="card" v-for="(item, index) in success_data_list" :key="index">
<img :src="item.img" alt="学校图片" class="card-image">
<div class="card-content">
<h3>{{ item.title }}</h3>
<p>{{ item.sub }}</p>
<i class="el-icon-right"></i>
</div>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2rem;">
<hager-more></hager-more>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2rem;">
<hager-more></hager-more>
<div v-else>
<swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
<swiper-slide v-for="(item, index) in success_data_list" :key="index">
<div class="hager-success-cases xs">
<div class="card">
<img :src="item.img" alt="学校图片" class="card-image">
<div class="card-content">
<h3>{{ item.title }}</h3>
<p class="clamp-text">{{ item.sub }}</p>
<i class="el-icon-right"></i>
</div>
</div>
</div>
</swiper-slide>
</swiper>
<div v-if="success_data_list.length > SuccessSlidesPerView || is_xs" class="hager-product-center-more xs">
<hager-more></hager-more>
<div class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeSuccessIndex === 0 ? 'disabled' : '']" @click="prevSuccessBtn()"></i>
<i :class="['el-icon-arrow-right', reach_success_end ? 'disabled' : '']" @click="nextSuccessBtn()"></i>
</div>
</div>
</div>
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
<hager-h1 title="使用产品" sub="Products" style="margin: 2rem 0;"></hager-h1>
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
<swiper-slide v-for="(item, index) in product_list" :key="index">
<div class="card-box" @click="goToProduct(item)">
......@@ -65,8 +108,8 @@
</div>
</swiper-slide>
</swiper>
<div class="hager-product-center-more">
<hager-more></hager-more>
<div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more">
<!-- <hager-more></hager-more> -->
<div class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
......@@ -86,6 +129,7 @@ import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
import hagerHCarousel from '@/components/hagerHCarousel.vue';
import hagerService from '@/components/common/hagerService.vue';
import $ from 'jquery';
export default {
components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
......@@ -105,27 +149,27 @@ export default {
success_data_list: [{
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
}],
product_list: [{
src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
......@@ -172,13 +216,41 @@ export default {
}
}
},
activeSolutionIndex: 0,
activeSuccessIndex: 0,
activeProductIndex: 0,
reach_success_end: false,
reach_product_end: false,
SuccessSlidesPerView: 4,
productSlidesPerView: 4,
}
},
mounted () {
this.$nextTick(() => {
this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
this.productSlidesPerView = swiper.slidesPerView
});
function clampText(element, lines) {
var $element = $(element);
var lineHeight = parseFloat($element.css('line-height')); // 获取行高
var maxHeight = lineHeight * lines; // 计算三行的最大高度
// 如果内容高度超过三行，进行截断
if ($element.height() > maxHeight) {
var originalText = $element.text(); // 获取原始文本
var truncatedText = originalText;
// 逐字截断文本，直到高度小于或等于三行
while ($element.height() > maxHeight) {
truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
$element.text(truncatedText + '...'); // 添加省略号
}
}
}
clampText('.clamp-text', 3); // 限制显示三行文本
});
},
methods: {
onClickImg (item) {
......@@ -192,6 +264,12 @@ export default {
prevProductBtn () {
this.$refs.myProductSwiper.$swiper.slidePrev();
},
nextSuccessBtn () {
this.$refs.mySuccessSwiper.$swiper.slideNext();
},
prevSuccessBtn () {
this.$refs.mySuccessSwiper.$swiper.slidePrev();
},
nextProductBtn () {
this.$refs.myProductSwiper.$swiper.slideNext();
},
......@@ -205,6 +283,17 @@ export default {
this.reach_product_end = false;
}
},
onSuccessSlideChange () {
this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
console.warn(isEnd);
if (isEnd) {
this.reach_success_end = true;
} else {
this.reach_success_end = false;
}
},
}
}
</script>
......@@ -230,8 +319,14 @@ export default {
.brief-introduction {
background-color: #FFF;
height: 25rem;
&.xs {
height: auto;
}
.intro-box {
padding: 3rem;
&.xs {
padding: 2rem;
}
i {
color: @primary-color;
font-size: 1.5rem;
......@@ -240,40 +335,20 @@ export default {
}
.hager-success-cases {
margin-top: 2rem;
// display: grid;
// grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
// gap: 1.5rem; /* 每个项目之间的间距 */
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
// .case-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: top 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;
// }
// }
&.xs {
display: block;
}
.card {
// margin: 0.5rem;
flex: 0 0 32.33%; /* 宽度为 1/3 */
margin-bottom: 1rem; /* 在元素之间添加间距 */
box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
// width: 300px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
// margin: 0;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
......@@ -347,7 +422,7 @@ export default {
}
}
.card-title {
color: @secondary-color;
color: @text-color;
font-weight: bold;
margin: 1rem 0;
&:hover {
......@@ -356,6 +431,5 @@ export default {
}
}
}
}
</style>
......
......@@ -31,7 +31,7 @@
<div class="card-content">
<div class="card-title">
<span>{{ x.title }}</span>
<i class="el-icon-right"></i>
<i class="el-icon-right" style="color: #00ABE5;"></i>
</div>
<p class="card-sub">{{ x.sub }}</p>
</div>
......@@ -82,35 +82,35 @@ export default {
data () {
return {
solution_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '1住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '2住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '3住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '4住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '1住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '2住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '3住宅解决方案',
sub: 'Residential Solution Case'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '4住宅解决方案',
sub: 'Residential Solution Case'
}],
......