use pinia-plugin-persistedstate rebuild localStorage, optimize color.scss
This commit is contained in:
KUN1007
parent
ccfd14bc4c
commit
6b3b57d55d
|
|
@ -9,7 +9,7 @@ app.use(bodyParser.json())
|
|||
|
||||
const port = 1007 // 端口号
|
||||
|
||||
// Login endpoint
|
||||
// 登录
|
||||
app.post('/api/login', (req, res) => {
|
||||
const { email, password } = req.body
|
||||
|
||||
|
|
@ -24,18 +24,17 @@ app.post('/api/login', (req, res) => {
|
|||
}
|
||||
})
|
||||
|
||||
// Register endpoint
|
||||
// 注册
|
||||
app.post('/api/register', (req, res) => {
|
||||
// Retrieve the username, email, password, and verification code from the request body
|
||||
// 获取请求 body 内容
|
||||
const { username, email, password, verificationCode } = req.body
|
||||
|
||||
// Perform the registration logic here
|
||||
// Replace this with your actual registration logic
|
||||
// 注册逻辑
|
||||
if (username && email && password && verificationCode) {
|
||||
// Registration successful
|
||||
// 注册成功
|
||||
res.json({ success: true })
|
||||
} else {
|
||||
// Registration failed
|
||||
// 注册失败
|
||||
res
|
||||
.status(400)
|
||||
.json({ success: false, error: 'Incomplete registration information' })
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
// 导入 Vue 函数
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import {
|
||||
defineAsyncComponent,
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
onUpdated,
|
||||
} from 'vue'
|
||||
// 导入图标
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 导入必要 vue 函数
|
||||
import { onBeforeMount } from 'vue'
|
||||
// 导入 css 动画
|
||||
import 'animate.css'
|
||||
// 导入路由
|
||||
import router from '@/router'
|
||||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 异步导入设置面板，提升首页加载速度
|
||||
|
|
@ -19,10 +23,10 @@ const KUNGalgameSettingsPanel = defineAsyncComponent(
|
|||
)
|
||||
|
||||
// 接收设置面板的 store
|
||||
const settingsStore = useSettingsPanelStore()
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
|
||||
// 使数据变为响应式
|
||||
let { showSettings } = storeToRefs(settingsStore)
|
||||
// 使设置面板的数据变为响应式
|
||||
const { showKUNGalgamePanel } = storeToRefs(settingsStore)
|
||||
|
||||
// 顶部导航栏单个项目的接口
|
||||
interface topBar {
|
||||
|
|
@ -72,8 +76,16 @@ const handleClickAvatar = () => {
|
|||
|
||||
// 用户点击网站设置时的操作
|
||||
const handleSittingsClick = () => {
|
||||
showSettings.value = !showSettings.value
|
||||
showKUNGalgamePanel.value = !showKUNGalgamePanel.value
|
||||
}
|
||||
// 在路由跳转时关闭设置面板
|
||||
onBeforeUnmount(() => {
|
||||
showKUNGalgamePanel.value = false
|
||||
})
|
||||
// 在页面刷新时关闭设置面板
|
||||
onBeforeMount(() => {
|
||||
showKUNGalgamePanel.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -112,7 +124,7 @@ const handleSittingsClick = () => {
|
|||
enter-active-class="animate__animated animate__jackInTheBox animate__faster"
|
||||
leave-active-class="animate__animated animate__fadeOutRight animate__faster"
|
||||
>
|
||||
<KUNGalgameSettingsPanel v-if="showSettings" />
|
||||
<KUNGalgameSettingsPanel v-if="showKUNGalgamePanel" />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import Loli from './components/Loli.vue'
|
|||
// 引入背景设置组件
|
||||
import Background from './components/Background.vue'
|
||||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
// 导入 i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
|
@ -32,13 +32,9 @@ const changeLanguage = () => {
|
|||
*/
|
||||
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useSettingsPanelStore()
|
||||
const { showSettings, showMainPageWidth } = storeToRefs(settingsStore)
|
||||
|
||||
// 监听主页宽度变化，并将主页宽度设置保存到localStorage
|
||||
watch(showMainPageWidth, (width) => {
|
||||
localStorage.setItem('KUNGalgame-main-page-width', width)
|
||||
})
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgamePanel, showKUNGalgameMainPageWidth } =
|
||||
storeToRefs(settingsStore)
|
||||
|
||||
/* 恢复所有设置为默认 */
|
||||
const handleRecover = () => {}
|
||||
|
|
@ -49,7 +45,7 @@ const handleRecover = () => {}
|
|||
|
||||
// 关闭设置面板
|
||||
const handleClose = () => {
|
||||
showSettings.value = false
|
||||
showKUNGalgamePanel.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -90,7 +86,7 @@ const handleClose = () => {
|
|||
<!-- 设置主页的宽度 -->
|
||||
<div class="width-container">
|
||||
<span>{{ $t('header.settings.width') }}</span>
|
||||
<span>{{ showMainPageWidth }}%</span>
|
||||
<span>{{ showKUNGalgameMainPageWidth }}%</span>
|
||||
</div>
|
||||
<div class="page-width">
|
||||
<span>50%</span
|
||||
|
|
@ -100,7 +96,7 @@ const handleClose = () => {
|
|||
max="90"
|
||||
step="0.1"
|
||||
type="range"
|
||||
v-model="showMainPageWidth"
|
||||
v-model="showKUNGalgameMainPageWidth"
|
||||
/><span>90%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
import { watch } from 'vue'
|
||||
|
||||
import backgroundImages from './background'
|
||||
|
||||
import { restoreBackground } from '@/hooks/useBackgroundPicture'
|
||||
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useSettingsPanelStore()
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgameBackground } = storeToRefs(settingsStore)
|
||||
|
||||
// 更改背景图片
|
||||
const handelChangeImage = (index: number) => {
|
||||
showKUNGalgameBackground.value = index.toString()
|
||||
}
|
||||
|
||||
watch(showKUNGalgameBackground, () => {
|
||||
localStorage.setItem('KUNGalgame-background', showKUNGalgameBackground.value)
|
||||
})
|
||||
|
||||
// 恢复空白背景
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useSettingsPanelStore()
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgameBackground } = storeToRefs(settingsStore)
|
||||
|
||||
// 恢复空白背景
|
||||
|
|
@ -19,6 +19,7 @@ export const currBackground = computed(() => {
|
|||
) {
|
||||
return 'none'
|
||||
} else {
|
||||
// TODO: 替换为后端接口
|
||||
return `url(src/assets/images/bg/bg${showKUNGalgameBackground.value}.png)`
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import { unref } from 'vue'
|
|||
// 临时使用
|
||||
import { asyncRoutes } from '../router'
|
||||
|
||||
console.log(asyncRoutes)
|
||||
|
||||
export const createPermission = (router: Router) => {
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const useStore = useKUNGalgamerStore()
|
||||
|
|
@ -43,11 +41,7 @@ export const createPermission = (router: Router) => {
|
|||
|
||||
// 是否已经挂载过路由
|
||||
if (getRoute.length > 0) {
|
||||
console.log(1)
|
||||
|
||||
if (router.hasRoute(<string>to.name)) {
|
||||
console.log(2)
|
||||
|
||||
next()
|
||||
} else {
|
||||
next(getRoute[0])
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import type { KUNRouteType } from '@/router/types'
|
||||
|
||||
// KUNGalgame 登录
|
||||
const LoginRoute: KUNRouteType = {
|
||||
name: 'Login',
|
||||
path: '/login',
|
||||
|
|
@ -83,6 +84,7 @@ const ForbiddenRoute = {
|
|||
const isArray = (val: any): val is object =>
|
||||
toString.call(val) === '[object Array]'
|
||||
|
||||
// 获取动态路由表
|
||||
const getAsyncRoute = (): KUNRouteType[] => {
|
||||
const modules = import.meta.glob('./modules/*.ts', {
|
||||
eager: true,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@ import { createPinia } from 'pinia'
|
|||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import type { App } from 'vue'
|
||||
|
||||
// 导入用户 store
|
||||
import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
|
||||
|
||||
// 导入网站设置面板 store
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const store = createPinia()
|
||||
|
||||
export function setupPinia(app: App<Element>) {
|
||||
|
|
@ -13,7 +17,10 @@ export function setupPinia(app: App<Element>) {
|
|||
|
||||
export function storeReset() {
|
||||
const userStore = useKUNGalgamerStore()
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
|
||||
userStore.$reset()
|
||||
settingsStore.$reset
|
||||
}
|
||||
|
||||
export { store }
|
||||
|
|
|
|||
|
|
@ -1,40 +1,26 @@
|
|||
// KUNGalgame 设置面板的 store
|
||||
import { ref } from 'vue'
|
||||
// import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
// 设置面板配置
|
||||
interface KUNGalgameSettings {
|
||||
// 是否显示设置面板
|
||||
settings: boolean
|
||||
showKUNGalgamePanel: boolean
|
||||
// 网站显示语言
|
||||
showKUNGalgameLanguage: string
|
||||
// 主页宽度
|
||||
mainPageWidth: string
|
||||
showKUNGalgameMainPageWidth: string
|
||||
// 背景图
|
||||
background: string
|
||||
showKUNGalgameBackground: string
|
||||
}
|
||||
|
||||
// 读出 localStorage 中主页的宽度数据
|
||||
const loadMainPageWidth =
|
||||
(localStorage.getItem('KUNGalgame-main-page-width') as string) || '61.8%'
|
||||
|
||||
// 读出 localStorage 中网站的背景图数据
|
||||
const loadKUNGalgameBackground =
|
||||
(localStorage.getItem('KUNGalgame-background') as string) || 'none'
|
||||
|
||||
const kungalgameSettings: KUNGalgameSettings = {
|
||||
// false -> settings panel off, true -> settings panel on
|
||||
settings: false,
|
||||
mainPageWidth: loadMainPageWidth,
|
||||
background: loadKUNGalgameBackground,
|
||||
}
|
||||
|
||||
export const useSettingsPanelStore = defineStore('settings', () => {
|
||||
const showSettings = ref<boolean>(kungalgameSettings.settings)
|
||||
const showMainPageWidth = ref<string>(kungalgameSettings.mainPageWidth)
|
||||
const showKUNGalgameBackground = ref<string>(kungalgameSettings.background)
|
||||
|
||||
return {
|
||||
showSettings,
|
||||
showMainPageWidth,
|
||||
showKUNGalgameBackground,
|
||||
}
|
||||
export const useKUNGalgameSettingsStore = defineStore({
|
||||
id: 'settings',
|
||||
persist: true,
|
||||
state: (): KUNGalgameSettings => ({
|
||||
showKUNGalgamePanel: false,
|
||||
showKUNGalgameLanguage: 'en',
|
||||
showKUNGalgameMainPageWidth: '61.8',
|
||||
showKUNGalgameBackground: 'none',
|
||||
}),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,378 +0,0 @@
|
|||
/* 基本阴影 */
|
||||
$kungalgame-font-color-0: #777777;
|
||||
$kungalgame-font-color-1: #666666;
|
||||
$kungalgame-font-color-2: #4d4d4d;
|
||||
$kungalgame-font-color-3: #242424;
|
||||
$kungalgame-black: #1f2328;
|
||||
$kungalgame-white: #ffffff;
|
||||
$kungalgame-gray-0: #f6f8fa;
|
||||
$kungalgame-gray-1: #eaeef2;
|
||||
$kungalgame-gray-2: #d0d7de;
|
||||
$kungalgame-gray-3: #afb8c1;
|
||||
$kungalgame-gray-4: #8c959f;
|
||||
$kungalgame-gray-5: #6e7781;
|
||||
$kungalgame-gray-6: #57606a;
|
||||
$kungalgame-gray-7: #424a53;
|
||||
$kungalgame-gray-8: #32383f;
|
||||
$kungalgame-gray-9: #24292f;
|
||||
$kungalgame-blue-0: #ddf4ff;
|
||||
$kungalgame-blue-1: #b6e3ff;
|
||||
$kungalgame-blue-2: #80ccff;
|
||||
$kungalgame-blue-3: #54aeff;
|
||||
$kungalgame-blue-4: #218bff;
|
||||
$kungalgame-blue-5: #0969da;
|
||||
$kungalgame-blue-6: #0550ae;
|
||||
$kungalgame-blue-7: #033d8b;
|
||||
$kungalgame-blue-8: #0a3069;
|
||||
$kungalgame-blue-9: #002155;
|
||||
$kungalgame-green-0: #dafbe1;
|
||||
$kungalgame-green-1: #aceebb;
|
||||
$kungalgame-green-2: #6fdd8b;
|
||||
$kungalgame-green-3: #4ac26b;
|
||||
$kungalgame-green-4: #2da44e;
|
||||
$kungalgame-green-5: #1a7f37;
|
||||
$kungalgame-green-6: #116329;
|
||||
$kungalgame-green-7: #044f1e;
|
||||
$kungalgame-green-8: #003d16;
|
||||
$kungalgame-green-9: #002d11;
|
||||
$kungalgame-yellow-0: #fff8c5;
|
||||
$kungalgame-yellow-1: #fae17d;
|
||||
$kungalgame-yellow-2: #eac54f;
|
||||
$kungalgame-yellow-3: #d4a72c;
|
||||
$kungalgame-yellow-4: #bf8700;
|
||||
$kungalgame-yellow-5: #9a6700;
|
||||
$kungalgame-yellow-6: #7d4e00;
|
||||
$kungalgame-yellow-7: #633c01;
|
||||
$kungalgame-yellow-8: #4d2d00;
|
||||
$kungalgame-yellow-9: #3b2300;
|
||||
$kungalgame-orange-0: #fff1e5;
|
||||
$kungalgame-orange-1: #ffd8b5;
|
||||
$kungalgame-orange-2: #ffb77c;
|
||||
$kungalgame-orange-3: #fb8f44;
|
||||
$kungalgame-orange-4: #e16f24;
|
||||
$kungalgame-orange-5: #bc4c00;
|
||||
$kungalgame-orange-6: #953800;
|
||||
$kungalgame-orange-7: #762c00;
|
||||
$kungalgame-orange-8: #5c2200;
|
||||
$kungalgame-orange-9: #471700;
|
||||
$kungalgame-red-0: #ffebe9;
|
||||
$kungalgame-red-1: #ffcecb;
|
||||
$kungalgame-red-2: #ffaba8;
|
||||
$kungalgame-red-3: #ff8182;
|
||||
$kungalgame-red-4: #fa4549;
|
||||
$kungalgame-red-5: #cf222e;
|
||||
$kungalgame-red-6: #a40e26;
|
||||
$kungalgame-red-7: #82071e;
|
||||
$kungalgame-red-8: #660018;
|
||||
$kungalgame-red-9: #4c0014;
|
||||
$kungalgame-purple-0: #fbefff;
|
||||
$kungalgame-purple-1: #ecd8ff;
|
||||
$kungalgame-purple-2: #d8b9ff;
|
||||
$kungalgame-purple-3: #c297ff;
|
||||
$kungalgame-purple-4: #a475f9;
|
||||
$kungalgame-purple-5: #8250df;
|
||||
$kungalgame-purple-6: #6639ba;
|
||||
$kungalgame-purple-7: #512a97;
|
||||
$kungalgame-purple-8: #3e1f79;
|
||||
$kungalgame-purple-9: #2e1461;
|
||||
$kungalgame-pink-0: #ffeff7;
|
||||
$kungalgame-pink-1: #ffd3eb;
|
||||
$kungalgame-pink-2: #ffadda;
|
||||
$kungalgame-pink-3: #ff80c8;
|
||||
$kungalgame-pink-4: #e85aad;
|
||||
$kungalgame-pink-5: #bf3989;
|
||||
$kungalgame-pink-6: #99286e;
|
||||
$kungalgame-pink-7: #772057;
|
||||
$kungalgame-pink-8: #611347;
|
||||
$kungalgame-pink-9: #4d0336;
|
||||
/*
|
||||
|
||||
transparent color
|
||||
|
||||
*/
|
||||
$kungalgame-trans-black: #1f2328;
|
||||
$kungalgame-trans-white-1: #fffffff7;
|
||||
$kungalgame-trans-white-2: #ffffffd9;
|
||||
$kungalgame-trans-white-3: #ffffffc7;
|
||||
$kungalgame-trans-white-4: #ffffffa1;
|
||||
$kungalgame-trans-white-5: #ffffff8e;
|
||||
$kungalgame-trans-white-6: #ffffff77;
|
||||
$kungalgame-trans-white-7: #ffffff48;
|
||||
$kungalgame-trans-white-8: #ffffff1a;
|
||||
$kungalgame-trans-white-9: #ffffff00;
|
||||
$kungalgame-trans-gray-0: #f6f8fa77;
|
||||
$kungalgame-trans-gray-1: #eaeef277;
|
||||
$kungalgame-trans-gray-2: #d0d7de77;
|
||||
$kungalgame-trans-gray-3: #afb8c177;
|
||||
$kungalgame-trans-gray-4: #8c959f77;
|
||||
$kungalgame-trans-gray-5: #6e778177;
|
||||
$kungalgame-trans-gray-6: #57606a77;
|
||||
$kungalgame-trans-gray-7: #424a5377;
|
||||
$kungalgame-trans-gray-8: #32383f77;
|
||||
$kungalgame-trans-gray-9: #24292f77;
|
||||
$kungalgame-trans-blue-0: #ddf4ff77;
|
||||
$kungalgame-trans-blue-1: #b6e3ff77;
|
||||
$kungalgame-trans-blue-2: #80ccff77;
|
||||
$kungalgame-trans-blue-3: #54aeff77;
|
||||
$kungalgame-trans-blue-4: #218bff77;
|
||||
$kungalgame-trans-blue-5: #0969da77;
|
||||
$kungalgame-trans-blue-6: #0550ae77;
|
||||
$kungalgame-trans-blue-7: #033d8b77;
|
||||
$kungalgame-trans-blue-8: #0a306977;
|
||||
$kungalgame-trans-blue-9: #00215577;
|
||||
$kungalgame-trans-green-0: #dafbe177;
|
||||
$kungalgame-trans-green-1: #aceebb77;
|
||||
$kungalgame-trans-green-2: #6fdd8b77;
|
||||
$kungalgame-trans-green-3: #4ac26b77;
|
||||
$kungalgame-trans-green-4: #2da44e77;
|
||||
$kungalgame-trans-green-5: #1a7f3777;
|
||||
$kungalgame-trans-green-6: #11632977;
|
||||
$kungalgame-trans-green-7: #044f1e77;
|
||||
$kungalgame-trans-green-8: #003d1677;
|
||||
$kungalgame-trans-green-9: #002d1177;
|
||||
$kungalgame-trans-yellow-0: #fff8c577;
|
||||
$kungalgame-trans-yellow-1: #fae17d77;
|
||||
$kungalgame-trans-yellow-2: #eac54f77;
|
||||
$kungalgame-trans-yellow-3: #d4a72c77;
|
||||
$kungalgame-trans-yellow-4: #bf870077;
|
||||
$kungalgame-trans-yellow-5: #9a670077;
|
||||
$kungalgame-trans-yellow-6: #7d4e0077;
|
||||
$kungalgame-trans-yellow-7: #633c0177;
|
||||
$kungalgame-trans-yellow-8: #4d2d0077;
|
||||
$kungalgame-trans-yellow-9: #3b230077;
|
||||
$kungalgame-trans-orange-0: #fff1e577;
|
||||
$kungalgame-trans-orange-1: #ffd8b577;
|
||||
$kungalgame-trans-orange-2: #ffb77c77;
|
||||
$kungalgame-trans-orange-3: #fb8f4477;
|
||||
$kungalgame-trans-orange-4: #e16f2477;
|
||||
$kungalgame-trans-orange-5: #bc4c0077;
|
||||
$kungalgame-trans-orange-6: #95380077;
|
||||
$kungalgame-trans-orange-7: #762c0077;
|
||||
$kungalgame-trans-orange-8: #5c220077;
|
||||
$kungalgame-trans-orange-9: #47170077;
|
||||
$kungalgame-trans-red-0: #ffebe977;
|
||||
$kungalgame-trans-red-1: #ffcecb77;
|
||||
$kungalgame-trans-red-2: #ffaba877;
|
||||
$kungalgame-trans-red-3: #ff818277;
|
||||
$kungalgame-trans-red-4: #fa454977;
|
||||
$kungalgame-trans-red-5: #cf222e77;
|
||||
$kungalgame-trans-red-6: #a40e2677;
|
||||
$kungalgame-trans-red-7: #82071e77;
|
||||
$kungalgame-trans-red-8: #66001877;
|
||||
$kungalgame-trans-red-9: #4c001477;
|
||||
$kungalgame-trans-purple-0: #fbefff77;
|
||||
$kungalgame-trans-purple-1: #ecd8ff77;
|
||||
$kungalgame-trans-purple-2: #d8b9ff77;
|
||||
$kungalgame-trans-purple-3: #c297ff77;
|
||||
$kungalgame-trans-purple-4: #a475f977;
|
||||
$kungalgame-trans-purple-5: #8250df77;
|
||||
$kungalgame-trans-purple-6: #6639ba77;
|
||||
$kungalgame-trans-purple-7: #512a9777;
|
||||
$kungalgame-trans-purple-8: #3e1f7977;
|
||||
$kungalgame-trans-purple-9: #2e146177;
|
||||
$kungalgame-trans-pink-0: #ffeff777;
|
||||
$kungalgame-trans-pink-1: #ffd3eb77;
|
||||
$kungalgame-trans-pink-2: #ffadda77;
|
||||
$kungalgame-trans-pink-3: #ff80c877;
|
||||
$kungalgame-trans-pink-4: #e85aad77;
|
||||
$kungalgame-trans-pink-5: #bf398977;
|
||||
$kungalgame-trans-pink-6: #99286e77;
|
||||
$kungalgame-trans-pink-7: #77205777;
|
||||
$kungalgame-trans-pink-8: #61134777;
|
||||
$kungalgame-trans-pink-9: #4d033677;
|
||||
|
||||
$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 $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-shadow-2: inset 1px 1px 2px $kungalgame-gray-3,
|
||||
inset -1px -1px 2px $kungalgame-white;
|
||||
|
||||
:export {
|
||||
shadow: $shadow;
|
||||
kungalgame-shadow-0: $kungalgame-shadow-0;
|
||||
kungalgame-shadow-1: $kungalgame-shadow-1;
|
||||
kungalgame-font-color-0: $kungalgame-font-color-0;
|
||||
kungalgame-font-color-1: $kungalgame-font-color-1;
|
||||
kungalgame-font-color-2: $kungalgame-font-color-2;
|
||||
kungalgame-font-color-3: $kungalgame-font-color-3;
|
||||
kungalgame-black: $kungalgame-black;
|
||||
kungalgame-white: $kungalgame-white;
|
||||
kungalgame-gray-0: $kungalgame-gray-0;
|
||||
kungalgame-gray-1: $kungalgame-gray-1;
|
||||
kungalgame-gray-2: $kungalgame-gray-2;
|
||||
kungalgame-gray-3: $kungalgame-gray-3;
|
||||
kungalgame-gray-4: $kungalgame-gray-4;
|
||||
kungalgame-gray-5: $kungalgame-gray-5;
|
||||
kungalgame-gray-6: $kungalgame-gray-6;
|
||||
kungalgame-gray-7: $kungalgame-gray-7;
|
||||
kungalgame-gray-8: $kungalgame-gray-8;
|
||||
kungalgame-gray-9: $kungalgame-gray-9;
|
||||
kungalgame-blue-0: $kungalgame-blue-0;
|
||||
kungalgame-blue-1: $kungalgame-blue-1;
|
||||
kungalgame-blue-2: $kungalgame-blue-2;
|
||||
kungalgame-blue-3: $kungalgame-blue-3;
|
||||
kungalgame-blue-4: $kungalgame-blue-4;
|
||||
kungalgame-blue-5: $kungalgame-blue-5;
|
||||
kungalgame-blue-6: $kungalgame-blue-6;
|
||||
kungalgame-blue-7: $kungalgame-blue-7;
|
||||
kungalgame-blue-8: $kungalgame-blue-8;
|
||||
kungalgame-blue-9: $kungalgame-blue-9;
|
||||
kungalgame-green-0: $kungalgame-green-0;
|
||||
kungalgame-green-1: $kungalgame-green-1;
|
||||
kungalgame-green-2: $kungalgame-green-2;
|
||||
kungalgame-green-3: $kungalgame-green-3;
|
||||
kungalgame-green-4: $kungalgame-green-4;
|
||||
kungalgame-green-5: $kungalgame-green-5;
|
||||
kungalgame-green-6: $kungalgame-green-6;
|
||||
kungalgame-green-7: $kungalgame-green-7;
|
||||
kungalgame-green-8: $kungalgame-green-8;
|
||||
kungalgame-green-9: $kungalgame-green-9;
|
||||
kungalgame-yellow-0: $kungalgame-yellow-0;
|
||||
kungalgame-yellow-1: $kungalgame-yellow-1;
|
||||
kungalgame-yellow-2: $kungalgame-yellow-2;
|
||||
kungalgame-yellow-3: $kungalgame-yellow-3;
|
||||
kungalgame-yellow-4: $kungalgame-yellow-4;
|
||||
kungalgame-yellow-5: $kungalgame-yellow-5;
|
||||
kungalgame-yellow-6: $kungalgame-yellow-6;
|
||||
kungalgame-yellow-7: $kungalgame-yellow-7;
|
||||
kungalgame-yellow-8: $kungalgame-yellow-8;
|
||||
kungalgame-yellow-9: $kungalgame-yellow-9;
|
||||
kungalgame-orange-0: $kungalgame-orange-0;
|
||||
kungalgame-orange-1: $kungalgame-orange-1;
|
||||
kungalgame-orange-2: $kungalgame-orange-2;
|
||||
kungalgame-orange-3: $kungalgame-orange-3;
|
||||
kungalgame-orange-4: $kungalgame-orange-4;
|
||||
kungalgame-orange-5: $kungalgame-orange-5;
|
||||
kungalgame-orange-6: $kungalgame-orange-6;
|
||||
kungalgame-orange-7: $kungalgame-orange-7;
|
||||
kungalgame-orange-8: $kungalgame-orange-8;
|
||||
kungalgame-orange-9: $kungalgame-orange-9;
|
||||
kungalgame-red-0: $kungalgame-red-0;
|
||||
kungalgame-red-1: $kungalgame-red-1;
|
||||
kungalgame-red-2: $kungalgame-red-2;
|
||||
kungalgame-red-3: $kungalgame-red-3;
|
||||
kungalgame-red-4: $kungalgame-red-4;
|
||||
kungalgame-red-5: $kungalgame-red-5;
|
||||
kungalgame-red-6: $kungalgame-red-6;
|
||||
kungalgame-red-7: $kungalgame-red-7;
|
||||
kungalgame-red-8: $kungalgame-red-8;
|
||||
kungalgame-red-9: $kungalgame-red-9;
|
||||
kungalgame-purple-0: $kungalgame-purple-0;
|
||||
kungalgame-purple-1: $kungalgame-purple-1;
|
||||
kungalgame-purple-2: $kungalgame-purple-2;
|
||||
kungalgame-purple-3: $kungalgame-purple-3;
|
||||
kungalgame-purple-4: $kungalgame-purple-4;
|
||||
kungalgame-purple-5: $kungalgame-purple-5;
|
||||
kungalgame-purple-6: $kungalgame-purple-6;
|
||||
kungalgame-purple-7: $kungalgame-purple-7;
|
||||
kungalgame-purple-8: $kungalgame-purple-8;
|
||||
kungalgame-purple-9: $kungalgame-purple-9;
|
||||
kungalgame-pink-0: $kungalgame-pink-0;
|
||||
kungalgame-pink-1: $kungalgame-pink-1;
|
||||
kungalgame-pink-2: $kungalgame-pink-2;
|
||||
kungalgame-pink-3: $kungalgame-pink-3;
|
||||
kungalgame-pink-4: $kungalgame-pink-4;
|
||||
kungalgame-pink-5: $kungalgame-pink-5;
|
||||
kungalgame-pink-6: $kungalgame-pink-6;
|
||||
kungalgame-pink-7: $kungalgame-pink-7;
|
||||
kungalgame-pink-8: $kungalgame-pink-8;
|
||||
kungalgame-pink-9: $kungalgame-pink-9;
|
||||
/*
|
||||
|
||||
transparent color
|
||||
|
||||
*/
|
||||
kungalgame-trans-black: $kungalgame-trans-black;
|
||||
kungalgame-trans-white-1: $kungalgame-trans-white-1;
|
||||
kungalgame-trans-white-2: $kungalgame-trans-white-2;
|
||||
kungalgame-trans-white-3: $kungalgame-trans-white-3;
|
||||
kungalgame-trans-white-4: $kungalgame-trans-white-4;
|
||||
kungalgame-trans-white-5: $kungalgame-trans-white-5;
|
||||
kungalgame-trans-white-6: $kungalgame-trans-white-6;
|
||||
kungalgame-trans-white-7: $kungalgame-trans-white-7;
|
||||
kungalgame-trans-white-8: $kungalgame-trans-white-8;
|
||||
kungalgame-trans-white-9: $kungalgame-trans-white-9;
|
||||
kungalgame-trans-gray-0: $kungalgame-trans-gray-0;
|
||||
kungalgame-trans-gray-1: $kungalgame-trans-gray-1;
|
||||
kungalgame-trans-gray-2: $kungalgame-trans-gray-2;
|
||||
kungalgame-trans-gray-3: $kungalgame-trans-gray-3;
|
||||
kungalgame-trans-gray-4: $kungalgame-trans-gray-4;
|
||||
kungalgame-trans-gray-5: $kungalgame-trans-gray-5;
|
||||
kungalgame-trans-gray-6: $kungalgame-trans-gray-6;
|
||||
kungalgame-trans-gray-7: $kungalgame-trans-gray-7;
|
||||
kungalgame-trans-gray-8: $kungalgame-trans-gray-8;
|
||||
kungalgame-trans-gray-9: $kungalgame-trans-gray-9;
|
||||
kungalgame-trans-blue-0: $kungalgame-trans-blue-0;
|
||||
kungalgame-trans-blue-1: $kungalgame-trans-blue-1;
|
||||
kungalgame-trans-blue-2: $kungalgame-trans-blue-2;
|
||||
kungalgame-trans-blue-3: $kungalgame-trans-blue-3;
|
||||
kungalgame-trans-blue-4: $kungalgame-trans-blue-4;
|
||||
kungalgame-trans-blue-5: $kungalgame-trans-blue-5;
|
||||
kungalgame-trans-blue-6: $kungalgame-trans-blue-6;
|
||||
kungalgame-trans-blue-7: $kungalgame-trans-blue-7;
|
||||
kungalgame-trans-blue-8: $kungalgame-trans-blue-8;
|
||||
kungalgame-trans-blue-9: $kungalgame-trans-blue-9;
|
||||
kungalgame-trans-green-0: $kungalgame-trans-green-0;
|
||||
kungalgame-trans-green-1: $kungalgame-trans-green-1;
|
||||
kungalgame-trans-green-2: $kungalgame-trans-green-2;
|
||||
kungalgame-trans-green-3: $kungalgame-trans-green-3;
|
||||
kungalgame-trans-green-4: $kungalgame-trans-green-4;
|
||||
kungalgame-trans-green-5: $kungalgame-trans-green-5;
|
||||
kungalgame-trans-green-6: $kungalgame-trans-green-6;
|
||||
kungalgame-trans-green-7: $kungalgame-trans-green-7;
|
||||
kungalgame-trans-green-8: $kungalgame-trans-green-8;
|
||||
kungalgame-trans-green-9: $kungalgame-trans-green-9;
|
||||
kungalgame-trans-yellow-0: $kungalgame-trans-yellow-0;
|
||||
kungalgame-trans-yellow-1: $kungalgame-trans-yellow-1;
|
||||
kungalgame-trans-yellow-2: $kungalgame-trans-yellow-2;
|
||||
kungalgame-trans-yellow-3: $kungalgame-trans-yellow-3;
|
||||
kungalgame-trans-yellow-4: $kungalgame-trans-yellow-4;
|
||||
kungalgame-trans-yellow-5: $kungalgame-trans-yellow-5;
|
||||
kungalgame-trans-yellow-6: $kungalgame-trans-yellow-6;
|
||||
kungalgame-trans-yellow-7: $kungalgame-trans-yellow-7;
|
||||
kungalgame-trans-yellow-8: $kungalgame-trans-yellow-8;
|
||||
kungalgame-trans-yellow-9: $kungalgame-trans-yellow-9;
|
||||
kungalgame-trans-orange-0: $kungalgame-trans-orange-0;
|
||||
kungalgame-trans-orange-1: $kungalgame-trans-orange-1;
|
||||
kungalgame-trans-orange-2: $kungalgame-trans-orange-2;
|
||||
kungalgame-trans-orange-3: $kungalgame-trans-orange-3;
|
||||
kungalgame-trans-orange-4: $kungalgame-trans-orange-4;
|
||||
kungalgame-trans-orange-5: $kungalgame-trans-orange-5;
|
||||
kungalgame-trans-orange-6: $kungalgame-trans-orange-6;
|
||||
kungalgame-trans-orange-7: $kungalgame-trans-orange-7;
|
||||
kungalgame-trans-orange-8: $kungalgame-trans-orange-8;
|
||||
kungalgame-trans-orange-9: $kungalgame-trans-orange-9;
|
||||
kungalgame-trans-red-0: $kungalgame-trans-red-0;
|
||||
kungalgame-trans-red-1: $kungalgame-trans-red-1;
|
||||
kungalgame-trans-red-2: $kungalgame-trans-red-2;
|
||||
kungalgame-trans-red-3: $kungalgame-trans-red-3;
|
||||
kungalgame-trans-red-4: $kungalgame-trans-red-4;
|
||||
kungalgame-trans-red-5: $kungalgame-trans-red-5;
|
||||
kungalgame-trans-red-6: $kungalgame-trans-red-6;
|
||||
kungalgame-trans-red-7: $kungalgame-trans-red-7;
|
||||
kungalgame-trans-red-8: $kungalgame-trans-red-8;
|
||||
kungalgame-trans-red-9: $kungalgame-trans-red-9;
|
||||
kungalgame-trans-purple-0: $kungalgame-trans-purple-0;
|
||||
kungalgame-trans-purple-1: $kungalgame-trans-purple-1;
|
||||
kungalgame-trans-purple-2: $kungalgame-trans-purple-2;
|
||||
kungalgame-trans-purple-3: $kungalgame-trans-purple-3;
|
||||
kungalgame-trans-purple-4: $kungalgame-trans-purple-4;
|
||||
kungalgame-trans-purple-5: $kungalgame-trans-purple-5;
|
||||
kungalgame-trans-purple-6: $kungalgame-trans-purple-6;
|
||||
kungalgame-trans-purple-7: $kungalgame-trans-purple-7;
|
||||
kungalgame-trans-purple-8: $kungalgame-trans-purple-8;
|
||||
kungalgame-trans-purple-9: $kungalgame-trans-purple-9;
|
||||
kungalgame-trans-pink-0: $kungalgame-trans-pink-0;
|
||||
kungalgame-trans-pink-1: $kungalgame-trans-pink-1;
|
||||
kungalgame-trans-pink-2: $kungalgame-trans-pink-2;
|
||||
kungalgame-trans-pink-3: $kungalgame-trans-pink-3;
|
||||
kungalgame-trans-pink-4: $kungalgame-trans-pink-4;
|
||||
kungalgame-trans-pink-5: $kungalgame-trans-pink-5;
|
||||
kungalgame-trans-pink-6: $kungalgame-trans-pink-6;
|
||||
kungalgame-trans-pink-7: $kungalgame-trans-pink-7;
|
||||
kungalgame-trans-pink-8: $kungalgame-trans-pink-8;
|
||||
kungalgame-trans-pink-9: $kungalgame-trans-pink-9;
|
||||
}
|
||||
1
src/styles/index.scss
Normal file
1
src/styles/index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import './theme/color.scss';
|
||||
191
src/styles/theme/color.scss
Normal file
191
src/styles/theme/color.scss
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
/* 基本阴影 */
|
||||
$kungalgame-font-color-0: #777777;
|
||||
$kungalgame-font-color-1: #666666;
|
||||
$kungalgame-font-color-2: #4d4d4d;
|
||||
$kungalgame-font-color-3: #242424;
|
||||
$kungalgame-black: #1f2328;
|
||||
$kungalgame-white: #ffffff;
|
||||
$kungalgame-gray-0: #f6f8fa;
|
||||
$kungalgame-gray-1: #eaeef2;
|
||||
$kungalgame-gray-2: #d0d7de;
|
||||
$kungalgame-gray-3: #afb8c1;
|
||||
$kungalgame-gray-4: #8c959f;
|
||||
$kungalgame-gray-5: #6e7781;
|
||||
$kungalgame-gray-6: #57606a;
|
||||
$kungalgame-gray-7: #424a53;
|
||||
$kungalgame-gray-8: #32383f;
|
||||
$kungalgame-gray-9: #24292f;
|
||||
$kungalgame-blue-0: #ddf4ff;
|
||||
$kungalgame-blue-1: #b6e3ff;
|
||||
$kungalgame-blue-2: #80ccff;
|
||||
$kungalgame-blue-3: #54aeff;
|
||||
$kungalgame-blue-4: #218bff;
|
||||
$kungalgame-blue-5: #0969da;
|
||||
$kungalgame-blue-6: #0550ae;
|
||||
$kungalgame-blue-7: #033d8b;
|
||||
$kungalgame-blue-8: #0a3069;
|
||||
$kungalgame-blue-9: #002155;
|
||||
$kungalgame-green-0: #dafbe1;
|
||||
$kungalgame-green-1: #aceebb;
|
||||
$kungalgame-green-2: #6fdd8b;
|
||||
$kungalgame-green-3: #4ac26b;
|
||||
$kungalgame-green-4: #2da44e;
|
||||
$kungalgame-green-5: #1a7f37;
|
||||
$kungalgame-green-6: #116329;
|
||||
$kungalgame-green-7: #044f1e;
|
||||
$kungalgame-green-8: #003d16;
|
||||
$kungalgame-green-9: #002d11;
|
||||
$kungalgame-yellow-0: #fff8c5;
|
||||
$kungalgame-yellow-1: #fae17d;
|
||||
$kungalgame-yellow-2: #eac54f;
|
||||
$kungalgame-yellow-3: #d4a72c;
|
||||
$kungalgame-yellow-4: #bf8700;
|
||||
$kungalgame-yellow-5: #9a6700;
|
||||
$kungalgame-yellow-6: #7d4e00;
|
||||
$kungalgame-yellow-7: #633c01;
|
||||
$kungalgame-yellow-8: #4d2d00;
|
||||
$kungalgame-yellow-9: #3b2300;
|
||||
$kungalgame-orange-0: #fff1e5;
|
||||
$kungalgame-orange-1: #ffd8b5;
|
||||
$kungalgame-orange-2: #ffb77c;
|
||||
$kungalgame-orange-3: #fb8f44;
|
||||
$kungalgame-orange-4: #e16f24;
|
||||
$kungalgame-orange-5: #bc4c00;
|
||||
$kungalgame-orange-6: #953800;
|
||||
$kungalgame-orange-7: #762c00;
|
||||
$kungalgame-orange-8: #5c2200;
|
||||
$kungalgame-orange-9: #471700;
|
||||
$kungalgame-red-0: #ffebe9;
|
||||
$kungalgame-red-1: #ffcecb;
|
||||
$kungalgame-red-2: #ffaba8;
|
||||
$kungalgame-red-3: #ff8182;
|
||||
$kungalgame-red-4: #fa4549;
|
||||
$kungalgame-red-5: #cf222e;
|
||||
$kungalgame-red-6: #a40e26;
|
||||
$kungalgame-red-7: #82071e;
|
||||
$kungalgame-red-8: #660018;
|
||||
$kungalgame-red-9: #4c0014;
|
||||
$kungalgame-purple-0: #fbefff;
|
||||
$kungalgame-purple-1: #ecd8ff;
|
||||
$kungalgame-purple-2: #d8b9ff;
|
||||
$kungalgame-purple-3: #c297ff;
|
||||
$kungalgame-purple-4: #a475f9;
|
||||
$kungalgame-purple-5: #8250df;
|
||||
$kungalgame-purple-6: #6639ba;
|
||||
$kungalgame-purple-7: #512a97;
|
||||
$kungalgame-purple-8: #3e1f79;
|
||||
$kungalgame-purple-9: #2e1461;
|
||||
$kungalgame-pink-0: #ffeff7;
|
||||
$kungalgame-pink-1: #ffd3eb;
|
||||
$kungalgame-pink-2: #ffadda;
|
||||
$kungalgame-pink-3: #ff80c8;
|
||||
$kungalgame-pink-4: #e85aad;
|
||||
$kungalgame-pink-5: #bf3989;
|
||||
$kungalgame-pink-6: #99286e;
|
||||
$kungalgame-pink-7: #772057;
|
||||
$kungalgame-pink-8: #611347;
|
||||
$kungalgame-pink-9: #4d0336;
|
||||
/*
|
||||
|
||||
transparent color
|
||||
|
||||
*/
|
||||
$kungalgame-trans-black: #1f2328;
|
||||
$kungalgame-trans-white-1: #fffffff7;
|
||||
$kungalgame-trans-white-2: #ffffffd9;
|
||||
$kungalgame-trans-white-3: #ffffffc7;
|
||||
$kungalgame-trans-white-4: #ffffffa1;
|
||||
$kungalgame-trans-white-5: #ffffff8e;
|
||||
$kungalgame-trans-white-6: #ffffff77;
|
||||
$kungalgame-trans-white-7: #ffffff48;
|
||||
$kungalgame-trans-white-8: #ffffff1a;
|
||||
$kungalgame-trans-white-9: #ffffff00;
|
||||
$kungalgame-trans-gray-0: #f6f8fa77;
|
||||
$kungalgame-trans-gray-1: #eaeef277;
|
||||
$kungalgame-trans-gray-2: #d0d7de77;
|
||||
$kungalgame-trans-gray-3: #afb8c177;
|
||||
$kungalgame-trans-gray-4: #8c959f77;
|
||||
$kungalgame-trans-gray-5: #6e778177;
|
||||
$kungalgame-trans-gray-6: #57606a77;
|
||||
$kungalgame-trans-gray-7: #424a5377;
|
||||
$kungalgame-trans-gray-8: #32383f77;
|
||||
$kungalgame-trans-gray-9: #24292f77;
|
||||
$kungalgame-trans-blue-0: #ddf4ff77;
|
||||
$kungalgame-trans-blue-1: #b6e3ff77;
|
||||
$kungalgame-trans-blue-2: #80ccff77;
|
||||
$kungalgame-trans-blue-3: #54aeff77;
|
||||
$kungalgame-trans-blue-4: #218bff77;
|
||||
$kungalgame-trans-blue-5: #0969da77;
|
||||
$kungalgame-trans-blue-6: #0550ae77;
|
||||
$kungalgame-trans-blue-7: #033d8b77;
|
||||
$kungalgame-trans-blue-8: #0a306977;
|
||||
$kungalgame-trans-blue-9: #00215577;
|
||||
$kungalgame-trans-green-0: #dafbe177;
|
||||
$kungalgame-trans-green-1: #aceebb77;
|
||||
$kungalgame-trans-green-2: #6fdd8b77;
|
||||
$kungalgame-trans-green-3: #4ac26b77;
|
||||
$kungalgame-trans-green-4: #2da44e77;
|
||||
$kungalgame-trans-green-5: #1a7f3777;
|
||||
$kungalgame-trans-green-6: #11632977;
|
||||
$kungalgame-trans-green-7: #044f1e77;
|
||||
$kungalgame-trans-green-8: #003d1677;
|
||||
$kungalgame-trans-green-9: #002d1177;
|
||||
$kungalgame-trans-yellow-0: #fff8c577;
|
||||
$kungalgame-trans-yellow-1: #fae17d77;
|
||||
$kungalgame-trans-yellow-2: #eac54f77;
|
||||
$kungalgame-trans-yellow-3: #d4a72c77;
|
||||
$kungalgame-trans-yellow-4: #bf870077;
|
||||
$kungalgame-trans-yellow-5: #9a670077;
|
||||
$kungalgame-trans-yellow-6: #7d4e0077;
|
||||
$kungalgame-trans-yellow-7: #633c0177;
|
||||
$kungalgame-trans-yellow-8: #4d2d0077;
|
||||
$kungalgame-trans-yellow-9: #3b230077;
|
||||
$kungalgame-trans-orange-0: #fff1e577;
|
||||
$kungalgame-trans-orange-1: #ffd8b577;
|
||||
$kungalgame-trans-orange-2: #ffb77c77;
|
||||
$kungalgame-trans-orange-3: #fb8f4477;
|
||||
$kungalgame-trans-orange-4: #e16f2477;
|
||||
$kungalgame-trans-orange-5: #bc4c0077;
|
||||
$kungalgame-trans-orange-6: #95380077;
|
||||
$kungalgame-trans-orange-7: #762c0077;
|
||||
$kungalgame-trans-orange-8: #5c220077;
|
||||
$kungalgame-trans-orange-9: #47170077;
|
||||
$kungalgame-trans-red-0: #ffebe977;
|
||||
$kungalgame-trans-red-1: #ffcecb77;
|
||||
$kungalgame-trans-red-2: #ffaba877;
|
||||
$kungalgame-trans-red-3: #ff818277;
|
||||
$kungalgame-trans-red-4: #fa454977;
|
||||
$kungalgame-trans-red-5: #cf222e77;
|
||||
$kungalgame-trans-red-6: #a40e2677;
|
||||
$kungalgame-trans-red-7: #82071e77;
|
||||
$kungalgame-trans-red-8: #66001877;
|
||||
$kungalgame-trans-red-9: #4c001477;
|
||||
$kungalgame-trans-purple-0: #fbefff77;
|
||||
$kungalgame-trans-purple-1: #ecd8ff77;
|
||||
$kungalgame-trans-purple-2: #d8b9ff77;
|
||||
$kungalgame-trans-purple-3: #c297ff77;
|
||||
$kungalgame-trans-purple-4: #a475f977;
|
||||
$kungalgame-trans-purple-5: #8250df77;
|
||||
$kungalgame-trans-purple-6: #6639ba77;
|
||||
$kungalgame-trans-purple-7: #512a9777;
|
||||
$kungalgame-trans-purple-8: #3e1f7977;
|
||||
$kungalgame-trans-purple-9: #2e146177;
|
||||
$kungalgame-trans-pink-0: #ffeff777;
|
||||
$kungalgame-trans-pink-1: #ffd3eb77;
|
||||
$kungalgame-trans-pink-2: #ffadda77;
|
||||
$kungalgame-trans-pink-3: #ff80c877;
|
||||
$kungalgame-trans-pink-4: #e85aad77;
|
||||
$kungalgame-trans-pink-5: #bf398977;
|
||||
$kungalgame-trans-pink-6: #99286e77;
|
||||
$kungalgame-trans-pink-7: #77205777;
|
||||
$kungalgame-trans-pink-8: #61134777;
|
||||
$kungalgame-trans-pink-9: #4d033677;
|
||||
|
||||
$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 $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-shadow-2: inset 1px 1px 2px $kungalgame-gray-3,
|
||||
inset -1px -1px 2px $kungalgame-white;
|
||||
|
|
@ -2,14 +2,14 @@
|
|||
import MainPageAside from './aside/MainPageAside.vue'
|
||||
import MainPageArticle from './article/MainPageArticle.vue'
|
||||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed } from 'vue'
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useSettingsPanelStore()
|
||||
const { showMainPageWidth } = storeToRefs(settingsStore)
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgameMainPageWidth } = storeToRefs(settingsStore)
|
||||
const width = computed(() => {
|
||||
return showMainPageWidth.value + '%'
|
||||
return showKUNGalgameMainPageWidth.value + '%'
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default defineConfig({
|
|||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/styles/color.scss";`,
|
||||
additionalData: `@import "@/styles/index.scss";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue