黔西南积分

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>