From bfd048d40a86e1c7439e88514fa0a241ec2c6342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Fri, 13 May 2022 15:09:41 +0800
Subject: [PATCH] =?UTF-8?q?mod:=20=E8=B0=83=E6=95=B4=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/examples/table/post/PostCreate.vue |  4 +-
 src/views/test-page/unocss/index.vue         | 99 +++++++++++++++++---
 2 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/src/views/examples/table/post/PostCreate.vue b/src/views/examples/table/post/PostCreate.vue
index 7456da6..4d355d6 100644
--- a/src/views/examples/table/post/PostCreate.vue
+++ b/src/views/examples/table/post/PostCreate.vue
@@ -1,10 +1,10 @@
 <template>
-  <div pb-20>
+  <div p-20>
     <div class="header">
       <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <MdEditor v-model="post.content" style="height: calc(100vh - 200px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 210px)" />
   </div>
 </template>
 
diff --git a/src/views/test-page/unocss/index.vue b/src/views/test-page/unocss/index.vue
index 8d93940..6808d9e 100644
--- a/src/views/test-page/unocss/index.vue
+++ b/src/views/test-page/unocss/index.vue
@@ -1,15 +1,92 @@
 <template>
-  <div p24>
-    <div p20 bg="#fff">
-      <p text-12>测试12px</p>
-      <p text-13>测试13px</p>
-      <p text-14>测试14px</p>
-      <p text-15>测试15px</p>
-      <p text-16>测试16px</p>
-      <p text-17>测试17px</p>
-      <p text-18>测试18px</p>
-      <p text-19>测试19px</p>
-      <p text-20>测试20px</p>
+  <div p-24>
+    <p>
+      文档：<a hover-decoration-underline c-blue href="https://uno.antfu.me/" target="_blank">https://uno.antfu.me/</a>
+    </p>
+    <p>
+      playground：
+      <a c-blue hover-decoration-underline href="https://unocss.antfu.me/play/" target="_blank">
+        https://unocss.antfu.me/play/
+      </a>
+    </p>
+
+    <div flex mt-20>
+      <div flex p-20 rounded-5 bg-white>
+        <div text-20 font-600>Flex布局</div>
+        <div flex w-360 flex-wrap justify-around ml-15 p-10>
+          <div w-50 h-50 b-1 rounded-5 flex justify-center items-center p-10 m-20>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+          <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black self-end></span>
+          </div>
+          <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black self-center></span>
+            <span w-6 h-6 rounded-3 bg-black self-end></span>
+          </div>
+          <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+            <div flex flex-col justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+            <div flex flex-col justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+          </div>
+          <div w-50 h-50 b-1 rounded-5 flex flex-col justify-between items-center p-10 m-20>
+            <div flex w-full justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <div flex w-full justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+          </div>
+          <div w-50 h-50 b-1 rounded-5 flex flex-col justify-between p-10 m-20>
+            <div flex w-full justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+            <div flex w-full justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+            <div flex w-full justify-between>
+              <span w-6 h-6 rounded-3 bg-black></span>
+              <span w-6 h-6 rounded-3 bg-black></span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div flex ml-35 p-20 rounded-5 bg="#fff">
+        <div text-20 font-600>字体：</div>
+        <div ml-15 p-10 pl-30 pr-30 rounded-5>
+          <p text-12>font-size: 12px</p>
+          <p text-16>font-size: 16px</p>
+          <p text-20>font-size: 20px</p>
+
+          <p font-300 mt-10>font-weight: 300</p>
+          <p font-600>font-weight: 600</p>
+          <p font-bold>font-weight: bold</p>
+        </div>
+      </div>
+
+      <div flex p-20 ml-35 rounded-5 bg-white>
+        <div text-20 font-600>颜色：</div>
+        <div ml-15 p-10 pl-30 pr-30 rounded-5>
+          <p color="#881337">color: #881337</p>
+          <p c-pink-500>color: #ec4899</p>
+
+          <p bg="pink" mt-10>background: pink</p>
+          <p bg="#2563eb" mt-10>background: #2563eb</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>