.jiaozhun { display: flex; padding: 0 50rpx; box-sizing: border-box; width: 100%; align-items: center; justify-content: space-between; } .jiaozhun button { height: 80rpx; line-height: 80rpx; background-color: #000; color: #fff; } .jiaozhun .input { border: 1px solid #ccc; border-radius: 20rpx; display: flex; width: 260rpx; height: 80rpx; text-align: center; } .jiaozhun .input input { height: 80rpx; line-height: 80rpx; } .jiaozhun .view { width: 200rpx; height: 80rpx; border-radius: 20rpx; background-color: #000; color: #fff; text-align: center; line-height: 80rpx; font-size: 28rpx; } .list { margin-top: 30rpx; position: fixed; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 50rpx; } .list .anniulist { width: 658rpx; margin: auto; text-align: left; font-size: 32rpx; display: flex; justify-content: space-between; } .list .anniulist .anniu { width: 30%; height: 90rpx; border-radius: 20rpx; background-color: #000; color: #fff; font-size: 32rpx; text-align: center; line-height: 90rpx; margin: 0 10rpx; } .list .fanhui { width: 658rpx; height: 90rpx; border-radius: 20rpx; background-color: #000; color: #fff; font-size: 32rpx; text-align: center; line-height: 90rpx; margin: auto; margin-top: 50rpx; } .machao { width: 658rpx; margin: auto; margin-top: 20rpx; text-align: left; font-size: 32rpx; display: flex; align-items: center; } .machao .one { width: 320rpx; } .machao input { width: 100rpx; height: 40rpx; border: 1px solid #000; margin-left: 50rpx; text-align: center; border-radius: 10rpx; } .machao view { margin-left: 20rpx; padding: 10rpx 20rpx; box-sizing: border-box; background-color: #000; color: #fff; border-radius: 10rpx; margin-right: 10rpx; } .title { font-size: 70rpx; font-weight: 600; text-align: left; width: 658rpx; margin: auto; margin-top: 30rpx; } .shuom { width: 658rpx; margin: auto; margin-top: 30rpx; text-align: left; font-size: 32rpx; } .iptbox { display: flex; align-items: center; flex-wrap: nowrap; padding: 22rpx; margin: 28rpx auto 0; width: 658rpx; height: 88rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15); border-radius: 20rpx 20rpx 20rpx 20rpx; } .iptbox .qrcode { padding-right: 20rpx; border-right: 2rpx solid #D8D8D8; } .iptbox .qrcode image { width: 54rpx; height: 54rpx; } .iptbox .ips { width: 630rpx; } .iptbox image { width: 18rpx; height: 32rpx; } .iptbox .my-placeholder { font-weight: 400; font-size: 32rpx; color: #808080; } .tit { font-size: 36rpx; font-weight: 600; color: #333; } .device-info-card { width: 658rpx; margin: 30rpx auto; background: #FFFFFF; border-radius: 20rpx; padding: 30rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); } .device-info-card .device-header { display: flex; align-items: center; padding-bottom: 30rpx; border-bottom: 1rpx solid #f0f0f0; margin-bottom: 30rpx; } .device-info-card .device-header .device-image { width: 120rpx; height: 120rpx; border-radius: 16rpx; margin-right: 24rpx; background: #f5f5f5; } .device-info-card .device-header .device-header-info { flex: 1; } .device-info-card .device-header .device-header-info .device-name { font-size: 36rpx; font-weight: 600; color: #333; margin-bottom: 16rpx; } .device-info-card .device-header .device-header-info .device-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16rpx; } .device-info-card .device-header .device-header-info .device-status-row .status-badge { padding: 8rpx 20rpx; border-radius: 20rpx; font-size: 24rpx; } .device-info-card .device-header .device-header-info .device-status-row .status-badge.status-online { background: #e6f7e6; color: #52c41a; } .device-info-card .device-header .device-header-info .device-status-row .status-badge.status-offline { background: #fff1f0; color: #ff4d4f; } .device-info-card .device-header .device-header-info .device-status-row .device-version { font-size: 24rpx; color: #999; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength { display: flex; align-items: center; gap: 8rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars { display: flex; align-items: flex-end; gap: 3rpx; height: 24rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar { width: 6rpx; background: #e0e0e0; border-radius: 2rpx; transition: all 0.3s; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar:nth-child(1) { height: 8rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar:nth-child(2) { height: 12rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar:nth-child(3) { height: 16rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar:nth-child(4) { height: 20rpx; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-bars .signal-bar.active { background: #52c41a; } .device-info-card .device-header .device-header-info .device-status-row .signal-strength .signal-value { font-size: 22rpx; color: #999; } .device-info-card .info-section { margin-bottom: 30rpx; } .device-info-card .info-section:last-child { margin-bottom: 0; } .device-info-card .info-section .section-title { font-size: 32rpx; font-weight: 600; color: #333; margin-bottom: 20rpx; padding-left: 16rpx; border-left: 6rpx solid #52c41a; } .device-info-card .info-section .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rpx; } .device-info-card .info-section .info-grid .info-item { background: #fafafa; border-radius: 12rpx; padding: 20rpx; display: flex; flex-direction: column; } .device-info-card .info-section .info-grid .info-item .info-label { font-size: 24rpx; color: #999; margin-bottom: 8rpx; } .device-info-card .info-section .info-grid .info-item .info-value { font-size: 28rpx; color: #333; font-weight: 500; word-break: break-all; width: 170rpx; } .device-info-card .info-section .info-grid .info-item .info-value-group { display: flex; flex-direction: column; } .device-info-card .info-section .info-grid .info-item .info-value-group .info-value { margin-bottom: 4rpx; } .device-info-card .info-section .info-grid .info-item .info-value-group .info-time { font-size: 22rpx; color: #999; }