HNKDBOSS-WEB/hn-shop-uniapp/pages/checkout/style.scss

// 配送信息
.container-br {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--main-bg), var(--main-bg2));
  // background: #fff
  //   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAAANCAYAAADVGpDCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Yjk4M2ExYy1jMDhkLTQ1OTktYTI0Ny1kZjNjYzdiYTQ5ZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQwNkY3RkU5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQwNkY3RkQ5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNzgwZWI1NS03OGFhLTQzOTUtODQ4OC1lOWI5YmVlYTY1ZDciIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1OTRiYzUyMy1jMzc3LTExNzgtYTdkZS04NGY3YmM1ZGIxMDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz556PLxAAACBElEQVR42tyaSyhEYRTHP48imlKibDQeSSlkSlEWLCRFsZNH5FE2FqQ8ErIRC9lIkTwXSpMkWWChhEJCSnlkoUZGSsr78f98n43CMFPu/Z/6NZuZ2zn33/+cb869XkmLx8IDEQaGQJbgiytQDSY3MyL+LYnL/HxPXSoHDIJQQq2WQQk4Dbbb/yUB29LJ+6e3B66VB3ZITbUIEqSpCGoJBP1ghtBUD6ARpEtTGSEhXzd+awE9oJzQUPegWdf3QlBPMhgDMYRa7YNisGWkpP5qrBQtVBShUHugUE9hs4fUtwG0utlEjRivoA/Ug1sj3vjffr8FNJEK1auPFHcE9UTq5pdK2PwcoAzMG7mjuRrRYEIfK9jiDJSCBZJ6ynSTsBBqNQ0qgdPISbq6vJCFbJOaagrEk5gqWNczRGiqG1Ah1LLMafRkf5pYIUKtZnMJDXUNasAIST2ZYFioRx9ssQaKwJFZEv5uYmWDXVJTrYBEElP562PfPKGpnkAbSDOTqb6aWAGgW6iHol5kQj2CdtAJngnqkc1hHMQRNr9DPaXWzZj8Z2PZtFCxhEIdaKE2CGqRJ4060AH8CLUaALX6f5VpBZLhI9SaeZXQVHKNLt84SCIxVbhQi5YuQlNd6OVElZlN9TGxrGBUn2PZ4lyoTdIsST0FQj0UDSLUak6ot3gcBLVY3wQYAJoVXxmNERajAAAAAElFTkSuQmCC)
  //   bottom left repeat-x;
  // background-size: 3.75rem auto;
}

// 支付方式
.payment-method {
  .gouxuan-box {
    display: block;
    width: 36rpx;
    height: 36rpx;
    border-radius: 100%;
    border: 1px solid #c2c2c2;
  }
  .actvie-zf {
    border: 1px solid #ff0000;
    background: #ff0000;
  }
  .pay-item {
    padding: 10rpx 0rpx;
    font-size: 26rpx;

    .item-left_icon {
      margin-right: 20rpx;
      font-size: 44rpx;

      .wechat {
        color: #00c800;
      }

      .alipay {
        color: #009fe8;
      }
    }

    .item-left_text {
      font-size: 30rpx;
    }

    .item-right {
      font-size: 30rpx;
    }

    .user-balance {
      margin-left: 20rpx;
      font-size: 26rpx;
    }
  }
}

.flex-five-center {
  display: block;
  width: 100%;
  text-align: center;
}

