From d6d4085af45d803bf870cc78c05478f5bb9d3580 Mon Sep 17 00:00:00 2001 From: cos2004 Date: Mon, 23 Jul 2018 14:57:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20article=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/article/index.js | 34 +++++++--------- src/components/article/index.scss | 64 +++++++++++++++++++------------ src/pages/view/article/index.js | 57 ++------------------------- 3 files changed, 57 insertions(+), 98 deletions(-) diff --git a/src/components/article/index.js b/src/components/article/index.js index 9c6c85312..aa64e4e49 100644 --- a/src/components/article/index.js +++ b/src/components/article/index.js @@ -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 ( - + 这是一级标题这是一级标题 - + 2017-05-07   这是作者 - + 这是二级标题 + 这是三级标题 + 这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ + 这是文本段落。这是文本段落。 + - - - + + + + 这是二级标题 + 这是三级标题 + 这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ + - - - diff --git a/src/components/article/index.scss b/src/components/article/index.scss index d434c299e..cbd627837 100644 --- a/src/components/article/index.scss +++ b/src/components/article/index.scss @@ -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; } + } \ No newline at end of file diff --git a/src/pages/view/article/index.js b/src/pages/view/article/index.js index 2533c1b3b..78446a7b7 100644 --- a/src/pages/view/article/index.js +++ b/src/pages/view/article/index.js @@ -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() { @@ -26,56 +26,7 @@ export default class AvatarPage extends Taro.Component { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 凹 - - - 凹 - - - 凹 - - - - - - 凹 - - - 凹 - - - 凹 - - - + ) }