feat(NoticeBar): 优化通告栏样式

jd-opensource · Aug 9, 2018 · d2d98a9 · d2d98a9
1 parent 34f5a1d
commit d2d98a9
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 90 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -79,59 +79,13 @@ view {
   }
 }
 
-.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);
+  padding-bottom: 60px;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 60px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
 
   .panel {
     margin: 32px 0 56px;
@@ -152,11 +106,11 @@ view {
         left: 24px;
         top: 50%;
         margin-top: -20px;
-        width: 2px;
+        width: 2PX;
         height: 40px;
         background-color: #6190e8;
         box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.2);
-        border-radius: 1px;
+        border-radius: 1PX;
       }
     }
 

diff --git a/src/components/button/index.scss b/src/components/button/index.scss
@@ -6,7 +6,7 @@ $at-button-height-sm: 60px;
 
 .at-button {
   margin: 0 auto;
-  padding: 0 $spacing-h-lg;
+  padding: 0 $spacing-h-xl;
   width: 710px;
   height: $at-button-height;
   color: $color-text-base;

diff --git a/src/components/checkbox/index.scss b/src/components/checkbox/index.scss
@@ -23,7 +23,7 @@
   }
 
   &__option {
-    padding-left: $spacing-h-lg;
+    padding-left: $spacing-h-xl;
     @include active;
 
     &--disabled {

diff --git a/src/components/form/index.scss b/src/components/form/index.scss
@@ -3,7 +3,7 @@
 
 .at-form {
   display: block;
-  padding-left: $spacing-h-lg;
+  padding-left: $spacing-h-xl;
   background-color: $color-bg;
   @include border-thin($directions: bottom top);
 

diff --git a/src/components/noticebar/index.js b/src/components/noticebar/index.js
@@ -1,7 +1,6 @@
-
 import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import AtIcon from '../icon/index'
 
 import './index.scss'
@@ -38,10 +37,10 @@ export default class AtNoticebar extends Taro.Component {
       single,
       icon,
     } = this.props
+    const rootClassName = ['at-noticebar']
     let _moreText = this.props.moreText
+
     if (!_moreText) _moreText = '查看详情'
-    console.log('moreText===')
-    const rootClassName = ['at-noticebar']
     if (moreUrl) rootClassName.push('at-noticebar--more')
     if (single) rootClassName.push('at-noticebar--single')
 
@@ -50,9 +49,9 @@ export default class AtNoticebar extends Taro.Component {
       <View className={rootClassName}>
         {close && <View className='at-noticebar__close' onClick={this.onClose.bind(this)}><AtIcon value='close' size='16' color='#ccc'></AtIcon></View>}
         <View className='at-noticebar__content'>
-          {icon && <AtIcon value={icon} size='16'></AtIcon>}{this.props.children}
+          {icon && <View className='at-noticebar__content-icon'><AtIcon value={icon} size='16'></AtIcon></View>}{this.props.children}
         </View>
-        {moreUrl && <View className='at-noticebar__more' onClick={this.onGotoMore.bind(this)}>{_moreText}<View className='at-noticebar__more-icon'><AtIcon value='chevron-right' size='16'></AtIcon></View></View>}
+        {moreUrl && <View className='at-noticebar__more' onClick={this.onGotoMore.bind(this)}><Text className='text'>{_moreText}</Text><View className='at-noticebar__more-icon'><AtIcon value='chevron-right' size='16'></AtIcon></View></View>}
       </View>
     )
   }

diff --git a/src/components/noticebar/index.scss b/src/components/noticebar/index.scss
@@ -1,23 +1,36 @@
 @import "../../style/theme/default.scss";
 @import "../../style/mixins/index.scss";
 
+$noticebar-color-bg: #FCF6ED;
+$noticebar-color-font: #DE8C17;
+$noticebar-icon-size: 26px;
+
 .at-noticebar {
-  background: #FCF6ED;
-  padding: 14px;
-  font-size: 24px;
-  color: #DE8C17;
   position: relative;
+  padding: $spacing-v-sm $spacing-h-lg;
+  color: $noticebar-color-font;
+  font-size: $font-size-sm;
+  background: $noticebar-color-bg;
+
+  &__content {
+    line-height: $line-height-zh;
+
+    &-icon {
+      display: inline-block;
+      margin-right: 12px;
+    }
+  }
 
   &__close {
-    width: 26px;
-    height: 26px;
+    width: $noticebar-icon-size;
+    height: $noticebar-icon-size;
     position: absolute;
-    left: 22px;
+    left: $spacing-h-lg;
     top: 50%;
-    transform: translateY(-85%);
+    margin-top: -($noticebar-icon-size / 2 + 4);
 
     + .at-noticebar__content {
-      margin-left: 68px;
+      margin-left: 50px;
     }
   }
 
@@ -34,17 +47,23 @@
   }
 
   &__more {
-    color: $color-grey-2;
     position: absolute;
-    right: 18px;
-    top: 15px;
+    right: $spacing-h-lg;
+    top: $spacing-v-sm;
+    color: $color-grey-2;
+    font-size: 0;
+
+    .text {
+      font-size: $font-size-sm;
+      line-height: $line-height-zh;
+      vertical-align: middle;
+    }
 
     &-icon {
-      width: 26px;
-      overflow: hidden;
       display: inline-block;
-      vertical-align: -8px;
-      margin-left: -3px;
+      width: $noticebar-icon-size;
+      vertical-align: middle;
+      overflow: hidden;
     }
   }
 }
diff --git a/src/components/radio/index.scss b/src/components/radio/index.scss
@@ -15,7 +15,7 @@
     display: flex;
     padding: $spacing-v-md;
     padding-left: 0;
-    margin-left: $spacing-h-lg;
+    margin-left: $spacing-h-xl;
     align-items: center;
     @include active;
 

diff --git a/src/components/tag/index.scss b/src/components/tag/index.scss
@@ -3,7 +3,7 @@
 .at-tag {
   height: 60px;
   line-height: 56px;
-  padding: 0 $spacing-h-lg;
+  padding: 0 $spacing-h-xl;
   text-align: center;
   border-radius: $border-radius-md;
   font-size: $font-size-base;

diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
@@ -91,6 +91,9 @@
     }
 
     &__arrow {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 62px;
       height: 62px;
       color: #fff;

diff --git a/src/pages/navigation/tabs/index.scss b/src/pages/navigation/tabs/index.scss
@@ -1,6 +1,6 @@
 .tab-content {
-  font-size: 30px;
   padding: 100px 50px;
+  font-size: 30px;
   text-align: center;
-  background-color: #f8f8f8;
+  background-color: #FAFBFC;
 }
diff --git a/src/pages/panel/index.scss b/src/pages/panel/index.scss
@@ -1,4 +1,5 @@
 @import '../../components/icon/index.scss';
+@import '../../style/theme/default.scss';
 
 /**
  * 分类页样式
@@ -40,3 +41,20 @@
   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 $color-border-lightest;
+
+    .name {
+      color: #1d1d26;
+      font-size: 28px;
+    }
+  }
+}
diff --git a/src/pages/view/noticebar/index.js b/src/pages/view/noticebar/index.js
@@ -27,31 +27,75 @@ export default class NoticebarPage extends Taro.Component {
 
         {/* S Body */}
         <View className='doc-body'>
-          {/* 基础通告栏 */}
+          {/* 文字 */}
           <View className='panel'>
-            <View className='panel__title'>基础通告栏</View>
+            <View className='panel__title'>文字</View>
             <View className='panel__content'>
               <View className='bar-item'>
-                <AtNoticebar>这是 NoticeBar 通告栏。单行</AtNoticebar>
+                <AtNoticebar single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
               </View>
               <View className='bar-item'>
-                <AtNoticebar icon='icon-notice'>这是 NoticeBar 通告栏。单行、带 icon</AtNoticebar>
+                <AtNoticebar>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
               </View>
             </View>
           </View>
 
-          {/* 基础通告栏（带关闭按钮） */}
+          {/* 图标 */}
           <View className='panel'>
-            <View className='panel__title'>基础通告栏（带关闭按钮）</View>
+            <View className='panel__title'>图标</View>
             <View className='panel__content'>
               <View className='bar-item'>
-                <AtNoticebar close single moreUrl='https://taro.aotu.io/'>这是 NoticeBar 通告栏。带关闭按钮、查看更多链接、单行</AtNoticebar>
+                <AtNoticebar icon='volume-plus' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
               </View>
               <View className='bar-item'>
-                <AtNoticebar close single>这是 NoticeBar 通告栏。带关闭按钮、单行</AtNoticebar>
+                <AtNoticebar icon='volume-plus'>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+            </View>
+          </View>
+
+          {/* 查看更多 */}
+          <View className='panel'>
+            <View className='panel__title'>查看更多</View>
+            <View className='panel__content'>
+              <View className='bar-item'>
+                <AtNoticebar moreUrl='https://taro.aotu.io/' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar icon='volume-plus' moreUrl='https://taro.aotu.io/' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar moreUrl='https://taro.aotu.io/'>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar icon='volume-plus' moreUrl='https://taro.aotu.io/'>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+            </View>
+          </View>
+
+          {/* 关闭按钮 */}
+          <View className='panel'>
+            <View className='panel__title'>关闭按钮</View>
+            <View className='panel__content'>
+              <View className='bar-item'>
+                <AtNoticebar close single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar close icon='volume-plus' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar close moreUrl='https://taro.aotu.io/' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar close icon='volume-plus' moreUrl='https://taro.aotu.io/' single>[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar close>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
+              </View>
+              <View className='bar-item'>
+                <AtNoticebar close moreUrl='https://taro.aotu.io/'>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
               </View>
               <View className='bar-item'>
-                <AtNoticebar close>这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。这是 NoticeBar 通告栏。带关闭按钮、多行</AtNoticebar>
+                <AtNoticebar close icon='volume-plus' moreUrl='https://taro.aotu.io/'>[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏</AtNoticebar>
               </View>
             </View>
           </View>

diff --git a/src/style/theme/default.scss b/src/style/theme/default.scss
@@ -91,7 +91,8 @@ $line-height-zh: 1.5; // 中文多行
 /* 水平间距 */
 $spacing-h-sm: 5px * $hd;
 $spacing-h-md: 8px * $hd;
-$spacing-h-lg: 16px * $hd;
+$spacing-h-lg: 12px * $hd;
+$spacing-h-xl: 16px * $hd;
 
 /* 垂直间距 */
 $spacing-v-xs: 3px * $hd;