.flow-delivery {
  padding: 34rpx 30rpx;
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAAANCAYAAADVGpDCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Yjk4M2ExYy1jMDhkLTQ1OTktYTI0Ny1kZjNjYzdiYTQ5ZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQwNkY3RkU5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQwNkY3RkQ5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNzgwZWI1NS03OGFhLTQzOTUtODQ4OC1lOWI5YmVlYTY1ZDciIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1OTRiYzUyMy1jMzc3LTExNzgtYTdkZS04NGY3YmM1ZGIxMDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz556PLxAAACBElEQVR42tyaSyhEYRTHP48imlKibDQeSSlkSlEWLCRFsZNH5FE2FqQ8ErIRC9lIkTwXSpMkWWChhEJCSnlkoUZGSsr78f98n43CMFPu/Z/6NZuZ2zn33/+cb869XkmLx8IDEQaGQJbgiytQDSY3MyL+LYnL/HxPXSoHDIJQQq2WQQk4Dbbb/yUB29LJ+6e3B66VB3ZITbUIEqSpCGoJBP1ghtBUD6ARpEtTGSEhXzd+awE9oJzQUPegWdf3QlBPMhgDMYRa7YNisGWkpP5qrBQtVBShUHugUE9hs4fUtwG0utlEjRivoA/Ug1sj3vjffr8FNJEK1auPFHcE9UTq5pdK2PwcoAzMG7mjuRrRYEIfK9jiDJSCBZJ6ynSTsBBqNQ0qgdPISbq6vJCFbJOaagrEk5gqWNczRGiqG1Ah1LLMafRkf5pYIUKtZnMJDXUNasAIST2ZYFioRx9ssQaKwJFZEv5uYmWDXVJTrYBEElP562PfPKGpnkAbSDOTqb6aWAGgW6iHol5kQj2CdtAJngnqkc1hHMQRNr9DPaXWzZj8Z2PZtFCxhEIdaKE2CGqRJ4060AH8CLUaALX6f5VpBZLhI9SaeZXQVHKNLt84SCIxVbhQi5YuQlNd6OVElZlN9TGxrGBUn2PZ4lyoTdIsST0FQj0UDSLUak6ot3gcBLVY3wQYAJoVXxmNERajAAAAAElFTkSuQmCC')
    bottom left repeat-x;
  background-size: 120rpx auto;
  margin-bottom: 25rpx;

  .detail-location {
    font-size: 36rpx;
  }
  .detail-content {
    padding: 0 20rpx;
    .detail-content__title-phone {
      margin-left: 10rpx;
    }
    .detail-content__describe {
      font-size: 28rpx;
      color: #777;
    }
  }
  .detail-content__title {
    margin-bottom: 6rpx;
  }
}

// 买家留言
.flow-all-money {
  .ipt-wrapper {
    .input {
      font-size: 28rpx;
      // width: 100%;
      display: block;
      height: 75rpx;
    }
  }
}

