增加PDF详情，页面头尾响应式

2023-03-11 22:56:43 +08:00 · 2023-03-11 22:56:43 +08:00 · d4d6473602
commit d4d6473602
parent 9de5ce78c1
15 changed files with 313 additions and 121 deletions
--- a/src/common/components/Footer.vue
+++ b/src/common/components/Footer.vue
@ -3,30 +3,32 @@
    <div class="footer-top">
      <div class="footer-left">
        <img :src="'static/logo/footer-logo-' + area.areaId + '.png'" alt="" class="footer-logo">
-        <div class="footer-us">
-          <h4>{{ area.areaName }}公共文化数字云平台</h4>
-          <!--<p>联系方式：18888888888</p>-->
-          <p>地址：{{ area.areaName }}群众艺术馆</p>
-        </div>
-        <div class="footer-link">
-          <h4>友情链接</h4>
-          <a href="https://www.culturedc.cn/" target="_blank" class="link-item">国家公共文化云</a>
-          <a href="http://xzzzqqyg.com/" target="_blank" class="link-item">西藏群众艺术馆</a>
+        <div class="info-link">
+          <div class="footer-us">
+            <h4>{{ area.areaName }}公共文化数字云平台</h4>
+            <!--<p>联系方式：18888888888</p>-->
+            <p>地址：{{ area.areaName }}群众艺术馆</p>
+          </div>
+          <div class="footer-link">
+            <h4>友情链接</h4>
+            <a href="https://www.culturedc.cn/" target="_blank" class="link-item">国家公共文化云</a>
+            <a href="http://xzzzqqyg.com/" target="_blank" class="link-item">西藏群众艺术馆</a>
+          </div>
        </div>
      </div>
      <div class="footer-right">
        <ul>
          <li>
-            <h4>{{ area.areaName }}公共文化小程序</h4>
            <img src="@/assets/images/qr-code-xcx.jpg" alt="">
+            <h4>{{ area.areaName }}公共文化小程序</h4>
          </li>
          <li>
-            <h4>{{ area.areaName }}公共文化公众号</h4>
            <img src="@/assets/images/qr-code-gzh.jpg" alt="">
+            <h4>{{ area.areaName }}公共文化公众号</h4>
          </li>
          <li>
-            <h4>{{ area.areaName }}公共文化APP</h4>
            <img src="@/assets/images/qr-code-app.jpg" alt="">
+            <h4>{{ area.areaName }}公共文化APP</h4>
          </li>
        </ul>
      </div>
