66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Bell,
|
|
CirclePlus,
|
|
House,
|
|
Search,
|
|
Shop,
|
|
Tickets,
|
|
UserFilled,
|
|
Wallet,
|
|
} from "@element-plus/icons-vue";
|
|
|
|
const navItems = [
|
|
{ label: "首页", to: "/", icon: House },
|
|
{ label: "租号大厅", to: "/listings", icon: Shop },
|
|
{ label: "我的订单", to: "/orders", icon: Tickets },
|
|
{ label: "钱包", to: "/wallet", icon: Wallet },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pc-app-shell">
|
|
<header class="pc-topbar">
|
|
<RouterLink class="pc-brand" to="/">
|
|
<span class="pc-brand-mark">HFB</span>
|
|
<span class="pc-brand-text">哈夫币租号</span>
|
|
</RouterLink>
|
|
|
|
<nav class="pc-nav">
|
|
<RouterLink
|
|
v-for="item in navItems"
|
|
:key="item.to"
|
|
class="pc-nav-link"
|
|
:to="item.to"
|
|
>
|
|
<el-icon><component :is="item.icon" /></el-icon>
|
|
<span>{{ item.label }}</span>
|
|
</RouterLink>
|
|
</nav>
|
|
|
|
<div class="pc-search">
|
|
<el-icon><Search /></el-icon>
|
|
<input placeholder="搜索区服 / 段位 / 哈夫币数量" />
|
|
</div>
|
|
|
|
<div class="pc-user-actions">
|
|
<RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
|
|
<el-icon><Bell /></el-icon>
|
|
</RouterLink>
|
|
<RouterLink class="pc-login-link" to="/login">
|
|
<el-icon><UserFilled /></el-icon>
|
|
<span>登录/注册</span>
|
|
</RouterLink>
|
|
<RouterLink class="pc-post-link" to="/seller/listings/create">
|
|
<el-icon><CirclePlus /></el-icon>
|
|
<span>发布账号</span>
|
|
</RouterLink>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="pc-main">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|