xzrkz-web/src/pages/ArtTrain/components/Photography.vue

<template>
  <div class="character">
    <div class="character-title">
      <h2>摄影技巧</h2>
      <ul>
        <li :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</li>
        <li v-for="list in photography.photographyType" :key="list.id" :class="{active: selectedType == list.id}" @click="selectedType = list.id">{{list.typeName}}</li>
      </ul>
      <router-link to="/artTrain">MORE>></router-link>
    </div>
    <div class="character-content">
      <div class="character-left">
        <span>摄影技巧</span>
        <div class="character-intro">
          <p>{{photography.photographyText}}</p>
        </div>
      </div>
      <div class="character-right">
        <ul>
          <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" v-for="list in photography.photographyList" :key="list.id">
            <div class="recommend-img">
              <img :src="list.classPoster" alt="">
              <img src="@/assets/images/play.svg" alt="" class="play-btn">
            </div>
            <div class="recommend-info">
              <h3>{{list.className}}</h3>
              <div class="recommend-info-bottom">
                <span>讲师：{{list.teacher}}</span>
                <i>{{list.view}}</i>
              </div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Photography',
  props: {
    photography: Object
  },
  data () {
    return {
      selectedType: '00'
    }
  }
}
</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>