/* 连接设备页 —— 三态(idle / searching / found / empty)共用 */ .connected-device { width: 100%; height: 100%; padding: 48rpx 30rpx 0; box-sizing: border-box; .ripple { width: 300rpx; height: 300rpx; border-radius: 50%; margin: 0 auto 48rpx; background-color: red; } .title { color: #252535; width: 100%; height: 36rpx; font-size: 36rpx; font-weight: bold; line-height: 36rpx; text-align: center; margin-bottom: 22rpx; } .sub-title { color: #808080; width: 100%; height: 30rpx; font-size: 30rpx; text-align: center; line-height: 30rpx; margin-bottom: 40rpx; } .search-btn { color: #FFFFFF; width: 580rpx; height: 88rpx; font-size: 32rpx; font-weight: bold; text-align: center; line-height: 88rpx; border-radius: 44rpx; margin: 0 auto 32rpx; background-color: #1385FA; } .help { width: 100%; height: 30rpx; text-align: center; line-height: 30rpx; margin-bottom: 60rpx; .help-text { color: #808080; font-size: 30rpx; line-height: 30rpx; margin-right: 8rpx; } .help-link { color: #1385FA; font-size: 30rpx; line-height: 30rpx; } } .search-device { width: 100%; .search-device-header { width: 100%; height: 32rpx; display: flex; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 38rpx; .search-device-title { color: #252535; height: 32rpx; font-size: 32rpx; font-weight: bold; line-height: 32rpx; } .search-device-count { height: 32rpx; display: flex; flex-wrap: nowrap; .count-text { color: #808080; height: 32rpx; font-size: 28rpx; line-height: 32rpx; } .count-num { color: #1385FA; height: 32rpx; font-size: 28rpx; font-weight: bold; line-height: 32rpx; padding: 0 6rpx; } } } .empty { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 160rpx; .empty-image { width: 193rpx; height: 138rpx; margin-bottom: 40rpx; background-color: #F5F5F5; } .empty-text { color: #808080; width: 100%; height: 30rpx; font-size: 30rpx; line-height: 30rpx; text-align: center; } } .device-list { width: 100%; display: flex; flex-direction: column; .device-card { width: 100%; height: 150rpx; display: flex; align-items: center; padding: 0 30rpx; background-color: #FFFFFF; border: 2rpx solid #E6E6EA; border-radius: 16rpx; box-sizing: border-box; margin-bottom: 24rpx; .card-icon { width: 90rpx; height: 90rpx; overflow: hidden; border-radius: 24rpx; margin-right: 24rpx; background-color: red; } .card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; .card-name { color: #252535; font-size: 32rpx; font-weight: bold; height: 32rpx; line-height: 32rpx; } .card-status { margin-top: 18rpx; display: flex; align-items: center; .card-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background-color: #2AC79F; margin-right: 15rpx; } .card-status-text { color: #2AC79F; height: 28rpx; font-size: 28rpx; font-weight: 500; line-height: 28rpx; } } } .card-btn-primary { color: #FFFFFF; font-size: 24rpx; font-weight: 500; width: 88rpx; height: 48rpx; line-height: 48rpx; text-align: center; border-radius: 8rpx; background-color: #2AC79F; } .card-btn-danger { color: #F24439; font-size: 24rpx; font-weight: 500; width: 120rpx; height: 48rpx; line-height: 44rpx; text-align: center; border: 2rpx solid #F24439; border-radius: 8rpx; box-sizing: border-box; } } } } } /* 三层同心圆动画占位(搜索中态后续接入波纹动画) */ //.ripple { ///* 主按钮:开始搜索 / 重新搜索 */ //.searchBtn { // margin-top: 40rpx; // width: 580rpx; // height: 88rpx; // line-height: 88rpx; // border-radius: 44rpx; // background-color: #1385FA; // color: #FFFFFF; // font-size: 32rpx; // font-weight: 700; // text-align: center; //} // ///* 帮助行 */ // ///* 搜索结果区:左标题 + 右计数 */ //.resultHeader { // margin-top: 59rpx; // width: 689rpx; // display: flex; // justify-content: space-between; // align-items: center; // // &__title { // font-size: 32rpx; // font-weight: 700; // color: #252535; // line-height: 32rpx; // } // // &__count { // display: flex; // align-items: center; // } // // &__countText { // font-size: 28rpx; // color: #808080; // line-height: 28rpx; // } // // &__countNum { // font-size: 28rpx; // font-weight: 500; // color: #1385FA; // line-height: 28rpx; // } //} // ///* 空状态:暂未搜索到设备 */ //.empty { // margin-top: 199rpx; // display: flex; // flex-direction: column; // align-items: center; // // &__image { // width: 193rpx; // height: 138rpx; // background-color: #F5F5F5; // border-radius: 16rpx; // } // // &__text { // margin-top: 40rpx; // font-size: 30rpx; // color: #808080; // line-height: 30rpx; // } //} // ///* 已连接设备卡片 */ //.connectedCard { // margin-top: 39rpx; // width: 690rpx; // height: 150rpx; // display: flex; // align-items: center; // background-color: #FFFFFF; // border: 2rpx solid #E6E6EA; // border-radius: 16rpx; // box-sizing: border-box; // padding: 0 30rpx; // // &__info { // flex: 1; // margin-left: 24rpx; // display: flex; // flex-direction: column; // justify-content: center; // } // // &__name { // font-size: 32rpx; // font-weight: 500; // color: #252535; // line-height: 32rpx; // } // // &__status { // margin-top: 16rpx; // display: flex; // align-items: center; // } // // &__dot { // width: 12rpx; // height: 12rpx; // border-radius: 50%; // background-color: #2AC79F; // margin-right: 15rpx; // } // // &__statusText { // font-size: 28rpx; // font-weight: 500; // color: #2AC79F; // line-height: 28rpx; // } // // &__btn { // width: 120rpx; // height: 48rpx; // line-height: 44rpx; // text-align: center; // border: 2rpx solid #F24439; // border-radius: 8rpx; // color: #F24439; // font-size: 24rpx; // font-weight: 500; // box-sizing: border-box; // } //} // ///* 未连接设备列表 */ //.deviceList { // margin-top: 24rpx; // width: 690rpx; // display: flex; // flex-direction: column; //} // ///* 设备卡片(已连接 + 未连接通用图标样式) */ //.deviceCard { // width: 690rpx; // height: 150rpx; // display: flex; // align-items: center; // background-color: #FFFFFF; // border: 2rpx solid #E6E6EA; // border-radius: 16rpx; // box-sizing: border-box; // padding: 0 30rpx; // margin-bottom: 24rpx; // // &__icon { // width: 90rpx; // height: 90rpx; // border-radius: 24rpx; // background-color: rgba(19, 133, 250, 0.1); // flex-shrink: 0; // } // // &__name { // flex: 1; // margin-left: 23rpx; // font-size: 32rpx; // font-weight: 500; // color: #252535; // line-height: 32rpx; // } // // &__btn { // width: 88rpx; // height: 48rpx; // line-height: 48rpx; // text-align: center; // border-radius: 8rpx; // background-color: #2AC79F; // color: #FFFFFF; // font-size: 24rpx; // font-weight: 500; // } //} // ///* 已连接卡片复用 deviceCard__icon 的尺寸 */ //.connectedCard .deviceCard__icon { // width: 90rpx; // height: 90rpx; //}