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

$contentWidth:560px;
$iptHeight:80px;

.page {
  .bgc {}

  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .decoration {
    position: relative;

    .d1 {
      position: absolute;
      width: 193px;
      height: 625px;
      left: 0;
      top: -120px;
    }

    .d2 {
      position: absolute;
      width: 194px;
      height: 369px;
      right: 0;
      top: 200px;
    }
  }

  .main {
    position: relative;

    .top-space {
      height: 40px;
    }

    .content {
      position: relative;

      .top {
        .tit {
          text-align: center;
          width: 369px;
          height: 86px;
          margin: 0 auto;

          image {
            width: 369px;
            height: 86px;
          }
        }

        .display {
          margin: 24px auto 0;
          position: relative;
          width: 190px;
          height: 190px;
          border-radius: 95px;
          background-image: radial-gradient(circle at 0 0, #ffffff, #d8d8d8);
          @extend .fcc;

          .prod {
            max-width: 200px;
            max-height: 200px;
          }

          .close {
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }

        .name {
          text-align: center;
          color: #ffffff;
          font-size: 28px;
          margin-top: 20px;
        }
      }

      .table {
        position: relative;
        margin: 12px auto 0;
        width: 744px;
        height: 840px;

        .ebg {
          position: absolute;
          width: 744px;
          height: 840px;
        }

        .tips {
          color: #ba3039;
          font-size: 24px;
        }

        .space1 {
          height: 88px;
        }

        .border {
          position: relative;
          width: $contentWidth;
          margin: 0 auto;
          height: 840px;
        }

        .submit-btn {
          @include cb(300px, 80px);
          position: absolute;
          left: 0;
          right: 0;
          bottom: 68px;
          margin: 0 auto;
        }

        .edit {
          .form {
            margin-top: 40px;

            .ipt {
              color: #333333;
              width: $contentWidth;
              height: $iptHeight;
              border-radius: 40px;
              border: solid 1PX #b83138;
              background-color: #ffffff;
              display: flex;
              margin-bottom: 30px;

              .label {
                text-align: center;
                width: 110px;
                height: $iptHeight;
                line-height: $iptHeight;
                color: #b93138;
                font-size: 28px;
              }

              .input {
                flex: 1;
                height: $iptHeight;
                @extend .bb;
                padding-right: 24px;
              }

              .area {
                display: flex;
                align-items: center;

                &-item {
                  @include ellipsis(1);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 140px;
                  @extend .bb;
                  padding: 0 12px;
                  font-size: 26px;

                  .icon {
                    width: 15px;
                    height: 9px;
                    margin-left: 8px;
                  }

                  .val{
                    // @extend

                    @include ellipsis(1);
                  }

                  .holder{

                  }
                }

                .line {
                  width: 2px;
                  height: 30px;
                  background-color: #b83138;
                }


              }

              .textarea {
                height: $iptHeight;
                flex: 1;
                min-height: 160px;
                @extend .bb;
                padding-right: 24px;
                padding-top: 4px;
                margin-left: -10px;
              }
            }

            .ipt2 {
              height: auto;
              // min-height: 160px;
            }
          }


        }

        .result {
          .form {
            margin: 58px auto 0;
            font-size: 28px;
            color: #b93138;

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

              .label {
                width: 80px;
              }

              .val {
                color: #333333;
                flex: 1;
              }
            }
          }
        }
      }


    }
  }
}