aside template styles
This commit is contained in:
parent
ad27057ea6
commit
fdd57d4880
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"cSpell.words": [
|
||||
"axios",
|
||||
"Bilibili",
|
||||
"galgame",
|
||||
"Galgame",
|
||||
"iconify",
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<!-- 设置面板组件,展示整个论坛的设置面板 -->
|
||||
<script setup lang="ts">
|
||||
// 引入 vue 函数
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
// 引入图标字体
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 引入看板娘组件
|
||||
|
@ -11,36 +9,9 @@ import Background from './components/Background.vue'
|
|||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
// 导入 i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
/*
|
||||
* 网站的语言设置
|
||||
*/
|
||||
const { locale } = useI18n({ useScope: 'global' })
|
||||
const selectedLocale = ref(locale.value)
|
||||
|
||||
// 监听selectedLocale的变化,并更新Vue I18n的locale
|
||||
watch(selectedLocale, (newVal) => {
|
||||
locale.value = newVal
|
||||
})
|
||||
|
||||
// 在页面加载时从localStorage中读取保存的语言设置
|
||||
onMounted(() => {
|
||||
const savedLocale = localStorage.getItem('KUNGalgame-locale')
|
||||
if (savedLocale) {
|
||||
selectedLocale.value = savedLocale
|
||||
}
|
||||
})
|
||||
|
||||
// 监听语言变化,并将语言设置保存到localStorage
|
||||
watch(locale, (newVal) => {
|
||||
localStorage.setItem('KUNGalgame-locale', newVal)
|
||||
})
|
||||
|
||||
const changeLanguage = () => {
|
||||
locale.value = selectedLocale.value
|
||||
}
|
||||
// 导入更改语言的函数
|
||||
import selectedLocale from '@/config/storage/lang-storage'
|
||||
import changeLanguage from '@/config/storage/lang-storage'
|
||||
|
||||
/*
|
||||
* 设置面板显示切换
|
||||
|
|
39
src/config/storage/lang-storage.ts
Normal file
39
src/config/storage/lang-storage.ts
Normal file
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* 网站的语言设置
|
||||
*/
|
||||
|
||||
// 导入 vue 函数
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
// 导入 i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const selectedLocale = ref(locale.value)
|
||||
|
||||
// 监听selectedLocale的变化,并更新Vue I18n的locale
|
||||
watch(selectedLocale, (newVal) => {
|
||||
locale.value = newVal
|
||||
})
|
||||
|
||||
// 在页面加载时从localStorage中读取保存的语言设置
|
||||
onMounted(() => {
|
||||
const savedLocale = localStorage.getItem('KUNGalgame-locale')
|
||||
if (savedLocale) {
|
||||
selectedLocale.value = savedLocale
|
||||
}
|
||||
})
|
||||
|
||||
// 监听语言变化,并将语言设置保存到localStorage
|
||||
watch(locale, (newVal) => {
|
||||
localStorage.setItem('KUNGalgame-locale', newVal)
|
||||
})
|
||||
|
||||
const changeLanguage = () => {
|
||||
locale.value = selectedLocale.value
|
||||
}
|
||||
|
||||
export default {
|
||||
selectedLocale,
|
||||
changeLanguage,
|
||||
}
|
|
@ -2,4 +2,10 @@ export default {
|
|||
header: {
|
||||
name: 'KUNGalgame',
|
||||
},
|
||||
mainPage: {
|
||||
asideActive: {
|
||||
hot: `Today's Hot Topic`,
|
||||
new: `Today's New Topic`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -2,4 +2,10 @@ export default {
|
|||
header: {
|
||||
name: '鲲Galgame',
|
||||
},
|
||||
mainPage: {
|
||||
asideActive: {
|
||||
hot: `今日热门话题`,
|
||||
new: `今日最新话题`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -187,6 +187,8 @@ $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;
|
||||
|
|
0
src/utils/cache/cookies.ts
vendored
0
src/utils/cache/cookies.ts
vendored
|
@ -22,12 +22,9 @@ import asideItem from '../aside-item'
|
|||
span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
/* 文字竖直显示 */
|
||||
word-wrap: break-word;
|
||||
display: grid;
|
||||
grid-auto-rows: minmax(0, 1fr); /* 控制行高度自适应 */
|
||||
border-top: 1px solid $kungalgame-blue-4;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
|
@ -37,7 +34,8 @@ import asideItem from '../aside-item'
|
|||
background-color: $kungalgame-trans-blue-2;
|
||||
}
|
||||
a {
|
||||
width: 1px;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
@ -26,7 +26,7 @@ const isActive = toRefs(props.isActive)
|
|||
</div>
|
||||
</div>
|
||||
<!-- 热门帖子板块 -->
|
||||
<Topic v-show="isActive" :isHotTopic="true"/>
|
||||
<Topic v-show="isActive" :isHotTopic="true" />
|
||||
<!-- 这个 style 使侧边栏和内容区等高 -->
|
||||
<!-- <Topic v-show="isActive" /> -->
|
||||
<!-- 新帖子板块 -->
|
||||
|
@ -93,6 +93,7 @@ const isActive = toRefs(props.isActive)
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
color: $kungalgame-font-color-2;
|
||||
border-radius: 5px;
|
||||
/* 设置六个功能(模式、排行、背景等)的 hover */
|
||||
&:hover {
|
||||
color: $kungalgame-font-color-3;
|
||||
|
|
|
@ -8,40 +8,35 @@ const props = defineProps(['isHotTopic'])
|
|||
|
||||
const isHotTopic = props.isHotTopic
|
||||
|
||||
if (isHotTopic) {
|
||||
}
|
||||
let titleName = isHotTopic ? 'hot' : 'new'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边栏动态推送今日热度帖子 -->
|
||||
<div class="topic-wrap">
|
||||
<!-- 今日热度帖子的标题名 -->
|
||||
<div class="title">今日热门话题</div>
|
||||
<!-- 这里调用全局注册的 i18n 函数 $t 对名字进行渲染 -->
|
||||
<div class="title" :class="titleName">
|
||||
{{ $t(`mainPage.asideActive['${titleName}']`) }}
|
||||
</div>
|
||||
<!-- 热门帖子的目录 -->
|
||||
<!-- 这里使用了父组件传过来的 isHotTopic 数据, -->
|
||||
<!-- 这里使用了父组件传过来的 isHotTopic 数据 -->
|
||||
<template v-for="kun in singleTopic" :key="kun.index">
|
||||
<span class="topic-content" v-if="isHotTopic">
|
||||
<SingleTopic
|
||||
:data="kun.data"
|
||||
:to="{ path: kun.router }"
|
||||
:isHotTopic="isHotTopic"
|
||||
/>
|
||||
<span class="topic-content" v-if="isHotTopic" :class="`hot-bg`">
|
||||
<router-link :to="{ path: kun.router }">
|
||||
<SingleTopic :data="kun.data" :isHotTopic="isHotTopic" />
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="topic-content" v-if="!isHotTopic">
|
||||
<SingleTopic
|
||||
:data="kun.data"
|
||||
:to="{ path: kun.router }"
|
||||
:isHotTopic="isHotTopic"
|
||||
/>
|
||||
<span class="topic-content" v-if="!isHotTopic" :class="`new-bg`">
|
||||
<router-link :to="{ path: kun.router }">
|
||||
<SingleTopic :data="kun.data" :isHotTopic="isHotTopic" />
|
||||
</router-link>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$hot-color: $kungalgame-trans-pink-1;
|
||||
$new-color: $kungalgame-trans-blue-1;
|
||||
// $color: v-bind(topicColor);
|
||||
/* 侧边栏动态推送帖子的总容器 */
|
||||
.topic-wrap {
|
||||
width: 100%;
|
||||
|
@ -55,8 +50,6 @@ $new-color: $kungalgame-trans-blue-1;
|
|||
/* 标题六个字的样式 */
|
||||
.title {
|
||||
height: 100%;
|
||||
border: 3px dashed $kungalgame-trans-blue-1;
|
||||
border-bottom: none;
|
||||
/* 设置(今日热门话题)居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -69,9 +62,28 @@ $new-color: $kungalgame-trans-blue-1;
|
|||
/* 展示热门帖子的区域 */
|
||||
.topic-content {
|
||||
height: 100%;
|
||||
background-color: $kungalgame-trans-blue-1;
|
||||
|
||||
/* 热门帖子标题部分为弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.hot {
|
||||
border: 3px dashed $kungalgame-trans-blue-1;
|
||||
border-bottom: none;
|
||||
}
|
||||
.new {
|
||||
border: 3px dashed $kungalgame-trans-pink-1;
|
||||
border-bottom: none;
|
||||
}
|
||||
.hot-bg {
|
||||
background-color: $kungalgame-trans-blue-1;
|
||||
}
|
||||
.new-bg {
|
||||
background-color: $kungalgame-trans-pink-1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,14 +12,14 @@ const isHotTopic = props.isHotTopic
|
|||
<!-- 热门帖子的标题 -->
|
||||
<div class="title">{{ title }}</div>
|
||||
<!-- 热门帖子的热度值 -->
|
||||
<div class="new" v-if="isHotTopic">
|
||||
<div class="new" v-if="!isHotTopic">
|
||||
<Icon icon="svg-spinners:clock" />
|
||||
<span>{{ value }}</span>
|
||||
</div>
|
||||
<div class="hot" v-if="!isHotTopic">
|
||||
<Icon icon="bi:fire" />
|
||||
<span>{{ time }}</span>
|
||||
</div>
|
||||
<div class="hot" v-if="isHotTopic">
|
||||
<Icon icon="bi:fire" />
|
||||
<span>{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -36,11 +36,10 @@ const isHotTopic = props.isHotTopic
|
|||
cursor: pointer;
|
||||
/* 单个新帖子的 hover */
|
||||
&:hover {
|
||||
box-shadow: -2px -2px 5px $kungalgame-white, 2px 2px 5px $kungalgame-gray-3;
|
||||
box-shadow: $kungalgame-shadow-1;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 2px $kungalgame-gray-3,
|
||||
inset -1px -1px 2px $kungalgame-white;
|
||||
box-shadow: $kungalgame-shadow-2;
|
||||
}
|
||||
}
|
||||
/* 单个帖子的标题样式 */
|
||||
|
|
|
@ -1,10 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import router from '@/router'
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/')
|
||||
}
|
||||
// Vue 中不允许在 template 中用 '<' 这个符号,换成 msg
|
||||
const msg = '< 返回主页'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -32,11 +28,12 @@ const handleClick = () => {
|
|||
<i class="fa-brands fa-bilibili"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 返回主页 -->
|
||||
<div class="return" @click="handleClick">
|
||||
<!-- 这里 Vue 不让用 < 这个符号,换成图标字体 -->
|
||||
<span><Icon icon="line-md:arrow-small-left" />返回主页</span>
|
||||
</div>
|
||||
<router-link to="/">
|
||||
<!-- 返回主页 -->
|
||||
<div class="return">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<!-- 版权 -->
|
||||
<div class="copyright">
|
||||
<span>Copyright © 2023 KUNgalgame</span>
|
||||
|
|
|
@ -942,7 +942,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/bg5.png');
|
||||
/* background-image: url(./img/bg/bg2.png; */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
Loading…
Reference in a new issue