FE_IASF_client/src/pages/about/index.vue

<template>
  <div class="wrap">
    <img width="100%" height="480" src="@/assets/images/about/1.png" alt="">
    
    <div class="block history">
      <div class="inner">
        <h2 style="margin-left: 57px">Our History</h2>
        <div class="texts">
          <div class="left">
            <h2>Throughout the world, most of the top science and technology innovation centers are distributed</h2>
            <div class="line"></div>
            <div class="des">
              Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.

              As one of the core cities in the bay area, with the convenient transportation infrastructure.
            </div>
          </div>
          <img class="bg" width="562" height="506" src="@/assets/images/about/2.png" alt="">
        </div>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <h2 class="b-title">Our Values</h2>
        <p class="intro">What makes a light chaser</p>
        <ul class="card">
          <li class="item1">
            <h6>Integrity</h6>
            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
          </li>
          <li class="item2">
            <h6>Adventure </h6>
            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
          </li>
          <li class="item3">
            <h6>Serve </h6>
            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
          </li>
          <li class="item4">
            <h6>Focus on Future </h6>
            <p class="des">We are open and creative, pursuing scientific management and decision-making</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="block" style="padding-bottom: 0">
      <div class="inner">
        <h2 class="b-title">Facts</h2>
        <p class="intro">Strength in numbers</p>
        <ul class="stat">
          <li>
            <p class="num">2020</p>
            <p class="text">The year IASF was founded</p>
          </li>
          <li>
            <p class="num">2</p>
            <p class="text">Facility projects</p>
          </li>
          <li>
            <p class="num">240</p>
            <p class="text">Employees</p>
          </li>
          <li>
            <p class="num">10</p>
            <p class="text">Academicians</p>
          </li>
          <li>
            <p class="num">45%</p>
            <p class="text">Hold doctorates or the highest degree in their field</p>
          </li>
          <li>
            <p class="num">$32B+</p>
            <p class="text">Facility construction need-based grant aid provided </p>
          </li>
        </ul>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <h2 class="b-title">Govening Board & Leadership</h2>
        <p class="intro">What makes a ligh chinese bay chaser</p>
        <ul class="people">
          <li>
            <img class="pic" src="@/assets/images/about/6.png" alt="">
            <div class="texts">
              <p class="sub">Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN</p>
              <h6>Sun Dongbai</h6>
              <p class="des">Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation</p>
              <img class="arrow" src="@/assets/images/arrow.png" alt="">
            </div>
          </li>
          <li>
            <div class="texts">
              <p class="sub">Vice President of the Institute of Advanced Scienc, Shenzhen</p>
              <h6>Yang Xueming</h6>
              <p class="des">Dr. Yang is a world-recognized physical chemistry scientist, an Academician of the Chinese Academy of Science, an awardee of the National Science Fund for Distinguished Young Scholars</p>
              <img class="arrow" src="@/assets/images/arrow.png" alt="">
            </div>
            <img class="pic" src="@/assets/images/about/7.png" alt="">
          </li>
          <li>
            <img class="pic" src="@/assets/images/about/8.png" alt="">
            <div class="texts">
              <p class="sub">The Chairman of Science and Technology Advisory Committee</p>
              <h6>Ulf KALSSON</h6>
              <p class="des">Dr. Ulf Karlsson is a joint professor of Linköping University and KTH Royal Institute of Technology. He established the laboratory of material science and was the director of the materials science platform</p>
              <img class="arrow" src="@/assets/images/arrow.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="block list-block">
      <div class="inner">
        <h2 class="b-title">Committees</h2>
        <p class="intro">What makes a ligh chinese bay chaser</p>
        <ul class="list">
          <li>
            <img class="pic" src="@/assets/images/about/9.png" alt="">
            <h6>Science and Technology</h6>
            <p class="des">installation and nanostructuring</p>
          </li>
          <li>
            <img class="pic" src="@/assets/images/about/10.png" alt="">
            <h6>User Committee</h6>
            <p class="des"> installation and nanostructuring</p>
          </li>
          <li>
            <img class="pic" src="@/assets/images/about/11.png" alt="">
            <h6>Industry Advancement Committee</h6>
            <p class="des">installation and nanostructuring</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <h2 class="b-title">Staff & Organization Chart</h2>
        <p class="intro">Meet the light chaser</p>
        <div class="staff">
          <div class="left">
            <h6>Throughout the world, most of the top science and technology innovation centers are distributed</h6>
            <div class="des">The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.</div>
          </div>
          <img class="pic" src="@/assets/images/about/12.png" alt="">
        </div>
      </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";
.history {
  background: #F2F6F8;
  h2 {
    font-size: 30px;
    color: #333;
  }
  .texts {
    display: flex;
    justify-content: space-between;
    padding: 82px 57px 30px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 100px 0px 0px 0px;
  }
  .left {
    width: 695px;
  }
  .line {
    width: 136px;
    height: 2px;
    margin: 20px 0;
    background: #D7D7D7;
  }
  .des {
    font-size: 22px;
    color: #181818;
    line-height: 31px;
  }
  .bg {
    margin: -122px 0 0 0;
  }
}
.card {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 686px;
    height: 277px;
    padding: 70px 67px 20px;
    margin-bottom: 28px;
    color: #fff;
    &:nth-child(odd) {
      margin-right: 28px;
    }
  }
  .item1 {
    background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
  }
  .item2 {
    background-color: #4984B6;
  }
  .item3 {
    background-color: #567180;
  }
  .item4 {
    background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
  }
  h6 {
    margin-bottom: 10px;
    font-size: 40px;
  }
  .des {
    font-size: 18px;
  }
}
.people {
  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 126px;
  }
  .pic {
    width: 660px;
    height: 465px;
  }
  .texts {
    width: 680px;
    padding-top: 90px;
  }
  h6 {
    margin: 20px 0;
    font-size: 40px;
  }
  .sub {
    font-size: 20px;
    color: #020202;
  }
  .des {
    font-size: 18px;
    color: #020202;
    line-height: 30px;
  }
}
.list-block {
  background: #F2F6F8;
  .inner {
    width: 80%;
    padding: 90px 0;
    background-color: #fff;
  }
}
.list {
  display: flex;
  justify-content: center;
  li {
    padding-bottom: 30px;
    margin-right: 28px;
    text-align: center;
    background-color: #F5F5F5;
    &:last-child {
      margin-right: 0;
    }
  }
  h6 {
    margin: 35px 0 5px;
    font-size: 24px;
    color: #272727;
  }
  .des {
    font-size: 16px;
    color: #757575;
  }
}
.staff {
  display: flex;
  justify-content: space-between;
  background: #F8F8F8;
  .left {
    width: 658px;
    margin: 50px 0 0 46px;
  }
  h6 {
    margin-bottom: 30px;
    font-size: 30px;
    color: #333;
  }
  .des {
    font-size: 20px;
    color: #333;
    line-height: 34px;
  }
  .pic {
    width: 650px;
  }
}
.stat {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 60px;
  li {
    width: 30%;
    margin-bottom: 50px;
  }
  .num {
    margin-bottom: 10px;
    font-size: 60px;
    font-weight: 800;
    color: #035CE1;
    line-height: 49px;
  }
  .text {
    font-size: 24px;
  }
}
</style>