From ac5139678aab5ff260fddb6d2b63a235610eab26 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Wed, 31 May 2023 23:10:26 +0800
Subject: [PATCH] update log page i18n, fix top bar and settings panel BUG

---
 .../setting-panel/components/Background.vue   |   1 +
 .../setting-panel/components/Loli.vue         |   2 +-
 src/language/en.ts                            |   8 +
 src/language/zh.ts                            |   8 +
 src/views/balance/components/Exp.vue          | 207 ------------------
 src/views/update-log/UpdateLog.vue            |   4 +-
 src/views/update-log/components/Next.vue      |  45 ++--
 7 files changed, 49 insertions(+), 226 deletions(-)
 delete mode 100644 src/views/balance/components/Exp.vue

diff --git a/src/components/setting-panel/components/Background.vue b/src/components/setting-panel/components/Background.vue
index d828731b..ac18520a 100644
--- a/src/components/setting-panel/components/Background.vue
+++ b/src/components/setting-panel/components/Background.vue
@@ -157,6 +157,7 @@ const handleCustomBackground = () => {
     flex-shrink: 0;
     padding: 0 10px;
     height: 25px;
+    width: 70px;
     box-sizing: border-box;
     border: 1px solid $kungalgame-blue-4;
     border-left: none;
diff --git a/src/components/setting-panel/components/Loli.vue b/src/components/setting-panel/components/Loli.vue
index 3d9da180..56c11a87 100644
--- a/src/components/setting-panel/components/Loli.vue
+++ b/src/components/setting-panel/components/Loli.vue
@@ -38,7 +38,7 @@ import {
   position: fixed;
   z-index: 9999;
   top: -250px;
-  left: 120px;
+  left: 150px;
 }
 .lass {
   position: absolute;
diff --git a/src/language/en.ts b/src/language/en.ts
index d78a2eca..e4863793 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -44,4 +44,12 @@ export default {
       master: 'Other Topics of The Master',
     },
   },
+  update: {
+    next: 'Next Version',
+    update: 'Update Info',
+    info: 'Update Preview / More Info',
+    visit: 'Click to visit github',
+    time: 'Estimated update time',
+    history: 'History Version',
+  },
 }
diff --git a/src/language/zh.ts b/src/language/zh.ts
index 5e158c5e..ae0cb28d 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -44,4 +44,12 @@ export default {
       master: '楼主的其它帖子',
     },
   },
+  update: {
+    next: '下个版本',
+    update: '更新信息',
+    info: '更新预览 / 更多信息',
+    visit: '点击访问 github',
+    time: '预计更新时间',
+    history: '历史版本',
+  },
 }
diff --git a/src/views/balance/components/Exp.vue b/src/views/balance/components/Exp.vue
deleted file mode 100644
index f6fc8e55..00000000
--- a/src/views/balance/components/Exp.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <!-- 支出 -->
-  <div class="expenditure">
-    <!-- 支出 -->
-    <div class="expenditure-title">支出</div>
-    <!-- 支出记录的容器 -->
-    <div class="expenditure-container">
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-      <!-- 单条支出 -->
-      <div class="single-expenditure">
-        <!-- 支出原因 -->
-        <div class="expenditure-reason">啊这可海星</div>
-        <!-- 支出时间和金额 -->
-        <div class="expenditure-result">
-          <!-- 支出时间 -->
-          <span class="expenditure-time">2019/10/07</span>
-          <!-- 支出金额 -->
-          <span class="expenditure-amount">- 1007 CNY</span>
-        </div>
-      </div>
-    </div>
-    <!-- 总支出 -->
-    <div class="expenditure-sum">总支出: 1007 CNY</div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 支出 */
-.expenditure {
-  width: 49%;
-  height: 300px;
-  border: 1px solid $kungalgame-red-4;
-  display: flex;
-  flex-direction: column;
-}
-/* "支出"两个字 */
-.expenditure-title {
-  font-size: 20px;
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  border-bottom: 1px solid $kungalgame-red-4;
-  background-color: $kungalgame-trans-red-0;
-}
-/* 支出记录的容器 */
-.expenditure-container {
-  flex-grow: 1;
-  padding: 10px;
-  overflow-y: scroll;
-}
-/* 滚动条的样式 */
-.expenditure-container::-webkit-scrollbar {
-  display: inline;
-  width: 4px;
-  height: 0;
-  background-color: $kungalgame-red-2;
-  border-radius: 2px;
-}
-.expenditure-container::-webkit-scrollbar-thumb {
-  background: $kungalgame-blue-4;
-  border-radius: 2px;
-}
-/* 单条支出 */
-.single-expenditure {
-  margin-top: 20px;
-  border-bottom: 1px solid $kungalgame-red-4;
-}
-/* 支出原因 */
-.expenditure-reason {
-  border-left: 5px solid $kungalgame-red-4;
-  padding-left: 5px;
-}
-/* 支出的时间和金额 */
-.expenditure-result {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-}
-/* 支出时间 */
-.expenditure-time {
-  letter-spacing: 1px;
-}
-/* 支出金额 */
-.expenditure-amount {
-  padding: 0 5px;
-  background-color: $kungalgame-red-2;
-}
-/* 总支出 */
-.expenditure-sum {
-  height: 40px;
-  font-size: 18px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid $kungalgame-red-4;
-  background-color: $kungalgame-trans-red-0;
-}
-</style>
diff --git a/src/views/update-log/UpdateLog.vue b/src/views/update-log/UpdateLog.vue
index b7eec4d8..c573a471 100644
--- a/src/views/update-log/UpdateLog.vue
+++ b/src/views/update-log/UpdateLog.vue
@@ -18,13 +18,13 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         <!-- 下个版本计划更新 -->
         <div class="next-ver">
           <!-- 标题 -->
-          <div class="title">下个版本</div>
+          <div class="title">{{ $t('update.next') }}</div>
           <Next />
         </div>
         <!-- 历史版本 -->
         <div class="history-ver">
           <!-- 标题 -->
-          <div class="title">历史版本</div>
+          <div class="title">{{ $t('update.history') }}</div>
           <!-- 历史更新的内容 -->
           <History />
         </div>
diff --git a/src/views/update-log/components/Next.vue b/src/views/update-log/components/Next.vue
index b099c53e..feb10dbe 100644
--- a/src/views/update-log/components/Next.vue
+++ b/src/views/update-log/components/Next.vue
@@ -1,24 +1,32 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
 
 <template>
   <!-- 更新的内容 -->
   <div class="article-next">
     <div class="describe">
-      <div>更新信息</div>
+      <div>{{ $t('update.update') }}</div>
       <p>1. 添加数据统计页面</p>
       <p>2. 修复关于我们页面布局</p>
       <p>3. 其他细节修复</p>
     </div>
     <!-- 更新预览 -->
     <div class="preview">
-      <div>更新预览 / 更多信息</div>
-      <a href="https://github.com/KUN1007/KUNGalGame-vue" target="_blank"
-        >点击访问 github</a
+      <div>{{ $t('update.info') }}</div>
+      <a
+        class="github"
+        href="https://github.com/KUN1007/KUNGalGame-vue"
+        target="_blank"
+        >{{ $t('update.visit') }}</a
       >
+      <a href="https://github.com/KUN1007/KUNGalGame-vue" target="_blank">
+        <Icon class="icon" icon="raphael:github"
+      /></a>
     </div>
     <!-- 预计更新时间 -->
     <div class="time">
-      <span>预计更新时间: 2019/10/7</span>
+      <span>{{ $t('update.time') }}: 2019/10/7</span>
     </div>
   </div>
 </template>
@@ -42,25 +50,30 @@
 }
 /* 更新预览 */
 .preview {
-  margin-top: 100px;
+  margin-top: 70px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  & > a {
-    margin-top: 10px;
-    color: $kungalgame-blue-4;
-    border-bottom: 2px solid $kungalgame-trans-white-8;
-    cursor: pointer;
-    &:hover {
-      border-bottom: 2px solid $kungalgame-blue-4;
-    }
+}
+.github {
+  margin-top: 10px;
+  color: $kungalgame-blue-4;
+  border-bottom: 2px solid $kungalgame-trans-white-8;
+  cursor: pointer;
+  &:hover {
+    border-bottom: 2px solid $kungalgame-blue-4;
   }
 }
 /* 预计更新时间 */
 .time {
-  margin-top: 80px;
+  margin-top: 20px;
   display: flex;
   justify-content: center;
 }
+.icon {
+  margin-top: 20px;
+  font-size: 50px;
+  color: $kungalgame-font-color-2;
+}
 </style>