bocai_supplyChain_pc/src/components/FirstJob/detail.vue

<template>
  <div class="detail-container">
    <div class="maincontent w">
      <div class="maincontentleft">
        <div class="subset">
          <div class="subsetleft">
            <div class="imgbox">
              <a-carousel
                arrows
                :autoplay="true"
                effect="fade"
                :dots="false"
                ref="scrollimg"
              >
                <div
                  slot="prevArrow"
                  class="custom-slick-arrow"
                  style="left: 5px; z-index: 99"
                >
                  <a-icon type="left-circle" />
                </div>
                <div
                  slot="nextArrow"
                  class="custom-slick-arrow"
                  style="right: 5px; z-index: 99"
                >
                  <a-icon type="right-circle" />
                </div>
                <img src="../../assets/无锡健鼎.png" alt="" />
                <img src="../../assets/美特科技.png" alt="" />
                <img src="../../assets/艾思飞.png" alt="" />
                <img src="../../assets/得物.png" alt="" />
              </a-carousel>
            </div>
            <div class="jobinfobox">
              <div class="jobname">无锡健鼎科技小时工</div>
              <div class="jobinfo">
                <span>无锡市 ｜ </span>
                <span> 锡山区｜</span>
                <span> 男女不限｜</span>
                <span> 16-45岁</span>
              </div>
              <div class="jobtag">
                <span>返费</span>
                <span>空调车间</span>
                <span>免费体检</span>
                <span>工价高</span>
              </div>
              <div class="jobpricemonth"><span>7500-8500</span>元/月</div>
              <div class="jobpricehour"><span>30</span>元/小时</div>
              <div class="billbutton">
                <span>服务费 <i>1.5</i>元/小时</span>
                <button>录单</button>
              </div>
            </div>
          </div>
        </div>
        <div class="jobinformationbox">
          <h1><span class="beforeblock"></span>职位信息</h1>
          <dl>
            <dt>薪资待遇</dt>
            <dd>
              <ul>
                <li>1. 1.32元/小时，底薪2280，综合工资6000-8000元/月；</li>
                <li>
                  2. 1月份保底8000≈32元/小时，2月份保底10000≈38.5元/小时；
                </li>
                <li>3. 员工1月、2月最后一天在岗打卡即可享受保底；</li>
                <li>4. 满15天车补150元（随补贴打入员工薪资卡）；</li>
                <li>5. 员工入职须做满95天否则每月保底工资降1000元；</li>
                <li>6. 保底工资包含各种奖励金、补贴等。</li>
              </ul>
            </dd>
            <dt>岗位说明</dt>
            <dd>
              <ul>
                <li>1. 男16-50，女16-45，会26个英文字母，会简单的汉字；</li>
                <li>2. 烟疤纹身发图片确认，返任员工提前发身份证照片查询；</li>
                <li>3. 主要生产制造印刷电路板（PCB）；</li>
              </ul>
            </dd>
            <dt>食宿福利</dt>
            <dd>
              <ul>
                <li>1. 免费工作餐加餐；</li>
                <li>2. 住宿费90元/月，含水电费、夏冬空调使用费50元/月；</li>
              </ul>
            </dd>
            <dt>其他说明</dt>
            <dd>
              <ul>
                <li>1. 迟到、早退、旷工、请假每小时扣35元；</li>
                <li>
                  2.
                  体检费55（体检五大项，血常规，尿常规，胸透，心电图，肝功能包含谷丙，谷草，血压，五官）；
                </li>
                <li>3. 面试需知：提供无卡控区域的行动轨迹，健康码为绿色；</li>
                <li>4. 南阳、驻马店、平顶山户籍不享受此政策；</li>
              </ul>
            </dd>
          </dl>
        </div>
      </div>
      <div class="maincontentright">
        <div class="hotphone">
          <h1>服务热线</h1>
          <p>0371-666666666</p>
        </div>
        <div class="companyinfo">
          <div class="companydetail">
            <h1><span class="beforeblock"></span>企业详情</h1>
            <p>无锡健鼎科技</p>
            <div class="imgbox">
              <img src="../../assets/无锡健鼎.png" alt="" />
            </div>
            <p>
              我是文案我很长很长我是文案我 很长很长我是文案我很长很长我
              是文案我很长很长我是文案我很 长很长
            </p>
          </div>
          <div class="companylocation">
            <h1><span class="beforeblock"></span>企业位置</h1>
            <div class="imgbox">
              <img src="../../assets/map.png" alt="" />
            </div>
          </div>
        </div>
        <div class="recommendposition">
          <h1><span class="beforeblock"></span>推荐职位</h1>
          <div
            class="jobinfobox"
            v-for="(item, index) in relationList"
            :key="index"
          >
            <div class="imgbox">
              <img src="../../assets/推荐职位（吉利汽车）.png" alt="" />
              <span>服务费<i>1.3</i>元/小时</span>
            </div>
            <div class="jobname">宁波吉利汽车小时工</div>
            <div class="jobinfo">
              <span>宁波市 |</span>
              <span> 16-45岁</span>
            </div>
            <div class="jobtag">
              <span>返费</span>
              <span>短期工</span>
              <span>人走账清</span>
            </div>
            <div class="jobprice"><span>30</span>元/小时</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      relationList: [1, 2, 3],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // console.log(this.$router.matcher.match());
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    console.log(this.$refs.scrollimg);
    this.$refs.scrollimg.goTo(0, false);
  },
  // 组件方法
  methods: {},
};
</script>

