Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
162ef34d 1 parent 57aa6622

关于海格-可持续发展自适应页面调整

Inline Side-by-side
Showing 2 changed files with 36 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-17 11:13:44 2 * @Date: 2024-10-17 11:13:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-22 11:35:17 4 + * @LastEditTime: 2024-10-22 11:48:50
5 * @FilePath: /hager/src/views/about/china.vue 5 * @FilePath: /hager/src/views/about/china.vue
6 - * @Description: 文件描述 6 + * @Description: 关于海格-海格在中国
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-about-china-page"> 9 <div class="hager-about-china-page">
......
1 <!-- 1 <!--
2 * @Date: 2024-10-17 11:13:44 2 * @Date: 2024-10-17 11:13:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 16:22:51 4 + * @LastEditTime: 2024-10-22 11:49:53
5 * @FilePath: /hager/src/views/about/development.vue 5 * @FilePath: /hager/src/views/about/development.vue
6 - * @Description: 文件描述 6 + * @Description: 关于海格-可持续发展
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-about-development-page"> 9 <div class="hager-about-development-page">
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 </el-breadcrumb> 15 </el-breadcrumb>
16 </div> 16 </div>
17 </hager-box> 17 </hager-box>
18 - <hager-box> 18 + <hager-box v-if="!is_xs">
19 <el-row style="margin: 3rem 0;"> 19 <el-row style="margin: 3rem 0;">
20 <el-col :span="8"> 20 <el-col :span="8">
21 <div class="about-box"> 21 <div class="about-box">
...@@ -40,6 +40,22 @@ ...@@ -40,6 +40,22 @@
40 <p>作为一家有着明确价值观的家族企业，我们今天就行动起来，以确保未来成功。海格电气一直持续不断地投资我们的员工及其技能开发和培训、优化我们的生态平衡、开发更节能的流程和解决方案。可持续发展是我们获得长期成功的关键。我们所做的每件事都秉承可持续发展的原则，因此我们将整个可持续发展的概念融合成为统一的理念：E3 。E3 是一个广泛的理念，用于指导我们更好地使用地球上有限的资源。三个E分别代表道德（Ethics）、环境（Environment）和能源（Energy）。</p> 40 <p>作为一家有着明确价值观的家族企业，我们今天就行动起来，以确保未来成功。海格电气一直持续不断地投资我们的员工及其技能开发和培训、优化我们的生态平衡、开发更节能的流程和解决方案。可持续发展是我们获得长期成功的关键。我们所做的每件事都秉承可持续发展的原则，因此我们将整个可持续发展的概念融合成为统一的理念：E3 。E3 是一个广泛的理念，用于指导我们更好地使用地球上有限的资源。三个E分别代表道德（Ethics）、环境（Environment）和能源（Energy）。</p>
41 </div> 41 </div>
42 </hager-box> 42 </hager-box>
43 + <div v-else>
44 + <div class="about-img xs"></div>
45 + <div class="about-box xs">
46 + <div>
47 + <div class="title">
48 + <p class="c xs">可持续发展</p>
49 + <p class="e xs">Sustainable<br/>Development</p>
50 + </div>
51 + <div class="introduce">
52 + <p style="margin: 1.5rem 0 1rem;">“关注人们的需求，关心我们的环境，顺乎道德，合乎责任。”</p>
53 + <p>——Daniel Hager 先生</p>
54 + <p>海格集团监事会主席</p>
55 + </div>
56 + </div>
57 + </div>
58 + </div>
43 </div> 59 </div>
44 </template> 60 </template>
45 61
...@@ -74,6 +90,10 @@ export default { ...@@ -74,6 +90,10 @@ export default {
74 background-size: cover; 90 background-size: cover;
75 background-position: center; 91 background-position: center;
76 background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g20@2x.png); 92 background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g20@2x.png);
93 + &.xs {
94 + height: 15rem;
95 + margin-top: 1rem;
96 + }
77 } 97 }
78 .about-box { 98 .about-box {
79 background-color: #F7F7F7; 99 background-color: #F7F7F7;
...@@ -81,15 +101,26 @@ export default { ...@@ -81,15 +101,26 @@ export default {
81 padding: 2rem; 101 padding: 2rem;
82 height: 30rem; /* 让 .about-box 撑满父容器 */ 102 height: 30rem; /* 让 .about-box 撑满父容器 */
83 box-sizing: border-box; 103 box-sizing: border-box;
104 + &.xs {
105 + height: auto;
106 + padding: 2rem;
107 + background-color: #FFF;
108 + }
84 .title { 109 .title {
85 font-weight: bold; 110 font-weight: bold;
86 .c { 111 .c {
87 font-size: 2rem; 112 font-size: 2rem;
88 color: @secondary-color; 113 color: @secondary-color;
114 + &.xs {
115 + font-size: 1.5rem;
116 + }
89 } 117 }
90 .e { 118 .e {
91 font-size: 1.5rem; 119 font-size: 1.5rem;
92 color: @primary-color; 120 color: @primary-color;
121 + &.xs {
122 + font-size: 1.1rem;
123 + }
93 } 124 }
94 } 125 }
95 .introduce { 126 .introduce {
......