party_construct_web/src/components/UpdatePartyDevelop/scss/UpdatePartyDevelop.scss

.updatepartydevelop {
  &-head {
    margin-bottom: 20px;
    width: 100%;
    padding: 15px 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 0px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-title {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          height: 37px;
          line-height: 37px;
        }

        &:last-child {
          margin-left: 15px;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 37px;
          letter-spacing: 1px;
        }

        img {
          width: 34px;
          height: 34px;
        }
      }
    }
  }

  &-title {
    display: flex;
    align-items: center;

    div {
      &:first-child {
        height: 37px;
        line-height: 37px;
      }

      &:last-child {
        margin-left: 15px;
        height: 37px;
        font-size: 26px;
        font-weight: 400;
        color: #4f4f4f;
        line-height: 37px;
        letter-spacing: 1px;
      }

      img {
        width: 34px;
        height: 34px;
      }
    }
  }

  &-line {
    width: 100%;
    height: 1px;
    background: #d8dce5;
    margin-bottom: 15px;
  }

  &-basic {
    padding: 20px 20px 50px;
    margin-bottom: 20px;
    // margin: 87px 0 20px 0;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    ::v-deep {
      .el-form-item__content {
        .area-cascader-wrap {
          .area-select {
            height: 36px;
            .area-selected-trigger {
              padding: 0 25px 0 15px;
              color: #c0c4cc;
            }
          }

          .area-select.large {
            width: 100%;
          }
        }
      }
    }
  }

  &-situation {
    padding: 20px 20px 72px;
    margin-bottom: 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-tabs.el-tabs {
      margin-top: 20px;

      ::v-deep {
        .el-tabs__item {
          font-size: 18px;
          font-weight: 500;
          color: #4f4f4f;
          opacity: 0.9;
        }

        .el-tabs__active-bar {
          background-color: #de0010;
        }

        .el-tabs__item.is-active {
          color: #de0010;
          background: #f9e9ea;
        }
      }
    }

    .roc-tabpane {
      display: block;
      width: 100%;
      min-height: 600px;

      &-head {
        display: flex;
        align-items: center;
        width: 100%;
        height: 94px;

        .tabpane-head-left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 94px;
          height: 94px;
          border: 4px solid #979797;
          border-radius: 50%;

          &.is-active {
            border: 4px solid #de0010;
          }

          &-title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 78px;
            height: 78px;
            background: #979797;
            border-radius: 50%;
            font-size: 30px;
            font-weight: 800;
            color: #ffffff;
            line-height: 42px;
            letter-spacing: 1px;

            &.is-active {
              background: #de0010;
            }
          }
        }
        .tabpane-head-right {
          margin-left: 15px;
          height: 50px;
          font-size: 36px;
          font-weight: 400;
          color: #111111;
          line-height: 50px;
          letter-spacing: 1px;
        }
      }

      &-line {
        margin-left: 46px;
        width: 2px;
        height: 46px;
        border: 2px solid #979797;

        &.is-active {
          border: 2px solid #de0010;
        }
      }

      &-step {
        width: 100%;

        &-item {
          display: flex;
          width: 100%;

          .step-item-left {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 16px;
            width: 62px;
            height: 62px;
            border: 2px solid #979797;
            border-radius: 50%;
            font-size: 36px;
            font-weight: 400;
            color: #979797;
            line-height: 50px;
            letter-spacing: 1px;

            &.is-active {
              border: 2px solid #de0010;
              color: #de0010;
            }
          }

          .step-item-right {
            flex: 1;
            margin-left: 10px;
            padding-bottom: 10px;

            &-title {
              margin-top: 10px;
              margin-bottom: 8px;
              height: 28px;
              font-size: 20px;
              font-weight: 400;
              color: #111111;
              line-height: 28px;
            }

            &-form {
              ::v-deep {
                .el-form-item.step-form-item {
                  margin-bottom: 10px;
                }

                .el-form-item__label {
                  padding: 0;
                  text-align: left;
                }
              }

              .step-item-twenty_third {
                margin-top: 10px;
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #ff0000;
                line-height: 22px;
              }

              &-addthoughtreport {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 33px;
                border: 1px solid #dadada;
                font-size: 16px;
                font-weight: 400;
                color: #c3c3c3;
                cursor: pointer;
              }
            }
          }
        }

        &-tail {
          position: absolute;
          margin-left: 46px;
          width: 2px;
          border: 2px solid #979797;

          &.is-active {
            border: 2px solid #de0010;
          }
        }
      }

      &-didnotpass-btngroup {
        margin: 50px 0 0 109px;

        .el-button + .el-button {
          margin-left: 30px;
        }
      }
    }
  }
}

::v-deep {
  .didnotpass-btngroup-tipsbtn {
    color: #de0010;
    background-color: #ffffff;
    border-color: #de0010;
  }
}