Settings
This commit is contained in:
KUN1007
parent
b9b12fc2ce
commit
0064c3429b
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
/* 导入 loli 数据 */
|
||||
import {
|
||||
loliBodyLeft,
|
||||
|
|
@ -21,13 +22,68 @@ import {
|
|||
|
||||
<template>
|
||||
<div class="root">
|
||||
<div class="title">设置面板</div>
|
||||
<div class="mode">白天 / 黑夜切换</div>
|
||||
<div class="main">主页页面宽度设置</div>
|
||||
<div class="background">论坛背景设置</div>
|
||||
<div class="reset">恢复默认设置</div>
|
||||
<!-- 看板娘 -->
|
||||
<div class="container">
|
||||
<div class="title">设置面板</div>
|
||||
<div class="mode">
|
||||
<span>模式切换</span>
|
||||
<div class="mode-container">
|
||||
<li>
|
||||
<Icon
|
||||
class="sun"
|
||||
icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Icon
|
||||
class="moon"
|
||||
icon="line-md:sunny-outline-to-moon-loop-transition"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>主页页面宽度设置</span>
|
||||
<div class="page-width">
|
||||
<span>61.8%</span><input class="main" type="range" /><span>90%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kungalgame-background">
|
||||
背景设置
|
||||
<ul class="kungalgame-background-container">
|
||||
<li>
|
||||
<span>使用我们的预设的背景</span>
|
||||
<!-- 预设背景集 -->
|
||||
<ul class="kungalgame-reset-bg">
|
||||
<li><img src="@/assets/images/bg/bg1-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg2-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg3-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg4-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg5-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg6-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg7-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg8-m.png" /></li>
|
||||
<li><img src="@/assets/images/bg/bg9-m.png" /></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- 用户自定义背景 -->
|
||||
<li>
|
||||
<span>自定义背景</span>
|
||||
<div class="kungalgamer-bg">
|
||||
<span>请在这里粘贴图片url</span>
|
||||
<div class="bg-url-input">
|
||||
<input type="text" required />
|
||||
<button>确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fix-loli">是否固定看板娘</div>
|
||||
<div class="reset">恢复默认设置</div>
|
||||
</div>
|
||||
<!-- 看板娘 -->
|
||||
<div class="loli">
|
||||
<!-- 身体 -->
|
||||
<img class="lass" :src="lass" alt="ren" />
|
||||
<img class="eye" :src="eye" alt="ren" />
|
||||
|
|
@ -41,7 +97,7 @@ import {
|
|||
<style lang="less" scoped>
|
||||
.root {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
height: 1100px;
|
||||
top: 65px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
|
@ -49,9 +105,127 @@ import {
|
|||
backdrop-filter: blur(5px);
|
||||
border-radius: 10px;
|
||||
z-index: 1007;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
margin: 10px;
|
||||
font-size: 17px;
|
||||
& > div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 23px;
|
||||
}
|
||||
.mode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mode-container {
|
||||
font-size: 25px;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
li:nth-child(1) {
|
||||
color: @kungalgame-red-4;
|
||||
}
|
||||
li:nth-child(2) {
|
||||
color: @kungalgame-blue-4;
|
||||
}
|
||||
}
|
||||
.page-width {
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
/* 背景设置 */
|
||||
.kungalgame-background-container {
|
||||
display: block;
|
||||
/* 背景菜单的高度 */
|
||||
height: 300px;
|
||||
top: 100%;
|
||||
left: 0%;
|
||||
background-color: @kungalgame-blue-0;
|
||||
box-shadow: 1px 2px 1px 1px @kungalgame-trans-red-3;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
color: @kungalgame-font-color-3;
|
||||
}
|
||||
/* 背景容器的标题字体 */
|
||||
.kungalgame-background-container span {
|
||||
height: 30px;
|
||||
/* 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 背景图片略缩图三行三列 grid */
|
||||
.kungalgame-reset-bg {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 80px);
|
||||
grid-template-rows: repeat(3, 50px);
|
||||
color: @kungalgame-font-color-3;
|
||||
position: relative;
|
||||
/* 距离下方区域的距离 */
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
/* 单个图片居中 */
|
||||
.kungalgame-reset-bg li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 单个图片的距离 */
|
||||
.kungalgame-reset-bg img {
|
||||
width: 70px;
|
||||
}
|
||||
/* 图片的 hover */
|
||||
.kungalgame-reset-bg img:hover {
|
||||
width: 200px;
|
||||
transition: 0.2s;
|
||||
z-index: 7;
|
||||
}
|
||||
.kungalgamer-bg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* url 的粘贴框 */
|
||||
.bg-url-input {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.bg-url-input input {
|
||||
padding-left: 5px;
|
||||
height: 25px;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
}
|
||||
/* 粘贴框的 focus */
|
||||
.bg-url-input input:focus {
|
||||
outline: none;
|
||||
background-color: @kungalgame-trans-red-0;
|
||||
}
|
||||
/* 确定按钮 */
|
||||
.bg-url-input button {
|
||||
padding: 0 10px;
|
||||
height: 25px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
border-left: none;
|
||||
background-color: @kungalgame-trans-white-5;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 确定按钮的 hover */
|
||||
.bg-url-input button:hover {
|
||||
background-color: @kungalgame-trans-blue-0;
|
||||
}
|
||||
/* 确定按钮的 active */
|
||||
.bg-url-input button:active {
|
||||
background-color: @kungalgame-trans-red-3;
|
||||
}
|
||||
.loli {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
|
@ -82,4 +256,12 @@ import {
|
|||
left: v-bind(loliFaceLeft);
|
||||
top: v-bind(loliFaceTop);
|
||||
}
|
||||
@media (max-height: 1100px) {
|
||||
.loli {
|
||||
display: none;
|
||||
}
|
||||
.root {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@ if (isTopicPage) {
|
|||
let navItemNum = topBarItem.length
|
||||
const navItemNumString = navItemNum + '00px'
|
||||
|
||||
// 用户点击设置按钮时的操作
|
||||
const isShowPanel = ref(true)
|
||||
|
||||
// 用户点击头像时的操作
|
||||
const handleClickAvatar = () => {
|
||||
// isShowInfo.value = !isShowInfo.value
|
||||
|
|
@ -50,7 +53,9 @@ const handleClickAvatar = () => {
|
|||
}
|
||||
|
||||
// 用户点击网站设置时的操作
|
||||
const handleSittingsClick = () => {}
|
||||
const handleSittingsClick = () => {
|
||||
isShowPanel.value = !isShowPanel.value
|
||||
}
|
||||
onBeforeMount(() => {})
|
||||
</script>
|
||||
|
||||
|
|
@ -88,10 +93,19 @@ onBeforeMount(() => {})
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<KUNGalgameSettingsPanel />
|
||||
<transition name="kungalgame-panel">
|
||||
<KUNGalgameSettingsPanel v-if="isShowPanel" />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.kungalgame-panel-enter-active,
|
||||
.kungalgame-panel-leave-active {
|
||||
transition: right 0.5s;
|
||||
}
|
||||
.kungalgame-panel-enter, .kungalgame-panel-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
right: -300px;
|
||||
}
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
/* 头部高度 */
|
||||
|
|
|
|||
23
src/config/setting-panel.ts
Normal file
23
src/config/setting-panel.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// 设置面板配置
|
||||
interface KUNGalgameSettings {
|
||||
// 是否显示设置面板
|
||||
showSettings: boolean
|
||||
// 是否黑夜模式
|
||||
showDarkMode: boolean
|
||||
// 主页面宽度设置
|
||||
pageWidth: number
|
||||
// 论坛背景设置，0 为无背景
|
||||
kungalgameBackground: number
|
||||
// 是否固定看板娘
|
||||
fixLoli: boolean
|
||||
}
|
||||
|
||||
const kungalgameSettings: KUNGalgameSettings = {
|
||||
showSettings: false,
|
||||
showDarkMode: false,
|
||||
pageWidth: 61.8,
|
||||
kungalgameBackground: 0,
|
||||
fixLoli:false
|
||||
}
|
||||
|
||||
export default kungalgameSettings
|
||||
22
src/store/modules/settings.ts
Normal file
22
src/store/modules/settings.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// KUNGalgame 设置面板的 store
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import kungalgameSettings from '@/config/setting-panel'
|
||||
|
||||
export const useSettingsPanelStore = defineStore('settings', () => {
|
||||
const showSettings = ref<boolean>(kungalgameSettings.showSettings)
|
||||
const showDarkMode = ref<boolean>(kungalgameSettings.showDarkMode)
|
||||
const pageWidth = ref<number>(kungalgameSettings.pageWidth)
|
||||
const kungalgameBackground = ref<number>(
|
||||
kungalgameSettings.kungalgameBackground
|
||||
)
|
||||
const fixLoli = ref<boolean>(kungalgameSettings.fixLoli)
|
||||
|
||||
return {
|
||||
showSettings,
|
||||
showDarkMode,
|
||||
pageWidth,
|
||||
kungalgameBackground,
|
||||
fixLoli,
|
||||
}
|
||||
})
|
||||
Loading…
Reference in a new issue