文明问答

src/project/fd/AppAnswer/IntegralDetail.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="integralDetail">
+    <div class="item" v-for="(item, index) in 10" :key="index">
+      <div class="left">
+        <h2>提问</h2>
+        <p>2022-07-21 10:10:02</p>
+      </div>
+      <span>+10</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '积分明细',
+  }
+</script>
+
+<style lang="scss" scoped>
+  .integralDetail {
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid #eee;
+      background: #fff;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      h2 {
+        line-height: 1;
+        margin-bottom: 12px;
+        font-size: 34px;
+        font-weight: 500;
+        font-size: #333;
+      }
+
+      p {
+        font-size: 28px;
+        color: #999;
+      }
+
+      span {
+        font-size: 36px;
+        color: red;
+      }
+    }
+  }
+</style>

src/project/fd/AppAnswer/component/List.vue

@@ -46,7 +46,6 @@
 
     methods: {
       linkTo (url) {
-        console.log(url)
         uni.navigateTo({
           url
         })

src/project/fd/AppAnswer/component/Ranking.vue

@@ -1,13 +1,127 @@
 <template>
-
+  <div class="ranking">
+    <div class="list-wrapper">
+      <div class="item my" @click="linkTo">
+        <span>113</span>
+        <div class="userinfo">
+          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
+          <h3>且听风吟</h3>
+        </div>
+        <i>20</i>
+        <image class="right" src="../img/right.png" />
+      </div>
+      <div class="item" v-for="(item, index) in 21" :key="index">
+        <span>{{ index + 1 }}</span>
+        <div class="userinfo">
+          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
+          <h3>且听风吟</h3>
+        </div>
+        <i>20</i>
+      </div>
+      <!-- <AiEmpty v-if="!list.length"></AiEmpty> -->
+    </div>
+  </div>
 </template>
 
 <script>
-export default {
+  export default {
+    data () {
+      return {
 
-}
+      }
+    },
+
+    mounted: {
+
+    },
+
+    methods: {
+      linkTo () {
+        uni.navigateTo({
+          url: './IntegralDetail'
+        })
+      }
+    }
+  }
 </script>
 
-<style>
+<style scoped lang="scss">
+  .ranking {
+    padding-bottom: 20px;
 
+    .list-wrapper {
+      margin: 0 32px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 80px;
+        margin-bottom: 16px;
+        padding: 0 32px;
+        background: #FFFFFF;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+        border-radius: 16px;
+
+        span {
+          width: 130px;
+          font-size: 34px;
+          color: #DDDDDD;
+          font-style: oblique;
+          font-weight: 600;
+        }
+
+        &:nth-of-type(1) span {
+          color: #2D7DFF;
+        }
+
+        &:nth-of-type(2) span {
+          color: #3BBC37;
+        }
+
+        &:nth-of-type(3) span {
+          color: #FF883C;
+        }
+
+        image {
+          width: 48px;
+          height: 48px;
+        }
+
+        .userinfo {
+          display: flex;
+          align-items: center;
+          flex: 1;
+
+          h3 {
+            margin-left: 16px;
+            font-size: 28px;
+            color: #333333;
+          }
+        }
+
+        i {
+          width: 100px;
+          font-size: 32px;
+          color: #FFB94C;
+          font-style: normal;
+          font-weight: 600;
+          text-align: center;
+        }
+      }
+    }
+
+    .my {
+      padding-right: 16px!important;
+
+      i {
+        width: auto!important;
+      }
+
+      .right {
+        width: 64px;
+        height: 64px;
+      }
+    }
+  }
 </style>