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="wrap">
      <div class="inner">
        <ul class="card">
          <li>
            
          </li>
        </ul>
      </div>
    </div>

    <div class="block people-block">
      <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>
  </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";
.people-block {
  background: #F2F6F8;
}
.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;
  }
}
</style>