fix: 调整多端样式

wuba · Jan 17, 2024 · 3176d52 · 3176d52
1 parent df155ab
commit 3176d52
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 94 deletions.
diff --git 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
@@ -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>)
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: 'Size'
+  navigationBarTitleText: 'Box'
 })