Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
23a9e69b 1 parent 4dfd8f4b

fix 我们的服务组件样式优化

Inline Side-by-side
Showing 1 changed file with 14 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-16 12:04:24 2 * @Date: 2024-10-16 12:04:24
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-01 12:35:54 4 + * @LastEditTime: 2024-11-04 09:56:03
5 * @FilePath: /hager/src/components/common/hagerService.vue 5 * @FilePath: /hager/src/components/common/hagerService.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -48,11 +48,11 @@ ...@@ -48,11 +48,11 @@
48 </el-row> 48 </el-row>
49 </div> 49 </div>
50 </hager-box> 50 </hager-box>
51 - <div v-else style="padding: 1rem; padding-top: 0;"> 51 + <div v-else style="padding: 1rem; overflow: auto;">
52 <hager-h1 title="我们的服务" sub="Service Advantages" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1> 52 <hager-h1 title="我们的服务" sub="Service Advantages" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1>
53 <div class="service-item xs"> 53 <div class="service-item xs">
54 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%BF%AB%E9%80%9F.png" style="width: 100%; height: auto;"></el-image> 54 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%BF%AB%E9%80%9F.png" style="width: 100%; height: auto;"></el-image>
55 - <div class="service-title">快速</div> 55 + <div class="service-title xs">快速</div>
56 <div class="service-content"> 56 <div class="service-content">
57 <p><span>7x24</span>小时全天实时在线</p> 57 <p><span>7x24</span>小时全天实时在线</p>
58 <p>全国<span>32</span>个城市办事处</p> 58 <p>全国<span>32</span>个城市办事处</p>
...@@ -62,14 +62,14 @@ ...@@ -62,14 +62,14 @@
62 </div> 62 </div>
63 <div class="service-item xs"> 63 <div class="service-item xs">
64 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E4%B8%93%E4%B8%9A.png" style="width: 100%; height: auto;"></el-image> 64 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E4%B8%93%E4%B8%9A.png" style="width: 100%; height: auto;"></el-image>
65 - <div class="service-title">专业</div> 65 + <div class="service-title xs">专业</div>
66 <div class="service-content"> 66 <div class="service-content">
67 <p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p> 67 <p><span>全由海格技术人员组成</span>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
68 </div> 68 </div>
69 </div> 69 </div>
70 <div class="service-item xs"> 70 <div class="service-item xs">
71 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%A2%9E%E5%80%BC.png" style="width: 100%; height: auto;"></el-image> 71 <el-image src="https://cdn.ipadbiz.cn/hager/img/server/%E5%A2%9E%E5%80%BC.png" style="width: 100%; height: auto;"></el-image>
72 - <div class="service-title">增值</div> 72 + <div class="service-title xs">增值</div>
73 <div class="service-content"> 73 <div class="service-content">
74 <p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p> 74 <p>为客户<span>提供定制化服务</span>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
75 </div> 75 </div>
...@@ -115,10 +115,19 @@ export default { ...@@ -115,10 +115,19 @@ export default {
115 <style lang="less" scoped> 115 <style lang="less" scoped>
116 .hager-service-page { 116 .hager-service-page {
117 .service-item { 117 .service-item {
118 + display: flex;
119 + flex-direction: column;
120 + // align-items: center;
121 + // justify-content: center;
122 + // text-align: center;
123 + margin: 1rem 0;
118 .service-title { 124 .service-title {
119 font-size: 1.2rem; 125 font-size: 1.2rem;
120 font-weight: bold; 126 font-weight: bold;
121 margin: 0.5rem 0; 127 margin: 0.5rem 0;
128 + &.xs {
129 + margin-top: 1rem;
130 + }
122 } 131 }
123 .service-content { 132 .service-content {
124 p { 133 p {
......