mod: use unocss rewrite the demo page

src/views/examples/table/post/PostCreate.vue

@@ -1,10 +1,15 @@
 <template>
-  <div p-20>
+  <div p-24>
-    <div class="header">
+    <div h-60 pl-20 pr-20 flex items-center bg-white>
-      <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
+      <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>

src/views/examples/table/post/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div p24>
+  <div p-24>
-    <div class="action-btns">
+    <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>