hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

top bar router

Browse source
This commit is contained in:
KUN1007 2023-05-11 02:08:46 +08:00
parent 636eb28643
commit d360c42180
8 changed files with 84 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/views/balance/Balance.vue
View file

@ -1,35 +1,11 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 文章部分 -->
<div class="article">
<!-- 页面标题 -->

86
src/views/kungalgame/KUNGalgame.vue
View file

@ -1,35 +1,28 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
interface asideBar {
index: number
name: string
router: string
}
const asideBarItem: asideBar[] = [
{ index: 1, name: '隐私政策', router: '/privacy' },
{ index: 2, name: '执行条例', router: '/regulations' },
{ index: 3, name: '更新日志', router: '/update-log' },
{ index: 4, name: '收支公示', router: '/balance' },
{ index: 5, name: '不萌记录', router: '/unmoe' },
{ index: 6, name: '加入我们', router: '/contacts' },
{ index: 7, name: '感谢名单', router: '/thanks-list' },
{ index: 8, name: '返回主页', router: '/' },
]
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 内容区容器 -->
<div class="content-container">
<!-- 内容区 -->
@ -41,16 +34,11 @@
<li>网站简介</li>
<li>运营理念</li>
<li>论坛规定</li>
<li class="skip">隐私政策</li>
<li class="skip">执行条例</li>
<li class="skip">更新日志</li>
<li class="skip">收支公示</li>
<li class="skip">不萌记录</li>
<li class="skip">联系我们</li>
<li class="skip">执行条例</li>
<li class="skip">感谢名单</li>
<li class="skip">加入我们</li>
<li class="skip">返回主页</li>
<li class="skip" v-for="kun in asideBarItem" :key="kun.index">
<router-link style="color: #218bff" :to="{ path: kun.router }">{{
kun.name
}}</router-link>
</li>
</ul>
</div>
<!-- 文章容器 -->
@ -58,7 +46,7 @@
<h1>关于我们</h1>
<br />
<br />
<h2 class="introduction">网站简介</h2>
<h2 id="introduction">网站简介</h2>
<p>
KUNGalgame 是由 <span class="skip">KUN（鲲）</span>个人发起的一个
galgame 论坛建设项目，目前正在<span class="skip">开发阶段</span>。
@ -139,7 +127,7 @@
</p>
<br />
<br />
<h2 class="principle">运营理念</h2>
<h2 id="principle">运营理念</h2>
<br />
<h3>1. 世界上最萌的 galgame 论坛</h3>
<p>
@ -180,7 +168,7 @@
字面意思，任何人永远不会为网站的任何虚拟货币（萌萌点）花钱，虚拟货币的数量取决于别人对你的赞赏，我们认为运营不起一个网站只能说明我们的经济有问题，直接关站即可，当然，我们提供
<span class="skip">赞助渠道</span>
</p>
<h2 class="regulations">论坛规定</h2>
<h2 id="stipulate">论坛规定</h2>
<p>
规定？不，我们<strong>没有规定</strong>，一切的规定取决于所有人共同的看法
</p>
@ -227,7 +215,7 @@
}
.root {
height: 100vh;
background-image: url(../img/bg/bg1.png);
background-image: url(@/assets/images/bg/bg1.png);
/* background-image: url(./img/bg/bg2.png; */
background-repeat: no-repeat;
background-position: center;
@ -284,7 +272,7 @@
align-items: center;
}
/* 侧边的单个项目 */
.aside > ul li {
.aside > ul > li {
width: 100%;
height: 40px;
display: flex;
@ -293,7 +281,7 @@
cursor: pointer;
}
/* 单个项目的 hover */
.aside > ul li:hover {
.aside > ul > li:hover {
background-color: @kungalgame-trans-blue-2;
}
/* 文章区距离侧边的距离 */
@ -332,9 +320,17 @@ p {
text-indent: 3em;
margin: 5px;
}
a {
display: block;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 被划出来的链接字体 */
.skip {
border-bottom: 1px solid @kungalgame-blue-4;
border-bottom: 1.5px solid @kungalgame-blue-4;
cursor: pointer;
color: @kungalgame-blue-4;
}

44
src/views/pool/Pool.vue
View file

@ -1,36 +1,12 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="content-wrapper">
<div class="visual-wrapper">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<a href="#"><img src="../img/favicon.png" alt="KUNgal" /></a>
<a href="#"><span>KUNgal</span></a>
</div>
<div class="top-bar">
<ul>
<li>回到主页</li>
<li>帖子发布</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<a href="#"><img src="../img/KUN.jpg" alt="KUN" /></a>
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 帖子池容器 -->
<div class="pool-container">
<!-- 帖子池顶部交互栏 -->
@ -344,6 +320,7 @@
<div class="kungalgame-right-bar">
<!-- 右侧部分 -->
<div class="kungalgame-right-bar-right">
<div class="triangle"></div>
<!-- 对帖子进行排序 -->
<div class="sort">
<div>排序</div>
@ -383,7 +360,7 @@
height: 1500px;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg6.png);
background-image: url(@/assets/images/bg/bg1.png);
/* background-image: url(./img/bg-dark.png; */
background-repeat: no-repeat;
background-position: center;
@ -563,6 +540,15 @@
.kungalgame-right-bar-right {
position: relative;
}
.triangle {
position: absolute;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-bottom-color: @kungalgame-trans-white-2;
top: 50px;
right: 14px;
}
/* 排序 */
.sort,
.top {

32
src/views/regulations/Regulations.vue
View file

@ -1,35 +1,11 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 总容器 -->
<div class="container">
<!-- 文章容器 -->

35
src/views/technology/Technology.vue
View file

@ -1,30 +1,11 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 内容区 -->
<div class="content">
<!-- 侧边的交互栏 -->
@ -565,7 +546,7 @@
height: 1500px;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg1.png);
background-image: url(@/assets/images/bg/bg1.png);
/* background-image: url(./img/bg/bg2.png; */
background-repeat: no-repeat;
background-position: center;
@ -589,7 +570,7 @@
background-color: @kungalgame-trans-white-5;
/* 全局字体颜色 */
color: @kungalgame-font-color-3;
border: 1px solid @kungalgame-trans-blue-1;
border: 1px solid @kungalgame-trans-blue-2;
border-radius: 5px;
}
/* 侧边的交互栏 */
@ -804,7 +785,7 @@
.topic:hover {
box-shadow: @shadow;
/* 放大、旋转 */
transform: scale(1.2 rotate(1deg));
transform: scale(1.2) rotate(1deg);
transition: 0.2s;
z-index: 7;
}
@ -958,7 +939,7 @@
background-color: @kungalgame-trans-blue-0;
backdrop-filter: blur(5px);
/* 放大、旋转回正 */
transform: scale(1.1 rotate(-1deg));
transform: scale(1.1) rotate(-1deg);
/* 完全不透明，可视 */
opacity: 1;
transition: 0.2s;

32
src/views/thanks-list/ThanksList.vue
View file

@ -1,36 +1,12 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<!-- 根容器 -->
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 内容区容器 -->
<div class="container">
<!-- 页面标题 -->

32
src/views/unmoe/Unmoe.vue
View file

@ -1,35 +1,11 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 内容区容器 -->
<div class="container">
<!-- 页面标题 -->

32
src/views/update-log/UpdateLog.vue
View file

@ -1,35 +1,11 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<!-- 头部 -->
<div class="header">
<!-- 顶部左侧交互栏 -->
<div class="nav-top">
<div class="kungal-info">
<img src="../img/favicon.png" alt="KUNgal" />
<span>KUNGalgame</span>
</div>
<div class="top-bar">
<ul>
<li>所有帖子</li>
<li>发布帖子</li>
<li>技术交流</li>
<li>数据统计</li>
<div class="top-bar-box"></div>
</ul>
</div>
</div>
<!-- 顶部全局搜索框 -->
<!-- <div class="top-search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
</div> -->
<!-- 用户个人信息 -->
<div class="kungalgamer-info">
<img src="../img/KUN.jpg" alt="KUN" />
<span>KUN</span>
</div>
</div>
<KUNGalgameTopBar />
<!-- 内容区容器 -->
<div class="content-container">
<!-- 内容区 -->