jichuangshe/mini/components/Episode/index.vue

<template>
  <view class="episode" :style="[customStyle]" @click="handlePlay">
    <view class="cover-image" :style="[imageStyle]">
      <view v-if="rank" class="rank" :class="{first: rank === 1}">
        <text>{{ rank }}</text>
      </view>
      <image :src="episode.cover_img" mode="aspectFill" :style="[imageStyle]" />
      <view v-if="recent" class="special">最近播放 </view>
      <view v-if="guess" class="special guess">猜你喜欢 </view>
    </view>
    <u-text
      :text="episode.name"
      :lines="1"
      size="32rpx"
      margin="20rpx 0 10rpx"
      :color="$colors.defaultColor"
    />
    <view class="status-box dir-left-nowrap">
      <u-text
        :text="episode.status_text"
        :lines="1"
        size="24rpx"
        :custom-style="{flex: 'unset'}"
        :color="$colors.primaryColor"
      />
      <u-text
        :text="`共${episode.total}集`"
        :lines="1"
        size="24rpx"
        margin="0 0 0 10rpx"
        :color="$colors.infoColor"
      />
    </view>
  </view></template>

<script>
import UText from '../../uni_modules/uview-ui/components/u--text/u--text'
export default {
  name: 'Episode',
  components: { UText },
  props: {
    episode: {
      type: Object,
      required: true
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    imageStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    recent: {
      type: Boolean,
      default: false
    },
    guess: {
      type: Boolean,
      default: false
    },
    rank: {
      type: Number,
      default: 0
    },
    redirect: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  methods: {
    handlePlay() {
      if (!this.redirect) return
      this.$u.route({
        url: '/pages/episode/play',
        params: {
          id: this.episode.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .episode {
      width: calc((#{750rpx} - #{80rpx}) / 3);
      margin-bottom: 30rpx;
      .cover-image{
        position: relative;
        overflow: hidden;
        height: 330rpx;
        image{
          width: 100%;
          height: inherit;
        }
        .special{
          background: rgba(48, 98, 97, 0.65);
          text-align: center;
          color: #fff;
          padding: 10rpx 0;
          position: absolute;
          bottom: 0;
          width: 100%;
          font-size: 26rpx;
          &.guess{
            background: rgba(124, 78, 112, 0.65);
          }
        }
        .rank{
          position: absolute;
          top: -35rpx;
          left: -35rpx;
          width: 70rpx;
          height: 70rpx;
          transform: rotate(45deg);
          background: rgba(251, 54, 81, 0.6);
          color: #fff;
          font-size: 26rpx;
          z-index: 99;
          &.first{
            background: #FE3552;
          }
          text{
            position: absolute;
            right: 5px;
            top: 10px;
            transform: rotate(-45deg);
          }
        }
      }
      .status-box{

      }
    }
</style>