修改新闻资讯界面

tanghaolin

7 天以前 f4693216c0d19774d7d0587727ccc9c60cae38d7

 src/App.vue

@@ -1,12 +1,47 @@
<template>
   <div class="min-h-screen bg-gray-50">
      <AppHeader />
      <router-view></router-view>
   <el-config-provider :locale="zhCn">
   <div class="h-full bg-gray-50 flex flex-col">
      <template v-if="!isLoginPage">
         <AppHeader class="flex-0" />
         <div id="app-page" class="flex-auto !overflow-y-auto bg-[#ffffff]" ref="containerRef">
            <div class="w-[100%] mx-auto">
               <router-view :key="routerKey"></router-view>
            </div>
            <AppFooter></AppFooter>
         </div>
      </template>
      <template v-else>
         <router-view></router-view>
      </template>
   </div>
   </el-config-provider>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import AppFooter from './components/AppFooter.vue';
import AppHeader from './components/AppHeader.vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const route = useRoute();
const containerRef = ref<HTMLDivElement | null>(null);

// 判断是否是登录页面
const isLoginPage = computed(() => {
   return route.path === '/login';
});
let routerKey = computed(() => {
  return `${route.path}?v=${Math.random()}`;
});
// 监听路由变化，滚动到顶部
watch(
   () => route.path,
   () => {
      if (containerRef.value) {
         containerRef.value.scrollTop = 0;
      }
   }
);
</script>

<style>