feat: wardrobe页面
This commit is contained in:
257
src/views/wardrobe/Orders.vue
Normal file
257
src/views/wardrobe/Orders.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
||||
|
||||
interface StatusOption {
|
||||
key: OrderStatus
|
||||
label: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const statusOptions: StatusOption[] = [
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'paid', label: 'Paid' },
|
||||
{ key: 'unpaid', label: 'Unpaid' },
|
||||
{ key: 'cancelled', label: 'Cancelled' }
|
||||
]
|
||||
|
||||
const activeStatus = shallowRef<OrderStatus>('all')
|
||||
|
||||
const goToDigitalItems = () => {
|
||||
router.push('/digitalItem')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wardrobe-orders">
|
||||
<div class="orders-toolbar">
|
||||
<button
|
||||
v-for="status in statusOptions"
|
||||
:key="status.key"
|
||||
class="orders-toolbar__chip"
|
||||
type="button"
|
||||
:class="{ 'is-active': activeStatus === status.key }"
|
||||
@click="activeStatus = status.key"
|
||||
>
|
||||
{{ status.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="orders-empty">
|
||||
<div class="orders-empty__illustration" aria-hidden="true">
|
||||
<div class="orders-empty__hook"></div>
|
||||
<div class="orders-empty__hanger"></div>
|
||||
<div class="orders-empty__body"></div>
|
||||
<div class="orders-empty__hem"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="orders-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<button class="orders-empty__button" type="button" @click="goToDigitalItems">
|
||||
Explore Digital Items
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-orders {
|
||||
--wardrobe-border-color: #d9d4cd;
|
||||
--wardrobe-border-dark: #c8c0b4;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fffdf8;
|
||||
|
||||
> .orders-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 2.2rem 3rem 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .orders-toolbar__chip {
|
||||
height: 3rem;
|
||||
padding: 0 1.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
border-radius: 999rem;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
color: #8b8277;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
background: #232323;
|
||||
border-color: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem 7rem;
|
||||
text-align: center;
|
||||
|
||||
> .orders-empty__illustration {
|
||||
position: relative;
|
||||
width: 8.8rem;
|
||||
height: 10.4rem;
|
||||
margin-bottom: 2.4rem;
|
||||
opacity: 0.55;
|
||||
|
||||
> .orders-empty__hook {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-10%) rotate(-18deg);
|
||||
}
|
||||
|
||||
> .orders-empty__hanger {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 1.2rem;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border-top: 0.14rem solid #b8b1a5;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%) skewY(-12deg);
|
||||
}
|
||||
|
||||
> .orders-empty__body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 3.2rem;
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-top: 0;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
width: 1.7rem;
|
||||
height: 2.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -1.2rem;
|
||||
transform: skewY(22deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -1.2rem;
|
||||
transform: skewY(-22deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__hem {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0.8rem;
|
||||
width: 4.6rem;
|
||||
height: 2rem;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1.3rem;
|
||||
height: 100%;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -0.1rem;
|
||||
transform: skewX(24deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -0.1rem;
|
||||
transform: skewX(-24deg);
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
color: #8c8479;
|
||||
}
|
||||
|
||||
> .orders-empty__description {
|
||||
max-width: 32rem;
|
||||
margin: 1rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7;
|
||||
color: #b1a99e;
|
||||
}
|
||||
|
||||
> .orders-empty__button {
|
||||
margin-top: 2rem;
|
||||
height: 3.8rem;
|
||||
padding: 0 2.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06rem;
|
||||
text-transform: uppercase;
|
||||
color: #6d655b;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f8f3ea;
|
||||
border-color: var(--wardrobe-border-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.wardrobe-orders {
|
||||
> .orders-toolbar {
|
||||
padding: 2rem 2rem 0;
|
||||
}
|
||||
|
||||
> .orders-empty {
|
||||
padding: 5rem 2rem 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user