Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1132c04d 1 parent 6a250d65

新增联系我们页面

Inline Side-by-side
Showing 3 changed files with 374 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:42:11 2 * @Date: 2024-09-26 13:42:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 12:27:11 4 + * @LastEditTime: 2024-10-18 09:34:29
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -57,10 +57,10 @@ ...@@ -57,10 +57,10 @@
57 <span @mouseenter="onClickProduct">产品中心</span> 57 <span @mouseenter="onClickProduct">产品中心</span>
58 </div> 58 </div>
59 <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div> 59 <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
60 - <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div> 60 + <div :class="[is_active === 'news' ? 'active' : '', 'item']" @click="goTo('/news')">新闻中心</div>
61 - <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div> 61 + <div :class="[is_active === 'recruit' ? 'active' : '', 'item']" @click="goTo('/recruit')">招聘信息</div>
62 <div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div> 62 <div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div>
63 - <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div> 63 + <div :class="[is_active === 'concat' ? 'active' : '', 'item']" @click="goTo('/concat')">联系我们</div>
64 <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div> 64 <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
65 </div> 65 </div>
66 </el-col> 66 </el-col>
......
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 09:22:48 4 + * @LastEditTime: 2024-10-18 09:32:58
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -113,4 +113,13 @@ export default [{ ...@@ -113,4 +113,13 @@ export default [{
113 tag: 'about' 113 tag: 'about'
114 }, 114 },
115 children: [] 115 children: []
116 +}, {
117 + path: '/concat',
118 + name: '联系我们',
119 + component: () => import('@/views/concat'),
120 + meta: {
121 + title: '海格电器',
122 + tag: 'concat'
123 + },
124 + children: []
116 }] 125 }]
......
1 +<!--
2 + * @Date: 2024-10-18 09:31:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 11:42:37
5 + * @FilePath: /hager/src/views/concat.vue
6 + * @Description: 联系我们
7 +-->
8 +<template>
9 + <div class="hager-concat-page">
10 + <div class="top-img"></div>
11 + <hager-box style="margin: 3rem 0;">
12 + <el-row :gutter="0" style="margin-bottom: 1rem;">
13 + <el-col :span="16">
14 + <div class="img"></div>
15 + </el-col>
16 + <el-col :span="8">
17 + <div class="headquarter-wrapper">
18 + <div class="info">
19 + <div class="title">中国总部</div>
20 + <div class="name" style="margin: 1rem;">座机</div>
21 + <div class="number">021-66986600</div>
22 + </div>
23 + </div>
24 + </el-col>
25 + </el-row>
26 + <div>
27 + <div class="concat-area">全 国</div>
28 + <el-row :gutter="0">
29 + <el-col :span="12">
30 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
31 + <el-col :span="13" class="title"><span class="inner">LSM/智能化产品事业部</span></el-col>
32 + <el-col :span="3" class="name outer"><p class="inner">贺先生</p></el-col>
33 + <el-col :span="8" class="number outer"><span class="inner">13817300169</span></el-col>
34 + </el-row>
35 + </el-col>
36 + <el-col :span="12">
37 + <el-row :gutter="0" style="padding: 1.5rem 0;">
38 + <el-col :span="13" class="title"><span class="inner">发电行业</span></el-col>
39 + <el-col :span="3" class="name outer"><p class="inner">许先生</p></el-col>
40 + <el-col :span="8" class="number outer"><span class="inner">13910422245</span></el-col>
41 + </el-row>
42 + </el-col>
43 + </el-row>
44 + <div class="concat-area">华 东</div>
45 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
46 + <el-col :span="12">
47 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
48 + <el-col :span="13" class="title"><span class="inner">合肥</span></el-col>
49 + <el-col :span="3" class="name outer"><p class="inner">丁先生</p></el-col>
50 + <el-col :span="8" class="number outer"><span class="inner">15155181380</span></el-col>
51 + </el-row>
52 + </el-col>
53 + <el-col :span="12">
54 + <el-row :gutter="0" style="padding: 1.5rem 0;">
55 + <el-col :span="13" class="title"><span class="inner">南京 苏北 无锡 苏州</span></el-col>
56 + <el-col :span="3" class="name outer"><p class="inner">葛先生</p></el-col>
57 + <el-col :span="8" class="number outer"><span class="inner">18662188718</span></el-col>
58 + </el-row>
59 + </el-col>
60 + </el-row>
61 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
62 + <el-col :span="12">
63 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
64 + <el-col :span="13" class="title"><span class="inner">上海</span></el-col>
65 + <el-col :span="3" class="name outer"><p class="inner">侯女士</p></el-col>
66 + <el-col :span="8" class="number outer"><span class="inner">18621185022</span></el-col>
67 + </el-row>
68 + </el-col>
69 + <el-col :span="12">
70 + <el-row :gutter="0" style="padding: 1.5rem 0;">
71 + <el-col :span="13" class="title"><span class="inner">杭州</span></el-col>
72 + <el-col :span="3" class="name outer"><p class="inner">谢先生</p></el-col>
73 + <el-col :span="8" class="number outer"><span class="inner">18657575776</span></el-col>
74 + </el-row>
75 + </el-col>
76 + </el-row>
77 + <el-row :gutter="0">
78 + <el-col :span="12">
79 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
80 + <el-col :span="13" class="title"><span class="inner">宁波</span></el-col>
81 + <el-col :span="3" class="name outer"><p class="inner">李女士</p></el-col>
82 + <el-col :span="8" class="number outer"><span class="inner">13819421866</span></el-col>
83 + </el-row>
84 + </el-col>
85 + <el-col :span="12">
86 + <el-row :gutter="0" style="padding: 1.5rem 0;">
87 + <el-col :span="13" class="title">&nbsp;</el-col>
88 + <el-col :span="3" class="name outer">&nbsp;</el-col>
89 + <el-col :span="8" class="number outer">&nbsp;</el-col>
90 + </el-row>
91 + </el-col>
92 + </el-row>
93 + <div class="concat-area">华 南</div>
94 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
95 + <el-col :span="12">
96 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
97 + <el-col :span="13" class="title"><p class="inner">广州 佛山 顺德 茂名 湛江 韶关 海南</p></el-col>
98 + <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
99 + <el-col :span="8" class="number outer"><span class="inner">020-31650557</span></el-col>
100 + </el-row>
101 + </el-col>
102 + <el-col :span="12">
103 + <el-row :gutter="0">
104 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">深圳 惠州</span></el-col>
105 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
106 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
107 + <p class="inner">0755-82559248</p>
108 + <p class="inner">020-31650557</p>
109 + </el-col>
110 + </el-row>
111 + </el-col>
112 + </el-row>
113 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
114 + <el-col :span="12">
115 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
116 + <el-col :span="13" class="title"><span class="inner">珠海 东莞 中山</span></el-col>
117 + <el-col :span="3" class="name outer"><p class="inner">王先生</p></el-col>
118 + <el-col :span="8" class="number outer"><span class="inner">15900247733</span></el-col>
119 + </el-row>
120 + </el-col>
121 + <el-col :span="12">
122 + <el-row :gutter="0" style="padding: 1.5rem 0;">
123 + <el-col :span="13" class="title"><span class="inner">汕头 汕尾 潮州</span></el-col>
124 + <el-col :span="3" class="name outer"><p class="inner">陈先生</p></el-col>
125 + <el-col :span="8" class="number outer"><span class="inner">15817966395</span></el-col>
126 + </el-row>
127 + </el-col>
128 + </el-row>
129 + <el-row :gutter="0">
130 + <el-col :span="12">
131 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
132 + <el-col :span="13" class="title"><span class="inner">福建省</span></el-col>
133 + <el-col :span="3" class="name outer"><p class="inner">林先生</p></el-col>
134 + <el-col :span="8" class="number outer"><span class="inner">18650180767</span></el-col>
135 + </el-row>
136 + </el-col>
137 + <el-col :span="12">
138 + <el-row :gutter="0" style="padding: 1.5rem 0;">
139 + <el-col :span="13" class="title">&nbsp;</el-col>
140 + <el-col :span="3" class="name outer">&nbsp;</el-col>
141 + <el-col :span="8" class="number outer">&nbsp;</el-col>
142 + </el-row>
143 + </el-col>
144 + </el-row>
145 + <div class="concat-area">北 区</div>
146 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
147 + <el-col :span="12" style="border-right: 1px solid #DADADA;">
148 + <el-row :gutter="0">
149 + <el-col :span="13" class="title" style="margin: 1.5rem 0;"><span class="inner">北京</span></el-col>
150 + <el-col :span="3" class="name outer" style="margin: 1.5rem 0;"><p class="inner">座机</p></el-col>
151 + <el-col :span="8" class="number outer" style="margin-top: 1rem;">
152 + <p class="inner">010-84535251</p>
153 + <p class="inner">010-84535112</p>
154 + </el-col>
155 + </el-row>
156 + </el-col>
157 + <el-col :span="12">
158 + <el-row :gutter="0" style="padding: 1.5rem 0;">
159 + <el-col :span="13" class="title"><p class="inner">京津 内蒙</p></el-col>
160 + <el-col :span="3" class="name outer"><p class="inner">孙先生</p></el-col>
161 + <el-col :span="8" class="number outer"><span class="inner">13911009923</span></el-col>
162 + </el-row>
163 + </el-col>
164 + </el-row>
165 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
166 + <el-col :span="12">
167 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
168 + <el-col :span="13" class="title"><span class="inner">辽宁</span></el-col>
169 + <el-col :span="3" class="name outer"><p class="inner">马先生</p></el-col>
170 + <el-col :span="8" class="number outer"><span class="inner">18940112000</span></el-col>
171 + </el-row>
172 + </el-col>
173 + <el-col :span="12">
174 + <el-row :gutter="0" style="padding: 1.5rem 0;">
175 + <el-col :span="13" class="title"><span class="inner">吉林 黑龙江</span></el-col>
176 + <el-col :span="3" class="name outer"><p class="inner">郭女士</p></el-col>
177 + <el-col :span="8" class="number outer"><span class="inner">13394492511</span></el-col>
178 + </el-row>
179 + </el-col>
180 + </el-row>
181 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
182 + <el-col :span="12">
183 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
184 + <el-col :span="13" class="title"><span class="inner">河北 山西</span></el-col>
185 + <el-col :span="3" class="name outer"><p class="inner">明女士</p></el-col>
186 + <el-col :span="8" class="number outer"><span class="inner">13832171806</span></el-col>
187 + </el-row>
188 + </el-col>
189 + <el-col :span="12">
190 + <el-row :gutter="0" style="padding: 1.5rem 0;">
191 + <el-col :span="13" class="title"><span class="inner">济南 烟台</span></el-col>
192 + <el-col :span="3" class="name outer"><p class="inner">张先生</p></el-col>
193 + <el-col :span="8" class="number outer"><span class="inner">13608967713</span></el-col>
194 + </el-row>
195 + </el-col>
196 + </el-row>
197 + <el-row :gutter="0">
198 + <el-col :span="12">
199 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
200 + <el-col :span="13" class="title"><span class="inner">青岛</span></el-col>
201 + <el-col :span="3" class="name outer"><p class="inner">岳先生</p></el-col>
202 + <el-col :span="8" class="number outer"><span class="inner">13608965895</span></el-col>
203 + </el-row>
204 + </el-col>
205 + <el-col :span="12">
206 + <el-row :gutter="0" style="padding: 1.5rem 0;">
207 + <el-col :span="13" class="title">&nbsp;</el-col>
208 + <el-col :span="3" class="name outer">&nbsp;</el-col>
209 + <el-col :span="8" class="number outer">&nbsp;</el-col>
210 + </el-row>
211 + </el-col>
212 + </el-row>
213 + <div class="concat-area">华 中</div>
214 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
215 + <el-col :span="12">
216 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
217 + <el-col :span="13" class="title"><span class="inner">湖北</span></el-col>
218 + <el-col :span="3" class="name outer"><p class="inner">余先生</p></el-col>
219 + <el-col :span="8" class="number outer"><span class="inner">13607118550</span></el-col>
220 + </el-row>
221 + </el-col>
222 + <el-col :span="12">
223 + <el-row :gutter="0" style="padding: 1.5rem 0;">
224 + <el-col :span="13" class="title"><span class="inner">湖南</span></el-col>
225 + <el-col :span="3" class="name outer"><p class="inner">祝先生</p></el-col>
226 + <el-col :span="8" class="number outer"><span class="inner">13507421625</span></el-col>
227 + </el-row>
228 + </el-col>
229 + </el-row>
230 + <el-row :gutter="0">
231 + <el-col :span="12">
232 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
233 + <el-col :span="13" class="title"><span class="inner">河南</span></el-col>
234 + <el-col :span="3" class="name outer"><p class="inner">座机</p></el-col>
235 + <el-col :span="8" class="number outer"><span class="inner">0731-84416348</span></el-col>
236 + </el-row>
237 + </el-col>
238 + <el-col :span="12">
239 + <el-row :gutter="0" style="padding: 1.5rem 0;">
240 + <el-col :span="13" class="title">&nbsp;</el-col>
241 + <el-col :span="3" class="name outer">&nbsp;</el-col>
242 + <el-col :span="8" class="number outer">&nbsp;</el-col>
243 + </el-row>
244 + </el-col>
245 + </el-row>
246 + <div class="concat-area">西 南</div>
247 + <el-row :gutter="0" style="border-bottom: 1px solid #DADADA;">
248 + <el-col :span="12">
249 + <el-row :gutter="0" style="border-right: 1px solid #DADADA; padding: 1.5rem 0;">
250 + <el-col :span="13" class="title"><span class="inner">四川 重庆 贵州 云南 西藏</span></el-col>
251 + <el-col :span="3" class="name outer"><p class="inner">梁先生</p></el-col>
252 + <el-col :span="8" class="number outer"><span class="inner">13637700633</span></el-col>
253 + </el-row>
254 + </el-col>
255 + <el-col :span="12">
256 + <el-row :gutter="0" style="padding: 1.5rem 0;">
257 + <el-col :span="13" class="title"><span class="inner">&nbsp;</span></el-col>
258 + <el-col :span="3" class="name outer"><p class="inner">&nbsp;</p></el-col>
259 + <el-col :span="8" class="number outer"><span class="inner">&nbsp;</span></el-col>
260 + </el-row>
261 + </el-col>
262 + </el-row>
263 + </div>
264 + </hager-box>
265 + </div>
266 +</template>
267 +
268 +<script>
269 +import mixin from 'common/mixin';
270 +import hagerBox from '@/components/common/hagerBox';
271 +
272 +export default {
273 + components: { hagerBox },
274 + mixins: [mixin.init],
275 + data () {
276 + return {
277 +
278 + }
279 + },
280 + mounted () {
281 +
282 + },
283 + methods: {
284 +
285 + }
286 +}
287 +</script>
288 +
289 +<style lang="less" scoped>
290 + .hager-concat-page {
291 + .top-img {
292 + height: 23rem;
293 + background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner05.png);
294 + background-size: cover;
295 + background-position: center;
296 + background-repeat: no-repeat;
297 + }
298 +
299 + .img {
300 + width: 100%;
301 + height: 25rem;
302 + background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png);
303 + background-size: cover;
304 + background-position: center;
305 + background-repeat: no-repeat;
306 + }
307 +
308 + .headquarter-wrapper {
309 + display: flex;
310 + align-items: center;
311 + justify-content: center;
312 + height: 25rem;
313 + background-color: #F7F7F7;
314 + .info {
315 + display: flex;
316 + flex-direction: column;
317 + font-size: 1.5rem;
318 + text-align: center;
319 + }
320 + }
321 +
322 + .title {
323 + color: @secondary-color;
324 + font-weight: bold;
325 + .inner {
326 + // margin-left: 1.5rem;
327 + // text-indent: 1.5rem;
328 + padding-left: 1.5rem;
329 + }
330 + }
331 +
332 + .name {
333 + color: @primary-color;
334 + font-weight: bold;
335 + &.outer {
336 + text-align: right;
337 + }
338 + .inner {
339 + text-align: center;
340 + }
341 + }
342 +
343 + .number {
344 + color: #F56400;
345 + font-weight: bold;
346 + &.outer {
347 + text-align: right;
348 + }
349 + .inner {
350 + margin-right: 1.5rem;
351 + }
352 + }
353 +
354 + .concat-area {
355 + background-color: #E3F1F7;
356 + padding: 1rem 1.5rem;
357 + font-weight: bold;
358 + }
359 + }
360 +</style>