FE_IASF_client/src/pages/edu/index.vue

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

    <div class="block gray">
      <div class="inner">
        <h2 class="b-title">Partnership</h2>
        <p class="intro">Together, Stronger</p>
        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
      </div>
    </div>
    
    <div class="block">
      <div class="inner">
        <h2 class="b-title">Programs</h2>
        <p class="intro">Our campus is Shenzhen and Beyound</p>
        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
      </div>
    </div>
    
    <div class="block gray">
      <div class="inner">
        <h2 class="b-title">Engagement</h2>
        <p class="intro">Serving Community</p>
        <ul class="list">
          <li>
            <img class="pic" src="@/assets/images/edu/3.png" alt="">
            <div class="texts">
              <h6>community service</h6>
              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
              <div class="des">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 …</div>
            </div>
          </li>
          <li>
            <img class="pic" src="@/assets/images/edu/4.png" alt="">
            <div class="texts">
              <h6>community service</h6>
              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
              <div class="des">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 …</div>
            </div>
          </li>
          <li>
            <img class="pic" src="@/assets/images/edu/5.png" alt="">
            <div class="texts">
              <h6>community service</h6>
              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
              <div class="des">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 …</div>
            </div>
          </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";
.list {
  li {
    position: relative;
    &:nth-child(even) {
      text-align: right;
      .texts {
        left: 0;
      }
    }
  }
  .pic {
    width: 650px;
    height: 730px;
  }
  .texts {
    position: absolute;
    top: 120px;
    left: 610px;
    width: 850px;
    height: 440px;
    padding: 60px 30px 30px 100px;
    background-color: #fff;
  }
  h6 {
    font-size: 40px;
    color: #3C3C3C;
  }
  .sub {
    font-size: 24px;
    color: #1C1C1C;
    line-height: 33px;
  }
  .des {
    font-size: 20px;
    color: #3C3C3C;
    line-height: 32px;
  }
}
</style>