shop-back/src/views/room/sign.vue

<template>
  <a-card hoverable class="room-card">
    <template #cover>
      <div class="room-cover">
        <img alt="example" :src="room.cover" />
        <div class="action">
          <!-- <a-button
            class="botton"
            shape="round"
            type="ghost"
            size="large"
            @click="$emit('miniSync')"
          >
            小程序带看
          </a-button> -->
          <a-button
            class="botton"
            shape="round"
            type="ghost"
            size="large"
            @click="$emit('webSync')"
          >
            网页带看
          </a-button>
          <div class="more">
            <span style="--hover-color: #0076f6" @click="$emit('edit')">
              <i class="iconfont icon-works_editor" />编辑
              <!-- <edit-outlined /> -->
            </span>
            <span
              style="--hover-color: rgba(255, 255, 255, 0.5)"
              @click="$emit('share')"
            >
              <i class="iconfont icon-works_share" />分享
            </span>
            <span style="--hover-color: #fa5555" @click="$emit('delete')">
              <i class="iconfont icon-works_delete" />删除
            </span>
          </div>
        </div>
      </div>
    </template>
    <div class="room-meta">
      <a-popover v-if="room.title.length > 14" placement="bottom">
        <template #content>
          <div class="room-title">{{ room.title }}</div>
        </template>
        <h4>{{ room.title }}</h4>
      </a-popover>
      <h4 v-else>{{ room.title }}</h4>
      <div class="desc">
        <span>{{ room.time }}</span>
        <span><eye-outlined /> {{ room.viewCount }}</span>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import type { Room } from '@/store'

type RoomSignProps = { room: Room }
type RoomSignEmit = {
  (e: 'share'): void
  (e: 'edit'): void
  (e: 'delete'): void
  (e: 'miniSync'): void
  (e: 'webSync'): void
}

defineProps<RoomSignProps>()
defineEmits<RoomSignEmit>()
</script>

<style scoped lang="scss">
.room-cover {
  height: 240px;
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .action {
    transition: all 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .botton {
      width: 130px;
      text-align: center;
      color: #fff;
      margin: 5px;

      &:hover {
        background-color: #0076f6;
        border-color: #0076f6;
      }
    }

    .more {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 10px;

      > span {
        font-size: 13px;
        color: #fff;
        transition: color 0.3s ease;

        i {
          margin-right: 4px;
        }
        &:hover {
          color: var(--hover-color);
        }
      }
    }
  }
}

.room-meta {
  h4 {
    font-size: 16px;
    color: #323233;
    line-height: 1em;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desc {
    font-size: 14px;
    color: #969799;
    display: flex;
    justify-content: space-between;
  }
}

.room-title {
  word-wrap: break-word;
  max-width: 200px;
}

.room-card,
.room-cover .action {
  transition: all 0.3s ease;
}

.room-card.active,
.room-card:hover {
  transform: translateY(-10px);
  .room-cover .action {
    top: 0;
    opacity: 1;
  }
}
</style>

<style lang="scss">
.room-card {
  .ant-card-body {
    padding: 16px 14px;
  }
}
</style>