kun-galgame-vue/src/views/pool/Pool.vue

<script setup lang="ts">
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
import Tags from './components/Tags.vue'
import Topic from './components/Topic.vue'
</script>

<template>
  <div class="visual-wrapper">
    <!-- 头部 -->
    <KUNGalgameTopBar />
    <!-- 帖子池容器 -->
    <div class="pool-container">
      <KUNGalgameSearchBox style="width: 100%; height: 40px" />
      <Tags />
      <!-- 帖子池内容区容器 -->
      <div class="content-container">
        <!-- 帖子池单个帖子列容器 -->
        <div class="single-topic-column-container">
          <Topic />
        </div>
      </div>
    </div>
    <!-- 右侧的功能栏 -->
    <div class="kungalgame-right-bar"></div>
  </div>
</template>

<style lang="scss" scoped>
.visual-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 帖子池容器 */
.pool-container {
  /* 占页面的宽度比例 */
  width: 90%;
  /* 居中 */
  margin: 0 auto;
  display: flex;
  /* 不收缩 */
  flex-shrink: 0;
  /* 竖直方向弹性盒 */
  flex-direction: column;
  /* 毛玻璃背景 */
  backdrop-filter: blur(5px);
  background-color: var(--kungalgame-trans-white-5);
  border-radius: 7px;
}
/* 帖子池内容区容器 */
.content-container {
  display: flex;
}
/* 帖子池单个帖子列容器 */
.single-topic-column-container {
  /* 根据页面宽度增长 */
  width: 1px;
  flex-grow: 1;
  /* 5 行的行距 */
  margin: 5px;
}
/* 右侧的功能栏 */
.kungalgame-right-bar {
  /* 位置 fix */
  position: fixed;
  top: 70%;
  /* 距离右侧的距离 */
  right: 1%;
  z-index: 7;
  /* 居中 */
  display: flex;
}
</style>