fix main page aside topic

This commit is contained in:
KUN1007 2023-05-25 14:50:51 +08:00
parent 31b4632f80
commit f3e9e0a0a1
7 changed files with 83 additions and 331 deletions

View file

@ -27,23 +27,22 @@ import asideItem from '../aside-item'
justify-content: center;
font-size: 18px;
/* 文字竖直显示 */
writing-mode: vertical-rl;
text-orientation: upright;
word-wrap: break-word;
border-top: 1px solid @kungalgame-blue-4;
&:first-child {
border-top: none;
}
&:hover {
transition: 0.2s;
background-color: @kungalgame-trans-blue-2;
}
a {
width: 100%;
width: 1px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: @kungalgame-blue-5;
&:hover {
transition: 0.2s;
background-color: @kungalgame-trans-blue-2;
}
}
}
}

View file

@ -1,6 +1,5 @@
<script setup lang="ts">
import Topic from '../topic/Topic.vue'
import HotTopic from '../topic/HotTopic.vue'
import { toRefs } from 'vue'
//
import asideItem from '../aside-item'
@ -26,10 +25,12 @@ const isActive = toRefs(props.isActive)
</span>
</div>
</div>
<Topic v-show="isActive" />
<!-- 热门帖子板块 -->
<Topic v-show="isActive" :isHotTopic="true"/>
<!-- 这个 style 使侧边栏和内容区等高 -->
<!-- <Topic v-show="isActive" style="margin-bottom: 0" /> -->
<HotTopic v-show="isActive" />
<!-- <Topic v-show="isActive" /> -->
<!-- 新帖子板块 -->
<Topic v-show="isActive" :isHotTopic="false" style="margin-bottom: 0" />
</template>
<style lang="less" scoped>

View file

@ -1,203 +0,0 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>
<template>
<!-- 侧边栏动态推送今日热度帖子 -->
<div class="top-topic-wrap">
<!-- 今日热度帖子的标题名 -->
<div class="top-topic-title-name">今日热门话题</div>
<!-- 热门帖子的目录 -->
<div class="top-topic-content">
<!-- 单个热门帖子 10 -->
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">
鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲
</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">啊这可海星</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
/* 侧边栏动态推送帖子的总容器 */
.top-topic-wrap {
width: 100%;
height: 1px;
/* 设置今日热门帖子占侧边栏的比例 */
flex-grow: 12.5;
/* 热门帖子距离最新帖子的距离 */
margin-bottom: 5px;
/* 今日热门帖子区域为竖直弹性盒 */
display: flex;
flex-direction: column;
}
.top-topic-title-name,
.top-topic-content {
width: 100%;
height: 1px;
}
/* “今日热门话题”六个字的样式 */
.top-topic-title-name {
/* 设置盒子的 border 在内侧显示 */
box-sizing: border-box;
border: 3px dashed @kungalgame-trans-blue-1;
border-bottom: none;
/* 设置(今日热门话题)居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置(今日热门话题占整个热门区域的宽度) */
flex-grow: 1;
color: @kungalgame-font-color-3;
/* 设置页面缩小到最小时该行不换行 */
overflow: hidden;
white-space: nowrap;
}
/* 展示热门帖子标题的区域 */
.top-topic-content {
background-color: @kungalgame-trans-blue-1;
/* 热门帖子标题区域占整个左侧页面中部的比例 */
flex-grow: 10;
/* 热门帖子标题部分为弹性盒 */
display: flex;
flex-direction: column;
}
/* 单个热门帖子的样式 */
.hot-topic {
display: flex;
/* 设置空白左右居中 */
justify-content: space-between;
/* 设置每个帖子高度相等 */
flex-grow: 1;
color: @kungalgame-font-color-3;
align-items: center;
cursor: pointer;
}
/* 单个热门帖子的 hover */
.hot-topic:hover {
box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
}
.hot-topic:active {
box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
inset -1px -1px 2px @kungalgame-white;
}
/* 单个帖子的标题样式 */
.top-topic-title {
/* 单个帖子标题左侧的一段距离 */
padding-left: 10px;
/* 设置页面变化时不换行,显示省略号 */
/* 标题显示两行、超出部分隐藏 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-webkit-box-orient: vertical; /* 设置为纵向排列 */
-webkit-line-clamp: 2; /* 显示两行文本 */
/* 设置帖子的字体大小 */
font-size: smaller;
}
/* 设置单个帖子右侧的热度值盒子 */
.top-topic-number {
/* 热度值距离右侧的距离 */
margin-right: 10px;
display: flex;
white-space: nowrap;
align-items: center;
}
.top-topic-number {
color: @kungalgame-red-4;
}
.top-topic-number span {
width: 38px;
font-size: small;
margin-left: 5px;
color: @kungalgame-font-color-3;
}
</style>

