Skip to content

Commit

Permalink
feat: article样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@cos2004
cos2004 committed Jul 23, 2018
1 parent c6d13b0 commit d6d4085
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 98 deletions.
34 changes: 14 additions & 20 deletions src/components/article/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,35 +30,29 @@ export default class Atarticle extends Taro.Component {
let {
} = this.props
let rootClassName = ['at-article']
let sizeClass = SIZE_CLASS[size] || ''
let circleClass = circle? 'at-article--circle': ''

rootClassName.push(`at-article--${sizeClass}`, circleClass)
rootClassName = rootClassName.filter(str => str != '')
console.log('=====', this.props.children)

let {children} = this.props
let letter;
if (typeof children == 'string') {
letter = children[0]
}
return (
<View className={rootClassName}>
<View className="at-article__h1"></View>
<View className="at-article__h1">这是一级标题这是一级标题</View>
<View className="at-article__info">
<Text className="at-article__info-date"></Text><Text className="at-article__info-author"></Text>
2017-05-07&nbsp;&nbsp;&nbsp;这是作者
</View>
<View className="at-article__content">
<View className="at-article__section">
<View className="at-article__h2"></View>
<View className="at-article__h2">这是二级标题</View>
<View className="at-article__h3">这是三级标题</View>
<View className="at-article__p">这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ</View>
<View className="at-article__p">这是文本段落。这是文本段落。</View>
<Image className="at-article__img" src="https://jdc.jd.com/img/400x400" mode="aspectFit" />

<View className="at-article__h3"></View>
<View className="at-article__paragraph"></View>
<Image className="at-article__image" src="" />
</View>

<View className="at-article__section">
<View className="at-article__h2">这是二级标题</View>
<View className="at-article__h3">这是三级标题</View>
<View className="at-article__p">这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ</View>
<Image className="at-article__img" src="https://jdc.jd.com/img/400x1000" mode="aspectFit" />

<View className="at-article__h3"></View>
<View className="at-article__paragraph"></View>
<Image className="at-article__image" src="" />
</View>
</View>

Expand Down
64 changes: 39 additions & 25 deletions src/components/article/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,47 @@

.at-avatar {
height: 100px;
width: 100px;
overflow: hidden;
box-shadow: 0 0 50px 0 rgba(0,0,0,0.05);
border-radius: 8px;
font-size: 40px;
line-height: 100px;
color: #fff;
background: #D8D8D8;
&__img {
width: 100%;
height: 100%;
.at-article {
word-break: break-all;
word-wrap: break-word;
&__h1,
&__h2,
&__h3 {
color: #333;
margin: 0 30px;
}
&--large {
width: 120px;
height: 120px;

&__h1 {
margin-top: 30px;
font-size: 48px;
line-height: 120px;
line-height: 72px;
}
&__info {
font-size: 28px;
color: #CCC;
line-height: 42px;
margin: 0 30px;
}

&__h2 {
font-size: 40px;
line-height: 60px;
margin-top: 30px;
}
&--small {
height: 80px;
width: 80px;
&__h3 {
font-size: 32px;
line-height: 80px;
line-height: 48px;
}
&__p {
font-size: 28px;
color: #666;
line-height: 42px;
margin: 25px 30px 0;
}
&--circle {
border-radius: 100px;
overflow: hidden;
background-clip: border-box;

&__img {
width: 690px;
display: block;
margin: 20px 30px 0;
border-radius: 4px;
}

}
57 changes: 4 additions & 53 deletions src/pages/view/article/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import AtAvatar from '../../../components/avatar/index'
import AtArticle from '../../../components/article/index'

import './index.scss'

export default class AvatarPage extends Taro.Component {
export default class ArticlePage extends Taro.Component {
config = {
navigationBarTitleText: 'Avatar Page'
navigationBarTitleText: 'Article Page'
}

constructor() {
Expand All @@ -26,56 +26,7 @@ export default class AvatarPage extends Taro.Component {
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>

</View>

<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 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 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>

<AtArticle></AtArticle>
</View>
)
}
Expand Down

0 comments on commit d6d4085

Please sign in to comment.