73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<!--
|
|
* @Author: XHC
|
|
* @Date: 2025-05-19 15:19:14
|
|
* @LastEditors: XHC
|
|
* @LastEditTime: 2025-05-23 15:30:08
|
|
* @Description: 消息
|
|
-->
|
|
<template>
|
|
<view class="message">
|
|
<view class="notice">
|
|
<view class="notice-list" v-for="(item, index) in noticeList" :key="index">
|
|
<view class="title">
|
|
<uni-icons fontFamily="iconfont" color="#1571F3" :size="24">{{''}}</uni-icons>
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="info">{{ item.info }}</view>
|
|
<view class="bottom">
|
|
<view class="time"><uni-icons fontFamily="iconfont" color="#808185">{{''}}</uni-icons> {{ item.time }}</view>
|
|
<view class="detail"><text>查看详情</text> <uni-icons type="right" color="#0F64B9" size="20" /></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
|
|
// 通知列表
|
|
const noticeList = reactive([
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message {
|
|
.notice {
|
|
background: #fff;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
margin: 0 20rpx;
|
|
padding: 10rpx 0;
|
|
.notice-list {
|
|
margin: 20rpx;
|
|
padding: 20rpx;
|
|
background: #F1F6FD;
|
|
border-radius: 10rpx;
|
|
.title {
|
|
color: #004291;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
}
|
|
.info, .bottom {
|
|
color: #75777A;
|
|
font-size: 23rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
.info {
|
|
border-bottom: 3rpx solid #fff;
|
|
}
|
|
.bottom, .detail {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |