update log page i18n, fix top bar and settings panel BUG

This commit is contained in:
KUN1007 2023-05-31 23:10:26 +08:00
parent c8ed18f0c1
commit ac5139678a
7 changed files with 49 additions and 226 deletions

View file

@ -157,6 +157,7 @@ const handleCustomBackground = () => {
flex-shrink: 0; flex-shrink: 0;
padding: 0 10px; padding: 0 10px;
height: 25px; height: 25px;
width: 70px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $kungalgame-blue-4; border: 1px solid $kungalgame-blue-4;
border-left: none; border-left: none;

View file

@ -38,7 +38,7 @@ import {
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
top: -250px; top: -250px;
left: 120px; left: 150px;
} }
.lass { .lass {
position: absolute; position: absolute;

View file

@ -44,4 +44,12 @@ export default {
master: 'Other Topics of The Master', 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',
},
} }

View file

@ -44,4 +44,12 @@ export default {
master: '楼主的其它帖子', master: '楼主的其它帖子',
}, },
}, },
update: {
next: '下个版本',
update: '更新信息',
info: '更新预览 / 更多信息',
visit: '点击访问 github',
time: '预计更新时间',
history: '历史版本',
},
} }

View file

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

View file

@ -18,13 +18,13 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
<!-- 下个版本计划更新 --> <!-- 下个版本计划更新 -->
<div class="next-ver"> <div class="next-ver">
<!-- 标题 --> <!-- 标题 -->
<div class="title">下个版本</div> <div class="title">{{ $t('update.next') }}</div>
<Next /> <Next />
</div> </div>
<!-- 历史版本 --> <!-- 历史版本 -->
<div class="history-ver"> <div class="history-ver">
<!-- 标题 --> <!-- 标题 -->
<div class="title">历史版本</div> <div class="title">{{ $t('update.history') }}</div>
<!-- 历史更新的内容 --> <!-- 历史更新的内容 -->
<History /> <History />
</div> </div>

View file

@ -1,24 +1,32 @@
<script setup lang="ts"></script> <script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>
<template> <template>
<!-- 更新的内容 --> <!-- 更新的内容 -->
<div class="article-next"> <div class="article-next">
<div class="describe"> <div class="describe">
<div>更新信息</div> <div>{{ $t('update.update') }}</div>
<p>1. 添加数据统计页面</p> <p>1. 添加数据统计页面</p>
<p>2. 修复关于我们页面布局</p> <p>2. 修复关于我们页面布局</p>
<p>3. 其他细节修复</p> <p>3. 其他细节修复</p>
</div> </div>
<!-- 更新预览 --> <!-- 更新预览 -->
<div class="preview"> <div class="preview">
<div>更新预览 / 更多信息</div> <div>{{ $t('update.info') }}</div>
<a href="https://github.com/KUN1007/KUNGalGame-vue" target="_blank" <a
>点击访问 github</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>
<!-- 预计更新时间 --> <!-- 预计更新时间 -->
<div class="time"> <div class="time">
<span>预计更新时间: 2019/10/7</span> <span>{{ $t('update.time') }}: 2019/10/7</span>
</div> </div>
</div> </div>
</template> </template>
@ -42,12 +50,13 @@
} }
/* 更新预览 */ /* 更新预览 */
.preview { .preview {
margin-top: 100px; margin-top: 70px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
& > a { }
.github {
margin-top: 10px; margin-top: 10px;
color: $kungalgame-blue-4; color: $kungalgame-blue-4;
border-bottom: 2px solid $kungalgame-trans-white-8; border-bottom: 2px solid $kungalgame-trans-white-8;
@ -56,11 +65,15 @@
border-bottom: 2px solid $kungalgame-blue-4; border-bottom: 2px solid $kungalgame-blue-4;
} }
} }
}
/* 预计更新时间 */ /* 预计更新时间 */
.time { .time {
margin-top: 80px; margin-top: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.icon {
margin-top: 20px;
font-size: 50px;
color: $kungalgame-font-color-2;
}
</style> </style>