@ -54,47 +56,45 @@ export default {
  background #3e3a39
  margin-top 20px
  .footer-top
-    width 1200px
    margin 0 auto
    padding 30px 0
-    overflow hidden
+    display flex
+    justify-content space-between
    .footer-left
-      float left
-      width 850px
-      overflow hidden
+      display flex
+      flex-direction column
      .footer-logo
        display block
        margin-bottom 15px
        width 485px
        height 77px
-      .footer-us
-        float left
-        color #fff
-        font-size 14px
-        h4
-          line-height 30px
-        p
-          line-height 28px
-      .footer-link
-        width 570px
-        margin-left 20px
-        float left
-        color #fff
-        font-size 14px
-        h4
-          line-height 30px
-        .link-item
-          display inline-block
-          width 120px
-          overflow hidden
-          white-space nowrap
-          text-overflow ellipsis
-          margin-right 10px
-          line-height 25px
+      .info-link
+        display flex
+        .footer-us
+          float left
          color #fff
+          font-size 14px
+          h4
+            line-height 30px
+          p
+            line-height 28px
+        .footer-link
+          margin-left 20px
+          float left
+          color #fff
+          font-size 14px
+          h4
+            line-height 30px
+          .link-item
+            display inline-block
+            width 120px
+            overflow hidden
+            white-space nowrap
+            text-overflow ellipsis
+            margin-right 10px
+            line-height 28px
+            color #fff
    .footer-right
-      float right
-      margin-top 80px
      ul
        overflow hidden
        li
@ -103,18 +103,36 @@ export default {
          text-align center
          margin-right 10px
          h4
-            font-size 12px
+            font-size 15px
            color #fff
-            margin-bottom 5px
+            margin-top 10px
          img
            width 100px
            height 100px
  .footer-bottom
    border-top solid 1px #f7f7f7
    padding 10px 0
-    min-width 1200px
    text-align center
+    display flex
+    justify-content center
    p
      font-size 14px
      color #fff
+
+@media (min-width: 1200px)
+  .footer-top
+    width 1200px
+
+@media (max-width: 1200px)
+  .footer-top
+    width 800px
+    flex-direction column
+    align-items center
+    .footer-left
+      align-items center
+      .info-link
+        align-items center
+    .footer-right
+      margin-top 20px
+
 </style>
--- a/src/common/components/Header.vue
+++ b/src/common/components/Header.vue
@ -128,6 +128,11 @@ export default {
        })
    },
    doSearch: function () {
+      axios.get(`${common.publishUrl}module/app/contentcensusrelease/log`, {
+        params: {
+          requestUrl: `网页QUERY${this.keywords}新闻`
+        }
+      });
      const {href} = this.$router.resolve({
        path: '/searchResult',
        query: {
@ -187,7 +192,6 @@ export default {
  line-height 40px

  .top-line-content
-    width 1200px
    margin 0 auto

    span
@ -220,7 +224,6 @@ export default {
        cursor pointer

 .header
-  width 1200px
  margin 0 auto

  .logo-search
@ -272,7 +275,6 @@ export default {
  background #FAFAFA

  .nav-container
-    width 1200px
    margin 0 auto
    overflow hidden
    display flex
@ -293,4 +295,20 @@ export default {

      a
        display block
+@media (min-width: 1200px)
+  .top-line-content
+    width 1200px
+  .header
+    width 1200px
+  .nav-container
+    width 1200px
+
+@media (max-width: 1200px)
+  .top-line-content
+    width 800px
+  .header
+    width 800px
+  .nav-container
+    width 800px
+    flex-wrap wrap
 </style>
--- a/src/component/Loading.vue
+++ b/src/component/Loading.vue
@ -20,4 +20,5 @@ export default {
    padding 30px
    border-radius 10px
    box-shadow 0 0 17px #DEDEDE
+    z-index 100000
 </style>
--- a/src/component/Nav.vue
+++ b/src/component/Nav.vue
@ -39,7 +39,6 @@ export default {
    line-height 30px

    .location-content
-        width 1200px
        margin 0 auto
        font-size 14px
        color #565656
@ -54,5 +53,5 @@ export default {
        width 1200px
@media (max-width: 1200px)
    .location-content
-        width 768px
+        width 800px
 </style>
--- a/src/pages/Index/components/NewsView1.vue
+++ b/src/pages/Index/components/NewsView1.vue
@ -13,7 +13,7 @@
      </div>
      <div class="dynamic-content-right">
        <ul>
-          <li class="dynamic-right-list" v-for="(news,idx) in newsList" :key="idx" @click="goDetail(news.newsContentLink, news.templateRecordUrl)" :title="news.newsContentTitle">
+          <li class="dynamic-right-list" v-for="(news,idx) in newsList" :key="idx" @click="goDetail(news)" :title="news.newsContentTitle">
            <div class="date-box">
              <div class="year-month">
                {{ news.newsContentPublishTime }}
@ -34,6 +34,7 @@

 <script>
 import common from '@/common/components/common.js'
+import {goDetail} from '../../NewsView/NewsViewUtil'
 import axios from 'axios'

 export default {
@ -79,12 +80,8 @@ export default {
        self.newsList = res.data.rows
      })
    },
-    goDetail: function (link, url) {
-      if (link) {
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
+    goDetail: function (item) {
+      goDetail(item, '', '', this.$router)
    }
  },
  mounted () {
--- a/src/pages/Index/components/NewsView2.vue
+++ b/src/pages/Index/components/NewsView2.vue
@ -7,7 +7,7 @@
      <div class="digital-swiper">
        <swiper :options="swiperOption" v-if="newsList.length > 0">
          <swiper-slide class="slide-box" v-for="(news, idx) in newsList" :key="idx">
-            <div class="digital-slide-box" @click="goDetail(news.newsContentLink, news.templateRecordUrl)" :title="news.newsContentTitle">
+            <div class="digital-slide-box" @click="goDetail(news)" :title="news.newsContentTitle">
              <img :src="url + 'route/file/download/false/' + news.newsContentCoverList" alt="" class="digital-slide-img">
              <p class="digital-slide-desc">{{news.newsContentTitle}}</p>
            </div>
@ -20,6 +20,7 @@
 <script>
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import {goDetail} from '../../NewsView/NewsViewUtil'
 import axios from 'axios'
 import common from '@/common/components/common.js'
 export default {
@ -70,12 +71,8 @@ export default {
        self.newsList = res.data.rows
      })
    },
-    goDetail: function (link, url) {
-      if (link) {
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
+    goDetail: function (item) {
+      goDetail(item, '', '', this.$router)
    }
  },
  mounted: function () {
--- a/src/pages/Index/components/NewsView3.vue
+++ b/src/pages/Index/components/NewsView3.vue
@ -6,7 +6,7 @@
      </div>
      <div class="exhibition">
        <ul>
-          <li v-for="(news,idx) in newsList" :key="idx" @click="goDetail(news.newsContentLink, news.templateRecordUrl)" :title="news.newsContentTitle">
+          <li v-for="(news,idx) in newsList" :key="idx" @click="goDetail(news)" :title="news.newsContentTitle">
            <div class="exhibition-img">
              <img :src="url + 'route/file/download/false/' + news.newsContentCoverList" alt="">
            </div>
@ -22,6 +22,7 @@

 <script>
 import common from '@/common/components/common.js'
+import {goDetail} from '../../NewsView/NewsViewUtil'
 import axios from 'axios'
 export default {
  name: 'NewsView3',
@ -60,12 +61,8 @@ export default {
        self.newsList = res.data.rows
      })
    },
-    goDetail: function (link, url) {
-      if (link) {
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
+    goDetail: function (item) {
+      goDetail(item, '', '', this.$router)
    }
  },
  mounted () {
--- a/src/pages/Index/components/Swiper.vue
+++ b/src/pages/Index/components/Swiper.vue
@ -2,7 +2,7 @@
    <div class="index-swiper">
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper-outer" v-if="swiperList && swiperList.length > 0">
        <swiper-slide class="swiper-box" v-for="(swiper,idx) in swiperList" :key="idx">
-          <img :src="url + 'route/file/download/false/' + swiper.newsContentCoverList" alt="" class="banner-img" @click="goDetail(swiper.templateRecordUrl)">
+          <img :src="url + 'route/file/download/false/' + swiper.newsContentCoverList" alt="" class="banner-img" @click="goDetail(swiper)">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
@ -11,6 +11,8 @@

 <script>
 import common from '@/common/components/common.js'
+import {goDetail} from '../../NewsView/NewsViewUtil'
+
 export default {
  name: 'IndexSwiper',
  props: {
@ -29,8 +31,8 @@ export default {
    }
  },
  methods: {
-    goDetail: function (url) {
-      window.location.href = this.publishUrl + url
+    goDetail: function (item) {
+      goDetail(item, '', '', this.$router)
    }
  }
 }
--- a/src/pages/NewsView/NewsViewUtil.js
+++ b/src/pages/NewsView/NewsViewUtil.js
@ -1,26 +1,34 @@
 export const goDetail = (news, navTitle, navPath, router) => {
+    console.log(news)
+    // 只要有链接就跳转
+    if(news.newsContentLink) {
+      window.open(news.newsContentLink);
+      return;
+    }
+    
    // 文章
    if(news.newsContentType === '1') {
-        router.push(`/newsViewDetailText/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        router.push(`/newsViewDetailText/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
        return;
      }
      // 图片
      if(news.newsContentType === '2') {
-        router.push(`/newsViewDetailImage/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        router.push(`/newsViewDetailImage/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
        return;
      }
      // 音频
      if(news.newsContentType === '3') {
-        router.push(`/newsViewDetailAudio/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        router.push(`/newsViewDetailAudio/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
        return;
      }
      // 视频
      if(news.newsContentType === '4') {
-        router.push(`/newsViewDetailVideo/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        router.push(`/newsViewDetailVideo/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
        return;
      }
      // PDF
      if(news.newsContentType === '5') {
+        router.push(`/newsViewDetailPdf/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
        return;
      }
      // 链接
--- a/src/pages/NewsViewDetail/NewsViewDetailAudio.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailAudio.vue
@ -38,17 +38,16 @@ export default {
    Nav
  },
  data () {
+    let navs = [{name: '详情'}];
+    if(this.$route.query.navTitle && this.$route.query.navTitle) {
+        navs.splice(0, 0, {
+            to: this.$route.query.navPath,
+            name: this.$route.query.navTitle
+        })
+    }
    return {
      isLoading: false,
-      navs: [
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
+      navs,
      title: '',
      playFileId: '',
      coverFileId: '',
--- a/src/pages/NewsViewDetail/NewsViewDetailImage.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailImage.vue
@ -4,9 +4,9 @@
    <Nav :navs="navs"/>
    <div class="container">
      <div class="title">{{ title }}</div>
-      <div class="swiper-container-outer">
+      <div class="swiper-container-outer" v-show="fileList.length > 0">
        <swiper ref="swiperMain" class="swiper-outer" :options="swiperOptionsMain">
-          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="index">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
            <img alt="暂无图片" :src="getSrc(file)">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
@ -14,7 +14,7 @@
          <div class="swiper-button-next swiper-button-white" slot="button-next" @click="onSwiperMainSlideNext()"></div>
        </swiper>
        <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
-          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="'s_'+ index">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="'s_'+ index">
            <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
          </swiper-slide>
        </swiper>
@ -43,17 +43,16 @@ export default {
  },
  data () {
    let vueSelf = this
+    let navs = [{name: '详情'}];
+    if(this.$route.query.navTitle && this.$route.query.navTitle) {
+        navs.splice(0, 0, {
+            to: this.$route.query.navPath,
+            name: this.$route.query.navTitle
+        })
+    }
    return {
      isLoading: false,
-      navs: [
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
+      navs,
      title: '',
      swiperMain: null,
      swiperOptionsMain: {
@ -82,12 +81,11 @@ export default {
        slidesPerView: 4,
        touchRatio: 1,
        slideToClickedSlide: true,
-        watchSlidesVisibility: true,
        onSlideChangeStart (swiper) {
          if (vueSelf.swiperMain) {
            vueSelf.swiperMain.slideTo(swiper.activeIndex, 300, false)
          }
-        }
+        },
      },
      fileList: []
    }
@ -158,7 +156,6 @@ export default {
    padding 10px

    .swiper-outer
-      width 1180px
      height 500px
      background-color #000

@ -196,6 +193,8 @@ export default {

  .swiper-container-outer
    width 1200px
+    .swiper-outer
+      width 1180px

@media (max-width: 1200px)
  .title
@ -203,4 +202,6 @@ export default {

  .swiper-container-outer
    width 600px
+    .swiper-outer
+      width 580px
 </style>
--- a/src/pages/NewsViewDetail/NewsViewDetailPdf.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailPdf.vue
@ -0,0 +1,146 @@
+<template>
+  <div>
+    <Header/>
+    <Nav :navs="navs"/>
+    <div class="container">
+      <div class="pdf-container">
+        <div class="cover-image" v-show="coverImage">
+          <img :src="coverImage">
+        </div>
+        <div class="content">
+          <div class="title" v-show="title">{{ title }}</div>
+          <div class="author" v-show="author">作者：{{ author }}</div>
+          <div class="summary" v-show="summary">简介：{{ summary }}</div>
+          <div class="read" v-show="fileList.length > 0">
+            <a href="javascript:void(0);" class="btn" v-for="(file, index) in fileList" :key="index" @click="onReadClick(file)">点击阅读 {{ index + 1 }} </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer/>
+    <loading v-show="isLoading"/>
+  </div>
+</template>
+
+<script>
+import Header from '@/common/components/Header'
+import Footer from '@/common/components/Footer'
+import common from '@/common/components/common.js'
+import Loading from '../../component/Loading'
+import Nav from '../../component/Nav'
+import axios from 'axios'
+
+export default {
+  name: 'NewsViewDetailImage',
+  components: {
+    Header,
+    Footer,
+    Loading,
+    Nav
+  },
+  data () {
+    let vueSelf = this;
+    let navs = [{name: '详情'}];
+    if(this.$route.query.navTitle && this.$route.query.navTitle) {
+        navs.splice(0, 0, {
+            to: this.$route.query.navPath,
+            name: this.$route.query.navTitle
+        })
+    }
+    return {
+      isLoading: false,
+      navs,
+      title: '',
+      author: '',
+      summary: '',
+      coverImage: '',
+      fileList: []
+    }
+  },
+  methods: {
+    onReadClick(file) {
+      window.open(`${common.url}route/file/download/true/${file.contentFileFileId}`)
+    },
+    init () {
+      let vueSelf = this
+      vueSelf.isLoading = true
+      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.author = data.newsContentAuthor
+        vueSelf.summary = data.newsContentSummary
+        if(data.newsContentCoverList.length > 0) {
+          vueSelf.coverImage = `${common.url}route/file/download/true/${data.newsContentCoverList[0].contentCoverId}`
+        }
+        vueSelf.fileList = data.fileList
+      }).catch(resp => {
+        console.error(resp)
+      }).finally(() => {
+        vueSelf.isLoading = false
+      })
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+  width 100%
+  min-height 450px
+  margin 0 auto
+  display flex
+  flex-direction column
+  align-items center
+  font-family '宋体'
+  background-color #5b5b5b
+
+  .pdf-container
+    background-color #FFF
+    min-height 520px
+    margin 20px 0
+    display flex
+    flex-direction row
+    .cover-image
+      width 400px
+      height 500px
+      margin 20px 
+      img
+        width 100%
+        height 100%
+        object-fit scale-down
+    .content
+      width 700px
+      display flex
+      flex-direction column
+      margin 20px
+      .title
+        font-size 36px
+        font-weight bold
+      .author
+      .type
+      .summary
+      .read
+        font-size 22px
+        margin-top 20px
+        .btn
+          font-size 20px
+          color #FFF
+          background-color #9f1512
+          padding 10px
+          border-radius 5px
+        .btn:hover
+          box-shadow 0 1px 2px 1px rgba(0,0,0,0.3)
+
+@media (min-width: 1200px)
+  .pdf-container
+    width 1200px
+
+@media (max-width: 1200px)
+  .pdf-container
+    width 600px
+</style>
--- a/src/pages/NewsViewDetail/NewsViewDetailText.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailText.vue
@ -38,17 +38,16 @@ export default {
        Nav
    },
    data() {
+        let navs = [{name: '详情'}];
+        if(this.$route.query.navTitle && this.$route.query.navTitle) {
+            navs.splice(0, 0, {
+                to: this.$route.query.navPath,
+                name: this.$route.query.navTitle
+            })
+        }
        return {
            isLoading: false,
-            navs: [
-                {
-                    to: this.$route.query.navPath,
-                    name: this.$route.query.navTitle
-                },
-                {
-                    name: '详情'
-                }
-            ],
+            navs,
            title: '',
            author: '',
            publishDate: '',
--- a/src/pages/NewsViewDetail/NewsViewDetailVideo.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailVideo.vue
@ -38,17 +38,16 @@ export default {
    Nav
  },
  data () {
+    let navs = [{name: '详情'}];
+    if(this.$route.query.navTitle && this.$route.query.navTitle) {
+        navs.splice(0, 0, {
+            to: this.$route.query.navPath,
+            name: this.$route.query.navTitle
+        })
+    }
    return {
      isLoading: false,
-      navs: [
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
+      navs,
      title: '',
      playFileId: '',
      coverFileId: '',
--- a/src/router/index.js
+++ b/src/router/index.js
@ -32,6 +32,7 @@ import NewsViewDetailText from '../pages/NewsViewDetail/NewsViewDetailText'
 import NewsViewDetailVideo from '../pages/NewsViewDetail/NewsViewDetailVideo'
 import NewsViewDetailAudio from '../pages/NewsViewDetail/NewsViewDetailAudio'
 import NewsViewDetailImage from '../pages/NewsViewDetail/NewsViewDetailImage'
+import NewsViewDetailPdf from '../pages/NewsViewDetail/NewsViewDetailPdf'

 Vue.use(Router)

@ -319,6 +320,16 @@ export default new Router({
        title: `${common.area.areaName}公共文化数字云平台`,
        keepAlive: false
      }
+    },
+    {
+      path: '/newsViewDetailPdf/:newsContentId',
+      name: 'newsViewDetailPdf',
+      component: NewsViewDetailPdf,
+      props: true,
+      meta: {
+        title: `${common.area.areaName}公共文化数字云平台`,
+        keepAlive: false
+      }
    }
  ]
 })