154 lines
4.1 KiB
Vue
154 lines
4.1 KiB
Vue
<template>
|
||
<div class="character">
|
||
<div class="character-title">
|
||
<h2>摄影技巧</h2>
|
||
<router-link to="/artTrainList/3b6f83b5-bcb4-4545-98d3-64e8cf596157">MORE>></router-link>
|
||
</div>
|
||
<div class="character-content">
|
||
<div class="character-left">
|
||
<span>摄影技巧</span>
|
||
<div class="character-intro">
|
||
<p>影视摄影从运动、色彩、光线，两极镜头等摄影造型元素入手，论述如何认识，运用它们去构造丰富的视觉造型语言。进而进行影视摄影创作。运动，是影视摄影最重要的造型元素，“是银幕造型的第一艺术特点”，也是影视摄影的生命。</p>
|
||
</div>
|
||
</div>
|
||
<div class="character-right">
|
||
<ul>
|
||
<li v-for="(list,idx) in photography" :key="idx" @click="goDetail(list.templateRecordUrl)">
|
||
<div class="recommend-img">
|
||
<img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
|
||
<img src="@/assets/images/play.png" alt="" class="play-btn">
|
||
</div>
|
||
<div class="recommend-info">
|
||
<h3>{{list.newsContentTitle}}</h3>
|
||
<div class="recommend-info-bottom">
|
||
<span>讲师：{{list.newsContentAuthor}}</span>
|
||
<!--<i>{{list.view}}</i>-->
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Photography',
|
||
props: {
|
||
photography: Array
|
||
},
|
||
data () {
|
||
return {
|
||
selectedType: '00'
|
||
}
|
||
},
|
||
methods: {
|
||
goDetail: function (url) {
|
||
window.location.href = 'http://192.168.0.104/' + url
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
.character
|
||
margin 0 auto 20px
|
||
width 1200px
|
||
.character-title
|
||
overflow hidden
|
||
margin-bottom 20px
|
||
h2
|
||
font-size 22px
|
||
color #565656
|
||
font-weight normal
|
||
float left
|
||
ul
|
||
float left
|
||
overflow hidden
|
||
margin-left 50px
|
||
li
|
||
width 100px
|
||
cursor pointer
|
||
font-size 14px
|
||
color #565656
|
||
float left
|
||
line-height 30px
|
||
&.active
|
||
color #01a9f8
|
||
font-weight bold
|
||
font-size 16px
|
||
a
|
||
float right
|
||
font-size 12px
|
||
color #01a9f8
|
||
line-height 30px
|
||
.character-content
|
||
overflow hidden
|
||
margin-top 20px
|
||
.character-left
|
||
float left
|
||
width: 225px
|
||
height: 430px
|
||
padding 20px
|
||
box-sizing border-box
|
||
overflow hidden
|
||
color #fff
|
||
background #fcc245
|
||
span
|
||
display inline-block
|
||
padding-top 30px
|
||
border-top 3px solid #fff
|
||
font-size 22px
|
||
margin-top 40px
|
||
margin-bottom 30px
|
||
.character-intro
|
||
height 200px
|
||
overflow hidden
|
||
p
|
||
font-size 13px
|
||
color #fff
|
||
line-height 28px
|
||
.character-right
|
||
float right
|
||
width 956px
|
||
ul
|
||
overflow hidden
|
||
li
|
||
float left
|
||
width: 224px
|
||
border solid 1px #dedede
|
||
margin-right 20px
|
||
cursor pointer
|
||
box-sizing border-box
|
||
margin-bottom 10px
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
.recommend-img
|
||
width 100%
|
||
height 150px
|
||
position relative
|
||
img
|
||
width 100%
|
||
height 150px
|
||
.play-btn
|
||
position absolute
|
||
top 50%
|
||
left 50%
|
||
transform translate(-50%, -50%)
|
||
width 48px
|
||
height 48px
|
||
.recommend-info
|
||
padding 5px 10px
|
||
h3
|
||
font-size 14px
|
||
color #565656
|
||
.recommend-info-bottom
|
||
font-size 14px
|
||
color #a8a8a8
|
||
padding-top 10px
|
||
i
|
||
font-style normal
|
||
float right
|
||
</style>
|