@import '@/common/scss/base.scss';
.volume-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .head {
    padding: 0 $sp-lg;
    padding-bottom: $sp-lg * 4;
    color: $color-f;
    position: relative;
    overflow: hidden;
    .logo {
      height: $size-xl;
      margin-top: $sp-md;      
      img {
        height: 100%;
        width: auto;
      }
    }
    .bg {
      position: absolute;
      top: -30%;
      left: -15%;
      right: -15%;
      bottom: 0;
      border-radius: 50%;
      background-image: linear-gradient($color-lg, $color);
    }
    .cont {
      position: relative;
      z-index: 2;
    }
    h1 {
      margin: 0;
      padding-top: $sp-xs;
      padding-bottom: $sp-lg;
      text-align: center;
      font-size: $size-md * 2;
      font-family: 'PangMenZhengDao';
    }
    .des {
      padding-bottom: $sp-lg;
      font-size: $size-xs;
    }
  }
  .body {
    flex: 1;
  }
  .volume-content {
    position: relative;
    z-index: 2;
    margin-top: -$sp-lg * 4;
    > li {
      list-style: none;
      padding: $sp-lg;
      background: $color-f;
      margin: $sp-lg;
      margin-top: 0;
      border-radius: $sp-md;
      box-shadow: 0 0 4px 1px $color-5;

      > p {
        margin: 0;
        font-weight: 500;
        position: relative;
        > label {
          color: $color-error;
        }
        > i {
          position: absolute;
          left: -$sp-lg;
          top: 0;
          height: 100%;
          width: 4px;
          background: $color;
          &.cur {
            background: $color-success;
          }
        }
      }
      .vertical {
        margin-bottom: $sp-sm;
        &:last-child {
          margin-bottom: 0;
        }
      }
      > div {
        padding-top: $sp-lg;
        display: flex;

        > textarea, input {
          border: 0;
          border-bottom: 1px solid $color-5;
          width: 100%;
        }
        > textarea {
          min-height: 86px;
        }

        &.align-right {
          justify-content: flex-end;
          textarea,
          input {
            text-align: right;
          }
        }
      }
    }
  }
  .footer {
    position: relative;
    z-index: 3;
    padding: $sp-md $sp-lg;
    background: $color-f;
    box-shadow: 0 -2px 4px 1px $color-5;
  }
}