From 5fb22cba2ce7bb8196d2ab5d31fe3a74e34ce7f6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 28 Oct 2022 11:58:48 +0800
Subject: [PATCH] home

---
 src/api/index.js                           |   2 +
 src/pages/article/index.vue                |   4 +-
 src/pages/channel/index.vue                | 320 ---------------------
 src/pages/home/index.vue                   | 312 ++++++++++++++++++++
 src/router/modules/{channel.js => home.js} |   2 +-
 5 files changed, 317 insertions(+), 323 deletions(-)
 delete mode 100644 src/pages/channel/index.vue
 create mode 100644 src/pages/home/index.vue
 rename src/router/modules/{channel.js => home.js} (91%)

diff --git a/src/api/index.js b/src/api/index.js
index b116a31..eb41f22 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -2,4 +2,6 @@ export default {
   newlyPublishedArticles: `iasf/sysContent/newlyPublishedArticles`,
   listWithTree: `iasf/sysColumn/listWithTree`,
   findArticle: `iasf/sysContent/findById`,
+  findPage: `iasf/sysColumnLongPage/getLongPageInformation`,
+  queryArticle: `iasf/sysContent/pagingQuery`,
 }
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index bc15c44..6bdd82c 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -8,7 +8,7 @@
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
-          <div class="meta">{{ form.createTime }} | {{ form.source }} | {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div>
+          <div class="meta">{{ form.createTime }} | {{ form.source && form.source + '|' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div>
           <p class="brief">{{ form.summary }}</p>
           <div v-html="form.mainBody"></div>
           <div class="annex">
@@ -162,7 +162,7 @@ export default {
   .brief {
     padding-bottom: 30px;
     margin-bottom: 30px;
-    font-size: 14px;
+    font-size: 24px;
     line-height: 20px;
     color: #606060;
     border-bottom: 1px solid #D8D8D8;
diff --git a/src/pages/channel/index.vue b/src/pages/channel/index.vue
deleted file mode 100644
index 35f1c55..0000000
--- a/src/pages/channel/index.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-  <div class="wrap">
-    <img width="100%" src="@/assets/images/channel-bg.png" alt="">
-    
-    <div class="block">
-      <div class="inner">
-        <h2 class="b-title">OUR FACILITIES</h2>
-        <p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
-        <ul class="card">
-          <li>
-            <img width="100%" src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>Shenzhen Innovation Lightsource Facility </h6>
-              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <img width="100%" src="@/assets/images/channel2.png" alt="">
-            <div class="texts">
-              <h6>Shenzhen Innovation Lightsource Facility </h6>
-              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    
-    <div class="block news-block">
-      <div class="inner">
-        <h2 class="b-title">Latest information</h2>
-        <p class="intro">Keep up with what happen with IASF</p>
-        <ul class="news">
-          <li>
-            <img src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>2022 New Year Message from President Sun Dongbai</h6>
-              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-              <span class="meta">2022.08.12</span>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    
-    <div class="block">
-      <div class="inner">
-        <h2 class="b-title">Light Chasers' Home at IASF</h2>
-        <p class="intro">Keep up with what happen with IASF</p>
-        <ul class="people">
-          <li>
-            <img class="pic" src="@/assets/images/channel1.png" alt="">
-            <div class="texts">
-              <h6>Shenzhen Innovation Lightsource Facility </h6>
-              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <div class="texts">
-              <h6>Shenzhen Innovation Lightsource Facility </h6>
-              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-            <img class="pic" src="@/assets/images/channel2.png" alt="">
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="about">
-      <div class="inner">
-        <img src="@/assets/images/about.png" alt="">
-        <div class="line"></div>
-        <div class="text">ABOUT</div>
-        <div class="des">
-          <p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="block" style="padding-bottom: 0">
-      <div class="inner">
-        <h2 class="glance">IASF at a glance</h2>
-        <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>
-</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: space-between;
-  li {
-    width: 660px;
-  }
-  .texts {
-    padding-left: 22px;
-    margin-top: 60px;
-    border-left: 2px solid #DFE4E9;
-  }
-  h6 {
-    margin-bottom: 25px;
-    font-size: 24px;
-    color: #333;
-  }
-  .des {
-    font-size: 18px;
-    color: #222;
-    line-height: 30px;
-  }
-  .arrow {
-    cursor: pointer;
-  }
-}
-
-.news-block {
-  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
-}
-.news {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    display: inline-flex;
-    width: 686px;
-    padding: 34px;
-    margin-bottom: 28px;
-    background-color: #fff;
-    &:nth-child(odd) {
-      margin-right: 28px;
-    }
-  }
-  img {
-    width: 237px;
-    height: 167px;
-  }
-  .texts {
-    margin-left: 34px;
-  }
-  h6 {
-    font-size: 18px;
-    color: #0648A8;
-  }
-  .des {
-    margin: 14px 0;
-    font-size: 16px;
-    color: #333;
-    line-height: 22px;
-  }
-  .meta {
-    font-size: 16px;
-    color: #999;
-  }
-}
-
-.people {
-  li {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 126px;
-  }
-  .pic {
-    width: 660px;
-    height: 465px;
-  }
-  .texts {
-    width: 680px;
-    padding-top: 150px;
-  }
-  h6 {
-    font-size: 40px;
-  }
-  .des {
-    font-size: 18px;
-    color: #020202;
-    line-height: 30px;
-  }
-}
-
-.glance {
-  padding-bottom: 50px;
-  font-size: 45px;
-  border-bottom: 1px solid #DEDEDE;
-}
-.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;
-  }
-}
-.about {
-  padding: 77px 0 198px;
-  background: url(../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
-  .line {
-    display: flex;
-    align-items: center;
-    margin: 50px 0 30px;
-    width: 88px;
-    height: 6px;
-    background-color: #fff;
-    &:after {
-      content: '';
-      width: 6px;
-      height: 6px;
-    }
-  }
-  .text {
-    font-size: 30px;
-    color: #fff;
-  }
-  .des {
-    padding: 38px 60px;
-    margin-top: 84px;
-    font-size: 30px;
-    color: #fff;
-    line-height: 42px;
-    text-align: center;
-    background: rgba(111, 69, 36, .56);
-    border-radius: 17px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
new file mode 100644
index 0000000..95810cc
--- /dev/null
+++ b/src/pages/home/index.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="959px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic" :key="i">
+          <img width="100%" height="959" :src="item.pic" alt="">
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">{{ modules[1].form.title }}</h2>
+        <p class="intro">{{ modules[1].form.des }}</p>
+        <ul class="card">
+          <li>
+            <img width="100%" :src="modules[2].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="des">{{ modules[2].form.des }}</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img width="100%" :src="modules[3].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="des">{{ modules[3].form.des }}</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title">{{ modules[4].form.title }}</h2>
+        <p class="intro">{{ modules[4].form.des }}</p>
+        <ul class="news">
+          <li v-for="(item, i) in articles" :key="i">
+            <img src="@/assets/images/channel1.png" alt="">
+            <div class="texts">
+              <h6>{{ item.columnName }}</h6>
+              <div class="des" v-html="item.mainBody"></div>
+              <span class="meta">{{ item.createTime }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">{{ modules[6].form.title }}</h2>
+        <p class="intro">{{ modules[6].form.des }}</p>
+        <ul class="people">
+          <li v-for="(item, i) in modules[7].list" :key="i">
+            <img class="pic" :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="des">{{ item.des }}</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="about">
+      <div class="inner">
+        <img src="@/assets/images/about.png" alt="">
+        <div class="line"></div>
+        <div class="text">{{ modules[8].form.title }}</div>
+        <div class="des">{{ modules[8].form.des }}</div>
+      </div>
+    </div>
+
+    <div class="block" style="padding-bottom: 0">
+      <div class="inner">
+        <h2 class="glance">{{ modules[9].form.title }}</h2>
+        <ul class="stat">
+          <li>
+            <p class="num">{{ modules[10].form.title }}</p>
+            <p class="text">{{ modules[10].form.des }}</p>
+          </li>
+          <li>
+            <p class="num">{{ modules[11].form.title }}</p>
+            <p class="text">{{ modules[11].form.des }}</p>
+          </li>
+          <li>
+            <p class="num">{{ modules[12].form.title }}</p>
+            <p class="text">{{ modules[12].form.des }}</p>
+          </li>
+          <li>
+            <p class="num">{{ modules[13].form.title }}</p>
+            <p class="text">{{ modules[13].form.des }}</p>
+          </li>
+          <li>
+            <p class="num">{{ modules[14].form.title }}</p>
+            <p class="text">{{ modules[14].form.des }}</p>
+          </li>
+          <li>
+            <p class="num">{{ modules[15].form.title }}</p>
+            <p class="text">{{ modules[15].form.des }}</p>
+          </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,
+      modules: [],
+      articles: []
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      this.$post(`${this.api.findPage}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          const json = JSON.parse(data[0].jsonBeforeEditing)
+          this.modules = json
+
+          // 获取文章列表
+          const { column, site, articleNum } = json[5].form
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
+          if (column.length) {
+            this.$post(this.api.queryArticle, {
+              siteId: site,
+              columnIds: column,
+              pageNum: 1,
+              pageSize: articleNum || 6
+            }).then(({ data }) => {
+              this.articles = data.records
+            }).catch(err => {})
+          }
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.card {
+  display: flex;
+  justify-content: space-between;
+  li {
+    width: 660px;
+  }
+  .texts {
+    padding-left: 22px;
+    margin-top: 60px;
+    border-left: 2px solid #DFE4E9;
+  }
+  h6 {
+    margin-bottom: 25px;
+    font-size: 24px;
+    color: #333;
+  }
+  .des {
+    font-size: 18px;
+    color: #222;
+    line-height: 30px;
+  }
+  .arrow {
+    cursor: pointer;
+  }
+}
+
+.news-block {
+  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    display: inline-flex;
+    width: 686px;
+    padding: 34px;
+    margin-bottom: 28px;
+    background-color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
+    }
+  }
+  img {
+    width: 237px;
+    height: 167px;
+  }
+  .texts {
+    margin-left: 34px;
+  }
+  h6 {
+    font-size: 18px;
+    color: #0648A8;
+  }
+  .des {
+    margin: 14px 0;
+    font-size: 16px;
+    color: #333;
+    line-height: 22px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #999;
+  }
+}
+
+.people {
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 126px;
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+  }
+  .pic {
+    width: 660px;
+    height: 465px;
+  }
+  .texts {
+    width: 680px;
+    padding-top: 150px;
+  }
+  h6 {
+    font-size: 40px;
+  }
+  .des {
+    margin: 20px 0 10px;
+    font-size: 18px;
+    color: #020202;
+    line-height: 30px;
+  }
+}
+
+.glance {
+  padding-bottom: 50px;
+  font-size: 45px;
+  border-bottom: 1px solid #DEDEDE;
+}
+.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;
+  }
+}
+.about {
+  padding: 77px 0 198px;
+  background: url(../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
+  .line {
+    display: flex;
+    align-items: center;
+    margin: 50px 0 30px;
+    width: 88px;
+    height: 6px;
+    background-color: #fff;
+    &:after {
+      content: '';
+      width: 6px;
+      height: 6px;
+    }
+  }
+  .text {
+    font-size: 30px;
+    color: #fff;
+  }
+  .des {
+    padding: 38px 60px;
+    margin-top: 84px;
+    font-size: 30px;
+    color: #fff;
+    line-height: 42px;
+    text-align: center;
+    background: rgba(111, 69, 36, .56);
+    border-radius: 17px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/channel.js b/src/router/modules/home.js
similarity index 91%
rename from src/router/modules/channel.js
rename to src/router/modules/home.js
index 3aacbc8..3db5168 100644
--- a/src/router/modules/channel.js
+++ b/src/router/modules/home.js
@@ -1,5 +1,5 @@
 import BasicLayout from '@/layouts/home'
-const name = 'channel'
+const name = 'home'
 export default {
   path: `/${name}`,
   component: BasicLayout,