epmet-work-pc-chengyang/src/assets/scss/modules/shequzhili/event-info.scss

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

.g-add{
  

  .g-add-page{
    display: flex;
    .g-left {
        box-sizing: border-box;
        width:40%;
        padding: 5px 10px;
    }
    .g-right {
        box-sizing: border-box;
        width: 60%;
        padding: 5px 10px;
    }

    .form{
      .cell-width-1{
        width: 250px
      }
      .avatar-uploader {
        margin: 0 0 0 20px;

    //     /deep/ .el-upload--picture-card{
    //       width: 100px;
    //       height: 100px;
    //     }
    //     /deep/ .el-upload{
    //         width: 100px;
    //         height: 100px;
    //         line-height: 100px;
    //     }
    //     /deep/ .el-upload-list--picture-card .el-upload-list__item{
    //         width: 100px;
    //         height: 100px;
    //         line-height: 100px;
    //     }
    //     /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    //         width: 100px;
    //         height: 100px;
    //         line-height: 100px;
    //     }
    //     /deep/ .avatar{
    //         width: 100px;
    //         height: 100px;
    //     }
    //     /deep/ .el-upload-list__item-status-label {
    //       display: block;
    //       position: absolute;
    //       right: -15px;
    //       top: -6px;
    //       width: 40px;
    //       height: 24px;
    //       background: #13ce66;
    //       text-align: center;
    //       -webkit-transform: rotate(45deg);
    //       transform: rotate(45deg);
    //       -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    //       box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    //   }
    //   /deep/ .el-upload-list__item-actions {
    //     position: absolute;
    //     width: 100%;
    //     height: 100%;
    //     left: 0;  
    //     top: 0;
    //     cursor: default;
    //     text-align: center;
    //     color: #fff;
    //     opacity: 0;
    //     font-size: 20px;
    //     background-color: rgba(0, 0, 0, 0.5);
    //     -webkit-transition: opacity .3s;
    //     transition: opacity .3s;
    // }
      }

    
    }
  }
}

.g-page {
    display: flex;
    width:100%;
    .g-total{
      width:100%;
    }
    .g-left {
        box-sizing: border-box;
        width: 65%;
        padding: 5px 10px;
    }
    .g-right {
        box-sizing: border-box;
        width: 35%;
        padding: 5px 10px;
    }
}

.g-process-info{
  .cell-width-area{
    width: 450px
  }
}
.div_map {
  position: relative;
}
.div_searchmap {
  z-index: 1000;
  position: absolute;
  top: 5px;
  left: 5px;
}

.div-btn{
  margin-top:50px;
  display: flex;
  justify-content: center;
}
.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;
}

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




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


.m-info {
  padding-left: 30px;
  font-size: 14px;
  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-pics {
      display: flex;
      margin: 20px 0;
      img {
          display: block;
          width: 32%;
          height: 90px;
          margin-right: 9px;
          object-fit: cover;
      }
  }

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

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

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

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

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

.m-row {
  // display: flex;
  justify-content: space-between;
  width:100%;
}

.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;
    // min-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;
    }

    .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;
                    }
                }
            }
        }
    }
}

.m-top {
    display: flex;
}

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

.div-satisfy{
  padding:10px 0 0;
  display:flex ;
  justify-content: flex-start;
  text-align: center;
  >div{
    margin-left:50px;
  }
  img{
    width:80px;
    height:80px;
  }

  .tip-satisfy{
    text-align: center;
    margin-top:10px
  }
}