登录注册

src/pages/my-account/welcome.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="welcome">
+		<h3 class="title">Welcome to your account page</h3>
+		<div class="tip">
+			Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
+		</div>
+		<div class="buttons">
+			<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
+				<button custom>
+					<span class="iconfont" :class="v.icon"></span>
+					<span class="label">{{ v.label }}</span>
+				</button>
+			</router-link>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const navs = ref([
+		{
+			path: '/my-account/orders',
+			label: 'RECENT ORDERS',
+			icon: 'icon-orders'
+		},
+
+		{
+			path: '/my-account/address',
+			label: 'ADDRESSSES',
+			icon: 'icon-address'
+		},
+
+		{
+			path: '/my-account/details',
+			label: 'ACCOUNT DETAILS',
+			icon: 'icon-tubiao-'
+		}
+	])
+</script>
+
+<style scoped lang="less">
+	.welcome {
+		> .title {
+			font-weight: 600;
+			letter-spacing: 2px;
+			color: #222222;
+			font-size: 24px;
+			margin-bottom: 10px;
+		}
+		> .tip {
+			color: #333;
+			margin-bottom: 20px;
+		}
+		> .buttons {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> .link {
+				margin: 0 4px;
+				flex: 1;
+				text-decoration: none;
+			}
+		}
+	}
+</style>