epmet-work-pc/src/assets/scss/modules/management/detail-main.scss

@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";



.cell-width-area{
  width: 450px
}


.div_searchmap {
  z-index: 1000;
  position: absolute;
  top: 5px;
  left: 5px;
}

.div-btn{
  margin-top:50px;
  // margin-bottom:20px;
  display: flex;
  justify-content: center;

  .item_btn {
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
    color:#fff;

    border: 1px dashed #0c81fe;
    border-radius: 6px;
    background-color: #0c81fe;
  }

  .mgl {
    margin-left: 20px;
  }
}
.cell-width-1{
  width: 250px
}
.cell-width-long{
  width: 450px
}
.cell-width-2{
  width: 350px
}

.cell-width-map {
  width: 200px;
}
.item_width_3 {
  margin-left: 10px;
  width: 150px;
}

.process-form{
  margin-top:20px;

  .process-title {
    margin-bottom: 25px;
    margin-left: -5px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333;
    line-height: 18px;
  }

  .process-title-vis{
    color: #fff;
  } 
}

.m-card {
    overflow-x: auto;
}


.m-btns {
    display: flex;
    justify-content: center;
}


.m-info {
  padding-left: 30px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  // width: 500px;

  .info-title {
      margin-top: 30px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333;
      line-height: 30px;
  }
  .info-content {
      margin: 20px 0;
  }
 

  .info-prop {
      position: relative;
      margin: 10px 0;
      display: flex;
      padding-left: 15px;
      padding-top:10px;
      // border-bottom: 1px solid #d8d8d8;

      .info-pics {
        display: flex;
        margin: 20px 0;
        img {
            display: block;
            width: 32%;
            height: 90px;
            margin-right: 9px;
            object-fit: cover;
        }
    }

      .line{
        text-decoration:underline;
        color: #3e8ef7;
      }
      .line:hover{
        cursor:pointer
      }
      .info-title-2 {
        
          flex: 0 0 100px;

      }
      .info-title-3{
        flex: 0 0 150px;
      }

      > span,
      > div {
          display: block;
          // max-width: 300px;
      }

      &::before {
          content: "";
          display: block;
          position: absolute;
          top: 19px;
          left: 0;
          width: 7px;
          height: 7px;
          background: #0c81fe;
          border-radius: 3px;
          margin-right: 10px;
      }

      .div_map {
        width:500px;
        padding-top:10px
      }
  }
  .info-prop-vis{
    color:#fff;
  }
}

.m-row-info{
  // padding-left: 30px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  display: flex;
  justify-content: flex-start;
  width:100%;

  .info-title {
    margin-top: 30px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333;
    line-height: 30px;
  }
  .info-content {
      margin: 20px 0;
  }
  .info-pics {
      display: flex;
      margin: 20px 0;
      img {
          display: block;
          width: 32%;
          height: 90px;
          margin-right: 9px;
          object-fit: cover;
      }
  }

  .info-prop {
    flex:0 0 300px;
    position: relative;
    margin: 10px 0;
    display: flex;
    padding-left: 15px;
    padding-top:10px;
    // border-bottom: 1px solid #d8d8d8;

    .line{
      text-decoration:underline;
      color: #3e8ef7;
    }
    .line:hover{
      cursor:pointer
    }
    .info-title-2 {
      // flex: 0 0 100px;
      // font-size: 15px;
    }

    > span,
    > div {
        display: block;
        // max-width: 300px;
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 19px;
        left: 0;
        width: 7px;
        height: 7px;
        background: #0c81fe;
        border-radius: 3px;
        margin-right: 10px;
    }

  }
  .info-prop-vis{
    color:#fff;
  }
}

