proginn-frontend/assets/css/job/index.scss

@import "../scssCommon";

.jobList {

  .topArea {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
  }

  .contentArea {
    background-color: #f7f7f7;
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;

    .selectArea {
      display: flex;
      padding: 45px 45px 45px 10px;
      flex-direction: column;
      background: #fff;

      .selectContent {
        margin-top: 30px;
        &:first-child {
          margin-top: 0;
        }

        .content {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          position: relative;


          .left {
            flex-shrink: 0;
            width: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            align-self: flex-start;
            p {
              text-align: left;
              height: 21px;
              font-size: 15px;
              color: rgba(46, 55, 67, 1);
              line-height: 21px;
              font-weight: 500;
            }
          }

          .right {
            flex-grow: 1;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .cell {
              width: 88px;
              height: 38px;
              border-radius: 2px;
              border: 1px solid rgba(239, 239, 239, 1);
              display: flex;
              justify-content: center;
              align-items: center;
              margin-left: 10px;
              cursor: pointer;

              &:nth-child(8n+1), &:first-child {
                margin-left: 0;
              }
              &:nth-child(n+9) {
                margin-top: 10px;
              }

              p {
                height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(85, 85, 85, 1);
                line-height: 20px;
              }
              &.selected {
                border: 1px solid rgba(48, 142, 255, 1);
                p {
                  color: rgba(48, 142, 255, 1);
                  font-weight: 500;
                  height: 21px;
                  font-size: 15px;
                  line-height: 21px;
                }
              }
              &.noneClick {
                opacity: 0.6;
                cursor: not-allowed;
              }
            }
          }

          .more {
            position: absolute;
            right: 0;
            top: 0;
            line-height: 38px;
            color: #999;
            cursor: pointer;
          }
        }

        .smallContent {
          background-color: #f7f7f7;
          min-height: 50px;
          width: 750px;
          margin-top: 10px;
          margin-left: 90px;
          border-radius: 8px;
          flex-grow: 1;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          padding: 20px;

          .cell {
            width: 88px;
            height: 38px;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            //
            //&:nth-child(8n+1), &:first-child {
            //  margin-left: 0;
            //}
            //&:nth-child(n+9) {
            //  margin-top: 10px;
            //}
            p {
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              color: rgba(85, 85, 85, 1);
              line-height: 20px;
            }
            &.selected {
              background-color: #dcefff;
              p {
                color: #2994f2;
                font-weight: 500;
                height: 21px;
                font-size: 15px;
                line-height: 21px;
              }
            }
          }
        }


      }

    }

    .breadcrumb {
      margin-top: 30px;
      display: flex;
      a, p, h1 {
        color: #666;
        font-size: 14px;
      }
    }

    .listArea {
      //margin-top: 80px;

      .sTitle {
        height: 25px;
        font-size: 18px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 25px;
        margin-bottom: 14px;
      }
      .list {
        .cell {
          background: #FFF;
          display: flex;
          justify-content: center;
          height: 180px;
          width: 100%;
          margin-top: 10px;
          cursor: pointer;
          flex-direction: column;
          padding: 30px 20px;

          .topArea {
            width: 100%;
            height: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
              height:24px;
              font-size:17px;
              font-weight:500;
              color:rgba(34,34,34,1);
              line-height:24px;
            }
            .right {
              height:22px;
              font-size:19px;
              font-weight:bold;
              color:rgba(255,51,30,1);
              line-height:22px;
            }
          }
          .workDesc {
            margin-top: 5px;
            flex-shrink: 0;
            width: 90%;
            height:25px;
            line-height: 25px;
            font-size:13px;
            font-weight:500;
            color:rgba(102,102,102,1);
            text-align: left;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .labelList {
            margin-top: 5px;
            width: 100%;
            display: flex;
            .label {
              margin-left: 10px;
              background:rgba(238,238,238,1);
              border-radius:1px;
              box-sizing: content-box;
              padding: 3px 10px;
              &:nth-child(1) {
                margin-left: 0;
              }
              p {
                height:17px;
                font-size:12px;
                font-weight:400;
                color:rgba(102,102,102,1);
                line-height:17px;
              }
            }
          }
          .companyInfo {
            margin-top: 20px;
            display: flex;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            .logo {
              width:20px;
              height:20px;
              font-size: 0;
              img {
                width:20px;
                height:20px;
                border-radius: 2px;
              }
            }
            .companyName {
              margin-left: 7px;
              height:18px;
              font-size:13px;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:18px;
              text-align: left;
            }

          }

        }
        .noneData {
          min-height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            text-align: center;
          }
        }
      }
    }
  }

  .pagination {
    margin: 50px;
    text-align: center;
  }

}

.main {
  margin-top: 0 !important;
  &.isMobile {
    width: 100vw;
  }
}