a5ac00baa1
This commit introduces a real-time budget estimator for event services. A new summary sidebar now displays a live, itemized breakdown of costs as the user selects options in the order form. Key changes include: - A new `OrderSummary` component to display the price breakdown and total. - Comprehensive pricing logic implemented in the `useEventOrder` composable. - A responsive two-column layout on the main page to accommodate the summary. - UI/UX improvements across the form, including clearer labels and subtle transition animations for conditional fields.
46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<template>
|
||
<div>
|
||
<UPageHero
|
||
title="客制化高定系统"
|
||
description="以自研技术为核心，专注打造高度定制化的交互展示系统。首创动态竞标与赞助商展示方案，全面支持宴会、活动与颁奖典礼等多场景应用，让每一场盛会更具视觉冲击与品牌价值。"
|
||
/>
|
||
|
||
<UContainer>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div class="lg:col-span-2">
|
||
<UForm :schema="orderSchema" :state="orderState" class="space-y-4">
|
||
<!-- 基本信息 -->
|
||
<EventOrderMetaDetails />
|
||
<!-- 竞价系统 -->
|
||
<EventOrderProductBidding />
|
||
<!-- 舞台背景设计 -->
|
||
<EventOrderProductBackgroundDesign />
|
||
<!-- 流程 / 投影 PPT 设计 -->
|
||
<EventOrderProductFlowDesign />
|
||
<!-- 赞助商位设计 -->
|
||
<EventOrderProductSponsor />
|
||
</UForm>
|
||
</div>
|
||
<div class="lg:col-span-1">
|
||
<EventOrderSummary />
|
||
</div>
|
||
</div>
|
||
</UContainer>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { orderSchema, orderState } = useEventOrder();
|
||
|
||
useSeoMeta({
|
||
title: "Tootaio · 活动价目估算",
|
||
description:
|
||
"在线选择服务，实时获得预算估算，包括竞价系统、舞台背景设计、流程/投影PPT与赞助商位设计。",
|
||
ogTitle: "Tootaio · 活动价目估算",
|
||
ogDescription: "在线选择服务，实时获得预算估算：竞价系统、舞台背景、PPT等。",
|
||
twitterCard: "summary_large_image",
|
||
});
|
||
</script>
|
||
|
||
<style></style>
|