@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.page {
  padding-bottom: $pageBottom;

  .bgc {
    background: #F8F8F8;
  }

  .bg {}

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

    .content {
      position: relative;

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

      // 产品
      .product {
        width: $contentWidth;
        margin: 0 auto;

        &-item {
          background: #fff;
          width: $contentWidth;
          height: 260px;
          margin: 20px 0;
          @extend .shadow;
          @extend .bb;
          padding: 30px;
          display: flex;
          justify-content: space-between;

          .image-wrap {
            width: 200px;
            height: 200px;
            border: solid 1px #f0f0f0;
            border-radius: 8px;
            @extend .fcc;

            .image {
              width: 180px;
              height: 180px;
            }
          }

          .cont {
            position: relative;
            flex: 1;
            @extend .bb;
            padding-left: 20px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;

            .name {
              width: 100%;
              font-size: 36px;
              color: #333333;
              @include ellipsis(2);
            }

            .integral {
              width: 100%;
              margin-top: 16px;
              font-size: 28px;
              color: #FF7900;
            }
          }


        }
      }

      // 京东卡使用规则
      .use-rule {

        color: #666666;
        font-size: 28px;
        line-height: 48px;
      }

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

      // 表单
      .form {
        padding: 30px 30px 40px;

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

          .address-message {
            color: #333333;
          }

          .address-edit {
            color: #3680EB;
          }
        }

        &-item {
          margin-bottom: 30px;
          font-size: 28px;
          display: flex;

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

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

        &-remark {
          background: #F8F8F8;
          border: 0 solid #CCCCCC;
          border-radius: 4px;
          min-height: 200px;
          @extend .bb;
          padding: 20px;
          color: #333333;
          font-size: 28px;
        }
      }
    }

    // 底部
    .bottom {
      position: fixed;
      bottom: 0;

      // 提交栏
      .submit-bar {
        width: 750px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;

        &-cont {
          flex: 1;
          height: 100px;
          line-height: 100px;
          font-size: 32px;
          @extend .bb;
          padding: 0 30px;

          .integral {
            color: $colorBlue;
          }
        }

        &-btn {
          background: #3680EB;
          color: #fff;
          font-size: 32px;
          @include btn-center(240px, 100px);
        }
      }
    }
  }
}