31 lines
3.1 KiB
Plaintext
31 lines
3.1 KiB
Plaintext
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<AppHeader title="消息中心" :back="false" />
|
||
|
|
<view class="message-tabs"><view v-for="item in tabs" :key="item" :class="tab == item ? 'message-tab active' : 'message-tab'" @click="tab=item"><text>{{ item }}</text></view></view>
|
||
|
|
<scroll-view scroll-y class="messages-scroll">
|
||
|
|
<view class="messages-content">
|
||
|
|
<view class="notice" v-for="item in notices" :key="item.title"><view :class="'notice-icon ' + item.color"><AppIcon :name="item.icon" :size="44" /></view><view class="notice-copy"><view class="notice-head"><text class="notice-title">{{ item.title }}</text><text class="notice-time">{{ item.time }}</text></view><text class="notice-desc">{{ item.desc }}</text></view><view v-if="item.unread" class="unread"></view></view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<BottomNav active="message" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="uts">
|
||
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
||
|
|
import BottomNav from '@/components/BottomNav.uvue'
|
||
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
||
|
|
const tabs = ['全部', '系统通知', '审批进度', '活动消息']
|
||
|
|
const tab = ref('全部')
|
||
|
|
const notices = [
|
||
|
|
{ icon: 'approval', color: 'blue', title: '审核进度更新', desc: '您的融资评估已完成，匹配到3个方案。', time: '10:30', unread: true },
|
||
|
|
{ icon: 'payout', color: 'purple', title: '放款成功', desc: '您的招商银行闪电贷已成功放款。', time: '09:15', unread: false },
|
||
|
|
{ icon: 'gift', color: 'orange', title: '活动通知', desc: '邀请好友赢积分活动进行中。', time: '08:42', unread: false },
|
||
|
|
{ icon: 'system-bell', color: 'green', title: '系统通知', desc: '隐私政策已更新，请及时查看。', time: '昨天', unread: false }
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.message-tabs { height: 88rpx; flex-direction: row; background-color: #fff; border-bottom: 1rpx solid #e6edf6; padding: 0 18rpx; }.message-tab { flex: 1; align-items: center; justify-content: center; color: #7b8799; font-size: 22rpx; }.message-tab.active { color: #0868f7; font-weight: 700; border-bottom: 4rpx solid #0868f7; }.messages-scroll { height: calc(100vh - var(--status-bar-height) - 314rpx); }.messages-content { padding: 10rpx 28rpx 150rpx; }.notice { min-height: 150rpx; background-color: #fff; border-bottom: 1rpx solid #e8eef6; flex-direction: row; align-items: center; position: relative; }.notice-icon { width: 78rpx; height: 78rpx; border-radius: 25rpx; align-items: center; justify-content: center; color: #fff; font-size: 24rpx; font-weight: 800; margin-right: 20rpx; }.blue { background-color: #3b7df1; }.purple { background-color: #b74ae8; }.orange { background-color: #ff8431; }.green { background-color: #18ae82; }.notice-copy { flex: 1; }.notice-head { flex-direction: row; justify-content: space-between; align-items: center; }.notice-title { font-size: 27rpx; font-weight: 700; }.notice-time { color: #9ca7b7; font-size: 19rpx; }.notice-desc { color: #778499; font-size: 22rpx; margin-top: 11rpx; }.unread { position: absolute; width: 13rpx; height: 13rpx; border-radius: 50%; background-color: #ff4d4f; right: 2rpx; top: 40rpx; }
|
||
|
|
</style>
|