update technique page tags
This commit is contained in:
KUN1007
parent
1f0787b80a
commit
77be61526c
|
|
@ -1,5 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 接受父组件传值,若是主页则显示搜索历史
|
||||
defineProps(['isMainPage'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -18,7 +20,7 @@ import { Icon } from '@iconify/vue'
|
|||
</div>
|
||||
</form>
|
||||
<!-- 搜索历史容器 -->
|
||||
<div class="history">
|
||||
<div class="history" v-if="$props.isMainPage">
|
||||
<!-- 搜索历史标题 -->
|
||||
<div class="title">
|
||||
<span>搜索历史</span>
|
||||
|
|
@ -53,7 +55,7 @@ import { Icon } from '@iconify/vue'
|
|||
/* 相对于二级菜单定位 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
border: 1px solid $kungalgame-trans-blue-4;
|
||||
border-bottom: 1px solid $kungalgame-trans-blue-4;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background-color: $kungalgame-trans-white-2;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
|
|||
</div>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<KUNGalgameSearchBox />
|
||||
<KUNGalgameSearchBox :isMainPage="true" />
|
||||
<!-- 交互区域进入全部话题 -->
|
||||
<div class="nav-article-more-topic">
|
||||
<span>全部帖子</span>
|
||||
|
|
@ -77,6 +77,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
|
|||
border-radius: 5px 0 0 0;
|
||||
position: relative;
|
||||
border-bottom: 1px solid $kungalgame-trans-blue-4;
|
||||
border-right: 1px solid $kungalgame-trans-blue-4;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -136,6 +137,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
|
|||
border-radius: 0 5px 0 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid $kungalgame-trans-blue-4;
|
||||
border-left: 1px solid $kungalgame-trans-blue-4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-article-more-topic:hover {
|
||||
|
|
|
|||
|
|
@ -1,58 +1,44 @@
|
|||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import Tags from './Tags.vue'
|
||||
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
||||
import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边的交互栏 -->
|
||||
<div class="aside">
|
||||
<div class="aside-container">
|
||||
<!-- 页面的标题 -->
|
||||
<div class="page-title">技术交流</div>
|
||||
<!-- 侧边的搜索框 -->
|
||||
<div class="nav-search">
|
||||
<!-- 搜索框表单 -->
|
||||
<form class="article-search-form">
|
||||
<!-- 搜索框内容 -->
|
||||
<div class="nav-search-content">
|
||||
<!-- 框体 -->
|
||||
<input
|
||||
type="search"
|
||||
class="nav-search-input"
|
||||
placeholder="搜索帖子"
|
||||
/>
|
||||
</div>
|
||||
<!-- 搜索框图标 -->
|
||||
<div class="nav-search-btn">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</div>
|
||||
</form>
|
||||
</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 class="aside">
|
||||
<div class="aside-container">
|
||||
<!-- 页面的标题 -->
|
||||
<div class="page-title">技术交流</div>
|
||||
<!-- 侧边的搜索框 -->
|
||||
<div class="search">
|
||||
<KUNGalgameSearchBox style="height: 40px; width: 100%" />
|
||||
</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>
|
||||
<style lang="scss" scoped>
|
||||
/* 侧边的交互栏 */
|
||||
.aside {
|
||||
/* 固定宽度 */
|
||||
|
|
@ -89,69 +75,11 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
|||
text-shadow: 1px 1px 3px $kungalgame-red-4;
|
||||
}
|
||||
/* 侧边搜索框 */
|
||||
.nav-search {
|
||||
.search {
|
||||
background-color: $kungalgame-trans-blue-2;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-search:hover {
|
||||
background-color: $kungalgame-trans-white-2;
|
||||
}
|
||||
/* 搜索框表单 */
|
||||
.article-search-form {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/* 随着页面自增长 */
|
||||
width: 1px;
|
||||
flex-grow: 1;
|
||||
/* 居中 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 搜索内容区 */
|
||||
.nav-search-content {
|
||||
width: 100%;
|
||||
}
|
||||
/* 框体 */
|
||||
.nav-search-input {
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
/* 搜索时输入的字体大小 */
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: $kungalgame-trans-white-9;
|
||||
}
|
||||
/* 提示文字“搜索帖子”的文字颜色 */
|
||||
.nav-search-input::placeholder {
|
||||
color: $kungalgame-font-color-2;
|
||||
}
|
||||
/* 获取焦点后的框体 */
|
||||
.nav-search-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
/* 搜索按钮 */
|
||||
.nav-search-btn {
|
||||
/* 正方形，不缩小 */
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid $kungalgame-trans-blue-3;
|
||||
/* 搜索图标居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 内边距盒子 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 搜索按钮的 hover */
|
||||
.nav-search-btn:hover {
|
||||
background-color: $kungalgame-red-2;
|
||||
}
|
||||
/* 搜索按钮的 active */
|
||||
.nav-search-btn:active {
|
||||
background-color: $kungalgame-red-3;
|
||||
}
|
||||
/* 推荐标签 */
|
||||
.recommend {
|
||||
display: flex;
|
||||
|
|
@ -171,4 +99,4 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
|||
.recommend span:hover {
|
||||
background-color: $kungalgame-trans-red-2;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,12 @@ import { Icon } from '@iconify/vue'
|
|||
<!-- 帖子的标签 -->
|
||||
<div class="topic-tags">
|
||||
<!-- 单个标签 -->
|
||||
<span><i class="fa-solid fa-tag"></i>啊这可海星啊这可海星</span>
|
||||
<span
|
||||
><Icon
|
||||
class="icon"
|
||||
icon="ant-design:tag-twotone"
|
||||
/>啊这可海星啊这可海星</span
|
||||
>
|
||||
<span>啊这可海星啊这可海星</span>
|
||||
<span>啊这可海星</span>
|
||||
<span>啊这可海星</span>
|
||||
|
|
@ -184,10 +189,6 @@ import { Icon } from '@iconify/vue'
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
/* 图标字体距离数字的距离 */
|
||||
.topic-status > div > i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* 帖子的标签 */
|
||||
.topic-tags {
|
||||
/* 占满单个帖子区域 */
|
||||
|
|
@ -212,7 +213,10 @@ import { Icon } from '@iconify/vue'
|
|||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.topic-tags > span > i {
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
color: $kungalgame-red-4;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +1,66 @@
|
|||
<script setup lang='ts'>
|
||||
<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>
|
||||
<i class="fa-solid fa-tag"></i><span>啊这可海星啊这可海星</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa-solid fa-tag"></i><span>KUN KUN KUN KUN</span>
|
||||
</li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊海星</span></li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊星</span></li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊这可海星</span></li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊这可星</span></li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊这海星</span></li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊这星</span></li>
|
||||
<li>
|
||||
<i class="fa-solid fa-tag"></i><span>啊这啊这可海星可海星</span>
|
||||
</li>
|
||||
<li><i class="fa-solid fa-tag"></i><span>啊这可海</span></li>
|
||||
<li>
|
||||
<i class="fa-solid fa-tag"></i><span>啊这可海星啊这可海星</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 热门标签池 -->
|
||||
<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" /><router-link
|
||||
:to="kun.router"
|
||||
>{{ kun.data }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
/* 热门标签池 */
|
||||
.tags-container {
|
||||
/* 左右间距 */
|
||||
padding: 10px;
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
/* “热门标签几个字” */
|
||||
.tags-container > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* 单个标签容器 */
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > li {
|
||||
height: 30px;
|
||||
/* 不换行 */
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > a {
|
||||
color: $kungalgame-font-color-3;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid $kungalgame-trans-white-9;
|
||||
&:hover {
|
||||
border-bottom: 2px solid $kungalgame-blue-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 单个标签 */
|
||||
.tags > li {
|
||||
height: 30px;
|
||||
/* 不换行 */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 标签的图标字体 */
|
||||
.tags > li i {
|
||||
color: $kungalgame-red-3;
|
||||
.icon {
|
||||
color: $kungalgame-red-4;
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 标签的文字部分 */
|
||||
.tags > li > span {
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid $kungalgame-trans-white-9;
|
||||
}
|
||||
.tags > li > span:hover {
|
||||
border-bottom: 2px solid $kungalgame-blue-4;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
60
src/views/technique/components/tags.ts
Normal file
60
src/views/technique/components/tags.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
|
||||
|
||||
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',
|
||||
},
|
||||
]
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
<script setup lang="ts">
|
||||
import { asideTopic } from './topic'
|
||||
|
||||
const props = defineProps(['isMasterTopics'])
|
||||
// 接受父组件传值,若是楼主的帖子则变色
|
||||
defineProps(['isMasterTopics'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
|
||||
|
||||
interface topic {
|
||||
index: number
|
||||
name: string
|
||||
|
|
|
|||
Loading…
Reference in a new issue