aida_front/src/views/SellerDashboard/MyOrders/index.vue

<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>