175 lines
4.1 KiB
Vue
175 lines
4.1 KiB
Vue
<template>
|
||
<view class="message-page">
|
||
<!-- 消息列表 -->
|
||
<scroll-view scroll-y class="message-list">
|
||
<view
|
||
v-for="(item, index) in messageList"
|
||
: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>
|
||
|
||
<!-- 额外描述文本（仅第三条有） -->
|
||
<view class="desc-text" v-if="item.desc">
|
||
<text>{{ item.desc }}</text>
|
||
<text class="link-btn" @click="handleLink">立即认证✅</text>
|
||
</view>
|
||
|
||
<!-- 底部信息栏 -->
|
||
<view class="info-bar">
|
||
<view class="sender-info">
|
||
<image class="sender-icon" src="https://picsum.photos/32/32" mode="aspectFill"></image>
|
||
<text class="sender-name">{{ item.sender }}</text>
|
||
</view>
|
||
<text class="send-time">{{ item.time }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
messageList: [
|
||
{
|
||
image: "https://picsum.photos/id/1031/800/400", // 城市建筑图
|
||
title: "下班时间到了，勿浪费公司水电，请滚",
|
||
sender: "图鸟官方团队",
|
||
time: "2024-02-28 18:00",
|
||
unread: true,
|
||
desc: ""
|
||
},
|
||
{
|
||
image: "https://picsum.photos/id/1059/800/400", // 新年装饰图
|
||
title: "新年新气象，除夕快乐",
|
||
sender: "图鸟官方团队",
|
||
time: "2024-02-09 16:28",
|
||
unread: false,
|
||
desc: ""
|
||
},
|
||
{
|
||
image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
|
||
title: "企业认证，到期后企业使用将受限",
|
||
sender: "图鸟官方团队",
|
||
time: "2024-01-22 16:28",
|
||
unread: false,
|
||
desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
handleLink() {
|
||
// 点击"立即认证"的跳转逻辑
|
||
uni.showToast({ title: "跳转到认证页" })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.message-page {
|
||
height: 100vh;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/* 消息列表 */
|
||
.message-list {
|
||
height: 100vh;
|
||
padding: 40rpx 20rpx;
|
||
}
|
||
.message-item {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 25rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 图片区域 */
|
||
.img-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 320rpx;
|
||
}
|
||
.bg-img {
|
||
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;
|
||
right: 20rpx;
|
||
background-color: rgba(0,0,0,0.5);
|
||
color: #fff;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 6rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
.img-title {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
color: #fff;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
|
||
z-index: 2; /* 确保标题在遮罩上方 */
|
||
}
|
||
|
||
/* 底部信息栏 */
|
||
.info-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx;
|
||
}
|
||
.sender-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.sender-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 12rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.sender-name {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
.send-time {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 描述文本（仅第三条） */
|
||
.desc-text {
|
||
padding: 30rpx 24rpx 0 24rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
.link-btn {
|
||
color: #007bff;
|
||
}
|
||
</style> |