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

COMPLETE REN!!!!!!!!!!!!!!!!!!!!!!!!!!! fix header

Browse source
This commit is contained in:
KUN1007 2023-05-12 23:13:31 +08:00
parent 6d38a7d5ea
commit b9b12fc2ce
20 changed files with 172 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/assets/css/color.less
View file

@ -1,10 +1,10 @@
/* 基本阴影 */
@shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05);
@kungalgame-shadow-0: 5px 5px 7px var(@kungalgame-trans-gray-4),
-5px -5px 7px var(@kungalgame-trans-white-1);
@kungalgame-shadow-1: 2px 2px 4px var(@kungalgame-trans-gray-4),
-2px -2px 4px var(@kungalgame-trans-white-1);
@kungalgame-shadow-0: 5px 5px 7px @kungalgame-trans-gray-4,
-5px -5px 7px @kungalgame-trans-white-1;
@kungalgame-shadow-1: 2px 2px 4px @kungalgame-trans-gray-4,
-2px -2px 4px @kungalgame-trans-white-1;
@kungalgame-font-color-0: #777777;
@kungalgame-font-color-1: #666666;
@kungalgame-font-color-2: #4d4d4d;

134
src/components/KUNGalgameSettingPanel.vue
View file

@ -1,96 +1,22 @@
<script setup lang="ts">
import loliData from '@/assets/images/ren/ren.json'
import { onMounted } from 'vue'
/* 随机数 */
function getRandomNum(number1: number, number2: number) {
return Math.floor(Math.random() * number2) + number1
}
/* 随机汗水 */
const randomSweat = getRandomNum(0, 1)
/* 随机眉毛 */
const randomBrow = getRandomNum(1, 18)
/* 随机眼睛 */
const randomEye = getRandomNum(19, 36)
/* 随机嘴巴 */
const randomMouth = getRandomNum(37, 56)
/* 随机腮红 */
const randomFace = getRandomNum(57, 62)
/* 随机衣服 */
const randomSkirt = getRandomNum(63, 72)
// /* 衣服1 */
// const randomSkirt1 = getRandomNum(63, 64)
// /* 衣服2 */
// const randomSkirt2 = getRandomNum(65, 66)
// /* 衣服3 */
// const randomSkirt3 = getRandomNum(67, 68)
// /* 衣服4 */
// const randomSkirt4 = getRandomNum(69, 70)
// /* 衣服5 */
// const randomSkirt5 = getRandomNum(71, 72)
interface Loli {
group_layer_id: number
height: number
layer_id: number
left: number
name: string
top: number
visible: number
width: number
}
let loliObj: Loli = {
group_layer_id: 0,
height: 0,
layer_id: 0,
left: 0,
name: '',
top: 0,
visible: 0,
width: 0,
}
const loli = {
lass: loliData[randomSkirt],
eye: loliData[randomEye],
brow: loliData[randomBrow],
mouth: loliData[randomBrow],
face: loliData[randomFace],
}
// 看板娘的图片文件路径
// const loliBody = require('`@/assets/images/ren/${loli.lass.layer_id}.png`')
// const loliEye = require(`@/assets/images/ren/${loli.eye.group_layer_id}.png`)
// const loliBrow = require(`@/assets/images/ren/${loli.brow.layer_id}.png`)
// const loliMouth = require(`@/assets/images/ren/${loli.mouth.layer_id}.png`)
// const loliFace = require(`@/assets/images/ren/${loli.face.layer_id}.png`)
onMounted(() => {
// 看板娘的图片页面定位
// 身体定位
const loliBodyLeft = loli.lass.left + 'px'
const loliBodyTop = loli.lass.top + 'px'
console.log(loliBodyLeft)
// 眼睛定位
const loliEyeLeft = loli.eye.left + 'px'
const loliEyeTop = loli.eye.top + 'px'
// 眉毛定位
const loliBrowLeft = loli.brow.left + 'px'
const loliBrowTop = loli.brow.top + 'px'
// 嘴巴定位
const loliMouthLeft = loli.mouth.left + 'px'
const loliMouthTop = loli.mouth.top + 'px'
// 腮红定位
const loliFaceLeft = loli.face.left + 'px'
const loliFaceTop = loli.face.top + 'px'
})
/* 导入 loli 数据 */
import {
loliBodyLeft,
loliBodyTop,
loliEyeLeft,
loliEyeTop,
loliBrowLeft,
loliBrowTop,
loliMouthLeft,
loliMouthTop,
loliFaceLeft,
loliFaceTop,
lass,
eye,
brow,
mouth,
face,
} from '@/utils/loli'
</script>
<template>
@ -103,11 +29,11 @@ onMounted(() => {
<!-- 看板娘 -->
<div class="container">
<!-- 身体 -->
<img class="lass" :src="loliBody" alt="ren" />
<img class="eye" :src="loliEye" alt="ren" />
<img class="brow" :src="loliBrow" alt="ren" />
<img class="mouth" :src="loliMouth" alt="ren" />
<img class="face" :src="loliFace" alt="ren" />
<img class="lass" :src="lass" alt="ren" />
<img class="eye" :src="eye" alt="ren" />
<img class="brow" :src="brow" alt="ren" />
<img class="mouth" :src="mouth" alt="ren" />
<img class="face" :src="face" alt="ren" />
</div>
</div>
</template>
@ -115,21 +41,23 @@ onMounted(() => {
<style lang="less" scoped>
.root {
width: 300px;
height: 100%;
top: 65px;
right: 0;
position: absolute;
background-color: aqua;
background-color: @kungalgame-trans-white-5;
backdrop-filter: blur(5px);
border-radius: 10px;
z-index: 1007;
overflow: hidden;
}
.container {
width: 500px;
height: 700px;
height: 100%;
margin: auto;
position: relative;
left: -148px;
top: -220px;
}
/* .lass {
.lass {
position: absolute;
left: v-bind(loliBodyLeft);
top: v-bind(loliBodyTop);
@ -153,5 +81,5 @@ onMounted(() => {
position: absolute;
left: v-bind(loliFaceLeft);
top: v-bind(loliFaceTop);
} */
}
</style>

12
src/components/KUNGalgameTopBar.vue
View file

@ -3,6 +3,7 @@ import KUNGalgameSettingsPanel from './KUNGalgameSettingPanel.vue'
import { Icon } from '@iconify/vue'
import { onBeforeMount, ref } from 'vue'
import 'animate.css'
import router from '@/router'
interface topBar {
index: number
name: string
@ -16,7 +17,7 @@ const topBarItem: topBar[] = [
{ index: 5, name: '返回主页', router: '/' },
]
// 初始不展示用户头像点击信息
const isShowInfo = ref(false)
let isShowInfo = ref(false)
// 初始进入页面 header 没有附加样式
let topicStyle = {}
@ -35,8 +36,6 @@ if (isTopicPage) {
topicStyle = {
top: 0,
position: 'sticky',
/* 设置可视区域内容不覆盖顶部 shadow */
'margin-bottom': '10px',
}
}
@ -45,6 +44,10 @@ let navItemNum = topBarItem.length
const navItemNumString = navItemNum + '00px'
// 用户点击头像时的操作
const handleClickAvatar = () => {
// isShowInfo.value = !isShowInfo.value
router.push('/kungalgamer')
}
// 用户点击网站设置时的操作
const handleSittingsClick = () => {}
@ -76,7 +79,7 @@ onBeforeMount(() => {})
<img
src="../assets/images/KUN.jpg"
alt="KUN"
@click="isShowInfo = !isShowInfo"
@click="handleClickAvatar"
/>
<div class="triangle" v-if="isShowInfo"></div>
<div class="kungalgamer" v-if="isShowInfo">
@ -104,6 +107,7 @@ onBeforeMount(() => {})
/* 相对于设置面板定位 */
position: relative;
z-index: 1007;
margin-bottom: 7px;
}
.nav-top {
display: flex;

91
src/utils/loli.ts Normal file
View file

@ -0,0 +1,91 @@
// 读取 JSON 文件数据
import loliData from '@/assets/images/ren/ren.json'
// 获取本地图片文件
const getAssetsFile = (url: number) => {
return new URL(`../assets/images/ren/${url}.png`, import.meta.url).href
}
/* 随机数 */
function getRandomNum(lowerValue: number, upperValue: number) {
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue)
}
/* 随机汗水 ？ */
// const randomSweat = getRandomNum(0, 1)
/* 随机眉毛 */
const randomBrow = getRandomNum(1, 18)
/* 随机眼睛 */
const randomEye = getRandomNum(19, 36)
/* 随机嘴巴 */
const randomMouth = getRandomNum(37, 56)
/* 随机腮红 */
const randomFace = getRandomNum(57, 62)
/* 随机衣服 */
const randomSkirt = getRandomNum(63, 72)
// 定义一个 loli 对象
const loli = {
lass: loliData[randomSkirt],
eye: loliData[randomEye],
brow: loliData[randomBrow],
mouth: loliData[randomMouth],
face: loliData[randomFace],
}
// 身体定位
const loliBodyLeft = loli.lass.left + 'px'
const loliBodyTop = loli.lass.top + 'px'
// 眼睛定位
const loliEyeLeft = loli.eye.left + 'px'
const loliEyeTop = loli.eye.top + 'px'
// 眉毛定位
const loliBrowLeft = loli.brow.left + 'px'
const loliBrowTop = loli.brow.top + 'px'
// 嘴巴定位
const loliMouthLeft = loli.mouth.left + 'px'
const loliMouthTop = loli.mouth.top + 'px'
// 腮红定位
const loliFaceLeft = loli.face.left + 'px'
const loliFaceTop = loli.face.top + 'px'
// 身体的图片资源链接
let lass = getAssetsFile(loli.lass.layer_id)
// 眼睛的图片资源链接
let eye = getAssetsFile(loli.eye.layer_id)
// 眉毛的图片资源链接
let brow = getAssetsFile(loli.brow.layer_id)
// 嘴巴的图片资源链接
let mouth = getAssetsFile(loli.mouth.layer_id)
// 腮红的图片资源链接
let face = getAssetsFile(loli.face.layer_id)
// 导出模块
export {
loliBodyLeft,
loliBodyTop,
loliEyeLeft,
loliEyeTop,
loliBrowLeft,
loliBrowTop,
loliMouthLeft,
loliMouthTop,
loliFaceLeft,
loliFaceTop,
lass,
eye,
brow,
mouth,
face,
}

2
src/views/Home/content/MainPageContent.vue
View file

@ -43,8 +43,6 @@ import MainPageArticle from './article/MainPageArticle.vue'
box-sizing: border-box;
height: 100%;
margin: 0 auto;
/* 设置可视内容区不覆盖顶部 shadow */
margin-top: 5px;
/* 可视内容区为弹性盒 */
display: flex;
/* 可视内容区居中 */

2
src/views/Home/content/article/header/ArticleHeader.vue
View file

@ -168,6 +168,8 @@ import { Icon } from '@iconify/vue'
/* 整体弹性 */
display: flex;
flex-shrink: 0;
/* 交互区距离外面半透明总容器的距离 */
margin-top: 5px;
}
/* 筛选、搜索帖子、更多 */
.nav-article-sort-container {

7
src/views/Home/content/aside/item/AsideItem.vue
View file

@ -1,5 +1,10 @@
<script setup lang="ts">
import router from '@/router'
import { Icon } from '@iconify/vue'
const handleClick = () => {
router.push('/rank')
}
</script>
<template>
@ -37,7 +42,7 @@ import { Icon } from '@iconify/vue'
</ul>
</div>
<div>其它游戏</div>
<div>排行榜</div>
<div @click="handleClick">排行榜</div>
<!-- 背景容器 -->
<div class="kungalgame-background">
背景设置

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

@ -296,7 +296,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
height: 100vh;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg1.png);
background-image: url('@/assets/images/bg/bg4.png');
/* background-image: url(./img/bg/bg2.png; */
background-repeat: no-repeat;
background-position: center;

19
src/views/edit/Edit.vue
View file

@ -19,7 +19,7 @@ import WangEditor from '@/components/WangEditor.vue'
</div>
</div>
<!-- 编辑器 -->
<WangEditor />
<WangEditor class="editor" />
</div>
<!-- 内容区的底部 -->
@ -77,24 +77,12 @@ import WangEditor from '@/components/WangEditor.vue'
</template>
<style lang="less" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
input:focus {
outline: none;
}
body::-webkit-scrollbar {
display: none;
}
.content-wrapper {
margin: 0 auto;
}
.root {
height: 100vh;
min-height: 1000px;
min-height: 1100px;
min-width: 900px;
display: flex;
flex-direction: column;
@ -107,9 +95,8 @@ body::-webkit-scrollbar {
/* 内容部分的总容器 */
.container {
width: 80%;
height: 100%;
margin: auto;
/* 距离顶部 header 的距离 */
margin-top: 7px;
/* 容器的阴影 */
box-shadow: @shadow;
background-color: @kungalgame-trans-white-2;

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

@ -233,7 +233,6 @@ const asideBarItem: asideBar[] = [
width: 90%;
/* 居中 */
margin: 0 auto;
margin-top: 17px;
padding: 7px;
/* 相对于版权定位 */
position: relative;

19
src/views/kungalgamer/KUNGalgamer.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</script>
<template>
<div class="root">
<KUNGalgameTopBar />
<!-- 信息区域容器 -->
<div class="container">
<!-- 页面头部 -->
@ -47,18 +50,6 @@
</template>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
input:focus {
outline: none;
}
*::-webkit-scrollbar {
display: none;
}
.root {
height: 100vh;
width: 100vw;
@ -66,7 +57,7 @@ input:focus {
min-height: 800px;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg1.png);
background-image: url('@/assets/images/bg/bg3.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

9
src/views/licence/Licence.vue
View file

@ -28,15 +28,6 @@
</template>
<style lang="less" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
*::-webkit-scrollbar {
display: none;
}
/* 根容器 */
.root {
height: 100vh;

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

@ -347,15 +347,6 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
</template>
<style lang="less" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
*::-webkit-scrollbar {
display: none;
}
.visual-wrapper {
height: 1500px;
display: flex;
@ -390,7 +381,6 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
backdrop-filter: blur(5px);
background-color: @kungalgame-trans-white-5;
border-radius: 7px;
margin-top: 7px;
}
/* 帖子池顶部交互栏 */
.pool-nav-bar {

36
src/views/rank/Rank.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="article">
<!-- 用户排行 -->
@ -973,8 +949,8 @@
background-size: cover;
min-width: 1000px;
min-height: 1000px;
font-family: "adobe-clean", "Source Sans Pro", -apple-system,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
/* 内容区 */
.article {

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

@ -102,7 +102,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
height: 1500px;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg1.png);
background-image: url('@/assets/images/bg/bg6.png');
/* background-image: url(./img/bg/bg2.png; */
background-repeat: no-repeat;
background-position: center;
@ -114,8 +114,6 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
/* 居中 */
margin: 0 auto;
padding: 10px;
/* 距离顶部固定交互栏的距离 */
margin-top: 17px;
/* 固定宽高 */
width: 700px;
height: 1300px;

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

@ -565,7 +565,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
/* 最小宽度 */
min-width: 700px;
/* 水平垂直居中 */
margin: auto;
margin: 0 auto;
display: flex;
background-color: @kungalgame-trans-white-5;
/* 全局字体颜色 */
@ -787,13 +787,13 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
/* 放大、旋转 */
transform: scale(1.2) rotate(1deg);
transition: 0.2s;
z-index: 7;
z-index: 1009;
}
/* 帖子边的光效 */
.topic:hover > span {
position: absolute;
display: block;
z-index: 7;
z-index: 1009;
}
.topic:hover > span:nth-child(1) {
filter: hue-rotate(0deg);

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

@ -103,13 +103,13 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
height: 100vh;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg6.png);
background-image: url('@/assets/images/bg/bg6.png');
/* background-image: url(./img/bg/bg2.png); */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-width: 1000px;
min-height: 1300px;
min-height: 1400px;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
@ -121,13 +121,13 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
margin: auto;
position: relative;
border-radius: 7px;
box-shadow: @kungalgame-shadow-0;
box-shadow: @shadow;
/* 竖直方向弹性分布 */
display: flex;
flex-direction: column;
align-items: center;
color: @kungalgame-font-color-3;
background-color: @kungalgame-trans-blue-0;
background-color: @kungalgame-trans-white-5;
backdrop-filter: blur(17px);
padding: 20px;
box-sizing: border-box;

10
src/views/topic/aside/KUNGalgameTopicAside.vue
View file

@ -6,10 +6,10 @@
页面被拆成 3 个大组件，这是左边的侧边栏部分
-->
<script setup lang="ts">
import TopicAsideNav from "./nav/TopicAsideNav.vue";
import TopicAsideSame from "./same/TopicAsideSame.vue";
import TopicAsideMaster from "./master/TopicAsideMaster.vue";
import TopicAsideFooter from "./footer/TopicAsideFooter.vue";
import TopicAsideNav from './nav/TopicAsideNav.vue'
import TopicAsideSame from './same/TopicAsideSame.vue'
import TopicAsideMaster from './master/TopicAsideMaster.vue'
import TopicAsideFooter from './footer/TopicAsideFooter.vue'
</script>
<template>
<div class="content-left-part">
@ -22,7 +22,7 @@ import TopicAsideFooter from "./footer/TopicAsideFooter.vue";
<style scoped>
/* 左侧内容区 */
.content-left-part {
top: 73px;
top: 70px;
position: sticky;
/* 左侧区域的总高度 */
height: 1000px;

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

@ -141,7 +141,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
height: 100vh;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg6.png);
background-image: url('@/assets/images/bg/bg6.png');
/* background-image: url(./img/bg/bg2.png); */
background-repeat: no-repeat;
background-position: center;

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

@ -177,7 +177,7 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
height: 100vh;
display: flex;
flex-direction: column;
background-image: url(../img/bg/bg6.png);
background-image: url('@/assets/images/bg/bg6.png');
/* background-image: url(./img/bg/bg2.png; */
background-repeat: no-repeat;
background-position: center;