aside template styles

.vscode/settings.json

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

src/components/setting-panel/KUNGalgameSettingPanel.vue

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

src/config/storage/lang-storage.ts

@@ -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,
+}

src/language/en.ts

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

src/language/zh.ts

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

src/styles/color.scss

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

src/views/Home/content/aside/components/Aside.vue

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

src/views/Home/content/aside/components/AsideActive.vue

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

src/views/Home/content/aside/topic/Topic.vue

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

src/views/Home/content/aside/topic/components/SingleTopic.vue

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

src/views/contacts/Contacts.vue

@@ -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>
+      <router-link to="/">
         <!-- 返回主页 -->
-      <div class="return" @click="handleClick">
-        <!-- 这里 Vue 不让用 < 这个符号，换成图标字体 -->
-        <span><Icon icon="line-md:arrow-small-left" />返回主页</span>
+        <div class="return">
+          <span>{{ msg }}</span>
         </div>
+      </router-link>
       <!-- 版权 -->
       <div class="copyright">
         <span>Copyright © 2023 KUNgalgame</span>

src/views/rank/Rank.vue

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