feat(doc): 添加字体展示页

.stylelintrc

@@ -8,6 +8,7 @@
     "at-rule-empty-line-before":null,
     "number-no-trailing-zeros": null,
     "no-empty-source": null,
+    "unit-case": null,
     "scss/at-rule-no-unknown": true
   }
 }

src/app.js

@@ -9,6 +9,7 @@ class App extends Component {
       'pages/index/index',
       'pages/panel/index',
       'pages/basic/color/index',
+      'pages/basic/typo/index',
       'pages/basic/icon/index',
       'pages/basic/button/index',
       'pages/action/toast/index',
@@ -29,7 +30,7 @@ class App extends Component {
       'pages/view/avatar/index',
       'pages/view/article/index',
       'pages/navigation/timeline/index',
-      'pages/navigation/drawer/index',
+      // 'pages/navigation/drawer/index',
       'pages/navigation/tabs/index',
       'pages/navigation/tab-bar/index',
       'pages/navigation/segmented-control/index'

src/assets/style/common.scss

@@ -55,9 +55,12 @@
   height: 180px;
 
   &__title {
-    height: 98px;
-    border-bottom: 4px solid #6190E8;
-    border-radius: 2px;
+    height: 90px;
+    color: #333;
+    font-size: 40px;
+    font-weight: bold;
+    border-bottom: 2PX solid #6190E8;
+    border-radius: 1PX;
   }
 }
 
@@ -87,11 +90,11 @@
         left: 0;
         top: 50%;
         margin-top: -20px;
-        width: 6px;
+        width: 2PX;
         height: 40px;
         background-color: #6190E8;
         box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.20);
-        border-radius: 3px;
+        border-radius: 1PX;
       }
     }
   }

src/pages/basic/typo/index.js

@@ -0,0 +1,71 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class BasicTypo extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  render () {
+    return (
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>字体</View>
+        </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>Typography</View>
+            <View className='panel__content'>
+              <View className='table-typo'>
+                <View className='table-typo__head'>
+                  <View className='thead'>类型</View>
+                  <View className='thead'>行高</View>
+                  <View className='thead'>用途</View>
+                </View>
+                <View className='table-typo__body'>
+                  <View className='table-typo__line'>
+                    <View className='col h0'>H0，40PX</View>
+                    <View className='col'>60PX</View>
+                    <View className='col'>仅用于数字</View>
+                  </View>
+                  <View className='table-typo__line'>
+                    <View className='col h1'>H1，36PX</View>
+                    <View className='col'>54PX</View>
+                    <View className='col'>大模块标题</View>
+                  </View>
+                  <View className='table-typo__line'>
+                    <View className='col h2'>H2，32PX</View>
+                    <View className='col'>48PX</View>
+                    <View className='col'>常规标题</View>
+                  </View>
+                  <View className='table-typo__line'>
+                    <View className='col h3'>H3，28PX</View>
+                    <View className='col'>42PX</View>
+                    <View className='col'>正文</View>
+                  </View>
+                  <View className='table-typo__line'>
+                    <View className='col h4'>H4，24PX</View>
+                    <View className='col'>36PX</View>
+                    <View className='col'>辅助信息、注释</View>
+                  </View>
+                  <View className='table-typo__line'>
+                    <View className='col h5'>H5，20PX</View>
+                    <View className='col'>30PX</View>
+                    <View className='col'>标签</View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
+      </View>
+    )
+  }
+}

src/pages/basic/typo/index.scss

@@ -0,0 +1,80 @@
+@import '../../../assets/style/common.scss';
+
+.table-typo {
+  padding: 0 28px;
+  width: 100%;
+
+  &__head {
+    padding: 20px 32px;
+    color: #AFB9CC;
+    font-size: 28px;
+    border: 1px solid #C4D9E7;
+    border-radius: 8px;
+
+    .thead {
+      display: inline-block;
+
+      &:nth-child(1) {
+        width: 44%;
+      }
+
+      &:nth-child(2) {
+        width: 18%;
+      }
+    }
+  }
+
+  &__body {
+    margin-top: 20px;
+  }
+
+  &__line {
+    margin-top: 20px;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    height: 80px;
+    color: #354052;
+    font-size: 28px;
+
+    &:nth-child(2n+1) {
+      background-color: #FAFBFC;
+    }
+
+    .col {
+      display: inline-block;
+
+      &:nth-child(1) {
+        width: 44%;
+      }
+
+      &:nth-child(2) {
+        width: 18%;
+      }
+
+      &.h0 {
+        font-size: 40px;
+      }
+
+      &.h1 {
+        font-size: 36px;
+      }
+
+      &.h2 {
+        font-size: 32px;
+      }
+
+      &.h3 {
+        font-size: 28px;
+      }
+
+      &.h4 {
+        font-size: 24px;
+      }
+
+      &.h5 {
+        font-size: 20px;
+      }
+    }
+  }
+}