fix pool page
This commit is contained in:
KUN1007
parent
95b4a09011
commit
47c57658b3
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -6,6 +6,7 @@
|
|||
"galgame",
|
||||
"Galgame",
|
||||
"iconify",
|
||||
"INTLIFY",
|
||||
"kungal",
|
||||
"kungalgame",
|
||||
"kungalgamer",
|
||||
|
|
@ -18,6 +19,7 @@
|
|||
"signin",
|
||||
"sina",
|
||||
"tanstack",
|
||||
"tencent",
|
||||
"Upvotes",
|
||||
"VARCHAR",
|
||||
"weixin",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
|
||||
import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
|
||||
import Tags from './components/Tags.vue'
|
||||
import Line from './components/Line.vue'
|
||||
import Topic from './components/Topic.vue'
|
||||
// 导入瀑布流
|
||||
import { Waterfall } from 'vue-waterfall-plugin-next'
|
||||
import 'vue-waterfall-plugin-next/dist/style.css'
|
||||
|
||||
const list = [
|
||||
{
|
||||
index: 1,
|
||||
|
|
@ -50,6 +54,8 @@ const list = [
|
|||
alt: 'azkhx',
|
||||
},
|
||||
]
|
||||
|
||||
const backgroundColor = 'var()'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -60,12 +66,28 @@ const list = [
|
|||
<!-- 帖子池容器 -->
|
||||
<div class="pool-container">
|
||||
<KUNGalgameSearchBox style="width: 100%; height: 40px" />
|
||||
<Line />
|
||||
<Tags />
|
||||
<!-- 帖子池内容区容器 -->
|
||||
<div class="content-container">
|
||||
<!-- 帖子池单个帖子列容器 -->
|
||||
<div class="single-topic-column-container"></div>
|
||||
<div class="single-topic-column-container">
|
||||
<Waterfall
|
||||
:list="list"
|
||||
:background-color="'#00000000'"
|
||||
:breakpoints="{
|
||||
800: {
|
||||
rowPerView: 4,
|
||||
},
|
||||
576: {
|
||||
rowPerView: 3,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template #item="{ item, url, index }">
|
||||
<Topic />
|
||||
</template>
|
||||
</Waterfall>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧的功能栏 -->
|
||||
|
|
@ -76,17 +98,12 @@ const list = [
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.visual-wrapper {
|
||||
height: 1500px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 700px;
|
||||
}
|
||||
/* 帖子池容器 */
|
||||
.pool-container {
|
||||
/* 最小宽度 */
|
||||
min-width: 900px;
|
||||
/* 最大宽度 */
|
||||
max-width: 1450px;
|
||||
/* 占页面的宽度比例 */
|
||||
width: 90%;
|
||||
/* 居中 */
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
<template>
|
||||
<!-- 右侧部分 -->
|
||||
<div class="kungalgame-right-bar-right">
|
||||
<div class="bar">
|
||||
<div class="triangle"></div>
|
||||
<!-- 对帖子进行排序 -->
|
||||
<div class="sort">
|
||||
<div>排序</div>
|
||||
<!-- 左侧部分 -->
|
||||
<div class="kungalgame-right-bar-left">
|
||||
<div class="func">
|
||||
<!-- 按照浏览数排序 -->
|
||||
<div><i class="fa-regular fa-eye"></i> 按照浏览数排序</div>
|
||||
<!-- 按照点赞数排序 -->
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
/* 功能栏的左侧 */
|
||||
.kungalgame-right-bar-left {
|
||||
.func {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
right: 50px;
|
||||
|
|
@ -36,27 +36,27 @@
|
|||
display: none;
|
||||
background-color: var(--kungalgame-blue-2);
|
||||
}
|
||||
.kungalgame-right-bar-left > div {
|
||||
.func > div {
|
||||
padding: 7px;
|
||||
}
|
||||
.kungalgame-right-bar-left > div:hover {
|
||||
.func > div:hover {
|
||||
background-color: var(--kungalgame-red-2);
|
||||
}
|
||||
/* 排序 hover 出现 */
|
||||
.kungalgame-right-bar .sort:hover .kungalgame-right-bar-left {
|
||||
.kungalgame-right-bar .sort:hover .func {
|
||||
display: block;
|
||||
}
|
||||
/* 图标字体的颜色 */
|
||||
.kungalgame-right-bar-left i {
|
||||
.func i {
|
||||
margin-right: 10px;
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
/* 最后一个排序的样式 */
|
||||
.kungalgame-right-bar-left div:last-child i {
|
||||
.func div:last-child i {
|
||||
margin-right: 14px;
|
||||
}
|
||||
/* 右侧部分 */
|
||||
.kungalgame-right-bar-right {
|
||||
.bar {
|
||||
position: relative;
|
||||
}
|
||||
.triangle {
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
// 模拟数据
|
||||
interface tag {
|
||||
index: number
|
||||
name: string
|
||||
}
|
||||
|
||||
const tags: tag[] = [
|
||||
{
|
||||
index: 1,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 7,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 8,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 9,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 10,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tags">
|
||||
<div class="lines">
|
||||
<div class="row">
|
||||
<div class="track">
|
||||
<div class="line" v-for="kun in tags" :key="kun.index">
|
||||
<span>{{ kun.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@property --d-c {
|
||||
syntax: '<number>';
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
|
||||
.tags {
|
||||
height: 500px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lines {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.track {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
animation: slide 1s reverse linear infinite;
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
translate: -100%;
|
||||
}
|
||||
to {
|
||||
translate: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,53 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
// 模拟数据
|
||||
interface tag {
|
||||
index: number
|
||||
name: string
|
||||
}
|
||||
|
||||
const tags: tag[] = [
|
||||
{
|
||||
index: 1,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
]
|
||||
import { tags } from './tags'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 帖子池顶部交互栏 -->
|
||||
<div class="pool-nav-bar">
|
||||
<!-- 热门帖子标签，根据所有帖子的总标签数推断 -->
|
||||
<div class="track">
|
||||
<span class="nav-tags" v-for="kun in tags" :key="kun.index">{{
|
||||
kun.name
|
||||
}}</span>
|
||||
</div>
|
||||
<span class="nav-tags" v-for="kun in tags" :key="kun.index">{{
|
||||
kun.name
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@property --d-c {
|
||||
syntax: '<number>';
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
|
||||
/* 帖子池顶部交互栏 */
|
||||
.pool-nav-bar {
|
||||
height: 100px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: max(20px, 10vw);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* 热门帖子标签 */
|
||||
.nav-tags {
|
||||
|
|
@ -59,59 +29,8 @@ const tags: tag[] = [
|
|||
padding: 2px;
|
||||
background-color: var(--kungalgame-trans-blue-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.track {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
transition: 1s;
|
||||
animation: slide calc(var(--d) * var(--d-c, 1)) linear infinite;
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
translate: var(--from) 0;
|
||||
}
|
||||
to {
|
||||
translate: var(--to) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tags {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
background: var(--bg);
|
||||
flex: 1 0 auto;
|
||||
width: calc(1em * var(--w));
|
||||
margin-right: clamp(30px, 0.5em, 60px);
|
||||
}
|
||||
|
||||
$colors: #fff, #fff, #fff, #51da4c, #51da4c;
|
||||
$widths: 1, 2, 2, 3, 3, 4, 4;
|
||||
$durations: 10s, 15s, 12.5s;
|
||||
|
||||
@function pick($array) {
|
||||
@return #{nth($array, random(length($array)))};
|
||||
}
|
||||
|
||||
@for $r from 1 through 6 {
|
||||
.row:nth-child(#{$r}) {
|
||||
--d: #{pick($durations)};
|
||||
|
||||
&:nth-child(odd) {
|
||||
--from: -50%;
|
||||
--to: 0%;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
--to: -50%;
|
||||
}
|
||||
|
||||
@for $l from 1 through 7 {
|
||||
.line:nth-child(7n + #{$l}) {
|
||||
--bg: #{pick($colors)};
|
||||
--w: #{pick($widths)};
|
||||
}
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,8 +65,6 @@
|
|||
}
|
||||
/* 帖子的内容区 */
|
||||
.topic-content {
|
||||
/* 单个帖子的最大高度 */
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
|
|
|
|||
137
src/views/pool/components/tags.ts
Normal file
137
src/views/pool/components/tags.ts
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
|
||||
|
||||
interface tag {
|
||||
index: number
|
||||
name: string
|
||||
}
|
||||
|
||||
export const tags: tag[] = [
|
||||
{
|
||||
index: 1,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: '啊这可海星啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 6,
|
||||
name: '啊这可海星啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 7,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 8,
|
||||
name: '啊这可海星啊这可',
|
||||
},
|
||||
{
|
||||
index: 9,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 10,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 11,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 12,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 13,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 14,
|
||||
name: 'KUN',
|
||||
},
|
||||
{
|
||||
index: 15,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 16,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 17,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 18,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 19,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 20,
|
||||
name: 'azkhx',
|
||||
},
|
||||
{
|
||||
index: 21,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 22,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 23,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 24,
|
||||
name: 'azkhx azkhx',
|
||||
},
|
||||
{
|
||||
index: 25,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 26,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 27,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 28,
|
||||
name: 'yuyu-kun',
|
||||
},
|
||||
{
|
||||
index: 29,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 30,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 31,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
{
|
||||
index: 32,
|
||||
name: '啊这可海星',
|
||||
},
|
||||
]
|
||||
|
|
@ -13,11 +13,10 @@ export default defineConfig({
|
|||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
// css: {
|
||||
// preprocessorOptions: {
|
||||
// scss: {
|
||||
// additionalData: `@use "@/styles/index.scss" as *;`,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// 消除 i18n 警告
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: true,
|
||||
__VUE_I18N_LEGACY_API__: false,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue