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;

    .tabs {
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      background: #fff;
      padding: 0 13px 0 68px;
      border-bottom: 1px solid #f1f1f1;
      .tabs-item {
        position: relative;
        height: 100%;
        opacity: 1;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        a {
          color: inherit;
          height: 100%;
          padding-left: 55px;
          display: flex;
          align-items: center;
        }
      }
      .tabs-item-active {
        font-weight: 600;
        color: #222222;
        &:after {
          position: absolute;
          content: " ";
          bottom: 1px;
          width: 22px;
          height: 3px;
          opacity: 1;
          background: #308eff;
          border-radius: 2px;
        }
      }
    }

    .selectArea {
      display: flex;
      padding: 39px 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: 14px;
                  line-height: 21px;
                  white-space: nowrap;
                }
              }
              &.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: 14px;
                line-height: 21px;
                white-space: nowrap;
              }
            }
          }
        }


      }

    }

    .breadcrumb {
      margin-top: 20px;
      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%;
            min-height: 20px;
            max-height: 40px;
            line-height: 20px;
            font-size:13px;
            font-weight:500;
            color:rgba(102,102,102,1);
            text-align: left;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .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;
              }
            }
          }
          .bottomArea {
            margin-top: 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .companyInfo {
              display: flex;
              width: 70%;
              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;
              }
            }
            .publishTime {
              flex-shrink: 0;
              height:20px;
              font-size:14px;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:20px;
            }
          }
        }
        .noneData {
          min-height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            text-align: center;
          }
        }
      }
    }
  }

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

}

.jobListMobile {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  h1 {
    font-size: pxtovw(14);
    color:#333;
    line-height: pxtovw(30);
    padding-left: pxtovw(10);
  }
  a {
    display: block;
  }
  .topSelect {
    height: pxtovw(45);
    margin-bottom: pxtovw(5);
  }
  .breadcrumb {
    padding: pxtovw(5) pxtovw(10);
    display: flex;
    align-items: center;

    a, p, h1 {
      color: #666;
      font-size: pxtovw(14);
    }
  }
  .listArea {
    height: calc(100vh - 80px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f6f5f8;
    -webkit-overflow-scrolling: touch;

    &.noneInWx {
      height: calc(100vh - 80px - 64px);
    }

    .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;
        min-height: pxtovw(170);
        width: 100%;
        cursor: pointer;
        flex-direction: column;
        padding: pxtovw(17) pxtovw(10) pxtovw(7) pxtovw(10);

        .topArea {
          width: 100%;
          height: pxtovw(22);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            max-width:pxtovw(231);
            height:pxtovw(22);
            font-size:pxtovw(16);
            font-weight:600;
            color:rgba(34,34,34,1);
            line-height:pxtovw(22);
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
          }
          .right {
            height:pxtovw(20);
            font-size:pxtovw(17);
            font-weight:600;
            color:rgba(48,142,255,1);
            line-height:pxtovw(20);
          }
        }
        .workDesc {
          margin-top: pxtovw(7);
          flex-shrink: 0;
          height:pxtovw(36);
          font-size:pxtovw(13);
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:pxtovw(18);
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .labelList {
          margin-top: pxtovw(11);
          width: 100%;
          display: flex;
          overflow: hidden;
          .label {
            margin-left: pxtovw(10);
            background:rgba(238,238,238,1);
            border-radius: pxtovw(1);
            box-sizing: content-box;
            padding: pxtovw(5) pxtovw(10);
            &:nth-child(1) {
              margin-left: 0;
            }
            p {
              height:pxtovw(16);
              font-size:pxtovw(15);
              font-weight:500;
              color:rgba(102,102,102,1);
              line-height:pxtovw(16);
              transform: scale(0.733);
              transform-origin: center;
            }
          }
        }
        .companyInfo {
          margin-top: pxtovw(11);
          padding-top: pxtovw(11);
          display: flex;
          width: 100%;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          border-top:pxtovw(1) solid rgba(136,136,136,0.1);;
          .logo {
            width:pxtovw(18);
            height:pxtovw(18);
            font-size: 0;
            img {
              width:pxtovw(18);
              height:pxtovw(18);
              border-radius: pxtovw(2);
            }
          }
          .companyName {
            margin-left: pxtovw(7);
            height:pxtovw(16);
            font-size:pxtovw(11);
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:pxtovw(16);
          }

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

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