feat: pageHeader以及修复ui

src/layout/layout.vue

@@ -3,9 +3,9 @@
       <Navbar />
       <a-layout >
         <SiderBar />
-        <div class="content" >
+        <div class="content"  >
           <RouterTravel />
-          <div style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
+          <div class="router-view" >
             <RouterView :key="useRouterTravel.keyCount" ></RouterView>
           </div>
         </div>
@@ -28,10 +28,23 @@ const useRouterTravel = useRouterTravelStore()
 .a-layout {
   /* width: 100vw; */
   height: 100vh;
+  overflow: hidden;
   .content {
     width: 100%;
     height: 100%;
     border-top-left-radius: 24px;
+    // overflow: hidden;
+    // overflow-y: scroll;
+    .router-view {
+      width: 100%;
+      height: 100%;
+      padding: 0 24px 24px;
+      padding-bottom: 160px;
+      margin-top: 24px;
+      // box-sizing: border-box;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
   }
 }
 

src/layout/pageHeader.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="page-header" >
-
+    <div class="title" >{{title}}</div>
+    <div class="desc" >{{desc}}</div>
+    <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup >
+import { defineProps } from 'vue'
 
+interface IProps {
+  title: string
+  desc: string
+}
+const props = defineProps<IProps>()
 </script>
 
 <style lang="less" scoped >
@@ -14,5 +22,18 @@
   height: 144px;
   background-color: #fff;
   padding: 20px;
+  border-radius: 8px;
+  .title {
+    color: rgba(0, 0, 0, 0.88);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 32px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .desc {
+    margin-top: 38px;
+  }
 }
 </style>

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -1,4 +1,6 @@
 <template>
+
+  <!-- <page-header title="首頁" desc="有着一些数据统计" > </page-header> -->
     <a-card
       title="功能介绍"
     >

src/utils/UsePro.ts

@@ -5,6 +5,7 @@ import FormPro from '@/components/FormPro/index.vue'
 import RowPro from '@/components/RowPro/index.vue'
 import ColPro from '@/components/ColPro/index.vue'
 import UploadPro from '@/components/UploadPro/index'
+import PageHeader from '@/layout/pageHeader.vue'
 import { App } from 'vue'
 
 export default function (app: App) {
@@ -15,4 +16,5 @@ export default function (app: App) {
   app.component('l-row', RowPro)
   app.component('l-col', ColPro)
   app.component('upload-pro', UploadPro)
+  app.component('page-header', PageHeader)
 }