Commit 0f8a6854 authored by leiqingsong's avatar leiqingsong

月度奖励

parent dbc0bbca
...@@ -20,10 +20,6 @@ export default { ...@@ -20,10 +20,6 @@ export default {
$route(val) { $route(val) {
this.currentTitle = val.meta.title; this.currentTitle = val.meta.title;
} }
},
created() {
console.log("route", this.$route);
// this.currentTitle = this.$router.currentRoute.meta.title;
} }
}; };
</script> </script>
......
...@@ -7,8 +7,11 @@ import { ...@@ -7,8 +7,11 @@ import {
Field, Field,
Icon, Icon,
NavBar, NavBar,
NoticeBar,
Picker, Picker,
Popup, Popup,
Swipe,
SwipeItem,
Tab, Tab,
Tabs, Tabs,
Toast, Toast,
...@@ -22,8 +25,11 @@ Vue.use(Button) ...@@ -22,8 +25,11 @@ Vue.use(Button)
.use(Field) .use(Field)
.use(Icon) .use(Icon)
.use(NavBar) .use(NavBar)
.use(NoticeBar)
.use(Popup) .use(Popup)
.use(Picker) .use(Picker)
.use(Swipe)
.use(SwipeItem)
.use(Tab) .use(Tab)
.use(Tabs) .use(Tabs)
.use(Uploader) .use(Uploader)
......
<template> <template>
<div class="rank-item"> <div class="rank-item">
<span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]"> <span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]">
{{ RankIndex >9 ? RankIndex : '0' + RankIndex }} {{ RankIndex > 9 ? RankIndex : "0" + RankIndex }}
</span> </span>
<div style="flex:1"> <div style="flex:1">
<img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" /> <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
type: Number type: Number
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
<template> <template>
<div class="fastest-progress"> <div class="fastest-progress">
<div class="bg"> <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="title">本月进步最大奖励池</span>
<span class="award">¥6000.00</span> <span class="award">¥6000.00</span>
</div> </div>
...@@ -16,7 +16,11 @@ ...@@ -16,7 +16,11 @@
<div class="rank-flex rank-content"> <div class="rank-flex rank-content">
<base-refresh-scroll> <base-refresh-scroll>
<div slot="content"> <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> </div>
</base-refresh-scroll> </base-refresh-scroll>
</div> </div>
...@@ -48,8 +52,14 @@ export default { ...@@ -48,8 +52,14 @@ export default {
background-image: url("../../assets/images/进步奖背景图.png"); background-image: url("../../assets/images/进步奖背景图.png");
background-size: cover; background-size: cover;
.van-icon { .van-icon {
margin-top: 10px; position: absolute;
margin-left: 15px; top: 0;
bottom: 0;
width: 52px;
height: 46px;
line-height: 46px;
text-align: center;
font-size: 16px;
color: #ffffff; color: #ffffff;
} }
.title { .title {
......
<template> <template>
<div class="month-award"> <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> </div>
</template> </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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment