fix router BUG, optimize settings panel
This commit is contained in:
KUN1007
parent
a6c8f443a9
commit
d30e7042e6
|
|
@ -109,10 +109,12 @@ onBeforeMount(() => {
|
|||
enter-active-class="animate__animated animate__jackInTheBox animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutRight animate__faster"
|
||||
>
|
||||
<KUNGalgameSettingsPanel
|
||||
v-if="showKUNGalgamePanel"
|
||||
:isTopicPage="isTopicPage"
|
||||
/>
|
||||
<KeepAlive>
|
||||
<KUNGalgameSettingsPanel
|
||||
v-if="showKUNGalgamePanel"
|
||||
:isTopicPage="isTopicPage"
|
||||
/>
|
||||
</KeepAlive>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ const kungalgamer: KUNRouteType[] = [
|
|||
},
|
||||
},
|
||||
{
|
||||
name: 'Topic',
|
||||
// 所有路由的命名是不能重复的！！！！
|
||||
name: 'KUNGalgamerTopic',
|
||||
path: 'topic',
|
||||
component: () => import('@/views/kungalgamer/content/Topic.vue'),
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
|
||||
// 导入背景图片
|
||||
import { currBackground } from '@/hooks/useBackgroundPicture'
|
||||
// 导入左侧交互部分
|
||||
import NavBar from './components/NavBar.vue'
|
||||
// 导入头部
|
||||
import Header from './components/Header.vue'
|
||||
// 导入通用 Footer
|
||||
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -10,23 +15,7 @@ import NavBar from './components/NavBar.vue'
|
|||
<KUNGalgameTopBar />
|
||||
<!-- 信息区域容器 -->
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="header">
|
||||
<!-- 用户头像 -->
|
||||
<div class="kungalgamer-avatar">
|
||||
<img src="@/assets/images/KUN.jpg" alt="KUN" />
|
||||
</div>
|
||||
<!-- 用户名 -->
|
||||
<div class="kungalgamer-name">
|
||||
<span>KUN</span>
|
||||
<span>KUNGalgame</span>
|
||||
</div>
|
||||
<!-- 用户萌萌点 -->
|
||||
<div class="moemoepoint">
|
||||
<div class="mp-progress"></div>
|
||||
<span>MP: 1007</span>
|
||||
</div>
|
||||
</div>
|
||||
<Header />
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<NavBar />
|
||||
|
|
@ -34,10 +23,7 @@ import NavBar from './components/NavBar.vue'
|
|||
</div>
|
||||
</div>
|
||||
<!-- 版权 -->
|
||||
<div class="copyright">
|
||||
<span>Copyright © 2023 KUNgalgame</span>
|
||||
<span>All rights reserved | Version 0.01</span>
|
||||
</div>
|
||||
<KUNGalgameFooter style="margin: 0 auto; padding-bottom: 17px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,98 +61,6 @@ import NavBar from './components/NavBar.vue'
|
|||
/* 用户页面的所有字体颜色 */
|
||||
color: $kungalgame-font-color-3;
|
||||
}
|
||||
/* 页面的头部 */
|
||||
.header {
|
||||
/* 固定高度 */
|
||||
height: 150px;
|
||||
/* 相对定位参考元素 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 用户名 */
|
||||
.kungalgamer-name {
|
||||
flex-grow: 2;
|
||||
width: 100%;
|
||||
/* 头部的颜色 */
|
||||
background-color: $kungalgame-trans-blue-0;
|
||||
align-items: center;
|
||||
span:nth-child(1) {
|
||||
font-family: serif;
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
/* 相对于 header 定位信息 */
|
||||
margin-left: 200px;
|
||||
margin-top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-family: serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 100px;
|
||||
color: $kungalgame-trans-white-6;
|
||||
font-style: italic;
|
||||
text-shadow: 2px 2px 2px $kungalgame-trans-white-8;
|
||||
}
|
||||
}
|
||||
/* 用户头像 */
|
||||
.kungalgamer-avatar {
|
||||
position: absolute;
|
||||
/* 头像的定位 */
|
||||
top: 5px;
|
||||
left: 50px;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 头像图片的属性 */
|
||||
.kungalgamer-avatar img {
|
||||
width: 140px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px 4px $kungalgame-trans-red-2;
|
||||
}
|
||||
/* 头像的 hover */
|
||||
.kungalgamer-avatar img:hover {
|
||||
animation: spin 1s;
|
||||
}
|
||||
@keyframes spin {
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
80% {
|
||||
box-shadow: 0px 0px 2px 7px $kungalgame-trans-red-2;
|
||||
}
|
||||
}
|
||||
/* 用户萌萌点 */
|
||||
.moemoepoint {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
/* 分割线 */
|
||||
border-top: 2px solid $kungalgame-blue-4;
|
||||
border-bottom: 1px solid $kungalgame-blue-4;
|
||||
/* 内 border 盒子 */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 用户的萌萌点进度 */
|
||||
.mp-progress {
|
||||
height: 100%;
|
||||
/* 这个数值会根据用户的萌萌点数增长，引起页面蓝色占比的变化 */
|
||||
width: 77%;
|
||||
background-color: $kungalgame-trans-blue-2;
|
||||
}
|
||||
/* 萌萌点进度提示数字 */
|
||||
.moemoepoint span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 17px;
|
||||
padding-right: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
/*
|
||||
|
||||
内容区
|
||||
|
|
@ -178,9 +72,4 @@ import NavBar from './components/NavBar.vue'
|
|||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
/* 版权 */
|
||||
.copyright {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,116 @@
|
|||
<script setup lang='ts'>
|
||||
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<div class="header">
|
||||
<!-- 用户头像 -->
|
||||
<div class="kungalgamer-avatar">
|
||||
<img src="@/assets/images/KUN.jpg" alt="KUN" />
|
||||
</div>
|
||||
<!-- 用户名 -->
|
||||
<div class="kungalgamer-name">
|
||||
<span>KUN</span>
|
||||
<span>KUNGalgame</span>
|
||||
</div>
|
||||
<!-- 用户萌萌点 -->
|
||||
<div class="moemoepoint">
|
||||
<div class="mp-progress"></div>
|
||||
<span>MP: 1007</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
/* 页面的头部 */
|
||||
.header {
|
||||
/* 固定高度 */
|
||||
height: 150px;
|
||||
/* 相对定位参考元素 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 用户名 */
|
||||
.kungalgamer-name {
|
||||
flex-grow: 2;
|
||||
width: 100%;
|
||||
/* 头部的颜色 */
|
||||
background-color: $kungalgame-trans-blue-0;
|
||||
align-items: center;
|
||||
span:nth-child(1) {
|
||||
font-family: serif;
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
/* 相对于 header 定位信息 */
|
||||
margin-left: 200px;
|
||||
margin-top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-family: serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 100px;
|
||||
color: $kungalgame-trans-white-6;
|
||||
font-style: italic;
|
||||
text-shadow: 2px 2px 2px $kungalgame-trans-white-8;
|
||||
}
|
||||
}
|
||||
/* 用户头像 */
|
||||
.kungalgamer-avatar {
|
||||
position: absolute;
|
||||
/* 头像的定位 */
|
||||
top: 5px;
|
||||
left: 50px;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 头像图片的属性 */
|
||||
.kungalgamer-avatar img {
|
||||
width: 140px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px 4px $kungalgame-trans-red-2;
|
||||
}
|
||||
/* 头像的 hover */
|
||||
.kungalgamer-avatar img:hover {
|
||||
animation: spin 1s;
|
||||
}
|
||||
@keyframes spin {
|
||||
50% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
80% {
|
||||
box-shadow: 0px 0px 2px 7px $kungalgame-trans-red-2;
|
||||
}
|
||||
}
|
||||
/* 用户萌萌点 */
|
||||
.moemoepoint {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
/* 分割线 */
|
||||
border-top: 2px solid $kungalgame-blue-4;
|
||||
border-bottom: 1px solid $kungalgame-blue-4;
|
||||
/* 内 border 盒子 */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 用户的萌萌点进度 */
|
||||
.mp-progress {
|
||||
height: 100%;
|
||||
/* 这个数值会根据用户的萌萌点数增长，引起页面蓝色占比的变化 */
|
||||
width: 77%;
|
||||
background-color: $kungalgame-trans-blue-2;
|
||||
}
|
||||
/* 萌萌点进度提示数字 */
|
||||
.moemoepoint span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 17px;
|
||||
padding-right: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,54 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
interface nav {
|
||||
index: number
|
||||
name: string
|
||||
router: string
|
||||
}
|
||||
|
||||
const navBar: nav[] = [
|
||||
{
|
||||
index: 1,
|
||||
name: '个人信息',
|
||||
router: '/kungalgamer/info',
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '邮箱密码',
|
||||
router: '/kungalgamer/password',
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '发过的帖',
|
||||
router: '/kungalgamer/topic',
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: '回过的贴',
|
||||
router: '/kungalgamer/topic',
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
name: '赞过的帖',
|
||||
router: '/kungalgamer/topic',
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
name: '推过的帖',
|
||||
router: '/kungalgamer/topic',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 左侧交互区 -->
|
||||
<div class="nav">
|
||||
<!-- 交互区的单个项目 -->
|
||||
<ul>
|
||||
<li><RouterLink to="/kungalgamer/info">个人信息</RouterLink></li>
|
||||
<li>
|
||||
<RouterLink to="/kungalgamer/password">邮箱密码</RouterLink>
|
||||
<li v-for="kun in navBar" :key="kun.index">
|
||||
<KeepAlive>
|
||||
<router-link :to="kun.router">{{ kun.name }}</router-link>
|
||||
</KeepAlive>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/kungalgamer/topic">发过的帖</RouterLink>
|
||||
</li>
|
||||
<li>回过的贴</li>
|
||||
<li>赞过的帖</li>
|
||||
<li>推过的帖</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,24 +65,26 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 左侧交互区的无需列表容器 */
|
||||
.nav > ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 列表中的单个项目 */
|
||||
.nav > ul li {
|
||||
height: 40px;
|
||||
background-color: $kungalgame-trans-blue-0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 单个项目的 hover */
|
||||
.nav > ul li:hover {
|
||||
background-color: $kungalgame-trans-blue-4;
|
||||
transition: 0.1s;
|
||||
& > ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
li {
|
||||
height: 40px;
|
||||
background-color: $kungalgame-trans-blue-0;
|
||||
display: flex;
|
||||
&:hover {
|
||||
background-color: $kungalgame-trans-blue-4;
|
||||
transition: 0.1s;
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue