feat: add size sample

Author: zhiqingchen

src/app.config.ts

@@ -13,6 +13,7 @@ export default {
     'pages/global/pages/hooks/page',
     'pages/global/pages/lifecycle/page',
     'pages/global/pages/router/index',
+    'pages/global/pages/styles/size',
     // 全局相关 end
     // 组件相关 start
     'pages/components/index',

src/assets/iconpark/font-size.png

@@ -50,6 +50,7 @@
 .page-footer {
   margin-top: 40px;
   align-items: center;
+  text-align: center;
   &-text {
     padding: 20px;
     font-size: $font-size-sm;

src/pages/about/index.scss

@@ -110,13 +110,15 @@ export default class Index extends Component<any, any> {
             )
           })}
         </View>
-        {isRN && <View className='page-footer' onClick={() => {
+        {isRN ? <View className='page-footer' onClick={() => {
           Taro.navigateTo({
             url: '/pages/about/dep'
           })
         }}
         >
           <Text className='page-footer-text'>Taro: {taroVersion}, React Native: {rnVersion}, Taro Playground: {playgroundVersion}</Text>
+        </View> : <View className='page-footer'>
+          <Text className='page-footer-text'>Taro: {taroVersion}</Text>
         </View>}
       </View>
     )

src/pages/about/index.tsx

@@ -4,13 +4,15 @@ import { View, Image, Text, ScrollView } from "@tarojs/components";
 import hooksPng from "@/assets/iconpark/aiming.png";
 import routerPng from "@/assets/iconpark/navigation.png";
 import lifecyclePng from "@/assets/iconpark/cycle-arrow.png";
+import stylesPng from "@/assets/iconpark/font-size.png";
 
 import "./index.scss";
 
 const PNGS = {
   hooksPng,
   routerPng,
   lifecyclePng,
+  stylesPng
 };
 
 export default class Index extends Component<never, any> {
@@ -50,6 +52,17 @@ export default class Index extends Component<never, any> {
               name: '页面跳转',
             }
           ]
+        },
+        {
+          id: "styles",
+          name: "样式",
+          open: false,
+          pages: [
+            {
+              id: 'size',
+              name: '尺寸'
+            }
+          ]
         }
       ]
     };

src/pages/global/index.tsx

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '尺寸',
+}

src/pages/global/pages/styles/size.config.ts

@@ -0,0 +1,34 @@
+.fs30px {
+  font-size: 30px;
+}
+.fs60px {
+  font-size: 60px;
+}
+.fs15-px {
+  font-size: 15PX;
+}
+.fs30-px {
+  font-size: 30PX;
+}
+.fs1rem {
+  font-size: 1rem;
+}
+.fs2rem {
+  font-size: 2rem;
+}
+.fs30rpx {
+  font-size: 30rpx;
+}
+.fs15rpx {
+  font-size: 15rpx;
+}
+.w-30 {
+  height: 100px;
+  width: 30%;
+  background-color: cyan;
+}
+.w-60 {
+  height: 100px;
+  width: 60%;
+  background-color: orange;
+}

src/pages/global/pages/styles/size.scss

@@ -0,0 +1,59 @@
+import { View } from "@tarojs/components";
+import { pxTransform } from "@tarojs/taro";
+import Header from "@/components/head/head";
+
+import './size.scss'
+
+export default function Size() {
+  return <View className="global-page">
+    <View className="global-page__header">
+      <Header title="尺寸"></Header>
+    </View>
+    <View className="global-page__body">
+      <View className="global-page__body-example example">
+        <View className='example-header'>
+          px
+        </View>
+        <View className='example-body'>
+          <View className="fs30px">font-size: 30px</View>
+          <View className="fs60px">font-size: 60px</View>
+        </View>
+        <View className='example-header'>
+          PX
+        </View>
+        <View className='example-body'>
+          <View className="fs15-px">font-size: 15PX</View>
+          <View className="fs30-px">font-size: 30PX</View>
+        </View>
+        <View className='example-header'>
+          rem
+        </View>
+        <View className='example-body'>
+          <View className="fs1rem">font-size: 1rem</View>
+          <View className="fs2rem">font-size: 2rem</View>
+        </View>
+        <View className='example-header'>
+          rpx (不建议使用)
+        </View>
+        <View className='example-body'>
+          <View className="fs15rpx">font-size: 15rpx</View>
+          <View className="fs30rpx">font-size: 30rpx</View>
+        </View>
+        <View className='example-header'>
+          pxTransform
+        </View>
+        <View className='example-body'>
+          <View style={{fontSize: pxTransform(30)}}>pxTransform(30)</View>
+          <View style={{fontSize: pxTransform(60)}}>pxTransform(60)</View>
+        </View>
+        <View className='example-header'>
+          %
+        </View>
+        <View className='example-body'>
+          <View className="w-30">width: 30%</View>
+          <View className="w-60">width: 60%</View>
+        </View>
+      </View>
+    </View>
+  </View>
+}