From 73c82520ca62f02ba5e0b0d63f740ec12e128d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sun, 26 Jun 2022 18:25:14 +0800
Subject: [PATCH] mod: use unocss rewrite the demo page

---
 src/views/examples/table/post/PostCreate.vue | 31 ++++++--------------
 src/views/examples/table/post/index.vue      | 10 ++-----
 2 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/src/views/examples/table/post/PostCreate.vue b/src/views/examples/table/post/PostCreate.vue
index 4777b0c..b62559c 100644
--- a/src/views/examples/table/post/PostCreate.vue
+++ b/src/views/examples/table/post/PostCreate.vue
@@ -1,10 +1,15 @@
 <template>
-  <div p-20>
-    <div class="header">
-      <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
+  <div p-24>
+    <div h-60 pl-20 pr-20 flex items-center bg-white>
+      <input
+        v-model="post.title"
+        class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
+        type="text"
+        placeholder="输入文章标题..."
+      />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <MdEditor v-model="post.content" style="height: calc(100vh - 210px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 220px)" />
   </div>
 </template>
 
@@ -37,21 +42,3 @@ function handleSavePost(e) {
   }
 }
 </style>
-
-<style lang="scss" scoped>
-.header {
-  background-color: #fff;
-  height: 60px;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  .title {
-    flex: 1;
-    padding: 15px 0;
-    margin-right: 20px;
-    font-size: 20px;
-    font-weight: bold;
-    color: var(--primaryColor);
-  }
-}
-</style>
diff --git a/src/views/examples/table/post/index.vue b/src/views/examples/table/post/index.vue
index acd5b3e..f1c937a 100644
--- a/src/views/examples/table/post/index.vue
+++ b/src/views/examples/table/post/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div p24>
-    <div class="action-btns">
+  <div p-24>
+    <div flex>
       <n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
     </div>
     <n-data-table
@@ -37,9 +37,3 @@ function handleCheck(rowKeys) {
   if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
 }
 </script>
-
-<style lang="scss" scoped>
-.action-btns {
-  display: flex;
-}
-</style>