update: 会员详情UI

src/components/allCustomers/customerDetail.less

@@ -263,6 +263,7 @@
           }
         }
         &.is-clique {
+          width: 387px;
           padding: 17px 13px 17px 18px;
           border-radius: 8px;
           border: 1px solid #E4E7ED;
@@ -291,6 +292,7 @@
           justify-content: space-between;
           align-items: center;
           margin-bottom: 8px;
+          height: 48px;
           cursor: pointer;
           .score-icon {
             color: #FFCB48;
@@ -319,7 +321,7 @@
                   vertical-align: middle;
                 }
                 .score-detail-value {
-                  font-size: 20px;
+                  font-size: 16px;
                   font-weight: bold;
                   color: #303133;
                   line-height: 19px;
@@ -999,4 +1001,9 @@
     line-height: 1;
     color: #909399;
   }
+}
+.text-over{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: wrap;
 }
\ No newline at end of file

src/components/allCustomers/customerDetail.vue

@@ -373,50 +373,50 @@
               <!-- 积分相关 -->
               <div :class="['scores', { 'is-clique': showClique }]">
                 <div class="scores-box" v-if="showClique" @click="goLinkWithClique('/enterpriseIntegralDataPage')">
-                  <div class="scores-info">
-                    <icon-label-value label="集团积分" :value="memberInfo.totalPointEnterprise || 0">
+                  <div class="scores-info" style="width: 368px;">
+                    <icon-label-value label="集团积分" :value="memberInfo.totalPointEnterprise || 0" style="width: 51%;">
                     <div class="score-icon" slot="icon">
                       <i class="iconfont icon-jifenjiabei"></i>
                     </div>
                   </icon-label-value>
-                   <div class="score-detail">
-                     <p class="score-detail-item">
-                       <span class="score-detail-label">可用积分</span>
-                       <span class="score-detail-value">{{ memberInfo.cliqueMemberIntegral ? memberInfo.cliqueMemberIntegral : 0 }}</span>
+                   <div class="score-detail" style="margin-left: 0;width: 49%;">
+                     <p class="score-detail-item flex">
+                       <span class="score-detail-label width-84">可用积分</span>
+                       <span class="score-detail-value text-over">{{ memberInfo.cliqueMemberIntegral ? memberInfo.cliqueMemberIntegral : 0 }}</span>
                      </p>
-                     <p class="score-detail-item">
-                       <span class="score-detail-label">
+                     <p class="score-detail-item flex">
+                       <span class="score-detail-label width-84">
                          不可用积分
                         <el-tooltip  content="不可用原因：积分为冻结/预扣状态，详情可查看客户日志" placement="top">
                           <i class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px;color: #606266"/>
                         </el-tooltip>
                         </span>
-                       <span class="score-detail-value">{{ memberInfo.cliqueMemberInvalidIntegral ? memberInfo.cliqueMemberInvalidIntegral : 0 }}</span>
+                       <span class="score-detail-value text-over">{{ memberInfo.cliqueMemberInvalidIntegral ? memberInfo.cliqueMemberInvalidIntegral : 0 }}</span>
                      </p>
                     </div>
                   </div>
                   <i class="el-icon-arrow-right" style="font-size: 16px;color: #909399"></i>
                 </div>
-                <div class="scores-box" @click="goLink('/integralDataPage')">
-                  <div class="scores-info">
-                    <icon-label-value label="积分" :value="memberInfo.totalPoint || 0">
+                <div class="scores-box" @click="goLink('/integralDataPage')" >
+                  <div class="scores-info"  style="width: 368px;">
+                    <icon-label-value label="积分" :value="memberInfo.totalPoint || 0" style="width: 51%;">
                       <div class="score-icon" slot="icon">
                         <i class="iconfont icon-jifenduihuan"></i>
                       </div>
                     </icon-label-value>
-                   <div class="score-detail">
-                     <p class="score-detail-item">
-                       <span class="score-detail-label">可用积分</span>
-                       <span class="score-detail-value">{{ memberInfo.accumulatPoints ? memberInfo.accumulatPoints : 0 }}</span>
+                   <div class="score-detail" style="margin-left: 0;width: 49%;">
+                     <p class="score-detail-item flex">
+                       <span class="score-detail-label width-84">可用积分</span>
+                       <span class="score-detail-value text-over">{{ memberInfo.accumulatPoints ? memberInfo.accumulatPoints : 0 }}</span>
                      </p>
-                     <p class="score-detail-item">
-                       <span class="score-detail-label">
+                     <p class="score-detail-item flex">
+                       <span class="score-detail-label width-84">
                          不可用积分
                         <el-tooltip  content="不可用原因：积分为冻结/预扣状态，详情可查看客户日志" placement="top">
                           <i class="iconfont icon-QuestionCircleOutlined" style="font-size: 14px;color: #606266"/>
                         </el-tooltip>
                         </span>
-                       <span class="score-detail-value">{{ memberInfo.invalidIntegral ? memberInfo.invalidIntegral : 0 }}</span>
+                       <span class="score-detail-value text-over">{{ memberInfo.invalidIntegral ? memberInfo.invalidIntegral : 0 }}</span>
                      </p>
                     </div>
                   </div>
@@ -902,4 +902,16 @@ export default { ...action };
 .subTitle .line {
 margin-right: 8px !important;
 }
+.text-over{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: wrap;
+}
+.width-84{
+  min-width: 100px;
+  max-width: 100px
+}
+.flex{
+  display: flex;
+}
 </style>