feat: order页面空状态
This commit is contained in:
@@ -1,234 +1,248 @@
|
||||
<template>
|
||||
<div class="wardrobe-page">
|
||||
<div class="wardrobe-hero flex flex-col flex-center">
|
||||
<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
|
||||
<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
|
||||
</div>
|
||||
<div class="wardrobe-page">
|
||||
<div class="wardrobe-hero flex flex-col flex-center">
|
||||
<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
|
||||
<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="wardrobe-shell">
|
||||
<div class="wardrobe-tabs">
|
||||
<div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="wardrobe-tabs__item"
|
||||
:class="{ 'is-active': activeTab === tab.key }"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === tab.key"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="wardrobe-shell">
|
||||
<div class="wardrobe-tabs">
|
||||
<div
|
||||
class="wardrobe-tabs__nav"
|
||||
role="tablist"
|
||||
:aria-label="t('Wardrobe.tabs.ariaLabel')"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="wardrobe-tabs__item"
|
||||
:class="{ 'is-active': activeTab === tab.key }"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === tab.key"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
|
||||
<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
|
||||
<el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')">
|
||||
<el-option
|
||||
v-for="option in sortOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
|
||||
<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
|
||||
<el-select
|
||||
v-model="activeSort"
|
||||
popper-class="wardrobe-sort-dropdown"
|
||||
:placeholder="t('Wardrobe.sort.placeholder')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in sortOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<component :is="activePanel" class="wardrobe-shell__panel" />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<component :is="activePanel" class="wardrobe-shell__panel" />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Assets from './Assets.vue'
|
||||
import Orders from './Orders.vue'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Assets from './Assets.vue'
|
||||
import Orders from './Orders.vue'
|
||||
|
||||
type WardrobeTab = 'assets' | 'orders'
|
||||
type WardrobeTab = 'assets' | 'orders'
|
||||
|
||||
interface TabItem {
|
||||
key: WardrobeTab
|
||||
label: string
|
||||
}
|
||||
interface TabItem {
|
||||
key: WardrobeTab
|
||||
label: string
|
||||
}
|
||||
|
||||
interface SortOption {
|
||||
label: string
|
||||
value: number
|
||||
}
|
||||
interface SortOption {
|
||||
label: string
|
||||
value: number
|
||||
}
|
||||
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const tabs = computed<TabItem[]>(() => [
|
||||
{
|
||||
key: 'assets',
|
||||
label: t('Wardrobe.tabs.assets')
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
label: t('Wardrobe.tabs.orders')
|
||||
}
|
||||
])
|
||||
const tabs = computed<TabItem[]>(() => [
|
||||
{
|
||||
key: 'assets',
|
||||
label: t('Wardrobe.tabs.assets')
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
label: t('Wardrobe.tabs.orders')
|
||||
}
|
||||
])
|
||||
|
||||
const sortOptions = computed<SortOption[]>(() => [
|
||||
{
|
||||
label: t('Wardrobe.sort.default'),
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: t('Wardrobe.sort.dateAdded'),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: t('Wardrobe.sort.selectedFirst'),
|
||||
value: 2
|
||||
}
|
||||
])
|
||||
const sortOptions = computed<SortOption[]>(() => [
|
||||
{
|
||||
label: t('Wardrobe.sort.dateAdded'),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: t('Wardrobe.sort.selectedFirst'),
|
||||
value: 2
|
||||
}
|
||||
])
|
||||
|
||||
const activeTab = shallowRef<WardrobeTab>('assets')
|
||||
const activeSort = shallowRef(1)
|
||||
const activeTab = shallowRef<WardrobeTab>('assets')
|
||||
const activeSort = shallowRef(1)
|
||||
|
||||
const activePanel = computed(() => {
|
||||
return activeTab.value === 'assets' ? Assets : Orders
|
||||
})
|
||||
const activePanel = computed(() => {
|
||||
return activeTab.value === 'assets' ? Assets : Orders
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-page {
|
||||
--wardrobe-border-color: #d9d4cd;
|
||||
--wardrobe-text-main: #232323;
|
||||
--wardrobe-text-secondary: #7a746d;
|
||||
--wardrobe-surface: #fffdf8;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
.wardrobe-page {
|
||||
--wardrobe-border-color: #d9d4cd;
|
||||
--wardrobe-text-main: #232323;
|
||||
--wardrobe-text-secondary: #7a746d;
|
||||
--wardrobe-surface: #fffdf8;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
|
||||
.wardrobe-hero {
|
||||
height: 14.8rem;
|
||||
// background-color: #f5f5f5;
|
||||
background: url('@/assets/images/background.png') no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background-color: rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
.wardrobe-hero__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 4rem;
|
||||
color: #232323;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
.wardrobe-hero {
|
||||
height: 14.8rem;
|
||||
// background-color: #f5f5f5;
|
||||
background: url('@/assets/images/background.png') no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background-color: rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
.wardrobe-hero__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 4rem;
|
||||
color: #232323;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
|
||||
.wardrobe-hero__subtitle {
|
||||
margin-top: 1rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
.wardrobe-hero__subtitle {
|
||||
margin-top: 1rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
|
||||
> .wardrobe-shell {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
> .wardrobe-shell {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
> .wardrobe-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
padding: 0 9rem;
|
||||
border-bottom: 0.1rem solid var(--wardrobe-border-color);
|
||||
background: #ffffff;
|
||||
> .wardrobe-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
padding: 0 9rem;
|
||||
border-bottom: 0.1rem solid var(--wardrobe-border-color);
|
||||
background: #ffffff;
|
||||
|
||||
> .wardrobe-tabs__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .wardrobe-tabs__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .wardrobe-tabs__item {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
padding: 0 1.8rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
color: #7d766f;
|
||||
cursor: pointer;
|
||||
width: 13.9rem;
|
||||
> .wardrobe-tabs__item {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
padding: 0 1.8rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
color: #7d766f;
|
||||
cursor: pointer;
|
||||
width: 13.9rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1.8rem;
|
||||
right: 1.8rem;
|
||||
bottom: -0.1rem;
|
||||
height: 0.2rem;
|
||||
background: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1.8rem;
|
||||
right: 1.8rem;
|
||||
bottom: -0.1rem;
|
||||
height: 0.2rem;
|
||||
background: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
color: var(--wardrobe-text-main);
|
||||
&.is-active {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
color: var(--wardrobe-text-main);
|
||||
|
||||
&::after {
|
||||
background: var(--wardrobe-text-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
background: var(--wardrobe-text-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .wardrobe-tabs__sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
> .wardrobe-tabs__sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
> .wardrobe-tabs__sort-label {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: #7d766f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> .wardrobe-tabs__sort-label {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: #7d766f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
width: 13rem;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
:deep(.el-select__wrapper) {
|
||||
min-height: 3.6rem;
|
||||
padding: 0 1.2rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.el-select__wrapper) {
|
||||
min-height: 3.6rem;
|
||||
padding: 0 1.2rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-select__selected-item) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-select__selected-item) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .wardrobe-shell__panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .wardrobe-shell__panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.wardrobe-sort-dropdown {
|
||||
.el-select-dropdown__list {
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user