address-management.scss 2.22 KB
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.page {
  .bgc {
    background: #F8F8F8;
  }

  .bg {}

  .main {
    .top-space {
      height: 20px;
    }

    // 内容容器通用样式
    .cont-wrap {
      margin: 20px auto 0;
      width: $contentWidth;
      background: #fff;
      padding: 30px 28px;
      @extend .bb;
      @extend .shadow;
    }

    .content {
      position: relative;

      .manage-wrap {}

      // 表单
      .form {
        position: relative;
        padding: 30px 30px;
        @extend .bb;

        .ebg {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
        }

        &-tit {
          position: relative;
          margin-bottom: 28px;
          display: flex;
          justify-content: space-between;
          font-size: 24px;

          .address-message {
            color: #333333;
            display: flex;
            align-content: center;
            align-items: center;
            height: 36px;

            .address {
              position: relative;
              font-size: 32px;
              margin-right: 20px;
              vertical-align: middle;

            }

            .used {
              color: #fff;
              background: #FF7B21;
              border-radius: 8px;
              display: inline-block;
              padding: 2px 12px;
              text-align: center;
            }
          }

          .address-edit {
            color: #3680EB;
            font-size: 28px;
            z-index: 11;
          }
        }

        &-item {
          position: relative;
          margin-bottom: 20px;
          font-size: 28px;
          display: flex;

          .label {
            min-width: 140px;
            color: #666666;
          }

          .cont {
            color: #333333;
            @extend .bb;
            padding-left: 20px;
          }
        }

      }

      // 添加地址
      .manage-add {
        width: $contentWidth;
        margin: 20px auto;
        @extend .bb;
        background: #fff;
        padding: 38px 30px;
        font-size: 32px;
        color: #3680EB;
        @extend .shadow;
      }
    }
  }
}