feat: technique page
This commit is contained in:
KUN1007
parent
cf278462ef
commit
eef05fc78f
|
|
@ -17,6 +17,7 @@ export * from './ranking/types/ranking'
|
|||
export * from './topic/types'
|
||||
export * from './update-log/types/updateLog'
|
||||
export * from './pool/types/pool'
|
||||
export * from './technique/types/technique'
|
||||
|
||||
// Expose all APIs
|
||||
export * from './balance'
|
||||
|
|
@ -29,3 +30,4 @@ export * from './ranking'
|
|||
export * from './topic'
|
||||
export * from './update-log'
|
||||
export * from './pool'
|
||||
export * from './technique'
|
||||
|
|
|
|||
19
src/api/technique/index.ts
Normal file
19
src/api/technique/index.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { fetchGet } from '@/utils/request'
|
||||
import objectToQueryParams from '@/utils/objectToQueryParams'
|
||||
import type * as Technique from './types/technique'
|
||||
|
||||
const techniqueURLs = {
|
||||
topic: `/technique/topic`,
|
||||
}
|
||||
|
||||
export async function getTechniqueTopicApi(
|
||||
requestData: Technique.TechniqueTopicsRequestData
|
||||
): Promise<Technique.TechniqueTopicResponseData> {
|
||||
const queryParams = objectToQueryParams(requestData)
|
||||
|
||||
const response = await fetchGet<Technique.TechniqueTopicResponseData>(
|
||||
`${techniqueURLs.topic}?${queryParams}`
|
||||
)
|
||||
|
||||
return response
|
||||
}
|
||||
20
src/api/technique/types/technique.ts
Normal file
20
src/api/technique/types/technique.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export interface TechniqueTopic {
|
||||
tid: number
|
||||
title: string
|
||||
views: number
|
||||
likesCount: number
|
||||
replyCount: number
|
||||
content: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
export interface TechniqueTopicsRequestData {
|
||||
page: number
|
||||
limit: number
|
||||
sortField: string
|
||||
sortOrder: string
|
||||
}
|
||||
|
||||
export type TechniqueTopicResponseData = KUNGalgameResponseData<
|
||||
TechniqueTopic[]
|
||||
>
|
||||
37
src/store/temp/technique.ts
Normal file
37
src/store/temp/technique.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
import { getTechniqueTopicApi } from '@/api'
|
||||
import type {
|
||||
TechniqueTopicsRequestData,
|
||||
TechniqueTopicResponseData,
|
||||
} from '@/api'
|
||||
|
||||
import type { TechniqueStoreTemp } from '@/store/types/technique'
|
||||
|
||||
export const useTempTechniqueStore = defineStore({
|
||||
id: 'tempTechnique',
|
||||
persist: false,
|
||||
state: (): TechniqueStoreTemp => ({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
sortField: 'time',
|
||||
sortOrder: 'desc',
|
||||
}),
|
||||
actions: {
|
||||
async getTopics(): Promise<TechniqueTopicResponseData> {
|
||||
const requestData: TechniqueTopicsRequestData = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
sortField: this.sortField,
|
||||
sortOrder: this.sortOrder,
|
||||
}
|
||||
|
||||
return await getTechniqueTopicApi(requestData)
|
||||
},
|
||||
|
||||
resetPageStatus() {
|
||||
this.page = 1
|
||||
this.limit = 10
|
||||
},
|
||||
},
|
||||
})
|
||||
6
src/store/types/technique.d.ts
vendored
Normal file
6
src/store/types/technique.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface TechniqueStoreTemp {
|
||||
page: number
|
||||
limit: number
|
||||
sortField: string
|
||||
sortOrder: string
|
||||
}
|
||||
|
|
@ -1,41 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import SingleTopic from './components/SingleTopic.vue'
|
||||
import Pagination from './components/Pagination.vue'
|
||||
|
||||
import { ref, onBeforeMount } from 'vue'
|
||||
|
||||
const topics = ref()
|
||||
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
} catch (error) {
|
||||
console.error('Error fetching topics:', error)
|
||||
}
|
||||
})
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import Topic from './components/Topic.vue'
|
||||
|
||||
import { useTempTechniqueStore } from '@/store/temp/technique'
|
||||
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { TechniqueTopic } from '@/api'
|
||||
|
||||
const topics = ref<TechniqueTopic[]>([])
|
||||
|
||||
const { page } = storeToRefs(useTempTechniqueStore())
|
||||
const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
|
||||
|
||||
const techniquePageWidth = computed(() => {
|
||||
return showKUNGalgamePageWidth.value.Technique + '%'
|
||||
})
|
||||
|
||||
const getTopics = async () => {
|
||||
return (await useTempTechniqueStore().getTopics()).data
|
||||
}
|
||||
|
||||
watch(
|
||||
() => page.value,
|
||||
async () => {
|
||||
topics.value = await getTopics()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
useTempTechniqueStore().resetPageStatus()
|
||||
topics.value = await getTopics()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
<div class="article">
|
||||
<div class="article-container">
|
||||
<h1 style="margin: auto">This page is under development.</h1>
|
||||
<div class="container">
|
||||
<Topic :topics="topics" />
|
||||
</div>
|
||||
|
||||
<div class="topic" v-for="topic in topics" :key="topic.topicId">
|
||||
<SingleTopic :data="topic" />
|
||||
</div>
|
||||
</div>
|
||||
<Pagination />
|
||||
<div class="next">
|
||||
<span v-if="page > 1" @click="page--">上一页</span>
|
||||
<span v-if="topics.length === 10" @click="page++">下一页</span>
|
||||
</div>
|
||||
|
||||
<div style="margin: auto">
|
||||
我不知道这个页面怎么写了，如果有建议，请联系我
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,33 +67,39 @@ const techniquePageWidth = computed(() => {
|
|||
width: v-bind(techniquePageWidth);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
color: var(--kungalgame-font-color-3);
|
||||
border: 1px solid var(--kungalgame-trans-blue-2);
|
||||
border-radius: 5px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.article {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
grid-template-rows: repeat(5, 255px);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.next {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--kungalgame-blue-4);
|
||||
border-bottom: 2px solid var(--kungalgame-trans-white-9);
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--kungalgame-blue-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- 下一页 -->
|
||||
<div class="page-switch">
|
||||
<button>上一页</button>
|
||||
<button>1</button>
|
||||
<button>2</button>
|
||||
<button>3</button>
|
||||
<button>...</button>
|
||||
<button>10</button>
|
||||
<button>下一页</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 切换页数 */
|
||||
.page-switch {
|
||||
height: 77px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 切换按钮 */
|
||||
.page-switch > button {
|
||||
/* 宽高固定 */
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
}
|
||||
.page-switch > button:hover {
|
||||
background-color: var(--kungalgame-blue-4);
|
||||
color: var(--kungalgame-white);
|
||||
}
|
||||
.page-switch > button:active {
|
||||
background-color: var(--kungalgame-blue-3);
|
||||
}
|
||||
/* 上一页和下一页两个按钮更宽 */
|
||||
.page-switch > button:first-child {
|
||||
width: 60px;
|
||||
}
|
||||
.page-switch > button:last-child {
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const props = defineProps(['data'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 单个话题 -->
|
||||
<div class="topic">
|
||||
<!-- 话题 hover 后的边 -->
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<!-- 话题的标题 -->
|
||||
<div class="topic-title">{{ props.data.topicTitle }}</div>
|
||||
<!-- 话题的内容预览 -->
|
||||
<div class="topic-content">
|
||||
<p>{{ props.data.topicContent }}</p>
|
||||
</div>
|
||||
<!-- 话题的状态 -->
|
||||
<div class="topic-status">
|
||||
<!-- 话题的点击数 -->
|
||||
<div class="view"><Icon icon="ic:outline-remove-red-eye" />1007</div>
|
||||
<!-- 话题的点赞数 -->
|
||||
<div class="like"><Icon icon="line-md:thumbs-up-twotone" />1007</div>
|
||||
<!-- 话题的回复数 -->
|
||||
<div class="reply"><Icon icon="fa-regular:comment-dots" />1007</div>
|
||||
</div>
|
||||
<!-- 话题的标签 -->
|
||||
<div class="topic-tags">
|
||||
<Icon class="icon" icon="ant-design:tag-twotone" />
|
||||
<!-- 单个标签 -->
|
||||
<span v-for="kun in props.data.topicTags">{{ kun }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 单个话题 */
|
||||
.topic {
|
||||
border: 1px solid var(--kungalgame-trans-blue-4);
|
||||
border-radius: 5px;
|
||||
background-color: var(--kungalgame-trans-white-2);
|
||||
/* 相对于底部状态的定位 */
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* 隐藏 hover 的颜色露出 */
|
||||
overflow: hidden;
|
||||
max-width: 350px;
|
||||
}
|
||||
/* 单个话题 hover */
|
||||
.topic:hover {
|
||||
box-shadow: var(--shadow);
|
||||
/* 放大、旋转 */
|
||||
transform: scale(1.2) rotate(1deg);
|
||||
transition: 0.2s;
|
||||
z-index: 1009;
|
||||
}
|
||||
/* 话题边的光效 */
|
||||
.topic:hover > span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 1009;
|
||||
}
|
||||
.topic:hover > span:nth-child(1) {
|
||||
filter: hue-rotate(0deg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--kungalgame-blue-4));
|
||||
animation: animate1 1s linear infinite;
|
||||
}
|
||||
@keyframes animate1 {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
.topic:hover > span:nth-child(2) {
|
||||
filter: hue-rotate(60deg);
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, var(--kungalgame-blue-4));
|
||||
animation: animate2 1s linear infinite;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
@keyframes animate2 {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
.topic:hover > span:nth-child(3) {
|
||||
filter: hue-rotate(120deg);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(270deg, transparent, var(--kungalgame-blue-4));
|
||||
animation: animate3 1s linear infinite;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
@keyframes animate3 {
|
||||
0% {
|
||||
right: -100%;
|
||||
height: 3px;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
height: 2px;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
.topic:hover > span:nth-child(4) {
|
||||
filter: hue-rotate(300deg);
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, var(--kungalgame-blue-4));
|
||||
animation: animate4 1s linear infinite;
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
@keyframes animate4 {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
/* 话题标题 */
|
||||
.topic-title {
|
||||
padding: 10px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 话题内容预览 */
|
||||
.topic-content {
|
||||
font-size: 13px;
|
||||
max-height: 200px;
|
||||
/* 超过 11 行显示省略号 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 10;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* 话题的状态 */
|
||||
.topic-status {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 相对于话题绝对定位 */
|
||||
position: absolute;
|
||||
background-color: var(--kungalgame-trans-white-2);
|
||||
bottom: 0;
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/* 话题的标签 */
|
||||
.topic-tags {
|
||||
/* 占满单个话题区域 */
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 7px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/* 竖直分布 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
/* 起初看不见文字 */
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.topic-tags > span {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
color: var(--kungalgame-red-4);
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* 单个话题 hover 时显示话题标签 */
|
||||
.topic:hover .topic-tags {
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
backdrop-filter: blur(5px);
|
||||
/* 放大、旋转回正 */
|
||||
transform: scale(1.1) rotate(-1deg);
|
||||
/* 完全不透明，可视 */
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
249
src/views/technique/components/Topic.vue
Normal file
249
src/views/technique/components/Topic.vue
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import type { TechniqueTopic } from '@/api'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
topics: TechniqueTopic[]
|
||||
}>()
|
||||
|
||||
const topics = computed(() => props.topics)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topic" v-for="(topic, index) in topics" :key="index">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
||||
<div class="topic-title">{{ topic.title }}</div>
|
||||
|
||||
<div class="topic-content">
|
||||
<p>{{ topic.content }}</p>
|
||||
</div>
|
||||
|
||||
<div class="topic-status">
|
||||
<div class="view">
|
||||
<Icon icon="ic:outline-remove-red-eye" />
|
||||
<span>{{ topic.views }}</span>
|
||||
</div>
|
||||
<div class="like">
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
<span>
|
||||
{{ topic.likesCount }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="reply">
|
||||
<Icon icon="fa-regular:comment-dots" />
|
||||
<span>
|
||||
{{ topic.replyCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topic-tags">
|
||||
<Icon class="icon" icon="ant-design:tag-twotone" />
|
||||
|
||||
<span v-for="(kun, _) in topic.tags">{{ kun }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topic {
|
||||
border: 1px solid var(--kungalgame-trans-blue-4);
|
||||
border-radius: 5px;
|
||||
background-color: var(--kungalgame-trans-white-2);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
max-width: 350px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
transform: scale(1.2) rotate(1deg);
|
||||
transition: 0.2s;
|
||||
z-index: 1009;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 1009;
|
||||
|
||||
&:nth-child(1) {
|
||||
filter: hue-rotate(0deg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--kungalgame-blue-4)
|
||||
);
|
||||
animation: animate1 1s linear infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
filter: hue-rotate(60deg);
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
var(--kungalgame-blue-4)
|
||||
);
|
||||
animation: animate2 1s linear infinite;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
filter: hue-rotate(120deg);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
transparent,
|
||||
var(--kungalgame-blue-4)
|
||||
);
|
||||
animation: animate3 1s linear infinite;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
filter: hue-rotate(300deg);
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
transparent,
|
||||
var(--kungalgame-blue-4)
|
||||
);
|
||||
animation: animate4 1s linear infinite;
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate1 {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate2 {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes animate3 {
|
||||
0% {
|
||||
right: -100%;
|
||||
height: 3px;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
height: 2px;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes animate4 {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
padding: 10px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topic-content {
|
||||
font-size: 13px;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 10;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.topic-status {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-tags {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 7px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
color: var(--kungalgame-red-4);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.topic:hover .topic-tags {
|
||||
background-color: var(--kungalgame-blue-0);
|
||||
transform: scale(1.1) rotate(-1deg);
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue