hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

feat: rebuild update log page

Browse source
This commit is contained in:
KUN1007 2023-10-13 22:20:42 +08:00
parent 1e715c1d09
commit 2312284ed7
2 changed files with 49 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/views/update-log/components/History.vue
View file

@ -1,12 +1,33 @@
<script setup lang="ts">
import SingleHistory from './SingleLog.vue'
import { getUpdateLogApi } from '@/api/update-log/index'
import { UpdateLog } from '@/api'
import { ref, onBeforeMount } from 'vue'
// 在组件中定义响应式的话题数据
const topics = ref<UpdateLog[]>([])
// 在组件挂载时调用 fetchTopics 获取话题数据
onBeforeMount(async () => {
topics.value = await getUpdateLogApi()
})
</script>
<template>
<div class="article-history">
<!-- 历史更新列表 -->
<ul class="history-list">
<SingleHistory />
<ul class="history-list" v-if="topics.length">
<!-- 单个项目 -->
<li v-for="kun in topics" :key="kun.upid">
<!-- 更新内容 -->
<!-- <div v-for="yuyu in kun.describe" :key="yuyu.index"> -->
<div>
<p>{{ kun.description }}</p>
</div>
<!-- 更新时间和版本 -->
<div class="time">
<span>{{ kun.time }} - Version {{ kun.version }}</span>
</div>
</li>
</ul>
</div>
</template>
@ -39,4 +60,29 @@ import SingleHistory from './SingleLog.vue'
scrollbar-width: thin;
scrollbar-color: var(--kungalgame-blue-4) var(--kungalgame-blue-1); /* Firefox 64+ */
}
/* 单个更新历史 */
li {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: 1px solid var(--kungalgame-blue-4);
&:first-child {
margin-top: 10px;
}
}
/* 单条更新内容 */
p {
margin: 5px 0;
}
/* 更新时间和版本 */
.time {
display: flex;
justify-content: end;
font-size: 13px;
margin-top: 7px;
margin-right: 10px;
letter-spacing: 1px;
}
</style>

55
src/views/update-log/components/SingleLog.vue
View file

@ -1,55 +0,0 @@
<script setup lang="ts">
import { getUpdateLogApi } from '@/api/update-log/index'
import { UpdateLog } from '@/api'
import { ref, onBeforeMount } from 'vue'
// 在组件中定义响应式的话题数据
const topics = ref<UpdateLog[]>([])
// 在组件挂载时调用 fetchTopics 获取话题数据
onBeforeMount(async () => {
topics.value = await getUpdateLogApi()
})
</script>
<template>
<!-- 单个项目 -->
<li v-for="kun in topics" :key="kun.upid">
<!-- 更新内容 -->
<!-- <div v-for="yuyu in kun.describe" :key="yuyu.index"> -->
<div>
<p>{{ kun.description }}</p>
</div>
<!-- 更新时间和版本 -->
<div class="time">
<span>{{ kun.time }} - Version {{ kun.version }}</span>
</div>
</li>
</template>
<style lang="scss" scoped>
/* 单个更新历史 */
li {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: 1px solid var(--kungalgame-blue-4);
&:first-child {
margin-top: 10px;
}
}
/* 单条更新内容 */
p {
margin: 5px 0;
}
/* 更新时间和版本 */
.time {
display: flex;
justify-content: end;
font-size: 13px;
margin-top: 7px;
margin-right: 10px;
letter-spacing: 1px;
}
</style>