newsPress、research

src/pages/newsPress/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/news/1.png" alt="">
+
+    <div class="block">
+      <div class="inner">
+        <ul class="list">
+          <li>
+            <img class="pic" src="@/assets/images/newsPress/1.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>
+              <img src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/newsPress/2.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>
+              <img src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/newsPress/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>
+              <img src="@/assets/images/arrow.png" alt="">
+            </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,
+      active: 1,
+      tabs: [
+        {
+          id: 1,
+          name: 'General news'
+        },
+        {
+          id: 2,
+          name: 'Research news'
+        },
+        {
+          id: 3,
+          name: 'Journal covers'
+        },
+      ]
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // tab回调
+    tabChange(item) {
+      this.active = item.id
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.list {
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+        text-align: left;
+      }
+    }
+  }
+  .pic {
+    width: 650px;
+    height: 730px;
+  }
+  .texts {
+    position: absolute;
+    top: 120px;
+    left: 610px;
+    width: 850px;
+    height: 440px;
+    padding: 60px 30px 30px 100px;
+    background: rgba(247, 247, 247, .72);
+  }
+  h6 {
+    font-size: 40px;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin: 20px 0;
+    font-size: 24px;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    margin-bottom: 20px;
+    font-size: 20px;
+    color: #3C3C3C;
+    line-height: 32px;
+  }
+}
+</style>

