remove main page aside animate

src/views/Home/KUNGalgameMainPage.vue

@@ -18,7 +18,7 @@ import MainPageFooter from './footer/MainPageFooter.vue'
   height: 1500px;
   display: flex;
   flex-direction: column;
-  // background-image: url(../../assets/images/bg/bg1.png);
+  background-image: url(../../assets/images/bg/bg1.png);
   /* background-image: url(../../assets/images/bg/bg2.png); */
   background-repeat: no-repeat;
   background-position: center;

src/views/Home/content/MainPageContent.vue

@@ -23,11 +23,6 @@ import MainPageArticle from './article/MainPageArticle.vue'
   width: 100%;
   height: 1px;
   flex-grow: 21;
-  /* 背景图片 */
-  /*   background-image: url(../img/bg.png);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover; */
 }
 .main-container {
   height: 100%;
@@ -39,8 +34,6 @@ import MainPageArticle from './article/MainPageArticle.vue'
   width: 80%;
   /* 可视页面的最小宽度 */
   min-width: 700px;
-  /* 盒子边线在内部，页面缩小到最小时右侧不留白 */
-  box-sizing: border-box;
   height: 100%;
   margin: 0 auto;
   /* 可视内容区为弹性盒 */
@@ -53,6 +46,5 @@ import MainPageArticle from './article/MainPageArticle.vue'
   /* 设置背景边框和圆角 */
   border-radius: 5px;
   padding: 5px;
-  overflow: hidden;
 }
 </style>

src/views/Home/content/aside/MainPageAside.vue

@@ -4,8 +4,7 @@ import { Icon } from '@iconify/vue'
 // 导入 Vue 函数
 import { ref } from 'vue'
 import AsideActive from './components/AsideActive.vue'
-// 导入 animate css
-import 'animate.css'
+
 import Aside from './components/Aside.vue'
 
 // 用户点击折叠左侧区域
@@ -36,26 +35,15 @@ const handleFold = () => {
         style="font-size: 17px"
         v-if="!isActive"
       />
-      <span v-if="isActive" class="animate__animated animate__rotateInDownRight"
-        >折叠左侧区域</span
-      >
+      <span v-if="isActive">折叠左侧区域</span>
+    </div>
+    <div class="item-active" v-if="isActive">
+      <AsideActive :isActive="isActive" />
+    </div>
+
+    <div class="item" v-if="!isActive">
+      <Aside :isActive="!isActive" v-if="!isActive" />
     </div>
-    <Transition
-      enter-active-class="animate__animated animate__fadeIn animate__fast"
-      leave-active-class="animate__animated animate__bounceOutLeft"
-    >
-      <div class="item" v-if="isActive">
-        <AsideActive :isActive="isActive" />
-      </div>
-    </Transition>
-    <Transition
-      enter-active-class="animate__animated animate__fadeIn animate__fast"
-      leave-active-class="animate__animated animate__bounceOutLeft"
-    >
-      <div class="item" v-if="!isActive">
-        <Aside :isActive="!isActive" v-if="!isActive" />
-      </div>
-    </Transition>
   </div>
 </template>
 
@@ -79,9 +67,10 @@ const handleFold = () => {
 }
 /* 侧边栏交互 */
 .nav-aside {
-  height: 38px;
+  height: 40px;
   /* 内容居中（折叠左侧区域） */
   display: flex;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   text-align: center;
@@ -90,9 +79,14 @@ const handleFold = () => {
   color: @kungalgame-font-color-3;
   cursor: pointer;
 }
-.item {
-  height: 100%;
+/* 激活后的左侧区域 */
+.item-active {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
 }
+/* 未激活的左侧区域 */
+.item {
+  height: 96.6%;
+}
 </style>

src/views/Home/content/aside/components/AsideActive.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Topic from '../topic/components/Topic.vue'
+import Topic from '../topic/Topic.vue'
 import { toRefs } from 'vue'
 // 导入功能区的单个项目
 import asideItem from '../aside-item'
@@ -26,14 +26,15 @@ const isActive = toRefs(props.isActive)
     </div>
   </div>
   <Topic v-show="isActive" />
-  <Topic v-show="isActive" />
+  <!-- 这个 style 使侧边栏和内容区等高 -->
+  <Topic v-show="isActive" style="margin-bottom: 0" />
 </template>
 
 <style lang="less" scoped>
 /* 侧边栏功能区 */
 .item-box {
   width: 100%;
-  height: 200px;
+  height: 600px;
   /* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
   display: flex;
   flex-direction: column;
@@ -42,7 +43,8 @@ const isActive = toRefs(props.isActive)
 .new-article {
   width: 100%;
   /* 发布帖子的按钮相对于功能区盒子的占比 */
-  flex-grow: 2;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 /* 发布按钮样式 */
 .new-article button {

src/views/Home/content/aside/topic/Topic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SingleTopic from './SingleTopic.vue'
+import SingleTopic from './components/SingleTopic.vue'
 
 import singleTopic from './topic'
 </script>
@@ -8,7 +8,7 @@ import singleTopic from './topic'
   <!-- 侧边栏动态推送今日热度帖子 -->
   <div class="top-topic-wrap">
     <!-- 今日热度帖子的标题名 -->
-    <div class="top-topic-title-name">今日热门话题</div>
+    <div class="title">今日热门话题</div>
     <!-- 热门帖子的目录 -->
     <span class="top-topic-content" v-for="kun in singleTopic" :key="kun.index">
       <SingleTopic :data="kun.data" :to="{ path: kun.router }" />
@@ -28,7 +28,8 @@ import singleTopic from './topic'
   flex-direction: column;
 }
 /* “今日热门话题”六个字的样式 */
-.top-topic-title-name {
+.title {
+  height: 100%;
   border: 3px dashed @kungalgame-trans-blue-1;
   border-bottom: none;
   /* 设置（今日热门话题）居中 */

src/views/Home/content/aside/topic/components/SingleTopic.vue

@@ -8,7 +8,9 @@ console.log(props)
 <template>
   <div class="new-topic">
     <!-- 热门帖子的标题 -->
-    <div class="new-topic-title">啊这可海星</div>
+    <div class="title">
+      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+    </div>
     <!-- 热门帖子的热度值 -->
     <div class="new-topic-number">
       <Icon icon="svg-spinners:clock" />
@@ -20,11 +22,11 @@ console.log(props)
 <style lang="less" scoped>
 /* 单个新帖子的样式 */
 .new-topic {
+  width: 100%;
   display: flex;
   /* 设置空白左右居中 */
   justify-content: space-between;
-  /* 设置每个帖子高度相等 */
-  flex-grow: 1;
+  height: 100%;
   color: @kungalgame-font-color-3;
   align-items: center;
   cursor: pointer;
@@ -38,15 +40,12 @@ console.log(props)
     inset -1px -1px 2px @kungalgame-white;
 }
 /* 单个帖子的标题样式 */
-.new-topic-title {
+.title {
   /* 单个帖子标题左侧的一段距离 */
   padding-left: 10px;
-  /* 设置页面变化时不换行，显示省略号 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 显示省略号 */
-  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-  -webkit-box-orient: vertical; /* 设置为纵向排列 */
-  -webkit-line-clamp: 2; /* 显示两行文本 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   /* 设置帖子的字体大小 */
   font-size: smaller;
 }

src/views/Home/content/aside/topic/topic.ts

@@ -13,13 +13,14 @@ const singleTopic: topic[] = [
     index: 1,
     router: '/topic',
     data: {
-      title: '啊这可海星',
+      title:
+        '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
       icon: true,
       value: 1007,
     },
   },
   {
-    index: 1,
+    index: 2,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -28,7 +29,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 3,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -37,7 +38,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 4,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -46,7 +47,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 5,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -55,7 +56,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 6,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -64,7 +65,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 7,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -73,7 +74,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 8,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -82,7 +83,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 9,
     router: '/topic',
     data: {
       title: '啊这可海星',
@@ -91,7 +92,7 @@ const singleTopic: topic[] = [
     },
   },
   {
-    index: 1,
+    index: 10,
     router: '/topic',
     data: {
       title: '啊这可海星',