Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b031fac0 1 parent 0e6f982c

✨ feat: 解决方案详情页完善

Inline Side-by-side
Showing 2 changed files with 147 additions and 6 deletions
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-09-29 16:49:36 4 + * @LastEditTime: 2024-09-29 17:12:34
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -237,9 +237,5 @@ export default { ...@@ -237,9 +237,5 @@ export default {
237 background-color: #f3f3f3; 237 background-color: #f3f3f3;
238 } 238 }
239 } 239 }
240 - .news-container {
241 -
242 - }
243 -
244 } 240 }
245 </style> 241 </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-09-29 16:30:31 4 + * @LastEditTime: 2024-09-29 17:10:28
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -25,6 +25,80 @@ ...@@ -25,6 +25,80 @@
25 <hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1> 25 <hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
26 <hager-h-carousel></hager-h-carousel> 26 <hager-h-carousel></hager-h-carousel>
27 </hager-box> 27 </hager-box>
28 + <hager-box class="box-2n">
29 + <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
30 + <div class="hager-success-cases">
31 + <div class="card">
32 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
33 + <div class="card-content">
34 + <h3>厦门翔城中小学</h3>
35 + <p>
36 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
37 + </p>
38 + <i class="el-icon-right"></i>
39 + </div>
40 + </div>
41 + <div class="card">
42 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
43 + <div class="card-content">
44 + <h3>厦门翔城中小学</h3>
45 + <p>
46 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
47 + </p>
48 + <i class="el-icon-right"></i>
49 + </div>
50 + </div>
51 + <div class="card">
52 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
53 + <div class="card-content">
54 + <h3>厦门翔城中小学</h3>
55 + <p>
56 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
57 + </p>
58 + <i class="el-icon-right"></i>
59 + </div>
60 + </div>
61 + <div class="card">
62 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
63 + <div class="card-content">
64 + <h3>厦门翔城中小学</h3>
65 + <p>
66 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
67 + </p>
68 + <i class="el-icon-right"></i>
69 + </div>
70 + </div>
71 + <div class="card">
72 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
73 + <div class="card-content">
74 + <h3>厦门翔城中小学</h3>
75 + <p>
76 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
77 + </p>
78 + <i class="el-icon-right"></i>
79 + </div>
80 + </div>
81 + <div class="card">
82 + <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
83 + <div class="card-content">
84 + <h3>厦门翔城中小学</h3>
85 + <p>
86 + 占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
87 + </p>
88 + <i class="el-icon-right"></i>
89 + </div>
90 + </div>
91 + </div>
92 + <div style="display: flex; justify-content: center; margin-top: 2rem;">
93 + <hager-more></hager-more>
94 + </div>
95 + </hager-box>
96 + <hager-box class="box-n">
97 + <hager-h1 title="我们的优势" sub="OUR ADVANTAGES" style="margin: 2rem 0;"></hager-h1>
98 + <div>
99 + 海格突出的优势来自于我们以客户为中心的价值观和互惠互利，共同发展的经营原则，旺盛捷非常善于倾听和理解客户的需求和关注，我们提供有效的解决方案，整合各个行业的最佳资源，我们的产品和服务使我们与传统的EMS不同，我们更多地关注产品质量与产品数量的有机统一；我们不仅向客户分享我们最好的行业经验，还分享制造成本节约的成果，与传统EMS相比，无沦订单大小，我们在成本、质量、灵活性、技术和应方面都具有明显的优势：
100 + </div>
101 + </hager-box>
28 </div> 102 </div>
29 </template> 103 </template>
30 104
...@@ -62,5 +136,76 @@ export default { ...@@ -62,5 +136,76 @@ export default {
62 background-color: #f1f1f1; 136 background-color: #f1f1f1;
63 padding: 2rem 0; 137 padding: 2rem 0;
64 } 138 }
139 + .hager-success-cases {
140 + margin-top: 2rem;
141 + display: grid;
142 + grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
143 + gap: 1.5rem; /* 每个项目之间的间距 */
144 + .case-item {
145 + position: relative;
146 + height: 12rem;
147 + padding: 1.5rem;
148 + text-align: center;
149 + color: #FFF;
150 + border-radius: 8px;
151 + background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
152 + background-size: cover;
153 + background-position: top center;
154 + transition: transform 0.3s ease-in-out;
155 + &:hover {
156 + transform: scale(1.05);
157 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
158 + cursor: pointer;
159 + }
160 + }
161 + .card {
162 + // width: 300px;
163 + border-radius: 10px;
164 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
165 + overflow: hidden;
166 + background-color: #fff;
167 + margin: 0;
168 + transition: transform 0.3s ease-in-out;
169 + &:hover {
170 + transform: scale(1.05);
171 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
172 + cursor: pointer;
173 + }
174 + .card-image {
175 + width: 100%;
176 + height: auto;
177 + object-fit: cover;
178 + }
179 +
180 + .card-content {
181 + padding: 15px;
182 + }
183 +
184 + .card h3 {
185 + font-size: 18px;
186 + color: #0072c6;
187 + margin-bottom: 10px;
188 + }
189 +
190 + .card p {
191 + font-size: 14px;
192 + color: #333;
193 + line-height: 1.6;
194 + margin-bottom: 15px;
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 + }
209 + }
65 } 210 }
66 </style> 211 </style>
......