src/pages/research/index.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/research/1.png" alt="">
+    
+    <div class="block history gray">
+      <div class="inner">
+        <h2 style="margin-left: 57px">Why IASF?</h2>
+        <div class="texts">
+          <div class="left">
+            <h2>IASF started its journey to chase light, 
+The one that can drive innovation, 
+push the boundaries forward, and discover the unknown.</h2>
+            <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. And the Guangdong-Hong Kong-Macao IASF</div>
+            <img src="@/assets/images/arrow.png" alt="">
+          </div>
+          <img class="bg" width="562" height="506" src="@/assets/images/research/2.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <h2 class="b-title">Research Areas </h2>
+      <p class="intro">What we can do and beyound</p>
+      <ul class="area">
+        <li>
+          <div class="texts">
+            <img src="@/assets/images/research/res1-1.png" alt="">
+            <h6>Physics</h6>
+            <p class="des">Research Field Description</p>
+          </div>
+        </li>
+        <li>
+          <div class="texts">
+            <img src="@/assets/images/research/res2-1.png" alt="">
+            <h6>Chemistry</h6>
+            <p class="des">Research Field Description</p>
+          </div>
+        </li>
+        <li>
+          <div class="texts">
+            <img src="@/assets/images/research/res3-1.png" alt="">
+            <h6>Biology</h6>
+            <p class="des">Research Field Description</p>
+          </div>
+        </li>
+        <li>
+          <div class="texts">
+            <img src="@/assets/images/research/res4-1.png" alt="">
+            <h6>Advanced Materials</h6>
+            <p class="des">Research Field Description</p>
+          </div>
+        </li>
+        <li>
+          <div class="texts">
+            <img src="@/assets/images/research/res5-1.png" alt="">
+            <h6>Advanced Manufacturing</h6>
+            <p class="des">Research Field Description</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    
+    <div class="block gray">
+      <div class="inner" style="width: 1558px">
+        <h2 class="b-title">Applications</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <ul class="app">
+          <li v-for="(item, i) in apps" :key="i">
+            <img class="bg" :src="require('@/assets/images/research/app' + (i + 1) + '.png')" alt="">
+            <img class="icon" :src="require('@/assets/images/research/app' + (i + 1) + '-1.png')" alt="">
+            <p class="text">{{ item }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">R&D Group</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <ul class="group">
+          <li>
+            <img src="@/assets/images/research/3.png" alt="">
+            <p class="text">Accelerator</p>
+          </li>
+          <li>
+            <img src="@/assets/images/research/4.png" alt="">
+            <p class="text">Physics</p>
+          </li>
+          <li>
+            <img src="@/assets/images/research/5.png" alt="">
+            <p class="text">Mechanical Engineering</p>
+          </li>
+          <li>
+            <img src="@/assets/images/research/6.png" alt="">
+            <p class="text">Digital Light-source</p>
+          </li>
+          <li>
+            <img src="@/assets/images/research/7.png" alt="">
+            <p class="text">Beam Lines</p>
+          </li>
+          <li>
+            <img src="@/assets/images/research/8.png" alt="">
+            <p class="text">End Stations</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block gray">
+      <div class="inner" style="width: 1558px">
+        <h2 class="b-title">Research & Industry News</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <ul class="news">
+          <li>
+            <img src="@/assets/images/research/3.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/research/3.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/research/3.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Publications</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <div class="pub">
+          <div class="column">
+            <div class="item" style="height: 342px">
+              <div class="text">Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng</div>
+            </div>
+            <div class="item" style="height: 685px">
+              <div class="text">软X射线自由电子激光单色器优化方法，胡凯，杨川，真空电子技术. 2022, 356(01)</div>
+            </div>
+          </div>
+          <div class="column">
+            <div class="item" style="height: 507px">
+              <div class="text">High-repetition-rate seeded free-electron laser with direct-amplification of an external coherent laser</div>
+            </div>
+            <div class="item" style="height: 519px">
+              <div class="text">产生超快水窗波段X射线的ESASE方案模拟，强激光与粒子束, 2022, 34(3):031019</div>
+            </div>
+          </div>
+          <div class="column">
+            <div class="item" style="height: 705px">
+              <div class="text">多层膜元件热应力分析方法、系统和终端设备申请(专利)号：CN202111530134.0</div>
+            </div>
+            <div class="item" style="height: 323px">
+              <div class="text">Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng</div>
+            </div>
+          </div>
+        </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: {},
+      apps: ['Astronomical Science', ' Extreme Ultraviolet', ' Quantum Materials', 'Energy Catalytic', 'Biomedicine  ', 'New Energy', 'Cancer Treatment', 'Atomic Science', 'Radioactive Waste Materials ', 'High-sensitivity Detection']
+    }
+  },
+  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 {
+  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;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 22px;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.area {
+  display: flex;
+  li {
+    position: relative;
+    width: 19%;
+    height: 653px;
+    color: #fff;
+    background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
+    &:nth-child(2) {
+      width: 21%;
+      margin-top: 70px;
+      background-image: url(../../assets/images/research/res2.png);
+      .texts {
+        background: #2B1B1C;
+      }
+    }
+    &:nth-child(3) {
+      background-image: url(../../assets/images/research/res3.png);
+      .texts {
+        background: #009C91;
+      }
+    }
+    &:nth-child(4) {
+      margin-top: 70px;
+      background-image: url(../../assets/images/research/res4.png);
+      .texts {
+        background: #005388;
+      }
+    }
+    &:nth-child(5) {
+      width: 22%;
+      background-image: url(../../assets/images/research/res5.png);
+      .texts {
+        background: #9A4E10;
+      }
+    }
+  }
+  .texts {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 210px;
+    padding: 20px 40px;
+    background: #08577B;
+  }
+  h6 {
+    font-size: 30px;
+    white-space: nowrap;
+  }
+  .des {
+    font-size: 22px;
+    color: rgba(255,255,255,0.55);
+  }
+}
+.app {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 252px;
+    margin: 0 14px 14px 0;
+    &:first-child {
+      width: 750px;
+    }
+    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
+      margin-right: 0;
+    }
+    &:nth-child(9) {
+      width: 563px;
+    }
+    &:nth-child(10) {
+      width: 555px;
+    }
+  }
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .icon {
+    position: relative;
+  }
+  .text {
+    position: relative;
+    margin-top: 20px;
+    font-size: 32px;
+    color: #fff;
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    width: 448px;
+    margin: 0 28px 39px 0;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  .text {
+    font-size: 30px;
+    line-height: 143px;
+    color: #272727;
+    text-align: center;
+    background-color: #F5F5F5;
+  }
+}
+.news {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    display: flex;
+    align-items: center;
+    width: 686px;
+    padding: 34px;
+    margin: 0 28px 28px 0;
+    background-color: #fff;
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+  img {
+    width: 237px;
+    height: 167px;
+    margin-right: 34px;
+  }
+  h6 {
+    font-size: 18px;
+    color: #0648A8;
+  }
+  .des {
+    margin: 10px 0;
+    font-size: 16px;
+    color: #333;
+    line-height: 22px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #999;
+  }
+}
+.pub {
+  display: flex;
+  .column {
+    width: 451px;
+    margin-right: 23px;
+  }
+  .item {
+    position: relative;
+    margin-bottom: 22px;
+    background: url(../../assets/images/research/3.png) 0 0/100% 100% no-repeat;
+  }
+  .text {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 160px;
+    padding: 0 24px;
+    font-size: 19px;
+    color: #fff;
+    background-color: #193F5C;
+  }
+}
+</style>

src/router/modules/newsPress.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'newsPress'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};

src/router/modules/research.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'research'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};