Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
997549de 1 parent 02527fc2

招聘信息和新闻中心自适应调整

Expand all
Inline Side-by-side
Showing 2 changed files with 26 additions and 4 deletions
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-18 17:37:53 4 + * @LastEditTime: 2024-10-22 15:02:54
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" :style="{ height: '25rem', 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 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>
...@@ -20,17 +20,28 @@ ...@@ -20,17 +20,28 @@
20 </div> 20 </div>
21 </hager-box> 21 </hager-box>
22 <hager-box style="margin: 1rem 0;"> 22 <hager-box style="margin: 1rem 0;">
23 - <div class="hager-news-list"> 23 + <div v-if="!is_xs" class="hager-news-list">
24 <div class="card" v-for="(item, index) in news_list" :key="index"> 24 <div class="card" v-for="(item, index) in news_list" :key="index">
25 <img :src="item.src" alt="学校图片" class="card-image"> 25 <img :src="item.src" alt="学校图片" class="card-image">
26 <div class="news-item"> 26 <div class="news-item">
27 - <div class="news-item-title">{{ item.title }}</div> 27 + <div :class="news-item-title">{{ item.title }}</div>
28 <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p> 28 <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
29 <p class="news-item-content" v-clamp="3">{{ item.content }}</p> 29 <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
30 <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div> 30 <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 + <div v-else class="hager-news-list xs">
35 + <div class="card" v-for="(item, index) in news_list" :key="index">
36 + <img :src="item.src" alt="学校图片" class="card-image">
37 + <div class="news-item">
38 + <div class="news-item-title xs">{{ item.title }}</div>
39 + <p class="news-item-sub">{{ item.sub }}</p>
40 + <p class="news-item-content">{{ item.content }}</p>
41 + <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
42 + </div>
43 + </div>
44 + </div>
34 </hager-box> 45 </hager-box>
35 <hager-box> 46 <hager-box>
36 <hager-load-more></hager-load-more> 47 <hager-load-more></hager-load-more>
...@@ -92,6 +103,10 @@ export default { ...@@ -92,6 +103,10 @@ export default {
92 background-size: cover; 103 background-size: cover;
93 background-position: center; 104 background-position: center;
94 position: relative; 105 position: relative;
106 + height: 25rem;
107 + &.xs {
108 + height: 12rem;
109 + }
95 .top-center { 110 .top-center {
96 position: absolute; 111 position: absolute;
97 transform: translateY(50%); /* 垂直与水平居中 */ 112 transform: translateY(50%); /* 垂直与水平居中 */
...@@ -103,6 +118,10 @@ export default { ...@@ -103,6 +118,10 @@ export default {
103 display: flex; 118 display: flex;
104 flex-wrap: wrap; 119 flex-wrap: wrap;
105 justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */ 120 justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
121 + &.xs {
122 + display: block;
123 + margin-top: 0;
124 + }
106 .card { 125 .card {
107 flex: 0 0 48.5%; /* 宽度为 1/3 */ 126 flex: 0 0 48.5%; /* 宽度为 1/3 */
108 margin-bottom: 2.5rem; /* 在元素之间添加间距 */ 127 margin-bottom: 2.5rem; /* 在元素之间添加间距 */
...@@ -134,6 +153,9 @@ export default { ...@@ -134,6 +153,9 @@ export default {
134 white-space: nowrap; /* 不换行 */ 153 white-space: nowrap; /* 不换行 */
135 overflow: hidden; /* 隐藏超出部分 */ 154 overflow: hidden; /* 隐藏超出部分 */
136 text-overflow: ellipsis; /* 用省略号表示被截断的部分 */ 155 text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
156 + &.xs {
157 + white-space: wrap;
158 + }
137 } 159 }
138 .news-item-sub { 160 .news-item-sub {
139 color: @primary-color; 161 color: @primary-color;
......
This diff is collapsed. Click to expand it.