王天骄
735 lines
17 KiB
Vue
735 lines
17 KiB
Vue
<template>
|
||
<view class="scenario-page">
|
||
<view class="scenario-shell">
|
||
<view class="hero">
|
||
<image class="hero-image" src="/static/config-hospital.png" mode="aspectFill"></image>
|
||
<view class="hero-fade"></view>
|
||
</view>
|
||
|
||
<view class="director-row">
|
||
<view class="director-avatar">
|
||
<image class="director-image" src="/static/config-doctor.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="speech-bubble">
|
||
<text>欢迎回来！请根据您的教学目标配置临床场景。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="config-scroll" scroll-y>
|
||
<view class="selected-case">
|
||
<text class="case-label">当前病例</text>
|
||
<text class="case-title">{{ currentCaseTitle }}</text>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<view class="section-title">
|
||
<view class="star-icon"></view>
|
||
<text>王主任推荐</text>
|
||
</view>
|
||
<view class="recommend-list">
|
||
<button
|
||
v-for="item in recommendations"
|
||
:key="item.id"
|
||
class="recommend-card"
|
||
:class="{ active: selectedRecommendationId === item.id }"
|
||
@click="applyRecommendation(item)"
|
||
>
|
||
<view class="recommend-head">
|
||
<text class="recommend-icon">{{ item.tags[0] }}</text>
|
||
<text class="recommend-title">{{ item.title }}</text>
|
||
</view>
|
||
<text class="recommend-desc">{{ item.desc }}</text>
|
||
<view class="tag-row">
|
||
<text
|
||
v-for="tag in item.tags"
|
||
:key="tag"
|
||
class="tag"
|
||
:class="{ danger: tag === '急躁' }"
|
||
>
|
||
{{ tag }}
|
||
</text>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section custom-section" :class="{ expanded: customConfigExpanded }">
|
||
<button
|
||
class="section-title custom-config-toggle"
|
||
:class="{ expanded: customConfigExpanded }"
|
||
:aria-label="customConfigExpanded ? '收起自定义配置' : '展开自定义配置'"
|
||
@click="toggleCustomConfig"
|
||
>
|
||
<view class="tune-icon"></view>
|
||
<text>自定义配置</text>
|
||
<view class="custom-toggle-spacer"></view>
|
||
<view class="toggle-chevron"></view>
|
||
</button>
|
||
|
||
<view class="custom-options" :class="{ expanded: customConfigExpanded }">
|
||
<view class="option-block">
|
||
<view class="option-label">
|
||
<view class="location-icon"></view>
|
||
<text>就诊环境</text>
|
||
</view>
|
||
<view class="option-grid grid-3">
|
||
<button
|
||
v-for="option in options.environments"
|
||
:key="option.value"
|
||
class="choice"
|
||
:class="{ selected: form.environment === option.value }"
|
||
@click="selectOption('environment', option.value)"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="option-block">
|
||
<view class="option-label">
|
||
<view class="cake-icon"></view>
|
||
<text>年龄段</text>
|
||
</view>
|
||
<view class="option-grid grid-4">
|
||
<button
|
||
v-for="option in options.ageGroups"
|
||
:key="option.value"
|
||
class="choice small"
|
||
:class="{ selected: form.ageGroup === option.value }"
|
||
@click="selectOption('ageGroup', option.value)"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="option-block">
|
||
<view class="option-label">
|
||
<view class="school-icon"></view>
|
||
<text>文化程度</text>
|
||
</view>
|
||
<view class="option-grid grid-3">
|
||
<button
|
||
v-for="option in options.educations"
|
||
:key="option.value"
|
||
class="choice mini"
|
||
:class="{ selected: form.education === option.value }"
|
||
@click="selectOption('education', option.value)"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="option-block personality-block">
|
||
<view class="option-label">
|
||
<view class="mind-icon"></view>
|
||
<text>性格</text>
|
||
</view>
|
||
<view class="option-grid grid-3">
|
||
<button
|
||
v-for="option in options.personalities"
|
||
:key="option.value"
|
||
class="choice"
|
||
:class="{ selected: form.personality === option.value }"
|
||
@click="selectOption('personality', option.value)"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="bottom-action">
|
||
<button class="generate-button" :disabled="generating" @click="handleGenerate">
|
||
<text>{{ generating ? '正在生成...' : '生成模拟场景' }}</text>
|
||
<view class="arrow-icon"></view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||
import { readStoredClinicalCase, type ClinicalCase } from '../../api/cases'
|
||
import {
|
||
DEFAULT_SCENARIO_OPTIONS,
|
||
createScenarioConfig,
|
||
fetchScenarioOptions,
|
||
fetchTrainingConfigOptions,
|
||
type ScenarioForm,
|
||
type ScenarioOptions,
|
||
type ScenarioRecommendation
|
||
} from '../../api/scenario'
|
||
|
||
const props = defineProps<{
|
||
caseItem?: ClinicalCase | null
|
||
}>()
|
||
|
||
type ScenarioFormKey = keyof ScenarioForm
|
||
|
||
const form = reactive<ScenarioForm>({
|
||
environment: 'outpatient',
|
||
ageGroup: 'youth',
|
||
education: 'higher',
|
||
personality: 'calm'
|
||
})
|
||
|
||
const recommendations = ref<ScenarioRecommendation[]>([])
|
||
const options = ref<ScenarioOptions>(DEFAULT_SCENARIO_OPTIONS)
|
||
const selectedRecommendationId = ref('')
|
||
const generating = ref(false)
|
||
const toastMessage = ref('')
|
||
const toastVisible = ref(false)
|
||
const customConfigExpanded = ref(false)
|
||
const storedCase = ref<ClinicalCase | null>(null)
|
||
|
||
let toastTimer: ReturnType<typeof setTimeout> | null = null
|
||
|
||
const activeCase = computed(() => props.caseItem || storedCase.value)
|
||
|
||
const currentCaseTitle = computed(() => {
|
||
if (!activeCase.value) return '未选择病例'
|
||
return `${activeCase.value.title}（${activeCase.value.caseNo}）`
|
||
})
|
||
|
||
async function loadScenarioOptions() {
|
||
const fallback = await fetchScenarioOptions()
|
||
recommendations.value = fallback.recommendations
|
||
options.value = fallback.options
|
||
|
||
try {
|
||
const result = await fetchTrainingConfigOptions(1)
|
||
options.value = result.options
|
||
Object.assign(form, result.recommended)
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : '推荐配置加载失败')
|
||
}
|
||
}
|
||
|
||
function applyRecommendation(item: ScenarioRecommendation) {
|
||
selectedRecommendationId.value = item.id
|
||
Object.assign(form, item.defaults)
|
||
}
|
||
|
||
function selectOption(key: ScenarioFormKey, value: string) {
|
||
form[key] = value
|
||
selectedRecommendationId.value = ''
|
||
}
|
||
|
||
function toggleCustomConfig() {
|
||
customConfigExpanded.value = !customConfigExpanded.value
|
||
}
|
||
|
||
function handleGenerate() {
|
||
if (!activeCase.value) {
|
||
showToast('请先选择病例')
|
||
return
|
||
}
|
||
|
||
generating.value = true
|
||
createScenarioConfig({
|
||
...form,
|
||
caseId: activeCase.value.id,
|
||
caseNo: activeCase.value.caseNo,
|
||
mode: activeCase.value.mode === 'teaching' ? 'teaching' : 'practice',
|
||
recommendationId: selectedRecommendationId.value || undefined
|
||
}).then(result => {
|
||
uni.setStorageSync('clinical-thinking-scenario', result)
|
||
showToast('模拟场景已生成')
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/chat/chat'
|
||
})
|
||
}, 450)
|
||
}).catch(error => {
|
||
showToast(error instanceof Error ? error.message : '模拟场景生成失败')
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
generating.value = false
|
||
}, 600)
|
||
})
|
||
}
|
||
|
||
function showToast(message: string) {
|
||
if (toastTimer) clearTimeout(toastTimer)
|
||
toastMessage.value = message
|
||
toastVisible.value = true
|
||
toastTimer = setTimeout(() => {
|
||
toastVisible.value = false
|
||
}, 2200)
|
||
}
|
||
|
||
onMounted(() => {
|
||
storedCase.value = readStoredClinicalCase()
|
||
loadScenarioOptions()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (toastTimer) clearTimeout(toastTimer)
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
min-height: 100%;
|
||
background: #f9f9ff;
|
||
}
|
||
|
||
.scenario-page {
|
||
min-height: 100vh;
|
||
background: #f9f9ff;
|
||
color: #191c21;
|
||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.scenario-shell {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
background: #f9f9ff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hero {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
height: 33.333vh;
|
||
min-height: 245px;
|
||
}
|
||
|
||
.hero-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.hero-fade {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, rgba(249, 249, 255, 0), rgba(249, 249, 255, 0.3));
|
||
}
|
||
|
||
.director-row {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: -40px;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.director-avatar {
|
||
flex: 0 0 auto;
|
||
width: 96px;
|
||
height: 96px;
|
||
}
|
||
|
||
.director-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.speech-bubble {
|
||
position: relative;
|
||
flex: 1;
|
||
margin-top: 16px;
|
||
padding: 16px;
|
||
border: 1px solid rgba(194, 198, 212, 0.3);
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 10px rgba(25, 28, 33, 0.1);
|
||
color: #00478d;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.speech-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -9px;
|
||
top: 20px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #ffffff;
|
||
border-left: 1px solid rgba(194, 198, 212, 0.3);
|
||
border-bottom: 1px solid rgba(194, 198, 212, 0.3);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.config-scroll {
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
height: 1px;
|
||
padding: 16px 20px 108px;
|
||
}
|
||
|
||
.selected-case {
|
||
margin-bottom: 20px;
|
||
padding: 12px;
|
||
border: 1px solid rgba(194, 198, 212, 0.35);
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.case-label {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
color: #727783;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.case-title {
|
||
color: #191c21;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #191c21;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.star-icon,
|
||
.tune-icon,
|
||
.location-icon,
|
||
.cake-icon,
|
||
.school-icon,
|
||
.mind-icon,
|
||
.arrow-icon {
|
||
background: #00478d;
|
||
}
|
||
|
||
.star-icon,
|
||
.tune-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.star-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.tune-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.recommend-list,
|
||
.custom-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.custom-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.custom-section.expanded {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.custom-config-toggle {
|
||
width: 100%;
|
||
min-height: 44px;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-align: left;
|
||
}
|
||
|
||
.custom-config-toggle::after {
|
||
border: 0;
|
||
}
|
||
|
||
.custom-toggle-spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.toggle-chevron {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #424752;
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7.4%208.6%2012%2013.2l4.6-4.6L18%2010l-6%206-6-6%201.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7.4%208.6%2012%2013.2l4.6-4.6L18%2010l-6%206-6-6%201.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.custom-config-toggle.expanded .toggle-chevron {
|
||
background: #00478d;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.custom-options {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transform: translateY(-4px);
|
||
transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.18s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.custom-options.expanded {
|
||
max-height: 760px;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.recommend-card {
|
||
width: 100%;
|
||
padding: 16px;
|
||
border: 1px solid #c2c6d4;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
text-align: left;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.recommend-card.active {
|
||
border-color: #00478d;
|
||
background: rgba(214, 227, 255, 0.46);
|
||
}
|
||
|
||
.recommend-card::after,
|
||
.choice::after,
|
||
.generate-button::after {
|
||
border: 0;
|
||
}
|
||
|
||
.recommend-card:active,
|
||
.choice:active,
|
||
.generate-button:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.recommend-head {
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.recommend-icon {
|
||
color: #00478d;
|
||
font-size: 13px;
|
||
line-height: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.recommend-title {
|
||
color: #191c21;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.recommend-desc {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #424752;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.tag-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: #ecedf6;
|
||
color: #191c21;
|
||
font-size: 10px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.tag.danger {
|
||
background: rgba(255, 218, 214, 0.35);
|
||
color: #ba1a1a;
|
||
}
|
||
|
||
.option-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.option-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: #424752;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.location-icon,
|
||
.cake-icon,
|
||
.school-icon,
|
||
.mind-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
background: #424752;
|
||
}
|
||
|
||
.location-icon {
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.cake-icon,
|
||
.school-icon,
|
||
.mind-icon {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.option-grid {
|
||
display: grid;
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.grid-3 {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.grid-4 {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.choice {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: 42px;
|
||
padding: 8px 6px;
|
||
border: 1px solid #c2c6d4;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.76);
|
||
color: #424752;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.choice.small {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.choice.mini {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.choice.selected {
|
||
border-color: #00478d;
|
||
background: rgba(0, 71, 141, 0.1);
|
||
color: #00478d;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.personality-block {
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
.bottom-action {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 3;
|
||
box-sizing: border-box;
|
||
padding: 32px 20px 20px;
|
||
background: linear-gradient(180deg, rgba(249, 249, 255, 0), #f9f9ff 38%, #f9f9ff);
|
||
}
|
||
|
||
.generate-button {
|
||
width: 100%;
|
||
min-height: 56px;
|
||
border-radius: 999px;
|
||
background: #00478d;
|
||
box-shadow: 0 8px 18px rgba(0, 71, 141, 0.22);
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.arrow-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #ffffff;
|
||
-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||
}
|
||
|
||
.toast {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 96px;
|
||
z-index: 100;
|
||
max-width: 320px;
|
||
padding: 12px 24px;
|
||
border-radius: 999px;
|
||
background: #2e3037;
|
||
color: #eff0f8;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transform: translate(-50%, 16px);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
.toast.visible {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
</style>
|