@import "../../globaStyle.less";
.bottom_pup {
  width: 750px;
  height: 520px;
  background: #ffffff;
  border-radius: 30px 20px 0px 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-top: 46px;
  box-sizing: border-box;
  .bg {
    .b {
      background: #f5f6f7;
      margin-right: 20px;
    }
    .h {
      background: #f5f6ee;
      margin-right: 20px;
    }
    .l {
      background: #d6e4cc;
      margin-right: 20px;
    }
    .hh {
      background: url(../../icon/hh.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .bg,
  .size,
  .lh {
    height: 70px;
    margin-bottom: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 690px;
    // 文本
    .txt {
      width: 60px;
      height: 40px;
      font-size: @fs_28;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: @fw_400;
      color: @cl_666;
      line-height: 40px;
    }
    // 背景色按钮
    .b,
    .h,
    .l,
    .hh {
      width: 134px;
      height: 70px;
      border-radius: 35px;
      box-sizing: border-box;
    }
    // 按钮通用
    .btn {
      display: flex;
    }
    // 选中按钮
    .action {
      border: 2px solid #999999 !important;
    }
    // 字体按钮通用
    .small,
    .big {
      width: 248px;
      height: 70px;
      border-radius: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f6f7;
      color: #333333;
      position: relative;
      &::after {
        background: transparent;
        font-size: 20px;
        left: 134px;
        top: 10px;
        position: absolute;
      }
    }
    //缩小字体
    .small {
      &::after {
        content: "-";
      }
    }
    //放大字体
    .big {
      &::after {
        content: "+";
      }
    }
    // 字体到最大或最小白色浅色
    .small.b_q,
    .big.b_q {
      background: #fbfbfb;
      color: #ececec;
    }
    // 字体大小数字
    .number {
      height: 70px;
      line-height: 70px;
      margin: 0 30px;
    }
    // 间距按钮通用
    .x,
    .z,
    .d {
      width: 176px;
      height: 70px;
      border-radius: 35px;
      display: flex;
      align-items: center;
      flex-flow: column nowrap;
      justify-content: center;
      border: 2px solid #e9e9e9;
      text {
        width: 38px;
        height: 4px;
        background: #999999;
        border-radius: 2px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .x {
      margin-right: 32px;
      text {
        margin-bottom: 8px;
      }
    }
    .z {
      margin-right: 32px;
      text {
        margin-bottom: 8px;
      }
    }
    .d {
      text {
        margin-bottom: 14px;
      }
    }
  }
  .xx {
    width: 750px;
    height: 2px;
    background: #eeeeee;
    margin-bottom: 12px;
  }
  .cd {
    height: 108px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    view {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
    }
    image {
      width: 56px;
      height: 56px;
    }
    text {
      width: 48px;
      height: 34px;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 34px;
    }
  }
}
.bottom_pup.black {
  background: #444546;
  .bg {
    .hh {
      background: url(../../icon/bt.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .bg,
  .size,
  .lh {
    text {
      color: #898a8b;
    }
  }
  .xx {
    background: #505050;
  }
  .cd {
    text {
      color: #666666;
    }
  }
  .size {
    .number {
      color: #686868;
    }
    .small,
    .big {
      background: #535353;
      color: #9c9c9c;
    }
    // 字体到最大或最小黑色浅色
    .small.b_q,
    .big.b_q {
      background: #3c3c3c;
      color: #484848;
    }
  }
  // 间距按钮通用
  .x,
  .z,
  .d {
    border: 2px solid #535353;
  }
}
