Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5eb806c1 1 parent d4f5b959

客户修改图文信息

Inline Side-by-side
Showing 4 changed files with 46 additions and 27 deletions
<!--
* @Date: 2024-10-16 12:04:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-30 11:18:43
* @LastEditTime: 2024-11-01 12:35:54
* @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 Advantage" style="margin-bottom: 2rem;"></hager-h1>
<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/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
<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>快速响应机制：承诺<span>2</span>小时内与客户达成沟通，</p>
<p>必要时<span>24</span>小时内到场处理</p>
<p>快速响应机制</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="service-item">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
<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>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
<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/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
<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>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
<p>为客户提供<span>定制化服务</span></p>
<p>提供过保产品保养及维修服务</p>
<p>提出并实施完成现有产品的<span>替换/升级方案</span></p>
</div>
</div>
</el-col>
......@@ -45,9 +49,9 @@
</div>
</hager-box>
<div v-else style="padding: 1rem; padding-top: 0;">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 1rem 0; padding: 0 1rem;"></hager-h1>
<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/icon/%E5%BF%AB%E9%80%9Ficon@2x.png" style="height: 2rem;"></el-image>
<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>
......@@ -57,14 +61,14 @@
</div>
</div>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E4%B8%93%E4%B8%9Aicon@2x.png" style="height: 2rem;"></el-image>
<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>，提供专业技术服务拥有<span>60</span>余年专业经验，服务于整个项目周期服务<span>多样化</span>，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div class="service-item xs">
<el-image src="https://cdn.ipadbiz.cn/hager/icon/%E5%A2%9E%E5%80%BCicon@2x.png" style="height: 2rem;"></el-image>
<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>，充分满足客户需求针对客户需求提供<span>过保产品保养及维修服务</span>针对现有产品（改造/升级/退市及一定使用年限）<span>提出替换/升级方案并实施完成</span></p>
......
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-31 11:56:55
* @LastEditTime: 2024-11-01 16:16:51
* @FilePath: /hager/src/views/about/design.vue
* @Description: 文件描述
-->
......@@ -75,13 +75,21 @@
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="0" style="margin-top: 2rem;margin-bottom: 2rem;">
<el-col :span="12">
<div class="left-box">
<!-- <div class="left-box">
<div class="title">
<hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
<div style="margin-top: 2rem; line-height: 1.75;" v-clamp="4">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</div>
</div> -->
<div style="box-shadow: 0px 0px 16px 1px rgba(0,0,0,0.09); height: 29rem;">
<div class="right-box">
<p class="title">“倾听客户的声音，打造一流设计”</p>
<div>
<img style="width: 100%; height: 15rem;" src="https://cdn.ipadbiz.cn/hager/img/about/jiang@2x.png" alt="">
</div>
</div>
</div>
</el-col>
<el-col :span="12">
......@@ -94,25 +102,31 @@
<div style="background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png); background-size: cover; background-repeat: no-repeat; height: 29rem;"></div>
</el-col>
</el-row>
<div style="margin-top: 2rem; line-height: 1.75;" v-clamp="4">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</hager-box>
<div v-else>
<div class="left-box xs">
<!-- <div class="left-box xs">
<div class="title xs">
<hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
<div style="margin-top: 2rem; line-height: 1.75;">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</div>
</div>
<!-- <div class="right-box xs">
</div> -->
<div class="right-box xs">
<p class="title">“倾听客户的声音，打造一流设计”</p>
<div>
<img style="width: 100%; height: 10rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g13@2x.png" alt="">
<img style="width: 100%; height: 15rem;" src="https://cdn.ipadbiz.cn/hager/img/about/jiang@2x.png">
</div>
</div> -->
</div>
<div>
<img style="width: 100%; height: 20rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png">
</div>
<div style="line-height: 2; padding: 1rem;">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</div>
</div>
</template>
......@@ -292,8 +306,8 @@ export default {
}
}
.right-box {
top: 30%;
transform: translateY(30%);
top: 10%;
transform: translateY(10%);
padding: 2rem;
&.xs {
top: 0;
......
<!--
* @Date: 2024-10-18 13:45:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-31 14:22:20
* @LastEditTime: 2024-11-01 11:50:15
* @FilePath: /hager/src/views/recruit.vue
* @Description: 招聘信息
-->
......@@ -62,7 +62,7 @@
</div>
</div>
<hager-box class="box-n">
<div>
<div style="margin-top: 2rem;">
<swiper ref="mySwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
<swiper-slide v-for="(item, index) in recruit_list" :key="index">
<div class="recruit-wrapper">
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-24 10:32:43
* @LastEditTime: 2024-11-01 11:52:12
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
<hager-box class="top-img" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">学校解决方案</p>
......@@ -306,9 +306,10 @@ export default {
background-size: cover;
background-position: center;
position: relative;
height: 25rem;
.top-center {
position: absolute;
transform: translateY(150%); /* 垂直与水平居中 */
transform: translateY(100%); /* 垂直与水平居中 */
}
}
.carousel-img {
......