wxmini/pages/indexCopy/indexCopy.wxss

/**index.wxss**/
.container .nav-wrap {
  backdrop-filter: blur(10rpx);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.container .nav-wrap .nav-info {
  padding-left: 32rpx;
  display: flex;
  align-items: center;
}

.container .nav-wrap .nav-info .device-pic {
  height: 36rpx;
  margin-right: 12rpx;
}

.container .nav-wrap .nav-info .z {
  height: 24rpx;
  margin-right: 12rpx;
}

.container .nav-wrap .nav-info text {
  font-size: 28rpx;
  color: #353535;
  font-weight: bold;
  margin-right: 24rpx;
}

.container .nav-wrap .nav-info .j {
  height: 16rpx;
}

.container .mair {
  width: calc(100% - 52rpx);
  padding: 20rpx 26rpx 0;
  height: calc(100vh - 20rpx);
  position: relative;
  overflow: hidden;
}

.container .mair .play-info {
  width: 100%;
  padding: 16rpx 0;
  background: linear-gradient(167deg, #D8D8D8 0%, rgba(238, 238, 238, 0.5) 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .mair .play-info .info {
  width: 550rpx;
  height: 152rpx;
  position: relative;
}
.container .mair .play-info .wakeMode {
  width: 96rpx;
  height: 152rpx;
  background: linear-gradient(180deg, #000000 0%, #000000 100%);
box-shadow: inset 2rpx 6rpx 10rpx 0px rgba(255,255,255,0.61), inset 0px -2rpx 4rpx 0px rgba(255,255,255,0.3);
  border-radius: 12rpx;
  margin-left: 8rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container .mair .play-info .wakeMode text {
  height: 28rpx;
  font-size: 20rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 28rpx;
  font-weight: 500;
  margin-top: 20rpx;
}

.container .mair .play-info .wakeMode .mode {
  position: absolute;
  top: 0;
  left: 0;
  width: 96rpx;
  height: 152rpx;
  z-index: 999;
}
.container .mair .play-info .info .logo {
  position: absolute;
  top: 14rpx;
  left: 20rpx;
  height: 48rpx;
}
.container .mair .play-info .info .battery {
  position: absolute;
  top: 8rpx;
  right: 16rpx;
  height: 56rpx;
  width: 56rpx;
}
.container .mair .play-info .info .fm {
  color: #fff;
}

.container .mair .play-info .info .black {
  position: absolute;
  top: 0;
  left: 0;
  width: 550rpx;
  height: 152rpx;
}

.container .mair .play-info .info .mode {
  position: absolute;
  top: 0;
  left: 0;
  width: 550rpx;
  height: 152rpx;
  z-index: 999;
}

.container .mair .play-info .info .fm {
  position: absolute;
  top: 22rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48rpx;
  font-weight: 600;
  color: #6D00FF;
  line-height: 66rpx;
  
}
.container .mair .play-info .info .fmMod{
  position: absolute;
  top: 22rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 200rpx;
  height: 66rpx;
  z-index: 1000;
}
.container .mair .play-info .info .fm .gochnnalList{
  height: 50rpx;
  position: absolute;
  top: 8rpx;
  left: 100%;
}

.container .mair .play-info .info .thisMusic {
  position: absolute;
  bottom: 26rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 488rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .mair .play-info .info .thisMusic>text{
  width: 100rpx;
  display: inline-block;
  color: #fff;
  font-size: 20rpx;
}
.container .mair .play-info .info .thisMusic .scroll-box {
  position: relative;
  max-width: 388rpx;
  display: flex;
  align-items: center;
}
.thisMusic .scroll-box .scroll-wrap {
  max-width: 100%;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
}

.thisMusic .scroll-box .scroll-item {
  /* animation: scroll linear 4s alternate infinite; */
  float: left;
  color: #fff;
  font-size: 20rpx;
}

@keyframes scroll {
  0% {
      margin-left: 0;
      transform: translateX(0);
  }

  10% {
      margin-left: 0;
      transform: translateX(0);
  }

  90% {
      margin-left: 100%;
      transform: translateX(-100%);
  }

  100% {
      margin-left: 100%;
      transform: translateX(-100%);
  }
}

.container .mair .gologin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.container .mair .gologin .model {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.container .mair .gologin .model > image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container .mair .gologin .model > view {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.container .mair .gologin .model > view > image {
  display: block;
  height: 44rpx;
  margin: 398rpx auto 18rpx;
}

.container .mair .gologin .model > view text {
  display: block;
  width: 100%;
  font-size: 30rpx;
  color: #353535;
  font-weight: bold;
  text-align: center;
  margin-bottom: 66rpx;
}

/* .container .mair .gologin .model > view > view {
  width: 226rpx;
  height: 80rpx;
  background: #6547A3;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 0 auto;
  font-size: 30rpx;
  color: #fff;
} */
.container .mair .goruter .model{
  background: #fff;
  height: 100%;
  width: 100%;
}
.container .mair .goruter .model > view > image {
  display: block;
  height: 176rpx;
  margin: 318rpx auto 18rpx;
}
.container .pd {
  position: relative;
  width: 120vw;
  height: calc(100% - 204rpx);
  padding-top: 20rpx;
  margin-left: -24rpx;
}

.container .pd .conm {
  padding-left: 24rpx;
  width: calc(100vw - 52rpx);
}

.container .pd .cz {
  width: 22rpx;
  height: 1664rpx;
  position: absolute;
  top: 24rpx;
  left: 24rpx;
}

.container .pd .musicList {
  padding: 0 0 20rpx 44rpx;
  position: relative;
}

.container .pd .musicList .li {
  height: 98rpx;
  display: flex;
  align-items: center;
  margin-bottom: 52rpx;
  color: #353535;
  position: relative;
}

.container .pd .musicList .li .zz {
  width: 236rpx;
  height: 22rpx;
  position: absolute;
  top: 48rpx;
  left: -70rpx;
  z-index: 999;
}

.container .pd .musicList .li .lm {
  transform: rotate(90deg);
}

.container .pd .musicList .li .musicInfo {
  width: 606rpx;
  height: 98rpx;
  display: flex;
  align-items: center;
  margin-left: 22rpx;
  position: relative;
}

.container .pd .musicList .li .musicInfo .pic {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  border: 2rpx solid #979797;
}

.container .pd .musicList .li .musicInfo text {
  font-size: 30rpx;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 200rpx);
}

.container .pd .musicList .li .musicInfo .svg {
  position: absolute;
  top: 34rpx;
  right: 50rpx;
  width: 34rpx;
  height: 30rpx;
}

.container .pd .musicList .li:last-child {
  margin: 0;
}

.container .pd .musicList .li.action {
  color: #6547A3;
}

.container .pd .musicList .li.action .musicInfo {
  border-radius: 49rpx;
  background-color: #D8D8D8;
}
.mair .mz{
  width: calc(100% - 72rpx);
  padding: 32rpx 36rpx;
  background: #FFFFFF;
  border-radius:0px 0px 18rpx 18rpx ;
  overflow: hidden;
}

.mair .deviceList{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.mair .mz .li-view{
  height: 160rpx;
  float: left;
  width: calc(100% / 2 - 8rpx);
  margin-bottom: 36rpx;
  display: flex;
  align-items: center;
}
.mair .mz .li-view:nth-child(2n){
  margin-left: 14rpx;
}
.mair .mz .li {
  position: relative;
  width: calc(100% - 44rpx);
  height: 160rpx;
  display: flex;
  align-items: center;
  border: 2rpx solid #353535;
  border-radius: 16rpx;
  padding: 0 20rpx;
  background-color: #fff;
}
.mair .mz .li image{
  width: 96rpx;
}
.mair .mz .li .delete{
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  width: 36rpx;
}
.mair .mz .li .deviceName{
  font-size: 28rpx;
  color: #353535;
  font-weight: 500;
  margin-left: 18rpx;
}
.mair .mz .li .onli{
  position: absolute;
  bottom: 14rpx;
  right: 24rpx;
  font-size: 24rex;
  color: #353535;
}
.mair .mz .li.action{
  border: 4rpx solid #6547A3;
  box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
  width: calc(100% - 48rpx);
  height: 156rpx;
}
.mair .mz .li.action .onli{
  color: #6547A3;
}
.mair .mz .li.offline{
  opacity: 0.6;
}
.mair .mz .but{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;

}
.mair .mz .but text{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 226rpx;
  height: 80rpx;
  background: #6547A3;
  border-radius: 45rpx;
  color: #fff;
  margin: 0 20rpx;
}
.wake{
  height: 48rpx;
  z-index: 1000;
}
.updataminiwx{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
.updataminiwx .mode{
  width: 520rpx;
  height: 410rpx;
  position: relative;
}
.updataminiwx .mode .bg{
  width: 520rpx;
  height: 410rpx;
}
.updataminiwx .mode .updata-view{
  width: 520rpx;
  height: 410rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.updataminiwx .mode .updata-view image{
  width: 124rpx;
  height: 124rpx;
  margin: 24rpx auto 14rpx;
  display: block;
}
.updataminiwx .mode .updata-view .title {
  height: 38rpx;
  font-size: 30rpx;
 font-weight: bold;
  color: #353535;
  line-height: 38rpx;
  display: block;
  text-align: center;
  margin-bottom: 16rpx;
}
.updataminiwx .mode .updata-view .tip {
  height: 38rpx;
  font-size: 30rpx;
 font-weight: 500;
  color: #999;
  line-height: 38rpx;
  display: block;
  text-align: center;
  margin-bottom: 40rpx;
}
.updataminiwx .mode .updata-view>view {
  display: flex;
  justify-content: center;
}
.updataminiwx .mode .updata-view>view text{
  width: 226rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin: 0 10rpx;
}
.updataminiwx .mode .updata-view>view .onBut{
  background-color: rgba(153, 153, 153, 1);
  color: #fff;
}
.updataminiwx .mode .updata-view>view .twoBut{
  background-color: rgba(101, 71, 163, 1);
  color: #fff;
}