aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
李志鹏
2026-04-09 17:17:52 +08:00
parent 5e1d43b5a0
commit 7fdd22fe63
15 changed files with 624 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/views/SellerDashboard/MyOrders/index.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<div class="my-orders-index mini-scrollbar">
<div class="total-box">
<div class="total-item" v-for="v in totals" :key="v.title">
<div class="title">
<span class="icon"><svg-icon :name="v.icon" size="18" /></span>
<span class="label">{{ v.title }}</span>
</div>
<div class="value">{{ v.value }}</div>
</div>
</div>
<div class="filter-box">
<div class="left">
<div class="title">All Invoice</div>
<div class="tip">A summary of all completed transactions.</div>
</div>
<div class="right">
<div class="input">
<span class="icon"><svg-icon name="seller-search" size="20" /></span>
<input type="text" placeholder="Search by item name or order ID" />
</div>
</div>
</div>
<div class="table">
<div class="header">
<div class="order-id">Order ID</div>
<div class="item">Item</div>
<div class="price">Price</div>
<div class="buyer-username">Buyer Username</div>
<div class="date">Date</div>
</div>
<div class="body">
<div class="item" v-for="v in 10" :key="v">
<div class="order-id">SP897772698</div>
<div class="item">
<div class="images">
<img src="http://118.31.39.42:3000/falls/o-1.png" />
<img src="http://118.31.39.42:3000/falls/o-2.png" />
<span>+1 more</span>
</div>
<div class="titles">
<div>North Outfit Set</div>
<div>Heritage Layered Set</div>
<span>...</span>
</div>
</div>
<div class="price">HK$ 100.00</div>
<div class="buyer-username">@liuyuchen</div>
<div class="date">
<div>Mar 17, 2026</div>
<div>10:15 AM</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue"
const totals = ref([
{
icon: "seller-qiandaizi",
title: "Total Revenue",
value: "HK$ 54,32.00"
},
{
icon: "seller-gouwudai",
title: "Total Purchases",
value: "128"
},
{
icon: "seller-eye",
title: "Total Views",
value: "4,982"
}
])
</script>
<style scoped lang="less">
.my-orders-index {
position: relative;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 0 3rem;
margin: 0 3rem;
gap: 4rem;
> .total-box {
display: flex;
gap: 1.8rem;
> .total-item {
flex: 1;
padding: 2.4rem;
background-color: #f6f6f6;
border-radius: 1.2rem;
> .title {
display: flex;
align-items: center;
margin-bottom: 1.2rem;
gap: 1.2rem;
> .icon {
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: #ffffff;
border: 0.08rem solid #e4e4e4;
}
> .label {
font-size: 2rem;
color: #585858;
}
}
> .value {
font-family: "pingfang_heavy";
font-size: 3.6rem;
}
}
}
> .filter-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
> .left {
> .title {
font-family: "pingfang_heavy";
font-size: 2.4rem;
color: #000;
}
> .tip {
font-family: "pingfang_regular";
font-size: 1.4rem;
color: #999;
}
}
> .right {
> .input {
width: 30rem;
height: 4rem;
border-bottom: 0.15rem solid #000000;
display: flex;
align-items: center;
> .icon {
margin: 0 0.5rem;
}
> input {
padding: 0 2rem;
width: 0;
flex: 1;
outline: none;
border: none;
height: 100%;
font-family: "pingfang_regular";
font-size: 1.2rem;
color: #000;
&::placeholder {
color: #999999;
}
}
}
}
}
> .table {
width: 100%;
> .body > .item,
> .header {
display: flex;
align-items: center;
> div {
padding: 0 1.5rem;
flex: 1;
}
> .order-id {
flex: 2;
}
> .item {
flex: 3;
}
> .buyer-username {
flex: 1.5;
}
}
> .header {
position: sticky;
top: 0;
background-color: #f6f6f6;
height: 5.6rem;
border-width: 0.15rem 0 0.15rem 0;
border-style: solid;
border-color: #eaeaea;
> div {
font-size: 2rem;
color: #979797;
}
}
> .body {
> .item {
padding-top: 1.6rem;
padding-bottom: 1.6rem;
border-bottom: 0.1rem solid #f6f6f6;
color: #000;
> .order-id {
font-family: "pingfang_regular";
font-size: 1.8rem;
}
> .price {
font-family: "pingfang_medium";
font-size: 1.8rem;
}
> .buyer-username {
font-family: "pingfang_regular";
font-size: 1.8rem;
color: #666;
}
> .date {
font-family: "pingfang_regular";
font-size: 1.6rem;
color: #666;
}
> .item {
display: flex;
align-items: center;
gap: 3rem;
> .images {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
> img {
width: auto;
height: 10rem;
border-radius: 0.8rem;
border: 0.1rem solid #e9e9e9;
}
> span {
font-family: "pingfang_medium";
font-size: 1.4rem;
color: #666;
}
}
> .titles {
font-family: "pingfang_medium";
font-size: 1.8rem;
color: #000;
> span {
user-select: none;
}
}
}
}
}
}
}
</style>