View file

@ -1,24 +1,49 @@
<script setup lang="ts">
import SingleNewTopic from './components/SingleNewTopic.vue'
import SingleTopic from './components/SingleTopic.vue'
import singleTopic from './topic'
// AsideActive
const props = defineProps(['isHotTopic'])
const isHotTopic = props.isHotTopic
if (isHotTopic) {
}
</script>
<template>
<!-- 侧边栏动态推送今日热度帖子 -->
<div class="top-topic-wrap">
<div class="topic-wrap">
<!-- 今日热度帖子的标题名 -->
<div class="title">今日热门话题</div>
<!-- 热门帖子的目录 -->
<span class="top-topic-content" v-for="kun in singleTopic" :key="kun.index">
<SingleNewTopic :data="kun.data" :to="{ path: kun.router }" />
</span>
<!-- 这里使用了父组件传过来的 isHotTopic 数据 -->
<template v-for="kun in singleTopic" :key="kun.index">
<span class="topic-content" v-if="isHotTopic">
<SingleTopic
:data="kun.data"
:to="{ path: kun.router }"
:isHotTopic="isHotTopic"
/>
</span>
<span class="topic-content" v-if="!isHotTopic">
<SingleTopic
:data="kun.data"
:to="{ path: kun.router }"
:isHotTopic="isHotTopic"
/>
</span>
</template>
</div>
</template>
<style lang="less" scoped>
@hot-color: @kungalgame-trans-pink-1;
@new-color: @kungalgame-trans-blue-1;
// @color: v-bind(topicColor);
/* 侧边栏动态推送帖子的总容器 */
.top-topic-wrap {
.topic-wrap {
width: 100%;
height: 100%;
/* 热门帖子距离最新帖子的距离 */
@ -27,7 +52,7 @@ import singleTopic from './topic'
display: flex;
flex-direction: column;
}
/* “今日热门话题”六个字的样式 */
/* 标题六个字的样式 */
.title {
height: 100%;
border: 3px dashed @kungalgame-trans-blue-1;
@ -42,7 +67,7 @@ import singleTopic from './topic'
white-space: nowrap;
}
/* 展示热门帖子的区域 */
.top-topic-content {
.topic-content {
height: 100%;
background-color: @kungalgame-trans-blue-1;
/* 热门帖子标题部分为弹性盒 */

View file

@ -1,73 +0,0 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
const props = defineProps(['data'])
const { title, isHotTopic, value, time } = props.data
</script>
<template>
<div class="hot-topic">
<!-- 热门帖子的标题 -->
<div class="top-topic-title">
鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲
</div>
<!-- 热门帖子的热度值 -->
<div class="top-topic-number">
<Icon icon="bi:fire" />
<span>1007</span>
</div>
</div>
</template>
<style lang="less" scoped>
/* 单个热门帖子的样式 */
.hot-topic {
display: flex;
/* 设置空白左右居中 */
justify-content: space-between;
/* 设置每个帖子高度相等 */
flex-grow: 1;
color: @kungalgame-font-color-3;
align-items: center;
cursor: pointer;
}
/* 单个热门帖子的 hover */
.hot-topic:hover {
box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
}
.hot-topic:active {
box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
inset -1px -1px 2px @kungalgame-white;
}
/* 单个帖子的标题样式 */
.top-topic-title {
/* 单个帖子标题左侧的一段距离 */
padding-left: 10px;
/* 设置页面变化时不换行,显示省略号 */
/* 标题显示两行、超出部分隐藏 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-webkit-box-orient: vertical; /* 设置为纵向排列 */
-webkit-line-clamp: 2; /* 显示两行文本 */
/* 设置帖子的字体大小 */
font-size: smaller;
}
/* 设置单个帖子右侧的热度值盒子 */
.top-topic-number {
/* 热度值距离右侧的距离 */
margin-right: 10px;
display: flex;
white-space: nowrap;
align-items: center;
}
.top-topic-number {
color: @kungalgame-red-4;
}
.top-topic-number span {
width: 38px;
font-size: small;
margin-left: 5px;
color: @kungalgame-font-color-3;
}
</style>

View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
const props = defineProps(['data'])
const { title, isHotTopic, value, time } = props.data
// Topic
const props = defineProps(['data', 'isHotTopic'])
const { title, value, time } = props.data
const isHotTopic = props.isHotTopic
</script>
<template>
@ -10,13 +12,13 @@ const { title, isHotTopic, value, time } = props.data
<!-- 热门帖子的标题 -->
<div class="title">{{ title }}</div>
<!-- 热门帖子的热度值 -->
<div class="new-topic-number" v-if="isHotTopic">
<div class="new" v-if="isHotTopic">
<Icon icon="svg-spinners:clock" />
<span class="value">{{ value }}</span>
<span>{{ value }}</span>
</div>
<div class="hot-topic" v-if="!isHotTopic">
<div class="hot" v-if="!isHotTopic">
<Icon icon="bi:fire" />
<span class="time">{{ time }}</span>
<span>{{ time }}</span>
</div>
</div>
</template>
@ -32,14 +34,14 @@ const { title, isHotTopic, value, time } = props.data
color: @kungalgame-font-color-3;
align-items: center;
cursor: pointer;
}
/* 单个新帖子的 hover */
.new-topic:hover {
box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
}
.new-topic:active {
box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
inset -1px -1px 2px @kungalgame-white;
/* 单个新帖子的 hover */
&:hover {
box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
}
&:active {
box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
inset -1px -1px 2px @kungalgame-white;
}
}
/* 单个帖子的标题样式 */
.title {
@ -52,25 +54,37 @@ const { title, isHotTopic, value, time } = props.data
font-size: smaller;
}
/* 设置单个帖子右侧的热度值盒子 */
.new-topic-number {
/* 热度值距离右侧的距离 */
.new {
/* 时间距离右侧的距离 */
margin-right: 10px;
display: flex;
/* 右侧热度区域不换行 */
white-space: nowrap;
align-items: center;
}
/* 时钟图标的颜色 */
.new-topic-number {
/* 设置 fa 图标字体的颜色 */
color: @kungalgame-purple-4;
span {
width: 36px;
font-size: xx-small;
/* 右侧区域距离最右侧的距离 */
margin-left: 5px;
color: @kungalgame-font-color-3;
}
}
/* 右侧区域的大小 */
.new-topic-number span {
width: 36px;
font-size: xx-small;
/* 右侧区域距离最右侧的距离 */
margin-left: 5px;
color: @kungalgame-font-color-3;
.hot {
/* 热度值距离右侧的距离 */
margin-right: 10px;
display: flex;
white-space: nowrap;
align-items: center;
color: @kungalgame-red-4;
span {
width: 38px;
font-size: small;
margin-left: 5px;
color: @kungalgame-font-color-3;
}
}
</style>

View file

@ -3,7 +3,6 @@ interface topic {
router: string
data: {
title: string
isHotTopic: boolean
value?: number
time?: string
}
@ -16,7 +15,6 @@ const singleTopic: topic[] = [
data: {
title:
'啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -26,7 +24,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '10小时前',
},
@ -36,7 +33,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1天前',
},
@ -46,7 +42,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -56,7 +51,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -66,7 +60,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -76,7 +69,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -86,7 +78,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -96,7 +87,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},
@ -106,7 +96,6 @@ const singleTopic: topic[] = [
router: '/topic',
data: {
title: '啊这可海星',
isHotTopic: true,
value: 1007,
time: '1小时前',
},