黔西南积分

src/project/qianxinan/AppGirdIntegral/AppGirdIntegral.vue

@@ -1,12 +1,38 @@
 <template>
   <div class="AppGirdIntegral">
     <AiTopFixed>
-
+      <div class="header">
+        <div class="header-bg"></div>
+        <img src="./img/header-top.png" alt="" class="header-top-img" />
+        <div class="header-content">
+          <p class="text">个人积分</p>
+          <h2>297</h2>
+          <div class="flex">
+            <div class="flex-item">
+              <p class="text">个人积分</p>
+              <div>97</div>
+            </div>
+            <div class="flex-item">
+              <p class="text">积分排名</p>
+              <div>97</div>
+            </div>
+            <span class="border-line"></span>
+          </div>
+        </div>
+      </div>
     </AiTopFixed>
-    <div class="list-data" v-if="list.length">
+    <div class="list-data">
-      
+      <div class="title">积分明细</div>
+      <div class="item">
+        <div class="flex-left">
+          <p>完善居民信息</p>
+          <div>2022-08-18 13:45:36</div>
+        </div>
+        <div class="flex-right status0">＋20</div>
+      </div>
+      <!-- <AiEmpty v-if="!list.length"></AiEmpty> -->
     </div>
-    <AiEmpty v-else></AiEmpty>
+    
   </div>
 </template>
 
@@ -76,11 +102,122 @@
     ::v-deep .content {
       padding: 0;
     }
+    .header {
+      position: relative;
+      .header-bg {
+        height: 272px;
+        background-color: #3975C6;
+      }
+      img {
+        width: 342px;
+        height: 218px;
+        position: absolute;
+        top: 18px;
+        right: 40px;
+        z-index: 99;
+      }
+      .header-content {
+        width: 686px;
+        background: #FFF;
+        border-radius: 16px;
+        position: absolute;
+        top: 72px;
+        left: 32px;
+        text-align: center;
+        padding-top: 76px;
+        .text {
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #999;
+          line-height: 40px;
+        }
+        h2 {
+          font-family: DINAlternate-Bold;
+          font-weight: 700;
+          font-size: 104px;
+          color: #000;
+          margin-bottom: 30px;
+        }
+        .flex {
+          display: flex;
+          padding-bottom: 50px;
+          position: relative;
+          .flex-item {
+            flex: 1;
+            text-align: center;
+            div {
+              font-family: PingFangSC-Medium;
+              font-weight: 500;
+              font-size: 36px;
+              color: #000;
+              margin-top: 4px;
+              line-height: 50px;
+            }
+          }
+          .border-line {
+            position: absolute;
+            left: 50%;
+            top: 14px;
+            height: 60px;
+            border-right: 1px solid #EDEDED;
+          }
+        }
+      }
+    }
 
     .list-data {
       box-sizing: border-box;
-      padding: 32px 32px 0 32px;
+      margin: 256px 32px 0 32px;
-
+      background-color: #fff;
+      border-radius: 16px;
+      padding: 0 24px 52px;
+      .title {
+        line-height: 108px;
+        padding-left: 8px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 34px;
+        color: #333;
+      }
+      .item {
+        display: flex;
+        border-bottom: 1px solid #D8DDE6;
+        padding: 32px 0;
+        .flex-left {
+          width: calc(100% - 160px);
+          p {
+            font-family: PingFangSC-Regular;
+            font-size: 32px;
+            color: #333;
+            line-height: 44px;
+            word-break: break-all;
+            margin-bottom: 8px;
+          }
+          div {
+            line-height: 34px;
+            font-family: PingFangSC-Regular;
+            font-size: 24px;
+            color: #999;
+            letter-spacing: -0.29px;
+          }
+        }
+        .flex-right {
+          margin-top: 18px;
+          line-height: 50px;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 36px;
+          color: #2C51CE;
+          width: 160px;
+          text-align: right;
+        }
+        .status0 {
+          color: #2C51CE;
+        }
+        .statsu1 {
+          color: #E6736E;
+        }
+      }
     }
   }
 </style>

