活动中心ui暂时提交

pages/news/subpages/eventCenter/index.vue

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