103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<template>
|
|
<div class="demo-app">
|
|
<header class="hero">
|
|
<div>
|
|
<p class="eyebrow">timi-tdesign-mobile</p>
|
|
<h1>移动端组件演示台</h1>
|
|
<p>每个页面都使用真实公开组件和可重复的本地演示数据。</p>
|
|
</div>
|
|
<t-tag theme="primary" variant="light">TDesign Mobile</t-tag>
|
|
</header>
|
|
|
|
<nav class="tabs" aria-label="演示分类">
|
|
<t-button
|
|
v-for="item in tabs"
|
|
:key="item.value"
|
|
size="small"
|
|
:theme="activeTab === item.value ? 'primary' : 'default'"
|
|
variant="outline"
|
|
@click="activeTab = item.value"
|
|
v-text="item.label"
|
|
/>
|
|
</nav>
|
|
|
|
<main>
|
|
<editor-showcase v-if="activeTab === 'editor'" />
|
|
<article-showcase v-else-if="activeTab === 'article'" />
|
|
<notify-showcase v-else-if="activeTab === 'notify'" />
|
|
<duration-showcase v-else />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ArticleShowcase from "./components/ArticleShowcase.vue";
|
|
import DurationShowcase from "./components/DurationShowcase.vue";
|
|
import EditorShowcase from "./components/EditorShowcase.vue";
|
|
import NotifyShowcase from "./components/NotifyShowcase.vue";
|
|
|
|
type TabValue = "editor" | "article" | "notify" | "duration";
|
|
|
|
const tabs: Array<{ label: string; value: TabValue }> = [
|
|
{ label: "编辑器", value: "editor" },
|
|
{ label: "文章", value: "article" },
|
|
{ label: "通知", value: "notify" },
|
|
{ label: "移动端组件", value: "duration" }
|
|
];
|
|
const activeTab = ref<TabValue>("editor");
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo-app {
|
|
width: min(100% - 2rem, 80rem);
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
padding: 2rem 0 4rem;
|
|
color: var(--td-text-color-primary);
|
|
}
|
|
|
|
.hero {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
|
|
h1 {
|
|
margin: .25rem 0;
|
|
font-size: clamp(1.75rem, 6vw, 3rem);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--td-text-color-secondary);
|
|
}
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: .75rem;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--td-brand-color);
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: .5rem;
|
|
margin-bottom: 1.5rem;
|
|
overflow-x: auto;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.demo-app {
|
|
width: min(100% - 1rem, 80rem);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.hero {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|