历史记录暂时提交暂时提交
parent
fd5975ddd3
commit
87fe10126f
|
|
@ -7,8 +7,12 @@
|
|||
<text class="arrow">▶</text>
|
||||
</view>
|
||||
<view class="nav-right">
|
||||
<text class="nav-btn" @click="clearUnread">清除未读</text>
|
||||
<text class="divider">|</text>
|
||||
<!-- 把文字 + 图标放在同一个 nav-btn 内 -->
|
||||
<view class="nav-btn" @click="clearUnread">
|
||||
<text>清除未读</text>
|
||||
<uni-icons type="trash" size="24" color="#666" />
|
||||
</view>
|
||||
<text class="divider"> | </text>
|
||||
<text class="nav-btn" @click="openSetting">通知设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -16,7 +20,7 @@
|
|||
<!-- 系统通知提示条 -->
|
||||
<view class="notice-bar" @click="goToOpen">
|
||||
<view class="notice-left">
|
||||
<text class="notice-icon">✕</text>
|
||||
<uni-icons style="margin-right: 12rpx" type="closeempty" color="#FF6D00" size="15"/>
|
||||
<text class="notice-text">系统通知未开启，报警消息无法通知</text>
|
||||
</view>
|
||||
<view class="notice-btn">去开启</view>
|
||||
|
|
@ -25,12 +29,18 @@
|
|||
<!-- 功能入口区 -->
|
||||
<view class="func-wrap">
|
||||
<view class="func-item" @click="goToSubscribe">
|
||||
<view class="func-icon">🗨️</view>
|
||||
<view class="func-icon">
|
||||
<image style="width: 40rpx; height: 30rpx; "
|
||||
src="https://img.xiaoces.com/photos/news/new2.png"/>
|
||||
</view>
|
||||
<view class="func-title">消息订阅</view>
|
||||
<view class="func-desc">成员收不到设备/应用消息?</view>
|
||||
</view>
|
||||
<view class="func-item" @click="goToAI">
|
||||
<view class="func-icon">🤖</view>
|
||||
<view class="func-icon">
|
||||
<image style="width: 40rpx; height: 30rpx; "
|
||||
src="https://img.xiaoces.com/photos/news/ai1.png"/>
|
||||
</view>
|
||||
<view class="func-title">AI识别</view>
|
||||
<view class="func-desc">AI识别精准过滤无效报警</view>
|
||||
</view>
|
||||
|
|
@ -46,7 +56,8 @@
|
|||
>
|
||||
<view class="item-icon-wrap">
|
||||
<view class="item-icon" :style="{ backgroundColor: item.iconBg }">
|
||||
<text class="icon-text">{{ item.icon }}</text>
|
||||
<image mode="aspectFit" :style="{width: item.width,
|
||||
height: '70rpx' }" :src="item.imgUrl" />
|
||||
</view>
|
||||
<view v-if="item.badge" class="item-badge"></view>
|
||||
</view>
|
||||
|
|
@ -76,28 +87,43 @@ export default {
|
|||
return {
|
||||
messageList: [
|
||||
{
|
||||
icon: '🎬',
|
||||
iconBg: '#4285F4',
|
||||
// video111 / camera_
|
||||
imgUrl: 'https://img.xiaoces.com/photos/news/camera_.png', // 对应视频中心
|
||||
title: '视频中心',
|
||||
desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW1167...',
|
||||
time: '11:51',
|
||||
badge: true
|
||||
badge: true,
|
||||
width: '100rpx'
|
||||
},
|
||||
{
|
||||
icon: '🖥️',
|
||||
iconBg: '#4285F4',
|
||||
// device imei1 device_status3
|
||||
imgUrl: 'https://img.xiaoces.com/photos/news/device_status3.png', // 对应设备状态
|
||||
// iconBg: '#4285F4',
|
||||
title: '设备状态',
|
||||
desc: '[设备在线] 十方',
|
||||
time: '26/03/21',
|
||||
badge: true
|
||||
badge: true,
|
||||
width: '100rpx'
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
// notice_1 notice_2 notice_
|
||||
imgUrl: 'https://img.xiaoces.com/photos/news/notice_.png', // 对应系统通知
|
||||
iconBg: '#FFA726',
|
||||
title: '系统通知',
|
||||
desc: '没有新的消息',
|
||||
time: '',
|
||||
badge: false
|
||||
badge: false,
|
||||
width: '40rpx'
|
||||
},
|
||||
{
|
||||
// play1 play
|
||||
imgUrl: 'https://img.xiaoces.com/photos/news/play1.png',
|
||||
// iconBg: '#FFA726',
|
||||
title: '活动中心',
|
||||
desc: '没有新的消息',
|
||||
time: '',
|
||||
badge: false,
|
||||
width: '100rpx'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -135,7 +161,8 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.message-center-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
/* 替换为渐变背景 */
|
||||
background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
|
||||
padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
|
||||
}
|
||||
|
||||
|
|
@ -151,36 +178,39 @@ export default {
|
|||
// #ifdef H5
|
||||
padding-top: 44px;
|
||||
// #endif
|
||||
background-color: #fff;
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.nav-title { font-size: 36rpx; font-weight: 500; color: #333; }
|
||||
.arrow { font-size: 24rpx; color: #666; margin-left: 8rpx; }
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* 核心：文字+图标同行+居中 */
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 0 12rpx;
|
||||
|
||||
uni-icons {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 20rpx;
|
||||
color: #c5c3c3;
|
||||
font-size: 28rpx;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 系统通知提示条 */
|
||||
.notice-bar {
|
||||
display: flex;
|
||||
|
|
@ -193,11 +223,6 @@ export default {
|
|||
.notice-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.notice-icon {
|
||||
font-size: 24rpx;
|
||||
color: #FF6D00;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.notice-text {
|
||||
font-size: 28rpx;
|
||||
color: #E65100;
|
||||
|
|
@ -223,7 +248,6 @@ export default {
|
|||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
.func-icon {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.func-title {
|
||||
|
|
@ -243,6 +267,7 @@ export default {
|
|||
/* 消息列表 */
|
||||
.message-list {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -258,6 +283,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-text {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
|
|
@ -293,6 +319,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue