|
|
@@ -1,8 +1,313 @@
|
|
|
-<script lang="ts" setup></script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { onMounted } from "vue";
|
|
|
+import menuData from "./menu.json";
|
|
|
+console.log(menuData);
|
|
|
+
|
|
|
+type MenuOption = {
|
|
|
+ id: string;
|
|
|
+ code: string;
|
|
|
+ name: string;
|
|
|
+ routeCode: string;
|
|
|
+};
|
|
|
+
|
|
|
+let curMenu = $ref("");
|
|
|
+let menuOptions = $ref<any[]>([]);
|
|
|
+
|
|
|
+const getMenus = () => {
|
|
|
+ menuOptions = menuData.map((item) => {
|
|
|
+ return { ...item };
|
|
|
+ });
|
|
|
+};
|
|
|
+const swithMenu = (menu: MenuOption) => {
|
|
|
+ // console.log(menu);
|
|
|
+ curMenu = menu.routeCode;
|
|
|
+ console.log(curMenu);
|
|
|
+};
|
|
|
+
|
|
|
+const breadcrumbs = $ref([
|
|
|
+ {
|
|
|
+ id: "1",
|
|
|
+ url: "1",
|
|
|
+ name: "考试",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const toModifyPwd = () => {
|
|
|
+ console.log("logout");
|
|
|
+};
|
|
|
+const toLogout = () => {
|
|
|
+ console.log("logout");
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getMenus();
|
|
|
+});
|
|
|
+</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>layout</div>
|
|
|
- <div><router-view></router-view></div>
|
|
|
+ <div class="home">
|
|
|
+ <!-- header -->
|
|
|
+ <div class="home-header">
|
|
|
+ <div class="header-infos">
|
|
|
+ <div class="header-info">
|
|
|
+ <n-popover placement="bottom" trigger="hover">
|
|
|
+ <template #trigger>
|
|
|
+ <p class="header-info-cont">手机端登录(Android)</p>
|
|
|
+ </template>
|
|
|
+ <div class="qr-list">
|
|
|
+ <n-tabs type="segment">
|
|
|
+ <n-tab-pane name="android" tab="下载安卓Apk">
|
|
|
+ <div class="qr-code">
|
|
|
+ <img src="" alt="" />
|
|
|
+ </div>
|
|
|
+ </n-tab-pane>
|
|
|
+ <n-tab-pane name="bindUser" tab="绑定用户">
|
|
|
+ <div class="qr-code">
|
|
|
+ <img src="" alt="" />
|
|
|
+ </div>
|
|
|
+ </n-tab-pane>
|
|
|
+ </n-tabs>
|
|
|
+ </div>
|
|
|
+ </n-popover>
|
|
|
+ </div>
|
|
|
+ <div class="header-info">
|
|
|
+ <n-popover placement="bottom" trigger="hover">
|
|
|
+ <template #trigger>
|
|
|
+ <p class="header-info-cont">username</p>
|
|
|
+ </template>
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-info-item">
|
|
|
+ <span>底照</span>
|
|
|
+ <img class="user-avatar" src="" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="user-info-item">
|
|
|
+ <span>学号</span>
|
|
|
+ <span>学号1212</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-info-item">
|
|
|
+ <span>身份证号</span>
|
|
|
+ <span>身份证号11</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-info-item">
|
|
|
+ <span>学习中心</span>
|
|
|
+ <span>学习中心11</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-info-item">
|
|
|
+ <n-button type="success" block @click="toModifyPwd"
|
|
|
+ >修改密码</n-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </n-popover>
|
|
|
+ </div>
|
|
|
+ <div class="header-info">
|
|
|
+ <n-button type="error" text @click="toLogout">退出登录</n-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- navs -->
|
|
|
+ <div class="home-navs">
|
|
|
+ <div class="home-logo">
|
|
|
+ <div class="home-logo-content">
|
|
|
+ <!-- <img v-if="schoolLogo" :src="schoolLogo" alt="知学知考" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-menu">
|
|
|
+ <div v-for="menu in menuOptions" :key="menu.id" class="home-menu-item">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'home-menu-content',
|
|
|
+ { 'is-active': curMenu === menu.routeCode },
|
|
|
+ ]"
|
|
|
+ @click="swithMenu(menu)"
|
|
|
+ >
|
|
|
+ <span>{{ menu.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- body -->
|
|
|
+ <div class="home-body">
|
|
|
+ <div class="home-breadcrumb">
|
|
|
+ <span class="breadcrumb-tips">
|
|
|
+ <span>当前所在位置：</span>
|
|
|
+ </span>
|
|
|
+ <div class="breadcrumb-body">
|
|
|
+ <n-breadcrumb>
|
|
|
+ <n-breadcrumb-item v-for="bread in breadcrumbs" :key="bread.url">
|
|
|
+ {{ bread.name }}
|
|
|
+ </n-breadcrumb-item>
|
|
|
+ </n-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- main -->
|
|
|
+ <div class="home-main">
|
|
|
+ <router-view></router-view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style scoped>
|
|
|
+.home {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: auto;
|
|
|
+}
|
|
|
+/* home-header */
|
|
|
+.home-header {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ padding-left: 180px;
|
|
|
+ background-color: var(--app-color-white);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.header-infos {
|
|
|
+ color: var(--app-color-text-light);
|
|
|
+ font-size: 0;
|
|
|
+ padding: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.header-info {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: var(--app-font-size);
|
|
|
+ position: relative;
|
|
|
+ padding: 0 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.header-info-cont:hover {
|
|
|
+ color: var(--app-color-primary);
|
|
|
+}
|
|
|
+.header-info:not(:last-child)::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ height: 16px;
|
|
|
+ width: 0;
|
|
|
+ border-left: 1px solid var(--app-color-border-dark);
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -8px;
|
|
|
+}
|
|
|
+.user-info {
|
|
|
+ width: 280px;
|
|
|
+}
|
|
|
+.user-info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid var(--app-color-border);
|
|
|
+}
|
|
|
+.user-avatar {
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ box-shadow: 0 0 1px var(--app-color-border);
|
|
|
+}
|
|
|
+.qr-list {
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+.qr-code {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+.qr-code > img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* home-navs */
|
|
|
+.home-navs {
|
|
|
+ position: absolute;
|
|
|
+ width: 180px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: var(--app-color-header-bg);
|
|
|
+ border-top-right-radius: var(--app-border-radius-large);
|
|
|
+ border-bottom-right-radius: var(--app-border-radius-large);
|
|
|
+}
|
|
|
+.home-logo {
|
|
|
+ width: 80px;
|
|
|
+ height: 68px;
|
|
|
+ margin: 30px auto;
|
|
|
+ background-color: var(--app-color-white);
|
|
|
+ border-radius: var(--app-border-radius);
|
|
|
+}
|
|
|
+.home-menu {
|
|
|
+ color: var(--app-color-white);
|
|
|
+}
|
|
|
+.home-menu-item {
|
|
|
+ margin: 5px 0;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.home-menu-content {
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: var(--app-border-radius);
|
|
|
+ line-height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.home-menu-content:hover {
|
|
|
+ color: var(--app-color-primary-light);
|
|
|
+}
|
|
|
+.home-menu-content.is-active {
|
|
|
+ background-color: var(--app-color-primary);
|
|
|
+ color: var(--app-color-white);
|
|
|
+}
|
|
|
+
|
|
|
+.home-menu-content::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid var(--app-color-white);
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.home-menu-content > span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+/* home-body */
|
|
|
+.home-body {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ overflow: auto;
|
|
|
+ background: var(--app-color-white);
|
|
|
+ z-index: 98;
|
|
|
+ padding-left: 180px;
|
|
|
+}
|
|
|
+.home-breadcrumb {
|
|
|
+ background-color: var(--app-color-body-bg);
|
|
|
+ padding: 10px 20px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: var(--app-color-text-light);
|
|
|
+}
|
|
|
+.breadcrumb-body {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.home-main {
|
|
|
+ padding: 20px 20px 50px;
|
|
|
+}
|
|
|
+</style>
|
zhangjie