From 9c9f75e34c74a3519cd2c054ea9695472c1e22b8 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Wed, 28 Jun 2023 10:55:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9ECSS=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                 | 268 +++++++++++++++-
 pages/CSS/background/background-color.uvue |  39 +++
 pages/CSS/background/background-image.uvue |  19 ++
 pages/CSS/border/border-color.uvue         |  40 +++
 pages/CSS/border/border-radius.uvue        |  40 +++
 pages/CSS/border/border-style.uvue         |  40 +++
 pages/CSS/border/border-width.uvue         |  40 +++
 pages/CSS/border/border.uvue               |  20 ++
 pages/CSS/box-shadow/box-shadow.uvue       | 103 ++++++
 pages/CSS/flex/align-content.uvue          |  89 ++++++
 pages/CSS/flex/align-items.uvue            |  52 ++++
 pages/CSS/flex/flex-basis.uvue             |  28 ++
 pages/CSS/flex/flex-direction.uvue         |  51 +++
 pages/CSS/flex/flex-flow.uvue              |  63 ++++
 pages/CSS/flex/flex-grow.uvue              |  31 ++
 pages/CSS/flex/flex-shrink.uvue            |  31 ++
 pages/CSS/flex/flex.uvue                   |  51 +++
 pages/CSS/flex/justify-content.uvue        |  61 ++++
 pages/CSS/layout/height.uvue               |  24 ++
 pages/CSS/layout/max-height.uvue           |  24 ++
 pages/CSS/layout/max-width.uvue            |  24 ++
 pages/CSS/layout/min-height.uvue           |  24 ++
 pages/CSS/layout/min-width.uvue            |  24 ++
 pages/CSS/layout/position.uvue             |  70 +++++
 pages/CSS/layout/width.uvue                |  24 ++
 pages/CSS/margin/margin-bottom.uvue        |  32 ++
 pages/CSS/margin/margin-left.uvue          |  32 ++
 pages/CSS/margin/margin-right.uvue         |  32 ++
 pages/CSS/margin/margin-top.uvue           |  32 ++
 pages/CSS/margin/margin.uvue               |  32 ++
 pages/CSS/padding/padding-bottom.uvue      |  29 ++
 pages/CSS/padding/padding-left.uvue        |  29 ++
 pages/CSS/padding/padding-right.uvue       |  29 ++
 pages/CSS/padding/padding-top.uvue         |  29 ++
 pages/CSS/padding/padding.uvue             |  29 ++
 pages/CSS/text/color.uvue                  |  21 ++
 pages/CSS/text/font-family.uvue            |  18 ++
 pages/CSS/text/font-size.uvue              |  15 +
 pages/CSS/text/font-style.uvue             |  18 ++
 pages/CSS/text/font-weight.uvue            |  20 ++
 pages/CSS/text/line-height.uvue            |  19 ++
 pages/CSS/text/text-align.uvue             |  20 ++
 pages/CSS/text/text-decoration-line.uvue   |  18 ++
 pages/tabBar/CSS/CSS.uvue                  | 346 +++++++++++++++++++++
 44 files changed, 2078 insertions(+), 2 deletions(-)
 create mode 100644 pages/CSS/background/background-color.uvue
 create mode 100644 pages/CSS/background/background-image.uvue
 create mode 100644 pages/CSS/border/border-color.uvue
 create mode 100644 pages/CSS/border/border-radius.uvue
 create mode 100644 pages/CSS/border/border-style.uvue
 create mode 100644 pages/CSS/border/border-width.uvue
 create mode 100644 pages/CSS/border/border.uvue
 create mode 100644 pages/CSS/box-shadow/box-shadow.uvue
 create mode 100644 pages/CSS/flex/align-content.uvue
 create mode 100644 pages/CSS/flex/align-items.uvue
 create mode 100644 pages/CSS/flex/flex-basis.uvue
 create mode 100644 pages/CSS/flex/flex-direction.uvue
 create mode 100644 pages/CSS/flex/flex-flow.uvue
 create mode 100644 pages/CSS/flex/flex-grow.uvue
 create mode 100644 pages/CSS/flex/flex-shrink.uvue
 create mode 100644 pages/CSS/flex/flex.uvue
 create mode 100644 pages/CSS/flex/justify-content.uvue
 create mode 100644 pages/CSS/layout/height.uvue
 create mode 100644 pages/CSS/layout/max-height.uvue
 create mode 100644 pages/CSS/layout/max-width.uvue
 create mode 100644 pages/CSS/layout/min-height.uvue
 create mode 100644 pages/CSS/layout/min-width.uvue
 create mode 100644 pages/CSS/layout/position.uvue
 create mode 100644 pages/CSS/layout/width.uvue
 create mode 100644 pages/CSS/margin/margin-bottom.uvue
 create mode 100644 pages/CSS/margin/margin-left.uvue
 create mode 100644 pages/CSS/margin/margin-right.uvue
 create mode 100644 pages/CSS/margin/margin-top.uvue
 create mode 100644 pages/CSS/margin/margin.uvue
 create mode 100644 pages/CSS/padding/padding-bottom.uvue
 create mode 100644 pages/CSS/padding/padding-left.uvue
 create mode 100644 pages/CSS/padding/padding-right.uvue
 create mode 100644 pages/CSS/padding/padding-top.uvue
 create mode 100644 pages/CSS/padding/padding.uvue
 create mode 100644 pages/CSS/text/color.uvue
 create mode 100644 pages/CSS/text/font-family.uvue
 create mode 100644 pages/CSS/text/font-size.uvue
 create mode 100644 pages/CSS/text/font-style.uvue
 create mode 100644 pages/CSS/text/font-weight.uvue
 create mode 100644 pages/CSS/text/line-height.uvue
 create mode 100644 pages/CSS/text/text-align.uvue
 create mode 100644 pages/CSS/text/text-decoration-line.uvue
 create mode 100644 pages/tabBar/CSS/CSS.uvue

