uk_front/components/MediaCard.vue

<template>
  <figure :class="['card', { row: toggle }]">
    <div
      class="card-media"
      @click="handLeftBtn">
      <video
        controls
        ref="video"
        v-if="cardData.type === 5 && toggle"
        class="card-media-content">
        <source :src="cardData.media_url" />
        Your browser does not support the video tag.
      </video>
      <el-image
        :src="
          cardData.type === 1 || cardData.type === 8
            ? cardData.media_url
            : cardData.image
        "
        class="card-img-1"
        fit="contain"
        style="width: 100%; height: 100%"
        v-else>
      </el-image>
      <div
        class="type-icon"
        v-if="cardData.typeName && !toggle">
        {{ cardData.typeName.toUpperCase() }}
      </div>
    </div>
    <figcaption class="card-info">
      <div class="card-info-1">
        <h1>{{ cardData.name }}</h1>
        <p
          class="card-info-point"
          v-html="cardData.description"></p>
        <ul class="card-info-label">
          <li
            v-for="(l, index) of cardData.mapLabel"
            :key="index"
            @click="emitLabel(l)">
            {{ l }}
          </li>
          <nuxt-link
            :to="{ name: 'product-code', params: { code: item } }"
            v-for="(item, i) of cardData.sku"
            :key="item + i"
            target="_blank">
            <li>{{ item }}</li>
          </nuxt-link>
        </ul>
      </div>
      <div class="card-info-btn">
        <el-button
          @click="handLeftBtn"
          v-if="!toggle"
          >View</el-button
        >
        <el-button @click="handRightBtn">Download</el-button>
      </div>
    </figcaption>
  </figure>
</template>

<script>
export default {
  props: {
    cardData: {},
    toggle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  watch: {
    'cardData.media_url': function (newVal, oldVal) {
      if (newVal !== oldVal && this.$refs.video) {
        this.$refs.video.load() // 重新加载视频
      }
    },
  },
  methods: {
    emitLabel(l) {
      this.$emit('labelEvent', l)
    },
    handLeftBtn() {
      this.$emit('leftBtnEvent')
    },
    handRightBtn() {
      this.$emit('rightBtnEvent')
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: flex-start;
  box-shadow: 0px 0px 10px rgba(137, 137, 137, 0.05);
  transition: all 0.2s ease-out 0s;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 4px;
  // &:hover {
  //   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

  //   .card-img-1 {
  //     transform: scale(1.1);
  //   }

  //   h1 {
  //     color: #006dc9;
  //   }
  // }

  .card-media {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    overflow: hidden;

    .card-media-content {
      height: auto;
      object-fit: contain;
    }

    .card-img-1 {
      height: auto;
      transition: all 0.5s;
      cursor: pointer;
    }

    .type-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 10px;
      color: #00213b;
      background-color: #fff;
      border-radius: 4px;
      font-weight: 550;
      box-shadow: 0 0 0 2px rgba(#bbb, 0.1);
    }
  }

  .card-info {
    flex: 1;
    height: 100%;
    margin: 0 10px 10px 10px;
    color: #4a596c;
    display: flex;
    flex-direction: column;

    .card-info-1 {
      flex: 1;
    }

    h1 {
      font-size: 18px;
      font-weight: 600;
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .card-info-point {
      margin: 10px 0;
      min-height: 40px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    .card-info-label {
      display: flex;
      /* 使用flex布局 */
      flex-wrap: wrap;
      /* 限制最大高度为两行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      position: relative;

      li {
        border: 1px solid #e7e7e7;
        font-size: 16px;
        border-radius: 6px;
        display: inline-block;
        padding: 8px;
        margin-right: 10px;
        margin-bottom: 10px;
        color: #fff;
        background-color: var(--deep-blue);
        cursor: pointer;
      }
    }

    .card-info-btn {
      text-align: center;

      button {
        font-weight: bold;
        width: 120px;
        color: var(--deep-blue);
        border-color: var(--deep-blue);
      }
    }
  }
}

.row {
  border: none;
  flex-direction: row;

  &:hover {
    box-shadow: none;
  }

  .card-media {
    height: inherit;
    flex: 1;
    display: flex;
    align-items: center;

    video {
      width: 100%;
      height: auto;
    }
  }

  .card-info {
    flex: 1;
    height: inherit;
    display: flex;
    flex-direction: column;
    margin: 0 0 0 20px;

    .card-info-1 {
      flex: 1;

      h1 {
        margin: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
      }

      .card-info-point {
        display: block;
        overflow: visible;
        text-overflow: unset;
        white-space: pre-wrap;
      }
    }
  }
}
</style>