/* 整体容器:横向排列,间距均匀 */ .statistics { display: flex; gap: 20rpx; /* 盒子之间的间距 */ /* 通用盒子样式 */ .box { flex: 1; /* 四个盒子等分宽度 */ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 130rpx; background-color: #ffffff; border-radius: 16rpx; } /* 第一个盒子的特殊样式(蓝色背景) */ .box:first-child { flex: 1.7; background-color: $uni-theme-color; color: #ffffff; } /* 数字样式 */ .num { font-size: 38rpx; font-weight: 600; line-height: 1.2; margin-bottom: 8rpx; } /* 标签文字样式 */ .label { font-size: 24rpx; color: inherit; /* 继承父元素颜色,适配蓝色背景 */ } } /* 列表容器 */ .event-list { background-color: #f5f7fa; box-sizing: border-box; /* 通用项样式 */ /deep/ .uni-card:first-of-type { margin-top: 0 !important; } /deep/ .uni-card { padding: 0 !important; } /* 头部:图标 + 信息 + 操作 */ .event-header { display: flex; align-items: center; margin-bottom: 10rpx; } /* 图标区域(按类型区分背景色) */ .event-icon { position: relative; width: 120rpx; height: 120rpx; border-radius: 12rpx; display: flex; justify-content: center; align-items: center; margin-right: 20rpx; } .badge1 { position: absolute; top: -10rpx; right: -10rpx; width: 20rpx; height: 20rpx; background-color: #ff3b30; /* 红色徽章 */ border-radius: 20rpx; } /* 电压暂降 - 蓝色系 */ .sag .event-icon { background-color: #2563eb20; } /* 电压暂升 - 橙色系 */ .swell .event-icon { background-color: #e6a23c20; } .interrupt .event-icon { background-color: #90939920; } .event-icon image { width: 48rpx; height: 48rpx; } /* 信息区域 */ .event-info { flex: 1; } .event-title { display: flex; align-items: center; margin-bottom: 5rpx; flex-wrap: wrap; /* 适配小屏,防止文字溢出 */ } .event-id { font-size: 15px; font-weight: 700; color: #333333; margin-right: 16rpx; } /* 标签样式(按类型区分) */ .event-tag { font-size: 20rpx; padding: 0rpx 10rpx; border-radius: 8rpx; color: #ffffff; height: 38rpx; } .sag-tag { background-color: #ecf5ff; color: #2563eb; } .swell-tag { background-color: #fdf6ec; color: #e6a23c; } .interrupt-tag { background-color: #f4f4f5; color: #909399; } /* 描述文本 */ .event-desc { display: flex; flex-direction: column; gap: 8rpx; } .event-desc text { font-size: 26rpx; color: #666666; line-height: 1.2; } /* 操作按钮 */ .event-action { display: flex; justify-content: center; align-items: center; color: #999999; font-size: 40rpx; /* 点击反馈 */ touch-action: manipulation; } .event-action:active { color: #376cf3; transform: scale(0.95); } /* 详情文本 */ .event-detail { font-size: 24rpx; color: #666666; line-height: 1.5; padding-top: 10rpx; border-top: 1rpx solid #f0f0f0; word-wrap: break-word; /* 自动换行,防止长文本溢出 */ } } .smallLabel { padding: 0 20rpx 20rpx 20rpx; display: flex; align-items: center; justify-content: flex-end; .segmented-control { flex: 1; margin-right: 20rpx; height: 58rpx; } .uni-input { font-size: 24rpx; color: #2563eb; margin-right: 10rpx; } }