root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

活动中心ui暂时提交

feasure-livedata
lld 2026-03-27 00:22:17 +08:00
parent 6a85e3673c
commit d7478792fe
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/news/subpages/eventCenter/index.vue
View File

@ -7,9 +7,11 @@
:key="index" :key="index"
class="message-item" class="message-item"
> >
<!-- 图片区域（带未读角标） --> <!-- 图片区域（带未读角标 + 渐变遮罩） -->
<view class="img-box"> <view class="img-box">
<image class="bg-img" :src="item.image" mode="aspectFill"></image> <image class="bg-img" :src="item.image" mode="aspectFill"></image>
<!-- 新增：底部渐变遮罩层 -->
<view class="gradient-mask"></view>
<view class="unread-tag" v-if="item.unread">未读</view> <view class="unread-tag" v-if="item.unread">未读</view>
<text class="img-title">{{ item.title }}</text> <text class="img-title">{{ item.title }}</text>
</view> </view>
@ -89,7 +91,7 @@ export default {
.message-item { .message-item {
background-color: #fff; background-color: #fff;
border-radius: 12rpx; border-radius: 12rpx;
margin-bottom: 30rpx; margin-bottom: 25rpx;
overflow: hidden; overflow: hidden;
} }
@ -103,6 +105,16 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* 新增：底部渐变遮罩 */
.gradient-mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120rpx; /* 遮罩高度，和标题区域对齐 */
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
pointer-events: none; /* 不影响点击 */
}
.unread-tag { .unread-tag {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
@ -121,6 +133,7 @@ export default {
font-size: 34rpx; font-size: 34rpx;
font-weight: 500; font-weight: 500;
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5); text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
z-index: 2; /* 确保标题在遮罩上方 */
} }
/* 底部信息栏 */ /* 底部信息栏 */