Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0f8b067e 1 parent 2aa9e390

关于海格首页自适应页面调整

Inline Side-by-side
Showing 2 changed files with 23 additions and 4 deletions
1 /* 1 /*
2 * @Date: 2022-07-26 09:49:54 2 * @Date: 2022-07-26 09:49:54
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-21 16:35:25 4 + * @LastEditTime: 2024-10-21 16:45:53
5 * @FilePath: /hager/src/common/mixin.js 5 * @FilePath: /hager/src/common/mixin.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
37 handleResize() { 37 handleResize() {
38 this.screenWidth = $(window).width(); // 更新屏幕宽度 38 this.screenWidth = $(window).width(); // 更新屏幕宽度
39 if (this.screenWidth < 768) { 39 if (this.screenWidth < 768) {
40 - this.top_img_height = '30vh'; 40 + this.top_img_height = '20vh';
41 } else { 41 } else {
42 this.top_img_height = '38rem'; 42 this.top_img_height = '38rem';
43 } 43 }
......
1 <!-- 1 <!--
2 * @Date: 2024-10-17 09:22:56 2 * @Date: 2024-10-17 09:22:56
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 17:36:40 4 + * @LastEditTime: 2024-10-21 16:55:32
5 * @FilePath: /hager/src/views/about/index.vue 5 * @FilePath: /hager/src/views/about/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 </div> 17 </div>
18 </div> 18 </div>
19 </hager-box> 19 </hager-box>
20 - <hager-box class="box-n" style="margin-top: 2rem;"> 20 + <hager-box v-if="!is_xs" class="box-n" style="margin-top: 2rem;">
21 <el-row v-for="(item, index) in intro_list" :key="index" style="margin-bottom: 3rem;"> 21 <el-row v-for="(item, index) in intro_list" :key="index" style="margin-bottom: 3rem;">
22 <el-col :span="12"> 22 <el-col :span="12">
23 <div v-if="index % 2 === 0" class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div> 23 <div v-if="index % 2 === 0" class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
...@@ -47,6 +47,21 @@ ...@@ -47,6 +47,21 @@
47 </el-col> 47 </el-col>
48 </el-row> 48 </el-row>
49 </hager-box> 49 </hager-box>
50 + <div v-else>
51 + <div v-for="(item, index) in intro_list" :key="index" style="padding: 1rem;">
52 + <div class="about-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
53 + <div class="about-box">
54 + <div class="title">
55 + <p class="c">{{ item.c_title }}</p>
56 + <p class="e">{{ item.e_title }}</p>
57 + </div>
58 + <div class="introduce" v-clamp="3">{{ item.content }}</div>
59 + <div class="more">
60 + <div class="btn" @click="goTo(item.link)">MORE</div>
61 + </div>
62 + </div>
63 + </div>
64 + </div>
50 </div> 65 </div>
51 </template> 66 </template>
52 67
...@@ -130,6 +145,10 @@ export default { ...@@ -130,6 +145,10 @@ export default {
130 height: 20rem; 145 height: 20rem;
131 background-repeat: no-repeat; 146 background-repeat: no-repeat;
132 background-size: cover; 147 background-size: cover;
148 + background-position: center;
149 + &.xs {
150 + height: 15rem;
151 + }
133 } 152 }
134 .about-box { 153 .about-box {
135 background-color: #F7F7F7; 154 background-color: #F7F7F7;
......