From 3176d522bc47f3649ce72fa0e769cc54a9729e0e Mon Sep 17 00:00:00 2001
From: tony chen <tony.zq.chen@gmail.com>
Date: Wed, 17 Jan 2024 18:25:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=A4=9A=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.config.ts                             |  19 ++--
 src/pages/components/jsontree/index.weapp.tsx |   6 ++
 src/pages/components/pages/text/text.tsx      |   4 +-
 src/pages/global/index.tsx                    |   5 +-
 .../global/pages/styles/background/index.tsx  |  16 +--
 .../global/pages/styles/border/index.scss     |  56 +++++++++-
 .../global/pages/styles/border/index.tsx      |  36 +++----
 .../global/pages/styles/box/index.config.ts   |   2 +-
 src/pages/global/pages/styles/box/index.scss  | 102 +++++++++++++++++-
 src/pages/global/pages/styles/box/index.tsx   |  48 ++++-----
 src/pages/global/pages/styles/flex/index.tsx  |   2 +-
 .../global/pages/styles/other/index.scss      |  18 ++++
 src/pages/global/pages/styles/other/index.tsx |  10 +-
 .../global/pages/styles/position/index.scss   |  62 ++++++++++-
 .../global/pages/styles/position/index.tsx    |  20 ++--
 src/pages/global/pages/styles/text/index.tsx  |   2 +-
 16 files changed, 314 insertions(+), 94 deletions(-)
 create mode 100644 src/pages/components/jsontree/index.weapp.tsx

diff --git a/src/app.config.ts b/src/app.config.ts
index 4171414d..d7c6c185 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -54,6 +54,13 @@ const pages = [
   'pages/global/pages/router/index',
   'pages/global/pages/styles/size',
   'pages/global/pages/styles/platform',
+  'pages/global/pages/styles/background/index',
+  'pages/global/pages/styles/border/index',
+  'pages/global/pages/styles/flex/index',
+  'pages/global/pages/styles/other/index',
+  'pages/global/pages/styles/position/index',
+  'pages/global/pages/styles/box/index',
+  'pages/global/pages/styles/text/index',
   // 全局相关 end
   // 组件相关 start
   'pages/components/index',
@@ -118,23 +125,13 @@ const pages = [
   'pages/about/rn',
   'pages/webview/index',
   // 探索
-  'pages/explore/index'
+  'pages/explore/index',
 ];
 
 if (process.env.TARO_ENV !== 'harmony') {
   pages.push(
     'pages/components/pages/virtual-list/virtual-list',
   );
-} else {
-  pages.push(
-    'pages/global/pages/styles/background/index',
-    'pages/global/pages/styles/border/index',
-    'pages/global/pages/styles/flex/index',
-    'pages/global/pages/styles/other/index',
-    'pages/global/pages/styles/position/index',
-    'pages/global/pages/styles/box/index',
-    'pages/global/pages/styles/text/index',
-  )
 }
 
 const subpackages = [
diff --git a/src/pages/components/jsontree/index.weapp.tsx b/src/pages/components/jsontree/index.weapp.tsx
new file mode 100644
index 00000000..800c353e
--- /dev/null
+++ b/src/pages/components/jsontree/index.weapp.tsx
@@ -0,0 +1,6 @@
+import { View, Text } from '@tarojs/components'
+// import { isWeb } from '@/utils/index'
+
+export default (props) => {
+  return ((props.data && Object.keys(props.data).length > 0) ? <View><Text space='nbsp'>{JSON.stringify(props.data, undefined, 2)}</Text></View> : <View></View>)
+}
\ No newline at end of file
diff --git a/src/pages/components/pages/text/text.tsx b/src/pages/components/pages/text/text.tsx
index 953c9fd3..9b4a8702 100644
--- a/src/pages/components/pages/text/text.tsx
+++ b/src/pages/components/pages/text/text.tsx
@@ -36,12 +36,12 @@ const PageView = () => {
             <View className='example-body__text'>
               <Text space='nbsp'>多          空格文字(nbsp)</Text>
             </View>
-            {/* <View className='example-body__text'>
+            <View className='example-body__text'>
               <Text>不解码文字&gt;</Text>
             </View>
             <View className='example-body__text'>
               <Text decode>解码文字&gt;</Text>
-            </View> */}
+            </View>
           </View>
         </View>
       </View>
diff --git a/src/pages/global/index.tsx b/src/pages/global/index.tsx
index f6aeb572..858ae199 100644
--- a/src/pages/global/index.tsx
+++ b/src/pages/global/index.tsx
@@ -65,8 +65,7 @@ export default class Index extends Component<never, any> {
             {
               id: 'platform',
               name: '跨平台'
-            }
-          ].concat(process.env.TARO_ENV === 'harmony' ? [
+            },
             {
               id: 'flex/index',
               name: 'flex'
@@ -89,7 +88,7 @@ export default class Index extends Component<never, any> {
               id: 'other/index',
               name: '其他'
             }
-          ] : [])
+          ]
         }
       ]
     };
