增加详情模板页面

src/pages/NewsView/NewsView1.vue

@@ -1,20 +1,23 @@
 <template>
   <div>
     <Header></Header>
-    <Nav :navs="navs"/>
+    <Nav :navs="navs" />
     <div class="type">
       <div class="type-container">
         <span>区域：</span>
         <ul style="display: inline-block;width: 95%;">
-          <li :class="{active: area === defaultArea}" @click="changeArea(defaultArea)">全部</li>
-          <li v-for="(btn,idx) in areaList" :key="btn.areaId" :class="{active: area === btn.areaCode}" @click="changeArea(btn.areaCode)">{{ btn.areaName }}</li>
+          <li :class="{ active: area === defaultArea }" @click="changeArea(defaultArea)">全部</li>
+          <li v-for="(btn, idx) in areaList" :key="btn.areaId" :class="{ active: area === btn.areaCode }"
+            @click="changeArea(btn.areaCode)">{{ btn.areaName }}</li>
         </ul>
       </div>
       <div class="type-container" v-if="typeList.length > 0">
         <span>类型：</span>
         <ul>
-          <li :class="{active: page.newsDirectoriesParentId === newsDirectoriesId}" @click="changeType(null)">全部</li>
-          <li v-for="(btn,idx) in typeList" :key="btn.newsDirectoriesId" :class="{active: page.newsDirectoriesId === btn.newsDirectoriesId}" @click="changeType(btn.newsDirectoriesId)">{{ btn.directoriesName }}</li>
+          <li :class="{ active: page.newsDirectoriesParentId === newsDirectoriesId }" @click="changeType(null)">全部</li>
+          <li v-for="(btn, idx) in typeList" :key="btn.newsDirectoriesId"
+            :class="{ active: page.newsDirectoriesId === btn.newsDirectoriesId }"
+            @click="changeType(btn.newsDirectoriesId)">{{ btn.directoriesName }}</li>
         </ul>
       </div>
     </div>
@@ -22,14 +25,15 @@
       <div class="dynamics-left">
         <div class="dynamics-list" v-if="!isLoading">
           <ul v-if="hasData">
-            <li v-for="(list,idx) in requestList" :key="idx" @click="goDetail(list)" :title="list.newsContentTitle">
+            <li v-for="(list, idx) in requestList" :key="idx" @click="goDetail(list)" :title="list.newsContentTitle">
               <div class="dynamics-list-left">
                 <img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
               </div>
               <div class="dynamics-list-right">
                 <h3>{{ list.newsContentTitle }}</h3>
                 <p class="news-summary">{{ list.newsContentSummary }}</p>
-                <p>作者：{{ list.newsContentAuthor }}<span>{{ list.newsContentPublishTime }}</span><span v-if="page.newsDirectoriesParentId">[{{list.newsDirectoriesName}}]</span></p>
+                <p>作者：{{ list.newsContentAuthor }}<span>{{ list.newsContentPublishTime }}</span><span
+                    v-if="page.newsDirectoriesParentId">[{{ list.newsDirectoriesName }}]</span></p>
               </div>
             </li>
           </ul>
@@ -43,18 +47,21 @@
       <span @click="paging(1)">首页</span>
       <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
       <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
-        <li v-for="cpage in page.totalPage" :class="{'active': page.page === cpage}" :key="cpage" @click="paging(cpage)">
+        <li v-for="cpage in page.totalPage" :class="{ 'active': page.page === cpage }" :key="cpage" @click="paging(cpage)">
           {{ cpage }}
         </li>
       </ul>
       <ul v-if="page.totalPage > 5">
-        <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page === cpage}" :key="cpage" @click="paging(cpage)">
+        <li v-if="page.page < 3" v-for="cpage in 5" :class="{ 'active': page.page === cpage }" :key="cpage"
+          @click="paging(cpage)">
           {{ cpage }}
         </li>
