Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ef6706da 1 parent 816fc43b

客户需求替换图片

Inline Side-by-side
Showing 4 changed files with 25 additions and 18 deletions
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 10:43:46
* @LastEditTime: 2024-10-31 11:56:55
* @FilePath: /hager/src/views/about/design.vue
* @Description: 文件描述
-->
......@@ -36,7 +36,7 @@
</el-row>
</hager-box>
<div v-else style="margin-top: 1rem;">
<div class="about-img"></div>
<div class="about-img xs"></div>
<div class="about-box xs">
<div>
<!-- <div class="title">
......@@ -73,7 +73,7 @@
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-n">
<el-row :gutter="30" style="margin-top: 2rem;margin-bottom: 2rem;">
<el-row :gutter="0" style="margin-top: 2rem;margin-bottom: 2rem;">
<el-col :span="12">
<div class="left-box">
<div class="title">
......@@ -85,12 +85,13 @@
</div>
</el-col>
<el-col :span="12">
<div class="right-box">
<!-- <div class="right-box">
<p class="title">“倾听客户的声音，打造一流设计”</p>
<div>
<img style="width: 100%; height: 10rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g13@2x.png" alt="">
</div>
</div>
</div> -->
<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>
</hager-box>
......@@ -103,11 +104,14 @@
</div>
</div>
</div>
<div class="right-box xs">
<!-- <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="">
</div>
</div> -->
<div>
<img style="width: 100%; height: 20rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png">
</div>
</div>
</div>
......@@ -213,7 +217,10 @@ export default {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png);
background-image: url('https://cdn.ipadbiz.cn/hager/img/about/g09@2x-1.png');
&.xs {
height: 20rem;
}
}
.about-box {
background-color: #F7F7F7;
......
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 16:22:33
* @LastEditTime: 2024-10-31 11:43:55
* @FilePath: /hager/src/views/about/global.vue
* @Description: 文件描述
-->
......@@ -87,7 +87,7 @@ export default {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g07@2x.png);
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g071@2x.png);
&.xs {
height: 15rem;
margin-top: 1rem;
......
<!--
* @Date: 2024-10-17 09:22:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-26 14:42:38
* @LastEditTime: 2024-10-31 11:44:29
* @FilePath: /hager/src/views/about/index.vue
* @Description: 文件描述
-->
......@@ -75,7 +75,7 @@ export default {
data () {
return {
intro_list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g01@2x.png',
img: 'https://cdn.ipadbiz.cn/hager/img/about/g071@2x.png',
c_title: '海格全球',
e_title: 'Hager Group',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
......
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 11:32:04
* @LastEditTime: 2024-10-31 12:01:22
* @FilePath: /hager/src/views/about/product.vue
* @Description: 文件描述
-->
......@@ -52,7 +52,7 @@
<hager-box v-if="!is_xs" class="box-n">
<el-row>
<el-col :span="12">
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x.png)' }"></div>
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x-1.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="about-box">
......@@ -86,7 +86,7 @@
</el-row>
<el-row>
<el-col :span="12">
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x.png)' }"></div>
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x-1.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="about-box">
......@@ -102,7 +102,7 @@
</el-row>
</hager-box>
<div v-else class="box-2n" style="padding: 1rem;">
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x.png)' }"></div>
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x-1.png)' }"></div>
<div class="about-box xs" style="background-color: #FFF; margin-bottom: 1rem;">
<div class="title" style="">
<p class="c xs">追求卓越的匠心品质</p>
......@@ -124,7 +124,7 @@
<p>产品预设与东莞工厂配电箱增值服务全面满足客户需求，柔性生产线和灵活生产解决方案帮助客户应对紧急交付需求。海格中国工厂RFID射频标签技术及质量追踪系统可随时了解订单生产状态，确保交货速度。广泛应用在塑壳、漏保等制造环节中的二维码技术自动调取产品工艺参数，为客户实现快速换型生产。 </p>
</div>
</div>
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x.png)' }"></div>
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x-1.png)' }"></div>
<div class="about-box xs" style="background-color: #FFF;">
<div class="title">
<p class="c xs">绿色制造的匠心承诺</p>
......@@ -289,7 +289,7 @@ export default {
.hager-about-product-page {
.about-img {
width: 100%;
height: 30rem;
height: 35rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center right;
......@@ -308,7 +308,7 @@ export default {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
height: 35rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
......