diff --git a/src/pages/global/pages/styles/background/index.tsx b/src/pages/global/pages/styles/background/index.tsx
index 79a1f779..706f51bb 100644
--- a/src/pages/global/pages/styles/background/index.tsx
+++ b/src/pages/global/pages/styles/background/index.tsx
@@ -10,7 +10,7 @@ export default function Size() {
     {/* 测试 background-color */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>background-color</Text>
+        <View className='example-header'>background-color</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -32,10 +32,10 @@ export default function Size() {
               </View>
             </View>
             <View className='column'>
-              <Text className='example-sub-title'>rgba(255, 0, 0)</Text>
+              <Text className='example-sub-title'>rgb(255, 0, 0)</Text>
               <View className='row'>
                 <View className='box' style={{
-                  backgroundColor: 'rgba(255, 0, 0)'
+                  backgroundColor: 'rgb(255, 0, 0)'
                 }}
                 ></View>
               </View>
@@ -56,7 +56,7 @@ export default function Size() {
     {/* 测试 background-image */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>background-image</Text>
+        <View className='example-header'>background-image</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -84,7 +84,7 @@ export default function Size() {
     {/* 测试background-size */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>background-size</Text>
+        <View className='example-header'>background-size</View>
         <View className='example-body'>
           <View className='column'>
           <View className='column'>
@@ -130,7 +130,7 @@ export default function Size() {
     {/* 测试background-position */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>background-position</Text>
+        <View className='example-header'>background-position</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -260,7 +260,7 @@ export default function Size() {
     {/* 测试background-repeat */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>background-repeat</Text>
+        <View className='example-header'>background-repeat</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -288,7 +288,7 @@ export default function Size() {
               </View>
             </View>
             <View className='column'>
-              <Text className='example-sub-title'>repeat-y</Text>
+              <Text className='example-sub-title'>repeat-x</Text>
               <View className='row'>
                 <View className='bg'>
                   <View className='big-box' style={{
diff --git a/src/pages/global/pages/styles/border/index.scss b/src/pages/global/pages/styles/border/index.scss
index 09f8163a..fd6b677f 100644
--- a/src/pages/global/pages/styles/border/index.scss
+++ b/src/pages/global/pages/styles/border/index.scss
@@ -7,6 +7,58 @@
   text-align: center;
 }
 
+.border {
+  border: 1px solid #000;
+}
+
+.border-1 {
+  border: 1px solid #000;
+}
+
+.border-l1 {
+  border-left: 1px solid #000;
+}
+
+.border-r1 {
+  border-right: 1px solid #000;
+}
+
+.border-t1 {
+  border-top: 1px solid #000;
+}
+
+.border-b1 {
+  border-bottom: 1px solid #000;
+}
+
+.border-w1 {
+  border-width: 1px;
+}
+
+.border-w5 {
+  border-width: 5px;
+}
+
+.border-lw5 {
+  border-left-width: 5px;
+}
+
+.border-rw5 {
+  border-right-width: 5px;
+}
+
+.border-tw5 {
+  border-top-width: 5px;
+}
+
+.border-bw5 {
+  border-bottom-width: 5px;
+}
+
+.border-w10 {
+  border-width: 10px;
+}
+
 .bg {
   background: #eee;
 }
@@ -15,7 +67,6 @@
   display: flex;
 }
 
-
 .row {
   display: flex;
   flex-direction: row;
@@ -25,6 +76,3 @@
   flex-direction: column;
 }
 
-.border {
-  border: 1px solid #000;
-}
diff --git a/src/pages/global/pages/styles/border/index.tsx b/src/pages/global/pages/styles/border/index.tsx
index f5228bf6..0a0dfd0b 100644
--- a/src/pages/global/pages/styles/border/index.tsx
+++ b/src/pages/global/pages/styles/border/index.tsx
@@ -11,22 +11,22 @@ export default function Size() {
     {/* 测试 border-width */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>border</Text>
+        <View className='example-header'>border</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
               <Text className='example-sub-title'>border</Text>
               <View className='row bg'>
-                <View className='box' style={{ border: '1px solid #000'}}>1px</View>
+                <View className='box border-1'>1px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>border 四边</Text>
               <View className='row bg'>
-                <View className='box' style={{ borderLeft: '1px solid #000'}}>border-left</View>
-                <View className='box' style={{ borderRight: '1px solid #000'}}>border-right</View>
-                <View className='box' style={{ borderBottom: '1px solid #000'}}>border-bottom</View>
-                <View className='box' style={{ borderLeft: '1px solid #000'}}>border-left</View>
+                <View className='box border-l1'>border-left</View>
+                <View className='box border-t1'>border-top</View>
+                <View className='box border-r1'>border-right</View>
+                <View className='box border-b1'>border-bottom</View>
               </View>
             </View>
           </View>
@@ -37,24 +37,24 @@ export default function Size() {
     {/* 测试 border-width */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>border-width</Text>
+        <View className='example-header'>border-width</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
               <Text className='example-sub-title'>border-width</Text>
               <View className='row bg'>
-                <View className='box border' style={{ borderWidth: '1px'}}>1px</View>
-                <View className='box border' style={{ borderWidth: '5px'}}>5px</View>
-                <View className='box border' style={{ borderWidth: '10px'}}>10px</View>
+                <View className='box border border-w1'>1px</View>
+                <View className='box border border-w5'>5px</View>
+                <View className='box border border-w10'>10px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>border-width 四边</Text>
               <View className='row bg'>
-                <View className='box border' style={{ borderTopWidth: '5px'}}>top</View>
-                <View className='box border' style={{ borderRightWidth: '5px'}}>right</View>
-                <View className='box border' style={{ borderBottomWidth: '5px'}}>bottom</View>
-                <View className='box border' style={{ borderLeftWidth: '5px'}}>left</View>
+                <View className='box border border-lw5'>left</View>
+                <View className='box border border-tw5'>top</View>
+                <View className='box border border-rw5'>right</View>
+                <View className='box border border-bw5'>bottom</View>
               </View>
             </View>
           </View>
@@ -65,7 +65,7 @@ export default function Size() {
     {/* 测试 border-color */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>border-color</Text>
+        <View className='example-header'>border-color</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -93,7 +93,7 @@ export default function Size() {
     {/* 测试 border-style */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>border-style</Text>
+        <View className='example-header'>border-style</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -105,7 +105,7 @@ export default function Size() {
               </View>
             </View>
             <View className='column'>
-              <Text className='example-sub-title'>border-color 四边</Text>
+              <Text className='example-sub-title'>border-style 四边</Text>
               <View className='row bg'>
                 <View className='box border' style={{ borderTopStyle: 'dashed'}}>top</View>
                 <View className='box border' style={{ borderRightStyle: 'dashed'}}>right</View>
@@ -121,7 +121,7 @@ export default function Size() {
     {/* 测试 border-radius */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>border-radius</Text>
+        <View className='example-header'>border-radius</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
diff --git a/src/pages/global/pages/styles/box/index.config.ts b/src/pages/global/pages/styles/box/index.config.ts
index 27239523..6a09c0a3 100644
--- a/src/pages/global/pages/styles/box/index.config.ts
+++ b/src/pages/global/pages/styles/box/index.config.ts
@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: 'Size'
+  navigationBarTitleText: 'Box'
 })
diff --git a/src/pages/global/pages/styles/box/index.scss b/src/pages/global/pages/styles/box/index.scss
index 1727ded5..f66fd880 100644
--- a/src/pages/global/pages/styles/box/index.scss
+++ b/src/pages/global/pages/styles/box/index.scss
@@ -1,10 +1,107 @@
+
+.bg {
+  background: #eee;
+}
+
 .box {
   width: 80px;
   height: 80px;
   margin: 10px;
   font-size: 16px;
   color: #fff;
+  text-align: center;
   background: #555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.box100 {
+  width: 100px;
+  height: 100px;
+}
+
+.box400 {
+  width: 400px;
+  height: 400px;
+  background-color: white;
+}
+
+.box-half {
+  width: 50%;
+  height: 50%;
+}
+
+.box-50vw {
+  width: 50vw;
+}
+
+.box-50vh {
+  height: 50vh;
+}
+
+.box-minw200 {
+  min-width: 200px;
+}
+
+.box-minw50 {
+  min-width: 50px;
+}
+
+.box-minh200 {
+  min-height: 200px;
+}
+
+.box-minh50 {
+  min-height: 50px;
+}
+
+.box-m10 {
+  margin: 10px;
+}
+
+.box-m10-2 {
+  margin: 10px 10px;
+}
+
+.box-m10-3 {
+  margin: 10px 10px 10px;
+}
+
+.box-m10-4 {
+  margin: 10px 10px 10px 10px;
+}
+
+.box-ml10 {
+  margin-left: 10px;
+}
+
+.box-mr10 {
+  margin-right: 10px;
+}
+
+.box-mt10 {
+  margin-top: 10px;
+}
+
+.box-mb10 {
+  margin-bottom: 10px;
+}
+
+.box-pl10 {
+  padding-left: 10px;
+}
+
+.box-pr10 {
+  padding-right: 10px;
+}
+
+.box-pt10 {
+  padding-top: 10px;
+}
+
+.box-pb10 {
+  padding-bottom: 10px;
 }
 
 .mbox {
@@ -35,15 +132,10 @@
   flex-direction: row;
 }
 
-.bg {
-  background: #eee;
-}
-
 .flex {
   display: flex;
 }
 
-
 .row {
   display: flex;
   flex-direction: row;
diff --git a/src/pages/global/pages/styles/box/index.tsx b/src/pages/global/pages/styles/box/index.tsx
index 7a444410..dbdea8f6 100644
--- a/src/pages/global/pages/styles/box/index.tsx
+++ b/src/pages/global/pages/styles/box/index.tsx
@@ -5,37 +5,37 @@ import './index.scss'
 export default function Size() {
   return <View className='global-page'>
     <View className='global-page__header'>
-      <Header title='尺寸'></Header>
+      <Header title='Box'></Header>
     </View>
  
     {/* 测试 单位 */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>width height 单位</Text>
+        <View className='example-header'>width height 单位</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
               <Text className='example-sub-title'>height & width 单位:px</Text>
               <View className='row bg'>
-                <View className='box' style={{ height: '100px', width: '100px'}}>100px</View>
+                <View className='box box100'>100px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>height & width 单位:%</Text>
-              <View className='row bg' style={{height: '400px', width: '400px'}}>
-                <View className='box' style={{ height: '50%', width: '50%'}}>50%</View>
+              <View className='row bg box400'>
+                <View className='box box-half'>50%</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>width 单位:vw</Text>
               <View className='row bg'>
-                <View className='box' style={{ width: '50vw'}}>50vw</View>
+                <View className='box box-50vw'>50vw</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>heigh 单位:vh</Text>
               <View className='row bg'>
-                <View className='box' style={{ height: '50vh'}}>50vh</View>
+                <View className='box box-50vh'>50vh</View>
               </View>
             </View>
           </View>
@@ -46,31 +46,31 @@ export default function Size() {
     {/* 测试 最小/大 */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>最大/小尺寸</Text>
+        <View className='example-header'>最大/小尺寸</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
               <Text className='example-sub-title'>min-width: 200px</Text>
               <View className='row bg'>
-                <View className='box' style={{ minWidth: '200px'}}>200px</View>
+                <View className='box box-minw200'>200px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>max-width: 50px</Text>
               <View className='row bg'>
-                <View className='box' style={{ maxWidth: '50px'}}>50px</View>
+                <View className='box box-minw50'>50px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>min-height: 200px</Text>
               <View className='row bg'>
-                <View className='box' style={{ minHeight: '200px'}}>200px</View>
+                <View className='box box-minh200'>200px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>max-height: 50px</Text>
               <View className='row bg'>
-                <View className='box' style={{ maxHeight: '50px'}}>50px</View>
+                <View className='box box-minh50'>50px</View>
               </View>
             </View>
           </View>
@@ -87,17 +87,17 @@ export default function Size() {
             <View className='column'>
               <Text className='example-sub-title'>margin: 10px</Text>
               <View className='row bg'>
-                <View className='mbox' style={{ margin: '10px'}}>
-                  <View className='mmbox' style={{ marginLeft: '10px'}}></View>
+                <View className='mbox box-m10'>
+                  <View className='mmbox box-ml10'></View>
                 </View>
-                <View className='mbox' style={{ margin: '10px 10px'}}>
-                  <View className='mmbox' style={{ marginTop: '10px'}}></View>
+                <View className='mbox box-m10-2'>
+                  <View className='mmbox box-mt10'></View>
                 </View>
-                <View className='mbox' style={{ margin: '10px 10px 10px', justifyContent: 'flex-end'}}>
-                  <View className='mmbox' style={{ marginRight: '10px'}}></View>
+                <View className='mbox box-m10-3' style={{ justifyContent: 'flex-end'}}>
+                  <View className='mmbox box-mr10'></View>
                 </View>
-                <View className='mbox' style={{ margin: '10px 10px 10px 10px', alignItems: 'flex-end'}}>
-                  <View className='mmbox' style={{ marginBottom: '10px'}}></View>
+                <View className='mbox box-m10-4' style={{ alignItems: 'flex-end'}}>
+                  <View className='mmbox box-mb10'></View>
                 </View>
               </View>
             </View>
@@ -115,16 +115,16 @@ export default function Size() {
             <View className='column'>
               <Text className='example-sub-title'>padding: 10px</Text>
               <View className='row bg'>
-                <View className='pbox' style={{ paddingLeft: '10px'}}>
+                <View className='pbox box-pl10'>
                   <View className='mmbox'></View>
                 </View>
-                <View className='pbox' style={{ paddingTop: '10px'}}>
+                <View className='pbox box-pt10'>
                   <View className='mmbox'></View>
                 </View>
-                <View className='pbox' style={{ paddingRight: '10px', justifyContent: 'flex-end'}}>
+                <View className='pbox box-pr10' style={{ justifyContent: 'flex-end'}}>
                   <View className='mmbox'></View>
                 </View>
-                <View className='pbox' style={{ paddingBottom: '10px', alignItems: 'flex-end'}}>
+                <View className='pbox box-pb10' style={{ alignItems: 'flex-end'}}>
                   <View className='mmbox'></View>
                 </View>
               </View>
diff --git a/src/pages/global/pages/styles/flex/index.tsx b/src/pages/global/pages/styles/flex/index.tsx
index f3099e36..6ef99056 100644
--- a/src/pages/global/pages/styles/flex/index.tsx
+++ b/src/pages/global/pages/styles/flex/index.tsx
@@ -10,7 +10,7 @@ export default function Size() {
     {/* 测试 flex-direcion */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>flex-direction</Text>
+        <View className='example-header'>flex-direction</View>
         <View className='example-body'>
           <Text className='example-sub-title'>row</Text>
           <View className='row bg'>
diff --git a/src/pages/global/pages/styles/other/index.scss b/src/pages/global/pages/styles/other/index.scss
index 1997b81a..2fd6c5b4 100644
--- a/src/pages/global/pages/styles/other/index.scss
+++ b/src/pages/global/pages/styles/other/index.scss
@@ -27,4 +27,22 @@
 
 .m10 {
   margin: 0 10px;
+}
+
+.box300 {
+  width: 300px;
+  height: 300px;
+  margin: 10px;
+}
+
+.box400 {
+  font-size: 40px;
+  display: flex;
+  width: 400px;
+  height: 400px;
+  opacity: 0.5;
+  color: white;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/src/pages/global/pages/styles/other/index.tsx b/src/pages/global/pages/styles/other/index.tsx
index 3ca73f87..2b071940 100644
--- a/src/pages/global/pages/styles/other/index.tsx
+++ b/src/pages/global/pages/styles/other/index.tsx
@@ -10,7 +10,7 @@ export default function Size() {
     {/* 测试 透明度 */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>其他</Text>
+        <View className='example-header'>其他</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
@@ -24,11 +24,11 @@ export default function Size() {
             <View className='column'>
               <Text className='example-sub-title'>overflow</Text>
               <View className='column'>
-                <View className='bg' style={{ overflow: 'hidden', height: '300px', width: '300px', margin: '10px'}}>
-                  <View className='box m10' style={{ height: '400px', width: '400px', opacity: 0.5 }}>hidden</View>
+                <View className='bg box300' style={{ overflow: 'hidden'}}>
+                  <View className='box m10 box400'>hidden</View>
                 </View>
-                <View className='bg' style={{ overflow: 'visibile', height: '300px', width: '300px', margin: '10px'}}>
-                  <View className='box m10' style={{ height: '400px', width: '400px', opacity: 0.5 }}>visibile</View>
+                <View className='bg box300' style={{ overflow: 'visibile'}}>
+                  <View className='box m10 box400'>visibile</View>
                 </View>
               </View>
             </View>
diff --git a/src/pages/global/pages/styles/position/index.scss b/src/pages/global/pages/styles/position/index.scss
index 4d4ff1d9..587f3828 100644
--- a/src/pages/global/pages/styles/position/index.scss
+++ b/src/pages/global/pages/styles/position/index.scss
@@ -14,11 +14,71 @@
 .bg {
   background: #eee;
 }
-
+.bg-relative {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  background: #ddd;
+}
+.box-absolute {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
 .flex {
   display: flex;
 }
 
+.box-relative {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+
+.box-z-1 {
+  opacity: 0.5;
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 1;
+  color: red;
+}
+
+.box-z-2 {
+  opacity: 0.5;
+  position: absolute;
+  top: 35px;
+  left: 35px;
+  z-index: 2;
+  color: orange;
+}
+
+.box-z-3 {
+  opacity: 0.5;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  z-index: 3;
+  color: yellow;
+}
+
+.box-z-4 {
+  opacity: 0.5;
+  position: absolute;
+  top: 45px;
+  left: 45px;
+  z-index: 4;
+  color: green;
+}
+
+.box-z-5 {
+  opacity: 0.5;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 5;
+  color: blue;
+}
 
 .row {
   display: flex;
diff --git a/src/pages/global/pages/styles/position/index.tsx b/src/pages/global/pages/styles/position/index.tsx
index 1ea90f64..ed0fcb08 100644
--- a/src/pages/global/pages/styles/position/index.tsx
+++ b/src/pages/global/pages/styles/position/index.tsx
@@ -11,20 +11,20 @@ export default function Size() {
     {/* 测试 定位 */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>position</Text>
+        <View className='example-header'>position</View>
         <View className='example-body'>
           <View className='column'>
             <View className='column'>
               <Text className='example-sub-title'>relative</Text>
               <View className='row bg'>
-                <View className='box' style={{ position: 'relative', top: '30px', left: '30px'}}>relative 30px</View>
+                <View className='box box-relative'>relative 30px</View>
               </View>
             </View>
             <View className='column'>
               <Text className='example-sub-title'>absolute</Text>
               <View className='row'>
-                <View className='bg' style={{ position: 'relative', height: '200px', width: '200px'}}>
-                  <View className='box' style={{ position: 'absolute', top: '30px', left: '30px'}}>
+                <View className='bg bg-relative'>
+                  <View className='box box-absolute'>
                     absolute 30px
                   </View>
                 </View>
@@ -33,12 +33,12 @@ export default function Size() {
             <View className='column'>
               <Text className='example-sub-title'>zIndex</Text>
               <View className='row'>
-                <View className='bg' style={{ position: 'relative', height: '200px', width: '200px'}}>
-                  <View className='box' style={{ opacity: 0.5, position: 'absolute', top: '30px', left: '30px', zIndex: 1}}>1</View>
-                  <View className='box' style={{ opacity: 0.5, position: 'absolute', top: '35px', left: '35px', zIndex: 2 }}>2</View>
-                  <View className='box' style={{ opacity: 0.5, position: 'absolute', top: '40px', left: '40px', zIndex: 3}}>3</View>
-                  <View className='box' style={{ opacity: 0.5, position: 'absolute', top: '45px', left: '45px', zIndex: 4}}>4</View>
-                  <View className='box' style={{ opacity: 0.5, position: 'absolute', top: '50px', left: '50px', zIndex: 5}}>5</View>
+                <View className='bg bg-relative'>
+                  <View className='box box-z-1'>1</View>
+                  <View className='box box-z-2'>2</View>
+                  <View className='box box-z-3'>3</View>
+                  <View className='box box-z-4'>4</View>
+                  <View className='box box-z-5'>5</View>
                 </View>
               </View>
             </View>
diff --git a/src/pages/global/pages/styles/text/index.tsx b/src/pages/global/pages/styles/text/index.tsx
index 8cf0aa82..08df952a 100644
--- a/src/pages/global/pages/styles/text/index.tsx
+++ b/src/pages/global/pages/styles/text/index.tsx
@@ -10,7 +10,7 @@ export default function Size() {
     {/* 测试 文本 */}
     <View className='global-page__body'>
       <View className='global-page__body-example example'>
-        <Text className='example-title'>font</Text>
+        <View className='example-header'>font</View>
         <View className='example-body'>
           <View className='column'>
           <View className='column'>