diff --git a/src/app.js b/src/app.js
index ce38337c1..2d410c215 100644
--- a/src/app.js
+++ b/src/app.js
@@ -27,12 +27,14 @@ class App extends Component {
       'pages/view/avatar/index',
       'pages/view/article/index',
       'pages/navigation/timeline/index',
-      'pages/navigation/drawer/index',
-      'pages/navigation/tabs/index'
+      // 'pages/navigation/drawer/index',
+      'pages/navigation/tabs/index',
       // 'pages/layout/flex/index'
       // 'pages/layout/grid/index',
       // 'pages/layout/float-layout/index',
       // 'pages/layout/card/index'
+      'pages/panel/index',
+      'pages/basic/color/index'
     ],
     window: {
       backgroundTextStyle: 'light',
diff --git a/src/app.scss b/src/app.scss
index a8ec2593f..6e4f4bfc5 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,7 +1,19 @@
 @import "./style/theme/default.scss";
 
 #app {
-  background-color: #f8f8f8;
+  background-color: #f3f3f8;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  background-color: #f3f3f8;
+}
+
+view {
+  box-sizing: border-box;
 }
 
 // 实例模板
diff --git a/src/assets/images/logo_taro.png b/src/assets/images/logo_taro.png
new file mode 100644
index 000000000..4a8d777eb
Binary files /dev/null and b/src/assets/images/logo_taro.png differ
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
new file mode 100644
index 000000000..a8d5cf042
--- /dev/null
+++ b/src/assets/style/common.scss
@@ -0,0 +1,49 @@
+.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 {
+  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;
+    }
+  }
+}
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index 676699175..a91cf8c00 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -1,5 +1,6 @@
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Image, Text } from '@tarojs/components'
+import logoImg from '../../assets/images/logo_taro.png'
 
 import './index.scss'
 
@@ -15,208 +16,76 @@ export default class Index extends Taro.Component {
       list: [
         {
           id: 'Basic',
-          name: '基础',
-          open: false,
-          childrens: [
-            {
-              title: '图标',
-              name: 'Icon'
-            },
-            {
-              title: '颜色',
-              name: 'Color'
-            },
-            {
-              title: '文本',
-              name: 'Text'
-            },
-            {
-              title: '按钮',
-              name: 'Button'
-            }
-          ]
+          title: '基础',
+          content: '包含颜色、文本、图标'
         },
         {
           id: 'View',
-          name: '视图组件',
-          open: false,
-          childrens: [
-            {
-              title: '通告栏',
-              name: 'NoticeBar'
-            },
-            {
-              title: '徽章',
-              name: 'Badge'
-            },
-            {
-              title: '警告提示',
-              name: 'Alert'
-            },
-            {
-              title: '标签',
-              name: 'Tag'
-            },
-            {
-              title: '头像',
-              name: 'Avatar'
-            },
-            {
-              title: '文章',
-              name: 'Article'
-            }
-          ]
+          title: '视图',
+          content: '6个组件'
         },
         {
           id: 'Action',
-          name: '操作反馈',
-          open: false,
-          childrens: [
-            {
-              title: '动作面板',
-              name: 'Action-Sheet'
-            },
-            {
-              title: '动作指示器',
-              name: 'Activity-Indicator'
-            },
-            {
-              title: '对话框',
-              name: 'Modal'
-            },
-            {
-              title: '进度条',
-              name: 'Progress'
-            },
-            {
-              title: '轻提示',
-              name: 'Toast'
-            }
-          ]
+          title: '操作反馈',
+          content: '5个组件'
         },
         {
-          id: 'form',
-          name: '表单组件',
-          open: false,
-          childrens: [
-            {
-              title: '输入框',
-              name: 'Input'
-            },
-            {
-              title: '单选框',
-              name: 'Radio'
-            },
-            {
-              title: '复选框',
-              name: 'Checkbox'
-            },
-            {
-              title: '开关',
-              name: 'Switch'
-            },
-            {
-              title: '评分',
-              name: 'Rate'
-            },
-            {
-              title: '数字输入框',
-              name: 'Input-Number'
-            },
-            {
-              title: '多行文本框',
-              name: 'Textarea'
-            }
-          ]
+          id: 'Form',
+          title: '表单',
+          content: '7个组件'
         },
         {
           id: 'Layout',
-          name: '布局',
-          open: false,
-          childrens: [
-            {
-              title: '弹性布局',
-              name: 'Flex'
-            },
-            {
-              title: '栅格',
-              name: 'Grid'
-            },
-            {
-              title: '列表',
-              name: 'List'
-            },
-            {
-              title: '浮层',
-              name: 'Float-Layout'
-            },
-            {
-              title: '卡片',
-              name: 'Card'
-            }
-          ]
+          title: '布局',
+          content: '5个组件'
         },
         {
           id: 'Navigation',
-          name: '导航',
-          childrens: [
-            {
-              title: '标签页',
-              name: 'Tabs'
-            },
-            {
-              title: '抽屉',
-              name: 'Drawer'
-            },
-            {
-              title: '时间轴',
-              name: 'Timeline'
-            }
-          ]
+          title: '导航',
+          content: '6个组件'
         }
       ]
     }
   }
 
