出版物

src/pages/publish/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="wrap">
+    <div class="banner">
+      <img width="100%" height="280" :src="info.columnBanner" alt="">
+      <div class="texts">
+        <p class="text">{{ info.columnName }}</p>
+        <p class="sub">{{ info.subtitle }}</p>
+      </div>
+    </div>
+
+    <div class="inner">
+      <ul class="tabs">
+        <li v-for="(item, i) in tabs" :key="i" :class="{active: active === i}">{{ item }}</li>
+      </ul>
+
+      <ul class="list">
+        <li>
+          <img class="pic" src="@/assets/images/about-bg.png" alt="">
+          <div class="texts">
+            <h6>研究院与深大签约共建产学研专用线基本站建设</h6>
+            <div class="des">智能电网被设想为适应分布式光伏 ( PV ) 发电的高渗透率，这可能会在电压违规方面造成不利的电网影响。因此，PV Hosting 容量被用作规划工具，以确定导致第一次电压违规及以上需要基础设施升级的最大光伏安装容量。传统的托管容量分析方法基于场景且计算复杂，因为它们依赖迭代潮流算法，需要调查…</div>
+          </div>
+        </li>
+        <li>
+          <img class="pic" src="@/assets/images/about-bg.png" alt="">
+          <div class="texts">
+            <h6>研究院与深大签约共建产学研专用线基本站建设</h6>
+            <div class="des">智能电网被设想为适应分布式光伏 ( PV ) 发电的高渗透率，这可能会在电压违规方面造成不利的电网影响。因此，PV Hosting 容量被用作规划工具，以确定导致第一次电压违规及以上需要基础设施升级的最大光伏安装容量。传统的托管容量分析方法基于场景且计算复杂，因为它们依赖迭代潮流算法，需要调查…</div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      info: {},
+      active: 0,
+      tabs: ['发表论文', '申请专利']
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    // 获取栏目详情
+    getInfo() {
+      this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
+        if (!data.columnBanner) data.columnBanner = require('@/assets/images/publish-bg.png')
+        this.info = data
+      }).catch(res => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  background: #F8F9FB;
+}
+.banner {
+  position: relative;
+  height: 280px;
+  
+  color: #fff;
+  .texts {
+    position: absolute;
+    top: 123px;
+    left: 243px;
+  }
+  .text {
+    font-size: 48px;
+    font-weight: 600;
+    @include ellipsis;
+  }
+  .sub {
+    margin-top: 10px;
+    font-size: 28px;
+  }
+}
+.inner {
+  width: 1200px;
+  margin: 0 auto;
+}
+.tabs {
+  position: relative;
+  display: flex;
+  margin-top: -64px;
+  li {
+    width: 174px;
+    line-height: 64px;
+    text-align: center;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    background-color: #fff;
+    cursor: pointer;
+    &.active {
+      color: #fff;
+      background-color: #1583FF;
+    }
+  }
+}
+.list {
+  padding: 0 30px 50px;
+  background: #fff;
+  li {
+    display: flex;
+    align-items: center;
+    padding: 28px 0;
+    border-bottom: 1px solid #ddd;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .pic {
+    width: 90px;
+    height: 122px;
+    margin-right: 20px;
+  }
+  h6 {
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #1583FF;
+    cursor: pointer;
+  }
+  .des {
+    margin-top: 15px;
+    font-size: 16px;
+    color: #666;
+    line-height: 26px;
+  }
+}
+</style>

src/pages/publish/show.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="wrap">
+    <div class="content">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <div class="article">
+        <div class="left">
+          <h2>{{ form.title }}</h2>
+          <p class="name">作者</p>
+          <p class="val">{{ form.author }}</p>
+          <p class="name">引用</p>
+          <p class="val">{{ form.author }}</p>
+          <p class="name">摘要</p>
+          <div class="des" v-html="form.summary"></div>
+        </div>
+        <div class="right">
+          <img class="pic" src="@/assets/images/publish3.png" alt="">
+          <div class="texts">
+            <p class="name">出版年份</p>
+            <p class="val">2022年</p>
+            <p class="name">出版物类型</p>
+            <p class="val">2022年</p>
+            <p class="name">DOI</p>
+            <p class="val">2022年</p>
+            <p class="name">其他字段</p>
+            <p class="val">2022年</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import mixins from '@/mixins/article'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      id: this.$route.query.articleId,
+      routes: [],
+      columnId: '',
+      form: {},
+      columnBanner: '',
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      this.getInfo()
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        // 设置面包屑
+        const { columnName, path, id } = this.$route.query
+        this.routes = [
+          {
+            name: columnName || data.columnName,
+            path: path ? '/' + path : '',
+            query: {
+              id: id || data.columnId
+            }
+          },
+          {
+            name: data.title
+          }
+        ]
+        this.form = data
+        this.columnId = data.columnId
+        // 如果没上传banner
+        if (!data.bannerImg) {
+          this.getBanner(this.columns)
+          this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
+        }
+      }).catch(err => {})
+
+      // 浏览量+1
+      // this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
+    },
+    // 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的
+    getBanner(data) {
+      for (const e of data) {
+        if (e.columnBanner) this.columnBanner = e.columnBanner
+        if (e.id == this.columnId) {
+          break
+        } else {
+          this.getBanner(e.children)
+        }
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  background: url(../../assets/images/publish1.png) no-repeat;
+}
+.content {
+  width: 1084px;
+  padding-top: 25px;
+  background: url(../../assets/images/publish2.png) bottom right/auto no-repeat;
+}
+.breadcrumb {
+  margin-bottom: 25px;
+}
+.article {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 846px;
+    padding: 30px;
+    margin-right: 16px;
+    background: #fff;
+    .name {
+      font-size: 24px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 33px;
+    }
+    .val {
+      margin-bottom: 38px;
+      font-size: 16px;
+      color: #333;
+      line-height: 30px;
+    }
+  }
+  h2 {
+    padding-bottom: 27px;
+    margin-bottom: 40px;
+    font-size: 36px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #333;
+    line-height: 50px;
+    border-bottom: 1px solid #ddd;
+  }
+  .right {
+    width: 222px;
+    background: #fff;
+    .texts {
+      padding: 15px;
+    }
+    .name {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      line-height: 20px;
+      color: #666666;
+    }
+    .val {
+      margin: 5px 0 36px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}
+@media (max-width: 1420px) {
+  .content {
+    width: 98%;
+  }
+}
+</style>

src/router/modules/publish.js

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