.creation {
   .creationBg {
      position: fixed;
      z-index: 0;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      top: 0;
      left: 0;
      background: url("./img/bg.png") no-repeat;
      background-size: 100% 100%;
   }
   .nav {
      padding-top: var(--navBarHeight, 0);
      background-color: transparent;
      &::after {
         display: none;
      }
      /deep/ .van-nav-bar__content {
         height: 46px;
         .van-icon {
            font-size: 0.19rem;
            color: #fff;
         }
         .van-nav-bar__title {
            font-size: 0.2rem;
            color: #fff;
         }
      }
      &.isScreenScroll {
         background-color: #fff;
         /deep/ .van-nav-bar__content {
            .van-icon {
               color: #333333;
            }
            .van-nav-bar__title {
               color: #333333;
            }
         }
      }
   }
   .singer {
      position: relative;
      margin-top: 0.06rem;
      text-align: center;
      font-weight: 400;
      font-size: 0.14rem;
      color: rgba(255, 255, 255, 0.7);
      line-height: 0.2rem;
      margin-bottom: 14vh;
   }
   .playBox {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      .playSection {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         &::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 0.4rem;
            bottom: -0.4rem;
            left: 0;
            background: linear-gradient(0, rgba(48, 100, 100, 0) 0%, rgba(35, 91, 101, 0.49) 46%, #134959 100%);
            pointer-events: none;
         }
         /deep/.plyr {
            width: 100%;
            height: 100%;
            z-index: initial;
            .plyr__controls {
               width: 100%;
               position: absolute;
               z-index: 4;
               bottom: 0;
               left: 0;
               background: initial;
               padding: 0 0.12rem 0.02rem;
               opacity: 1 !important;
               transform: translateY(0) !important;
               pointer-events: initial !important;
               .plyr__controls__item.plyr__progress__container {
                  input[type="range"] {
                     color: #01c1b5;
                     height: 0.1rem;
                  }
                  input[type="range"]::-webkit-slider-runnable-track {
                     height: 0.02rem;
                  }
                  input[type="range"]::-webkit-slider-thumb {
                     width: 0.06rem;
                     height: 0.06rem;
                     margin-top: -0.02rem;
                     box-shadow: initial;
                  }
                  .plyr__progress__buffer {
                     height: 0.02rem;
                     color: rgba(1, 193, 181, 0.8);
                     background-color: #fff;
                     margin-top: -0.01rem;
                  }
               }
               .plyr__controls__item.plyr__time {
                  display: none;
               }
               .plyr__controls__item.plyr__control {
                  display: none;
               }
            }
         }
         &.videoType {
            /deep/.plyr .plyr__controls {
               background-color: rgba(0, 0, 0, 0.2);
               .plyr__controls__item.plyr__progress__container {
                  input[type="range"] {
                     color: #ffffff !important;
                  }
                  .plyr__progress__buffer {
                     color: rgba(255, 255, 255, 0.7) !important;
                     background-color: rgba(0, 0, 0, 0.1) !important;
                  }
               }
            }
            .staff {
               background-color: rgba(255, 255, 255, 0.7);
            }
            .musicDetail {
               .van-notice-bar,
               .username {
                  color: #ffffff !important;
               }
            }
         }
         .videoBox {
            width: 100%;
            height: 100%;
         }
         .audioBox {
            width: 100%;
            height: 100%;
            background: url("./img/audioBg.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
            .audioVisualizer {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               width: 2.8rem;
               height: 0.55rem;
            }
            .tyBg {
               width: 1.39rem;
               height: 0.74rem;
               position: absolute;
               z-index: 1;
               left: 50%;
               top: 50%;
               transform: translate(-50%, calc(-50% + 0.28rem));
            }
            .audioBoxBg {
               position: absolute;
               left: 50%;
               top: 50%;
               transform: translate(-50%, -50%);
               z-index: 2;
               width: 0.74rem;
               height: 0.75rem;
               background: url("./img/audio-bg.png") no-repeat center;
               background-size: 100% 100%;

               .audioPan {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  z-index: 8;
                  width: 0.59rem;
                  height: 0.6rem;
                  background: url("./img/audio-pan.png") no-repeat center;
                  background-size: 100% 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  animation: rotateImg 6s linear infinite;

                  &.imgRotate {
                     animation-play-state: paused;
                  }
               }

               .audioImg {
                  width: 0.32rem;
                  height: 0.32rem;
                  /deep/ img {
                     border-radius: 50%;
                  }
               }

               .audioPoint {
                  position: absolute;
                  z-index: 9;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  width: 0.08rem;
                  height: 0.08rem;
                  background: url("./img/audio-point.png") no-repeat center;
                  background-size: contain;
               }

               .audioZhen {
                  position: absolute;
                  z-index: 9;
                  right: -0.04rem;
                  top: -0.33rem;
                  width: 0.26rem;
                  height: 0.87rem;
                  background: url("./img/audio-zhen.png") no-repeat center;
                  background-size: contain;
                  transition: transform 0.5s ease-in-out;

                  &.active {
                     transform: rotate(92deg) translate3d(0, 0, 0.03rem);
                     transition: transform 0.5s ease-in-out;
                  }
               }
            }
         }
         .playLarge {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 0.48rem;
            height: 0.48rem;
            background: url("./img/midPlay.png") no-repeat;
            background-size: 100% 100%;
            z-index: 12;
            display: none;
            &.playIngShow {
               display: initial;
            }
         }
         .mediaTimeCon {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
         }
         &.mediaTimeShow {
            .mediaTimeCon {
               display: block;
            }
         }
         .mediaTime {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.95rem;
            display: flex;
            font-weight: 500;
            font-size: 0.16rem;
            color: #60fff5;
            line-height: 0.2rem;
            z-index: 10;
            text-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.5);
            & div:first-child {
               width: 0.5rem;
               text-align: right;
            }
            .note {
               margin: 0 0.04rem;
            }
            .duration {
               color: #fff;
            }
         }
         .landscapeScreen {
            width: 0.32rem;
            height: 0.32rem;
            position: absolute;
            background: url("./img/Landscape.png") no-repeat;
            background-size: 0.26rem 0.26rem;
            background-position: center center;
            right: 0.07rem;
            top: 0.07rem;
            z-index: 15;
         }
         .staffBoxCon {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 3;
            overflow: hidden;
            visibility: hidden;
            &.staffBoxShow {
               visibility: initial;
            }
         }
         .staffBox {
            width: 100%;
            height: calc(var(--staffBoxHeight) + 0.12rem);
            position: absolute;
            bottom: 0;
            padding-bottom: 0.12rem;
            box-sizing: border-box;
            .staff {
               padding-right: 0.1rem;
               box-sizing: border-box;
               width: 100%;
               height: 100%;
            }
            .mask {
               position: absolute;
               z-index: 6;
               width: 100%;
               height: 100%;
            }
         }
      }
      .playSection.isLandscapeScreen {
         overflow: hidden;
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         width: 100%;
         height: 100%;
         min-height: 100vh;
         z-index: 1000;
         .landscapeScreen {
            display: none;
         }
         /deep/ .plyr {
            .plyr__controls {
               padding: 0 0.2rem 0.2rem;
               .plyr__controls__item.plyr__control {
                  display: block;
                  padding: 0;
                  width: 0.18rem;
                  height: 0.18rem;
                  &:hover {
                     background: initial;
                  }
                  .icon--pressed {
                     width: 100%;
                     height: 100%;
                     background: url("./img/pause2.png") no-repeat;
                     background-size: 100% 100%;
                     use {
                        display: none;
                     }
                  }
                  .icon--not-pressed {
                     width: 100%;
                     height: 100%;
                     background: url("./img/play2.png") no-repeat;
                     background-size: 100% 100%;
                     use {
                        display: none;
                     }
                  }
               }
               .plyr__controls__item.plyr__progress__container {
                  margin-left: 0.09rem;
                  input[type="range"] {
                     color: #01c1b5;
                     height: 0.2rem;
                  }
                  input[type="range"]::-webkit-slider-runnable-track {
                     height: 0.04rem;
                  }
                  input[type="range"]::-webkit-slider-thumb {
                     width: 0.12rem;
                     height: 0.12rem;
                     margin-top: -0.04rem;
                     box-shadow: initial;
                     background-color: #2DC7AA;
                  }
                  .plyr__progress__buffer {
                     height: 0.04rem;
                     color: rgba(1, 193, 181, 0.8);
                     background-color: #fff;
                     margin-top: -0.02rem;
                  }
               }
               .plyr__controls__item.plyr__time {
                  font-weight: 500;
                  font-size: 0.14rem;
                  color: #131415;
                  display: initial;
                  &.plyr__time--current {
                     margin-left: 0.09rem;
                  }
               }
            }
         }
         .audioBox{
            .audioBoxBg,.audioVisualizer{
               transform: translate(-50%, -50%) scale(1.4);
            }
            .tyBg{
               transform: translate(-50%, calc(-50% + 0.39rem)) scale(1.4);
            }
         }
         &.videoType {
            &::before {
               position: absolute;
               left: 0;
               top: 0;
               width: 100%;
               height: 1.15rem;
               content: "";
               background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(3, 3, 3, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%);
               z-index: 2;
            }
            /deep/ .plyr .plyr__controls {
               .plyr__controls__item.plyr__time {
                  color: #ffffff;
               }
               .plyr__controls__item.plyr__control {
                  .icon--pressed {
                     background: url("./img/pause1.png") no-repeat;
                     background-size: 100% 100%;
                  }
                  .icon--not-pressed {
                     background: url("./img/play1.png") no-repeat;
                     background-size: 100% 100%;
                  }
               }
               .plyr__controls__item.plyr__progress__container{
                  input[type="range"]::-webkit-slider-thumb {
                     background-color: #ffffff;
                  }
               }
            }
         }
         .backBox {
            position: absolute;
            left: 0.2rem;
            top: 0.2rem;
            display: flex;
            z-index: 10;
            .backImg {
               width: 0.21rem;
               height: 0.21rem;
            }
            .musicDetail {
               margin-left: 0.12rem;
               .musicSheetName {
                  width: 3rem;
                  .van-notice-bar {
                     padding: 0;
                     height: 0.2rem;
                     font-weight: 600;
                     font-size: 0.18rem;
                     color: #131415;
                     line-height: 0.2rem;
                  }
               }
               .username {
                  margin-top: 0.04rem;
                  font-weight: 400;
                  font-size: 0.12rem;
                  color: #333333;
                  line-height: 0.18rem;
               }
            }
         }
         .staffBox {
            height: calc(var(--staffBoxHeight) + 0.44rem);
            padding-bottom: 0.44rem;
            .staff {
               box-sizing: border-box;
               padding: 0 0.2rem;
            }
         }
      }
   }
   .musicSection {
      position: relative;
      width: 100%;
      min-height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0) - 0.26rem - 14vh - var(--heightA) - 0.55rem - 0.8rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0.1rem 0.12rem 0;
      box-sizing: border-box;

      .avatarInfoBox {
         display: flex;
         justify-content: space-between;
         align-items: center;
         .avatar {
            display: flex;
            align-items: center;
            .userLogo {
               width: 0.44rem;
               height: 0.44rem;
               border: 0.02rem solid #ffffff;
               margin-right: 0.1rem;
               border-radius: 50%;
               overflow: hidden;
            }
            .infoCon {
               .info {
                  display: flex;
                  align-items: center;
                  .userName {
                     font-weight: 500;
                     font-size: 0.16rem;
                     color: #ffffff;
                     line-height: 0.22rem;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     max-width: 1.6rem;
                  }
                  .iconMember {
                     margin-left: 0.06rem;
                     width: 0.16rem;
                     height: 0.16rem;
                  }
               }
               .sub {
                  margin-top: 0.02rem;
                  font-weight: 400;
                  font-size: 0.12rem;
                  color: #ffffff;
                  line-height: 0.17rem;
               }
            }
         }
         .linkes {
            display: flex;
            align-items: center;
            border-radius: 0.13rem;
            padding: 0.04rem 0.08rem 0.03rem;
            background-color: rgba(255, 255, 255, 0.12);
            font-weight: 400;
            font-size: 0.14rem;
            color: #ffffff;
            .iconZan {
               width: 0.18rem;
               height: 0.18rem;
               margin-right: 0.02rem;
            }
         }
      }
      .textEllipsis {
         margin-top: 0.1rem;
         font-weight: 400;
         font-size: 0.14rem;
         color: #ffffff;
         line-height: 0.2rem;
      }
   }
   .likeSection {
      position: relative;
      margin: 0.2rem 0.12rem 1rem;
      background: rgba(255, 255, 255, 0.09);
      border-radius: 0.1rem;
      padding: 0.12rem 0.12rem 0 0.12rem;
      overflow: hidden;
      .likeTitle {
         display: flex;
         align-items: center;
         font-size: 0.17rem;
         font-weight: 600;
         color: #ffffff;
         line-height: 0.24rem;
         &::before {
            display: inline-block;
            content: "";
            width: 0.04rem;
            height: 0.14rem;
            border-radius: 0.02rem;
            background: #2dc7aa;
            margin-right: 0.06rem;
         }
      }
      .likeItem {
         padding: 0.13rem 0 0.16rem;
         background-color: initial;
         border-bottom: 0.01rem solid rgba(242, 242, 242, 0.12);
         &.likeItemLast {
            border-bottom: none;
         }
         .userLogo {
            border-radius: 50%;
            overflow: hidden;
            width: 0.42rem;
            height: 0.42rem;
            margin-right: 0.07rem;
         }

         .userInfo {
            .name {
               font-size: 0.16rem;
               font-weight: 500;
               color: #ffffff;
               line-height: 0.22rem;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               max-width: 1.2rem;
            }

            .sub {
               padding-top: 0.02rem;
               font-size: 0.13rem;
               color: #ffffff;
               line-height: 0.18rem;
            }
         }

         .time {
            font-weight: 400;
            font-size: 0.13rem;
            color: #ffffff;
            line-height: 0.18rem;
         }
      }
      .mEmpty {
         /deep/.msg {
            color: #fff;
         }
      }
      .btnImg {
         display: flex;
         justify-content: center;
         margin-top: 0.03rem;
         margin-bottom: 0.12rem;
         & > img {
            width: 0.88rem;
            height: 0.31rem;
            &:active {
               opacity: 0.8;
            }
         }
      }
   }
   .upward {
      z-index: 100;
      box-sizing: border-box;
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0.8rem;
      padding-top: 0.12rem;
      display: flex;
      justify-content: center;
      height: 0.55rem;
      background: linear-gradient(180deg, rgba(42, 78, 85, 0) 0%, rgba(43, 78, 85, 0.7) 19%, #2b4e55 100%);
      > img {
         width: 0.19rem;
         height: 0.15rem;
      }
   }
   .bottomSection {
      position: fixed;
      z-index: 101;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.12rem 0 0.2rem;
      width: 100%;
      height: 0.8rem;
      background: #1f1f1f;
      box-shadow: 0 -0.01rem 0.1rem 0 rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      .bottomShare {
         display: flex;
         align-items: center;
         p {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 0.28rem;
            &:last-child {
               margin-right: 0;
            }
         }
         img {
            width: 0.18rem;
            height: 0.18rem;
         }
         span {
            margin-top: 0.08rem;
            font-weight: 400;
            font-size: 0.12rem;
            color: #ffffff;
            line-height: 0.17rem;
         }
      }

      .btnEdit {
         width: 0.8rem;
         height: 0.3rem;
      }
   }
   /* 分享样式 */
   .isEmpty {
      position: relative;
      height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0));
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/.icon_nodata {
         margin-top: -0.6rem;
      }
      /deep/.msg {
         color: #fff;
      }
   }
   .logoDownload {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.13rem;
      height: 46px;
      position: relative;
      &.isShareScreenScroll {
         background-color: #ffffff;
         .logTit {
            background: #2dc7aa;
            border: none;
            padding: 0.03rem 0.11rem;
         }
      }
      &::after {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0.13rem;
         width: calc(100% - 0.26rem);
         height: 0.01rem;
         background-color: rgba(255, 255, 255, 0.3);
      }
      .logoImg {
         width: 0.99rem;
         height: 0.3rem;
      }
      .logTit {
         font-weight: 400;
         font-size: 0.14rem;
         color: #ffffff;
         line-height: 0.2rem;
         padding: 0.02rem 0.1rem;
         border-radius: 0.2rem;
         border: 0.01rem solid rgba(255, 255, 255, 0.5);
      }
   }
   .singerBox {
      position: relative;
      height: 20vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .musicSheetName {
         width: 2rem;
         margin: 0 auto 0.1rem;
         /deep/.van-notice-bar {
            padding: 0;
            height: 0.28rem;
            font-weight: 600;
            font-size: 0.2rem;
            color: #ffffff;
            line-height: 0.28rem;
            .van-notice-bar__content {
               min-width: 100%;
               text-align: center;
            }
         }
      }
      .singerName {
         text-align: center;
         font-weight: 400;
         font-size: 0.14rem;
         color: rgba(255, 255, 255, 0.7);
         line-height: 0.2rem;
         margin-bottom: 0.1rem;
      }
   }
   .musicShareSection {
      min-height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0) - 20vh - var(--heightA) - 0.55rem);
   }
   .likeShareSection {
      margin: 0.2rem 0.12rem 0.2rem;
   }
   .likeShareItem {
      background-color: initial;
      padding: 0;
      margin-top: 0.25rem;
      &:first-child {
         margin-top: 0.2rem;
      }
      &.likeShareItemLast {
         padding-bottom: 0.2rem;
      }
      .audioImgBox {
         position: relative;
         width: 0.51rem;
         height: 0.51rem;
         margin-right: 0.14rem;
         .audioPan {
            position: absolute;
            width: 100%;
            height: 100%;
            right: -0.06rem;
            top: 0;
         }
         .muploader {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            border-radius: 0.085rem;
         }
         .imgLabel {
            position: absolute;
            right: 0;
            top: 0;
            width: 0.28rem;
            height: 0.14rem;
            z-index: 10;
         }
      }
      .userInfo {
         .musicSheetName {
            font-weight: 600;
            font-size: 0.16rem;
            color: #ffffff;
            line-height: 0.22rem;
            width: 2rem;
         }
         .usernameCon {
            display: flex;
            align-items: center;
            margin-top: 0.06rem;
            .likeNum {
               display: flex;
               align-items: center;
               border-radius: 0.03rem;
               background-color: rgba(255, 255, 255, 0.22);
               padding: 0.01rem 0.02rem;
               img {
                  width: 0.14rem;
                  height: 0.15rem;
               }
               span {
                  font-weight: 400;
                  font-size: 0.1rem;
                  color: #ffffff;
                  line-height: 1;
                  margin-left: 0.02rem;
               }
            }
            .username {
               max-width: 1.6rem;
               margin-left: 0.04rem;
               font-weight: 400;
               font-size: 0.13rem;
               color: #dedede;
               line-height: 0.13rem;
            }
         }
      }
      /deep/.van-cell__value {
         display: flex;
         align-items: center;
         justify-content: flex-end;
      }
      .time {
         line-height: 1;
         .playImg {
            width: 0.2rem;
            height: 0.2rem;
         }
      }
   }
   .btnImg {
      display: flex;
      justify-content: center;
      margin-top: 0.03rem;
      margin-bottom: 0.12rem;
      & > img {
         width: 0.88rem;
         height: 0.31rem;
         &:active {
            opacity: 0.8;
         }
      }
   }
   .shareUpward {
      bottom: 0;
   }
   .wxpopup {
      width: 100%;
      height: 100%;
      min-height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      text-align: right;
      img {
         width: 88%;
         margin-right: 6%;
      }
   }
}

.popupContainer {
   width: 80%;
   .popupTit {
      margin-top: 0.2rem;
      text-align: center;
      font-weight: 600;
      font-size: 0.18rem;
      color: #131415;
      line-height: 0.25rem;
   }
   .popupContent {
      margin: 0.2rem 0;
      font-weight: 400;
      font-size: 0.16rem;
      color: #777777;
      line-height: 0.26rem;
      text-align: center;
   }
   .popupBtnGroup {
      text-align: center;
      margin-bottom: 0.2rem;
      .van-button {
         height: 0.4rem;
         font-size: 0.16rem;
         font-weight: 400 !important;
         line-height: 0.22rem;
         min-width: 1.22rem;
         &:last-child {
            margin-left: 0.15rem;
            background: #2dc7aa;
            border: none;
         }
      }
   }
}
