111

src/views/SellerDashboard/BecomeSeller/index.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="become-seller">
+		<seller-header
+			title="Apply to Become a Seller"
+			tip="Join the Stylish Parade and start selling your design work"
+		/>
+		<div class="content">
+			<sellerReview v-if="isSubmit"></sellerReview>
+			<sellerReview v-else></sellerReview>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import sellerHeader from "../seller-header.vue"
+	import sellerReview from "./sellerReview.vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+	const isSubmit = ref(false)
+</script>
+<style scoped lang="less">
+	.become-seller {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		> .content {
+			margin-top: 4rem;
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+</style>

src/views/SellerDashboard/BecomeSeller/sellerReview.vue

@@ -0,0 +1,126 @@
+<template>
+	<div class="seller-review">
+		<img class="success" src="@/assets/images/seller/success-1.png" />
+		<div class="title">Application Submitted</div>
+		<div class="tip">
+			Our team will review your application and get back to you within 1–3 business days.
+			You'll receive a notification in your email once a decision has been made.
+		</div>
+		<div class="step-list">
+			<div v-for="v in list" :key="v.title" class="step-item">
+				<img v-show="!v.active" src="@/assets/images/seller/success-0.png" />
+				<img v-show="v.active" src="@/assets/images/seller/success-1.png" />
+				<div class="content">
+					<div class="title">{{ v.title }}</div>
+					<div class="tip">{{ v.tip }}</div>
+				</div>
+			</div>
+		</div>
+		<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+	const list = ref([
+		{
+			title: "Step 1: Submit Application",
+			tip: "Fill out the seller information form and agree to our terms",
+			active: true
+		},
+		{
+			title: "Step 2: Review & Verification",
+			tip: "Our team will review your application (typically 1-3 business days)",
+			active: false
+		},
+		{
+			title: "Step 3: Start Selling",
+			tip: "Once approved, access your seller dashboard and start listing products ",
+			active: false
+		}
+	])
+	const onBackToHome = () => {
+		router.push({ name: "home" })
+	}
+</script>
+<style scoped lang="less">
+	.seller-review {
+		margin: 0 auto;
+		width: 60rem;
+		height: 90%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 2.4rem;
+		> .success {
+			width: 10rem;
+			height: 10rem;
+			padding: 1.2rem;
+		}
+		> .title {
+			font-size: 2.2rem;
+			line-height: 130%;
+			text-align: center;
+			color: #000;
+		}
+		> .tip {
+			font-family: pingfang_medium;
+			font-size: 1.8rem;
+			line-height: 170%;
+			text-align: center;
+			color: #585858;
+		}
+		> .step-list {
+			margin: 2.6rem 0;
+			width: 100%;
+			padding: 1.6rem;
+			background-color: #f9f9f9;
+			display: flex;
+			flex-direction: column;
+			gap: 1.4rem;
+			border-radius: 1.2rem;
+			> .step-item {
+				display: flex;
+				> img {
+					width: 2rem;
+					height: 2rem;
+					margin: 0.2rem;
+					margin-right: 1.2rem;
+				}
+				> .content {
+					flex: 1;
+					font-size: 1.4rem;
+					> .title {
+						font-style: Bold;
+						color: #000;
+						line-height: 150%;
+					}
+					> .tip {
+						font-family: "pingfang_medium";
+						line-height: 170%;
+						color: #737373;
+					}
+				}
+			}
+		}
+		> .home-btn {
+			width: 31rem;
+			height: 6rem;
+			border-radius: 4rem;
+			font-size: 1.6rem;
+			color: #fff;
+			background-color: #000;
+			border: none;
+			cursor: pointer;
+			outline: none;
+			&:active {
+				opacity: 0.8;
+			}
+		}
+	}
+</style>