You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.9 KiB
33 lines
1.9 KiB
<template>
|
|
<view class="product-card" @tap="$emit('tap', product)">
|
|
<view class="card-img">
|
|
<text>{{ product.emoji }}</text>
|
|
<text v-if="product.alc > 0" class="alc-tag">{{ product.alc }}%</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<text class="card-name">{{ product.name }}</text>
|
|
<text class="card-en">{{ product.en }}</text>
|
|
<text class="card-desc">{{ product.desc }}</text>
|
|
<view class="card-add" @tap.stop="$emit('add', product)">+</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProductCard',
|
|
props: { product: { type: Object, required: true } },
|
|
emits: ['tap', 'add']
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.product-card{width:calc(50% - 12rpx);background:var(--bg-card);border-radius:var(--radius);overflow:hidden;margin-bottom:20rpx;border:1px solid var(--border);position:relative;min-height:420rpx}
|
|
.card-img{width:100%;height:220rpx;display:flex;align-items:center;justify-content:center;font-size:88rpx;position:relative;background:rgba(245,166,35,.04)}
|
|
.alc-tag{position:absolute;top:16rpx;right:16rpx;background:rgba(0,0,0,.6);color:var(--gold-light);font-size:20rpx;padding:6rpx 16rpx;border-radius:20rpx;font-weight:700}
|
|
.card-body{padding:16rpx 20rpx 24rpx;position:relative}
|
|
.card-name{font-size:28rpx;font-weight:700;color:var(--text);display:block;margin-bottom:4rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-en{font-size:20rpx;color:var(--text-muted);display:block;margin-bottom:6rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-desc{font-size:22rpx;color:var(--text-dim);line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-add{position:absolute;bottom:16rpx;right:16rpx;width:56rpx;height:56rpx;border-radius:50%;background:var(--orange);color:#fff;font-size:32rpx;display:flex;align-items:center;justify-content:center;box-shadow:0 4rpx 20rpx rgba(255,107,53,.4)}
|
|
</style>
|