sourcecode/front/project/www/routes/page/hard/index.less

@charset "utf-8";

#hard {
  height: 100%;

  .layout {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    .layout-header {
      height: 84px;
      margin: 0 30px;
      border-bottom: 1px solid rgba(233, 239, 248, 1);
      text-align: center;

      .left {
        line-height: 84px;
        position: absolute;

        .title {
          color: #000000;
          display: inline-block;
          font-size: 20px;
          font-weight: 600;
        }
      }

      .right {
        float: right;
        text-align: right;
        padding: 20px 0;
        color: #5E677B;

        .text {
          line-height: 22px;
        }
      }
    }
  }

  .layout-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    box-shadow: 0px -4px 14px 0px rgba(189, 199, 215, 0.16);
    position: relative;

    .left {
      position: absolute;
      left: 30px;
      top: 0;
    }

    .right {
      position: absolute;
      right: 30px;
      top: 0;

      .button.lager {
        font-weight: 500;
      }
    }

    .center {
      padding-left: 108px;
      padding-right: 165px;
      display: flex;

      .p {
        flex: 1;
        margin-top: 22px;
      }

      .t {
        width: 40px;
        text-align: right;
      }
    }

    .progress.basic {
      background: #8897A8;

      .progress-item {
        background: #217DFF;
      }
    }
  }

  .layout-body {
    background: #fff;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    padding: 20px 30px;

    .title {
      color: #050930;
      margin-bottom: 10px;
    }

    .desc {
      color: #050930;
      margin-bottom: 30px;
    }

    .label {
      color: #000000;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .input {
      margin-bottom: 20px;
    }

    .select {
      border-radius: 2px;
      border: 1px solid rgba(200, 209, 218, 1);
      padding: 10px 20px;
      margin-bottom: 40px;

      .select-title {
        color: #050930;
        margin-bottom: 10px;
      }
    }

    .analysis {
      margin-bottom: 40px;

      .tabs {
        width: 320px;

        .tab.active {
          background: #F4F9FE;
        }
      }

      .result {
        padding: 20px;
        background: #F4F9FE;
      }
    }
  }
}