114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<template>
|
||
<div class="video">
|
||
<div class="video-title">
|
||
<span class="part-title">展览展示</span>
|
||
<i class="english-title">Exhibition</i>
|
||
<router-link to="/exhibition" class="more">MORE>></router-link>
|
||
</div>
|
||
<div class="exhibition">
|
||
<ul>
|
||
<li v-for="(list,idx) in exhibition" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||
<div class="exhibition-img">
|
||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||
</div>
|
||
<div class="exhibition-info">
|
||
<h1>{{list.newsContentTitle}}</h1>
|
||
<p>作者：{{list.newsContentAuthor}}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'IndexVideo',
|
||
props: {
|
||
exhibition: Array
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
@import "~styles/public.styl"
|
||
.video
|
||
width 1200px
|
||
margin 15px auto
|
||
.video-title
|
||
border-bottom solid 1px #dedede
|
||
.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
|
||
.exhibition
|
||
width 1200px
|
||
margin 20px auto
|
||
ul
|
||
&:after
|
||
content: ''
|
||
display block
|
||
clear both
|
||
li
|
||
width 280px
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
box-sizing border-box
|
||
float left
|
||
margin-right 25px
|
||
margin-bottom 25px
|
||
cursor pointer
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
.exhibition-img
|
||
width 100%
|
||
height 185px
|
||
img
|
||
width 100%
|
||
height 100%
|
||
.exhibition-info
|
||
padding 10px 20px
|
||
h1
|
||
text-align center
|
||
font-size 18px
|
||
color #565656
|
||
font-weight normal
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
margin-bottom 5px
|
||
p
|
||
font-size 14px
|
||
color #565656
|
||
text-align center
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
.exhibition-info-bottom
|
||
span
|
||
font-size 14px
|
||
color #a8a8a8
|
||
&.view
|
||
float right
|
||
</style>
|