caimei-authentic-website-ross/pages/contact/job.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/contact-banner.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- banner区域 end -->

    <div class="main">
      <div class="tabbar">
        <div class="container">
          <template v-for="(tab, index) in tabList">
            <div class="tab" :class="{ on: tab.id === current }" :key="tab.en" @click="onTabChange(tab)">
              <div class="name" v-text="tab.name"></div>
              <div class="en" v-text="tab.en"></div>
            </div>
            <div class="line" :key="index" v-if="index < 2"></div>
          </template>
        </div>
      </div>

      <div class="tab-content container">
        <!-- 职位列表 -->
        <div class="tab-item job">
          <div class="section-title">
            <img src="/img/contact-title-job.png" alt="品牌实力" />
            <h3>职位申请</h3>
          </div>
          <div class="content">
            <dl>
              <dt>
                <span>市场经理</span>
                <span>2人</span>
                <span class="btn add">+</span>
                <span class="btn sub">-</span>
              </dt>
              <dd>
                <div class="job-info">
                  <div class="title">
                    <p>工作地点：深圳</p>
                    <p>薪资：底薪+提成（底薪4－6K，提供住宿）</p>
                  </div>
                  <p>负责地推、客户邀约及实施会议等工作，完成销售指标。</p>
                  <p>1.品行佳，责任心强，吃苦耐劳，勤奋乐观，有工作激情。</p>
                  <p>2.思维敏捷，善于沟通， 执行力与团队合作佳。</p>
                  <p>3.喜欢挑战性的工作，能够承受大负荷的工作压力。</p>
                  <p>4.应变能力强，具备一定的活动把控和处理突发状况能力。</p>
                  <p>5.熟练操作OFFICE软件，能适应不定期出差。</p>
                </div>
                <a href="/contact/join-us.html" class="link">申请该职位»</a>
              </dd>
            </dl>
            <dl>
              <dt>
                <span>行政前台</span>
                <span>1人</span>
                <span class="btn add">+</span>
                <span class="btn sub">-</span>
              </dt>
              <dd>
                <div class="job-info">
                  <div class="title">
                    <p>工作地点：深圳</p>
                    <p>薪资：底薪+提成（底薪4－6K，提供住宿）</p>
                  </div>
                  <p>负责地推、客户邀约及实施会议等工作，完成销售指标。</p>
                  <p>1.品行佳，责任心强，吃苦耐劳，勤奋乐观，有工作激情。</p>
                  <p>2.思维敏捷，善于沟通， 执行力与团队合作佳。</p>
                  <p>3.喜欢挑战性的工作，能够承受大负荷的工作压力。</p>
                  <p>4.应变能力强，具备一定的活动把控和处理突发状况能力。</p>
                  <p>5.熟练操作OFFICE软件，能适应不定期出差。</p>
                </div>
                <a href="/contact/join-us.html" class="link">申请该职位»</a>
              </dd>
            </dl>
            <dl>
              <dt>
                <span>仪器培训导师</span>
                <span>2人</span>
                <span class="btn add">+</span>
                <span class="btn sub">-</span>
              </dt>
              <dd>
                <div class="job-info">
                  <div class="title">
                    <p>工作地点：深圳</p>
                    <p>薪资：底薪+提成（底薪4－6K，提供住宿）</p>
                  </div>
                  <p>负责地推、客户邀约及实施会议等工作，完成销售指标。</p>
                  <p>1.品行佳，责任心强，吃苦耐劳，勤奋乐观，有工作激情。</p>
                  <p>2.思维敏捷，善于沟通， 执行力与团队合作佳。</p>
                  <p>3.喜欢挑战性的工作，能够承受大负荷的工作压力。</p>
                  <p>4.应变能力强，具备一定的活动把控和处理突发状况能力。</p>
                  <p>5.熟练操作OFFICE软件，能适应不定期出差。</p>
                </div>
                <a href="/contact/join-us.html" class="link">申请该职位»</a>
              </dd>
            </dl>
            <dl>
              <dt>
                <span>市场经理</span>
                <span>2人</span>
                <span class="btn add">+</span>
                <span class="btn sub">-</span>
              </dt>
              <dd>
                <div class="job-info">
                  <div class="title">
                    <p>工作地点：深圳</p>
                    <p>薪资：底薪+提成（底薪4－6K，提供住宿）</p>
                  </div>
                  <p>负责地推、客户邀约及实施会议等工作，完成销售指标。</p>
                  <p>1.品行佳，责任心强，吃苦耐劳，勤奋乐观，有工作激情。</p>
                  <p>2.思维敏捷，善于沟通， 执行力与团队合作佳。</p>
                  <p>3.喜欢挑战性的工作，能够承受大负荷的工作压力。</p>
                  <p>4.应变能力强，具备一定的活动把控和处理突发状况能力。</p>
                  <p>5.熟练操作OFFICE软件，能适应不定期出差。</p>
                </div>
                <a href="/contact/join-us.html" class="link">申请该职位»</a>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-人才招聘',
    }
  },
  data() {
    return {
      tabList: [],
      current: 2,
    }
  },
  asyncData() {
    return {
      tabList: [
        {
          id: 1,
          name: '联系方式',
          en: 'contact',
          url: '/contact.html',
        },
        {
          id: 2,
          name: '人才招聘',
          en: 'join us',
          url: '/contact/job.html',
        },
        {
          id: 3,
          name: '在线咨询',
          en: 'chat with us',
          url: '/contact/consult.html',
        },
      ],
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
    })

    $(function () {
      jobListCollapseStart()
      function jobListCollapseStart() {
        var isAnimated = false
        $('.job')
          .find('.btn')
          .each(function (index, el) {
            $(el).on('click', function () {
              if (isAnimated) return
              isAnimated = true
              $(this)
                .parents('dt')
                .siblings('dd')
                .slideToggle(true, function () {
                  isAnimated = false
                })
              $(this).parents('dl').toggleClass('on').siblings('dl').removeClass('on').find('dd').slideUp()
            })
          })
      }
    })
  },
  methods: {
    onTabChange(tab) {
      // this.current = tab.id
      window.open(tab.url, '_self')
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      height: 100px;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 46px;
        width: 3px;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 16%;
        user-select: none;
        .name {
          font-size: 29px;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          font-size: 17px;
          font-weight: 300;
          color: #000000;
          text-align: center;
          margin-top: 10px;
          text-transform: uppercase;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 12px 8px 12px;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }

    .tab-content {
      .job {
        .content {
          dl {
            margin-bottom: 25px;

            .sub {
              display: none;
            }

            .add {
              display: block;
            }

            &.on {
              dt {
                background: #535353;
                color: #fff;
              }

              .sub {
                display: block;
              }

              .add {
                display: none;
              }

              dd {
                display: block;
              }
            }

            dt {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 50px;
              background: #dcdcdc;
              font-size: 29px;
              padding: 0 10px 0 20px;
              color: #535353;
              position: relative;

              span:nth-child(2) {
                position: absolute;
                display: block;
                height: 100%;
                line-height: 50px;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
              }

              .btn {
                width: 24px;
                height: 24px;
                text-align: center;
                line-height: 21px;
                background: #ffffff;
                color: #535353 !important;
                cursor: pointer;
              }
            }
            dd {
              margin: 0;
              padding: 55px 0 30px 20px;
              display: none;
              .job-info {
                .title {
                  margin-bottom: 32px;
                }
                p {
                  font-size: 21px;
                  font-weight: 400;
                  color: #5b5b5b;
                  line-height: 32px;
                }
              }

              .link {
                display: inline-block;
                font-size: 21px;
                font-weight: 400;
                color: #000000;
                margin-top: 38px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      padding: 0 0.6rem;
      height: 0.8rem;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 0.4rem;
        width: 0.02rem;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 24%;
        user-select: none;
        .name {
          font-size: 0.26rem;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          display: none;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0.12rem 0.08rem 0.12rem;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }

    .tab-content {
      .job {
        .content {
          width: 6.86rem;
          margin: 0 auto;
          dl {
            margin: 0;
            margin-bottom: 0.32rem;

            .sub {
              display: none;
            }

            .add {
              display: block;
            }

            &.on {
              dt {
                background: #535353;
                color: #fff;
              }

              dd {
                display: block;
              }

              .sub {
                display: block;
              }

              .add {
                display: none;
              }
            }

            dt {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 0.9rem;
              background: #dcdcdc;
              font-size: 0.28rem;
              padding: 0 0.26rem 0 0.32rem;
              color: #535353;
              position: relative;

              span:nth-child(2) {
                position: absolute;
                display: block;
                height: 100%;
                line-height: 50px;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
              }

              .btn {
                width: 0.48rem;
                height: 0.48rem;
                text-align: center;
                line-height: 0.48rem;
                background: #ffffff;
                color: #535353 !important;
                cursor: pointer;
              }
            }
            dd {
              margin: 0;
              padding: 0.48rem 0 0.32rem;
              display: none;
              .job-info {
                .title {
                  margin-bottom: 0.5rem;
                }
                p {
                  font-size: 0.26rem;
                  font-weight: 400;
                  color: #5b5b5b;
                  line-height: 0.48rem;
                }
              }

              .link {
                display: inline-block;
                font-size: 0.26rem;
                font-weight: 400;
                color: #000000;
                margin-top: 0.32rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>