mod: technique page
This commit is contained in:
KUN1007
parent
03fd0709ec
commit
cf278462ef
|
|
@ -1,14 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import SingleTopic from './components/SingleTopic.vue'
|
||||
import Pagination from './components/Pagination.vue'
|
||||
import Aside from './components/Aside.vue'
|
||||
|
||||
import { ref, onBeforeMount } from 'vue'
|
||||
|
||||
// 在组件中定义响应式的话题数据
|
||||
const topics = ref()
|
||||
|
||||
// 在组件挂载时调用 fetchTopics 获取话题数据
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
} catch (error) {
|
||||
|
|
@ -16,13 +13,12 @@ onBeforeMount(async () => {
|
|||
}
|
||||
})
|
||||
|
||||
// 导入设置面板 store
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed } from 'vue'
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
|
||||
|
||||
const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
|
||||
|
||||
const techniquePageWidth = computed(() => {
|
||||
return showKUNGalgamePageWidth.value.Technique + '%'
|
||||
})
|
||||
|
|
@ -30,14 +26,9 @@ const techniquePageWidth = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="root">
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<Aside class="aside" />
|
||||
<!-- 文章容器 -->
|
||||
<div class="article">
|
||||
<!-- 所有文章的容器 -->
|
||||
<div class="article-container">
|
||||
<!-- TODO: -->
|
||||
<h1 style="margin: auto">This page is under development.</h1>
|
||||
|
||||
<div class="topic" v-for="topic in topics" :key="topic.topicId">
|
||||
|
|
@ -52,52 +43,39 @@ const techniquePageWidth = computed(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.root {
|
||||
height: 1500px;
|
||||
height: calc(100vh - 65px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 内容区 */
|
||||
|
||||
.content {
|
||||
/* 距离内部的距离 */
|
||||
padding: 5px;
|
||||
height: 1400px;
|
||||
/* 占总页面的宽度 */
|
||||
height: 100%;
|
||||
transition: width 0.2s;
|
||||
width: v-bind(techniquePageWidth);
|
||||
/* 水平垂直居中 */
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
/* 全局字体颜色 */
|
||||
color: var(--kungalgame-font-color-3);
|
||||
border: 1px solid var(--kungalgame-trans-blue-2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
/*
|
||||
|
||||
文章部分
|
||||
|
||||
*/
|
||||
.article {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
/* 随页面大小变化自增长 */
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 距离左侧交互的距离 */
|
||||
margin-left: 10px;
|
||||
}
|
||||
/* 所有文章的容器 */
|
||||
|
||||
.article-container {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
/* 自填充自增长子元素 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
/* 固定 5 行，行高固定 */
|
||||
grid-template-rows: repeat(5, 255px);
|
||||
/* 设置 grid 布局的块间距，gap 取代了之前的 grid-gap */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import Tags from './Tags.vue'
|
||||
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边的交互栏 -->
|
||||
<div class="aside">
|
||||
<div class="aside-container">
|
||||
<!-- 页面的标题 -->
|
||||
<div class="page-title">技术交流</div>
|
||||
<!-- 推荐标签 -->
|
||||
<div class="recommend">
|
||||
<span>galgame 汉化相关</span>
|
||||
<span>galgame 运行相关</span>
|
||||
<span>galgame 制作相关</span>
|
||||
</div>
|
||||
<!-- 热门标签 -->
|
||||
<Tags />
|
||||
<!-- 版权 -->
|
||||
<KUNGalgameFooter
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
left: 10%;
|
||||
font-size: 15px;
|
||||
/* 文字间距 */
|
||||
letter-spacing: 1px;
|
||||
line-height: 20px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 侧边的交互栏 */
|
||||
.aside {
|
||||
/* 固定宽度 */
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
border: 1px solid var(--kungalgame-trans-blue-4);
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* 侧边栏容器，调透明色用 */
|
||||
.aside-container {
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
var(--kungalgame-trans-blue-0),
|
||||
var(--kungalgame-trans-pink-0)
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 相对于版权定位 */
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* “技术交流几个字” */
|
||||
.page-title {
|
||||
/* 固定高度 */
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 40px;
|
||||
color: var(--kungalgame-blue-3);
|
||||
font-style: italic;
|
||||
text-shadow: 1px 1px 3px var(--kungalgame-red-4);
|
||||
}
|
||||
/* 侧边搜索框 */
|
||||
.search {
|
||||
background-color: var(--kungalgame-trans-blue-2);
|
||||
display: flex;
|
||||
}
|
||||
/* 推荐标签 */
|
||||
.recommend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 单个推荐标签的样式 */
|
||||
.recommend span {
|
||||
/* 固定高度 */
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--kungalgame-trans-blue-4);
|
||||
cursor: pointer;
|
||||
}
|
||||
.recommend span:hover {
|
||||
background-color: var(--kungalgame-trans-red-2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import { tagsList } from './tags'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 热门标签池 -->
|
||||
<div class="tags-container">
|
||||
<div>热门标签</div>
|
||||
<!-- 单个话题容器 -->
|
||||
<ul class="tags">
|
||||
<!-- 单个标签，最大输入文字为 10 个 -->
|
||||
<li v-for="kun in tagsList" :key="kun.index">
|
||||
<Icon class="icon" icon="ant-design:tag-twotone" /><RouterLink
|
||||
:to="kun.router"
|
||||
>{{ kun.data }}</RouterLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 热门标签池 */
|
||||
.tags-container {
|
||||
/* 左右间距 */
|
||||
padding: 10px;
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 单个标签容器 */
|
||||
.tags {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > li {
|
||||
height: 30px;
|
||||
/* 不换行 */
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > a {
|
||||
color: var(--kungalgame-font-color-3);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid var(--kungalgame-trans-white-9);
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--kungalgame-blue-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签的图标字体 */
|
||||
.icon {
|
||||
color: var(--kungalgame-red-4);
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
|
||||
|
||||
interface tags {
|
||||
index: number
|
||||
data: string
|
||||
router: string
|
||||
}
|
||||
|
||||
export const tagsList: tags[] = [
|
||||
{
|
||||
index: 1,
|
||||
data: '啊这可海星',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
data: '啊这可海星啊这可海星',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
data: 'KUN KUN KUN',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
data: '啊这可海星啊这可海星啊这可海星',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 7,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 8,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 9,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
{
|
||||
index: 10,
|
||||
data: '鲲鲲鲲',
|
||||
router: '/pool',
|
||||
},
|
||||
]
|
||||
Loading…
Reference in a new issue