//一行两列
.m-row-2{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  display: flex;
  justify-content: flex-start;
  width:100%;

  .info-prop {
    position: relative;
    width:50%;
    margin: 10px 0;
    display: flex;
    padding-left: 15px;
    padding-top:10px;

    .info-pics {
      display: flex;
      margin: 20px 0;
      img {
          display: block;
          width: 32%;
          height: 90px;
          margin-right: 9px;
          object-fit: cover;
      }
  }

    .line{
      text-decoration:underline;
      color: #3e8ef7;
    }
    .line:hover{
      cursor:pointer
    }
    .info-title-2 {
        flex: 0 0 100px;

    }
    .info-title-3{
      flex: 0 0 150px;
    }

    > span,
    > div {
        display: block;
        // max-width: 300px;
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 19px;
        left: 0;
        width: 7px;
        height: 7px;
        background: #0c81fe;
        border-radius: 3px;
        margin-right: 10px;
    }

    .div_map {
      width:500px;
      padding-top:10px
    }
    .div_map2 {
      width:400px;
      padding-top:10px
    }
}

}

.m-case {
  height: 600px;
  padding: 20px 0 20px 0;
  overflow-y: auto;
}

.m-row {
  // display: flex;
  // justify-content: space-between;
  width:100%;
  padding-left:50px;
  padding-right:50px;
}

.m-hint {
  position: relative;
  height: 300px;

  // 暂无数据
  img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
}

.m-line {
  min-width: 400px;

  .stat {
      margin: 20px 0 10px;
      display: flex;
      .stat-item {
          width: 33%;
          text-align: center;

          div {
              font-size: 17px;
              font-family: Source Han Serif SC;
              font-weight: 500;
              color: rgba(#000, 0.5);
              line-height: 24px;
              &.z-weak {
                  font-size: 12px;
                  font-family: Source Han Serif SC;
                  font-weight: 500;
                  color: rgba(#000, 0.5);
                  line-height: 24px;
              }
          }
      }
  }
}

.m-process {
    margin-top: 30px;
    margin-left: 15px;
    width: 400px;

    .process-title {
        margin-bottom: 25px;
        margin-left: -5px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333;
        line-height: 18px;
    }

    .process-title-vis{
      color: #fff;
    }

    .list {
        position: relative;
        box-sizing: border-box;
        margin-top: 30px/2;
        margin-left: 50px/2;
        padding: 0 0 0 30px/2;
        width: 680px/2;
        border-left: 3px solid #0c81fe;
        padding-right: 10px;

        &::before {
            content: "";
            position: absolute;
            z-index: 1;
            display: block;
            top: -2px/2;
            left: -2px/2;
            width: 5px/2;
            height: 20px/2;
            background-color: #333;
        }

        .item {
            position: relative;
            z-index: 2;
            margin-bottom: 8px;
            padding-bottom: 8px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333;
            line-height: 24px;
            padding-left: 20px;
            padding-top: 1px;

            &::before {
                content: "";
                display: block;
                position: absolute;
                top: -5px;
                left: -11px;
                width: 18px;
                height: 18px;
                background: #0c81fe;
                border: 4px solid lighten(#0c81fe, 15);
                border-radius: 100%;
            }

            &.z-on {
                &::before {
                    background: #e08400;
                    border-color: lighten(#e08400, 15);
                }
            }

            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }

            .item-row {
                margin-top: -10px;
                margin-bottom: 10px;
                display: flex;
            }

            .name {
                position: relative;
                padding: 0 10px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #fff;
                line-height: 22px;
                height: 22px;
                border-radius: 10px 0 10px 0;
                background-color: #0c81fe;
                // background-color: #e08400;
            }

            .date {
                margin-left: 10px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #7ca1d2;
                line-height: 25px;
            }

            .detail {
                @include cs;
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 5px;
                display: flex;

                .detail-field {
                    flex:0 0 100px;
              
                    text-align: justify;
                    text-align-last: justify;
                }
                .detail-value {
                    // width: 78%;
                    .detail-link {
                        display: inline;
                    }
                }
            }

            .attachement-list {
                padding-left: 80px;
                a {
                    display: block;
                    cursor: pointer;
                    color: #4df0ff;
                    font-size: 14px;

                    i {
                        color: #333;
                    }
                }
            }
        }

        .item-vis{
          color:#fff
        }
    }
}

.m-top {
    display: flex;
}

.m-chart {
    min-height: 200px;
}