FE_IASF_client/src/pages/careers/index.vue

<template>
  <div class="wrap">
    <img width="100%" height="480" src="@/assets/images/careers/1.png" alt="">

    <div class="block">
      <div class="inner">
        <ul class="card">
          <li>
            <h6>Research </h6>
            <p class="text">Positions</p>
            <div class="arrow">
              <img src="@/assets/images/arrow-white.png" alt="">
            </div>
          </li>
          <li>
            <h6>Engineering </h6>
            <p class="text">Positions</p>
            <div class="arrow">
              <img src="@/assets/images/arrow-white.png" alt="">
            </div>
          </li>
          <li>
            <h6>Management Staff </h6>
            <p class="text">Positions</p>
            <div class="arrow">
              <img src="@/assets/images/arrow-white.png" alt="">
            </div>
          </li>
          <li>
            <h6>Post-doc Programs </h6>
            <p class="text">Positions</p>
            <div class="arrow">
              <img src="@/assets/images/arrow-white.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="block gray">
      <div class="inner">
        <h2 class="b-title">Profiles</h2>
        <p class="intro">What makes a light chaser</p>
        <ul class="people">
          <li>
            <img class="comma" src="@/assets/images/comma.png" alt="">
            <div class="left">
              <h6>IASF started its journey to chase light, 
  push the boundaries forward, and discover the unknown.</h6>
              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
            </div>
            <img class="pic" src="@/assets/images/careers/6.png" alt="">
          </li>
          <li>
            <img class="comma" src="@/assets/images/comma.png" alt="">
            <div class="left">
              <h6>IASF started its journey to chase light, 
  push the boundaries forward, and discover the unknown.</h6>
              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
            </div>
            <img class="pic" src="@/assets/images/careers/7.png" alt="">
          </li>
          <li>
            <img class="comma" src="@/assets/images/comma.png" alt="">
            <div class="left">
              <h6>IASF started its journey to chase light, 
  push the boundaries forward, and discover the unknown.</h6>
              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
            </div>
            <img class="pic" src="@/assets/images/careers/8.png" alt="">
          </li>
        </ul>
      </div>
    </div>

    <ul class="shows">
      <li>
        <div class="left">
          <h6>Benefits</h6>
          <div class="sub">YOU ARE IN GOOD HANDS</div>
          <div class="des">We offer the most competitive package to assure the welfare of our people at IAST.</div>
          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
        </div>
      </li>
      <li>
        <div class="left">
          <h6>Traineeships</h6>
          <div class="sub">YOUR FUTURE STARTS HERE</div>
          <div class="des">IASF works with research institutions, universities, and others, to provide a pathway for future scientists, engineers, and industry leaders.</div>
          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
        </div>
      </li>
      <li>
        <div class="left">
          <h6>Programs</h6>
          <div class="sub">YOUR INSPIRATION HAS GREAT SUPPORTS</div>
          <div class="des">We collect various professional and funding resources to support your dream and ideas, your job is as simple as it looks, go for it!</div>
          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
  data() {
    return {
      id: this.$route.query.id,
      columnId: '',
      form: {},
    }
  },
  watch: {
    '$route'() {
      this.id = this.$route.query.id
      // this.getInfo()
    }
  },
  mounted() {
    
  },
  methods: {
    // 获取文章详情
    getInfo() {
      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
        this.form = data
        this.columnId = data.columnId
      }).catch(err => {})
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/page/page.scss";
.card {
  display: flex;
  justify-content: center;
  li {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 368px;
    height: 526px;
    margin-right: 14px;
    color: #fff;
    background: url(../../assets/images/careers/2.png) 0 0/100% 100% no-repeat;
    cursor: pointer;
    &:hover {
      .arrow {
        opacity: 1;
      }
    }
    &:nth-child(2) {
      background-image: url(../../assets/images/careers/3.png);
    }
    &:nth-child(3) {
      background-image: url(../../assets/images/careers/4.png);
    }
    &:nth-child(4) {
      background-image: url(../../assets/images/careers/5.png);
    }
    h6 {
      margin-bottom: 10px;
      font-size: 35px;
    }
    .text {
      font-size: 24px;
    }
    .arrow {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 177px;
      padding-top: 62px;
      text-align: center;
      background: #36404A;
      opacity: 0;
      transition: .3s;
    }
  }
}
.people {
  li {
    position: relative;
    min-height: 450px;
    padding: 100px 70px 30px 57px;
    margin-bottom: 100px;
    background-color: #fff;
    &:nth-child(even) {
      display: flex;
      justify-content: flex-end;
      .comma {
        left: 660px;
      }
      .pic {
        left: 0;
        right: auto;
      }
    }
  }
  .comma {
    position: absolute;
    top: -22px;
    left: 57px;
  }
  .left {
    width: 670px;
  }
  h6 {
    font-size: 24px;
    color: #333;
  }
  .des {
    margin-top: 20px;
    font-size: 20px;
    color: #666;
    line-height: 32px;
  }
  .pic {
    position: absolute;
    top: -60px;
    right: 43px;
    width: 600px;
    height: 450px;
  }
}
.shows {
  li {
    
    margin-bottom: 40px;
    color: #fff;
    background: url(../../assets/images/careers/9.png) 0 0/100% 100% no-repeat;
    &:nth-child(even) {
      display: flex;
      justify-content: flex-end;
    }
    &:nth-child(2) {
      background-image: url(../../assets/images/careers/10.png);
      .left {
        background-color: rgba(47, 79, 23, .65);
      }
    }
    &:nth-child(3) {
      background-image: url(../../assets/images/careers/11.png);
      .left {
        background-color: rgba(91, 58, 35, .65);
      }
    }
  }
  .left {
    width: 43.3%;
    padding: 138px 30px 30px 103px;
    background-color: rgba(54, 54, 54, .65);
  }
  h6 {
    font-size: 46px;
  }
  .sub {
    margin: 20px;
    font-size: 36px;
  }
  .des {
    margin-bottom: 40px;
    font-size: 24px;
  }
}
</style>