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 265 additions and 97 deletions
...@@ -27,6 +27,7 @@ declare module 'vue' { ...@@ -27,6 +27,7 @@ declare module 'vue' {
27 HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default'] 27 HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
28 HagerMenu: typeof import('./src/components/hagerMenu.vue')['default'] 28 HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
29 HagerMore: typeof import('./src/components/hagerMore.vue')['default'] 29 HagerMore: typeof import('./src/components/hagerMore.vue')['default']
30 + HagerService: typeof import('./src/components/common/hagerService.vue')['default']
30 Navbar: typeof import('./src/components/navbar.vue')['default'] 31 Navbar: typeof import('./src/components/navbar.vue')['default']
31 RouterLink: typeof import('vue-router')['RouterLink'] 32 RouterLink: typeof import('vue-router')['RouterLink']
32 RouterView: typeof import('vue-router')['RouterView'] 33 RouterView: typeof import('vue-router')['RouterView']
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-15 16:26:25 4 + * @LastEditTime: 2024-10-16 13:58:23
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -47,6 +47,7 @@ body { ...@@ -47,6 +47,7 @@ body {
47 height: 100%; 47 height: 100%;
48 margin: 0; 48 margin: 0;
49 padding: 0; 49 padding: 0;
50 + color: @text-color;
50 p { 51 p {
51 margin: 0; 52 margin: 0;
52 padding: 0; 53 padding: 0;
...@@ -66,4 +67,38 @@ body { ...@@ -66,4 +67,38 @@ body {
66 margin-top: 7rem; 67 margin-top: 7rem;
67 } 68 }
68 } 69 }
70 +
71 +.box-n {
72 + background-color: #fff;
73 + padding: 2rem 0;
74 +}
75 +.box-2n {
76 + background-color: #f1f1f1;
77 + padding: 2rem 0;
78 +}
79 +
80 +.banner-text-wrapper {
81 + .text {
82 + font-weight: bold;
83 + .title {
84 + font-size: 2.5rem;
85 + color: @secondary-color;
86 + }
87 + .sub {
88 + font-size: 2rem;
89 + color: @primary-color;
90 + }
91 + }
92 + .text-sub {
93 + color: @text-color;
94 + margin-top: 1rem;
95 + font-size: 1.2rem;
96 + line-height: 1.5;
97 + }
98 +}
99 +
100 +.more-box {
101 + display: flex;
102 + justify-content: center;
103 +}
69 </style> 104 </style>
......
1 /* 1 /*
2 * @Date: 2022-07-26 09:49:54 2 * @Date: 2022-07-26 09:49:54
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-12 11:51:56 4 + * @LastEditTime: 2024-10-16 10:55:55
5 * @FilePath: /hager/src/common/mixin.js 5 * @FilePath: /hager/src/common/mixin.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
24 }, 24 },
25 data () { 25 data () {
26 return { 26 return {
27 - top_img_height: '35rem', 27 + top_img_height: '38rem',
28 screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px 28 screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
29 }; 29 };
30 }, 30 },
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
39 if (this.screenWidth < 768) { 39 if (this.screenWidth < 768) {
40 this.top_img_height = '30vh'; 40 this.top_img_height = '30vh';
41 } else { 41 } else {
42 - this.top_img_height = '35rem'; 42 + this.top_img_height = '38rem';
43 } 43 }
44 }, 44 },
45 }, 45 },
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 10:07:11 2 * @Date: 2024-09-29 10:07:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-10 13:54:50 4 + * @LastEditTime: 2024-10-16 11:57:09
5 * @FilePath: /hager/src/components/common/hagerH1.vue 5 * @FilePath: /hager/src/components/common/hagerH1.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -57,12 +57,12 @@ export default { ...@@ -57,12 +57,12 @@ export default {
57 // } 57 // }
58 .h1 { 58 .h1 {
59 color: @secondary-color; 59 color: @secondary-color;
60 - font-size: 1.75rem; 60 + font-size: 1.9rem;
61 font-weight: bold; 61 font-weight: bold;
62 } 62 }
63 .sub { 63 .sub {
64 color: @primary-color; 64 color: @primary-color;
65 - font-size: 1.25rem; 65 + font-size: 1.7rem;
66 font-weight: bold; 66 font-weight: bold;
67 } 67 }
68 } 68 }
......
1 +<!--
2 + * @Date: 2024-10-16 12:04:24
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-16 14:50:46
5 + * @FilePath: /hager/src/components/common/hagerService.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-service-page">
10 + <hager-box v-if="!is_xs" class="box-n" style="padding-top: 0;">
11 + <hager-h1 title="我们的服务" sub="Service Advantage" style="margin-bottom: 2rem;"></hager-h1>
12 + <div class="hager-service-list">
13 + <el-row :gutter="50">
14 + <el-col :span="8">
15 + <div class="service-item">
16 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
17 + <div class="service-title">快速</div>
18 + <div class="service-content">
19 + <p><span>7x24</span>小时全天实时在线</p>
20 + <p>全国<span>32</span>个城市办事处</p>
21 + <p>快速响应机制：承诺<span>2</span>小时内与客户达成沟通，</p>
22 + <p>必要时<span>24</span>小时内到场处理</p>
23 + </div>
24 + </div>
25 + </el-col>
26 + <el-col :span="8">
27 + <div class="service-item">
28 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
29 + <div class="service-title">专业</div>
30 + <div class="service-content">
31 + <p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
32 + </div>
33 + </div>
34 + </el-col>
35 + <el-col :span="8">
36 + <div class="service-item">
37 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
38 + <div class="service-title">快速</div>
39 + <div class="service-content">
40 + <p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
41 + </div>
42 + </div>
43 + </el-col>
44 + </el-row>
45 + </div>
46 + </hager-box>
47 + <div v-else style="padding: 1rem; padding-top: 0;">
48 + <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1>
49 + <div class="service-item xs">
50 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
51 + <div class="service-title">快速</div>
52 + <div class="service-content">
53 + <p><span>7x24</span>小时全天实时在线</p>
54 + <p>全国<span>32</span>个城市办事处</p>
55 + <p>快速响应机制：承诺<span>2</span>小时内与客户达成沟通，</p>
56 + <p>必要时<span>24</span>小时内到场处理</p>
57 + </div>
58 + </div>
59 + <div class="service-item xs">
60 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
61 + <div class="service-title">专业</div>
62 + <div class="service-content">
63 + <p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
64 + </div>
65 + </div>
66 + <div class="service-item xs">
67 + <el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
68 + <div class="service-title">快速</div>
69 + <div class="service-content">
70 + <p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
71 + </div>
72 + </div>
73 + </div>
74 + </div>
75 +</template>
76 +
77 +<script>
78 +import mixin from 'common/mixin';
79 +import hagerBox from '@/components/common/hagerBox';
80 +import hagerH1 from '@/components/common/hagerH1.vue';
81 +
82 +export default {
83 + components: { hagerBox, hagerH1 },
84 + mixins: [mixin.init],
85 + data () {
86 + return {
87 + service_list: [{
88 + icon: '',
89 + title: '',
90 + content: ''
91 + }, {
92 + icon: '',
93 + title: '',
94 + content: ''
95 + }, {
96 + icon: '',
97 + title: '',
98 + content: ''
99 + }]
100 + }
101 + },
102 + mounted () {
103 +
104 + },
105 + methods: {
106 +
107 + }
108 +}
109 +</script>
110 +
111 +<style lang="less" scoped>
112 + .hager-service-page {
113 + .service-item {
114 + .service-title {
115 + font-size: 1.2rem;
116 + font-weight: bold;
117 + margin: 0.5rem 0;
118 + }
119 + .service-content {
120 + p {
121 + font-size: 1rem;
122 + line-height: 2;
123 + span {
124 + color: @primary-color;
125 + }
126 + }
127 + }
128 + &.xs {
129 + margin-bottom: 1rem;
130 + padding: 1rem;
131 + }
132 + }
133 + }
134 +</style>
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-16 10:25:22 4 + * @LastEditTime: 2024-10-16 13:57:25
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-container"> 9 <div class="hager-container">
10 <el-carousel :height="top_img_height" :interval="8000"> 10 <el-carousel :height="top_img_height" :interval="8000">
11 - <el-carousel-item v-for="item in 4" :key="item"> 11 + <el-carousel-item v-for="(item, index) in banner_list" :key="index">
12 - <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image> 12 + <el-image style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
13 </el-carousel-item> 13 </el-carousel-item>
14 </el-carousel> 14 </el-carousel>
15 <hager-box class="box-n"> 15 <hager-box class="box-n">
...@@ -187,6 +187,20 @@ export default { ...@@ -187,6 +187,20 @@ export default {
187 data () { 187 data () {
188 return { 188 return {
189 is_fold: false, 189 is_fold: false,
190 + banner_list: [
191 + {
192 + src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
193 + },
194 + {
195 + src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
196 + },
197 + {
198 + src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
199 + },
200 + {
201 + src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
202 + },
203 + ],
190 news_list: [{ 204 news_list: [{
191 src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 205 src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
192 title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀', 206 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 { ...@@ -607,10 +621,5 @@ export default {
607 padding-left: 20%; 621 padding-left: 20%;
608 } 622 }
609 } 623 }
610 -
611 - .more-box {
612 - display: flex;
613 - justify-content: center;
614 - }
615 } 624 }
616 </style> 625 </style>
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 15:49:27 2 * @Date: 2024-09-29 15:49:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-11 13:36:28 4 + * @LastEditTime: 2024-10-16 11:00:12
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -99,14 +99,6 @@ export default { ...@@ -99,14 +99,6 @@ export default {
99 99
100 <style lang="less" scoped> 100 <style lang="less" scoped>
101 .hager-solution-detail { 101 .hager-solution-detail {
102 - .box-n {
103 - background-color: #fff;
104 - padding: 2rem 0;
105 - }
106 - .box-2n {
107 - background-color: #f1f1f1;
108 - padding: 2rem 0;
109 - }
110 .brief-introduction { 102 .brief-introduction {
111 background-color: #FFF; 103 background-color: #FFF;
112 height: 25rem; 104 height: 25rem;
......
1 <template> 1 <template>
2 <div class="hager-solution-index"> 2 <div class="hager-solution-index">
3 - <el-image :style="{ width: '100%', height: top_img_height }" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image> 3 + <hager-box :style="{backgroundColor: '#F5F6FB', height: top_img_height }">
4 + <div class="hager-solution-top">
5 + <el-row v-if="!is_xs" :gutter="20" style="display: flex;">
6 + <el-col :span="8">
7 + <div class="banner-text-wrapper">
8 + <div class="text">
9 + <span class="title">解决方案</span>&nbsp;<span class="sub">Solution</span>
10 + </div>
11 + <div class="text-sub">
12 + 海格电气用丰富的行业知识和应用经验，<br/>为多个行业提供智能低压配电解决方案和智能楼宇解决方案。
13 + </div>
14 + </div>
15 + </el-col>
16 + <el-col :span="16">
17 + <img :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
18 + </el-col>
19 + </el-row>
20 + <img v-else :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
21 + </div>
22 + </hager-box>
4 <hager-box class="box-n"> 23 <hager-box class="box-n">
5 - <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1> 24 + <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1>
6 - <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div> 25 + <div>海格电气为建筑，能源，工业，基础设施等行业提供安全、稳定、可靠、智能的低压配电解决方案及KNX智能楼宇解决方案。</div>
7 <div v-if="!is_xs" class="hager-industry-solutions"> 26 <div v-if="!is_xs" class="hager-industry-solutions">
8 - <div @click="goToSolution(item)" class="card" v-for="(item, index) in solution_list" :key="index"> 27 + <el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
9 - <img :src="item.src" alt="学校图片" class="card-image"> 28 + <el-col :span="6" v-for="(x, idx) in item" :key="idx">
29 + <div @click="goToSolution(item)" class="card">
30 + <img :src="x.src" class="card-image">
10 <div class="card-content"> 31 <div class="card-content">
11 - <div class="card-title" style=""> 32 + <div class="card-title">
12 - <span>{{ item.title }}</span> 33 + <span>{{ x.title }}</span>
13 <i class="el-icon-right"></i> 34 <i class="el-icon-right"></i>
14 </div> 35 </div>
15 - <p class="card-sub">{{ item.sub }}</p> 36 + <p class="card-sub">{{ x.sub }}</p>
16 </div> 37 </div>
17 </div> 38 </div>
39 + </el-col>
40 + </el-row>
18 </div> 41 </div>
19 <div v-else style="margin: 1rem 0;"> 42 <div v-else style="margin: 1rem 0;">
20 <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange"> 43 <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
...@@ -38,63 +61,11 @@ ...@@ -38,63 +61,11 @@
38 </div> 61 </div>
39 </div> 62 </div>
40 </div> 63 </div>
41 - </hager-box> 64 + <div class="more-box" style="margin-top: 2rem;">
42 - <hager-box v-if="!is_xs" class="box-2n"> 65 + <hager-more></hager-more>
43 - <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
44 - <div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;">
45 - <div>
46 - <div>快速</div>
47 - <div>
48 - <p>7x24小时全天实时在线</p>
49 - <p>全国32个城市办事处</p>
50 - <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
51 - </div>
52 - </div>
53 - <div>
54 - <div>专业</div>
55 - <div>
56 - <p>全由海格技术人员组成，提供专业技术服务
57 - 拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
58 - </div>
59 - </div>
60 - <div>
61 - <div>增值</div>
62 - <div>
63 - <p>为客户提供定制化服务，充分满足客户需求
64 - 针对客户需求提供过保产品保养及维修服务
65 - 针对现有产品（改造/升级/退市及一定使用
66 - 年限）提出替换/升级方案并实施完成</p>
67 - </div>
68 - </div>
69 </div> 66 </div>
70 </hager-box> 67 </hager-box>
71 - <div v-else style="padding: 1rem;"> 68 + <hager-service></hager-service>
72 - <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
73 - <div>
74 - <div>快速</div>
75 - <div>
76 - <p>7x24小时全天实时在线</p>
77 - <p>全国32个城市办事处</p>
78 - <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
79 - </div>
80 - </div>
81 - <div>
82 - <div>专业</div>
83 - <div>
84 - <p>全由海格技术人员组成，提供专业技术服务
85 - 拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
86 - </div>
87 - </div>
88 - <div>
89 - <div>增值</div>
90 - <div>
91 - <p>为客户提供定制化服务，充分满足客户需求
92 - 针对客户需求提供过保产品保养及维修服务
93 - 针对现有产品（改造/升级/退市及一定使用
94 - 年限）提出替换/升级方案并实施完成</p>
95 - </div>
96 - </div>
97 - </div>
98 </div> 69 </div>
99 </template> 70 </template>
100 71
...@@ -103,9 +74,10 @@ import mixin from 'common/mixin'; ...@@ -103,9 +74,10 @@ import mixin from 'common/mixin';
103 import hagerBox from '@/components/common/hagerBox'; 74 import hagerBox from '@/components/common/hagerBox';
104 import hagerH1 from '@/components/common/hagerH1.vue'; 75 import hagerH1 from '@/components/common/hagerH1.vue';
105 import hagerMore from '@/components/hagerMore.vue'; 76 import hagerMore from '@/components/hagerMore.vue';
77 +import hagerService from '@/components/common/hagerService.vue';
106 78
107 export default { 79 export default {
108 - components: { hagerBox, hagerH1, hagerMore }, 80 + components: { hagerBox, hagerH1, hagerMore, hagerService },
109 mixins: [mixin.init], 81 mixins: [mixin.init],
110 data () { 82 data () {
111 return { 83 return {
...@@ -179,6 +151,18 @@ export default { ...@@ -179,6 +151,18 @@ export default {
179 151
180 }, 152 },
181 methods: { 153 methods: {
154 + splitListIntoChunks (list) {
155 + const chunkSize = 4; // 每组4个项目
156 + const result = [];
157 +
158 + // 按每4个为一组进行分割
159 + for (let i = 0; i < list.length; i += chunkSize) {
160 + const chunk = list.slice(i, i + chunkSize);
161 + result.push(chunk);
162 + }
163 +
164 + return result;
165 + },
182 goToSolution (v) { 166 goToSolution (v) {
183 this.$router.push({ 167 this.$router.push({
184 path: '/solution/detail', 168 path: '/solution/detail',
...@@ -209,11 +193,24 @@ export default { ...@@ -209,11 +193,24 @@ export default {
209 193
210 <style lang="less" scoped> 194 <style lang="less" scoped>
211 .hager-solution-index { 195 .hager-solution-index {
196 + .hager-solution-top {
197 +
198 + width: 100%;
199 + .banner-text-wrapper {
200 + height: 100%;
201 + display: flex;
202 + // align-items: center;
203 + justify-content: center;
204 + flex-direction: column;
205 + }
206 + img {
207 + width: 100%;
208 + max-width: 100%; /* 防止宽度超出容器 */
209 + object-fit: fill; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
210 + }
211 + }
212 .hager-industry-solutions { 212 .hager-industry-solutions {
213 margin: 2rem 0; 213 margin: 2rem 0;
214 - display: grid;
215 - grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
216 - gap: 1.5rem; /* 每个项目之间的间距 */
217 .case-item { 214 .case-item {
218 position: relative; 215 position: relative;
219 height: 12rem; 216 height: 12rem;
...@@ -221,7 +218,6 @@ export default { ...@@ -221,7 +218,6 @@ export default {
221 text-align: center; 218 text-align: center;
222 color: #FFF; 219 color: #FFF;
223 border-radius: 8px; 220 border-radius: 8px;
224 - // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
225 background-size: cover; 221 background-size: cover;
226 background-position: top center; 222 background-position: top center;
227 transition: transform 0.3s ease-in-out; 223 transition: transform 0.3s ease-in-out;
...@@ -237,12 +233,13 @@ export default { ...@@ -237,12 +233,13 @@ export default {
237 border-radius: 10px; 233 border-radius: 10px;
238 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 234 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
239 overflow: hidden; 235 overflow: hidden;
240 - background-color: #fff; 236 + background-color: #F3F3F3;
241 margin: 0; 237 margin: 0;
242 transition: transform 0.3s ease-in-out; 238 transition: transform 0.3s ease-in-out;
239 + margin-bottom: 1rem;
243 &:hover { 240 &:hover {
244 - // transform: scale(1.05); 241 + transform: scale(1.05);
245 - // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 242 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
246 cursor: pointer; 243 cursor: pointer;
247 } 244 }
248 .card-image { 245 .card-image {
...@@ -258,12 +255,12 @@ export default { ...@@ -258,12 +255,12 @@ export default {
258 align-items: center; 255 align-items: center;
259 justify-content: space-between; 256 justify-content: space-between;
260 font-size: 1rem; 257 font-size: 1rem;
261 - color: #0072c6; 258 + color: @secondary-color;
262 margin-bottom: 10px; 259 margin-bottom: 10px;
260 + font-weight: bold;
263 } 261 }
264 .card-sub { 262 .card-sub {
265 font-size: 0.85rem; 263 font-size: 0.85rem;
266 - color: #333;
267 line-height: 1.6; 264 line-height: 1.6;
268 margin-bottom: 15px; 265 margin-bottom: 15px;
269 } 266 }
......