Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f7ff3c6d 1 parent b0fcf7ee

解决方案首页样式内容调整

Inline Side-by-side
Showing 8 changed files with 269 additions and 101 deletions
......@@ -27,6 +27,7 @@ declare module 'vue' {
HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
HagerMore: typeof import('./src/components/hagerMore.vue')['default']
HagerService: typeof import('./src/components/common/hagerService.vue')['default']
Navbar: typeof import('./src/components/navbar.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-15 16:26:25
* @LastEditTime: 2024-10-16 13:58:23
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
......@@ -47,6 +47,7 @@ body {
height: 100%;
margin: 0;
padding: 0;
color: @text-color;
p {
margin: 0;
padding: 0;
......@@ -66,4 +67,38 @@ body {
margin-top: 7rem;
}
}
.box-n {
background-color: #fff;
padding: 2rem 0;
}
.box-2n {
background-color: #f1f1f1;
padding: 2rem 0;
}
.banner-text-wrapper {
.text {
font-weight: bold;
.title {
font-size: 2.5rem;
color: @secondary-color;
}
.sub {
font-size: 2rem;
color: @primary-color;
}
}
.text-sub {
color: @text-color;
margin-top: 1rem;
font-size: 1.2rem;
line-height: 1.5;
}
}
.more-box {
display: flex;
justify-content: center;
}
</style>
......
/*
* @Date: 2022-07-26 09:49:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-12 11:51:56
* @LastEditTime: 2024-10-16 10:55:55
* @FilePath: /hager/src/common/mixin.js
* @Description: 文件描述
*/
......@@ -24,7 +24,7 @@ export default {
},
data () {
return {
top_img_height: '35rem',
top_img_height: '38rem',
screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
};
},
......@@ -39,7 +39,7 @@ export default {
if (this.screenWidth < 768) {
this.top_img_height = '30vh';
} else {
this.top_img_height = '35rem';
this.top_img_height = '38rem';
}
},
},
......
<!--
* @Date: 2024-09-29 10:07:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-10 13:54:50
* @LastEditTime: 2024-10-16 11:57:09
* @FilePath: /hager/src/components/common/hagerH1.vue
* @Description: 文件描述
-->
......@@ -57,12 +57,12 @@ export default {
// }
.h1 {
color: @secondary-color;
font-size: 1.75rem;
font-size: 1.9rem;
font-weight: bold;
}
.sub {
color: @primary-color;
font-size: 1.25rem;
font-size: 1.7rem;
font-weight: bold;
}
}
......
<!--
* @Date: 2024-10-16 12:04:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 14:50:46
* @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-h1 title="我们的服务" sub="Service Advantage" style="margin-bottom: 2rem;"></hager-h1>
<div class="hager-service-list">
<el-row :gutter="50">
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">快速</div>
<div class="service-content">
<p><span>7x24</span>小时全天实时在线</p>
<p>全国<span>32</span>个城市办事处</p>
<p>快速响应机制：承诺<span>2</span>小时内与客户达成沟通，</p>
<p>必要时<span>24</span>小时内到场处理</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">专业</div>
<div class="service-content">
<p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">快速</div>
<div class="service-content">
<p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
</div>
</div>
</el-col>
</el-row>
</div>
</hager-box>
<div v-else style="padding: 1rem; padding-top: 0;">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">快速</div>
<div class="service-content">
<p><span>7x24</span>小时全天实时在线</p>
<p>全国<span>32</span>个城市办事处</p>
<p>快速响应机制：承诺<span>2</span>小时内与客户达成沟通，</p>
<p>必要时<span>24</span>小时内到场处理</p>
</div>
</div>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">专业</div>
<div class="service-content">
<p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
<div class="service-title">快速</div>
<div class="service-content">
<p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerBox, hagerH1 },
mixins: [mixin.init],
data () {
return {
service_list: [{
icon: '',
title: '',
content: ''
}, {
icon: '',
title: '',
content: ''
}, {
icon: '',
title: '',
content: ''
}]
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.hager-service-page {
.service-item {
.service-title {
font-size: 1.2rem;
font-weight: bold;
margin: 0.5rem 0;
}
.service-content {
p {
font-size: 1rem;
line-height: 2;
span {
color: @primary-color;
}
}
}
&.xs {
margin-bottom: 1rem;
padding: 1rem;
}
}
}
</style>
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 10:25:22
* @LastEditTime: 2024-10-16 13:57:25
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-container">
<el-carousel :height="top_img_height" :interval="8000">
<el-carousel-item v-for="item in 4" :key="item">
<el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<el-carousel-item v-for="(item, index) in banner_list" :key="index">
<el-image style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
</el-carousel-item>
</el-carousel>
<hager-box class="box-n">
......@@ -187,6 +187,20 @@ export default {
data () {
return {
is_fold: false,
banner_list: [
{
src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
},
{
src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
},
{
src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
},
{
src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
},
],
news_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
......@@ -607,10 +621,5 @@ export default {
padding-left: 20%;
}
}
.more-box {
display: flex;
justify-content: center;
}
}
</style>
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-11 13:36:28
* @LastEditTime: 2024-10-16 11:00:12
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -99,14 +99,6 @@ export default {
<style lang="less" scoped>
.hager-solution-detail {
.box-n {
background-color: #fff;
padding: 2rem 0;
}
.box-2n {
background-color: #f1f1f1;
padding: 2rem 0;
}
.brief-introduction {
background-color: #FFF;
height: 25rem;
......
<template>
<div class="hager-solution-index">
<el-image :style="{ width: '100%', height: top_img_height }" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<hager-box :style="{backgroundColor: '#F5F6FB', height: top_img_height }">
<div class="hager-solution-top">
<el-row v-if="!is_xs" :gutter="20" style="display: flex;">
<el-col :span="8">
<div class="banner-text-wrapper">
<div class="text">
<span class="title">解决方案</span>&nbsp;<span class="sub">Solution</span>
</div>
<div class="text-sub">
海格电气用丰富的行业知识和应用经验，<br/>为多个行业提供智能低压配电解决方案和智能楼宇解决方案。
</div>
</div>
</el-col>
<el-col :span="16">
<img :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
</el-col>
</el-row>
<img v-else :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
<div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
<hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1>
<div>海格电气为建筑，能源，工业，基础设施等行业提供安全、稳定、可靠、智能的低压配电解决方案及KNX智能楼宇解决方案。</div>
<div v-if="!is_xs" class="hager-industry-solutions">
<div @click="goToSolution(item)" class="card" v-for="(item, index) in solution_list" :key="index">
<img :src="item.src" alt="学校图片" class="card-image">
<div class="card-content">
<div class="card-title" style="">
<span>{{ item.title }}</span>
<i class="el-icon-right"></i>
<el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
<el-col :span="6" v-for="(x, idx) in item" :key="idx">
<div @click="goToSolution(item)" class="card">
<img :src="x.src" class="card-image">
<div class="card-content">
<div class="card-title">
<span>{{ x.title }}</span>
<i class="el-icon-right"></i>
</div>
<p class="card-sub">{{ x.sub }}</p>
</div>
</div>
<p class="card-sub">{{ item.sub }}</p>
</div>
</div>
</el-col>
</el-row>
</div>
<div v-else style="margin: 1rem 0;">
<swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
......@@ -38,63 +61,11 @@
</div>
</div>
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-2n">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
<div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;">
<div>
<div>快速</div>
<div>
<p>7x24小时全天实时在线</p>
<p>全国32个城市办事处</p>
<p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
</div>
</div>
<div>
<div>专业</div>
<div>
<p>全由海格技术人员组成，提供专业技术服务
拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div>
<div>增值</div>
<div>
<p>为客户提供定制化服务，充分满足客户需求
针对客户需求提供过保产品保养及维修服务
针对现有产品（改造/升级/退市及一定使用
年限）提出替换/升级方案并实施完成</p>
</div>
</div>
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
</hager-box>
<div v-else style="padding: 1rem;">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
<div>
<div>快速</div>
<div>
<p>7x24小时全天实时在线</p>
<p>全国32个城市办事处</p>
<p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
</div>
</div>
<div>
<div>专业</div>
<div>
<p>全由海格技术人员组成，提供专业技术服务
拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div>
<div>增值</div>
<div>
<p>为客户提供定制化服务，充分满足客户需求
针对客户需求提供过保产品保养及维修服务
针对现有产品（改造/升级/退市及一定使用
年限）提出替换/升级方案并实施完成</p>
</div>
</div>
</div>
<hager-service></hager-service>
</div>
</template>
......@@ -103,9 +74,10 @@ import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
import hagerService from '@/components/common/hagerService.vue';
export default {
components: { hagerBox, hagerH1, hagerMore },
components: { hagerBox, hagerH1, hagerMore, hagerService },
mixins: [mixin.init],
data () {
return {
......@@ -179,6 +151,18 @@ export default {
},
methods: {
splitListIntoChunks (list) {
const chunkSize = 4; // 每组4个项目
const result = [];
// 按每4个为一组进行分割
for (let i = 0; i < list.length; i += chunkSize) {
const chunk = list.slice(i, i + chunkSize);
result.push(chunk);
}
return result;
},
goToSolution (v) {
this.$router.push({
path: '/solution/detail',
......@@ -209,11 +193,24 @@ export default {
<style lang="less" scoped>
.hager-solution-index {
.hager-solution-top {
width: 100%;
.banner-text-wrapper {
height: 100%;
display: flex;
// align-items: center;
justify-content: center;
flex-direction: column;
}
img {
width: 100%;
max-width: 100%; /* 防止宽度超出容器 */
object-fit: fill; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
}
}
.hager-industry-solutions {
margin: 2rem 0;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
.case-item {
position: relative;
height: 12rem;
......@@ -221,7 +218,6 @@ export default {
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;
......@@ -237,12 +233,13 @@ export default {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
background-color: #F3F3F3;
margin: 0;
transition: transform 0.3s ease-in-out;
margin-bottom: 1rem;
&:hover {
// transform: scale(1.05);
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.card-image {
......@@ -258,12 +255,12 @@ export default {
align-items: center;
justify-content: space-between;
font-size: 1rem;
color: #0072c6;
color: @secondary-color;
margin-bottom: 10px;
font-weight: bold;
}
.card-sub {
font-size: 0.85rem;
color: #333;
line-height: 1.6;
margin-bottom: 15px;
}
......