applet/static/style/common.scss

// 安全区域
// page{
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }

//详情标题
.detail-top-title {
  text-align: center;
  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #0d8748;
    margin: 0 26rpx;
    vertical-align: middle;
  }
  .line {
    width: 63rpx;
    height: 6rpx;
    vertical-align: middle;
    &:last-child {
      transform: rotateY(180deg);
    }
  }
}

//弹窗1
.tip-popup {
  .content-box {
    width: 530rpx;
    background-color: white;
    border-radius: 20rpx;
    overflow: hidden;
    .title {
      height: 90rpx;
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
      line-height: 90rpx;
      background: #e6e6e6;
    }
    .content {
      padding: 66rpx 0 49rpx 0 !important;
      text-align: center;
      .tip {
        width: 404rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        line-height: 38rpx;
        margin: 0 auto 20rpx auto;
        word-break: break-all;
      }
      .btn {
        background: #20a634;
        border-radius: 40rpx;
        width: fit-content;
        height: 80rpx;
        font-size: 26rpx;
        padding: 0 90rpx;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 80rpx;
        margin: 40rpx auto 20rpx auto;
        &.donation {
          width: 434rpx;
          background: #f8a764;
          margin: 0 auto 20rpx auto;
        }
      }
      .btn-box {
        display: flex;
        justify-content: space-around;
        margin-top: 40rpx;
        button {
          width: 200rpx;
          height: 80rpx;
          border: 1px solid #3775f6;
          border-radius: 40rpx;
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          background-color: #fa6138;
          color: white;
          line-height: 80rpx;
          &:nth-child(1) {
            background-color: white;
            color: #fa6138;
          }
        }
      }
    }
  }
}

//弹窗2
.submit-popup {
  .content-box {
    border-radius: 12rpx;
    width: 530rpx;
    padding: 64rpx 46rpx 74rpx 46rpx;
    box-sizing: border-box;
    background-color: white;
    .title {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
    }
    .content {
      padding: 0 !important;
      .success-icon {
        display: block;
        width: 107rpx;
        height: 107rpx;
        margin: 40rpx auto 34rpx auto;
      }
      .tip {
        margin: 0 auto;
        width: 260rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #666666;
        line-height: 42rpx;
      }
      .btn {
        background: #20a634;
        border-radius: 40rpx;
        padding: 0 90rpx;
        box-sizing: border-box;
        width: fit-content;
        height: 80rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 80rpx;
        margin: 40rpx auto 20rpx auto;
      }
      .btn-box {
        display: flex;
        justify-content: space-around;
        margin-top: 40rpx;
        button {
          width: 200rpx;
          height: 80rpx;
          border: 1px solid #20a634;
          border-radius: 40rpx;
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          background-color: #20a634;
          color: white;
          line-height: 80rpx;
          &:nth-child(1) {
            background-color: white;
            color: #20a634;
          }
        }
      }
    }
  }
}

// 公共表单
.common-form {
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  .form-title {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #060606;
    margin: 30rpx 0 23rpx 0;
    &.required {
      &:before {
        content: "*";
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #ff0000;
        vertical-align: middle;
        margin-right: 2rpx;
      }
    }
    .tip {
      color: #999999;
    }
  }
  .form-item {
    padding-bottom: 10rpx;
    border-bottom: 1px solid #d9d9d95c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.no-border {
      border-bottom: none;
    }
    input {
      flex: 1;
    }
    .iconfont2 {
      color: #808080;
      font-size: 40rpx;
    }
    .u-upload {
      margin-bottom: 30rpx;
      .uicon-plus {
        font-size: 50rpx !important;
        color: #999999;
      }
      .u-add-tips {
        margin-top: 0;
      }
    }
    .upload-tip {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #666666;
      line-height: 40rpx;
      margin-bottom: 40rpx;
    }
  }
  .submit-btn {
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 20rpx auto;
    background: #fa6138;
    border-radius: 40px;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }
  .form-tip {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #666666;
    line-height: 40rpx;
    margin: 27rpx 0 60rpx 0;
  }
  .form-split {
    width: 750rpx;
    height: 8rpx;
    background: #f5f5f5;
    margin: 40rpx 0 40rpx -30rpx;
  }
}

//服务体系礼包
.service-sys-moudle {
  padding: 0 0 0 30rpx;
  box-sizing: border-box;
  margin: 0 0 50rpx 0;
  .title-box {
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #1a1a1a;
    line-height: 30rpx;
    margin-bottom: 30rpx;
  }
  .content {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    .item {
      display: inline-block;
      text-align: center;
      margin-right: 20rpx;
      filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
      .cover {
        width: 217rpx;
        height: 217rpx;
        margin-bottom: 10rpx;
        border-radius: 10rpx;
      }
      .title {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        line-height: 24rpx;
        margin-bottom: 15rpx;
        width: 217rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .new-price {
        margin-bottom: 5rpx;
        .company,
        .float-num {
          font-size: 20rpx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          color: #00bf5a;
          line-height: 24rpx;
        }
        .num {
          font-size: 36rpx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: bold;
          color: #00bf5a;
          line-height: 24rpx;
        }
      }
      .old-price {
        font-size: 22rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-decoration: line-through;
        color: #999999;
        line-height: 24rpx;
      }
    }
  }
}

//标签页
.tab-box {
  position: sticky;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 50;
  height: 110rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 106rpx 0 106rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
  .tab {
    height: 110rpx;
    line-height: 110rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    position: relative;
    color: #1a1a1a;
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: #fa6138;
      transition: all 0.3s;
    }
    &.active {
      color: #fa6138;
      &::before {
        width: 100%;
      }
    }
  }
}

//查看更多
.u-load-more-wrap {
  margin-top: 30rpx !important;
}

// 富文本展示
.ql-editor-box {
  word-break: break-all;
  text-align: justify;
  ::v-deep .ql-indent-1 {
    margin-left: 96rpx;
  }
  ::v-deep .ql-indent-2 {
    margin-left: 192rpx;
  }
  ::v-deep .ql-indent-3 {
    margin-left: 288rpx;
  }
  ::v-deep .ql-indent-4 {
    margin-left: 384rpx;
  }
  ::v-deep .ql-indent-5 {
    margin-left: 480rpx;
  }
  ::v-deep .ql-indent-6 {
    margin-left: 576rpx;
  }
  ::v-deep .ql-indent-7 {
    margin-left: 672rpx;
  }
  ::v-deep .ql-indent-8 {
    margin-left: 768rpx;
  }

  ::v-deep img {
    max-width: 100%;
  }

  ::v-deep .ql-align-center {
    text-align: center;
  }

  ::v-deep .ql-align-right {
    text-align: right;
  }

  ::v-deep blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  ::v-deep .ql-indent-1 {
    margin-left: 60rpx;
  }

  ::v-deep .ql-indent-2 {
    margin-left: 120rpx;
  }

  ::v-deep .ql-indent-3 {
    margin-left: 180rpx;
  }

  ::v-deep .ql-indent-4 {
    margin-left: 240rpx;
  }

  ::v-deep .ql-indent-5 {
    margin-left: 300rpx;
  }
  ::v-deep .ql-size-huge {
    font-size: 80rpx;
    display: inline-block;
    line-height: 90rpx;
  }
  ::v-deep .ql-size-large {
    font-size: 48rpx;
    display: inline-block;
    line-height: 50rpx;
  }
  ::v-deep .ql-size-small {
    font-size: 24rpx;
    display: inline-block;
    line-height: 30rpx;
  }

  ::v-deep .ql-font-serif {
    font-family: Georgia, Times New Roman, serif;
  }
  ::v-deep .ql-font-monospace {
    font-family: Monaco, Courier New, monospace;
  }
}

.goods-tools {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 84rpx;
  line-height: 42rpx;
}

.custom-parse {
  overflow-x: hidden !important;
}

// 定义u-开头的通用样式类
// 颜色相关
.u-1A1A1A {
  color: #1a1a1a;
}

.u-333 {
  color: #333;
}

.u-999 {
  color: #999;
}

.br-999 {
  border: 1rpx solid #999;
}

.u-CCC {
  color: #ccc;
}

.u-FF0000 {
  color: #ff0000;
}

.u-DCCDA4 {
  background-color: #dccda4;
}

// 字体大小相关
.u-font20{
  font-size: 20rpx;
}

.u-font22 {
  font-size: 22rpx;
}

.u-font24 {
  font-size: 24rpx;
}

.u-font26 {
  font-size: 26rpx;
}

.u-font28 {
  font-size: 28rpx;
}

.u-font30 {
  font-size: 30rpx;
}

