/* 设备卡片组件样式 */ .device-card { background-color: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); display: flex; flex-direction: row; align-items: center; } .device-main { flex: 1; display: flex; flex-direction: column; } .device-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 16rpx; } .device-name { font-size: 32rpx; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-tag { display: inline-block; padding: 4rpx 16rpx; border-radius: 4rpx; font-size: 22rpx; margin-left: 16rpx; flex-shrink: 0; } .status-tag.online { background-color: #f6ffed; color: #52c41a; border: 1rpx solid #b7eb8f; } .status-tag.offline { background-color: #fff7e6; color: #fa8c16; border: 1rpx solid #ffd591; } .device-info { display: flex; flex-direction: column; } .info-row { display: flex; flex-direction: row; margin-bottom: 8rpx; } .info-label { font-size: 24rpx; color: #999; width: 100rpx; } .info-value { font-size: 24rpx; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; margin-left: 20rpx; height: 120rpx; } .device-switch { transform: scale(0.8); margin-bottom: 12rpx; } .delete-btn { display: flex; align-items: center; justify-content: center; min-width: 100rpx; height: 56rpx; padding: 0 20rpx; margin: 0; font-size: 24rpx; color: #ff4d4f; background-color: #fff1f0; border: 1rpx solid #ffa39e; border-radius: 28rpx; line-height: 56rpx; text-align: center; transition: all 0.2s ease; /* 重置微信小程序 button 默认样式 */ box-sizing: border-box; overflow: visible; } .delete-btn::after { border: none; } .delete-btn:active { background-color: #ff4d4f; color: #fff; border-color: #ff4d4f; }