xzzn/movecheck
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:日志报警页面更新

Browse Source
This commit is contained in:
吉浩茹
2025-10-01 04:07:37 +08:00
parent deb4d99393
commit 5f20cc7cd3
7 changed files with 833 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
src/components/AlarmRecord.vue
View File

@ -25,8 +25,8 @@
<view class="table-cell header-cell type-column">种类</view>
<view class="table-cell header-cell time-column">时间</view>
<view class="table-cell header-cell level-column">级别</view>
<view class="table-cell header-cell action-column">处置</view>
<view class="table-cell header-cell action-time-column">时间</view>
<!-- <view class="table-cell header-cell action-column">处置</view> -->
<!-- <view class="table-cell header-cell action-time-column">时间</view> -->
</view>
<!-- 表格内容 -->
@ -55,11 +55,12 @@
<view class="table-cell content-column">{{ alarm.content }}</view>
<view class="table-cell type-column">{{ alarm.type }}</view>
<view class="table-cell time-column">{{ alarm.time }}</view>
<view class="table-cell level-column" :class="getLevelClass(alarm.level)">
<!-- <view class="table-cell level-column" :class="getLevelClass(alarm.level)"> -->
<view class="table-cell level-column">
{{ alarm.level }}
</view>
<view class="table-cell action-column">{{ alarm.action }}</view>
<view class="table-cell action-time-column">{{ alarm.actionTime }}</view>
<!-- <view class="table-cell action-column">{{ alarm.action }}</view> -->
<!-- <view class="table-cell action-time-column">{{ alarm.actionTime }}</view> -->
</view>
</template>
@ -73,6 +74,17 @@
<text class="table-empty-text">暂无数据</text>
</view>
<!-- 加载更多提示 -->
<view class="load-more-container" v-if="isLoadingMore">
<view class="load-more-spinner"></view>
<text class="load-more-text">正在加载更多...</text>
</view>
<!-- 没有更多数据提示 -->
<!-- <view class="no-more-container" v-if="!hasMoreData && alarmList.length > 0 && !isLoadingMore">
<text class="no-more-text">已加载全部数据</text>
</view> -->
<!-- 底部间距，确保最后一条记录完全显示 -->
<view class="table-bottom-spacing"></view>
</scroll-view>
@ -84,6 +96,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { alertApi, eventApi } from '@/utils/api.js';
// 报警数据
const alarmList = ref([]);
@ -91,6 +104,12 @@ const isLoading = ref(false);
const isConnected = ref(false);
const hasInitialized = ref(false);
// 分页相关
const currentPage = ref(0);
const pageSize = ref(20);
const hasMoreData = ref(true);
const isLoadingMore = ref(false);
// 滚动相关
const scrollTop = ref(0);
const isScrolling = ref(false);
@ -100,167 +119,107 @@ const isScrolling = ref(false);
// MQTT报警服务接口（预留）
const mqttAlarmService = {
// 连接MQTT服务器
connect: async () => {
console.log('MQTT报警服务连接中...');
try {
// 模拟连接延迟
await new Promise(resolve => setTimeout(resolve, 1000));
isConnected.value = true;
console.log('MQTT报警服务连接成功');
return Promise.resolve();
} catch (error) {
console.error('MQTT报警连接失败:', error);
isConnected.value = false;
return Promise.reject(error);
}
},
// connect: async () => {
// console.log('MQTT报警服务连接中...');
// try {
// // 模拟连接延迟
// await new Promise(resolve => setTimeout(resolve, 1000));
// isConnected.value = true;
// console.log('MQTT报警服务连接成功');
// return Promise.resolve();
// } catch (error) {
// console.error('MQTT报警连接失败:', error);
// isConnected.value = false;
// return Promise.reject(error);
// }
// },
// 订阅报警数据
subscribeAlarmData: () => {
console.log('订阅系统报警数据');
// 这里后期会实现真实的MQTT报警订阅
return Promise.resolve();
},
// subscribeAlarmData: () => {
// console.log('订阅系统报警数据');
// // 这里后期会实现真实的MQTT报警订阅
// return Promise.resolve();
// },
// 获取历史报警记录
getHistoryAlarms: async (limit = 50) => {
console.log(`获取历史报警记录，限制${limit}条`);
// 获取历史报警记录（分页）
getHistoryAlarms: async (page = 0, size = 20, isLoadMore = false) => {
console.log(`获取历史报警记录，页码:${page}, 每页:${size}条`);
try {
isLoading.value = true;
hasInitialized.value = true;
// 模拟请求延迟
await new Promise(resolve => setTimeout(resolve, 800));
if (!isLoadMore) {
isLoading.value = true;
hasInitialized.value = true;
} else {
isLoadingMore.value = true;
}
// 模拟报警数据
const mockAlarms = [
{
content: '湿度45%超标',
type: '参数超标',
time: '2025-9-3-12:01',
level: 'A',
action: '恢复',
actionTime: '2025-9-3-13:11'
},
{
content: '温度28℃过高',
type: '参数超标',
time: '2025-9-3-11:45',
level: 'B',
action: '调整',
actionTime: '2025-9-3-12:30'
},
{
content: '洁净度异常',
type: '环境异常',
time: '2025-9-3-11:20',
level: 'A',
action: '清理',
actionTime: '2025-9-3-11:50'
},
{
content: '设备通讯中断',
type: '设备故障',
time: '2025-9-3-10:55',
level: 'C',
action: '重启',
actionTime: '2025-9-3-11:05'
},
{
content: '压力值偏低',
type: '参数异常',
time: '2025-9-3-10:30',
level: 'B',
action: '检查',
actionTime: '2025-9-3-10:45'
},
{
content: '电源电压不稳',
type: '电气故障',
time: '2025-9-3-10:10',
level: 'A',
action: '更换',
actionTime: '2025-9-3-10:25'
},
{
content: '传感器数据异常',
type: '设备异常',
time: '2025-9-3-09:50',
level: 'B',
action: '校准',
actionTime: '2025-9-3-10:00'
},
{
content: '网络连接超时',
type: '通讯故障',
time: '2025-9-3-09:30',
level: 'C',
action: '重连',
actionTime: '2025-9-3-09:35'
},
{
content: '内存使用率过高',
type: '系统异常',
time: '2025-9-3-09:15',
level: 'B',
action: '清理',
actionTime: '2025-9-3-09:20'
},
{
content: '磁盘空间不足',
type: '存储异常',
time: '2025-9-3-09:00',
level: 'A',
action: '扩容',
actionTime: '2025-9-3-09:10'
},
{
content: 'CPU温度过高',
type: '硬件故障',
time: '2025-9-3-08:45',
level: 'A',
action: '散热',
actionTime: '2025-9-3-08:50'
},
{
content: '数据库连接失败',
type: '数据异常',
time: '2025-9-3-08:30',
level: 'B',
action: '修复',
actionTime: '2025-9-3-08:35'
},
{
content: '配置文件损坏',
type: '配置异常',
time: '2025-9-3-08:15',
level: 'C',
action: '恢复',
actionTime: '2025-9-3-08:20'
},
{
content: '服务进程异常',
type: '进程故障',
time: '2025-9-3-08:00',
level: 'B',
action: '重启',
actionTime: '2025-9-3-08:05'
},
{
content: '日志文件过大',
type: '存储异常',
time: '2025-9-3-07:45',
level: 'C',
action: '压缩',
actionTime: '2025-9-3-07:50'
// 调用分页获取告警接口
const response = await alertApi.getList({
page: page,
size: size
});
console.log('📊 获取告警数据响应:', response);
// 处理响应数据
if (response && response.data) {
const newAlarms = response.data.map(item => ({
content: item.content || '未知报警',
type: item.category || '未知类型',
time: formatDateTime(item.alertTime) || '未知时间',
level: mapLevelToDisplay(item.level) || 'C',
action: item.action || '待处理',
actionTime: formatDateTime(item.actionTime) || '未知时间'
}));
if (isLoadMore) {
// 加载更多时追加数据
alarmList.value = [...alarmList.value, ...newAlarms];
} else {
// 首次加载时替换数据
alarmList.value = newAlarms;
}
];
// 判断是否还有更多数据
hasMoreData.value = newAlarms.length === size;
currentPage.value = page;
// 保存查询事件（只在首次加载时保存）
if (!isLoadMore) {
await createQueryEvent('success', newAlarms.length);
}
} else {
console.warn('⚠️ 响应数据格式异常:', response);
if (!isLoadMore) {
alarmList.value = [];
}
hasMoreData.value = false;
// 保存查询事件（无数据）
if (!isLoadMore) {
await createQueryEvent('empty', 0);
}
}
alarmList.value = mockAlarms;
isLoading.value = false;
return Promise.resolve(mockAlarms);
isLoadingMore.value = false;
return Promise.resolve(response);
} catch (error) {
console.error('获取历史报警记录失败:', error);
console.error('❌ 获取历史报警记录失败:', error);
isLoading.value = false;
isLoadingMore.value = false;
// 保存查询事件（错误）
if (!isLoadMore) {
await createQueryEvent('error', 0);
}
// 显示错误提示
uni.showToast({
title: '获取报警记录失败',
icon: 'error',
duration: 2000
});
return Promise.reject(error);
}
},
@ -367,6 +326,39 @@ const mqttAlarmService = {
}
};
// 映射报警级别到显示格式
const mapLevelToDisplay = (level) => {
const levelMap = {
'高危': 'A',
'中危': 'B',
'低危': 'C',
'high': 'A',
'medium': 'B',
'low': 'C'
};
return levelMap[level] || 'C';
};
// 格式化时间
const formatDateTime = (dateString) => {
if (!dateString) return '未知时间';
try {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (error) {
console.error('时间格式化失败:', error);
return dateString; // 如果格式化失败，返回原始字符串
}
};
// 获取级别样式类
const getLevelClass = (level) => {
switch (level) {
@ -400,8 +392,19 @@ const onScroll = (e) => {
};
const onScrollToLower = () => {
console.log('滚动到底部');
// 可以在这里添加加载更多数据的逻辑
console.log('滚动到底部，尝试加载更多数据');
// 如果正在加载或没有更多数据，则不处理
if (isLoadingMore.value || !hasMoreData.value) {
console.log('正在加载中或无更多数据，跳过');
return;
}
// 加载下一页数据
const nextPage = currentPage.value + 1;
console.log(`📄 加载第${nextPage}页数据`);
mqttAlarmService.getHistoryAlarms(nextPage, pageSize.value, true);
};
// 滚动到顶部
@ -442,16 +445,78 @@ const stopRealtimeAlarm = () => {
}
};
// 创建查询事件
const createQueryEvent = async (status, dataCount) => {
try {
const currentTime = formatDateTime(new Date().toISOString())
const queryEvent = {
eventType: "报警记录查询",
eventTime: currentTime,
status: getEventStatus(status),
description: getEventDescription(status, dataCount),
deviceId: "ALARM_QUERY_001"
}
console.log('📤 提交报警查询事件:', queryEvent)
const response = await eventApi.create(queryEvent)
console.log('✅ 报警查询事件创建成功:', response)
} catch (error) {
console.error('❌ 报警查询事件创建失败:', error)
}
};
// 获取事件状态
const getEventStatus = (status) => {
const statusMap = {
'success': '已完成',
'empty': '已完成',
'error': '失败'
};
return statusMap[status] || '未知';
};
// 获取事件描述
const getEventDescription = (status, dataCount) => {
const descriptions = {
'success': `成功查询到${dataCount}条报警记录数据`,
'empty': '查询报警记录，但未找到数据',
'error': '查询报警记录时发生错误'
};
return descriptions[status] || '未知查询状态';
};
// 刷新数据方法
const refreshData = async () => {
console.log('🔄 刷新报警记录数据')
try {
// 重置分页状态
currentPage.value = 0;
hasMoreData.value = true;
alarmList.value = [];
// 重新获取第一页数据
await mqttAlarmService.getHistoryAlarms(0, pageSize.value, false);
} catch (error) {
console.error('❌ 刷新数据失败:', error);
}
};
// 暴露方法给父组件
defineExpose({
refreshData
});
// 组件生命周期
onMounted(async () => {
try {
// 连接MQTT并初始化
await mqttAlarmService.connect();
await mqttAlarmService.subscribeAlarmData();
await mqttAlarmService.getHistoryAlarms();
// await mqttAlarmService.connect();
// await mqttAlarmService.subscribeAlarmData();
await mqttAlarmService.getHistoryAlarms(0, pageSize.value, false);
// 开始实时报警获取
startRealtimeAlarm();
// startRealtimeAlarm();
} catch (error) {
console.error('报警系统初始化失败:', error);
uni.showToast({
@ -838,4 +903,44 @@ onUnmounted(() => {
font-size: 30rpx;
}
}
// 加载更多样式
.load-more-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30rpx 20rpx;
gap: 15rpx;
background-color: #ffffff;
}
.load-more-spinner {
width: 40rpx;
height: 40rpx;
border: 3rpx solid #e8eaed;
border-top: 3rpx solid #5f6368;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.load-more-text {
font-size: 24rpx;
color: #5f6368;
font-weight: 400;
}
.no-more-container {
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx 20rpx;
background-color: #ffffff;
}
.no-more-text {
font-size: 24rpx;
color: #9aa0a6;
font-weight: 400;
}
</style>

371
src/components/SystemLog.vue
View File

@ -67,6 +67,17 @@
<text class="table-empty-text">暂无数据</text>
</view>
<!-- 加载更多提示 -->
<view class="load-more-container" v-if="isLoadingMore">
<view class="load-more-spinner"></view>
<text class="load-more-text">正在加载更多日志...</text>
</view>
<!-- 没有更多数据提示 -->
<view class="no-more-container" v-if="!hasMoreData && logList.length > 0 && !isLoadingMore">
<text class="no-more-text">已加载全部数据</text>
</view>
<!-- 底部间距，确保最后一条记录完全显示 -->
<view class="table-bottom-spacing"></view>
</scroll-view>
@ -78,6 +89,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { eventApi } from '@/utils/api.js';
// 日志数据
const logList = ref([]);
@ -85,12 +97,50 @@ const isLoading = ref(false);
const isConnected = ref(false);
const hasInitialized = ref(false);
// 分页相关
const currentPage = ref(0);
const pageSize = ref(20);
const hasMoreData = ref(true);
const isLoadingMore = ref(false);
// 滚动相关
const scrollTop = ref(0);
const isScrolling = ref(false);
// 移除空行占位逻辑，没有数据时只显示"暂无数据"
// 状态映射函数
const mapStatusToDisplay = (status) => {
const statusMap = {
'已完成': '正常',
'进行中': '进行中',
'失败': '异常',
'错误': '异常',
'成功': '正常',
'正常': '正常',
'异常': '异常'
};
return statusMap[status] || status || '未知';
};
// 时间格式化函数
const formatDateTime = (dateString) => {
if (!dateString) return '未知时间';
try {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (error) {
console.error('时间格式化失败:', error);
return dateString;
}
};
// MQTT日志服务接口（预留）
const mqttLogService = {
// 连接MQTT服务器
@ -116,190 +166,54 @@ const mqttLogService = {
return Promise.resolve();
},
// 获取历史日志
getHistoryLogs: async (limit = 50) => {
console.log(`获取历史日志，限制${limit}条`);
// 获取历史日志（分页）
getHistoryLogs: async (page = 0, size = 20, isLoadMore = false) => {
console.log(`📄 加载第${page}页数据，每页${size}条`);
try {
isLoading.value = true;
if (!isLoadMore) {
isLoading.value = true;
} else {
isLoadingMore.value = true;
}
hasInitialized.value = true;
// 模拟请求延迟
await new Promise(resolve => setTimeout(resolve, 800));
// 模拟日志数据
const mockLogs = [
{
event: '开机',
time: '2025-9-3-12:01',
status: '正常'
},
{
event: '报警',
time: '2025-9-3-12:01',
status: '异常'
},
{
event: '系统启动',
time: '2025-9-3-11:58',
status: '正常'
},
{
event: '温度检测',
time: '2025-9-3-11:55',
status: '正常'
},
{
event: '湿度异常',
time: '2025-9-3-11:52',
status: '异常'
},
{
event: '设备自检',
time: '2025-9-3-11:50',
status: '正常'
},
{
event: '网络连接',
time: '2025-9-3-11:48',
status: '正常'
},
{
event: '参数校准',
time: '2025-9-3-11:45',
status: '正常'
},
{
event: '数据备份',
time: '2025-9-3-11:40',
status: '正常'
},
{
event: '系统更新',
time: '2025-9-3-11:35',
status: '正常'
},
{
event: '安全检查',
time: '2025-9-3-11:30',
status: '正常'
},
{
event: '性能监控',
time: '2025-9-3-11:25',
status: '正常'
},
{
event: '日志清理',
time: '2025-9-3-11:20',
status: '正常'
},
{
event: '配置更新',
time: '2025-9-3-11:15',
status: '正常'
},
{
event: '服务重启',
time: '2025-9-3-11:10',
status: '正常'
},
{
event: '数据库连接',
time: '2025-9-3-11:05',
status: '正常'
},
{
event: '缓存清理',
time: '2025-9-3-11:00',
status: '正常'
},
{
event: '定时任务',
time: '2025-9-3-10:55',
status: '正常'
},
{
event: '内存检查',
time: '2025-9-3-10:50',
status: '正常'
},
{
event: '磁盘检查',
time: '2025-9-3-10:45',
status: '正常'
}
];
// 调用事件API获取分页数据
const response = await eventApi.getList({ page: page, size: size });
logList.value = mockLogs;
isLoading.value = false;
return Promise.resolve(mockLogs);
} catch (error) {
console.error('获取历史日志失败:', error);
isLoading.value = false;
return Promise.reject(error);
}
},
// 获取实时日志
getRealtimeLogs: async () => {
console.log('获取实时日志');
try {
// 模拟实时日志数据
const events = ['温度监测', '湿度检测', '设备巡检', '数据同步', '状态上报'];
const statuses = ['正常', '异常', '警告'];
// 将API数据转换为日志格式
const newLogs = response.data.map(item => ({
event: item.eventType || '未知事件',
time: formatDateTime(item.eventTime) || '未知时间',
status: mapStatusToDisplay(item.status) || '未知'
}));
const newLog = {
event: events[Math.floor(Math.random() * events.length)],
time: new Date().toLocaleString('zh-CN', {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).replace(/\//g, '-').replace(', ', '-'),
status: statuses[Math.floor(Math.random() * statuses.length)]
};
// 添加到日志列表顶部
logList.value.unshift(newLog);
// 限制日志数量，保持最新的50条
if (logList.value.length > 50) {
logList.value = logList.value.slice(0, 50);
if (isLoadMore) {
// 加载更多时追加数据
logList.value = [...logList.value, ...newLogs];
} else {
// 首次加载时替换数据
logList.value = newLogs;
}
// 自动滚动到顶部显示最新日志
setTimeout(() => {
scrollToTop();
}, 100);
// 更新分页状态
currentPage.value = page;
hasMoreData.value = newLogs.length === size; // 如果返回的数据少于请求的数量，说明没有更多数据
console.log(`✅ 第${page}页数据加载完成，共${newLogs.length}条`);
return Promise.resolve(newLog);
} catch (error) {
console.error('获取实时日志失败:', error);
return Promise.reject(error);
console.error('❌ 获取历史日志失败:', error);
if (!isLoadMore) {
// 首次加载失败时显示空数据
logList.value = [];
}
} finally {
isLoading.value = false;
isLoadingMore.value = false;
}
},
// 清空日志
clearLogs: async () => {
console.log('清空日志');
try {
// 模拟清空操作
await new Promise(resolve => setTimeout(resolve, 300));
logList.value = [];
uni.showToast({
title: '日志已清空',
icon: 'success'
});
return Promise.resolve();
} catch (error) {
console.error('清空日志失败:', error);
uni.showToast({
title: '清空失败',
icon: 'error'
});
return Promise.reject(error);
}
},
// 断开连接
disconnect: () => {
@ -342,8 +256,15 @@ const onScroll = (e) => {
};
const onScrollToLower = () => {
console.log('滚动到底部');
// 可以在这里添加加载更多数据的逻辑
console.log('📜 滚动到底部，触发加载更多');
if (isLoadingMore.value || !hasMoreData.value) {
console.log('⏸️ 正在加载中或没有更多数据，跳过加载');
return;
}
const nextPage = currentPage.value + 1;
console.log(`📄 开始加载第${nextPage}页数据`);
mqttLogService.getHistoryLogs(nextPage, pageSize.value, true);
};
// 滚动到顶部
@ -351,49 +272,15 @@ const scrollToTop = () => {
scrollTop.value = scrollTop.value === 0 ? 1 : 0;
};
// 滚动到底部
const scrollToBottom = () => {
// 使用nextTick确保DOM更新完成
nextTick(() => {
// 计算滚动到底部的位置
const scrollHeight = logList.value.length * 80; // 假设每行80rpx
scrollTop.value = scrollHeight + 100; // 额外100rpx确保完全滚动到底部
});
};
// 定时获取实时日志
let realtimeTimer = null;
const startRealtimeLog = () => {
if (realtimeTimer) return;
realtimeTimer = setInterval(() => {
if (isConnected.value && !isLoading.value) {
// 30%概率生成新日志
if (Math.random() < 0.3) {
mqttLogService.getRealtimeLogs();
}
}
}, 5000); // 每5秒检查一次
};
const stopRealtimeLog = () => {
if (realtimeTimer) {
clearInterval(realtimeTimer);
realtimeTimer = null;
}
};
// 组件生命周期
onMounted(async () => {
try {
// 连接MQTT并初始化
await mqttLogService.connect();
await mqttLogService.subscribeLogData();
await mqttLogService.getHistoryLogs();
// 开始实时日志获取
startRealtimeLog();
// await mqttLogService.connect();
// await mqttLogService.subscribeLogData();
await mqttLogService.getHistoryLogs(0, pageSize.value, false);
} catch (error) {
console.error('日志系统初始化失败:', error);
uni.showToast({
@ -403,8 +290,28 @@ onMounted(async () => {
}
});
// 刷新数据方法
const refreshData = async () => {
console.log('🔄 刷新系统日志数据')
try {
// 重置分页状态
currentPage.value = 0;
hasMoreData.value = true;
logList.value = [];
// 重新获取第一页数据
await mqttLogService.getHistoryLogs(0, pageSize.value, false);
} catch (error) {
console.error('❌ 刷新数据失败:', error);
}
};
// 暴露方法给父组件
defineExpose({
refreshData
});
onUnmounted(() => {
stopRealtimeLog();
mqttLogService.disconnect();
// 清理滚动定时器
@ -759,4 +666,44 @@ onUnmounted(() => {
font-size: 30rpx;
}
}
/* 加载更多样式 */
.load-more-container {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx;
gap: 20rpx;
}
.load-more-spinner {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #f3f3f3;
border-top: 4rpx solid #3f51b5;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.load-more-text {
font-size: 28rpx;
color: #666;
}
.no-more-container {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx;
}
.no-more-text {
font-size: 28rpx;
color: #999;
}
</style>