积分明细

src/project/qujing/AppMine/integralInfo.vue

@@ -1,6 +1,33 @@
 <template>
   <div class="page">
-    
+    <div class="header-bg">
+      <u-navbar title="积分明细" title-color="#FFF" title-width="300" title-size="26" :background="backgroundNavbar" back-icon-color="#fff"></u-navbar>
+      <div class="header-info">
+        <p>我的积分</p>
+        <h1>142</h1>
+      </div>
+    </div>
+    <div class="list">
+      <div class="title">积分明细</div>
+      <div class="item">
+        <div class="flex">
+          <div class="left">
+            <p>发布新闻</p>
+            <div>2021-03-18 13:45:36</div>
+          </div>
+          <div class="right status0">＋20</div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="flex">
+          <div class="left">
+            <p>积分阅读</p>
+            <div>2021-03-18 13:45:36</div>
+          </div>
+          <div class="right status1">-20</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -8,23 +35,20 @@ import {mapState} from 'vuex'
 
 export default {
   name: "integralInfo",
+  customNavigation: true,
   appName: "积分明细",
   data() {
     return {
-      
+      backgroundNavbar: {
+        background: 'url(https://cdn.cunwuyun.cn/tengxun/miniapp/nav.png) no-repeat',
+        backgroundSize: '100% 100%',
+      },
     }
   },
   computed: {
     ...mapState(['user', 'token']),
   },
   onLoad() {
-    uni.setNavigationBarTitle({ 
-      title: '积分明细'
-    })
-    uni.setNavigationBarColor({
-      frontColor: "#000000",
-      backgroundColor: "#F4F6FA",
-    })
   },
   methods: {
     
@@ -33,9 +57,83 @@ export default {
 </script>
 <style scoped lang="scss">
 @import "~dvcp-wui/common";
-
 .page {
   width: 100%;
   background-color: #F4F5FA;
+  .header-bg {
+    width: 100%;
+    height: 304px;
+    .header-info {
+      width: 100%;
+      height: 100%;
+      background: url("https://cdn.cunwuyun.cn/img/qrcode-sign-fail.png") no-repeat no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding: 32px 0 0 32px;
+      p {
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 34px;
+        color: #FFF;
+        margin-bottom: 8px;
+      }
+      h1 {
+        font-family: AlibabaPuHuiTiB;
+        font-size: 96px;
+        color: #FFF;
+        line-height: 112px;
+      }
+    }
+  }
+  .list {
+    width: calc(100% - 32px);
+    margin: -56px 0 0 32px;
+    background: #FFF;
+    border-radius: 16px;
+    padding: 0 32px 66px;
+    box-sizing: border-box;
+    .title {
+      line-height: 108px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #333;
+    }
+    .item {
+      border-bottom: 1px solid #eee;
+      padding: 32px 0;
+      .flex {
+        display: flex;
+        .left {
+          width: calc(100% - 120px);
+          p {
+            font-family: PingFangSC-Regular;
+            font-size: 32px;
+            color: #333;
+            margin-bottom: 8px;
+            line-height: 44px;
+          }
+          div {
+            font-family: PingFangSC-Regular;
+            font-size: 24px;
+            color: #999;
+          }
+        }
+        .right {
+          width: 120px;
+          text-align: right;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 36px;
+        }
+        .status0 {
+          color: #2C51CE;
+        }
+        .status1 {
+          color: #E6736E;
+        }
+      }
+    }
+  }
 }
 </style>