Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2453fe7f 1 parent b031fac0

✨ feat: 新增解决方案主页面结构

Inline Side-by-side
Showing 2 changed files with 146 additions and 16 deletions
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-09-29 17:10:28 4 + * @LastEditTime: 2024-09-29 17:24:02
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-solution-detail"> 9 <div class="hager-solution-detail">
10 - <el-image style="width: 100%; height: 25rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image> 10 + <el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
11 <hager-box class="box-n"> 11 <hager-box class="box-n">
12 <el-row :gutter="0"> 12 <el-row :gutter="0">
13 <el-col :span="12" style="height: 25rem;"> 13 <el-col :span="12" style="height: 25rem;">
...@@ -193,18 +193,6 @@ export default { ...@@ -193,18 +193,6 @@ export default {
193 line-height: 1.6; 193 line-height: 1.6;
194 margin-bottom: 15px; 194 margin-bottom: 15px;
195 } 195 }
196 -
197 - .card-link {
198 - display: inline-block;
199 - color: #0072c6;
200 - font-size: 14px;
201 - text-decoration: none;
202 - font-weight: bold;
203 - }
204 -
205 - .card-link:hover {
206 - text-decoration: underline;
207 - }
208 } 196 }
209 } 197 }
210 } 198 }
......
1 <template> 1 <template>
2 - <div class="hager-solution-index"></div> 2 + <div class="hager-solution-index">
3 + <el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
4 + <hager-box class="box-n">
5 + <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
6 + <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
7 + <div class="hager-industry-solutions">
8 + <div class="card">
9 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
10 + <div class="card-content">
11 + <div style="display: flex; align-items: center; justify-content: space-between;">
12 + <span>住宅解决方案</span>
13 + <i class="el-icon-right"></i>
14 + </div>
15 + <p>Residential Solution Case</p>
16 + </div>
17 + </div>
18 + <div class="card">
19 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
20 + <div class="card-content">
21 + <div style="display: flex; align-items: center; justify-content: space-between;">
22 + <span>住宅解决方案</span>
23 + <i class="el-icon-right"></i>
24 + </div>
25 + <p>Residential Solution Case</p>
26 + </div>
27 + </div>
28 + <div class="card">
29 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
30 + <div class="card-content">
31 + <div style="display: flex; align-items: center; justify-content: space-between;">
32 + <span>住宅解决方案</span>
33 + <i class="el-icon-right"></i>
34 + </div>
35 + <p>Residential Solution Case</p>
36 + </div>
37 + </div>
38 + <div class="card">
39 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
40 + <div class="card-content">
41 + <div style="display: flex; align-items: center; justify-content: space-between;">
42 + <span>住宅解决方案</span>
43 + <i class="el-icon-right"></i>
44 + </div>
45 + <p>Residential Solution Case</p>
46 + </div>
47 + </div>
48 + <div class="card">
49 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
50 + <div class="card-content">
51 + <div style="display: flex; align-items: center; justify-content: space-between;">
52 + <span>住宅解决方案</span>
53 + <i class="el-icon-right"></i>
54 + </div>
55 + <p>Residential Solution Case</p>
56 + </div>
57 + </div>
58 + <div class="card">
59 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
60 + <div class="card-content">
61 + <div style="display: flex; align-items: center; justify-content: space-between;">
62 + <span>住宅解决方案</span>
63 + <i class="el-icon-right"></i>
64 + </div>
65 + <p>Residential Solution Case</p>
66 + </div>
67 + </div>
68 + <div class="card">
69 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
70 + <div class="card-content">
71 + <div style="display: flex; align-items: center; justify-content: space-between;">
72 + <span>住宅解决方案</span>
73 + <i class="el-icon-right"></i>
74 + </div>
75 + <p>Residential Solution Case</p>
76 + </div>
77 + </div>
78 + </div>
79 + </hager-box>
80 + </div>
3 </template> 81 </template>
4 82
5 <script> 83 <script>
6 import mixin from 'common/mixin'; 84 import mixin from 'common/mixin';
85 +import hagerBox from '@/components/common/hagerBox';
86 +import hagerH1 from '@/components/common/hagerH1.vue';
87 +import hagerMore from '@/components/hagerMore.vue';
7 88
8 export default { 89 export default {
90 + components: { hagerBox, hagerH1, hagerMore },
9 mixins: [mixin.init], 91 mixins: [mixin.init],
10 data () { 92 data () {
11 return { 93 return {
...@@ -22,5 +104,65 @@ export default { ...@@ -22,5 +104,65 @@ export default {
22 </script> 104 </script>
23 105
24 <style lang="less" scoped> 106 <style lang="less" scoped>
25 -.hager-solution-index {} 107 +.hager-solution-index {
108 + .hager-industry-solutions {
109 + margin: 2rem 0;
110 + display: grid;
111 + grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
112 + gap: 1.5rem; /* 每个项目之间的间距 */
113 + .case-item {
114 + position: relative;
115 + height: 12rem;
116 + padding: 1.5rem;
117 + text-align: center;
118 + color: #FFF;
119 + border-radius: 8px;
120 + background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
121 + background-size: cover;
122 + background-position: top center;
123 + transition: transform 0.3s ease-in-out;
124 + &:hover {
125 + transform: scale(1.05);
126 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
127 + cursor: pointer;
128 + }
129 + }
130 + .card {
131 + // width: 300px;
132 + border-radius: 10px;
133 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
134 + overflow: hidden;
135 + background-color: #fff;
136 + margin: 0;
137 + transition: transform 0.3s ease-in-out;
138 + &:hover {
139 + transform: scale(1.05);
140 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
141 + cursor: pointer;
142 + }
143 + .card-image {
144 + width: 100%;
145 + height: auto;
146 + object-fit: cover;
147 + }
148 +
149 + .card-content {
150 + padding: 15px;
151 + }
152 +
153 + .card h3 {
154 + font-size: 18px;
155 + color: #0072c6;
156 + margin-bottom: 10px;
157 + }
158 +
159 + .card p {
160 + font-size: 14px;
161 + color: #333;
162 + line-height: 1.6;
163 + margin-bottom: 15px;
164 + }
165 + }
166 + }
167 +}
26 </style> 168 </style>
......