From 09ab7887195738e581f08f05cbcb8e7d5b1f33f7 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 24 May 2023 23:29:53 +0800
Subject: [PATCH] remove main page aside animate

---
 src/views/Home/KUNGalgameMainPage.vue         |  2 +-
 src/views/Home/content/MainPageContent.vue    |  8 ----
 .../Home/content/aside/MainPageAside.vue      | 42 ++++++++-----------
 .../content/aside/components/AsideActive.vue  | 10 +++--
 .../aside/topic/{components => }/Topic.vue    |  7 ++--
 .../aside/topic/components/SingleTopic.vue    | 19 ++++-----
 .../aside/topic/{components => }/topic.ts     | 21 +++++-----
 7 files changed, 49 insertions(+), 60 deletions(-)
 rename src/views/Home/content/aside/topic/{components => }/Topic.vue (90%)
 rename src/views/Home/content/aside/topic/{components => }/topic.ts (76%)

diff --git a/src/views/Home/KUNGalgameMainPage.vue b/src/views/Home/KUNGalgameMainPage.vue
index f43f5560..d1635d45 100644
--- a/src/views/Home/KUNGalgameMainPage.vue
+++ b/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;
diff --git a/src/views/Home/content/MainPageContent.vue b/src/views/Home/content/MainPageContent.vue
index 77934db0..7892331d 100644
--- a/src/views/Home/content/MainPageContent.vue
+++ b/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>
diff --git a/src/views/Home/content/aside/MainPageAside.vue b/src/views/Home/content/aside/MainPageAside.vue
index 507de1c1..e21597a2 100644
--- a/src/views/Home/content/aside/MainPageAside.vue
+++ b/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>
diff --git a/src/views/Home/content/aside/components/AsideActive.vue b/src/views/Home/content/aside/components/AsideActive.vue
index 7a6321b4..bb0e9a53 100644
--- a/src/views/Home/content/aside/components/AsideActive.vue
+++ b/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 {
diff --git a/src/views/Home/content/aside/topic/components/Topic.vue b/src/views/Home/content/aside/topic/Topic.vue
similarity index 90%
rename from src/views/Home/content/aside/topic/components/Topic.vue
rename to src/views/Home/content/aside/topic/Topic.vue
index a11d0187..e60f3357 100644
--- a/src/views/Home/content/aside/topic/components/Topic.vue
+++ b/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;
   /* 设置（今日热门话题）居中 */
diff --git a/src/views/Home/content/aside/topic/components/SingleTopic.vue b/src/views/Home/content/aside/topic/components/SingleTopic.vue
index e3c9ec74..6469a92f 100644
--- a/src/views/Home/content/aside/topic/components/SingleTopic.vue
+++ b/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;
 }
diff --git a/src/views/Home/content/aside/topic/components/topic.ts b/src/views/Home/content/aside/topic/topic.ts
similarity index 76%
rename from src/views/Home/content/aside/topic/components/topic.ts
rename to src/views/Home/content/aside/topic/topic.ts
index ff552841..63367879 100644
--- a/src/views/Home/content/aside/topic/components/topic.ts
+++ b/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: '啊这可海星',