Refactor frontend to Vue 3 + Vite + Pinia + Cypress E2E
- Replace single-file 8441-line HTML with Vue 3 SPA - Pinia stores: auth, oils, recipes, diary, ui - Composables: useApi, useDialog, useSmartPaste, useOilTranslation - 6 shared components: RecipeCard, RecipeDetailOverlay, TagPicker, etc. - 9 page views: RecipeSearch, RecipeManager, Inventory, OilReference, etc. - 14 Cypress E2E test specs (113 tests), all passing - Multi-stage Dockerfile (Node build + Python runtime) - Demo video generation scripts (TTS + subtitles + screen recording) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
788
frontend/src/views/OilReference.vue
Normal file
788
frontend/src/views/OilReference.vue
Normal file
@@ -0,0 +1,788 @@
|
||||
<template>
|
||||
<div class="oil-reference">
|
||||
<!-- Knowledge Cards -->
|
||||
<div class="knowledge-cards">
|
||||
<div class="kcard" @click="showDilution = true">
|
||||
<span class="kcard-icon">💧</span>
|
||||
<span class="kcard-title">稀释比例</span>
|
||||
<span class="kcard-arrow">›</span>
|
||||
</div>
|
||||
<div class="kcard" @click="showContra = true">
|
||||
<span class="kcard-icon">⚠️</span>
|
||||
<span class="kcard-title">使用禁忌</span>
|
||||
<span class="kcard-arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Overlays -->
|
||||
<div v-if="showDilution" class="info-overlay" @click.self="showDilution = false">
|
||||
<div class="info-panel">
|
||||
<div class="info-header">
|
||||
<h3>💧 稀释比例参考</h3>
|
||||
<button class="btn-close" @click="showDilution = false">✕</button>
|
||||
</div>
|
||||
<div class="info-body">
|
||||
<table class="info-table">
|
||||
<thead>
|
||||
<tr><th>用途</th><th>比例</th><th>每10ml基底油</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>面部护肤</td><td>1%</td><td>2滴精油</td></tr>
|
||||
<tr><td>身体按摩</td><td>2-3%</td><td>4-6滴精油</td></tr>
|
||||
<tr><td>局部疼痛</td><td>3-5%</td><td>6-10滴精油</td></tr>
|
||||
<tr><td>急救用途</td><td>5-10%</td><td>10-20滴精油</td></tr>
|
||||
<tr><td>儿童(2-6岁)</td><td>0.5-1%</td><td>1-2滴精油</td></tr>
|
||||
<tr><td>婴儿(<2岁)</td><td>0.25%</td><td>0.5滴精油</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="info-note">* 1ml 约等于 {{ DROPS_PER_ML }} 滴</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showContra" class="info-overlay" @click.self="showContra = false">
|
||||
<div class="info-panel">
|
||||
<div class="info-header">
|
||||
<h3>⚠️ 使用禁忌</h3>
|
||||
<button class="btn-close" @click="showContra = false">✕</button>
|
||||
</div>
|
||||
<div class="info-body">
|
||||
<div class="contra-section">
|
||||
<h4>光敏性精油（涂抹后12小时内避免阳光直射）</h4>
|
||||
<p>柠檬、佛手柑、葡萄柚、莱姆、甜橙、野橘</p>
|
||||
</div>
|
||||
<div class="contra-section">
|
||||
<h4>孕妇慎用</h4>
|
||||
<p>快乐鼠尾草、迷迭香、肉桂、丁香、百里香、牛至、冬青</p>
|
||||
</div>
|
||||
<div class="contra-section">
|
||||
<h4>儿童慎用</h4>
|
||||
<p>椒样薄荷（6岁以下避免）、尤加利（10岁以下慎用）、冬青、肉桂</p>
|
||||
</div>
|
||||
<div class="contra-section">
|
||||
<h4>宠物禁用</h4>
|
||||
<p>茶树、尤加利、肉桂、丁香、百里香、冬青（对猫有毒）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Oil Form (admin/senior_editor) -->
|
||||
<div v-if="auth.canEdit" class="add-oil-form">
|
||||
<h3 class="section-title">添加精油</h3>
|
||||
<div class="form-row">
|
||||
<input v-model="newOilName" class="form-input" placeholder="精油名称" />
|
||||
<input v-model.number="newBottlePrice" class="form-input-sm" type="number" placeholder="瓶价 ¥" />
|
||||
<input v-model.number="newDropCount" class="form-input-sm" type="number" placeholder="滴数" />
|
||||
<input v-model.number="newRetailPrice" class="form-input-sm" type="number" placeholder="零售价 ¥" />
|
||||
<button class="btn-primary" @click="addOil" :disabled="!newOilName.trim()">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search & View Toggle -->
|
||||
<div class="toolbar">
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索精油..."
|
||||
/>
|
||||
<button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: viewMode === 'bottle' }"
|
||||
@click="viewMode = 'bottle'"
|
||||
>🧴 瓶价</button>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: viewMode === 'drop' }"
|
||||
@click="viewMode = 'drop'"
|
||||
>💧 滴价</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Oil Grid -->
|
||||
<div class="oil-grid">
|
||||
<div
|
||||
v-for="name in filteredOilNames"
|
||||
:key="name"
|
||||
class="oil-card"
|
||||
@click="selectOil(name)"
|
||||
>
|
||||
<div class="oil-name">{{ name }}</div>
|
||||
<div class="oil-price" v-if="viewMode === 'bottle'">
|
||||
{{ getMeta(name)?.bottlePrice != null ? ('¥ ' + getMeta(name).bottlePrice.toFixed(2)) : '--' }}
|
||||
<span class="oil-count" v-if="getMeta(name)?.dropCount">({{ getMeta(name).dropCount }}滴)</span>
|
||||
</div>
|
||||
<div class="oil-price" v-else>
|
||||
{{ oils.pricePerDrop(name) ? ('¥ ' + oils.pricePerDrop(name).toFixed(4)) : '--' }}
|
||||
<span class="oil-unit">/滴</span>
|
||||
</div>
|
||||
<div v-if="getMeta(name)?.retailPrice" class="oil-retail">
|
||||
零售 ¥ {{ getMeta(name).retailPrice.toFixed(2) }}
|
||||
</div>
|
||||
<div class="oil-actions" v-if="auth.isAdmin" @click.stop>
|
||||
<button class="btn-icon-sm" @click="editOil(name)" title="编辑">✏️</button>
|
||||
<button class="btn-icon-sm" @click="removeOil(name)" title="删除">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filteredOilNames.length === 0" class="empty-hint">未找到精油</div>
|
||||
</div>
|
||||
|
||||
<!-- Oil Detail Card -->
|
||||
<div v-if="selectedOilName" class="oil-detail-overlay" @click.self="selectedOilName = null">
|
||||
<div class="oil-detail-panel">
|
||||
<div class="detail-header">
|
||||
<h3>{{ selectedOilName }}</h3>
|
||||
<button class="btn-close" @click="selectedOilName = null">✕</button>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">瓶价</span>
|
||||
<span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">总滴数</span>
|
||||
<span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">每滴价格</span>
|
||||
<span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(4)) : '--' }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="getMeta(selectedOilName)?.retailPrice">
|
||||
<span class="detail-label">零售价</span>
|
||||
<span class="detail-value">¥ {{ getMeta(selectedOilName).retailPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">每ml价格</span>
|
||||
<span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + (oils.pricePerDrop(selectedOilName) * DROPS_PER_ML).toFixed(2)) : '--' }}</span>
|
||||
</div>
|
||||
|
||||
<h4 style="margin:16px 0 8px">含此精油的配方</h4>
|
||||
<div v-if="recipesWithOil.length" class="detail-recipes">
|
||||
<div v-for="r in recipesWithOil" :key="r._id" class="detail-recipe-item">
|
||||
<span class="dr-name">{{ r.name }}</span>
|
||||
<span class="dr-drops">{{ getDropsForOil(r, selectedOilName) }}滴</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-hint">暂无使用此精油的配方</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Oil Overlay -->
|
||||
<div v-if="editingOilName" class="info-overlay" @click.self="editingOilName = null">
|
||||
<div class="info-panel" style="max-width:400px">
|
||||
<div class="info-header">
|
||||
<h3>编辑精油: {{ editingOilName }}</h3>
|
||||
<button class="btn-close" @click="editingOilName = null">✕</button>
|
||||
</div>
|
||||
<div class="info-body">
|
||||
<div class="form-group">
|
||||
<label>瓶价 (¥)</label>
|
||||
<input v-model.number="editBottlePrice" class="form-input" type="number" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>滴数</label>
|
||||
<input v-model.number="editDropCount" class="form-input" type="number" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>零售价 (¥)</label>
|
||||
<input v-model.number="editRetailPrice" class="form-input" type="number" />
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
|
||||
<button class="btn-outline" @click="editingOilName = null">取消</button>
|
||||
<button class="btn-primary" @click="saveEditOil">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useOilsStore, DROPS_PER_ML } from '../stores/oils'
|
||||
import { useRecipesStore } from '../stores/recipes'
|
||||
import { useUiStore } from '../stores/ui'
|
||||
import { showConfirm } from '../composables/useDialog'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const oils = useOilsStore()
|
||||
const recipeStore = useRecipesStore()
|
||||
const ui = useUiStore()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const viewMode = ref('bottle')
|
||||
const selectedOilName = ref(null)
|
||||
const showDilution = ref(false)
|
||||
const showContra = ref(false)
|
||||
|
||||
// Add oil form
|
||||
const newOilName = ref('')
|
||||
const newBottlePrice = ref(null)
|
||||
const newDropCount = ref(null)
|
||||
const newRetailPrice = ref(null)
|
||||
|
||||
// Edit oil
|
||||
const editingOilName = ref(null)
|
||||
const editBottlePrice = ref(0)
|
||||
const editDropCount = ref(0)
|
||||
const editRetailPrice = ref(null)
|
||||
|
||||
const filteredOilNames = computed(() => {
|
||||
if (!searchQuery.value.trim()) return oils.oilNames
|
||||
const q = searchQuery.value.trim().toLowerCase()
|
||||
return oils.oilNames.filter(n => n.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
const recipesWithOil = computed(() => {
|
||||
if (!selectedOilName.value) return []
|
||||
return recipeStore.recipes.filter(r =>
|
||||
r.ingredients.some(i => i.oil === selectedOilName.value)
|
||||
)
|
||||
})
|
||||
|
||||
function getMeta(name) {
|
||||
return oils.oilsMeta.get(name)
|
||||
}
|
||||
|
||||
function getDropsForOil(recipe, oilName) {
|
||||
const ing = recipe.ingredients.find(i => i.oil === oilName)
|
||||
return ing ? ing.drops : 0
|
||||
}
|
||||
|
||||
function selectOil(name) {
|
||||
selectedOilName.value = name
|
||||
}
|
||||
|
||||
async function addOil() {
|
||||
if (!newOilName.value.trim()) return
|
||||
try {
|
||||
await oils.saveOil(
|
||||
newOilName.value.trim(),
|
||||
newBottlePrice.value || 0,
|
||||
newDropCount.value || 0,
|
||||
newRetailPrice.value || null
|
||||
)
|
||||
ui.showToast(`已添加: ${newOilName.value}`)
|
||||
newOilName.value = ''
|
||||
newBottlePrice.value = null
|
||||
newDropCount.value = null
|
||||
newRetailPrice.value = null
|
||||
} catch (e) {
|
||||
ui.showToast('添加失败: ' + (e.message || ''))
|
||||
}
|
||||
}
|
||||
|
||||
function editOil(name) {
|
||||
editingOilName.value = name
|
||||
const meta = oils.oilsMeta.get(name)
|
||||
editBottlePrice.value = meta?.bottlePrice || 0
|
||||
editDropCount.value = meta?.dropCount || 0
|
||||
editRetailPrice.value = meta?.retailPrice || null
|
||||
}
|
||||
|
||||
async function saveEditOil() {
|
||||
try {
|
||||
await oils.saveOil(
|
||||
editingOilName.value,
|
||||
editBottlePrice.value,
|
||||
editDropCount.value,
|
||||
editRetailPrice.value
|
||||
)
|
||||
ui.showToast('已更新')
|
||||
editingOilName.value = null
|
||||
} catch (e) {
|
||||
ui.showToast('更新失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeOil(name) {
|
||||
const ok = await showConfirm(`确定删除精油 "${name}"？`)
|
||||
if (!ok) return
|
||||
try {
|
||||
await oils.deleteOil(name)
|
||||
ui.showToast('已删除')
|
||||
} catch {
|
||||
ui.showToast('删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.oil-reference {
|
||||
padding: 0 12px 24px;
|
||||
}
|
||||
|
||||
.knowledge-cards {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.kcard {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
background: linear-gradient(135deg, #f8f7f5, #f0eeeb);
|
||||
border: 1.5px solid #e5e4e7;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.kcard:hover {
|
||||
border-color: #7ec6a4;
|
||||
background: linear-gradient(135deg, #f0faf5, #e8f5e9);
|
||||
}
|
||||
|
||||
.kcard-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.kcard-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kcard-arrow {
|
||||
color: #b0aab5;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Info overlay */
|
||||
.info-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.info-body {
|
||||
font-size: 14px;
|
||||
color: #3e3a44;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e4e7;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
font-weight: 600;
|
||||
color: #6b6375;
|
||||
background: #f8f7f5;
|
||||
}
|
||||
|
||||
.info-note {
|
||||
font-size: 12px;
|
||||
color: #b0aab5;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.contra-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.contra-section h4 {
|
||||
font-size: 14px;
|
||||
margin: 0 0 4px;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
.contra-section p {
|
||||
font-size: 13px;
|
||||
color: #6b6375;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Add oil form */
|
||||
.add-oil-form {
|
||||
margin-bottom: 16px;
|
||||
padding: 14px;
|
||||
background: #f8f7f5;
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid #e5e4e7;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 8px 12px;
|
||||
border: 1.5px solid #d4cfc7;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #7ec6a4;
|
||||
}
|
||||
|
||||
.form-input-sm {
|
||||
width: 80px;
|
||||
padding: 8px 10px;
|
||||
border: 1.5px solid #d4cfc7;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f8f7f5;
|
||||
border-radius: 10px;
|
||||
padding: 2px 8px;
|
||||
border: 1.5px solid #e5e4e7;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 8px 6px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.search-clear-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
border: 1.5px solid #e5e4e7;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
color: #6b6375;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Oil grid */
|
||||
.oil-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.oil-card {
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border: 1.5px solid #e5e4e7;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oil-card:hover {
|
||||
border-color: #7ec6a4;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.oil-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #3e3a44;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.oil-price {
|
||||
font-size: 14px;
|
||||
color: #4a9d7e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.oil-count {
|
||||
font-size: 11px;
|
||||
color: #b0aab5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.oil-unit {
|
||||
font-size: 11px;
|
||||
color: #b0aab5;
|
||||
}
|
||||
|
||||
.oil-retail {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.oil-actions {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.oil-card:hover .oil-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-icon-sm {
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-icon-sm:hover {
|
||||
background: #f0eeeb;
|
||||
}
|
||||
|
||||
/* Detail overlay */
|
||||
.oil-detail-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.oil-detail-panel {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.detail-body h4 {
|
||||
font-size: 14px;
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0eeeb;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #6b6375;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.detail-recipes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-recipe-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
background: #f8f7f5;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dr-name {
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.dr-drops {
|
||||
color: #4a9d7e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
border: none;
|
||||
background: #f0eeeb;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b6375;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: #fff;
|
||||
color: #6b6375;
|
||||
border: 1.5px solid #d4cfc7;
|
||||
border-radius: 8px;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
color: #b0aab5;
|
||||
font-size: 13px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.oil-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-input-sm {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user