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.
34 lines
1.9 KiB
34 lines
1.9 KiB
<template>
|
|
<view class="product-card" @tap="$emit('tap', product)">
|
|
<view class="card-left">
|
|
<text class="card-emoji">{{ 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>
|
|
<view class="card-add" @tap.stop="$emit('add', product)">+</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProductCard',
|
|
props: { product: { type: Object, required: true } },
|
|
emits: ['tap', 'add']
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.product-card{width:100%;background:var(--bg-card);border-radius:var(--radius);margin-bottom:20rpx;border:1px solid var(--border);display:flex;align-items:center;padding:20rpx;gap:20rpx;min-height:140rpx}
|
|
.card-left{position:relative;flex-shrink:0;width:120rpx;height:120rpx;display:flex;align-items:center;justify-content:center;background:rgba(245,166,35,.06);border-radius:20rpx}
|
|
.card-emoji{font-size:64rpx}
|
|
.alc-tag{position:absolute;top:4rpx;right:4rpx;background:rgba(0,0,0,.6);color:var(--gold-light);font-size:18rpx;padding:2rpx 10rpx;border-radius:12rpx;font-weight:700}
|
|
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
|
|
.card-name{font-size:30rpx;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-en{font-size:22rpx;color:var(--text-muted);margin:4rpx 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-desc{font-size:24rpx;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-add{flex-shrink:0;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>
|