65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<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>
|