656 lines
16 KiB
Vue
656 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- 操作区域 -->
|
|||
|
|
<div class="operation-header">
|
|||
|
|
<h2>我的酒单</h2>
|
|||
|
|
<div class="operation-buttons">
|
|||
|
|
<el-button type="primary" :icon="Plus" @click="showAddBeerDialog">
|
|||
|
|
新酒上枪
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="success" :icon="Download" @click="showExportMenuDialog">
|
|||
|
|
导出酒单
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="info" :icon="Refresh" @click="refreshData">
|
|||
|
|
刷新
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 在售酒款列表 -->
|
|||
|
|
<div class="tap-list" v-loading="loading">
|
|||
|
|
<div v-if="tapList.length === 0" class="empty-state">
|
|||
|
|
<el-empty description="暂无在售酒款" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="tap-items">
|
|||
|
|
<div v-for="item in tapList" :key="item.id" class="tap-item">
|
|||
|
|
<!-- 酒头编号 -->
|
|||
|
|
<div class="tap-number">
|
|||
|
|
<span class="tap-badge">{{ item.tapNo }}号</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 酒款信息 -->
|
|||
|
|
<div class="beer-info">
|
|||
|
|
<div class="beer-image">
|
|||
|
|
<img
|
|||
|
|
:src="item.beerCover || '/images/default-beer.png'"
|
|||
|
|
:alt="item.beerName"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="beer-details">
|
|||
|
|
<h3 class="beer-name">{{ item.beerName }}</h3>
|
|||
|
|
<p class="beer-brand">{{ item.brandName }}</p>
|
|||
|
|
<p class="beer-style">
|
|||
|
|
{{ item.beerStyles || item.customStyle }}
|
|||
|
|
</p>
|
|||
|
|
<p class="beer-abv">ABV {{ item.beerAbv }}%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 规格价格 -->
|
|||
|
|
<div class="specs-info">
|
|||
|
|
<div
|
|||
|
|
v-for="spec in item.specList"
|
|||
|
|
:key="spec.id"
|
|||
|
|
class="spec-item"
|
|||
|
|
>
|
|||
|
|
<span class="spec-name">{{ spec.specName }}</span>
|
|||
|
|
<span class="spec-price">￥{{ spec.specPrice }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<div class="actions">
|
|||
|
|
<el-button size="small" type="primary" @click="editSpecs(item)" class="action-btn">
|
|||
|
|
修改规格
|
|||
|
|
</el-button>
|
|||
|
|
<el-button size="small" type="success" @click="replaceBeer(item)" class="action-btn">
|
|||
|
|
替换
|
|||
|
|
</el-button>
|
|||
|
|
<el-button size="small" type="warning" @click="offTap(item)" class="action-btn">
|
|||
|
|
下架
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 新酒上枪对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="addBeerDialog.visible"
|
|||
|
|
title="新酒上枪"
|
|||
|
|
width="1000px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:close-on-press-escape="false"
|
|||
|
|
>
|
|||
|
|
<BeerSelectionWizard
|
|||
|
|
@submit="handleAddBeer"
|
|||
|
|
@cancel="addBeerDialog.visible = false"
|
|||
|
|
/>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 导出酒单对话框 -->
|
|||
|
|
<el-dialog v-model="exportMenuDialog.visible" title="导出酒单" width="900px">
|
|||
|
|
<MenuExportWizard
|
|||
|
|
:tap-list="tapList"
|
|||
|
|
@submit="handleExportMenu"
|
|||
|
|
@cancel="exportMenuDialog.visible = false"
|
|||
|
|
/>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 编辑规格价格对话框 -->
|
|||
|
|
<el-dialog v-model="editSpecDialog.visible" title="编辑规格价格" width="500px">
|
|||
|
|
<EditSpecForm
|
|||
|
|
:tap-beer="editSpecDialog.data"
|
|||
|
|
@submit="handleUpdateSpecs"
|
|||
|
|
@cancel="editSpecDialog.visible = false"
|
|||
|
|
/>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 替换酒款对话框 -->
|
|||
|
|
<el-dialog v-model="replaceDialog.visible" title="替换酒款" width="500px">
|
|||
|
|
<BeerSelectionWizard
|
|||
|
|
@submit="handleReplaceBeer"
|
|||
|
|
@cancel="replaceDialog.visible = false"
|
|||
|
|
/>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted } from 'vue'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import { Plus, Download, Refresh } from '@element-plus/icons-vue'
|
|||
|
|
import {
|
|||
|
|
getTapList,
|
|||
|
|
addBeerToTap,
|
|||
|
|
offTapBeer,
|
|||
|
|
updateTapBeerSpecs
|
|||
|
|
} from '@/api/barmgr/tap'
|
|||
|
|
import { formatTime } from '@/utils/date-util'
|
|||
|
|
import { generateWineMenu } from '@/api/template'
|
|||
|
|
import BeerSelectionWizard from './components/BeerSelectionWizard.vue'
|
|||
|
|
import EditSpecForm from './components/EditSpecForm.vue'
|
|||
|
|
import MenuExportWizard from './components/MenuExportWizard.vue'
|
|||
|
|
|
|||
|
|
// 响应式数据
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const tapList = ref([])
|
|||
|
|
|
|||
|
|
const addBeerDialog = reactive({
|
|||
|
|
visible: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const exportMenuDialog = reactive({
|
|||
|
|
visible: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const editSpecDialog = reactive({
|
|||
|
|
visible: false,
|
|||
|
|
data: null
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const replaceDialog = reactive({
|
|||
|
|
visible: false,
|
|||
|
|
tapNo: null
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取在售酒款列表
|
|||
|
|
const fetchTapList = async () => {
|
|||
|
|
try {
|
|||
|
|
loading.value = true
|
|||
|
|
const response = await getTapList({ pageNum: 1, pageSize: 1000 })
|
|||
|
|
console.log('API Response:', response)
|
|||
|
|
|
|||
|
|
// axios 返回的数据在 response.data 中
|
|||
|
|
const responseData = response.data
|
|||
|
|
console.log('Response Data:', responseData)
|
|||
|
|
|
|||
|
|
if (responseData && responseData.code === 200) {
|
|||
|
|
// TableDataInfo 结构：{code: 200, msg: "查询成功", rows: [...], total: 1}
|
|||
|
|
tapList.value = responseData.rows || []
|
|||
|
|
console.log('Processed tapList:', tapList.value)
|
|||
|
|
} else {
|
|||
|
|
console.error('API Error:', responseData?.msg || '未知错误')
|
|||
|
|
ElMessage.error('获取酒款列表失败: ' + (responseData?.msg || '未知错误'))
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Fetch Error:', error)
|
|||
|
|
ElMessage.error('获取酒款列表失败: ' + error.message)
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 刷新数据
|
|||
|
|
const refreshData = async () => {
|
|||
|
|
await fetchTapList()
|
|||
|
|
ElMessage.success('数据刷新成功')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示新酒上枪对话框
|
|||
|
|
const showAddBeerDialog = () => {
|
|||
|
|
addBeerDialog.visible = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示导出酒单对话框
|
|||
|
|
const showExportMenuDialog = () => {
|
|||
|
|
exportMenuDialog.visible = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理新酒上枪
|
|||
|
|
const handleAddBeer = async (data) => {
|
|||
|
|
try {
|
|||
|
|
console.log('上枪请求数据:', data)
|
|||
|
|
const response = await addBeerToTap(data)
|
|||
|
|
console.log('上枪响应数据:', response)
|
|||
|
|
|
|||
|
|
// 检查不同的响应数据结构
|
|||
|
|
if (response.data && response.data.code === 200) {
|
|||
|
|
ElMessage.success('上枪成功')
|
|||
|
|
addBeerDialog.visible = false
|
|||
|
|
await refreshData()
|
|||
|
|
} else if (response.code === 200) {
|
|||
|
|
ElMessage.success('上枪成功')
|
|||
|
|
addBeerDialog.visible = false
|
|||
|
|
await refreshData()
|
|||
|
|
} else {
|
|||
|
|
const errorMsg = (response.data && response.data.msg) || response.msg || '上枪失败'
|
|||
|
|
throw new Error(errorMsg)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('上枪失败详情:', error)
|
|||
|
|
ElMessage.error('上枪失败: ' + error.message)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理导出酒单
|
|||
|
|
const handleExportMenu = async (exportData) => {
|
|||
|
|
try {
|
|||
|
|
console.log('导出酒单数据:', exportData)
|
|||
|
|
|
|||
|
|
// 构建请求参数，按照整版酒单编辑器的数据结构要求
|
|||
|
|
const params = {
|
|||
|
|
uuid: exportData.template.uuid || exportData.template.posterId || String(exportData.template.id), // 优先使用uuid字段
|
|||
|
|
format: exportData.format || 'PDF'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按照 beer{index}_{field} 格式传递酒款数据
|
|||
|
|
exportData.generateParams.beerList.forEach((beer, index) => {
|
|||
|
|
params[`beer${index}_name`] = beer.beerName || ''
|
|||
|
|
params[`beer${index}_style`] = beer.beerStyles || ''
|
|||
|
|
params[`beer${index}_abv`] = beer.beerAbv ? String(beer.beerAbv) : ''
|
|||
|
|
params[`beer${index}_price`] = beer.specs && beer.specs[0] ? String(beer.specs[0].specPrice) : ''
|
|||
|
|
params[`beer${index}_spec`] = beer.specs && beer.specs[0] ? beer.specs[0].specName : ''
|
|||
|
|
params[`beer${index}_img`] = beer.cover || ''
|
|||
|
|
params[`beer${index}_brewery_name`] = beer.brandName || ''
|
|||
|
|
params[`beer${index}_tapno`] = beer.tapNo ? String(beer.tapNo) : ''
|
|||
|
|
|
|||
|
|
// 如果有多个规格，添加第二个规格
|
|||
|
|
if (beer.specs && beer.specs[1]) {
|
|||
|
|
params[`beer${index}_spec1`] = beer.specs[1].specName
|
|||
|
|
params[`beer${index}_price1`] = String(beer.specs[1].specPrice)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log('发送给后端的参数:', params)
|
|||
|
|
|
|||
|
|
ElMessage({
|
|||
|
|
message: '正在生成酒单，请稍候...',
|
|||
|
|
type: 'info',
|
|||
|
|
duration: 0
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 调用现有的整版酒单生成接口
|
|||
|
|
const response = await generateWineMenu(params)
|
|||
|
|
|
|||
|
|
console.log('后端响应:', response)
|
|||
|
|
|
|||
|
|
if (response.data && response.data.code === 200 && response.data.data && response.data.data.image) {
|
|||
|
|
const result = response.data
|
|||
|
|
// 现有接口返回base64图片，需要转换为可下载的文件
|
|||
|
|
const base64Image = result.data.image
|
|||
|
|
|
|||
|
|
// 将base64转换为blob
|
|||
|
|
const byteCharacters = atob(base64Image)
|
|||
|
|
const byteNumbers = new Array(byteCharacters.length)
|
|||
|
|
for (let i = 0; i < byteCharacters.length; i++) {
|
|||
|
|
byteNumbers[i] = byteCharacters.charCodeAt(i)
|
|||
|
|
}
|
|||
|
|
const byteArray = new Uint8Array(byteNumbers)
|
|||
|
|
|
|||
|
|
// 根据格式设置正确的MIME类型和文件扩展名
|
|||
|
|
let mimeType = 'image/png'
|
|||
|
|
let fileExtension = 'png'
|
|||
|
|
|
|||
|
|
if (result.data.format === 'base64_pdf') {
|
|||
|
|
mimeType = 'application/pdf'
|
|||
|
|
fileExtension = 'pdf'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const blob = new Blob([byteArray], { type: mimeType })
|
|||
|
|
|
|||
|
|
// 创建下载链接
|
|||
|
|
const url = window.URL.createObjectURL(blob)
|
|||
|
|
const a = document.createElement('a')
|
|||
|
|
a.href = url
|
|||
|
|
a.download = `酒单_${new Date().getTime()}.${fileExtension}`
|
|||
|
|
document.body.appendChild(a)
|
|||
|
|
a.click()
|
|||
|
|
document.body.removeChild(a)
|
|||
|
|
window.URL.revokeObjectURL(url)
|
|||
|
|
|
|||
|
|
ElMessage.closeAll() // 关闭loading消息
|
|||
|
|
if (result.data.format === 'base64_pdf') {
|
|||
|
|
ElMessage.success('PDF酒单导出成功')
|
|||
|
|
} else {
|
|||
|
|
ElMessage.success('PNG酒单导出成功')
|
|||
|
|
}
|
|||
|
|
exportMenuDialog.visible = false
|
|||
|
|
} else {
|
|||
|
|
// axios响应错误处理
|
|||
|
|
const errorMsg = response.data?.msg || response.msg || '生成失败'
|
|||
|
|
throw new Error(errorMsg)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('导出酒单失败:', error)
|
|||
|
|
ElMessage.closeAll() // 关闭loading消息
|
|||
|
|
ElMessage.error('导出酒单失败: ' + error.message)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下架酒款
|
|||
|
|
const offTap = async (row) => {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm(
|
|||
|
|
`确定要下架酒头 ${row.tapNo} 上的"${row.beerName}"吗？`,
|
|||
|
|
'下架确认',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const response = await offTapBeer(row.tapId)
|
|||
|
|
console.log('Off tap response:', response)
|
|||
|
|
|
|||
|
|
// axios 返回的数据在 response.data 中
|
|||
|
|
const responseData = response.data || response
|
|||
|
|
|
|||
|
|
if (responseData && responseData.code === 200) {
|
|||
|
|
ElMessage.success('下架成功')
|
|||
|
|
await refreshData()
|
|||
|
|
} else {
|
|||
|
|
throw new Error(responseData?.msg || '下架失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
if (error !== 'cancel') {
|
|||
|
|
console.error('Off tap error:', error)
|
|||
|
|
ElMessage.error('下架失败: ' + (error.message || error))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑规格价格
|
|||
|
|
const editSpecs = (row) => {
|
|||
|
|
console.log('Edit specs for:', row)
|
|||
|
|
editSpecDialog.data = { ...row }
|
|||
|
|
editSpecDialog.visible = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 替换酒款
|
|||
|
|
const replaceBeer = (row) => {
|
|||
|
|
replaceDialog.tapNo = row.tapNo
|
|||
|
|
replaceDialog.visible = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理替换酒款
|
|||
|
|
const handleReplaceBeer = async (data) => {
|
|||
|
|
try {
|
|||
|
|
// 先下架当前酒款
|
|||
|
|
const offResponse = await offTapBeer(data.tapId)
|
|||
|
|
if (offResponse.code === 200) {
|
|||
|
|
// 再上架新酒款
|
|||
|
|
const addResponse = await addBeerToTap(data)
|
|||
|
|
if (addResponse.code === 200) {
|
|||
|
|
ElMessage.success('替换成功')
|
|||
|
|
replaceDialog.visible = false
|
|||
|
|
await refreshData()
|
|||
|
|
} else {
|
|||
|
|
throw new Error(addResponse.msg || '上架失败')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
throw new Error(offResponse.msg || '下架失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('替换失败: ' + error.message)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理更新规格价格
|
|||
|
|
const handleUpdateSpecs = async (data) => {
|
|||
|
|
try {
|
|||
|
|
console.log('Update specs data:', data)
|
|||
|
|
const response = await updateTapBeerSpecs(data)
|
|||
|
|
console.log('Update specs response:', response)
|
|||
|
|
|
|||
|
|
// axios 返回的数据在 response.data 中
|
|||
|
|
const responseData = response.data || response
|
|||
|
|
|
|||
|
|
if (responseData && responseData.code === 200) {
|
|||
|
|
ElMessage.success('价格更新成功')
|
|||
|
|
editSpecDialog.visible = false
|
|||
|
|
await refreshData()
|
|||
|
|
} else {
|
|||
|
|
throw new Error(responseData?.msg || '价格更新失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Update specs error:', error)
|
|||
|
|
ElMessage.error('价格更新失败: ' + error.message)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件挂载时获取数据
|
|||
|
|
onMounted(() => {
|
|||
|
|
refreshData()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-wrapper {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operation-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24px 32px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operation-header h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #303133;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operation-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-list {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
padding: 60px 32px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-items {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24px 32px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
transition: background-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-item:hover {
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-number {
|
|||
|
|
margin-right: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
line-height: 48px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #409eff;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
margin-right: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-image {
|
|||
|
|
margin-right: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-image img {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 90px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border: 2px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-details {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-name {
|
|||
|
|
margin: 0 0 4px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-brand {
|
|||
|
|
margin: 0 0 2px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-style {
|
|||
|
|
margin: 0 0 2px 0;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #67c23a;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-abv {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #909399;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.specs-info {
|
|||
|
|
margin-right: 24px;
|
|||
|
|
min-width: 120px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: 200px;
|
|||
|
|
margin-right: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-price {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #e6a23c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
min-width: 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions .el-button {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 32px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 32px !important;
|
|||
|
|
font-size: 12px !important;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.content-wrapper {
|
|||
|
|
margin: 0 16px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operation-header {
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operation-buttons {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-item {
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tap-number {
|
|||
|
|
margin-right: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.beer-info {
|
|||
|
|
margin-right: 0;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.specs-info {
|
|||
|
|
margin-right: 0;
|
|||
|
|
min-width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.actions {
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|