Tenlion/xzrkz-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整代码结构和增加组件

Browse Source
This commit is contained in:
TS-QD1 2023-03-09 18:31:23 +08:00
parent 97652aa50d
commit 5bc7fd546b
11 changed files with 303 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/common/components/Footer.vue
View File

@ -1,47 +1,47 @@
<template>
<div class="footer">
<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>
<div class="footer">
<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-right">
<ul>
<li>
<h4>{{area.areaName}}公共文化小程序</h4>
<img src="@/assets/images/qr-code-xcx.jpg" alt="">
</li>
<li>
<h4>{{area.areaName}}公共文化公众号</h4>
<img src="@/assets/images/qr-code-gzh.jpg" alt="">
</li>
<li>
<h4>{{area.areaName}}公共文化APP</h4>
<img src="@/assets/images/qr-code-app.jpg" alt="">
</li>
</ul>
<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 class="footer-bottom">
<p>版权所有：{{area.areaName}}群众艺术馆 Copyright© 2020 晋ICP备17001370号-2 技术支持：山西腾狮科技</p>
<div class="footer-right">
<ul>
<li>
<h4>{{ area.areaName }}公共文化小程序</h4>
<img src="@/assets/images/qr-code-xcx.jpg" alt="">
</li>
<li>
<h4>{{ area.areaName }}公共文化公众号</h4>
<img src="@/assets/images/qr-code-gzh.jpg" alt="">
</li>
<li>
<h4>{{ area.areaName }}公共文化APP</h4>
<img src="@/assets/images/qr-code-app.jpg" alt="">
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>版权所有：{{ area.areaName }}群众艺术馆 Copyright© 2020 晋ICP备17001370号-2 技术支持：山西腾狮科技</p>
</div>
</div>
</template>
<script>
import common from './common'
export default {
name: 'Footer',
data () {
data() {
return {
area: common.area
}

4
src/common/components/common.js
View File

@ -1,5 +1,5 @@
// const publishUrl = 'http://v3.xzszwhy.cn/'
const publishUrl = 'http://192.168.0.120:80/'
const publishUrl = 'http://v3.xzszwhy.cn/'
// const publishUrl = 'http://192.168.0.120:80/'
const url = `${publishUrl}xzszwhy/`
const liveUrl = `${publishUrl}live/`
const shopUrl = `${publishUrl}xzshop/`

23
src/component/Loading.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="loading">
<img src="@/assets/images/loading.gif" alt="">
</div>
</template>
<script>
export default {
name: 'Loading'
}
</script>
<style lang="stylus" scoped>
.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>

58
src/component/Nav.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="location">
<div class="location-content">
您的位置：
<span class="nav" v-for="(nav, index) in navArray" :key="index">
<router-link :to="nav.to" v-if="nav.to">{{ nav.name }}</router-link>
<span v-else>{{ nav.name }}</span>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'Nav',
props: {
navs: {
type: Array,
require: false,
default() {
return []
}
}
},
data() {
return {
navArray: [
{to: '/', name: '首页'},
...this.navs
]
}
}
}
</script>
<style lang="stylus" scoped>
.location
background #e5e5e5
line-height 30px
.location-content
width 1200px
margin 0 auto
font-size 14px
color #565656
.nav::after
content '>'
margin 0 5px
.nav:last-child::after
content: ' '
@media (min-width: 1200px)
.location-content
width 1200px
@media (max-width: 1200px)
.location-content
width 768px
</style>

27
src/pages/Index/Index.vue
View File

@ -1,15 +1,18 @@
<template>
<div>
<Header></Header>
<IndexSwiper :swiperList="swiperList" v-if="swiperList.length > 0"></IndexSwiper>
<div v-for="(newsType, index) in newsTypeList" :key="index">
<news-view1 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView1'"/>
<news-view2 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView2'"/>
<news-view3 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView3'"/>
</div>
<IndexService :activityList="activityList" v-if="activityList.length > 0"></IndexService>
<Footer></Footer>
<div>
<Header></Header>
<IndexSwiper :swiperList="swiperList" v-if="swiperList.length > 0"></IndexSwiper>
<div v-for="(newsType, index) in newsTypeList" :key="index">
<news-view1 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
v-if="newsType.directoriesWebView === 'newsView1'" />
<news-view2 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
v-if="newsType.directoriesWebView === 'newsView2'" />
<news-view3 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
v-if="newsType.directoriesWebView === 'newsView3'" />
</div>
<IndexService :activityList="activityList" v-if="activityList.length > 0"></IndexService>
<Footer></Footer>
</div>
</template>
<script>
@ -34,7 +37,7 @@ export default {
NewsView3,
Footer
},
data () {
data() {
return {
bannerList: [],
activityList: [],
@ -79,7 +82,7 @@ export default {
})
}
},
mounted () {
mounted() {
this.getNewsTypeList()
this.getActivityList()
this.getSwiper()

62
src/pages/NewsView1/NewsView1.vue → src/pages/NewsView/NewsView1.vue
View File

@ -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>
@ -28,7 +22,7 @@
<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.newsContentLink, list.templateRecordUrl)" :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>
@ -81,17 +75,25 @@
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 axios from 'axios'
export default {
name: 'NewsView1',
components: {
Header,
Footer
Footer,
Nav
},
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,
@ -156,11 +158,31 @@ export default {
this.changePage = page
this.getNews()
},
goDetail: function (link, url) {
if (link) {
window.open(link)
} else {
window.location.href = this.publishUrl + url
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;
}
},
getTypeList: function () {
@ -206,16 +228,6 @@ export default {
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.location
background #e5e5e5
line-height 30px
.location-content
width 1200px
margin 0 auto
font-size 14px
color #565656
.type
padding 15px 0
background #f0f0f0

0
src/pages/NewsView2/NewsView2.vue → src/pages/NewsView/NewsView2.vue
View File

0
src/pages/NewsView3/NewsView3.vue → src/pages/NewsView/NewsView3.vue
View File

0
src/pages/NewsView3Sub/NewsView3Sub.vue → src/pages/NewsView/NewsView3Sub.vue
View File

121
src/pages/NewsViewDetail/NewsViewDetailText.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div>
<Header />
<Nav :navs="navs"/>
<div class="container">
<div class="title" v-show="title">{{ title }}</div>
<div class="sub-title" v-show="author || publishDate">
<span class="source">
<span>新闻来源：</span>
<span>{{ author }}</span>
</span>
<span class="date">
<span>发布时间：</span>
<span>{{ publishDate }}</span>
</span>
</div>
<div class="content" v-html="content"></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: 'NewsViewDetailText',
components: {
Header,
Footer,
Loading,
Nav
},
data() {
return {
isLoading: false,
navs: [
{
to: this.$route.query.navPath,
name: this.$route.query.navTitle
},
{
name: '详情'
}
],
title: '',
author: '',
publishDate: '',
content: '',
}
},
methods: {
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.publishDate = data.newsContentPublishTime;
vueSelf.content = data.newsContentContent;
}).catch(resp => {
console.error(resp)
}).finally(() => {
vueSelf.isLoading = false
})
}
},
mounted() {
this.init();
}
}
</script>
<style lang="stylus" scoped>
.container
width 1200px
margin 0 auto
display flex
flex-direction column
align-items center
font-family '宋体'
div
margin-bottom 10px
.title
margin-top 10px
font-size 24px
font-weight bold
text-align center
color #000
.sub-title
width 500px
text-align center
font-size 16px
height 35px
line-height 35px
display flex
justify-content space-between
color #a8a8a8
.content
min-height 600px
width 100%
font-size 18px
color #262626
line-height 35px
text-indent 36px
@media (min-width: 1200px)
.container
width 1200px
@media (max-width: 1200px)
.container
width 768px
</style>

19
src/router/index.js
View File

@ -24,10 +24,11 @@ import CultureMap from '@/pages/CultureMap/CultureMap'
import CultureSupermarket from '@/pages/CultureSupermarket/CultureSupermarket'
import GoodsDetail from '@/pages/CultureSupermarket/GoodsDetail'
import common from '../common/components/common'
import NewsView1 from '../pages/NewsView1/NewsView1.vue'
import NewsView2 from '../pages/NewsView2/NewsView2.vue'
import NewsView3 from '../pages/NewsView3/NewsView3.vue'
import NewsView3Sub from '../pages/NewsView3Sub/NewsView3Sub.vue'
import NewsView1 from '../pages/NewsView/NewsView1'
import NewsView2 from '../pages/NewsView/NewsView2'
import NewsView3 from '../pages/NewsView/NewsView3'
import NewsView3Sub from '../pages/NewsView/NewsView3Sub'
import NewsViewDetailText from '../pages/NewsViewDetail/NewsViewDetailText'
Vue.use(Router)
export default new Router({
@ -274,6 +275,16 @@ export default new Router({
title: `${common.area.areaName}公共文化数字云平台`,
keepAlive: false
}
},
{
path: '/newsViewDetailText/:newsContentId',
name: 'newsViewDetailText',
component: NewsViewDetailText,
props: true,
meta: {
title: `${common.area.areaName}公共文化数字云平台`,
keepAlive: false
}
}
]
})