diff --git a/pages.json b/pages.json
index b355c349..214d8bbc 100644
--- a/pages.json
+++ b/pages.json
@@ -137,7 +137,265 @@
             "style": {
                 "navigationBarTitleText": "退出应用"
             }
-        }
+        },
+		{
+			"path": "pages/tabBar/CSS/CSS",
+			"style": {
+				"navigationBarTitleText": "CSS"
+			}
+		},
+		{
+			"path": "pages/CSS/background/background-color",
+			"style": {
+				"navigationBarTitleText": "background-color"
+			}
+		},
+		{
+			"path": "pages/CSS/background/background-image",
+			"style": {
+				"navigationBarTitleText": "background-image"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-color",
+			"style": {
+				"navigationBarTitleText": "border-color"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-radius",
+			"style": {
+				"navigationBarTitleText": "border-radius"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-style",
+			"style": {
+				"navigationBarTitleText": "border-style"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-width",
+			"style": {
+				"navigationBarTitleText": "border-width"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border",
+			"style": {
+				"navigationBarTitleText": "border"
+			}
+		},
+		{
+			"path": "pages/CSS/box-shadow/box-shadow",
+			"style": {
+				"navigationBarTitleText": "box-shadow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/align-content",
+			"style": {
+				"navigationBarTitleText": "align-content"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/align-items",
+			"style": {
+				"navigationBarTitleText": "align-items"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-basis",
+			"style": {
+				"navigationBarTitleText": "flex-basis"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-direction",
+			"style": {
+				"navigationBarTitleText": "flex-direction"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-flow",
+			"style": {
+				"navigationBarTitleText": "flex-flow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-grow",
+			"style": {
+				"navigationBarTitleText": "flex-grow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-shrink",
+			"style": {
+				"navigationBarTitleText": "flex-shrink"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex",
+			"style": {
+				"navigationBarTitleText": "flex"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/justify-content",
+			"style": {
+				"navigationBarTitleText": "justify-content"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/height",
+			"style": {
+				"navigationBarTitleText": "height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/max-height",
+			"style": {
+				"navigationBarTitleText": "max-height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/max-width",
+			"style": {
+				"navigationBarTitleText": "max-width"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/min-height",
+			"style": {
+				"navigationBarTitleText": "min-height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/min-width",
+			"style": {
+				"navigationBarTitleText": "min-width"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/position",
+			"style": {
+				"navigationBarTitleText": "position"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/width",
+			"style": {
+				"navigationBarTitleText": "width"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-bottom",
+			"style": {
+				"navigationBarTitleText": "margin-bottom"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-left",
+			"style": {
+				"navigationBarTitleText": "margin-left"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-right",
+			"style": {
+				"navigationBarTitleText": "margin-right"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-top",
+			"style": {
+				"navigationBarTitleText": "margin-top"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin",
+			"style": {
+				"navigationBarTitleText": "margin"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-bottom",
+			"style": {
+				"navigationBarTitleText": "padding-bottom"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-left",
+			"style": {
+				"navigationBarTitleText": "padding-left"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-right",
+			"style": {
+				"navigationBarTitleText": "padding-right"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-top",
+			"style": {
+				"navigationBarTitleText": "padding-top"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding",
+			"style": {
+				"navigationBarTitleText": "padding"
+			}
+		},
+		{
+			"path": "pages/CSS/text/color",
+			"style": {
+				"navigationBarTitleText": "color"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-family",
+			"style": {
+				"navigationBarTitleText": "font-family"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-size",
+			"style": {
+				"navigationBarTitleText": "font-size"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-style",
+			"style": {
+				"navigationBarTitleText": "font-style"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-weight",
+			"style": {
+				"navigationBarTitleText": "font-weight"
+			}
+		},
+		{
+			"path": "pages/CSS/text/line-height",
+			"style": {
+				"navigationBarTitleText": "line-height"
+			}
+		},
+		{
+			"path": "pages/CSS/text/text-align",
+			"style": {
+				"navigationBarTitleText": "text-align"
+			}
+		},
+		{
+			"path": "pages/CSS/text/text-decoration-line",
+			"style": {
+				"navigationBarTitleText": "text-decoration-line"
+			}
+		}
     ],
     "globalStyle": {
         "pageOrientation": "portrait",
@@ -169,7 +427,13 @@
                 "iconPath": "static/api.png",
                 "selectedIconPath": "static/apiHL.png",
                 "text": "接口"
-            }
+            },
+			{
+			    "pagePath": "pages/tabBar/CSS/CSS",
+			    "iconPath": "static/extui.png",
+			    "selectedIconPath": "static/extuiHL.png",
+			    "text": "CSS"
+			}
         ]
     },
     "uniIdRouter": {},
diff --git a/pages/CSS/background/background-color.uvue b/pages/CSS/background/background-color.uvue
new file mode 100644
index 00000000..36c63c44
--- /dev/null
+++ b/pages/CSS/background/background-color.uvue
@@ -0,0 +1,39 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>background-color: red</text>
+			<view class="common" style="background-color: red;"></view>
+		</view>
+
+		<view>
+			<text>background-color: #ff0000</text>
+			<view class="common" style="background-color: #ff0000;"></view>
+		</view>
+		
+		<view>
+			<text>background-color: #f00</text>
+			<view class="common" style="background-color: #f00;"></view>
+		</view>
+
+		<view>
+			<text>background-color: rgb(255, 0, 0)</text>
+			<view class="common" style="background-color: rgb(255, 0, 0);"></view>
+		</view>
+		
+		<view>
+			<text>background-color: rgba(255, 0, 0, 0.5)</text>
+			<view class="common" style="background-color: rgba(255, 0, 0, 0.5);"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/background/background-image.uvue b/pages/CSS/background/background-image.uvue
new file mode 100644
index 00000000..a2304125
--- /dev/null
+++ b/pages/CSS/background/background-image.uvue
@@ -0,0 +1,19 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>background-image: linear-gradient(to right, red, yellow)</text>
+			<view class="common" style="background-image: linear-gradient(to right, red, yellow);"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-color.uvue b/pages/CSS/border/border-color.uvue
new file mode 100644
index 00000000..ae03864d
--- /dev/null
+++ b/pages/CSS/border/border-color.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-color: red</text>
+			<view class="common" style="border-width: 10rpx;border-color: red;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-color: red</text>
+			<view class="common" style="border-left-width: 10rpx;border-left-color: red;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-color: green</text>
+			<view class="common" style="border-top-width: 10rpx;border-top-color: green;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-color: yellow</text>
+			<view class="common" style="border-right-width: 10rpx;border-right-color: yellow;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-color: blue</text>
+			<view class="common" style="border-bottom-width: 10rpx;border-bottom-color: blue;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-radius.uvue b/pages/CSS/border/border-radius.uvue
new file mode 100644
index 00000000..35447a38
--- /dev/null
+++ b/pages/CSS/border/border-radius.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-radius: 20rpx</text>
+			<view class="common" style="border-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-left-radius: 20rpx</text>
+			<view class="common" style="border-top-left-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-right-radius: 20rpx</text>
+			<view class="common" style="border-top-right-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-left-radius: 20rpx</text>
+			<view class="common" style="border-bottom-left-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-right-radius: 20rpx</text>
+			<view class="common" style="border-bottom-right-radius: 20rpx;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-style.uvue b/pages/CSS/border/border-style.uvue
new file mode 100644
index 00000000..6420c850
--- /dev/null
+++ b/pages/CSS/border/border-style.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-style: dashed</text>
+			<view class="common" style="border-width: 10rpx;border-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-style: dashed</text>
+			<view class="common" style="border-left-width: 10rpx;border-left-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-style: dashed</text>
+			<view class="common" style="border-top-width: 10rpx;border-top-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-style: dotted</text>
+			<view class="common" style="border-right-width: 10rpx;border-right-style: dotted;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-style: dotted</text>
+			<view class="common" style="border-bottom-width: 10rpx;border-bottom-style: dotted;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-width.uvue b/pages/CSS/border/border-width.uvue
new file mode 100644
index 00000000..40005a13
--- /dev/null
+++ b/pages/CSS/border/border-width.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-width: 10rpx</text>
+			<view class="common" style="border-width: 10rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-width: 10rpx</text>
+			<view class="common" style="border-left-width: 10rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-width: 20rpx</text>
+			<view class="common" style="border-top-width: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-width: 30rpx</text>
+			<view class="common" style="border-right-width: 30rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-width: 40rpx</text>
+			<view class="common" style="border-bottom-width: 40rpx;"></view>
+		</view>	
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border.uvue b/pages/CSS/border/border.uvue
new file mode 100644
index 00000000..e20202b1
--- /dev/null
+++ b/pages/CSS/border/border.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border: 10rpx dotted blue</text>
+			<view class="common" style="border: 10rpx dotted blue;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
new file mode 100644
index 00000000..7fac0af3
--- /dev/null
+++ b/pages/CSS/box-shadow/box-shadow.uvue
@@ -0,0 +1,103 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>box-shadow: 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 10px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 10px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: -5px -5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: -5px -5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 10px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset -5px -5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 250rpx;
+		height: 250rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/align-content.uvue b/pages/CSS/flex/align-content.uvue
new file mode 100644
index 00000000..af2c2055
--- /dev/null
+++ b/pages/CSS/flex/align-content.uvue
@@ -0,0 +1,89 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>align-content: center</text>
+			<view class="common" style="align-content: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: flex-start</text>
+			<view class="common" style="align-content: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: flex-end</text>
+			<view class="common" style="align-content: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: space-between</text>
+			<view class="common" style="align-content: space-between;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: space-around</text>
+			<view class="common" style="align-content: space-around;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: stretch</text>
+			<view class="common" style="align-content: stretch;">
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-flow: row wrap;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/align-items.uvue b/pages/CSS/flex/align-items.uvue
new file mode 100644
index 00000000..d52d1b0a
--- /dev/null
+++ b/pages/CSS/flex/align-items.uvue
@@ -0,0 +1,52 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>align-items: center</text>
+			<view class="common" style="align-items: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: flex-start</text>
+			<view class="common" style="align-items: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: flex-end</text>
+			<view class="common" style="align-items: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: stretch</text>
+			<view class="common" style="align-items: stretch;">
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-direction: row;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-basis.uvue b/pages/CSS/flex/flex-basis.uvue
new file mode 100644
index 00000000..f94abb3f
--- /dev/null
+++ b/pages/CSS/flex/flex-basis.uvue
@@ -0,0 +1,28 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-basis</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex-basis: 300rpx;">
+					<text>300rpx</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-direction.uvue b/pages/CSS/flex/flex-direction.uvue
new file mode 100644
index 00000000..c7e3afc3
--- /dev/null
+++ b/pages/CSS/flex/flex-direction.uvue
@@ -0,0 +1,51 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-direction: row</text>
+			<view class="common" style="flex-direction: row;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: row-reverse</text>
+			<view class="common" style="flex-direction: row-reverse;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: column</text>
+			<view class="common" style="flex-direction: column;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: column-reverse</text>
+			<view class="common" style="flex-direction: column-reverse;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-flow.uvue b/pages/CSS/flex/flex-flow.uvue
new file mode 100644
index 00000000..7a021ff3
--- /dev/null
+++ b/pages/CSS/flex/flex-flow.uvue
@@ -0,0 +1,63 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-flow: row nowrap</text>
+			<view class="common" style="flex-flow: row nowrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: row wrap</text>
+			<view class="common" style="flex-flow: row wrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: column nowrap</text>
+			<view class="common" style="flex-flow: column nowrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: column wrap</text>
+			<view class="common" style="flex-flow: column wrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-grow.uvue b/pages/CSS/flex/flex-grow.uvue
new file mode 100644
index 00000000..e40fa97a
--- /dev/null
+++ b/pages/CSS/flex/flex-grow.uvue
@@ -0,0 +1,31 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-grow</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="background-color: red;flex-grow: 0.5;">
+					<text>0.5</text>
+				</view>
+				<view class="common" style="background-color: green;flex-grow: 1;">
+					<text>1</text>
+				</view>
+				<view class="common" style="background-color: blue;flex-grow: 2">
+					<text>2</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-shrink.uvue b/pages/CSS/flex/flex-shrink.uvue
new file mode 100644
index 00000000..04d5431d
--- /dev/null
+++ b/pages/CSS/flex/flex-shrink.uvue
@@ -0,0 +1,31 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-shrink</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="background-color: red;flex-shrink: 1;">
+					<text>1</text>
+				</view>
+				<view class="common" style="background-color: green;flex-shrink: 2;">
+					<text>2</text>
+				</view>
+				<view class="common" style="background-color: blue;flex-shrink: 3;">
+					<text>3</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 250rpx;
+		height: 100rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex.uvue b/pages/CSS/flex/flex.uvue
new file mode 100644
index 00000000..87cf159f
--- /dev/null
+++ b/pages/CSS/flex/flex.uvue
@@ -0,0 +1,51 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex: 0</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="min-width: 50rpx;flex: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: 1</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: 1"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: auto</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: auto;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: none</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: none;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/justify-content.uvue b/pages/CSS/flex/justify-content.uvue
new file mode 100644
index 00000000..74c78e44
--- /dev/null
+++ b/pages/CSS/flex/justify-content.uvue
@@ -0,0 +1,61 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>justify-content: center</text>
+			<view class="common" style="justify-content: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: flex-start</text>
+			<view class="common" style="justify-content: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: flex-end</text>
+			<view class="common" style="justify-content: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: space-between</text>
+			<view class="common" style="justify-content: space-between;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: space-around</text>
+			<view class="common" style="justify-content: space-around;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-direction: row;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/height.uvue b/pages/CSS/layout/height.uvue
new file mode 100644
index 00000000..8f59d2e6
--- /dev/null
+++ b/pages/CSS/layout/height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>height: 500rpx</text>
+			<view class="common" style="height: 500rpx;"></view>
+		</view>
+
+		<view style="height: 500rpx;">
+			<text>height: 50%</text>
+			<view class="common" style="height: 50%;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/max-height.uvue b/pages/CSS/layout/max-height.uvue
new file mode 100644
index 00000000..f4b93e55
--- /dev/null
+++ b/pages/CSS/layout/max-height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>max-height: 500rpx</text>
+			<view class="common" style="max-height: 500rpx;">
+				<text>height: 1000rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 1000rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/max-width.uvue b/pages/CSS/layout/max-width.uvue
new file mode 100644
index 00000000..97cb20c4
--- /dev/null
+++ b/pages/CSS/layout/max-width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>max-width: 500rpx</text>
+			<view class="common" style="max-width: 500rpx;">
+				<text>width: 1000rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 1000rpx;
+		height: 500rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/min-height.uvue b/pages/CSS/layout/min-height.uvue
new file mode 100644
index 00000000..23cd6a6d
--- /dev/null
+++ b/pages/CSS/layout/min-height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>min-height: 500rpx</text>
+			<view class="common" style="min-height: 500rpx;">
+				<text>height: 100rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 100rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/min-width.uvue b/pages/CSS/layout/min-width.uvue
new file mode 100644
index 00000000..ff75cacf
--- /dev/null
+++ b/pages/CSS/layout/min-width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>min-width: 500rpx</text>
+			<view class="common" style="min-width: 500rpx;">
+				<text>width: 100rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 500rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/position.uvue b/pages/CSS/layout/position.uvue
new file mode 100644
index 00000000..bbfa86a1
--- /dev/null
+++ b/pages/CSS/layout/position.uvue
@@ -0,0 +1,70 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>position: relative</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: relative;">
+					<text>relative</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+
+		<view>
+			<text>position: absolute</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: absolute;">
+					<text>absolute</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+
+		<view>
+			<text>position: fixed</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: fixed;">
+					<text>fixed</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: green;
+		top: 50rpx;
+		left: 50rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/width.uvue b/pages/CSS/layout/width.uvue
new file mode 100644
index 00000000..57107dbf
--- /dev/null
+++ b/pages/CSS/layout/width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>width: 500rpx</text>
+			<view class="common" style="width: 500rpx;"></view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>width: 50%</text>
+			<view class="common" style="width: 50%;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 500rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-bottom.uvue b/pages/CSS/margin/margin-bottom.uvue
new file mode 100644
index 00000000..a5923a7e
--- /dev/null
+++ b/pages/CSS/margin/margin-bottom.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-bottom: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-bottom: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-bottom: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-bottom: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-left.uvue b/pages/CSS/margin/margin-left.uvue
new file mode 100644
index 00000000..c69c7af4
--- /dev/null
+++ b/pages/CSS/margin/margin-left.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-left: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-left: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-left: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-left: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-right.uvue b/pages/CSS/margin/margin-right.uvue
new file mode 100644
index 00000000..82b6f637
--- /dev/null
+++ b/pages/CSS/margin/margin-right.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-right: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-right: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-right: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-right: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-top.uvue b/pages/CSS/margin/margin-top.uvue
new file mode 100644
index 00000000..707acc5a
--- /dev/null
+++ b/pages/CSS/margin/margin-top.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-top: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-top: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-top: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-top: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin.uvue b/pages/CSS/margin/margin.uvue
new file mode 100644
index 00000000..2e16deb2
--- /dev/null
+++ b/pages/CSS/margin/margin.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-bottom.uvue b/pages/CSS/padding/padding-bottom.uvue
new file mode 100644
index 00000000..c91e1605
--- /dev/null
+++ b/pages/CSS/padding/padding-bottom.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-bottom: 50rpx</text>
+			<view class="common" style="padding-bottom: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-bottom: 10%</text>
+			<view class="common" style="padding-bottom: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-left.uvue b/pages/CSS/padding/padding-left.uvue
new file mode 100644
index 00000000..0e2c5147
--- /dev/null
+++ b/pages/CSS/padding/padding-left.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-left: 50rpx</text>
+			<view class="common" style="padding-left: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-left: 10%</text>
+			<view class="common" style="padding-left: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-right.uvue b/pages/CSS/padding/padding-right.uvue
new file mode 100644
index 00000000..0f85586e
--- /dev/null
+++ b/pages/CSS/padding/padding-right.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-right: 50rpx</text>
+			<view class="common" style="padding-right: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-right: 10%</text>
+			<view class="common" style="padding-right: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-top.uvue b/pages/CSS/padding/padding-top.uvue
new file mode 100644
index 00000000..cd4257ed
--- /dev/null
+++ b/pages/CSS/padding/padding-top.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-top: 50rpx</text>
+			<view class="common" style="padding-top: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-top: 10%</text>
+			<view class="common" style="padding-top: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding.uvue b/pages/CSS/padding/padding.uvue
new file mode 100644
index 00000000..474201bb
--- /dev/null
+++ b/pages/CSS/padding/padding.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding: 50rpx</text>
+			<view class="common" style="padding: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding: 10%</text>
+			<view class="common" style="padding: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/color.uvue b/pages/CSS/text/color.uvue
new file mode 100644
index 00000000..4922e321
--- /dev/null
+++ b/pages/CSS/text/color.uvue
@@ -0,0 +1,21 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="color: rgb(255, 0, 0);">color: rgb(255, 0, 0)</text>
+			<text class="common" style="color: rgba(255, 0, 0, 0.5);">color: rgba(255, 0, 0, 0.5)</text>
+			<text class="common" style="color: #ff0000;">color: #ff0000</text>
+			<text class="common" style="color: #f00;">color: #f00</text>
+			<text class="common" style="color: red;">color: red</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-family.uvue b/pages/CSS/text/font-family.uvue
new file mode 100644
index 00000000..5da9ff1d
--- /dev/null
+++ b/pages/CSS/text/font-family.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-family: monospace;">font-family: monospace</text>
+			<text class="common" style="font-family: cursive;">font-family: cursive</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-size.uvue b/pages/CSS/text/font-size.uvue
new file mode 100644
index 00000000..5d3ac909
--- /dev/null
+++ b/pages/CSS/text/font-size.uvue
@@ -0,0 +1,15 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text style="font-size: 30px;">font-size: 30px</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-style.uvue b/pages/CSS/text/font-style.uvue
new file mode 100644
index 00000000..ba6225d2
--- /dev/null
+++ b/pages/CSS/text/font-style.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-style: italic;">font-style: italic</text>
+			<text class="common" style="font-style: normal;">font-style: normal</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-weight.uvue b/pages/CSS/text/font-weight.uvue
new file mode 100644
index 00000000..1e8240a2
--- /dev/null
+++ b/pages/CSS/text/font-weight.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-weight: normal;">font-weight: normal</text>
+			<text class="common" style="font-weight: bold;">font-weight: bold</text>
+			<text class="common" style="font-weight: 400;">font-weight: 400</text>
+			<text class="common" style="font-weight: 700;">font-weight: 700</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/line-height.uvue b/pages/CSS/text/line-height.uvue
new file mode 100644
index 00000000..939dba79
--- /dev/null
+++ b/pages/CSS/text/line-height.uvue
@@ -0,0 +1,19 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common">CSS测试 CSS测试 CSS测试</text>
+			<text class="common" style="line-height: 150rpx;">line-height: 150rpx</text>
+			<text class="common">CSS测试 CSS测试 CSS测试</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/text-align.uvue b/pages/CSS/text/text-align.uvue
new file mode 100644
index 00000000..cbcb5787
--- /dev/null
+++ b/pages/CSS/text/text-align.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="text-align: left;">text-align: left</text>
+			<text class="common" style="text-align: center;">text-align: center</text>
+			<text class="common" style="text-align: right;">text-align: right</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/text-decoration-line.uvue b/pages/CSS/text/text-decoration-line.uvue
new file mode 100644
index 00000000..029ccf1a
--- /dev/null
+++ b/pages/CSS/text/text-decoration-line.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="text-decoration-line: underline;">text-decoration-line: underline</text>
+			<text class="common" style="text-decoration-line: line-through;">text-decoration-line: line-through</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/CSS/CSS.uvue b/pages/tabBar/CSS/CSS.uvue
new file mode 100644
index 00000000..50b2d724
--- /dev/null
+++ b/pages/tabBar/CSS/CSS.uvue
@@ -0,0 +1,346 @@
+<template>
+	<view class="uni-container">
+		<view class="uni-header-logo">
+			<image class="uni-header-image" src="/static/extuiIndex.png"></image>
+		</view>
+		<view class="uni-hello-text">
+			<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
+			<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
+				:inWhiteList="true"></u-link>
+		</view>
+		<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+			<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+				<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
+				<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
+					class="uni-icon"></image>
+			</view>
+			<view class="uni-panel-c" v-if="item.open">
+				<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
+					<text class="uni-navigate-text"
+						:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
+					<image :src="arrowRightIcon" class="uni-icon"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+	type Page = {
+		name : string,
+		enable ?: boolean,
+		url ?: string
+	}
+	type ListItem = {
+		id : string,
+		name : string,
+		open : boolean,
+		pages : Page[],
+		url ?: string,
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [{
+					id: 'background',
+					name: 'background',
+					open: false,
+					pages: [
+						{
+							name: 'background-color',
+							enable: true,
+							url: '/pages/CSS/background/background-color'
+						},
+						{
+							name: 'background-image',
+							enable: true,
+							url: '/pages/CSS/background/background-image'
+						}
+					] as Page[]
+				}, {
+					id: 'border',
+					name: 'border',
+					open: false,
+					pages: [
+						{
+							name: 'border',
+							enable: true,
+							url: 'pages/CSS/border/border'
+						},
+						{
+							name: 'border-width',
+							enable: true,
+							url: 'pages/CSS/border/border-width'
+						},
+						{
+							name: 'border-style',
+							enable: true,
+							url: 'pages/CSS/border/border-style'
+						},
+						{
+							name: 'border-color',
+							enable: true,
+							url: 'pages/CSS/border/border-color'
+						},
+						{
+							name: 'border-radius',
+							enable: true,
+							url: 'pages/CSS/border/border-radius'
+						}
+					] as Page[]
+				}, {
+					id: 'box-shadow',
+					name: 'box-shadow',
+					open: false,
+					pages: [
+						{
+							name: 'box-shadow',
+							enable: true,
+							url: 'pages/CSS/box-shadow/box-shadow'
+						},
+					] as Page[]
+				}, {
+					id: 'flex',
+					name: 'flex',
+					open: false,
+					pages: [
+						{
+							name: 'align-content',
+							enable: true,
+							url: 'pages/CSS/flex/align-content'
+						},
+						{
+							name: 'align-items',
+							enable: true,
+							url: 'pages/CSS/flex/align-items'
+						},
+						{
+							name: 'flex-basis',
+							enable: true,
+							url: 'pages/CSS/flex/flex-basis'
+						},
+						{
+							name: 'flex-direction',
+							enable: true,
+							url: 'pages/CSS/flex/flex-direction'
+						},
+						{
+							name: 'flex-flow',
+							enable: true,
+							url: 'pages/CSS/flex/flex-flow'
+						},
+						{
+							name: 'flex-grow',
+							enable: true,
+							url: 'pages/CSS/flex/flex-grow'
+						},
+						{
+							name: 'flex-shrink',
+							enable: true,
+							url: 'pages/CSS/flex/flex-shrink'
+						},
+						{
+							name: 'flex',
+							enable: true,
+							url: 'pages/CSS/flex/flex'
+						},
+						{
+							name: 'justify-content',
+							enable: true,
+							url: 'pages/CSS/flex/justify-content'
+						}
+					] as Page[]
+				}, {
+					id: 'layout',
+					name: 'layout',
+					open: false,
+					pages: [
+						{
+							name: 'height',
+							enable: true,
+							url: 'pages/CSS/layout/height'
+						},
+						{
+							name: 'max-height',
+							enable: true,
+							url: 'pages/CSS/layout/max-height'
+						},
+						{
+							name: 'max-width',
+							enable: true,
+							url: 'pages/CSS/layout/max-width'
+						},
+						{
+							name: 'min-height',
+							enable: true,
+							url: 'pages/CSS/layout/min-height'
+						},
+						{
+							name: 'min-width',
+							enable: true,
+							url: 'pages/CSS/layout/min-width'
+						},
+						{
+							name: 'position',
+							enable: true,
+							url: 'pages/CSS/layout/position'
+						},
+						{
+							name: 'width',
+							enable: true,
+							url: 'pages/CSS/layout/width'
+						}
+					] as Page[]
+				}, {
+					id: 'margin',
+					name: 'margin',
+					open: false,
+					pages: [
+						{
+							name: 'margin-bottom',
+							enable: true,
+							url: 'pages/CSS/margin/margin-bottom'
+						},
+						{
+							name: 'margin-left',
+							enable: true,
+							url: 'pages/CSS/margin/margin-left'
+						},
+						{
+							name: 'margin-right',
+							enable: true,
+							url: 'pages/CSS/margin/margin-right'
+						},
+						{
+							name: 'margin-top',
+							enable: true,
+							url: 'pages/CSS/margin/margin-top'
+						}, {
+							name: 'margin',
+							enable: true,
+							url: 'pages/CSS/margin/margin'
+						}
+					] as Page[]
+				}, {
+					id: 'padding',
+					name: 'padding',
+					open: false,
+					pages: [
+						{
+							name: 'padding-bottom',
+							enable: true,
+							url: 'pages/CSS/padding/padding-bottom'
+						},
+						{
+							name: 'padding-left',
+							enable: true,
+							url: 'pages/CSS/padding/padding-left'
+						},
+						{
+							name: 'padding-right',
+							enable: true,
+							url: 'pages/CSS/padding/padding-right'
+						},
+						{
+							name: 'padding-top',
+							enable: true,
+							url: 'pages/CSS/padding/padding-top'
+						}, {
+							name: 'padding',
+							enable: true,
+							url: 'pages/CSS/padding/padding'
+						}
+					] as Page[]
+				}, {
+					id: 'text',
+					name: 'text',
+					open: false,
+					pages: [
+						{
+							name: 'color',
+							enable: true,
+							url: 'pages/CSS/text/color'
+						},
+						{
+							name: 'font-family',
+							enable: true,
+							url: 'pages/CSS/text/font-family'
+						},
+						{
+							name: 'font-size',
+							enable: true,
+							url: 'pages/CSS/text/font-size'
+						},
+						{
+							name: 'font-style',
+							enable: true,
+							url: 'pages/CSS/text/font-style'
+						},
+						{
+							name: 'font-weight',
+							enable: true,
+							url: 'pages/CSS/text/font-weight'
+						},
+						{
+							name: 'line-height',
+							enable: true,
+							url: 'pages/CSS/text/line-height'
+						},
+						{
+							name: 'text-align',
+							enable: true,
+							url: 'pages/CSS/text/text-align'
+						},
+						{
+							name: 'text-decoration-line',
+							enable: true,
+							url: 'pages/CSS/text/text-decoration-line'
+						}
+					] as Page[]
+				}
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url
+					}
+					this.goDetailPage(page);
+					return;
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open;
+					} else {
+						this.list[i].open = false;
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable != true) {
+					uni.showToast({
+						icon: 'none',
+						title: '暂不支持'
+					})
+					return
+				}
+				const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
+				uni.navigateTo({
+					url
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	@import '../../../common/uni-uvue.css';
+</style>
\ No newline at end of file
-- 
GitLab