aside template styles

This commit is contained in:
KUN1007 2023-05-26 02:05:35 +08:00
parent ad27057ea6
commit fdd57d4880
13 changed files with 113 additions and 81 deletions

View file

@ -1,6 +1,7 @@
{
"cSpell.words": [
"axios",
"Bilibili",
"galgame",
"Galgame",
"iconify",

View file

@ -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)
// selectedLocaleVue I18nlocale
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'
/*
* 设置面板显示切换

View 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,
}

View file

@ -2,4 +2,10 @@ export default {
header: {
name: 'KUNGalgame',
},
mainPage: {
asideActive: {
hot: `Today's Hot Topic`,
new: `Today's New Topic`,
},
},
}

View file

@ -2,4 +2,10 @@ export default {
header: {
name: '鲲Galgame',
},
mainPage: {
asideActive: {
hot: `今日热门话题`,
new: `今日最新话题`,
},
},
}

View file

@ -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;

View file

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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;
}
}
/* 单个帖子的标题样式 */

View file

@ -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>

View file

@ -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;