From a7e9c032eb6247554b1b4e9476fff071f8bac978 Mon Sep 17 00:00:00 2001
From: xzg <4727863@qq.com>
Date: Sat, 3 Feb 2024 19:14:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/banner.vue       | 14 ++++++++++++--
 src/components/bottom.vue       | 18 ++++++++++++++----
 src/layouts/home.vue            | 26 +++++++++++++++++++++++++-
 src/views/home/course/index.vue | 11 +++++++++++
 src/views/home/index.vue        | 11 ++++++-----
 5 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/components/banner.vue b/src/components/banner.vue
index 5cd5f66..0ffadcf 100644
--- a/src/components/banner.vue
+++ b/src/components/banner.vue
@@ -7,7 +7,7 @@
  * 
 -->
 <template>
-  <div class="banner w-full h-[1.2rem] flex justify-center">
+  <div ref="top" class="banner w-full h-[1.2rem] flex justify-center">
     <div class="w-base flex justify-between items-center">
       <div class="w-[5.45rem] h-[.8rem]">
         <img src="@/assets/logo.png" alt="" class="w-full h-full" />
@@ -23,7 +23,17 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref ,onMounted} from "vue";
+const top = ref(null)
+onMounted(() => {
+  if (top.value) {
+    const height = top.value.clientHeight // 获取高度
+    console.log(height,'头部高度');
+    localStorage.setItem('topheight', height.toString()) // 存储高度到localStorage
+  }
+})
+</script>
 
 <style lang="scss" scope>
 .banner {
diff --git a/src/components/bottom.vue b/src/components/bottom.vue
index 4aec4d1..2327a2a 100644
--- a/src/components/bottom.vue
+++ b/src/components/bottom.vue
@@ -7,11 +7,11 @@
  * 
 -->
 <template>
-  <div class="bottom flex flex-col">
+  <div ref="bottom" class="bottom flex flex-col">
     <div class="w-base py-[.3rem] flex justify-center items-center">
-      <div class="el_left">
+      <!-- <div class="el_left">
         <img src="../assets/bottoms-logo.png"/>
-      </div>
+      </div> -->
       <div
         class="flex flex-col w-[3.25rem] text-[.14rem] text-white leading-[2em] footer"
       >
@@ -81,7 +81,17 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref ,onMounted} from "vue";
+const bottom = ref(null)
+onMounted(() => {
+  if (bottom.value) {
+    const height = bottom.value.clientHeight // 获取高度
+    console.log(height,'头部高度');
+    localStorage.setItem('bottomheight', height.toString()) // 存储高度到localStorage
+  }
+})
+</script>
 
 <style lang="scss" scope>
 .bottom {
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
index 8cf0b7d..b901a3d 100644
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@@ -8,7 +8,7 @@
 -->
 <template>
   <banner-vue />
-  <div class="flex flex-col items-center bg-gray-100">
+  <div :class="['flex', 'flex-col', 'items-center', 'bg-gray-100']" :style="dynamicStyle">
     <navigation-vue />
     <router-view v-slot="{ Component }">
       <transition appear mode="default">
@@ -23,6 +23,30 @@
 import bannerVue from "@/components/banner.vue";
 import navigationVue from "@/components/navigation.vue";
 import bottomVue from "@/components/bottom.vue";
+import { ref,onMounted ,computed} from "vue";
+let top =ref()
+const bottom=ref()
+const windowHeight = ref(window.innerHeight); // 创建窗口高度引用
+
+const dynamicStyle=ref({
+  minHeight:''
+})
+
+
+
+
+onMounted(() => {
+  // 确保div被渲染
+  if (localStorage.getItem('topheight')) {
+    // 将高度转换为字符串并保存到本地存储
+   top.value=  localStorage.getItem('topheight');
+   bottom.value=  localStorage.getItem('bottomheight');
+   console.log(top.value);
+   
+  }
+  dynamicStyle.value.minHeight=`${Math.floor(windowHeight.value - (Number(top.value) + Number(bottom.value)))}px`; // 计算并返回动态高度值
+});
+
 </script>
 
 <style lang="scss" scope>
diff --git a/src/views/home/course/index.vue b/src/views/home/course/index.vue
index 3e981f5..cbb2370 100644
--- a/src/views/home/course/index.vue
+++ b/src/views/home/course/index.vue
@@ -245,6 +245,7 @@ const getCourseTypeChild = (parentID: string, dicts: Dict[]) => {
   return child
 }
 initialize()
+
 </script>
 
 <style lang="scss" scope>
@@ -256,4 +257,14 @@ initialize()
 .border-t-2{
   border-color: #172e60;
 }
+html {
+  height: 100%;
+}
+body{
+  height: 100%;
+}
+#app{
+  height: 100%;
+}
+
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5d73afe..2def1f9 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -12,8 +12,7 @@
       <swiper-vue />
     </div>
     <div
-      class="w-full pt-[.4rem] pb-[.7rem] bg-gray-100 flex flex-col items-center"
-    >
+    class="w-full pt-[.4rem] pb-[.7rem] bg-gray-100 flex flex-col items-center">
       <div class="w-[13rem] bg-white py-[.2rem] px-[.5rem] mb-[.2rem]">
         <list-title-vue cn-title="通知公告" :type="1" url="/notice" />
         <div class="w-full flex py-[.4rem] -mx-[.12rem]">
@@ -96,15 +95,17 @@ import imageListItemVue from "@/components/list/imageListItem.vue";
 import rankingVue from "@/components/ranking.vue";
 import { getNewsPage } from "@/api/news";
 import { getCoursePageIndex } from "@/api/course";
-import { ref } from "vue";
+import { ref ,onMounted } from "vue";
 import { useRouter } from "vue-router";
 import Ranking from "@/components/user-center/ranking.vue";
 const router = useRouter();
-
+const height=ref(1000)
 const toNews = (id: number) => {
   router.push({ path: "/news/item", query: { id } });
 };
-
+const dynamicStyle=ref({
+  height:'3000px',
+})
 const toCourse = (id: number) => {
   router.push({ path: "/course/item", query: { id } });
 };