feat: reply sort style
This commit is contained in:
KUN1007
parent
bc6e45a337
commit
45be80f3d8
|
|
@ -17,7 +17,7 @@
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
min-width: 700px;
|
||||
min-height: 600px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(
|
||||
var(--kungalgame-trans-pink-1),
|
||||
var(--kungalgame-trans-blue-1)
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
min-width: 700px;
|
||||
min-height: 600px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(
|
||||
var(--kungalgame-trans-pink-1),
|
||||
var(--kungalgame-trans-blue-1)
|
||||
|
|
|
|||
|
|
@ -71,14 +71,6 @@ const fetchTopicData = async () => {
|
|||
topicData.value = topicResponseData
|
||||
}
|
||||
|
||||
const fetchReplyData = async () => {
|
||||
// 懒加载获取单个话题下面的回复数据
|
||||
const replyResponseData = (
|
||||
await useKUNGalgameTopicStore().getReplies(tid.value)
|
||||
).data
|
||||
repliesData.value = replyResponseData
|
||||
}
|
||||
|
||||
/** 这里拿到的已经是后端返回回来的 data 数据了 */
|
||||
onMounted(async () => {
|
||||
await fetchTopicData()
|
||||
|
|
@ -120,18 +112,16 @@ onBeforeMount(() => {
|
|||
<!-- 总容器 -->
|
||||
<div class="root">
|
||||
<ReplyPanel />
|
||||
<!-- 下面话题详情区的容器 -->
|
||||
<div class="container">
|
||||
<!-- 下方可视内容区的容器 -->
|
||||
<div class="content-container">
|
||||
<!-- 侧边栏 -->
|
||||
<Aside v-if="topicData?.tags" :tags="topicData.tags" />
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<Master v-if="topicData" :topicData="topicData" />
|
||||
<Reply v-if="repliesData" :repliesData="repliesData" />
|
||||
</div>
|
||||
<!-- 下方可视内容区的容器 -->
|
||||
<div class="content-container">
|
||||
<!-- 侧边栏 -->
|
||||
<Aside v-if="topicData?.tags" :tags="topicData.tags" />
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<Master v-if="topicData" :topicData="topicData" />
|
||||
<Reply v-if="repliesData" :repliesData="repliesData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,21 +130,16 @@ onBeforeMount(() => {
|
|||
<style lang="scss" scoped>
|
||||
/* 页面总容器 */
|
||||
.root {
|
||||
min-height: 1500px;
|
||||
min-height: calc(100vh - 65px);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 下面话题详情区的容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 下方可视内容区的容器 */
|
||||
.content-container {
|
||||
width: v-bind(topicPageWidth);
|
||||
transition: all 0.2s;
|
||||
max-width: 1500px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
|
@ -174,6 +159,7 @@ onBeforeMount(() => {
|
|||
/* 右侧内容区为弹性盒（用户可以一直向下滑） */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ watch(
|
|||
<style lang="scss" scoped>
|
||||
/* 侧边栏部分 */
|
||||
.aside {
|
||||
top: 70px;
|
||||
position: sticky;
|
||||
/* 侧边栏距离文章区域的距离 */
|
||||
margin-right: 5px;
|
||||
width: v-bind('asideWidth');
|
||||
|
|
@ -71,7 +73,7 @@ watch(
|
|||
display: flex;
|
||||
/* 方向为竖向 */
|
||||
flex-direction: column;
|
||||
transition: 0.1s;
|
||||
transition: 0.5s;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,19 +10,22 @@ defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="aside">
|
||||
<TopicAsideNav />
|
||||
<TopicOtherTag style="margin-bottom: 17px" :tags="$props.tags" />
|
||||
<TopicMaster />
|
||||
<KUNGalgameFooter />
|
||||
</div>
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__fadeInLeft animate__faster"
|
||||
appear
|
||||
>
|
||||
<div class="aside">
|
||||
<TopicAsideNav />
|
||||
<TopicOtherTag style="margin-bottom: 17px" :tags="$props.tags" />
|
||||
<TopicMaster />
|
||||
<KUNGalgameFooter />
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 左侧内容区 */
|
||||
.aside {
|
||||
top: 70px;
|
||||
position: sticky;
|
||||
/* 左侧区域的总高度 */
|
||||
height: 940px;
|
||||
/* 左侧区域宽度 */
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@ const orderDescending = () => {
|
|||
<template>
|
||||
<div class="nav">
|
||||
<!-- 交互区容器 -->
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item">
|
||||
<span>
|
||||
<Icon class="icon" icon="line-md:arrow-close-up" />{{
|
||||
$tm('topic.aside.top')
|
||||
}}
|
||||
</li>
|
||||
<li
|
||||
</span>
|
||||
<span
|
||||
v-for="kun in asideNavItem"
|
||||
:key="kun.index"
|
||||
@click="handleSortReply(kun.sortField)"
|
||||
|
|
@ -41,11 +41,15 @@ const orderDescending = () => {
|
|||
<Icon class="icon" :icon="kun.icon" />{{
|
||||
$tm(`topic.aside['${kun.name}']`)
|
||||
}}
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<span @click="orderAscending">升序</span>
|
||||
<span @click="orderDescending">降序</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="sort-order">
|
||||
<span @click="orderAscending">
|
||||
<Icon icon="tdesign:order-ascending" />
|
||||
</span>
|
||||
<span @click="orderDescending">
|
||||
<Icon icon="tdesign:order-descending" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,26 +57,26 @@ const orderDescending = () => {
|
|||
<style lang="scss" scoped>
|
||||
/* 话题详情页的交互 */
|
||||
.nav {
|
||||
height: 107px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* 左边第一个部分的边 */
|
||||
border: 1px solid var(--kungalgame-trans-red-4);
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 5px;
|
||||
/* 距离顶部的距离 */
|
||||
margin-bottom: 17px;
|
||||
/* 隐藏溢出的边角 */
|
||||
overflow: hidden;
|
||||
ul {
|
||||
.item {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
& > li {
|
||||
& > span {
|
||||
height: 40px;
|
||||
padding: 0 11px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -81,6 +85,10 @@ const orderDescending = () => {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
&:nth-child(1) {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
&::before {
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom right;
|
||||
|
|
@ -102,8 +110,29 @@ const orderDescending = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* 按照升序还是降序排列 */
|
||||
.sort-order {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
cursor: default;
|
||||
span {
|
||||
height: 27px;
|
||||
color: var(--kungalgame-blue-4);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 17px;
|
||||
&:hover {
|
||||
transition: all 0.2s;
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue