tmt-workflow-act/act_project/carnival14/css/index.scss

@function px2rem($px, $rem:67) {
  @return $px / $rem+rem;
}

@import '../../../common/css/flex.scss';

.mask {
  z-index: 120;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  height: 60px;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  display: none;
  .logo {
      width: 40px;
      img {
          width: 100%;
      }
  }
  .slogan {
      color: #fff;
  }
}
#download {
  border: 1px solid #fff;
  color: #fff;
  width: 80px;
  text-align: center;
  border-radius: 15px;
  line-height: 30px;
  a {
      color: #fff;
  }
}
*{
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
body{
  font-family:PingFang SC;
  background: #8CCFFA;
  z-index:-1;
  .max {
    max-width: px2rem(670);
    margin: 0 auto;
    .title-one {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rule-btn {
      width: px2rem(88);
      height: px2rem(46);
      position: absolute;
      left: px2rem(30);
      top: px2rem(20);
      img {
        width:100%;
        height:100%;
      }
    }
    .cloth-box {
      width:100%;
      padding-bottom:2.4rem;
      margin:-2.2rem auto 0;
      li {
        width: px2rem(620);
        height: px2rem(400);
        position:relative;
        margin:px2rem(30) auto 0;
        @include flex();
        @include flex-justify-center;
        background:url('../img/index/li-card.png') no-repeat 0 0 / 100% 100%;
        .h-title{
          position:absolute;
          margin: px2rem(32) auto 0;
          letter-spacing:.053333rem;
          font-size: px2rem(28);
          font-weight: bold;
          color: #333;
          line-height: px2rem(50);
        }
        .gift-img{
          width:px2rem(156);
          height: px2rem(156);
          position:absolute;
          box-sizing: border-box;
          left: px2rem(72);
          top: px2rem(110);
          @include flex;
          @include flex-align-center;
          @include flex-justify-center;
          img{
            box-sizing: border-box;
            padding: px2rem(10);
            width:100%;
            height: 100%;
            object-fit: cover;
          }

        }
        .gift-text{
          position:absolute;
          left: px2rem(290);
          top: px2rem(100);
          p:first-child{
            font-size:px2rem(34);
            font-weight:bold;
            color: #555;
            letter-spacing:.026667rem;
          }
          p:nth-child(2){
            font-size:px2rem(28);
            font-weight:bold;
            color:#FF8F4C;
          }
          p:nth-child(3){
            font-size:px2rem(26);
            font-weight:500;
            text-decoration:line-through;
            color: #9C9C9C;
            line-height:px2rem(47);
            opacity:0.8;
          }
          p:last-child{
            font-size:px2rem(26);
            font-weight: 500;
            color: #9C9C9C;
            opacity:0.8;
            line-height: px2rem(47);
          }
        }
        .buy-btn{
          width: px2rem(300);
          height: px2rem(82);
          position:absolute;
          bottom: px2rem(20);
          @include flex();
          @include flex-justify-center;
          background: url('../img/index/buy.png') no-repeat 0 0 / 100% 100%;
          &.gray {
            background: url('../img/index/buy-gray.png') no-repeat 0 0 / 100% 100%;
          }
        }
      }
     
    }
   
    .shade {
      width: 100%;
      position:fixed;
      z-index:1000;
      left: 0;
      top: 0;
      height: 100%;
      background:rgba(0,0,0,0.7);
      display: none;
    }
    .mine {
      @include flex();
      @include flex-justify-between;
      @include flex-align-center;
      width: 100%;
      height:1.866667rem;
      position: fixed;
      left: 0;
      bottom: 0;
      // background: linear-gradient( #2578A7, #4E6BB3);
      background: #0068C0;
      z-index: 100;
      li {
        margin: 0 .533333rem;
        img {
          width: 100%;
        }

        &:first-child {
          @include flex();
          @include flex-justify-start;
          @include flex-align-center;
          p {
            &:first-child {
              width:1.066667rem;
              height:1.066667rem;
              border-radius:50%;
              overflow: hidden;
              font-weight:500;
            }

            &:last-child {
              margin-left:.266667rem;
              span {
                display: block;
                &:first-child {
                  line-height: px2rem(38);
                  font-size: px2rem(26);
                  color: #fff;
                  font-weight: bold;
                  white-space: nowrap;
                }
                &:last-child {
                  font-size: px2rem(22);
                  font-weight: 500;
                  color: rgba($color: #C1C4FD, $alpha: 1);
                  b {
                    color: rgba($color: #fff, $alpha: 1);
                  }
                }
              }
            }
          }
        }

        &:last-child {
          margin-top: px2rem(10);
          width: px2rem(180);
          height: px2rem(81);
        }
      }
    }
  }
  /*提示信息样式*/
  .ajaxtiptext{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align: center;
    color:#FFFFFF;
    padding:.2rem .4rem;
    border-radius:.333333rem;
    letter-spacing:.013333rem;
    background:rgba(0,0,0,0.8);
    animation:ajaxani 0.3s forwards;
    z-index:9999;
    white-space:nowrap;
  }
}

@import './index-mask.scss';