商品卡片组件

展示

代码

<template>
  <div class="goodCard flex-column" :style="{width: width, height: height}" @mouseover="show=true" @mouseleave="show=false">
    <div class="goodCard-img" :style="{width: width, height: width}">
      <img style="object-fit: contain;" :src="info.goodImg" :alt="info.goodImg">
      <div class="tips" :class="show ? 'hidden':'show'" @click="onSearchLike">
        <span>找相似</span>
      </div>
    </div>
    <div class="title">{{ info.goodName }}</div>
    <div class="bottom">
      <div class="price">
        <span class="symbol">￥</span>{{ info.price }}
      </div>
      <div class="bought">
        {{ info.bought }}人付款
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let show = ref(false)

function onSearchLike() {
  emit('searchLike')
}

const emit = defineEmits<{
  (e: 'searchLike')
}>()

const props = defineProps({
  width: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },
  info: {
    type: Object,
    default: () => {}
  }
})
</script>

<style lang="scss" scoped>
.goodCard {
  padding: 7px;
  border-radius: 12px;
  cursor: pointer;
  &:hover {
    box-shadow: 0 19px 39px 0 rgba(0,0,0,.2);
  }
  &-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    @include bg_color('bg-color');
  }
  .title {
    margin: 10px 5px 5px;
    font-size: 16px;
    line-height: 22px;
    height: 44px;
    overflow: hidden;
    word-wrap: break-word;
  }
  .price {
    color: #ff5000;
    font-size: 22px;
    .symbol {
      font-size: 16px;
      font-family: Microsoft Yahei;
    }
  }
  .bottom {
    height: 33px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
    .bought {
      margin-left: 10px;
    }
  }
}

.tips  {
  position: absolute;
  height: 29px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #ff2000;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 29px;
  margin-top: -14px;
}

.hidden {
  opacity: 1;
  transition: opacity 1s;
}

.show {
  opacity: 0;
  transition: opacity 1s;
}
</style>

属性

属性名	描述
width	卡片宽度
height	卡牌高度
info	卡片信息

ps: 卡片信息为对象，包括以下一些属性

info: {
	// 商品名称
	goodName: '',
	// 商品照片
	goodImg: '',
	// 商品价格
	price: '',
	// 商品出售数量
	bought: '',
}

方法

方法名	描述
searchLike	“ 找相似 ” 的点击事件