feat(doc): 重构视图展示页

jd-opensource · Jul 27, 2018 · 9cc2ca8 · 9cc2ca8
1 parent 190bffa
commit 9cc2ca8
Show file tree

Hide file tree

Showing 14 changed files with 413 additions and 310 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -62,3 +62,122 @@ view {
     }
   }
 }
+
+/**
+ * 分类页样式
+ */
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: 60px;
+  height: 180px;
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    color: #78A4FA;
+    text-align: center;
+    background: #fff;
+    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11);
+    border-radius: 10px;
+  }
+
+  &__title {
+    margin-left: 32px;
+    color: #78A4FA;
+    font-size: 36px;
+    font-weight: bold;
+  }
+}
+
+.panel-body {
+  min-height: calc(100vh - 180px);
+  background: #fff;
+  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
+}
+
+.component-list {
+  margin: 20px 60px 0;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120px;
+    border-bottom: 1px solid #D8D8D8;
+
+    .name {
+      color: #1D1D26;
+      font-size: 28px;
+    }
+  }
+}
+
+/**
+ * 文档 DEMO 页
+ */
+.doc-header {
+  display: flex;
+  align-items: center;
+  padding: 60px;
+  height: 180px;
+
+  &__title {
+    position: relative;
+    height: 90px;
+    color: #333;
+    font-size: 40px;
+    font-weight: bold;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      display: inline-block;
+      width: 120px;
+      height: 2PX;
+      border-radius: 1PX;
+      background-color: #6190E8;
+    }
+  }
+}
+
+.doc-body {
+  min-height: calc(100vh - 180px);
+  background: #fff;
+  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .panel {
+    margin: 32px 0 50px;
+
+    &__title {
+      position: relative;
+      margin-bottom: 50px;
+      padding-left: 28px;
+      color: #6A6A77;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 1.5;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -20px;
+        width: 2PX;
+        height: 40px;
+        background-color: #6190E8;
+        box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.20);
+        border-radius: 1PX;
+      }
+    }
+  }
+}
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
diff --git a/src/pages/basic/button/index.scss b/src/pages/basic/button/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .example {
   margin-bottom: 15px;
 

diff --git a/src/pages/basic/color/index.scss b/src/pages/basic/color/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .color-list {
   display: flex;
   justify-content: flex-start;

diff --git a/src/pages/basic/icon/index.scss b/src/pages/basic/icon/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .at-icon {
   margin: 0 10px;
 }
diff --git a/src/pages/basic/typo/index.scss b/src/pages/basic/typo/index.scss
@@ -1,5 +1,3 @@
-@import '../../../assets/style/common.scss';
-
 .table-typo {
   padding: 0 28px;
   width: 100%;

diff --git a/src/pages/panel/index.scss b/src/pages/panel/index.scss
@@ -1,2 +1 @@
 @import '../../components/icon/index.scss';
-@import '../../assets/style/common.scss';
diff --git a/src/pages/view/avatar/index.js b/src/pages/view/avatar/index.js
@@ -24,57 +24,87 @@ export default class AvatarPage extends Taro.Component {
   render () {
     return (
       <View className='page'>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>头像</View>
         </View>
+        {/* E Header */}
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar image='https://jdc.jd.com/img/200'></AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 圆形头像 */}
+          <View className='panel'>
+            <View className='panel__title'>圆形头像</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
 
-        </View>
-
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar circle image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+          {/* 圆角矩形头像 */}
+          <View className='panel'>
+            <View className='panel__title'>圆角矩形头像</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar size='small' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar size='large' image='https://jdc.jd.com/img/200'></AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-        </View>
 
-        <View className='example'>
-          <View className='example-item'>
-            <AtAvatar size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+          {/* 圆形头像（支持文本） */}
+          <View className='panel'>
+            <View className='panel__title'>圆形头像（支持文本）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar circle size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar circle size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
-          <View className='example-item'>
-            <AtAvatar image='https://jdc.jd.com/img/200'>凹</AtAvatar>
-          </View>
-          <View className='example-item'>
-            <AtAvatar size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+
+          {/* 圆角矩形头像（支持文本） */}
+          <View className='panel'>
+            <View className='panel__title'>圆角矩形头像（支持文本）</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <View className='example-item'>
+                  <AtAvatar size='small' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+                <View className='example-item'>
+                  <AtAvatar size='large' image='https://jdc.jd.com/img/200'>凹</AtAvatar>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
-
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/view/avatar/index.scss b/src/pages/view/avatar/index.scss
@@ -1,9 +1,3 @@
-
-
-.page {
-  background-color: #fff;
-}
-
 .example {
   margin-bottom: 15px;
   text-align: center;
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		@import '../../components/icon/index.scss';
		@import '../../assets/style/common.scss';