127 lines
2.8 KiB
Vue
127 lines
2.8 KiB
Vue
|
<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>
|