Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ba0e88c5 1 parent b247e994

图片高度样式修改

Inline Side-by-side
Showing 2 changed files with 10 additions and 6 deletions
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-21 16:55:32 4 + * @LastEditTime: 2024-10-24 14:43:28
5 * @FilePath: /hager/src/views/about/index.vue 5 * @FilePath: /hager/src/views/about/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-about-page"> 9 <div class="hager-about-page">
10 - <hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }"> 10 + <hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
11 - <div v-if="!is_xs" class="banner-text-wrapper top-center"> 11 + <div v-if="!is_xs" class="banner-text-wrapper" style="margin-top: 8%;">
12 <div class="text"> 12 <div class="text">
13 <p class="title">海格E3可持续发展理念</p> 13 <p class="title">海格E3可持续发展理念</p>
14 <p class="sub">Ethics 道德</p> 14 <p class="sub">Ethics 道德</p>
...@@ -134,6 +134,10 @@ export default { ...@@ -134,6 +134,10 @@ export default {
134 background-size: cover; 134 background-size: cover;
135 background-position: center; 135 background-position: center;
136 position: relative; 136 position: relative;
137 + height: 25rem;
138 + &.xs {
139 + height: 12rem;
140 + }
137 .top-center { 141 .top-center {
138 position: absolute; 142 position: absolute;
139 transform: translateY(100%); /* 垂直与水平居中 */ 143 transform: translateY(100%); /* 垂直与水平居中 */
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 12:05:44 2 * @Date: 2024-10-18 12:05:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-23 14:36:19 4 + * @LastEditTime: 2024-10-24 14:42:28
5 * @FilePath: /hager/src/views/news/index.vue 5 * @FilePath: /hager/src/views/news/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-news-page"> 9 <div class="hager-news-page">
10 - <hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }"> 10 + <hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner06.png)' }">
11 <div v-if="!is_xs" class="banner-text-wrapper top-center"> 11 <div v-if="!is_xs" class="banner-text-wrapper top-center">
12 <div class="text"> 12 <div class="text">
13 <p class="title" style="margin-bottom: 0;">新闻中心</p> 13 <p class="title" style="margin-bottom: 0;">新闻中心</p>
...@@ -110,7 +110,7 @@ export default { ...@@ -110,7 +110,7 @@ export default {
110 } 110 }
111 .top-center { 111 .top-center {
112 position: absolute; 112 position: absolute;
113 - transform: translateY(50%); /* 垂直与水平居中 */ 113 + transform: translateY(100%); /* 垂直与水平居中 */
114 } 114 }
115 } 115 }
116 116
......