<style scoped lang="less">
.detail-container {
  overflow: hidden;
  background-color: #fff;
}
/deep/ .maincontent {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  .maincontentleft {
    width: 914px;
    margin-right: 16px;
    text-align: left;
    .subset {
      display: flex;
      justify-content: space-between;
      padding: 16px;
      margin-bottom: 16px;
      width: 914px;
      height: 302px;
      border: 1px solid #eeefef;
      .subsetleft {
        display: flex;
        .imgbox {
          width: 360px;
          height: 270px;
          margin-right: 20px;
          // .slick-track {
          // transition: all 0s ease 0s !important;
          // }
          img {
            width: 100%;
            height: 100%;
          }

          .ant-carousel {
            .slick-slide {
              text-align: center;
              // height: 160px;
              // line-height: 160px;
              background: #364d79;
              overflow: hidden;
            }
            .custom-slick-arrow {
              width: 40px;
              height: 40px;
              font-size: 40px;
              margin-top: -20px;
              border-radius: 50%;
              color: #fff;
              background-color: rgba(31, 45, 61, 0.11);
              opacity: 0.6;
            }
            .custom-slick-arrow:before {
              display: none;
            }
            .custom-slick-arrow:hover {
              opacity: 0.8;
            }
            .slick-slide h3 {
              color: #fff;
            }
          }
        }
        .jobinfobox {
          .jobname {
            // margin: 12px 0;
            font-size: 24px;
            font-weight: 600;
            text-align: left;
            color: #4d575e;
            line-height: 33px;
          }
          .jobinfo {
            margin-top: 16px;
            opacity: 0.5;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            color: #4d575e;
            line-height: 25px;
          }
          .jobtag {
            margin-top: 16px;

            span:first-child {
              color: #fe6100;
              background: rgba(254, 97, 0, 0.1);
            }
            span {
              margin-right: 8px;
              font-size: 18px;
              padding: 4px 8px;
              text-align: left;

              background: rgba(51, 51, 51, 0.1);
              border-radius: 4px;
            }
          }
          .jobpricemonth {
            margin-top: 16px;
            font-size: 18px;
            text-align: left;
            color: #4d575e;
            line-height: 25px;
          }
          .jobpricehour {
            margin-top: 12px;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            color: #fe6100;
            // line-height: 24px;
            span {
              vertical-align: baseline;
              font-size: 24px;
              line-height: 24px;
            }
          }
          .billbutton {
            display: flex;
            justify-content: start;
            margin-top: 20px;
            span {
              padding: 13px;
              margin-right: 24px;
              border-radius: 4px;
              background-color: rgba(254, 97, 0, 0.1);
              font-size: 24px;
              font-weight: bold;
              color: #fe6100;
              line-height: 24px;
            }
            button {
              width: 160px;
              height: 50px;
              border: none;
              background-color: #fe6100;
              color: #fff;
              font-weight: bold;
              font-size: 24px;
              border-radius: 4px;
            }
          }
        }
      }
    }
    .jobinformationbox {
      width: 914px;
      border: 1px solid #eeefef;
      padding: 20px;
      h1 {
        font-size: 24px;
        text-align: left;
        color: #4d575e;
        line-height: 33px;
        span {
          height: 25px;
        }
      }
      dl {
        dt {
          margin: 30px 0 20px 0;
          font-size: 20px;
          text-align: left;
          color: #4d575e;
          line-height: 28px;
        }
        dd {
          ul {
            li {
              line-height: 32px;
            }
          }
        }
      }
    }
  }
  .maincontentright {
    > div {
      margin-bottom: 16px;
    }
    .hotphone {
      width: 270px;
      height: 106px;
      padding: 20px 32px;
      border-radius: 4px;
      background-color: #fff;
      border: 1px solid #eeefef;
      p {
        font-size: 24px;
        color: #ff6a00;
        font-weight: bold;
        margin-top: 12px;
      }
    }
    .companyinfo {
      padding: 20px;
      border: 1px solid #eeefef;
      .companydetail {
        h1 {
          text-align: left;
          margin-bottom: 12px;
        }
        p:first-of-type {
          font-size: 18px;
          font-weight: bold;
          text-align: left;
          color: #4d575e;
          margin-bottom: 12px;
          line-height: 22px;
        }
        .imgbox {
          width: 230px;
          height: 172px;
          margin-bottom: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p:last-of-type {
          font-size: 16px;
          text-align: left;
          color: #788085;
          line-height: 22px;
          margin-bottom: 15px;
        }
      }
      .companylocation {
        h1 {
          height: 50px;
          line-height: 50px;
          text-align: left;
          border-top: 1px solid #eeefef;
        }
        .imgbox {
          width: 230px;
          height: 172px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .recommendposition {
      width: 270px;
      // height: 1008px;
      background: #ffffff;
      border-radius: 4px;
      padding: 20px;
      border: 1px solid #eeefef;
      h1 {
        text-align: left;
        margin-bottom: 12px;
      }

      .jobinfobox {
        width: 230px;
        // height: 298px;
        margin-bottom: 16px;
        background: #ffffff;
        border-radius: 4px;
        .imgbox {
          width: 230px;
          height: 172px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          span {
            position: absolute;
            // width: 118px;
            padding: 0 10px;
            height: 20px;
            left: 0;
            bottom: 0;
            background: #ff6a00;
            border-radius: 16px 16px 16px 0px;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            line-height: 20px;
          }
        }
        .jobname {
          height: 45px;
          // margin: 12px 0;
          font-size: 18px;
          font-weight: bold;
          text-align: left;
          color: #4d575e;
          line-height: 45px;
          border-bottom: 1px solid #f2f0ec;
        }
        .jobinfo {
          margin-top: 11px;
          opacity: 0.5;
          font-size: 16px;
          font-weight: 400;
          text-align: left;
          color: #4d575e;
          line-height: 18px;
        }
        .jobtag {
          margin-top: 8px;
          text-align: left;
          span:first-child {
            color: #fe6100;
            background: rgba(254, 97, 0, 0.1);
          }
          span {
            margin-right: 8px;
            font-size: 14px;
            padding: 3px 5px;
            background: rgba(51, 51, 51, 0.1);
            border-radius: 4px;
          }
        }
        .jobprice {
          margin-top: 12px;
          font-size: 16px;
          text-align: left;
          color: #ff6a00;
          font-weight: bold;
          line-height: 18px;
          span {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>