.u-font32 {
  font-size: 32rpx;
}

// 字体粗细相关
.u-bold {
  font-weight: bold;
}

// 布局相关
.u-flex-center {
  display: flex;
  align-items: center;
}

.u-flex-center-sa{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.u-flex-center-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-flex-column-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.u-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.u-flex1 {
  flex: 1;
}
.u-flex {
  display: flex;
}

// 边距相关
.u-mt10 {
  margin-top: 10rpx;
}

.u-mt20 {
  margin-top: 20rpx;
}

.u-mt30 {
  margin-top: 30rpx;
}

.u-ml5 {
  margin-left: 5rpx;
}

.u-ml10 {
  margin-left: 10rpx;
}

.u-ml15 {
  margin-left: 15rpx;
}

.u-ml30 {
  margin-left: 30rpx;
}

.u-mr10 {
  margin-right: 10rpx;
}

.u-plr30 {
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.u-pl30 {
  padding-left: 30rpx;
}

.u-pr30 {
  padding-right: 30rpx;
}

.u-text2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制为2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-ml20 {
  margin-left: 20rpx;
}
.u-font44 {
  font-size: 44rpx !important;
}

.u-p30 {
  padding: 30rpx !important;
}

.u-goods200 {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  flex-shrink: 0;
}

.u-font40 {
  font-size: 40rpx !important;
}

.u-mt25 {
  margin-top: 25rpx;
}
.u-mb10 {
  margin-bottom: 10rpx;
}
.u-mb20 {
  margin-bottom: 20rpx;
}

.u-ml45 {
  margin-left: 45rpx;
}
.u-mr45 {
  margin-right: 45rpx;
}

.u-text-center {
  text-align: center;
}
.bg-F5FFF9 {
  background-color: #f5fff9;
}
.u-bg-fff {
  background-color: #fff;
}
.u-mt15 {
  margin-top: 15rpx;
}
.u-text-right {
  text-align: right;
}
.u-flex-warp {
  display: flex;
  flex-wrap: wrap;
}
.u-flex-warp-sb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 订单按钮 */
.u-order-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35px;
  font-size: 28rpx;
  //   margin-left: 22rpx;
}

.u-br-999 {
  border: 1rpx solid #999;
}
.u-999 {
  color: #999;
}

.u-ptb30 {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.u-ctImg180 {
  width: 180rpx;
  height: 180rpx;
}

.popup-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.form-container {
  .form-step {
    background-color: #ffffff;
    padding: 35rpx 30rpx;
    font-size: 28rpx;
    .step-title {
      font-size: 30rpx;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 11rpx;
    }
  }

  .form-list {
    background-color: #ffffff;
    padding: 34rpx 30rpx 14rpx 30rpx;
    margin-top: 20rpx;
    .form-list-title {
      font-size: 30rpx;
      font-weight: 700;
      color: #1a1a1a;
      padding-left: 23rpx;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 4rpx;
        display: inline-block;
        width: 8rpx;
        height: 32rpx;
        background: #eb5153;
        border-radius: 4rpx;
      }
      .form-title-tips {
        font-weight: 400;
        color: #666666;
      }
    }
    .u-flex-center-sb {
      .form-value {
        text-align: right;
      }
    }
    .form-item {
      padding: 30rpx 0 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
      .form-label {
        flex-shrink: 0;
        margin-right: 10rpx;
        font-size: 28rpx;
        .required {
          color: red;
        }
      }
      .textarea {
        margin-top: 20rpx;
        background: #f7f7f7;
        border: 1rpx solid #e6e6e6;
        border-radius: 10rpx;
        padding: 13rpx 22rpx;
        box-sizing: border-box;
        min-height: 162rpx;
        &:deep(textarea) {
          width: 100%;
          min-height: 162rpx;
        }
      }
      .form-value {
        flex: 1;
        font-size: 28rpx;
      }
      .placeholder {
        color: #cccccc;
      }
      .upload-view {
        text-align: left;
        padding-top: 10rpx;
        .upload-img-tips {
          font-size: 28rpx;
          color: #ff0000;
          margin-bottom: 5rpx;
        }
      }
    }
  }

  .form-btn {
    margin-top: 40rpx;
    padding: 28rpx 60rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    text-align: center;
    .checkbox-group-view {
      margin-bottom: 20rpx;
      display: inline-block;
    }
  }
}