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;

      .content {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 30px;
        position: relative;
        &:first-child {
          margin-top: 0;
        }

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

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

    .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 {
            width: 100%;
            margin-top: 5px;
            height:25px;
            font-size:13px;
            font-weight:500;
            color:rgba(102,102,102,1);
            line-height:25px;
            text-align: left;
          }
          .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;
            .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-top: 70px;
    text-align: center;
  }

}

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