Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
91eefa08 1 parent 72710ebe

解决方案详情页内容调整

Inline Side-by-side
Showing 5 changed files with 204 additions and 37 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 13:58:23
* @LastEditTime: 2024-10-16 17:07:50
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
......@@ -101,4 +101,22 @@ body {
display: flex;
justify-content: center;
}
.el-carousel__item .item {
opacity: 0.75;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-carousel__indicator.is-active button {
background-color: #EE6D10;
}
</style>
......
<!--
* @Date: 2024-10-16 12:04:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 14:50:46
* @LastEditTime: 2024-10-16 17:15:57
* @FilePath: /hager/src/components/common/hagerService.vue
* @Description: 文件描述
-->
<template>
<div class="hager-service-page">
<hager-box v-if="!is_xs" class="box-n" style="padding-top: 0;">
<hager-box v-if="!is_xs" class="" style="padding: 2rem 0;">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin-bottom: 2rem;"></hager-h1>
<div class="hager-service-list">
<el-row :gutter="50">
......
<!--
* @Date: 2024-09-29 16:27:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-10 15:17:58
* @LastEditTime: 2024-10-16 17:24:19
* @FilePath: /hager/src/components/hagerHCarousel.vue
* @Description: 文件描述
-->
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 13:57:25
* @LastEditTime: 2024-10-16 17:41:25
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -362,9 +362,9 @@ export default {
nextProductBtn () {
this.$refs.myProductSwiper.$swiper.slideNext();
},
onSolutionSlideChange (swiper) {
this.activeSolutionIndex = swiper.activeIndex;
const isEnd = swiper.isEnd;
onSolutionSlideChange () {
this.activeSolutionIndex = this.$refs.mySolutionSwiper.$swiper.activeIndex;
const isEnd = this.$refs.mySolutionSwiper.$swiper.isEnd;
if (isEnd) {
this.reach_solution_end = true;
......@@ -372,9 +372,9 @@ export default {
this.reach_solution_end = false;
}
},
onProductSlideChange (swiper) {
this.activeProductIndex = swiper.activeIndex;
const isEnd = swiper.isEnd;
onProductSlideChange () {
this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
if (isEnd) {
this.reach_product_end = true;
......@@ -387,23 +387,6 @@ export default {
</script>
<style lang="less">
.el-carousel__item .item {
opacity: 0.75;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-carousel__indicator.is-active button {
background-color: #EE6D10;
}
.hager-container {
.box-n {
background-color: #fff;
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 11:00:12
* @LastEditTime: 2024-10-16 17:42:18
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<el-image :style="{width: '100%', height: top_img_height}" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title">学校解决方案</p>
<p class="sub">Campus Solution</p>
</div>
<div class="text-sub">
海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
</div>
</div>
</hager-box>
<hager-box class="box-n">
<el-row :gutter="0">
<el-col :span="12" style="height: 25rem;">
<img style="width: 100%; height: 100%; border-radius: 5px;object-fit: cover;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="News Image 1">
<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>
</el-col>
<el-col class="brief-introduction" :span="12">
<div class="intro-box">
......@@ -21,8 +35,6 @@
</div>
</el-col>
</el-row>
<hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
<hager-h-carousel></hager-h-carousel>
</hager-box>
<hager-box class="box-2n">
<hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
......@@ -41,11 +53,28 @@
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="我们的优势" sub="OUR ADVANTAGES" style="margin: 2rem 0;"></hager-h1>
<hager-h1 title="使用产品" sub="Our advantages" 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)">
<div class="card-image-wrapper">
<el-image :src="item.src" fit="fit"></el-image>
</div>
<p class="card-title">{{ item.title }}</p>
</div>
</swiper-slide>
</swiper>
<div class="hager-product-center-more">
<hager-more></hager-more>
<div class="xs-control">
<div>
海格突出的优势来自于我们以客户为中心的价值观和互惠互利，共同发展的经营原则，旺盛捷非常善于倾听和理解客户的需求和关注，我们提供有效的解决方案，整合各个行业的最佳资源，我们的产品和服务使我们与传统的EMS不同，我们更多地关注产品质量与产品数量的有机统一；我们不仅向客户分享我们最好的行业经验，还分享制造成本节约的成果，与传统EMS相比，无沦订单大小，我们在成本、质量、灵活性、技术和应方面都具有明显的优势：
<i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
<i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
</div>
</div>
</div>
</hager-box>
<hager-service style="background-color: #f1f1f1;"></hager-service>
</div>
</template>
......@@ -55,12 +84,23 @@ import hagerBox from '@/components/common/hagerBox';
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';
export default {
components: { hagerBox, hagerH1, hagerMore, hagerHCarousel },
components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
mixins: [mixin.init],
data () {
return {
banner_list: [
{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
url: ''
},
{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
url: ''
}
],
success_data_list: [{
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
......@@ -85,20 +125,107 @@ export default {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}]
}],
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',
title: 'hw01 空气断路器'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
title: 'h3+ 智能塑壳断路器'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'ats自动转换开关'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
}],
swiperOption: {
slidesPerView: 2,
spaceBetween: 50,
preventClicks : true,
slideToClickedSlide: false,
touchRatio: 0,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 2,
spaceBetween: 10
},
160: {
slidesPerView: 1,
spaceBetween: 0
}
}
},
activeSolutionIndex: 0,
activeProductIndex: 0,
reach_product_end: false,
}
},
mounted () {
},
methods: {
onClickImg (item) {
window.open(item, '_blank');
},
goToProduct (v) {
this.$router.push({
path: '/product/detail'
});
},
prevProductBtn () {
this.$refs.myProductSwiper.$swiper.slidePrev();
},
nextProductBtn () {
this.$refs.myProductSwiper.$swiper.slideNext();
},
onProductSlideChange () {
this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
if (isEnd) {
this.reach_product_end = true;
} else {
this.reach_product_end = false;
}
},
}
}
</script>
<style lang="less" scoped>
.hager-solution-detail {
.top-img {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
.top-center {
position: absolute;
transform: translateY(100%); /* 垂直与水平居中 */
}
}
.carousel-img {
&:hover {
cursor: zoom-in;
}
}
.brief-introduction {
background-color: #FFF;
height: 25rem;
......@@ -178,5 +305,44 @@ export default {
}
}
}
.xs-control {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
i {
font-size: 1.35rem;
color: #EE6D10;
&:hover {
cursor: pointer;
}
&.disabled {
color: #ccc;
}
}
}
.card-box {
.card-image-wrapper {
background-color: #F3F3F3;
border-radius: 5px;
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;
}
}
.card-title {
color: @secondary-color;
font-weight: bold;
margin: 1rem 0;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
}
</style>
......