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.
35 lines
1.8 KiB
35 lines
1.8 KiB
<template>
|
|
<view class="recipe-overlay" :class="{ show: visible }" @tap="onClose">
|
|
<view class="recipe-modal" @tap.stop>
|
|
<text class="recipe-title">📖 全部配方 — 🎫 {{ cardNo }}</text>
|
|
<view v-for="item in items" :key="item.name" class="recipe-item">
|
|
<text class="recipe-name">{{ item.emoji }} {{ item.name }} ×{{ item.qty }}</text>
|
|
<text class="recipe-text">{{ item.recipe || '暂无配方信息' }}</text>
|
|
</view>
|
|
<button class="recipe-close" @tap="onClose">关闭</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RecipeModal',
|
|
props: { visible: Boolean, cardNo: String, items: Array },
|
|
emits: ['close'],
|
|
setup(props, { emit }) {
|
|
function onClose() { emit('close') }
|
|
return { onClose }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.recipe-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:400;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
|
|
.recipe-overlay.show{display:flex}
|
|
.recipe-modal{width:640rpx;max-height:70vh;background:var(--bg-card);border-radius:var(--radius);border:2px solid var(--border);overflow-y:auto;padding:36rpx}
|
|
.recipe-title{font-size:32rpx;font-weight:700;color:var(--gold);display:block;margin-bottom:24rpx}
|
|
.recipe-item{background:rgba(245,166,35,.05);border:1px solid rgba(245,166,35,.15);border-radius:20rpx;padding:24rpx;margin-bottom:20rpx}
|
|
.recipe-name{font-size:28rpx;font-weight:700;color:var(--text);display:block;margin-bottom:12rpx}
|
|
.recipe-text{font-size:24rpx;color:var(--text-dim);line-height:1.7;white-space:pre-line}
|
|
.recipe-close{width:100%;height:80rpx;border-radius:var(--radius-sm);margin-top:16rpx;background:var(--gold);color:#1A1A1A;border:none;font-size:28rpx;font-weight:700}
|
|
</style>
|