Skip to content

Commit

Permalink
feat(文档): 重构文档首页和列表页
Browse files Browse the repository at this point in the history
  • Loading branch information
@koppthe
koppthe committed Jul 26, 2018
1 parent 9e54f2b commit 9a4ce09
Show file tree
Hide file tree
Showing 8 changed files with 431 additions and 184 deletions.
6 changes: 4 additions & 2 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 13 additions & 1 deletion src/app.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}

// 实例模板
Expand Down
Binary file added src/assets/images/logo_taro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions src/assets/style/common.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
221 changes: 45 additions & 176 deletions src/pages/index/index.js
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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>
)
Expand Down
Loading

0 comments on commit 9a4ce09

Please sign in to comment.