Highways4Good/weapp/src/packages/patrol/index.scss

page {
  height: 100%;
  width: 100vw;
  background-color: #f6f6f6;

  .patrol {
    font-size: 28px;
  }

  .report-type {
    height: 96px;
    background-color: #fff;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      margin-left: 30px;
    }

    .radio {
      margin-right: 30px;
    }
  }

  .road-section {
    display: flex;
    justify-content: left;
    height: 96px;
    align-items: center;
    background-color: #fff;
    margin-bottom: 5px;

    .title {
      margin-left: 30px;
    }

    .input {
      width: 200px;
      margin: 0 10px;
    }

    .img-r {
      width: 24px;
      height: 14px;
      margin: 0 10px;
    }
    .img-l {
      width: 24px;
      height: 14px;
      margin: 0 10px;
    }
  }

  .address {
    background-color: #fff;
    display: flex;
    align-items: center;
    height: 96px;
    margin-bottom: 5px;

    .title {
      margin-left: 30px;
    }

    .input {
      margin-left: 20px;
      flex-grow: 1;
    }
  }

  .patrol-img {
    background-color: #fff;
    padding: 20px;
  }

  .conserve-img {
    background-color: #fff;
    padding: 20px;

    .horizontal-line {
      height: 30px;
      width: 100%;
      border-radius: 5px;
      margin-top: 10px;
      display: flex;
      justify-content: left;
      align-items: center;

      .circle {
        margin-left: 4px;
        width: 22px;
        height: 22px;
        background-color: #fff;
        border-radius: 50%;
      }

      .text {
        margin-left: 46px;
        font-size: 24px;
      }
    }
    .hl-one {
      background-color: #DFDFDF;

      .c-one {
        border: solid 4px #999999;
      }

      .t-one {
        color: #999999;
      }
    }
    .hl-two {
      background-color: #f7d3a5;

      .c-two {
        border: solid 4px #FE9B1C;
      }

      .t-two {
        color: #FE9B1C;
      }
    }
    .hl-three {
      background-color: #a0f3a4;

      .c-three {
        border: solid 4px #08D514;
      }

      .t-three {
        color: #08D514;
      }
    }

    .img-picker {
      margin: 20px;
    }
  }

  .img-box {
    display: flex;
    flex-wrap: wrap;

    .img {
      width: 170px;
      height: 170px;
      margin: 10px 0 0 10px;
    }
  }

  .sub-btn {
    width: 70%;
    margin: 80px auto;
  }

  .del-btn {
    width: 70%;
    margin: 80px auto;
    background-color: #C23434;
    border-color: #C23434;
  }
}