uas手机版

功能item添加角标属性

uas-office-web/uas-mobile/src/components/common/func/FuncItem.jsx

@@ -24,7 +24,7 @@ export default class FuncItem extends Component {
   }
 
   render () {
-    const { funcObj, operation } = this.props
+    const { funcObj, operation, sup } = this.props
 
     return (
       funcObj &&
@@ -35,6 +35,10 @@ export default class FuncItem extends Component {
           <img className='func-func-icon'
                src={funcObj.imgUrl}/>
           <span className='func-func-text'>{funcObj.name}</span>
+          {
+            (sup || funcObj.sup) &&
+            <sup className='func-func-sup'>{sup || funcObj.sup}</sup>
+          }
         </div>
         {
           operation && <Icon

uas-office-web/uas-mobile/src/components/common/func/common-func.less

@@ -45,6 +45,31 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
+
+  .func-func-sup {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: absolute;
+    white-space: nowrap;
+    min-width: 20px;
+    max-width: 40px;
+    //top: -6px;
+    right: 0px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 12px;
+    padding: 0 5px;
+    text-align: center;
+    font-size: 12px;
+    color: #fff;
+    background-color: #ff5b05;
+    transform: translateX(-40%);
+    transform-origin: -10% center;
+    z-index: 10;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", SimSun, sans-serif;
+  }
 }
 
 .func-func-icon {

uas-office-web/uas-mobile/src/components/common/mainHeader/MainHeader.jsx

@@ -25,8 +25,8 @@ class MainHeader extends Component {
 
   render () {
     let homeHeaderIcon = [
-      { 'name': '我的日程' },
-      { 'name': '待审批' },
+      { 'name': '我的日程', sup: 10 },
+      { 'name': '待审批', sup: 99 },
       { 'name': '我的待办' },
       { 'name': '我的订阅' },
     ]