优化页面高度

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 {

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 {

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>

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>

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 } });
 };