xzrkz-web/src/pages/ArtTrain/components/Photography.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>