Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b07867d8 1 parent ab82a81b

✨ feat(关于海格，新闻中心): 单个item文字布局，客户提要求高度缩小

Inline Side-by-side
Showing 2 changed files with 16 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-11-07 16:54:50 4 + * @LastEditTime: 2024-11-11 11:20:45
5 * @FilePath: /hager/src/views/about/index.vue 5 * @FilePath: /hager/src/views/about/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
64 <p class="e xs">{{ item.e_title }}</p> 64 <p class="e xs">{{ item.e_title }}</p>
65 </div> 65 </div>
66 <div class="introduce" v-clamp="3">{{ item.content }}</div> 66 <div class="introduce" v-clamp="3">{{ item.content }}</div>
67 - <div class="more"> 67 + <div class="more xs">
68 <div class="btn" @click="goTo(item.link)">MORE</div> 68 <div class="btn" @click="goTo(item.link)">MORE</div>
69 </div> 69 </div>
70 </div> 70 </div>
...@@ -198,6 +198,9 @@ export default { ...@@ -198,6 +198,9 @@ export default {
198 .more { 198 .more {
199 position: absolute; /* 固定在容器底部 */ 199 position: absolute; /* 固定在容器底部 */
200 bottom: 1rem; 200 bottom: 1rem;
201 + &.xs {
202 + bottom: 2.5rem;
203 + }
201 .btn { 204 .btn {
202 background-color: #F56400; 205 background-color: #F56400;
203 width: 8rem; 206 width: 8rem;
......
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-07 17:56:53 4 + * @LastEditTime: 2024-11-11 11:25:17
5 * @FilePath: /hager/src/views/news/index.vue 5 * @FilePath: /hager/src/views/news/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 <div class="news-item-title">{{ item.post_title }}</div> 38 <div class="news-item-title">{{ item.post_title }}</div>
39 <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p> 39 <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
40 <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p> 40 <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
41 - <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div> 41 + <div @click="goToNew(item)" class="news-item-more">MORE</div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
48 <div class="news-item"> 48 <div class="news-item">
49 <div class="news-item-title xs">{{ item.post_title }}</div> 49 <div class="news-item-title xs">{{ item.post_title }}</div>
50 <p class="news-item-sub">{{ item.post_title_en }}</p> 50 <p class="news-item-sub">{{ item.post_title_en }}</p>
51 - <p class="news-item-content">{{ item.post_excerpt }}</p> 51 + <p class="news-item-content xs">{{ item.post_excerpt }}</p>
52 - <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div> 52 + <div @click="goToNew(item)" class="news-item-more xs">MORE</div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
...@@ -183,6 +183,9 @@ export default { ...@@ -183,6 +183,9 @@ export default {
183 line-height: 1.5em; 183 line-height: 1.5em;
184 overflow: hidden; 184 overflow: hidden;
185 word-break: break-word; 185 word-break: break-word;
186 + &.xs {
187 + margin: 0.85rem 0 0 0;
188 + }
186 } 189 }
187 .news-item-more { 190 .news-item-more {
188 border: 0.08rem solid #F56400; 191 border: 0.08rem solid #F56400;
...@@ -193,6 +196,7 @@ export default { ...@@ -193,6 +196,7 @@ export default {
193 text-align: center; 196 text-align: center;
194 font-size: 0.8rem; 197 font-size: 0.8rem;
195 transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out; 198 transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
199 + margin-top: 3rem;
196 &:hover { 200 &:hover {
197 color: #FFF; 201 color: #FFF;
198 background-color: #F56400; 202 background-color: #F56400;
...@@ -200,6 +204,9 @@ export default { ...@@ -200,6 +204,9 @@ export default {
200 // background-color: #F56400; 204 // background-color: #F56400;
201 // color: #FFF; 205 // color: #FFF;
202 } 206 }
207 + &.xs {
208 + margin-top: 1.5rem;
209 + }
203 } 210 }
204 } 211 }
205 } 212 }
......