hagerService.vue
5.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!--
* @Date: 2024-10-16 12:04:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-04 09:56:03
* @FilePath: /hager/src/components/common/hagerService.vue
* @Description: 文件描述
-->
<template>
<div class="hager-service-page">
<hager-box v-if="!is_xs" class="" style="padding: 2rem 0;">
<hager-h1 title="我们的服务" sub="Service Advantages" 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/img/server/%E5%BF%AB%E9%80%9F.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title">快速</div>
<div class="service-content">
<p><span>7x24</span>小时全天实时在线</p>
<p>全国<span>32</span>个城市办事处</p>
<p>快速响应机制</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E4%B8%93%E4%B8%9A.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title">专业</div>
<div class="service-content">
<p><span>技术服务全由海格技术人员完成</span></p>
<p><span>70年</span>专业技术服务经验，</p>
<p>服务于整个项目周期</p>
<p>服务沟通方式多样化</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%A2%9E%E5%80%BC.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title">增值</div>
<div class="service-content">
<p>为客户提供<span>定制化服务</span></p>
<p>提供过保产品保养及维修服务</p>
<p>提出并实施完成现有产品的<span>替换/升级方案</span></p>
</div>
</div>
</el-col>
</el-row>
</div>
</hager-box>
<div v-else style="padding: 1rem; overflow: auto;">
<hager-h1 title="我们的服务" sub="Service Advantages" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%BF%AB%E9%80%9F.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title xs">快速</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/img/server/%E4%B8%93%E4%B8%9A.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title xs">专业</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/img/server/%E5%A2%9E%E5%80%BC.png" style="width: 100%; height: auto;"></el-image>
<div class="service-title xs">增值</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 {
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
// text-align: center;
margin: 1rem 0;
.service-title {
font-size: 1.2rem;
font-weight: bold;
margin: 0.5rem 0;
&.xs {
margin-top: 1rem;
}
}
.service-content {
p {
font-size: 1rem;
line-height: 2;
span {
color: @primary-color;
}
}
}
&.xs {
margin-bottom: 1rem;
padding: 1rem;
}
}
}
</style>