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

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">
+        <div class="info-link">
-          <h4>{{ area.areaName }}公共文化数字云平台</h4>
+          <div class="footer-us">
-          <!--<p>联系方式：18888888888</p>-->
+            <h4>{{ area.areaName }}公共文化数字云平台</h4>
-          <p>地址：{{ area.areaName }}群众艺术馆</p>
+            <!--<p>联系方式：18888888888</p>-->
-        </div>
+            <p>地址：{{ area.areaName }}群众艺术馆</p>
-        <div class="footer-link">
+          </div>
-          <h4>友情链接</h4>
+          <div class="footer-link">
-          <a href="https://www.culturedc.cn/" target="_blank" class="link-item">国家公共文化云</a>
+            <h4>友情链接</h4>
-          <a href="http://xzzzqqyg.com/" target="_blank" class="link-item">西藏群众艺术馆</a>
+            <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
+      display flex
-      width 850px
+      flex-direction column
-      overflow hidden
       .footer-logo
         display block
         margin-bottom 15px
         width 485px
         height 77px
-      .footer-us
+      .info-link
-        float left
+        display flex
-        color #fff
+        .footer-us
-        font-size 14px
+          float left
-        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
           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>

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>

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>

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>

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) {
+    goDetail: function (item) {
-      if (link) {
+      goDetail(item, '', '', this.$router)
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
     }
   },
   mounted () {

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) {
+    goDetail: function (item) {
-      if (link) {
+      goDetail(item, '', '', this.$router)
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
     }
   },
   mounted: function () {

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) {
+    goDetail: function (item) {
-      if (link) {
+      goDetail(item, '', '', this.$router)
-        window.open(link)
-      } else {
-        window.location.href = this.publishUrl + url
-      }
     }
   },
   mounted () {

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) {
+    goDetail: function (item) {
-      window.location.href = this.publishUrl + url
+      goDetail(item, '', '', this.$router)
     }
   }
 }

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;
       }
       // 链接

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: [
+      navs,
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
       title: '',
       playFileId: '',
       coverFileId: '',

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: [
+      navs,
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
       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>

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>

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: [
+            navs,
-                {
-                    to: this.$route.query.navPath,
-                    name: this.$route.query.navTitle
-                },
-                {
-                    name: '详情'
-                }
-            ],
             title: '',
             author: '',
             publishDate: '',

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: [
+      navs,
-        {
-          to: this.$route.query.navPath,
-          name: this.$route.query.navTitle
-        },
-        {
-          name: '详情'
-        }
-      ],
       title: '',
       playFileId: '',
       coverFileId: '',

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
+      }
     }
   ]
 })