Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a0072e17 1 parent de077135

新闻中心和关于我们头部banner图片显示优化

Inline Side-by-side
Showing 2 changed files with 33 additions and 13 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-11-07 10:53:15 4 + * @LastEditTime: 2024-11-07 16:54:50
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', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/tiny/banner04@2x.png)' }"> 10 + <hager-box v-if="!is_xs" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/tiny/banner04@2x.png)' }">
11 - <div v-if="!is_xs" class="banner-text-wrapper" style="margin-top: 8%;"> 11 + <div 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" style="">海格E3可持续发展理念</p>
14 - <p class="sub">Ethics 道德</p> 14 + <p class="sub" style="">Ethics 道德</p>
15 - <p class="sub">Environment 环境</p> 15 + <p class="sub" style="">Environment 环境</p>
16 - <p class="sub">Energy 能源</p> 16 + <p class="sub" style="">Energy 能源</p>
17 + </div>
18 + </div>
19 + </hager-box>
20 + <hager-box v-else>
21 + <div class="banner-text-wrapper top-center">
22 + <div class="text">
23 + <p class="title" style="margin-bottom: 0; font-size: 5vw;">关于海格</p>
24 + <p class="sub" style="font-size: 4vw;">About Hager</p>
17 </div> 25 </div>
18 </div> 26 </div>
19 </hager-box> 27 </hager-box>
......
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-11-05 09:38:45 4 + * @LastEditTime: 2024-11-07 17:56:53
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/banner06.png)' }"> 10 + <hager-box v-if="!is_xs" :class="['news-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 class="banner-text-wrapper" style="margin-top: 5%;">
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>
14 - <p class="sub">News</p> 14 + <p class="sub" style="">News</p>
15 <div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;"> 15 <div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
16 <p style="margin-bottom: 0.25rem;">在这里，可以找到海格的最新动态。</p> 16 <p style="margin-bottom: 0.25rem;">在这里，可以找到海格的最新动态。</p>
17 <p>深入了解来自海格的企业及市场活动、成功案例、<br />创新产品等。</p> 17 <p>深入了解来自海格的企业及市场活动、成功案例、<br />创新产品等。</p>
...@@ -19,6 +19,14 @@ ...@@ -19,6 +19,14 @@
19 </div> 19 </div>
20 </div> 20 </div>
21 </hager-box> 21 </hager-box>
22 + <hager-box v-else>
23 + <div class="banner-text-wrapper top-center">
24 + <div class="text">
25 + <p class="title" style="margin-bottom: 0; font-size: 5vw;">新闻中心</p>
26 + <p class="sub" style="font-size: 4vw;">News</p>
27 + </div>
28 + </div>
29 + </hager-box>
22 <hager-box style="margin: 1rem 0;"> 30 <hager-box style="margin: 1rem 0;">
23 <div v-if="!is_xs" class="hager-news-list"> 31 <div v-if="!is_xs" class="hager-news-list">
24 <div class="card" v-for="(item, index) in news_list" :key="index"> 32 <div class="card" v-for="(item, index) in news_list" :key="index">
...@@ -36,7 +44,7 @@ ...@@ -36,7 +44,7 @@
36 </div> 44 </div>
37 <div v-else class="hager-news-list xs"> 45 <div v-else class="hager-news-list xs">
38 <div class="card" v-for="(item, index) in news_list" :key="index"> 46 <div class="card" v-for="(item, index) in news_list" :key="index">
39 - <img :src="item.cover" alt="学校图片" class="card-image"> 47 + <img :src="item.cover" alt="学校图片" class="card-image xs">
40 <div class="news-item"> 48 <div class="news-item">
41 <div class="news-item-title xs">{{ item.post_title }}</div> 49 <div class="news-item-title xs">{{ item.post_title }}</div>
42 <p class="news-item-sub">{{ item.post_title_en }}</p> 50 <p class="news-item-sub">{{ item.post_title_en }}</p>
...@@ -98,7 +106,7 @@ export default { ...@@ -98,7 +106,7 @@ export default {
98 106
99 <style lang="less" scoped> 107 <style lang="less" scoped>
100 .hager-news-page { 108 .hager-news-page {
101 - .top-img { 109 + .news-top-img {
102 width: 100%; 110 width: 100%;
103 background-repeat: no-repeat; 111 background-repeat: no-repeat;
104 background-size: cover; 112 background-size: cover;
...@@ -140,6 +148,10 @@ export default { ...@@ -140,6 +148,10 @@ export default {
140 width: 100%; 148 width: 100%;
141 height: 26rem; 149 height: 26rem;
142 object-fit: cover; 150 object-fit: cover;
151 + &.xs {
152 + height: auto;
153 + object-fit: contain;
154 + }
143 } 155 }
144 156
145 .news-item { 157 .news-item {
......