月度奖励

H5/src/App.vue

@@ -20,10 +20,6 @@ export default {
     $route(val) {
       this.currentTitle = val.meta.title;
     }
-  },
-  created() {
-    console.log("route", this.$route);
-    // this.currentTitle = this.$router.currentRoute.meta.title;
   }
 };
 </script>

H5/src/plugins/vant-ui.js

@@ -7,8 +7,11 @@ import {
   Field,
   Icon,
   NavBar,
+  NoticeBar,
   Picker,
   Popup,
+  Swipe,
+  SwipeItem,
   Tab,
   Tabs,
   Toast,
@@ -22,8 +25,11 @@ Vue.use(Button)
   .use(Field)
   .use(Icon)
   .use(NavBar)
+  .use(NoticeBar)
   .use(Popup)
   .use(Picker)
+  .use(Swipe)
+  .use(SwipeItem)
   .use(Tab)
   .use(Tabs)
   .use(Uploader)

H5/src/views/rewards/compoments/rankItem.vue

 <template>
   <div class="rank-item">
     <span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]">
-			{{ RankIndex >9 ? RankIndex : '0' + RankIndex }}
+      {{ RankIndex > 9 ? RankIndex : "0" + RankIndex }}
     </span>
     <div style="flex:1">
       <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
@@ -20,7 +20,7 @@ export default {
       type: Number
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

H5/src/views/rewards/fastest-progress.vue

 <template>
   <div class="fastest-progress">
     <div class="bg">
-      <van-icon name="arrow-left" size="20" @click="$router.go(-1)" />
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
       <span class="title">本月进步最大奖励池</span>
       <span class="award">￥6000.00</span>
     </div>
@@ -16,7 +16,11 @@
       <div class="rank-flex rank-content">
         <base-refresh-scroll>
           <div slot="content">
-            <rank-item v-for="(item, index) in 20" :key="index" :rank-index="index + 1"/>
+            <rank-item
+              v-for="(item, index) in 20"
+              :key="index"
+              :rank-index="index + 1"
+            />
           </div>
         </base-refresh-scroll>
       </div>
@@ -48,8 +52,14 @@ export default {
   background-image: url("../../assets/images/进步奖背景图.png");
   background-size: cover;
   .van-icon {
-    margin-top: 10px;
-    margin-left: 15px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 52px;
+    height: 46px;
+    line-height: 46px;
+    text-align: center;
+    font-size: 16px;
     color: #ffffff;
   }
   .title {

H5/src/views/rewards/month-award.vue

 <template>
   <div class="month-award">
+    <div class="nav">
+      <van-icon
+        name="arrow-left"
+        size="20"
+        class="nav-left"
+        @click="$router.go(-1)"
+      />
+      <span class="nav-title">月度奖励</span>
+    </div>
+    <div class="notice">
+      <van-notice-bar left-icon="volume-o" background="transparent">
+        <div slot="left-icon" style="margin-right: 10px">
+          <img class="notice-icon" src="@/assets/images/notice.png" alt />
+        </div>
+        <van-swipe
+          vertical
+          class="notice-swipe"
+          :autoplay="3000"
+          :show-indicators="false"
+        >
+          <van-swipe-item>
+            95.30元进入本月累计奖金池 1-13 14:52:01</van-swipe-item
+          >
+          <van-swipe-item>内容 2</van-swipe-item>
+          <van-swipe-item>内容 3</van-swipe-item>
+        </van-swipe>
+      </van-notice-bar>
+    </div>
+    <div class="content">
+      <p style="font-size: 16px; font-weight: bold">本月累计奖金</p>
+      <p style="font-weight: bold">193,49.00</p>
+      <p style="font-size: 14px">历史累计奖金：￥110000.00</p>
+    </div>
+    <div class="newAdd-my">
+      <div class="newAdd">
+        <p>￥9100.00</p>
+        <div class="bottom">
+          <img src="@/assets/images/本月新增.png" alt />
+          <span>本月新增</span>
+        </div>
+      </div>
+      <div class="my">
+        <p>￥999.00</p>
+        <div class="bottom">
+          <img src="@/assets/images/我的份额.png" alt />
+          <span>我的份额</span>
+        </div>
+      </div>
+    </div>
+    <div class="level-pool">
+      <p class="level-pool-title">各等级本月累计奖励池</p>
+      <p class="level-pool-item">
+        <span>黄金树等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>农场主等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>森林之星等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>森田合伙人等级</span>
+        <span> ￥1000.00</span>
+      </p>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.month-award {
+  width: 100%;
+  height: 447px;
+  background-image: url("../../assets/images/月度奖励背景图.png");
+  background-size: cover;
+}
+.nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 46px;
+  .nav-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 52px;
+    height: 100%;
+    line-height: 46px;
+    text-align: center;
+  }
+  .nav-title {
+    max-width: 60%;
+    margin: 0 auto;
+    color: #333333;
+    font-weight: bold;
+    font-size: 16px;
+  }
+}
+.notice {
+  box-sizing: border-box;
+  min-width: 345px;
+  height: 44px;
+  line-height: 44px;
+  margin: 28px auto 47px;
+  background-image: url("../../assets/images/公告.png");
+  background-size: cover;
+
+  .van-notice-bar {
+    height: 44px;
+    line-height: 0;
+  }
+
+  .notice-icon {
+    width: 16px;
+    height: 14px;
+  }
+  .notice-swipe {
+    height: 44px;
+    line-height: 44px;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 120px;
+  margin-bottom: 90px;
+  font-family: "PingFang-SC";
+  p {
+    margin: 0;
+  }
+}
+.newAdd-my {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  width: 345px;
+  margin: 0 auto 15px;
+  p {
+    margin: 0;
+  }
+  .newAdd,
+  .my {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 169px;
+    height: 98px;
+    padding: 13px 20px 15px 17px;
+    font-size: 14px;
+    background-color: #ffffff;
+    p {
+      font-weight: bold;
+    }
+    img {
+      width: 24px;
+      height: 21px;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.level-pool {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 345px;
+  height: 170px;
+  margin: 0 auto;
+  padding: 18px 15px 19px;
+  font-family: "PingFang-SC-Medium";
+  background-color: #ffffff;
+  p {
+    margin: 0;
+  }
+  &-title {
+    font-size: 16px;
+    color: #333333;
+  }
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    color: #666666;
+  }
+}
+</style>