-        <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page === (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+        <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5"
+          :class="{ 'active': page.page === (page.totalPage - 5 + cpage) }" :key="cpage" @click="paging(cpage)">
           {{ page.totalPage - 5 + cpage }}
         </li>
-        <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page === (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+        <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5"
+          :class="{ 'active': page.page === (page.page - (3 - cpage)) }" :key="cpage" @click="paging(cpage)">
           {{ page.page - (3 - cpage) }}
         </li>
       </ul>
@@ -64,9 +71,7 @@
       <i v-if="showJumpBtn">/{{ page.totalPage }}页</i>
       <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
     </div>
-    <div class="loading" v-if="isLoading">
-      <img src="@/assets/images/loading.gif" alt="">
-    </div>
+    <loading v-show="isLoading"/>
     <Footer></Footer>
   </div>
 </template>
@@ -76,6 +81,8 @@ import Header from '@/common/components/Header'
 import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Nav from '../../component/Nav'
+import Loading from '../../component/Loading'
+import { goDetail } from './NewsViewUtil'
 import axios from 'axios'
 
 export default {
@@ -83,9 +90,10 @@ export default {
   components: {
     Header,
     Footer,
-    Nav
+    Nav,
+    Loading
   },
-  data () {
+  data() {
     let navTitle = this.$route.query.navTitle;
     return {
       navTitle,
@@ -117,10 +125,10 @@ export default {
     }
   },
   computed: {
-    showJumpBtn () {
+    showJumpBtn() {
       return this.page.totalPage > 1
     },
-    hasData () {
+    hasData() {
       return this.requestList.length > 0
     }
   },
@@ -158,32 +166,8 @@ export default {
       this.changePage = page
       this.getNews()
     },
-    goDetail: function (item, newsContentId, newsContentType) {
-      // 文章
-      if(item.newsContentType === '1') {
-        this.$router.push(`/newsViewDetailText/${item.newsContentId}?navTitle=${this.navTitle}&navPath=${this.$route.fullPath}`)
-        return;
-      }
-      // 图片
-      if(item.newsContentType === '2') {
-        return;
-      }
-      // 音频
-      if(item.newsContentType === '3') {
-        return;
-      }
-      // 视频
-      if(item.newsContentType === '4') {
-        return;
-      }
-      // PDF
-      if(item.newsContentType === '5') {
-        return;
-      }
-      // 链接
-      if(item.newsContentType === '6') {
-        return;
-      }
+    goDetail: function (item) {
+      goDetail(item, this.navTitle, this.$route.fullPath, this.$router)
     },
     getTypeList: function () {
       var self = this
@@ -219,7 +203,7 @@ export default {
       })
     }
   },
-  mounted () {
+  mounted() {
     this.getTypeList()
     this.getAreaList()
   }
@@ -435,13 +419,4 @@ export default {
     color #fff
     font-size 14px
 
-.loading
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-  background rgba(255, 255, 255, 0.6)
-  padding 30px
-  border-radius 10px
-  box-shadow 0 0 17px #DEDEDE
 </style>

src/pages/NewsView/NewsView2.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
     <Header></Header>
-    <div class="location">
-      <div class="location-content">
-        您的位置：
-        <router-link to="/">首页</router-link>
-        > {{ navTitle }}
-      </div>
-    </div>
+    <Nav :navs="navs" />
     <div class="type">
       <div class="type-container">
         <span>区域：</span>
@@ -32,7 +26,7 @@
           </div>
           <div class="character-right">
             <ul v-if="list.innerList && list.innerList.length > 0">
-              <li v-for="(inner,idx) in list.innerList" :key="idx" @click="goDetail(inner.newsContentLink, inner.templateRecordUrl)" :title="inner.newsContentTitle">
+              <li v-for="(inner,idx) in list.innerList" :key="idx" @click="goDetail(inner)" :title="inner.newsContentTitle">
                 <div class="recommend-img">
                   <img :src="url + 'route/file/download/false/' + inner.newsContentCoverList" alt="">
                   <!--                  <img src="@/assets/images/play.png" alt="" class="play-btn">-->
@@ -53,9 +47,7 @@
         </div>
       </div>
     </div>
-    <div class="loading" v-if="isLoading">
-      <img src="@/assets/images/loading.gif" alt="">
-    </div>
+    <loading v-show="isLoading"/>
     <Footer></Footer>
   </div>
 </template>
@@ -64,17 +56,28 @@
 import Header from '@/common/components/Header'
 import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
+import Nav from '../../component/Nav'
+import Loading from '../../component/Loading'
+import { goDetail } from './NewsViewUtil'
 import axios from 'axios'
 
 export default {
   name: 'NewsView2',
   components: {
     Header,
-    Footer
+    Footer,
+    Nav,
+    Loading
   },
   data () {
+    let navTitle = this.$route.query.navTitle;
     return {
-      navTitle: this.$route.query.navTitle,
+      navTitle,
+      navs: [
+        {
+          name: navTitle
+        },
+      ],
       newsDirectoriesId: this.$route.query.newsDirectoriesId,
       classList: [],
       recommend: [],
@@ -125,12 +128,8 @@ export default {
         self.$set(item, 'innerList', 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.navTitle, this.$route.fullPath, this.$router)
     },
     changeArea: function (code) {
       if (this.isLoading) {
@@ -349,13 +348,4 @@ export default {
                 text-overflow ellipsis
                 font-family '宋体'
 
-.loading
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-  background rgba(255, 255, 255, 0.6)
-  padding 30px
-  border-radius 10px
-  box-shadow 0 0 17px #DEDEDE
 </style>

src/pages/NewsView/NewsView3.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
     <Header></Header>
-    <div class="location">
-      <div class="location-content">
-        您的位置：
-        <router-link to="/">首页</router-link>
-        > {{ navTitle }}
-      </div>
-    </div>
+    <Nav :navs="navs" />
     <div class="type">
       <div class="type-container">
         <span>区域：</span>
@@ -27,7 +21,7 @@
     <div class="volunteer">
       <div v-if="!isLoading">
         <ul v-if="hasData">
-          <li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list.templateRecordUrl)">
+          <li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list)">
             <div class="volunteer-img">
               <img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
             </div>
@@ -68,9 +62,7 @@
       <i v-if="showJumpBtn">/{{ page.totalPage }}页</i>
       <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
     </div>
-    <div class="loading" v-if="isLoading">
-      <img src="@/assets/images/loading.gif" alt="">
-    </div>
+    <loading v-show="isLoading"/>
     <Footer></Footer>
   </div>
 </template>
@@ -79,17 +71,28 @@
 import Header from '@/common/components/Header'
 import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
+import Nav from '../../component/Nav'
+import Loading from '../../component/Loading'
+import { goDetail } from './NewsViewUtil'
 import axios from 'axios'
 
 export default {
   name: 'NewsView3',
   components: {
     Header,
-    Footer
+    Footer,
+    Nav,
+    Loading
   },
   data () {
+    let navTitle = this.$route.query.navTitle;
     return {
-      navTitle: this.$route.query.navTitle,
+      navTitle,
+      navs: [
+        {
+          name: navTitle
+        },
+      ],
       newsDirectoriesId: this.$route.query.newsDirectoriesId,
       areaList: [],
       changePage: 1,
@@ -119,8 +122,8 @@ export default {
     }
   },
   methods: {
-    goDetail: function (url) {
-      window.location.href = this.publishUrl + url
+    goDetail: function (item) {
+      goDetail(item, this.navTitle, this.$route.fullPath, this.$router)
     },
     doJumpPage: function () {
       this.page.page = this.changePage
@@ -199,26 +202,6 @@ export default {
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 @import "~styles/public.styl"
-.loading
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-  background rgba(255, 255, 255, 0.6)
-  padding 30px
-  border-radius 10px
-  box-shadow 0 0 17px #DEDEDE
-
-.location
-  background #e5e5e5
-  line-height 30px
-
-  .location-content
-    width 1200px
-    margin 0 auto
-    font-size 14px
-    color #565656
-
 .volunteer
   width 1200px
   min-height 400px

src/pages/NewsView/NewsView3Sub.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <Header></Header>
-    <div class="location">
-      <div class="location-content">
-        您的位置：<router-link to="/">首页</router-link> > {{navTitle}}
-      </div>
-    </div>
+    <Nav :navs="navs" />
     <div class="type">
       <div class="type-container">
         <span>类型：</span>
@@ -18,7 +14,7 @@
     <div class="volunteer">
       <div v-if="!isLoading">
         <ul v-if="hasData">
-          <li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list.templateRecordUrl)">
+          <li v-for="(list,idx) in classList" :key="idx" @click="goDetail(list)">
             <div class="volunteer-img">
               <img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
             </div>
@@ -58,9 +54,7 @@
       <i v-if="showJumpBtn">/{{page.totalPage}}页</i>
       <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
     </div>
-    <div class="loading" v-if="isLoading">
-      <img src="@/assets/images/loading.gif" alt="">
-    </div>
+    <loading v-show="isLoading"/>
     <Footer></Footer>
   </div>
 </template>
@@ -69,17 +63,28 @@
 import Header from '@/common/components/Header'
 import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
+import Nav from '../../component/Nav'
+import Loading from '../../component/Loading'
+import { goDetail } from './NewsViewUtil'
 import axios from 'axios'
 
 export default {
   name: 'NewsView3Sub',
   components: {
     Header,
-    Footer
+    Footer,
+    Nav,
+    Loading
   },
   data () {
+    let navTitle = this.$route.query.navTitle;
     return {
-      navTitle: this.$route.query.navTitle,
+      navTitle,
+      navs: [
+        {
+          name: navTitle
+        },
+      ],
       areaCode: this.$route.query.areaCode,
       newsDirectoriesId: this.$route.query.newsDirectoriesId,
       newsDirectoriesParentId: this.$route.query.newsDirectoriesParentId,
@@ -107,8 +112,8 @@ export default {
     }
   },
   methods: {
-    goDetail: function (url) {
-      window.location.href = this.publishUrl + url
+    goDetail: function (item) {
+      goDetail(item, this.navTitle, this.$route.fullPath, this.$router)
     },
     doJumpPage: function () {
       this.page.page = this.changePage
@@ -163,23 +168,6 @@ export default {
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 @import "~styles/public.styl"
-.loading
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-  background rgba(255,255,255,0.6)
-  padding 30px
-  border-radius 10px
-  box-shadow 0 0 17px #DEDEDE
-.location
-  background #e5e5e5
-  line-height 30px
-  .location-content
-    width 1200px
-    margin 0 auto
-    font-size 14px
-    color #565656
 .volunteer
   width 1200px
   min-height 400px

src/pages/NewsView/NewsViewUtil.js

@@ -0,0 +1,30 @@
+export const goDetail = (news, navTitle, navPath, router) => {
+    // 文章
+    if(news.newsContentType === '1') {
+        router.push(`/newsViewDetailText/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        return;
+      }
+      // 图片
+      if(news.newsContentType === '2') {
+        router.push(`/newsViewDetailImage/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        return;
+      }
+      // 音频
+      if(news.newsContentType === '3') {
+        router.push(`/newsViewDetailAudio/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        return;
+      }
+      // 视频
+      if(news.newsContentType === '4') {
+        router.push(`/newsViewDetailVideo/${news.newsContentId}?navTitle=${navTitle}&navPath=${navPath}`)
+        return;
+      }
+      // PDF
+      if(news.newsContentType === '5') {
+        return;
+      }
+      // 链接
+      if(news.newsContentType === '6') {
+        return;
+      }
+}

src/pages/NewsViewDetail/NewsViewDetailAudio.vue

@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <Header />
+        <Nav :navs="navs" />
+        <div class="container">
+            <div class="title">{{ title }}</div>
+            <div class="player" v-show="playFileId">
+                <div class="video">
+                    <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
+                </div>
+                <div class="list">
+                    <div class="play-title">目录</div>
+                    <div class="play-buttons">
+                        <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(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: 'NewsViewDetailAudio',
+    components: {
+        Header,
+        Footer,
+        Loading,
+        Nav
+    },
+    data() {
+        return {
+            isLoading: false,
+            navs: [
+                {
+                    to: this.$route.query.navPath,
+                    name: this.$route.query.navTitle
+                },
+                {
+                    name: '详情'
+                }
+            ],
+            title: '',
+            playFileId: '',
+            coverFileId: '',
+            fileList: []
+        }
+    },
+    methods: {
+        onVideoPlayClick(file) {
+            this.playFileId = 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.playFileId = data.fileList[0].contentFileFileId;
+                if(data.newsContentCoverList.length > 0 && 
+                    data.newsContentCoverList[0].contentCoverId) {
+                    vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
+                }
+                vueSelf.fileList = data.fileList;
+            }).catch(resp => {
+                console.error(resp)
+            }).finally(() => {
+                vueSelf.isLoading = false
+            })
+        }
+    },
+    computed: {
+        getSrc() {
+            return `${common.url}route/file/download/true/${this.playFileId}`
+        },
+        getPosterSrc() {
+            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
+        },
+    },
+    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 #3e3e3e
+    .title
+        font-size 20px
+        color #fff
+        font-weight normal
+        line-height 35px
+        text-align center
+        padding 10px 0
+    .player
+        display flex
+        justify-content center
+        .video
+            video
+                width 100%
+                height 100%
+                background-color #000
+                outline none
+        .list
+            background-color #343434
+            display flex
+            flex-direction column
+            .play-title
+                font-size 18px
+                color #f9f6f6
+                text-align center
+                border-bottom 2px solid #797777
+                padding 10px
+            .play-buttons
+                display flex
+                flex-wrap wrap
+                padding 5px 0 5px 5px
+                a
+                    width 44px
+                    height 34px
+                    line-height 34px
+                    text-align center
+                    background-color #3a3a3a
+                    color #FFF
+                    margin 0 5px 5px 0
+                a:hover
+                        background-color #A0333B
+                .active
+                    background-color #A0333B
+@media (min-width: 1200px)
+    .title
+        width 1200px
+    .player 
+        width 1200px
+        flex-direction row
+        
+        .video
+            width 800px
+            height 600px
+        .list
+            width 300px
+            min-height 600px
+@media (max-width: 1200px)
+    .title
+        width 600px
+    .player
+        width 600px
+        flex-direction column
+        
+        .video
+            width 100%
+            height 450px
+        .list
+            width 100%
+            min-height 150px
+</style>

src/pages/NewsViewDetail/NewsViewDetailImage.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+        <Header />
+        <Nav :navs="navs" />
+        <div class="container">
+            <div class="title">{{ title }}</div>
+            <div class="swiper-container-outer">
+                <swiper ref="swiperMain" class="swiper-outer" v-if="fileList.length > 0" :options="swiperOptions">
+                    <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>
+                </swiper>
+                <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
+                    <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
+                        <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
+                    </swiper-slide>
+                </swiper>
+            </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() {
+        return {
+            isLoading: false,
+            navs: [
+                {
+                    to: this.$route.query.navPath,
+                    name: this.$route.query.navTitle
+                },
+                {
+                    name: '详情'
+                }
+            ],
+            title: '',
+            swiperOptions: {
+                pagination: '.swiper-pagination',
+                paginationClickable: true,
+                loop: true,
+                loopedSlides: 8,
+                spaceBetween: 10,
+                autoplay: 3000,
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                }
+            },
+            swiperOptionThumbs: {
+                loop: true,
+                spaceBetween: 10,
+                centeredSlides: true,
+                slidesPerView: 4,
+                touchRatio: 1,
+                slideToClickedSlide: true,
+            },
+            fileList: []
+        }
+    },
+    methods: {
+        getSrc(file) {
+            return `${common.url}route/file/download/false/${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.fileList = data.fileList;
+                vueSelf.$nextTick(() => {
+                    const swiperMain = vueSelf.$refs.swiperMain.swiper
+                    const swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
+                    console.log(vueSelf.$refs)
+                    swiperMain.controller.control = swiperThumbs
+                    swiperThumbs.controller.control = swiperMain
+                })
+            }).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
+    .title
+        font-size 20px
+        color #fff
+        font-weight normal
+        line-height 35px
+        text-align center
+        padding 10px 0
+    .swiper-container-outer
+        position relative
+        box-sizing border-box
+        background-color #3e3e3e
+        padding 10px
+        .swiper-outer
+            width 1180px
+            height 500px
+            background-color #000
+            .swiper-box
+                cursor pointer
+            img
+                width 100%
+                height 100%
+                object-fit scale-down
+        .swiper-thumbs
+            height 200px
+            box-sizing border-box
+            margin-top 10px
+            .swiper-box
+                width 25%
+                height 100%
+                opacity 0.4
+                cursor pointer
+            .swiper-slide-active
+                opacity 1
+            img
+                width 100%
+                height 100%
+                background-color #000
+                object-fit scale-down
+@media (min-width: 1200px)
+    .title
+        width 1200px
+    .swiper-container-outer
+        width 1200px
+@media (max-width: 1200px)
+    .title
+        width 600px
+    .swiper-container-outer
+        width 600px
+</style>

src/pages/NewsViewDetail/NewsViewDetailVideo.vue

@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <Header />
+        <Nav :navs="navs" />
+        <div class="container">
+            <div class="title">{{ title }}</div>
+            <div class="player" v-show="playFileId">
+                <div class="video">
+                    <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
+                </div>
+                <div class="list">
+                    <div class="play-title">目录</div>
+                    <div class="play-buttons">
+                        <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(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: 'NewsViewDetailVideo',
+    components: {
+        Header,
+        Footer,
+        Loading,
+        Nav
+    },
+    data() {
+        return {
+            isLoading: false,
+            navs: [
+                {
+                    to: this.$route.query.navPath,
+                    name: this.$route.query.navTitle
+                },
+                {
+                    name: '详情'
+                }
+            ],
+            title: '',
+            playFileId: '',
+            coverFileId: '',
+            fileList: []
+        }
+    },
+    methods: {
+        onVideoPlayClick(file) {
+            this.playFileId = 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.playFileId = data.fileList[0].contentFileFileId;
+                if(data.newsContentCoverList.length > 0 && 
+                    data.newsContentCoverList[0].contentCoverId) {
+                    vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
+                }
+                vueSelf.fileList = data.fileList;
+            }).catch(resp => {
+                console.error(resp)
+            }).finally(() => {
+                vueSelf.isLoading = false
+            })
+        }
+    },
+    computed: {
+        getSrc() {
+            return `${common.url}route/file/download/true/${this.playFileId}`
+        },
+        getPosterSrc() {
+            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
+        },
+    },
+    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 #3e3e3e
+    .title
+        font-size 20px
+        color #fff
+        font-weight normal
+        line-height 35px
+        text-align center
+        padding 10px 0
+    .player
+        display flex
+        justify-content center
+        .video
+            video
+                width 100%
+                height 100%
+                background-color #000
+                outline none
+        .list
+            background-color #343434
+            display flex
+            flex-direction column
+            .play-title
+                font-size 18px
+                color #f9f6f6
+                text-align center
+                border-bottom 2px solid #797777
+                padding 10px
+            .play-buttons
+                display flex
+                flex-wrap wrap
+                padding 5px 0 5px 5px
+                a
+                    width 44px
+                    height 34px
+                    line-height 34px
+                    text-align center
+                    background-color #3a3a3a
+                    color #FFF
+                    margin 0 5px 5px 0
+                a:hover
+                        background-color #A0333B
+                .active
+                    background-color #A0333B
+@media (min-width: 1200px)
+    .title
+        width 1200px
+    .player 
+        width 1200px
+        flex-direction row
+        
+        .video
+            width 800px
+            height 600px
+        .list
+            width 300px
+            min-height 600px
+@media (max-width: 1200px)
+    .title
+        width 600px
+    .player
+        width 600px
+        flex-direction column
+        
+        .video
+            width 100%
+            height 450px
+        .list
+            width 100%
+            min-height 150px
+</style>

src/router/index.js

@@ -29,6 +29,10 @@ import NewsView2 from '../pages/NewsView/NewsView2'
 import NewsView3 from '../pages/NewsView/NewsView3'
 import NewsView3Sub from '../pages/NewsView/NewsView3Sub'
 import NewsViewDetailText from '../pages/NewsViewDetail/NewsViewDetailText'
+import NewsViewDetailVideo from '../pages/NewsViewDetail/NewsViewDetailVideo'
+import NewsViewDetailAudio from '../pages/NewsViewDetail/NewsViewDetailAudio'
+import NewsViewDetailImage from '../pages/NewsViewDetail/NewsViewDetailImage'
+
 Vue.use(Router)
 
 export default new Router({
@@ -285,6 +289,36 @@ export default new Router({
         title: `${common.area.areaName}公共文化数字云平台`,
         keepAlive: false
       }
+    },
+    {
+      path: '/newsViewDetailVideo/:newsContentId',
+      name: 'newsViewDetailVideo',
+      component: NewsViewDetailVideo,
+      props: true,
+      meta: {
+        title: `${common.area.areaName}公共文化数字云平台`,
+        keepAlive: false
+      }
+    },
+    {
+      path: '/newsViewDetailAudio/:newsContentId',
+      name: 'newsViewDetailAudio',
+      component: NewsViewDetailAudio,
+      props: true,
+      meta: {
+        title: `${common.area.areaName}公共文化数字云平台`,
+        keepAlive: false
+      }
+    },
+    {
+      path: '/newsViewDetailImage/:newsContentId',
+      name: 'newsViewDetailImage',
+      component: NewsViewDetailImage,
+      props: true,
+      meta: {
+        title: `${common.area.areaName}公共文化数字云平台`,
+        keepAlive: false
+      }
     }
   ]
 })