mod: pool style
This commit is contained in:
KUN1007
parent
4529935806
commit
54e3ab562b
|
|
@ -94,13 +94,9 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Interactive area search box -->
|
||||
<div class="container">
|
||||
<!-- Search box form -->
|
||||
<form class="search-form">
|
||||
<!-- Search box content -->
|
||||
<div class="content">
|
||||
<!-- Input field -->
|
||||
<input
|
||||
v-model="inputValue"
|
||||
type="search"
|
||||
|
|
@ -113,21 +109,20 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
@keydown.enter="handleClickEnter"
|
||||
/>
|
||||
</div>
|
||||
<!-- Search box icon -->
|
||||
|
||||
<div class="search-btn" @click="handleClickSearch">
|
||||
<Icon icon="line-md:search" />
|
||||
</div>
|
||||
</form>
|
||||
<!-- Search history container -->
|
||||
|
||||
<div v-if="isShowSearchHistory" class="history">
|
||||
<!-- Search history title -->
|
||||
<div class="title">
|
||||
<span>{{ $tm('mainPage.header.history') }}</span>
|
||||
<span @click="clearSearchHistory">
|
||||
{{ $tm('mainPage.header.clear') }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Search history -->
|
||||
|
||||
<div class="history-container">
|
||||
<div
|
||||
class="single-history"
|
||||
|
|
@ -146,49 +141,40 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Search topics */
|
||||
.container {
|
||||
height: 39px;
|
||||
width: 1px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* Prevent line breaks when the page is resized */
|
||||
white-space: nowrap;
|
||||
background-color: var(--kungalgame-trans-blue-2);
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
flex-grow: 2;
|
||||
/* Position relative to the secondary menu */
|
||||
position: relative;
|
||||
display: flex;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
}
|
||||
|
||||
/* Search box form */
|
||||
.search-form {
|
||||
display: flex;
|
||||
height: 39px;
|
||||
/* Grows with the page */
|
||||
width: 1px;
|
||||
flex-grow: 1;
|
||||
/* Centered */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Search content area */
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Input field */
|
||||
.input {
|
||||
padding: 0 15px;
|
||||
height: 39px;
|
||||
width: 100%;
|
||||
/* Font size for input during search */
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
color: var(--kungalgame-font-color-3);
|
||||
transition: all 0.2s;
|
||||
|
||||
|
|
@ -197,14 +183,11 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
/* Search button */
|
||||
.search-btn {
|
||||
/* Square shape, does not shrink */
|
||||
height: 39px;
|
||||
width: 39px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--kungalgame-trans-blue-4);
|
||||
/* Center the search icon */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -221,12 +204,9 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
/* Search history container */
|
||||
.history {
|
||||
width: 100%;
|
||||
/* Absolute positioning relative to the search area in the nav */
|
||||
position: absolute;
|
||||
/* Tight positioning under the topic search area */
|
||||
top: 39px;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
|
|
@ -237,11 +217,9 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* Text for the search history title */
|
||||
.title {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
/* Distribute two hint texts left and right */
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
|
|
@ -257,13 +235,10 @@ const handleDeleteHistory = (historyIndex: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
/* Container for storing search history tags */
|
||||
.history-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Font for individual search records */
|
||||
font-size: 13px;
|
||||
/* Blank space on the left and right sides of the search record */
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,78 +13,58 @@ const { page, keywords, sortField, sortOrder, isLoading } = storeToRefs(
|
|||
useTempHomeStore()
|
||||
)
|
||||
|
||||
// Define reactive topic data in the component
|
||||
const topics = ref<HomeTopic[]>([])
|
||||
// Page container for calculating whether it has reached the bottom
|
||||
const content = ref<HTMLElement>()
|
||||
|
||||
// Function to get page topics
|
||||
const getTopics = async (): Promise<HomeTopic[]> => {
|
||||
return (await useTempHomeStore().getHomeTopic()).data
|
||||
}
|
||||
|
||||
// Call fetchTopics to get topic data (watch is great!)
|
||||
watch([keywords, sortField, sortOrder], async () => {
|
||||
topics.value = await getTopics()
|
||||
})
|
||||
|
||||
// Scroll event handler
|
||||
const scrollHandler = async () => {
|
||||
// Handling logic when scrolling to the bottom
|
||||
if (isScrollAtBottom() && isLoading.value) {
|
||||
// Automatically increment the page number
|
||||
page.value++
|
||||
|
||||
// Get the topics for the next page
|
||||
const lazyLoadTopics = await getTopics()
|
||||
|
||||
// Check if data has already been loaded, if so, no need to load more
|
||||
if (!lazyLoadTopics.length) {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// Append the newly loaded reply data to the existing reply data
|
||||
topics.value = [...topics.value, ...lazyLoadTopics]
|
||||
}
|
||||
}
|
||||
|
||||
// Check if it has scrolled to the bottom
|
||||
const isScrollAtBottom = () => {
|
||||
if (content.value) {
|
||||
const scrollHeight = content.value.scrollHeight
|
||||
const scrollTop = content.value.scrollTop
|
||||
const clientHeight = content.value.clientHeight
|
||||
|
||||
// Compare with a margin of error, as JavaScript floating-point numbers are not precise
|
||||
// Why 1007? Because I got KUN san on October 7th, ahahaha
|
||||
const errorMargin = 1.007
|
||||
return Math.abs(scrollHeight - scrollTop - clientHeight) < errorMargin
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
// Reset page number, loading status, etc. before mounting
|
||||
useTempHomeStore().resetPageStatus()
|
||||
})
|
||||
|
||||
// Add a scroll event listener after the component is mounted
|
||||
onMounted(async () => {
|
||||
// Get a reference to the scrolling element
|
||||
const element = content.value
|
||||
|
||||
// If the element is found, start the listener to track scroll behavior
|
||||
if (element) {
|
||||
element.addEventListener('scroll', scrollHandler)
|
||||
}
|
||||
|
||||
// Load topics for the first time
|
||||
topics.value = await getTopics()
|
||||
})
|
||||
|
||||
// Remove the scroll event listener before the component is unmounted
|
||||
onBeforeUnmount(() => {
|
||||
const element = content.value
|
||||
// If the page element is found, remove the listener
|
||||
if (element) {
|
||||
element.removeEventListener('scroll', scrollHandler)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,15 +20,13 @@ const poolPageWidth = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="pool">
|
||||
<!-- 话题池容器 -->
|
||||
<div class="pool-container">
|
||||
<KUNGalgameSearchBox style="width: 100%; height: 40px" />
|
||||
<KUNGalgameSearchBox
|
||||
style="width: 100%; height: 40px; border-radius: 5px"
|
||||
/>
|
||||
<Tags />
|
||||
|
||||
<div class="topic-container">
|
||||
<!-- TODO: -->
|
||||
<h1 style="margin: auto">This page is under development.</h1>
|
||||
|
||||
<Topic
|
||||
v-for="kun in topic"
|
||||
class="item"
|
||||
|
|
@ -52,21 +50,17 @@ const poolPageWidth = computed(() => {
|
|||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 话题池容器 */
|
||||
|
||||
.pool-container {
|
||||
/* 占页面的宽度比例 */
|
||||
transition: all 0.2s;
|
||||
width: v-bind(poolPageWidth);
|
||||
/* 居中 */
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
/* 不收缩 */
|
||||
flex-shrink: 0;
|
||||
/* 竖直方向弹性盒 */
|
||||
flex-direction: column;
|
||||
/* 毛玻璃背景 */
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,18 +3,15 @@ import { Icon } from '@iconify/vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 右侧部分 -->
|
||||
<div class="bar">
|
||||
<!-- 对话题进行排序 -->
|
||||
<div class="sort">
|
||||
<div>排序</div>
|
||||
<!-- 左侧部分 -->
|
||||
|
||||
<div class="func">
|
||||
<!-- 按照浏览数排序 -->
|
||||
<div><Icon icon="ic:outline-remove-red-eye" /> 按照浏览数排序</div>
|
||||
<!-- 按照点赞数排序 -->
|
||||
|
||||
<div><Icon icon="line-md:thumbs-up-twotone" /> 按照点赞数排序</div>
|
||||
<!-- 按照时间排序 -->
|
||||
|
||||
<div>
|
||||
<Icon class="hourglass" icon="eos-icons:hourglass" /> 按照时间排序
|
||||
</div>
|
||||
|
|
@ -48,27 +45,20 @@ import { Icon } from '@iconify/vue'
|
|||
background-color: var(--kungalgame-trans-white-2);
|
||||
border: 1px solid var(--kungalgame-blue-1);
|
||||
top: 0;
|
||||
}
|
||||
.func > div {
|
||||
|
||||
& > div {
|
||||
padding: 8px;
|
||||
}
|
||||
.func > div:hover {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--kungalgame-trans-pink-1);
|
||||
}
|
||||
/* 排序 hover 出现 */
|
||||
}
|
||||
}
|
||||
|
||||
.sort:hover .func {
|
||||
display: block;
|
||||
}
|
||||
/* 图标字体的颜色 */
|
||||
.func i {
|
||||
margin-right: 10px;
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
/* 最后一个排序的样式 */
|
||||
.func div:last-child i {
|
||||
margin-right: 14px;
|
||||
}
|
||||
/* 排序 */
|
||||
|
||||
.sort,
|
||||
.top {
|
||||
display: flex;
|
||||
|
|
@ -82,12 +72,8 @@ import { Icon } from '@iconify/vue'
|
|||
border: 1px solid var(--kungalgame-blue-1);
|
||||
color: var(--kungalgame-font-color-3);
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-top: 11px;
|
||||
}
|
||||
.sort i,
|
||||
.top i {
|
||||
margin-top: 5px;
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { tags } from '@/types/pool/tags'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 话题池顶部交互栏 -->
|
||||
<div class="pool-nav-bar">
|
||||
<!-- 热门话题标签，根据所有话题的总标签数推断 -->
|
||||
<span class="nav-tags" v-for="kun in tags" :key="kun.index">{{
|
||||
kun.name
|
||||
}}</span>
|
||||
|
|
@ -13,26 +11,27 @@ import { tags } from '@/types/pool/tags'
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 话题池顶部交互栏 */
|
||||
.pool-nav-bar {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 0;
|
||||
}
|
||||
/* 热门话题标签 */
|
||||
|
||||
.nav-tags {
|
||||
/* 单个标签不换行 */
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
border-radius: 14px;
|
||||
margin: 3px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
/* 距离其它话题的距离 */
|
||||
font-size: 14px;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
background-color: var(--kungalgame-trans-blue-1);
|
||||
padding: 3px 17px;
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
|
||||
&:hover {
|
||||
color: var(--kungalgame-white);
|
||||
background-color: var(--kungalgame-blue-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import { ref } from 'vue'
|
|||
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
// 使用设置面板的 store
|
||||
const settingsStore = useKUNGalgameSettingsStore()
|
||||
const { showKUNGalgameMode } = storeToRefs(settingsStore)
|
||||
|
||||
const { showKUNGalgameMode } = storeToRefs(useKUNGalgameSettingsStore())
|
||||
|
||||
const light = `rgba(${randomNum(200, 255)}, ${randomNum(200, 255)}, ${randomNum(
|
||||
200,
|
||||
|
|
@ -43,28 +42,25 @@ import { onMounted, watch } from 'vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 单个话题容器 -->
|
||||
<div class="topic">
|
||||
<!-- 话题的标题 -->
|
||||
<div class="title">
|
||||
{{ props.data.title }}
|
||||
</div>
|
||||
<!-- 话题的内容区 -->
|
||||
|
||||
<div class="content">{{ props.data.content }}</div>
|
||||
<!-- 话题的状态 -->
|
||||
|
||||
<div class="status">
|
||||
<!-- 浏览数 -->
|
||||
<span>
|
||||
<Icon icon="ic:outline-remove-red-eye" />
|
||||
{{ props.data.view }}
|
||||
</span>
|
||||
<!-- 点赞数 -->
|
||||
|
||||
<span>
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
{{ props.data.like }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 发帖时间 -->
|
||||
|
||||
<div class="time">
|
||||
<Icon class="hourglass" icon="eos-icons:hourglass" />
|
||||
<div>{{ props.data.time }} 发布</div>
|
||||
|
|
@ -73,33 +69,28 @@ import { onMounted, watch } from 'vue'
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 话题池单个话题 */
|
||||
.topic {
|
||||
/* 单个话题距下方的距离 */
|
||||
margin-bottom: 7px;
|
||||
/* 竖直方向弹性布局 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Scss random color */
|
||||
background-color: v-bind(color);
|
||||
border: 1px solid var(--kungalgame-blue-1);
|
||||
border-radius: 5px;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow);
|
||||
max-width: 300px;
|
||||
}
|
||||
.topic:hover {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--kungalgame-trans-white-2);
|
||||
}
|
||||
/* 话题的标题 */
|
||||
}
|
||||
|
||||
.title {
|
||||
/* 标题显示两行、超出部分隐藏 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
|
||||
-webkit-box-orient: vertical; /* 设置为纵向排列 */
|
||||
-webkit-line-clamp: 2; /* 显示两行文本 */
|
||||
/* 居中 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
margin: 0 auto;
|
||||
margin-top: 7px;
|
||||
padding: 0 7px;
|
||||
|
|
@ -107,43 +98,40 @@ import { onMounted, watch } from 'vue'
|
|||
color: var(--kungalgame-font-color-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 话题的内容区 */
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
margin: 7px 0;
|
||||
}
|
||||
/* 话题的状态 */
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
/* 窗口缩小不换行 */
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.status i {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: small;
|
||||
/* 文字间距 */
|
||||
letter-spacing: 1px;
|
||||
/* 窗口缩小不换行 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.time i {
|
||||
padding: 7px 0;
|
||||
|
||||
.hourglass {
|
||||
margin: 0 5px;
|
||||
color: var(--kungalgame-purple-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue