'个人中心'

src/pages/myInfo/my-info.vue

@@ -30,15 +30,18 @@
     <h-content class="my-content">
       <div class="userInfo">我的合同</div>
       <div class="my-contract">
-        <div @click="goSign">
+        <div class="content-wrap" @click="goSign">
+          <span :class="{'content-wrap-class-width':signCount>99, 'content-wrap-class':signCount<99}">{{ signCount > 99 ? '99+' : signCount }}</span>
           <img src="@/assets/myInfo/unSign.png" >
           <p>待签约</p>
         </div>
-        <div @click="goConfirm">
+        <div class="content-wrap" @click="goConfirm">
+          <span :class="{'content-wrap-class-width':confirmCount>99, 'content-wrap-class':confirmCount<99}">{{ confirmCount > 99 ? '99+' : confirmCount }}</span>
           <img src="@/assets/myInfo/unConfirm.png" >
           <p>待确认</p>
         </div>
-        <div>
+        <div class="content-wrap">
+          <span :class="{'content-wrap-class-width':vedioCount>99, 'content-wrap-class':vedioCount<99}">{{ vedioCount > 99 ? '99+' : vedioCount }}</span>
           <img src="@/assets/myInfo/unFace.png" >
           <p>待面签</p>
         </div>
@@ -48,7 +51,7 @@
         </div>
       </div>
       <list-item :item-height="44" class="list">
-        <item @click.native="goReimburse" :show-arrow="true">
+        <item :show-arrow="true" @click.native="goReimburse">
           <img slot="left-icon" src="@/assets/myInfo/myRefund.png" class="left-icon" >
           <div slot="name">我的还款</div>
         </item>
@@ -56,12 +59,12 @@
           <img slot="left-icon" src="@/assets/myInfo/repay.png" class="left-icon" >
           <div slot="name">业务退款</div>
         </item>
-        <item @click.native="goMyProduct" :show-arrow="true">
+        <item :show-arrow="true" @click.native="goMyProduct">
           <img slot="left-icon" src="@/assets/myInfo/collect.png" class="left-icon" >
           <div slot="name">我的收藏</div>
-          <div slot="right-icon" class="right-icon">15</div>
+          <div slot="right-icon" :class="{'right-icon-width':productCount>99, 'right-icon':productCount<99}">{{ productCount > 99 ? '99+' : productCount }}</div>
         </item>
-        <item @click.native="changeHelp" :show-arrow="true">
+        <item :show-arrow="true" @click.native="changeHelp">
           <img slot="left-icon" src="@/assets/myInfo/help.png" class="left-icon" >
           <div slot="name">帮助与反馈</div>
         </item>
@@ -95,6 +98,10 @@ export default {
       user_phone: '',
       user_bp_name: '',
       user_bp_type: '',
+      signCount: 10,
+      confirmCount: 100,
+      vedioCount: 0,
+      productCount: 11,
     }
   },
   watch: {
@@ -434,6 +441,35 @@ export default {
       justify-content: space-between;
       align-items: center;
       text-align: center;
+      .content-wrap{
+        position: relative;
+        .content-wrap-class{
+          position: absolute;
+          top: -10px;
+          left: 25px;
+          font-size: 10px;
+          width: 20px;
+          height: 20px;
+          text-align: center;
+          line-height: 20px;
+          background-color: red;
+          color: #fff;
+          border-radius: 50%;
+        }
+        .content-wrap-class-width{
+          position: absolute;
+          top: -10px;
+          left: 25px;
+          font-size: 10px;
+          width: 30px;
+          height: 20px;
+          text-align: center;
+          line-height: 20px;
+          background-color: red;
+          color: #fff;
+          border-radius: 50%;
+        }
+      }
       img {
         width: 38px;
         height: 38px;
@@ -469,17 +505,22 @@ export default {
 .content {
   background-color: #fff;
 }
+  .right-icon{
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    background-color: red;
+    color: #fff;
+    border-radius: 50%;
+  }
+  .right-icon-width{
+    width: 30px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    background-color: red;
+    color: #fff;
+    border-radius: 50%;
+  }
 </style>
-  <!-- <list-item :item-height="45">
-        <item :show-arrow="true" @click.native="changePageHead">
-          <div slot="name">头像</div>
-        </item>
-        <item :show-arrow="true" @click.native="updateVersion">
-          <div slot="name">检查更新</div>
-        </item>
-        <item :show-arrow="true" @click.native="logOut">
-          <div slot="name">退出登录</div>
-        </item>
-      </list-item>
-      <button v-if="flag" @click="changePageHead">用户绑定</button>
-      <button v-if="!flag" @click="unBind">解除绑定</button> -->