整合样式

src/apps/AppCreditPoints/AppGridIntegral.vue

@@ -4,9 +4,18 @@
     <div class="header-content">
       <img src="https://cdn.cunwuyun.cn/dvcp/credit/head.png" alt="">
       <div class="headerDataPane" flex>
-        <div class="headerItem" v-for="i in 3" :key="i">
-          <b v-text="560"/>
+        <div class="headerItem top">
           <div v-text="`个人积分`"/>
+          <b v-text="info.historyIntegralTotal||0"/>
+        </div>
+        <div class="headerItem">
+          <div v-text="`剩余积分`"/>
+          <b v-text="info.nowIntegral||0"/>
+        </div>
+        <div class="divider"/>
+        <div class="headerItem">
+          <div v-text="`积分排名`"/>
+          <b v-text="info.integralRanking||'-'"/>
         </div>
       </div>
     </div>
@@ -48,14 +57,14 @@ export default {
   methods: {
     // 积分排行
     getInfo() {
-      let {current, info: {details}} = this
+      let {current, info: {detailList: details}} = this
       if (!details?.pages || current <= details.pages) {
         this.$http.post('/app/appintegraluser/appGirdIntegral', null, {
           params: {current, size: 10}
         }).then(res => {
           if (res?.data) {
             this.info = res.data
-            this.list = [this.list, res.data.details?.records || []].flat()
+            this.list = [this.list, res.data.detailList?.records || []].flat()
           }
         })
       }
@@ -77,13 +86,13 @@ export default {
 
   .bg-blue {
     width: 100%;
-    height: 176px;
+    height: 270px;
     background-color: #3975C6;
   }
 
   .header-content {
     width: 690px;
-    height: 256px;
+    height: 408px;
     margin: -130px 0 40px;
     padding: 32px;
     box-sizing: border-box;
@@ -93,11 +102,12 @@ export default {
 
     .headerDataPane {
       justify-content: space-around;
-      top: 106px;
+      top: 76px;
       left: 0;
       right: 0;
       position: absolute;
       z-index: 9;
+      flex-wrap: wrap;
 
       .headerItem {
         text-align: center;
@@ -109,28 +119,29 @@ export default {
 
         b {
           display: block;
-          color: #4185F5;
-          line-height: 60px;
-          font-size: 52px;
+          line-height: 50px;
+          color: #000;
+          font-size: 36px;
           font-family: DINAlternate-Bold, DINAlternate;
           margin-bottom: 10px;
         }
 
-        &:nth-of-type(1) > b {
-          color: #5AAD6A;
-        }
+        &.top {
+          width: 100%;
 
-        &:nth-of-type(3) > b {
-          color: #CD413A;
+          b {
+            font-size: 104px;
+            line-height: 122px;
+          }
         }
       }
     }
 
-    img {
+    & > img {
       position: absolute;
       width: 342px;
       height: 220px;
-      top: -40px;
+      top: -60px;
       right: 10px;
       z-index: 2;
     }
@@ -207,5 +218,11 @@ export default {
   .color-0 {
     color: #E6736E !important;
   }
+
+  .divider {
+    width: 2px;
+    height: 60px;
+    background: #ededed;
+  }
 }
 </style>