137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
|
<div class="digital-resource">
|
|
<div class="digital-title">
|
|
<span class="part-title">数图资源</span>
|
|
<i class="english-title">Folk Literature</i>
|
|
<router-link to="/resource" class="more">MORE>></router-link>
|
|
</div>
|
|
<div class="digital-swiper">
|
|
<swiper :options="swiperOption" v-if="literature && literature.length > 0">
|
|
<swiper-slide class="slide-box" v-for="(list,idx) in literature" :key="idx">
|
|
<div class="digital-slide-box" @click="goDetail(list.newsContentLink, list.templateRecordUrl)" :title="list.newsContentTitle">
|
|
<img :src="url + 'route/file/downloadfile/false/' + list.newsContentCoverList" alt="" class="digital-slide-img">
|
|
<p class="digital-slide-desc">{{list.newsContentTitle}}</p>
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'swiper/dist/css/swiper.css'
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import axios from 'axios'
|
|
import common from '@/common/components/common.js'
|
|
export default {
|
|
name: 'DigitalResource',
|
|
components: {
|
|
swiper,
|
|
swiperSlide
|
|
},
|
|
// props: {
|
|
// literature: Array
|
|
// },
|
|
data () {
|
|
return {
|
|
swiperOption: {
|
|
observer: true,
|
|
observeParents: true,
|
|
autoplay: 3000,
|
|
slidesPerView: 5,
|
|
spaceBetween: 30
|
|
},
|
|
url: common.url,
|
|
literature: [],
|
|
literaturePage: {
|
|
page: 1,
|
|
rows: 8,
|
|
totalPage: 1,
|
|
newsDirectoriesId: '',
|
|
newsDirectoriesParentId: '98c74389-2088-499b-a046-8611bdc57ea4'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
goDetail: function (link, url) {
|
|
if (link) {
|
|
window.open(link)
|
|
} else {
|
|
window.location.href = this.url + url
|
|
}
|
|
},
|
|
getLiterature: function () {
|
|
var self = this
|
|
axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
|
|
params: self.literaturePage
|
|
}).then(function (res) {
|
|
for (var i = 0; i < res.data.rows.length; i++) {
|
|
res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
|
|
}
|
|
self.literature = res.data.rows
|
|
})
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getLiterature()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
|
@import "~styles/public.styl"
|
|
.digital-resource
|
|
width 1200px
|
|
margin 20px auto 0
|
|
.digital-title
|
|
border-bottom solid 1px #dedede
|
|
font-family '宋体'
|
|
.part-title
|
|
font-size 22px
|
|
line-height 40px
|
|
color #565656
|
|
display inline-block
|
|
border-bottom $main-color 2px solid
|
|
margin-right 10px
|
|
.english-title
|
|
font-style normal
|
|
font-size 14px
|
|
color rgba(168, 168, 168, 0.8)
|
|
.more
|
|
display inline-block
|
|
float right
|
|
width 70px
|
|
height 26px
|
|
background-color $main-color
|
|
border-radius 4px
|
|
color #ffffff
|
|
text-align center
|
|
line-height 26px
|
|
font-size 12px
|
|
margin-top 7px
|
|
.digital-swiper
|
|
margin-top 15px
|
|
.slide-box
|
|
width 220px
|
|
padding 20px
|
|
box-sizing border-box
|
|
background #fafafa
|
|
margin-right 10px
|
|
.digital-slide-box
|
|
display block
|
|
text-align center
|
|
cursor pointer
|
|
.digital-slide-img
|
|
width 100%
|
|
height 184px
|
|
.digital-slide-desc
|
|
font-family '宋体'
|
|
font-weight bold
|
|
font-size 16px
|
|
overflow hidden
|
|
white-space nowrap
|
|
text-overflow ellipsis
|
|
color #333
|
|
margin 10px 0
|
|
</style>
|