style: 优化主页样式

mark9804 · Apr 12, 2024 · 9fd1351 · 9fd1351
1 parent d6e132d
commit 9fd1351
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 25 deletions.
diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ASwitch: typeof import('@arco-design/web-vue')['Switch']
+    ATag: typeof import('@arco-design/web-vue')['Tag']
     HomePage: typeof import('./src/components/HomePage.vue')['default']
     ProfileCard: typeof import('./src/components/ProfileCard.vue')['default']
     TableOfContent: typeof import('./src/components/TableOfContent.vue')['default']

diff --git a/docs/src/components/HomePage.vue b/docs/src/components/HomePage.vue
@@ -14,23 +14,15 @@ if (theme.value.userProfile) {
 </script>
 
 <template>
-  <div class="home-page flex p-[24px] gap-[48px]">
-    <ProfileCard :props="props"/>
-    <TableOfContents class="home-page__toc" />
+  <div class="home-page w-[100dvw] pl-[48px] pr-[48px] pt-[24px] flex flex-col items-center">
+    <div class="max-w-[1200px] flex gap-[48px] w-full">
+      <ProfileCard :props="props"/>
+      <TableOfContents class="home-page__toc" />
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.home-page {
-  display: flex;
-  width: 100vw;
-  width: 100dvw;
-
-  &__toc {
-    flex: 1;
-  }
-}
-
 @media (max-width: 475px) {
   .home-page {
     flex-direction: row;

diff --git a/docs/src/components/ProfileCard.vue b/docs/src/components/ProfileCard.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-[24px] p-[24px] rounded-lg shadow-std h-full">
+  <div class="flex flex-col items-center gap-[24px] p-[24px] rounded-lg shadow-std h-full w-fit min-w-[256px]">
     <img
       class="w-[100px] h-[100px] rounded-full"
       :src="props.avatar"

diff --git a/docs/src/components/TableOfContents.vue b/docs/src/components/TableOfContents.vue
@@ -9,20 +9,11 @@ const useContents = computed(() =>
 </script>
 
 <template>
-  <ul class="toc">
+  <ul class="flex flex-col gap-[20px] w-full list-none p-0 m-0">
     <li v-for="content in useContents" :key="content.url">
       <table-of-content :content="content"></table-of-content>
     </li>
   </ul>
 </template>
 
-<style scoped lang="scss">
-ul.toc {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-</style>
+<style scoped lang="scss"></style>