reset
This commit is contained in:
kun1007
parent
6bc2d5d79c
commit
ea2c515f89
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -12,6 +12,7 @@
|
|||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"animate.css": "^4.1.1",
|
||||
"animejs": "^3.2.1",
|
||||
"axios": "^1.4.0",
|
||||
"pinia": "^2.0.35",
|
||||
"vue": "^3.2.47",
|
||||
|
|
@ -902,6 +903,11 @@
|
|||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
|
||||
},
|
||||
"node_modules/animejs": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
|
|
@ -2783,6 +2789,11 @@
|
|||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
|
||||
},
|
||||
"animejs": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"animate.css": "^4.1.1",
|
||||
"animejs": "^3.2.1",
|
||||
"axios": "^1.4.0",
|
||||
"pinia": "^2.0.35",
|
||||
"vue": "^3.2.47",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
import { type Ref, ref, handleError } from 'vue'
|
||||
import 'animate.css'
|
||||
interface topBar {
|
||||
name:string,
|
||||
router:string
|
||||
name: string
|
||||
router: string
|
||||
}
|
||||
const topBarItem: string[] = [
|
||||
'所有帖子',
|
||||
|
|
@ -197,11 +197,11 @@ const navItemNumString = navItemNum + '00px'
|
|||
border-color: transparent;
|
||||
border-bottom-color: @kungalgame-trans-white-2;
|
||||
top: 50px;
|
||||
right: 126px;
|
||||
right: 124px;
|
||||
}
|
||||
.kungalgamer {
|
||||
top: 70px;
|
||||
right: 96px;
|
||||
right: 95px;
|
||||
position: absolute;
|
||||
background-color: @kungalgame-trans-white-2;
|
||||
box-shadow: @shadow;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'Technology',
|
||||
path: '/technology',
|
||||
component: () => import('@/views/login/Login.vue'),
|
||||
component: () => import('@/views/technology/Technology.vue'),
|
||||
meta: {
|
||||
title: '技术交流',
|
||||
transition: 'animate__backInUp',
|
||||
|
|
@ -60,7 +60,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'Pool',
|
||||
path: '/pool',
|
||||
component: () => import('@/views/login/Login.vue'),
|
||||
component: () => import('@/views/pool/Pool.vue'),
|
||||
meta: {
|
||||
title: '帖子池',
|
||||
transition: 'animate__backInUp',
|
||||
|
|
@ -76,6 +76,156 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 403
|
||||
{
|
||||
name: '403',
|
||||
path: '/403',
|
||||
component: () => import('@/views/403/403.vue'),
|
||||
meta: {
|
||||
title: '禁止访问',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 404
|
||||
{
|
||||
name: '404',
|
||||
path: '/404',
|
||||
component: () => import('@/views/404/404.vue'),
|
||||
meta: {
|
||||
title: '错误',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 收支公示
|
||||
{
|
||||
name: 'Balance',
|
||||
path: '/balance',
|
||||
component: () => import('@/views/balance/Balance.vue'),
|
||||
meta: {
|
||||
title: '收支公示',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 联系我们
|
||||
{
|
||||
name: 'Contacts',
|
||||
path: '/contacts',
|
||||
component: () => import('@/views/contacts/Contacts.vue'),
|
||||
meta: {
|
||||
title: '联系我们',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 捐助我们
|
||||
{
|
||||
name: 'Donate',
|
||||
path: '/donate',
|
||||
component: () => import('@/views/donate/Donate.vue'),
|
||||
meta: {
|
||||
title: '捐助我们',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 编辑页面
|
||||
{
|
||||
name: 'Edit',
|
||||
path: '/edit',
|
||||
component: () => import('@/views/edit/Edit.vue'),
|
||||
meta: {
|
||||
title: '编辑',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 用户协议
|
||||
{
|
||||
name: 'Licence',
|
||||
path: '/kungalgame',
|
||||
component: () => import('@/views/licence/Licence.vue'),
|
||||
meta: {
|
||||
title: '用户协议',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 隐私政策
|
||||
{
|
||||
name: 'Privacy',
|
||||
path: '/privacy',
|
||||
component: () => import('@/views/privacy/Privacy.vue'),
|
||||
meta: {
|
||||
title: '隐私政策',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 排行榜
|
||||
{
|
||||
name: 'Rank',
|
||||
path: '/rank',
|
||||
component: () => import('@/views/rank/Rank.vue'),
|
||||
meta: {
|
||||
title: '排行榜',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 重定向页面
|
||||
{
|
||||
name: 'Redirect',
|
||||
path: '/redirect',
|
||||
component: () => import('@/views/redirect/Redirect.vue'),
|
||||
meta: {
|
||||
title: '帖子池',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 执行条例
|
||||
{
|
||||
name: 'Regulations',
|
||||
path: '/regulations',
|
||||
component: () => import('@/views/regulations/Regulations.vue'),
|
||||
meta: {
|
||||
title: '执行条例（试行）',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 感谢名单
|
||||
{
|
||||
name: 'ThanksList',
|
||||
path: '/thanks-list',
|
||||
component: () => import('@/views/thanks-list/ThanksList.vue'),
|
||||
meta: {
|
||||
title: '感谢名单',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 不萌萌页
|
||||
{
|
||||
name: 'Unmoe',
|
||||
path: '/unmoe',
|
||||
component: () => import('@/views/unmoe/Unmoe.vue'),
|
||||
meta: {
|
||||
title: '不萌萌',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 更新日志页
|
||||
{
|
||||
name: 'UpdateLog',
|
||||
path: '/update-log',
|
||||
component: () => import('@/views/update-log/UpdateLog.vue'),
|
||||
meta: {
|
||||
title: '更新日志',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
// KUNGalgame 用户页
|
||||
{
|
||||
name: 'KUNGalgamer',
|
||||
path: '/kungalgamer',
|
||||
component: () => import('@/views/kungalgamer/KUNGalgamer.vue'),
|
||||
meta: {
|
||||
title: '用户页',
|
||||
transition: 'animate__backInUp',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -35,30 +35,7 @@
|
|||
<li>推过的帖</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<!-- 更改邮箱 -->
|
||||
<div class="change-mail change-pwd">
|
||||
<form class="mail-form pwd-form">
|
||||
<div>你当前的邮箱是: kun@kungalgame.com</div>
|
||||
<div>更改邮箱:</div>
|
||||
<div>请输入你的新邮箱: <input type="text" /></div>
|
||||
<button>点击发送邮箱验证码</button>
|
||||
<div>请输入你的验证码: <input type="text" /></div>
|
||||
<button>确定更改邮箱</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 用户更改密码 -->
|
||||
<div class="change-pwd">
|
||||
<form class="pwd-form">
|
||||
<div>更改密码:</div>
|
||||
<div>请输入你的旧密码: <input type="password" /></div>
|
||||
<div>请输入你的新密码: <input type="password" /></div>
|
||||
<div>请再次输入新密码: <input type="password" /></div>
|
||||
<button>确定更改密码</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 版权 -->
|
||||
|
|
@ -227,6 +204,9 @@ input:focus {
|
|||
background-color: @kungalgame-trans-red-0;
|
||||
border-right: 1px solid @kungalgame-blue-4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 左侧交互区的无需列表容器 */
|
||||
.nav > ul {
|
||||
|
|
@ -247,58 +227,6 @@ input:focus {
|
|||
background-color: @kungalgame-trans-blue-4;
|
||||
transition: 0.1s;
|
||||
}
|
||||
/* 内容区 */
|
||||
.article {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 更改按钮距离签名的距离 */
|
||||
.change-pwd > div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* 用户发帖有关信息 */
|
||||
.kungalgame-topic ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 密码信息 */
|
||||
.pwd-form > div {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
/* 密码输入框 */
|
||||
.pwd-form input {
|
||||
height: 16px;
|
||||
padding: 2px;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-white-5;
|
||||
}
|
||||
.pwd-form input:focus {
|
||||
box-shadow: 0px 0px 3px @kungalgame-blue-4;
|
||||
}
|
||||
/* 更改密码 button */
|
||||
.pwd-form button {
|
||||
width: 304px;
|
||||
border: 1px solid @kungalgame-red-4;
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-form button:hover {
|
||||
background-color: @kungalgame-trans-red-4;
|
||||
}
|
||||
.pwd-form button:active {
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
}
|
||||
/* 更改邮箱 */
|
||||
.change-mail {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
.mail-form button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* 版权 */
|
||||
.copyright {
|
||||
margin: 0 auto;
|
||||
100
src/views/kungalgamer/content/Info.vue
Normal file
100
src/views/kungalgamer/content/Info.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<!-- 用户个人信息 -->
|
||||
<div class="kungalgamer-info">
|
||||
<!-- 用户基本信息 -->
|
||||
<ul class="kungalgamer-basic">
|
||||
<li>
|
||||
<!-- 用户名 -->
|
||||
<span>用户名: KUN</span>
|
||||
<!-- 萌萌点 -->
|
||||
<span>moemoepoint: 1007</span>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 注册序号 -->
|
||||
<span>注册序号: 1007</span>
|
||||
<!-- 注册时间 -->
|
||||
<span>注册时间: 2019/10/07</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 用户签名 -->
|
||||
<ul class="kungalgamer-sign">
|
||||
<div>
|
||||
<div>签名:</div>
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<!-- 更改签名 -->
|
||||
<div class="change-btn">
|
||||
<button>更改签名</button>
|
||||
<button>确定更改</button>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 内容区 */
|
||||
.article {
|
||||
flex-grow: 1;
|
||||
padding: 7px 27px;
|
||||
}
|
||||
/* 用户个人信息 */
|
||||
.kungalgamer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 用户基本信息 */
|
||||
.kungalgamer-basic {
|
||||
display: flex;
|
||||
}
|
||||
/* 对单个基本信息设置间距 */
|
||||
.kungalgamer-basic > li {
|
||||
/* 基本信息距离用户签名的距离 */
|
||||
margin-bottom: 27px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.kungalgamer-basic > li:nth-child(2) {
|
||||
margin-left: 77px;
|
||||
}
|
||||
.kungalgamer-basic span:nth-child(2) {
|
||||
margin-top: 7px;
|
||||
}
|
||||
/* 用户签名 */
|
||||
.kungalgamer-sign {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 更改签名 */
|
||||
.change-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* 用户更改签名的按钮 */
|
||||
.change-btn button {
|
||||
height: 30px;
|
||||
width: 49%;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-blue-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.change-btn button:hover {
|
||||
background-color: @kungalgame-trans-blue-4;
|
||||
}
|
||||
.change-btn button:active {
|
||||
background-color: @kungalgame-trans-blue-0;
|
||||
}
|
||||
</style>
|
||||
77
src/views/kungalgamer/content/Password.vue
Normal file
77
src/views/kungalgamer/content/Password.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<!-- 更改邮箱 -->
|
||||
<div class="change-mail change-pwd">
|
||||
<form class="mail-form pwd-form">
|
||||
<div>你当前的邮箱是: kun@kungalgame.com</div>
|
||||
<div>更改邮箱:</div>
|
||||
<div>请输入你的新邮箱: <input type="text" /></div>
|
||||
<button>点击发送邮箱验证码</button>
|
||||
<div>请输入你的验证码: <input type="text" /></div>
|
||||
<button>确定更改邮箱</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 用户更改密码 -->
|
||||
<div class="change-pwd">
|
||||
<form class="pwd-form">
|
||||
<div>更改密码:</div>
|
||||
<div>请输入你的旧密码: <input type="password" /></div>
|
||||
<div>请输入你的新密码: <input type="password" /></div>
|
||||
<div>请再次输入新密码: <input type="password" /></div>
|
||||
<button>确定更改密码</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 内容区 */
|
||||
.article {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 更改按钮距离签名的距离 */
|
||||
.change-pwd > div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* 密码信息 */
|
||||
.pwd-form > div {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
/* 密码输入框 */
|
||||
.pwd-form input {
|
||||
height: 16px;
|
||||
padding: 2px;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-white-5;
|
||||
}
|
||||
.pwd-form input:focus {
|
||||
box-shadow: 0px 0px 3px @kungalgame-blue-4;
|
||||
}
|
||||
/* 更改密码 button */
|
||||
.pwd-form button {
|
||||
width: 304px;
|
||||
border: 1px solid @kungalgame-red-4;
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-form button:hover {
|
||||
background-color: @kungalgame-trans-red-4;
|
||||
}
|
||||
.pwd-form button:active {
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
}
|
||||
/* 更改邮箱 */
|
||||
.change-mail {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
.mail-form button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
42
src/views/kungalgamer/content/SingleTopic.vue
Normal file
42
src/views/kungalgamer/content/SingleTopic.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- 单个帖子 -->
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 单个帖子的样式 */
|
||||
.topic {
|
||||
width: 100%;
|
||||
/* 单个帖子高度 */
|
||||
height: 30px;
|
||||
/* 帖子之间的距离 */
|
||||
padding: 2px;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid @kungalgame-blue-1;
|
||||
box-sizing: border-box;
|
||||
border-left: 2px solid @kungalgame-blue-4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.topic:hover {
|
||||
border-bottom: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-blue-1;
|
||||
}
|
||||
/* 单个帖子的标题 */
|
||||
.topic-title {
|
||||
/* 单行显示，溢出省略号 */
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
36
src/views/kungalgamer/content/Topic.vue
Normal file
36
src/views/kungalgamer/content/Topic.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import SingleTopic from './SingleTopic.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<SingleTopic />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 内容区 */
|
||||
.article {
|
||||
width: 50%;
|
||||
flex-grow: 1;
|
||||
padding: 7px 27px;
|
||||
/* 竖直弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 溢出显示滚动条 */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 滚动条的样式 */
|
||||
.article::-webkit-scrollbar {
|
||||
display: inline;
|
||||
width: 4px;
|
||||
height: 0;
|
||||
background-color: @kungalgame-red-2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.article::-webkit-scrollbar-thumb {
|
||||
background: @kungalgame-blue-4;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="root">
|
||||
<!-- 信息区域容器 -->
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="header">
|
||||
<!-- 用户头像 -->
|
||||
<div class="kungalgamer-avatar">
|
||||
<img src="../img/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>
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<!-- 左侧交互区 -->
|
||||
<div class="nav">
|
||||
<!-- 交互区的单个项目 -->
|
||||
<ul>
|
||||
<li>个人信息</li>
|
||||
<li>邮箱密码</li>
|
||||
<li>发过的贴</li>
|
||||
<li>回过的贴</li>
|
||||
<li>赞过的帖</li>
|
||||
<li>推过的帖</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<!-- 用户个人信息 -->
|
||||
<div class="kungalgamer-info">
|
||||
<!-- 用户基本信息 -->
|
||||
<ul class="kungalgamer-basic">
|
||||
<li>
|
||||
<!-- 用户名 -->
|
||||
<span>用户名: KUN</span>
|
||||
<!-- 萌萌点 -->
|
||||
<span>moemoepoint: 1007</span>
|
||||
</li>
|
||||
<li>
|
||||
<!-- 注册序号 -->
|
||||
<span>注册序号: 1007</span>
|
||||
<!-- 注册时间 -->
|
||||
<span>注册时间: 2019/10/07</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 用户签名 -->
|
||||
<ul class="kungalgamer-sign">
|
||||
<div>
|
||||
<div>签名:</div>
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<!-- 更改签名 -->
|
||||
<div class="change-btn">
|
||||
<button>更改签名</button>
|
||||
<button>确定更改</button>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 版权 -->
|
||||
<div class="copyright">
|
||||
<span>Copyright © 2023 KUNgalgame</span>
|
||||
<span>All rights reserved | Version 0.01</span>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
min-width: 960px;
|
||||
min-height: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url(../img/bg/bg1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 页面头部 */
|
||||
.container {
|
||||
/* 内容区占整个页面的比例 */
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
/* 内容区的最大宽度和高度 */
|
||||
max-width: 1350px;
|
||||
max-width: 1200px;
|
||||
/* 背景色和边框阴影 */
|
||||
background-color: @kungalgame-trans-white-2;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
box-shadow: @shadow;
|
||||
border-radius: 7px;
|
||||
/* 居中 */
|
||||
margin: auto;
|
||||
/* 竖直方向弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 用户页面的所有字体颜色 */
|
||||
color: @kungalgame-font-color-3;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 页面的头部 */
|
||||
.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;
|
||||
}
|
||||
/* 用户名字的位置 */
|
||||
.kungalgamer-name span:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
/* 相对于 header 定位信息 */
|
||||
margin-left: 200px;
|
||||
margin-top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
.kungalgamer-name span:nth-child(2) {
|
||||
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;
|
||||
}
|
||||
/*
|
||||
|
||||
内容区
|
||||
|
||||
*/
|
||||
.content {
|
||||
/* 使帖子不溢出 */
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
/* 左侧交互区 */
|
||||
.nav {
|
||||
/* 固定宽度 */
|
||||
height: 100%;
|
||||
width: 120px;
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
border-right: 1px solid @kungalgame-blue-4;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
/* 内容区 */
|
||||
.article {
|
||||
flex-grow: 1;
|
||||
padding: 7px 27px;
|
||||
}
|
||||
/* 用户个人信息 */
|
||||
.kungalgamer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 用户基本信息 */
|
||||
.kungalgamer-basic {
|
||||
display: flex;
|
||||
}
|
||||
/* 对单个基本信息设置间距 */
|
||||
.kungalgamer-basic > li {
|
||||
/* 基本信息距离用户签名的距离 */
|
||||
margin-bottom: 27px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.kungalgamer-basic > li:nth-child(2) {
|
||||
margin-left: 77px;
|
||||
}
|
||||
.kungalgamer-basic span:nth-child(2) {
|
||||
margin-top: 7px;
|
||||
}
|
||||
/* 用户签名 */
|
||||
.kungalgamer-sign {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 更改签名 */
|
||||
.change-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* 用户更改签名的按钮 */
|
||||
.change-btn button {
|
||||
height: 30px;
|
||||
width: 49%;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-blue-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.change-btn button:hover {
|
||||
background-color: @kungalgame-trans-blue-4;
|
||||
}
|
||||
.change-btn button:active {
|
||||
background-color: @kungalgame-trans-blue-0;
|
||||
}
|
||||
/* 更改按钮距离签名的距离 */
|
||||
.change-pwd > div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* 用户发帖有关信息 */
|
||||
.kungalgame-topic ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 版权 */
|
||||
.copyright {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,444 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="root">
|
||||
<!-- 信息区域容器 -->
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="header">
|
||||
<!-- 用户头像 -->
|
||||
<div class="kungalgamer-avatar">
|
||||
<img src="../img/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>
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<!-- 左侧交互区 -->
|
||||
<div class="nav">
|
||||
<!-- 交互区的单个项目 -->
|
||||
<ul>
|
||||
<li>个人信息</li>
|
||||
<li>邮箱密码</li>
|
||||
<li>发过的贴</li>
|
||||
<li>回过的贴</li>
|
||||
<li>赞过的帖</li>
|
||||
<li>推过的帖</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="article">
|
||||
<!-- 单个帖子 -->
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<div class="topic-title">
|
||||
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
|
||||
</div>
|
||||
<div class="topic-time">2019/10/7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 版权 -->
|
||||
<div class="copyright">
|
||||
<span>Copyright © 2023 KUNgalgame</span>
|
||||
<span>All rights reserved | Version 0.01</span>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
min-width: 960px;
|
||||
min-height: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url(../img/bg/bg1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 页面头部 */
|
||||
.container {
|
||||
/* 内容区占整个页面的比例 */
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
/* 内容区的最大宽度和高度 */
|
||||
max-width: 1350px;
|
||||
max-width: 1200px;
|
||||
/* 背景色和边框阴影 */
|
||||
background-color: @kungalgame-trans-white-2;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
box-shadow: @shadow;
|
||||
border-radius: 7px;
|
||||
/* 居中 */
|
||||
margin: auto;
|
||||
/* 竖直方向弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 用户页面的所有字体颜色 */
|
||||
color: @kungalgame-font-color-3;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 页面的头部 */
|
||||
.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;
|
||||
}
|
||||
/* 用户名字的位置 */
|
||||
.kungalgamer-name span:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
/* 相对于 header 定位信息 */
|
||||
margin-left: 200px;
|
||||
margin-top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
.kungalgamer-name span:nth-child(2) {
|
||||
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;
|
||||
}
|
||||
/*
|
||||
|
||||
内容区
|
||||
|
||||
*/
|
||||
.content {
|
||||
/* 使帖子不溢出 */
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
/* 左侧交互区 */
|
||||
.nav {
|
||||
/* 固定宽度 */
|
||||
height: 100%;
|
||||
width: 120px;
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
border-right: 1px solid @kungalgame-blue-4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 左侧交互区的无需列表容器 */
|
||||
.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;
|
||||
}
|
||||
/* 内容区 */
|
||||
.article {
|
||||
width: 50%;
|
||||
flex-grow: 1;
|
||||
padding: 7px 27px;
|
||||
/* 竖直弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 溢出显示滚动条 */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 滚动条的样式 */
|
||||
.article::-webkit-scrollbar {
|
||||
display: inline;
|
||||
width: 4px;
|
||||
height: 0;
|
||||
background-color: @kungalgame-red-2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.article::-webkit-scrollbar-thumb {
|
||||
background: @kungalgame-blue-4;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* 单个帖子的样式 */
|
||||
.topic {
|
||||
width: 100%;
|
||||
/* 单个帖子高度 */
|
||||
height: 30px;
|
||||
/* 帖子之间的距离 */
|
||||
padding: 2px;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid @kungalgame-blue-1;
|
||||
box-sizing: border-box;
|
||||
border-left: 2px solid @kungalgame-blue-4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.topic:hover {
|
||||
border-bottom: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-blue-1;
|
||||
}
|
||||
/* 单个帖子的标题 */
|
||||
.topic-title {
|
||||
/* 单行显示，溢出省略号 */
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* 版权 */
|
||||
.copyright {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue