gaoyixia-pc/src/components/card/information/my-chasingFun-card.vue

<template>
  <div class="card" @click="info.is_normal ? $emit('handleToDetail') : ''">
    <CardBox class="card-box" :btnList="btnList" v-on="$listeners">
      <div class="left">
        <img :src="fileIcon" alt="" v-if="!!info.is_normal" />
        <div class="lapse" v-else>
          <img src="@/assets/icon/lapse.png" alt="" />
        </div>
        <div class="type" v-if="!info.is_normal">已失效</div>
      </div>
      <div class="right" v-if="!!info.is_normal">
        <div class="title">{{ info.title }}</div>
        <div class="info">
          <div class="left">
            <img class="icon" src="@/assets/icon/上次看到.png" alt="" />
            <div class="last" v-if="info.recently_title">
              上次看到：{{ info.recently_title }}
            </div>
            <div class="last" v-else>尚未观看</div>
          </div>
          <div class="num">{{ info.total_sequel }}集</div>
        </div>
      </div>
      <div class="right lapse" v-else>已失效</div>
    </CardBox>
  </div>
</template>

<script>
import CardBox from "../card-module/card-box.vue";
import { getFileIcon } from "@/common/util";

export default {
  name: "MyChasingFunCard",
  components: { CardBox },
  props: {
    info: {
      type: Object,
    },
    manageType: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    btnList() {
      let arr = [{ type: "del", value: "取消订阅" }];
      return this.manageType ? [] : arr;
    },
    fileIcon() {
      return getFileIcon(`folder_bg`);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  user-select: none;
  .card-box {
    background: white;
    border-radius: 12px;
    padding: 20px 20px;
    height: 240px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .left {
      width: 200px;
      height: 200px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .lapse {
        width: 100%;
        height: 100%;
        background-color: #d8d8d8;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 70px;
          height: 70px;
        }
      }
      .type {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        background: rgba(20, 20, 20, 0.6);
        border-radius: 4px;
        position: absolute;
        right: 10px;
        bottom: 15px;
      }
    }
    .right {
      width: calc(100% - 220px);
      height: 200px;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 20px;
        font-weight: 400;
        color: #222222;
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .info {
        width: calc(100% - 30px);
        background: #f3f3f3;
        border-radius: 6px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        .left {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          display: flex;
          align-items: center;
          .icon {
            width: 14px;
            height: 14px;
          }
        }
        .num {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    > .lapse {
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      line-height: 200px;
    }
  }
}
</style>