-  goToComponent = e => {
-    const { id, name } = e.currentTarget.dataset
-    const url = `/pages/${id.toLowerCase()}/${name.toLowerCase()}/index`
+  gotoPanel = e => {
+    const { id } = e.currentTarget.dataset
     Taro.navigateTo({
-      url
+      url: `/pages/panel/index?id=${id.toLowerCase()}`
     })
   }
 
   render () {
     const { list } = this.state
+
     return (
-      <View className='index-page'>
-        <View className='page-header'>组件入口</View>
-        <View className='page-body'>
-          <View className='component-group'>
-            {list.map((item, index) => (
-              <View className='group-item' key={index}>
-                <View className='group-info'>
-                  <View className='group-info-title'>{item.name}</View>
-                </View>
-                <View className='group-list'>
-                  {item.childrens.map(child => (
-                    <View
-                      key={index}
-                      data-id={item.id}
-                      data-name={child.name}
-                      onClick={this.goToComponent}
-                      className='list-component'
-                    >
-                      <View className='list-component-info'>
-                        {child.name.split('-').join('')} {child.title}
-                      </View>
-                      <View className='list-component-arrow' />
-                    </View>
-                  ))}
-                </View>
+      <View className='page page-index'>
+        <View className='logo'>
+          <Image src={logoImg} className='img' mode='widthFix' />
+        </View>
+        <View className='page-title'>Taro UI Weapp</View>
+        <View className='module-list'>
+          {list.map((item, index) => (
+            <View
+              className='module-list__item'
+              key={index}
+              data-id={item.id}
+              data-name={item.title}
+              data-list={item.subpages}
+              onClick={this.gotoPanel}
+            >
+              <View className='module-list__icon'>
+                <Text className='at-icon at-icon-barrage'></Text>
+              </View>
+              <View className='module-list__info'>
+                <View className='title'>{item.title}</View>
+                <View className='content'>{item.content}</View>
+              </View>
+              <View className='module-list__arrow'>
+                <Text className='at-icon at-icon-enter'></Text>
               </View>
-            ))}
-          </View>
+            </View>
+          ))}
         </View>
       </View>
     )
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 816cb324d..0099461e1 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,11 +1,97 @@
-.index-page {
+@import '../../components/icon/index.scss';
+
+.page {
+  position: relative;
   background-color: #f8f8f8;
+
+  view {
+    box-sizing: border-box;
+  }
 }
 
-.page-header {
-  padding: 40px;
-  padding-top: 80px;
-  text-align: center;
+.page-index {
+  padding-top: 60px;
+  padding-bottom: 100px;
+
+  .logo {
+    margin: 0 auto;
+    margin-top: 60px;
+    font-size: 0;
+    text-align: center;
+
+    .img {
+      width: 264px;
+      height: 180px;
+    }
+  }
+
+  .page-title {
+    margin-top: 24px;
+    color: #333;
+    font-size: 36px;
+    text-align: center;
+  }
+
+  .module-list {
+    margin-top: 72px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__item {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 40px;
+      padding: 0 30px;
+      width: 90%;
+      height: 144px;
+      background: #fff;
+      box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.04);
+      border-radius: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &__icon {
+      width: 70px;
+      height: 70px;
+      color: #78A4FA;
+      text-align: center;
+      border: 5px solid rgba(120, 164, 250, 0.16);
+      border-radius: 50%;
+    }
+
+    &__info {
+      flex: 1;
+      text-align: left;
+      margin-left: 24px;
+
+      .title {
+        color: #6A6A77;
+        font-size: 28px;
+        font-weight: bold;
+      }
+
+      .content {
+        color: #88889C;
+        font-size: 22px;
+      }
+    }
+
+    &__arrow {
+      width: 62px;
+      height: 62px;
+      color: #fff;
+      text-align: center;
+      background: #78A4FA;
+      box-shadow: 4px 10px 30px 0 rgba(120, 164, 250, 0.30);
+      border-radius: 50%;
+    }
+  }
 }
 
 .page-body {
diff --git a/src/pages/panel/index.js b/src/pages/panel/index.js
new file mode 100644
index 000000000..c5f48961c
--- /dev/null
+++ b/src/pages/panel/index.js
@@ -0,0 +1,227 @@
+import Taro from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+
+import './index.scss'
+
+export default class PanelBasic extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  constructor () {
+    super(...arguments)
+
+    this.state = {
+      panelNames: {
+        'basic': '基础',
+        'view': '视图',
+        'action': '操作反馈',
+        'form': '表单',
+        'layout': '布局',
+        'navigation': '导航'
+      },
+      list: {
+        'basic': [
+          {
+            id: 'Icon',
+            name: '图标'
+          },
+          {
+            id: 'Color',
+            name: '颜色'
+          },
+          {
+            id: 'Typo',
+            name: '字体'
+          },
+          {
+            id: 'Button',
+            name: '按钮'
+          }
+        ],
+        'view': [
+          {
+            id: 'NoticeBar',
+            name: '通告栏'
+          },
+          {
+            id: 'Badge',
+            name: '徽章'
+          },
+          {
+            id: 'Alert',
+            name: '警告提示'
+          },
+          {
+            id: 'Tag',
+            name: '标签'
+          },
+          {
+            id: 'Avatar',
+            name: '头像'
+          },
+          {
+            id: 'Article',
+            name: '文章'
+          }
+        ],
+        'action': [
+          {
+            id: 'Action-Sheet',
+            name: '动作面板'
+          },
+          {
+            id: 'Activity-Indicator',
+            name: '动作指示器'
+          },
+          {
+            id: 'Modal',
+            name: '对话框'
+          },
+          {
+            id: 'Progress',
+            name: '进度条'
+          },
+          {
+            id: 'Toast',
+            name: '轻提示'
+          }
+        ],
+        'form': [
+          {
+            id: 'Input',
+            name: '输入框'
+          },
+          {
+            id: 'Radio',
+            name: '单选框'
+          },
+          {
+            id: 'Checkbox',
+            name: '复选框'
+          },
+          {
+            id: 'Switch',
+            name: '开关'
+          },
+          {
+            id: 'Rate',
+            name: '评分'
+          },
+          {
+            id: 'Input-Number',
+            name: '数字输入框'
+          },
+          {
+            id: 'Textarea',
+            name: '多行文本框'
+          }
+        ],
+        'layout': [
+          {
+            id: 'Flex',
+            name: '弹性布局'
+          },
+          {
+            id: 'Grid',
+            name: '栅格'
+          },
+          {
+            id: 'List',
+            name: '列表'
+          },
+          {
+            id: 'Float-Layout',
+            name: '浮层'
+          },
+          {
+            id: 'Card',
+            name: '卡片'
+          }
+        ],
+        'navigation': [
+          {
+            id: 'NavBar',
+            name: '导航栏'
+          },
+          {
+            id: 'TabBar',
+            name: '标签栏'
+          },
+          {
+            id: 'Tabs',
+            name: '标签页'
+          },
+          {
+            id: 'Segmented-Control',
+            name: '分段器'
+          },
+          {
+            id: 'Timeline',
+            name: '时间轴'
+          },
+          {
+            id: 'Pagination',
+            name: '分页器'
+          },
+          {
+            id: 'Drawer',
+            name: '抽屉'
+          }
+        ]
+      }
+    }
+  }
+
+  componentDidMount () {
+    const { id } = this.$router.params
+    this.setState({
+      currentId: id.toLowerCase() || ''
+    })
+  }
+
+  gotoComponent = e => {
+    const { id, parent } = e.currentTarget.dataset
+    Taro.navigateTo({
+      url: `/pages/${parent.toLowerCase()}/${id.toLowerCase()}/index`
+    })
+  }
+
+  render () {
+    const { list, currentId, panelNames } = this.state
+    const itemList = list[currentId] || []
+    const title = panelNames[currentId] || ''
+
+    return (
+      <View className='page'>
+        {/* S Header */}
+        <View className='panel-header'>
+          <View className='panel-header__icon'>
+            <Text className='at-icon at-icon-barrage'></Text>
+          </View>
+          <View className='panel-header__title'>{title}</View>
+        </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='panel-body'>
+          <View className='component-list'>
+            {itemList.map(item => (
+              <View
+                className='component-list__item'
+                key={item.id}
+                data-id={item.id}
+                data-parent={currentId}
+                onClick={this.gotoComponent}
+              >
+                <Text className='name'>{`${item.id} ${item.name}`}</Text>
+                <Text className='at-icon at-icon-enter'></Text>
+              </View>
+            ))}
+          </View>
+        </View>
+        {/* E Body */}
+      </View>
+    )
+  }
+}
diff --git a/src/pages/panel/index.scss b/src/pages/panel/index.scss
new file mode 100644
index 000000000..f0d7053d6
--- /dev/null
+++ b/src/pages/panel/index.scss
@@ -0,0 +1,2 @@
+@import '../../components/icon/index.scss';
+@import '../../assets/style/common.scss';