// 商品列表
.checkout_list {
  padding: 20rpx 50rpx 4rpx 50rpx;
  background: #fff;
  // border-bottom: 1rpx solid rgb(248, 248, 248);
  background-image: linear-gradient(-20deg, #fc607513 0%, #ff9b441a 100%);
  .flow-shopList {
    padding: 5rpx 0 10rpx;
    border-bottom: 1rpx solid rgb(248, 248, 248);
    &:last-child {
      border-bottom: 0;
    }
  }
}

.flow-header-left {
  padding-left: 90rpx;
}

/* 会员价 */
.flow-shopList {
  .flow-list-right {
    .flow-cont {
      &.price-delete {
        font-size: 26rpx;
        color: #777;
        text-decoration: line-through;
      }
    }
  }

  .grade-price {
    padding-top: 8rpx;
    font-size: 28rpx;
    color: $main-bg;
    text-align: right;
  }

  .goods-name {
    font-size: 28rpx;
    color: #333;
  }
}

/* 优惠券选择 */
.popup__coupon {
  background: #fff;
  box-sizing: border-box;
  padding: 30rpx;
  // 设置ios刘海屏底部横线安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);

  .coupon__do_not {
    .control {
      width: 90%;
      height: 72rpx;
      color: #888;
      border: 1rpx solid #e3e3e3;
      border-radius: 10rpx;
    }
  }

  .coupon__title {
    text-align: center;
    margin-bottom: 30rpx;
  }

  .coupon-list {
    /* #ifdef H5 */
    max-width: 1120rpx;
    margin: 0 auto;
    /* #endif */
    margin-bottom: 24rpx;
  }

  .coupon-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 22rpx;
  }

  .item-wrapper {
    width: 100%;
    display: flex;
    background: #fff;
    border-radius: 8rpx;
    color: #fff;
    height: 180rpx;

    .coupon-type {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 128rpx;
      padding: 6rpx 0;
      background: #a771ff;
      font-size: 20rpx;
      text-align: center;
      color: #ffffff;
      transform: rotate(45deg);
      transform-origin: 64rpx 64rpx;
    }

    &.color-blue {
      background: linear-gradient(-125deg, #57bdbf, #2f9de2);
    }

    &.color-red {
      background: linear-gradient(-128deg, #ff6d6d, #ff3636);
    }

    &.color-violet {
      background: linear-gradient(-113deg, #ef86ff, #b66ff5);

      .coupon-type {
        background: #55b5ff;
      }
    }

    &.color-yellow {
      background: linear-gradient(-141deg, #f7d059, #fdb054);
    }

    &.color-gray {
      background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);

      .coupon-type {
        background: #9e9e9e;
      }
    }

    .content {
      flex: 1;
      padding: 30rpx 20rpx;
      border-radius: 16rpx 0 0 16rpx;

      .title {
        font-size: 32rpx;
      }

      .bottom {
        .time {
          font-size: 24rpx;
        }

        .receive {
          height: 46rpx;
          width: 122rpx;
          border: 1rpx solid #fff;
          border-radius: 30rpx;
          color: #fff;
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          &.state {
            border: none;
          }
        }
      }
    }

    .tip {
      position: relative;
      flex: 0 0 32%;
      text-align: center;
      border-radius: 0 16rpx 16rpx 0;

      .money {
        font-weight: bold;
        font-size: 52rpx;
      }

      .pay-line {
        font-size: 22rpx;
      }
    }

    .split-line {
      position: relative;
      flex: 0 0 0;
      border-left: 4rpx solid #fff;
      margin: 0 10rpx 0 6rpx;
      background: #fff;

      &:before {
        border-radius: 0 0 16rpx 16rpx;
        top: 0;
      }

      &:after {
        border-radius: 16rpx 16rpx 0 0;
        bottom: 0;
      }

      &:before,
      &:after {
        content: '';
        position: absolute;
        width: 24rpx;
        height: 12rpx;
        background: #f7f7f7;
        left: -14rpx;
        z-index: 1;
      }
    }
  }
}

/* 积分抵扣 */
.points {
  .title {
    margin-right: 5rpx;
  }

  .icon-help {
    font-size: 28rpx;
  }

  .points-money {
    margin-right: 20rpx;
  }
}

// 商品规格
.goods-props {
  padding-top: 10rpx;
  font-size: 24rpx;
  color: #999;

  .goods-props-item {
    float: left;
    .group-name {
      margin-right: 6rpx;
    }
  }
}

// 右侧箭头
.right-arrow {
  margin-left: 16rpx;
  // color: #777;
  font-size: 26rpx;
}

// 底部操作栏
.flow-fixed-footer {
  position: fixed;
  bottom: var(--window-bottom);
  left: var(--window-left);
  right: var(--window-right);
  // width: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 11;
  // 设置ios刘海屏底部横线安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom));

  .chackout-left {
    font-size: 28rpx;
    line-height: 92rpx;
    color: #777;
    flex: 4;
    padding-left: 12px;
  }

  .chackout-right {
    font-size: 34rpx;
    flex: 2;
  }

  // 提交按钮
  .flow-btn {
    background: linear-gradient(to right, $main-bg, $main-bg2);
    color: $main-text;
    text-align: center;
    line-height: 92rpx;
    display: block;
    font-size: 28rpx;
    // 禁用按钮
    &.disabled {
      opacity: 0.6;
    }
  }
}

// 积分说明
.points-content {
  padding: 30rpx 48rpx;
  font-size: 28rpx;
  line-height: 50rpx;
  text-align: left;
  color: #606266;
  height: 620rpx;
  box-sizing: border-box;
}

/* 共几件商品 */
.flow-num-box {
  font-size: 28rpx;
  color: #333;
  padding: 16rpx 24rpx;
  text-align: right;
  background: #fff3f4;
  // border-top: 1px solid #ffd1c4;
  border-bottom: 2px solid #ffd1c4;
}

/* app.scss */
.flow-shopList {
  padding: 18rpx 0;

  .flow-list-left {
    margin-right: 20rpx;
    width: 180rpx;
    height: 180rpx;
    overflow: hidden;
    border: 1rpx solid #eee;
    image {
      width: 180rpx;
      height: 180rpx;
      background: #fff;
    }
  }

  .flow-list-right {
    .flow-cont {
      font-size: 28rpx;
      color: $main-bg;
    }

    .small {
      font-size: 26rpx;
      color: #777;
    }

    .flow-list-cont {
      padding-top: 10rpx;
    }
  }
}

.flow-all-money {
  padding: 0 50rpx;
  color: #444;

  .flow-all-list {
    font-size: 28rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid rgb(248, 248, 248);
  }

  .flow-all-list:last-child {
    border-bottom: none;
  }

  .flow-all-list-cont {
    font-size: 28rpx;
    padding: 10rpx 0;
  }

  .flow-arrow {
    justify-content: flex-end;
    align-items: center;
  }
}

// 选项卡：配送方式
.swiper-tab {
  width: 100%;
  text-align: center;
  height: 85rpx;
  background-color: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
  display: flex;
  align-items: center;
  justify-content: space-around;

  .swiper-tab-item {
    width: 35%;
    height: 100%;
    font-size: 28rpx;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 2px solid #ffffff00;

    &.on {
      color: $main-bg;
      border-bottom: 2px solid $main-bg;
    }
  }
}