pet-system-fulfiller-app/pages/mine/message/system/index.vue

<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar">
            <view class="nav-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);">
                </image>
            </view>
            <text class="nav-title">系统消息</text>
            <view class="nav-right"></view>
        </view>
        <view class="nav-placeholder"></view>

        <view class="sys-msg-list">
            <view class="date-label">2023-11-01</view>

            <!-- 消息卡片 1 -->
            <view class="sys-card" @click="navToDetail">
                <view class="sys-header">
                    <text class="sys-title">账号审核通过</text>
                    <view class="red-dot"></view>
                </view>
                <view class="sys-content">
                    <text class="sys-text">恭喜，您的健康证已通过审核，现在可以开始接单了。</text>
                </view>
                <view class="sys-footer">
                    <text class="sys-time">10:00</text>
                    <view class="check-more">
                        <text>查看详情</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right.svg"></image>
                    </view>
                </view>
            </view>

            <!-- 消息卡片 2 -->
            <view class="sys-card">
                <view class="sys-header">
                    <text class="sys-title">活动奖励到账</text>
                </view>
                <view class="sys-content">
                    <text class="sys-text">您参与的“新手启航”活动奖励金 ¥50 已发放到您的账户。</text>
                </view>
                <view class="sys-footer">
                    <text class="sys-time">09:15</text>
                    <view class="check-more">
                        <text>查看详情</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right.svg"></image>
                    </view>
                </view>
            </view>

            <view class="date-label">2023-10-30</view>

            <!-- 消息卡片 3 -->
            <view class="sys-card">
                <view class="sys-header">
                    <text class="sys-title">系统维护通知</text>
                </view>
                <view class="sys-content">
                    <text class="sys-text">平台将于 11月5日 凌晨 02:00-04:00 进行系统维护，届时将无法接单。</text>
                </view>
                <view class="sys-footer">
                    <text class="sys-time">18:30</text>
                    <view class="check-more">
                        <text>查看详情</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right.svg"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        navBack() {
            uni.navigateBack();
        },
        navToDetail() {
            uni.navigateTo({
                url: '/pages/mine/message/detail/index'
            });
        }
    }
}
</script>

<style>
page {
    background-color: #F5F6FA;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;
    z-index: 100;
}

.nav-placeholder {
    height: calc(88rpx + var(--status-bar-height));
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
}

.nav-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.nav-right {
    width: 40rpx;
}

.sys-msg-list {
    padding: 20rpx 30rpx;
}

.date-label {
    text-align: center;
    font-size: 24rpx;
    color: #ccc;
    margin: 30rpx 0 20rpx;
    /* Increased top margin */
}

.sys-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.sys-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}

.sys-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}

.red-dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #FF3B30;
    border-radius: 50%;
    margin-left: 10rpx;
}

.sys-content {
    margin-bottom: 24rpx;
}

.sys-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
}

.sys-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid #f5f5f5;
    padding-top: 20rpx;
}

.sys-time {
    font-size: 24rpx;
    color: #999;
}

.check-more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
}

.arrow-icon-small {
    width: 20rpx;
    height: 20rpx;
    margin-left: 4rpx;
    opacity: 0.5;
}
</style>