src/project/qianxinan/AppPointsDetails/AppPointsDetails.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="AppPointsDetails">
-
-
-  </div>
-</template>
-
-<script>
-  import { mapState } from 'vuex'
-  export default {
-    appName: '积分排行',
-    data() {
-      return {
-        current: 1,
-        list: [],
-      }
-    },
-
-    computed: {
-      ...mapState(['user']),
-    },
-
-    created() {
-    //   this.$dict.load("workTaskType").then(() => {
-    //     this.getList()
-    //   })
-    //   uni.$on('getList', () => {
-    //     this.current = 1
-    //     this.getList()
-    //   })
-    },
-
-    onShow() {
-      document.title = '积分排行'
-    },
-
-    methods: {
-      
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  .AppPointsDetails {
-    min-height: 100%;
-    background-color: #F5F5F5;
-    padding-bottom: 32px;
-  }
-</style>

src/project/qianxinan/AppPointsRanking/AppPointsRanking.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="AppPointsRanking">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="88" bg-color="#fff" font-size="28"
+        inactive-color="#666" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#3399FF" @change="change">
+      </u-tabs>
+    </AiTopFixed>
+    <div class="list-data">
+      <div class="item">
+        <div class="flex-left">
+          <div class="item-rank">
+            <img src="./img/top1.png" alt="">
+            <!-- <span>4</span> -->
+          </div>
+          <div class="item-user">
+            <img src="./img/top1.png" alt="">李毅
+          </div>
+        </div>
+        <div class="flex-right">50</div>
+      </div>
+      <div class="item">
+        <div class="flex-left">
+          <div class="item-rank">
+            <span>4</span>
+          </div>
+          <div class="item-user">
+            <img src="./img/top1.png" alt="">李毅
+          </div>
+        </div>
+        <div class="flex-right">50</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    appName: '积分排行',
+    data() {
+      return {
+        current: 1,
+        list: [],
+        currentTabs: 0,
+        tabList: [
+          {
+            name: '待管理',
+          },
+          {
+            name: '管理中',
+          },
+          {
+            name: '已解除',
+          },
+        ],
+        barStyle: {
+          'width': '24px',
+          'height': '3px',
+          'border-radius': '2px',
+          'bottom': '0px',
+          'background-color': '#3399FF'
+        },
+        activeStyle: {
+          'font-weight' : '400',
+          'color': '#000000'
+        },
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+    },
+
+    created() {
+    //   this.$dict.load("workTaskType").then(() => {
+    //     this.getList()
+    //   })
+    //   uni.$on('getList', () => {
+    //     this.current = 1
+    //     this.getList()
+    //   })
+    },
+
+    onShow() {
+      document.title = '积分排行'
+    },
+
+    methods: {
+      change(index) {
+        this.currentTabs = index
+        // this.getListInit()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppPointsRanking {
+    min-height: 100%;
+    background-color: #F5F5F5;
+    padding-bottom: 32px;
+    ::v-deep .content {
+      padding: 0;
+      min-height: 0;
+    }
+    ::v-deep .fixed {
+      min-height: 0;
+    }
+    .list-data {
+      padding: 32px;
+      .item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 24px 48px 24px 32px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 32px;
+        margin-bottom: 16px;
+        .flex-left {
+          display: flex;
+          .item-rank {
+            width: 152px;
+            img {
+              padding-top: 12px;
+              width: 56px;
+              height: 56px;
+              vertical-align: middle;
+            }
+            span {
+              line-height: 80px;
+              font-family: SFPro-SNaNpxiboldItalic;
+              font-weight: SemiboldItalic;
+              font-size: 40px;
+              color: #DDD;
+            }
+          }
+          .item-user {
+            line-height: 80px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            font-size: 32px;
+            color: #333;
+            img {
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
+              margin-right: 16px;
+              vertical-align: middle;
+            }
+          }
+        }
+        .flex-right {
+          font-family: SFPro-SNaNpxibold;
+          font-weight: 600;
+          font-size: 36px;
+          color: #FF9343;
+          line-height: 42px;
+          padding-top: 20px;
+        }
+      }
+    }
+  }
+</style>