hookehuyr

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

<!--
* @Date: 2024-10-17 09:22:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 16:54:50
* @LastEditTime: 2024-11-11 11:20:45
* @FilePath: /hager/src/views/about/index.vue
* @Description: 文件描述
-->
......@@ -64,7 +64,7 @@
<p class="e xs">{{ item.e_title }}</p>
</div>
<div class="introduce" v-clamp="3">{{ item.content }}</div>
<div class="more">
<div class="more xs">
<div class="btn" @click="goTo(item.link)">MORE</div>
</div>
</div>
......@@ -198,6 +198,9 @@ export default {
.more {
position: absolute; /* 固定在容器底部 */
bottom: 1rem;
&.xs {
bottom: 2.5rem;
}
.btn {
background-color: #F56400;
width: 8rem;
......
<!--
* @Date: 2024-10-18 12:05:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 17:56:53
* @LastEditTime: 2024-11-11 11:25:17
* @FilePath: /hager/src/views/news/index.vue
* @Description: 文件描述
-->
......@@ -38,7 +38,7 @@
<div class="news-item-title">{{ item.post_title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
<p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
<div @click="goToNew(item)" class="news-item-more">MORE</div>
</div>
</div>
</div>
......@@ -48,8 +48,8 @@
<div class="news-item">
<div class="news-item-title xs">{{ item.post_title }}</div>
<p class="news-item-sub">{{ item.post_title_en }}</p>
<p class="news-item-content">{{ item.post_excerpt }}</p>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
<p class="news-item-content xs">{{ item.post_excerpt }}</p>
<div @click="goToNew(item)" class="news-item-more xs">MORE</div>
</div>
</div>
</div>
......@@ -183,6 +183,9 @@ export default {
line-height: 1.5em;
overflow: hidden;
word-break: break-word;
&.xs {
margin: 0.85rem 0 0 0;
}
}
.news-item-more {
border: 0.08rem solid #F56400;
......@@ -193,6 +196,7 @@ export default {
text-align: center;
font-size: 0.8rem;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
margin-top: 3rem;
&:hover {
color: #FFF;
background-color: #F56400;
......@@ -200,6 +204,9 @@ export default {
// background-color: #F56400;
// color: #FFF;
}
&.xs {
margin-top: 1.5rem;
}
}
}
}
......