Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4f0557d7 1 parent 819b5076

关于创新自适应显示

Inline Side-by-side
Showing 1 changed file with 143 additions and 16 deletions
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 15:04:56
* @LastEditTime: 2024-10-22 10:05:52
* @FilePath: /hager/src/views/about/design.vue
* @Description: 文件描述
-->
......@@ -15,7 +15,7 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<hager-box v-if="!is_xs">
<el-row style="margin: 3rem 0;">
<el-col :span="8">
<div class="about-box">
......@@ -35,20 +35,44 @@
</el-col>
</el-row>
</hager-box>
<div v-else style="margin-top: 1rem;">
<div class="about-img"></div>
<div class="about-box xs">
<div>
<div class="title">
<p class="c">创新设计</p>
<p class="e">Innovative Design</p>
</div>
<div class="introduce" v-clamp="3">
<p>海格电气一直致力于创新，<br/>我们与客户共同着手面向未来的主题。</p>
</div>
</div>
</div>
</div>
<hager-box class="box-2n">
<hager-h1 title="从产品到解决方案" sub="From Products to Solutions" style="margin: 2rem 0;"></hager-h1>
<el-row :gutter="20" style="margin-bottom: 2rem;">
<el-col :span="8" v-for="(item, index) in list" :key="index" class="products-solutions">
<div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
<div class="text-box" style="background-color: #FFF;">
<div class="title">{{ item.title }}</div>
<div class="sub">{{ item.sub }}</div>
<div class="content" v-clamp="2">{{ item.content }}</div>
<div>
<swiper ref="myDesignSwiper" class="swiper" :options="swiperOption" @slideChange="onDesignSlideChange">
<swiper-slide v-for="(item, index) in design_list" :key="index">
<div class="products-solutions">
<div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
<div class="text-box" style="background-color: #FFF;">
<div class="title">{{ item.title }}</div>
<div class="sub">{{ item.sub }}</div>
<div class="content" v-clamp="2">{{ item.content }}</div>
</div>
</div>
</swiper-slide>
</swiper>
<div v-if="design_list.length > designSlidesPerView || is_xs" class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>
<i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
</div>
</el-col>
</el-row>
</div>
</div>
</hager-box>
<hager-box class="box-n">
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="30" style="margin-top: 2rem;margin-bottom: 2rem;">
<el-col :span="12">
<div class="left-box">
......@@ -70,6 +94,22 @@
</el-col>
</el-row>
</hager-box>
<div v-else>
<div class="left-box xs">
<div class="title xs">
<hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
<div style="margin-top: 2rem; line-height: 1.75;">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</div>
</div>
<div class="right-box xs">
<p class="title">“倾听客户的声音，打造一流设计”</p>
<div>
<img style="width: 100%; height: 10rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g13@2x.png" alt="">
</div>
</div>
</div>
</div>
</template>
......@@ -82,7 +122,7 @@ export default {
mixins: [mixin.init],
data () {
return {
list: [{
design_list: [{
cover: 'https://cdn.ipadbiz.cn/hager/img/about/g10@2x-1.png',
title: '电动交通',
sub: 'Electric Transportation',
......@@ -97,14 +137,70 @@ export default {
title: '能源效率',
sub: 'Energy Efficiency',
content: '节能产品有助于优化和降低能源消耗。'
}]
}],
swiperOption: {
slidesPerView: 2,
spaceBetween: 20,
preventClicks : true,
slideToClickedSlide: false,
touchRatio: 0,
breakpoints: {
1480: {
slidesPerView: 3,
spaceBetween: 30
},
1024: {
slidesPerView: 3,
spaceBetween: 30
},
768: {
slidesPerView: 3,
spaceBetween: 20
},
640: {
slidesPerView: 1,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
},
160: {
slidesPerView: 1,
spaceBetween: 0
}
}
},
activeDesignIndex: 0,
reach_design_end: false,
designSlidesPerView: 3,
}
},
mounted () {
this.$nextTick(() => {
this.$refs.myDesignSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
this.designSlidesPerView = swiper.slidesPerView
});
});
},
methods: {
prevDesignBtn () {
this.$refs.myDesignSwiper.$swiper.slidePrev();
},
nextDesignBtn () {
this.$refs.myDesignSwiper.$swiper.slideNext();
},
onDesignSlideChange () {
this.activeDesignIndex = this.$refs.myDesignSwiper.$swiper.activeIndex;
const isEnd = this.$refs.myDesignSwiper.$swiper.isEnd;
if (isEnd) {
this.reach_design_end = true;
} else {
this.reach_design_end = false;
}
}
}
}
</script>
......@@ -125,6 +221,9 @@ export default {
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
}
.title {
font-weight: bold;
.c {
......@@ -174,13 +273,25 @@ export default {
background-color: #E3F1F7;
height: 25rem;
padding: 2rem;
&.xs {
height: auto;
}
.title {
top: 30%;
transform: translateY(30%);
&.xs {
transform: translateY(0);
}
}
}
.right-box {
top: 30%; transform: translateY(30%); padding: 2rem;
top: 30%;
transform: translateY(30%);
padding: 2rem;
&.xs {
top: 0;
transform: translateY(0);
}
.title {
text-align: center;
font-size: 1.55rem;
......@@ -189,5 +300,21 @@ export default {
color: @secondary-color;
}
}
.xs-control {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
i {
font-size: 1.35rem;
color: #EE6D10;
&:hover {
cursor: pointer;
}
&.disabled {
color: #ccc;
}
}
}
}
</style>
......