Skip to content

html / poolin_app

Go to a project
Commit 91661234 by zhanghui
Options

Merge branch 'gaolei' into 'develop' 

收益页面



See merge request !4
parents 19fba810 61e353e5
Showing with 214 additions and 8 deletions
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>", "author": "xin3w <xin3w@126.com>",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.4.38", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.10.57",
"start": "npm run dev", "start": "npm run dev",
"build": "node build/build.js" "build": "node build/build.js"
}, },
......
src/components/Payments.vue
<template> <template>
<div class=""> <div class="page payments">
{{msg}} <div class="page-header" flex="main:justify cross:center">
<div class="title">收益</div>
</div>
<div class="page-content bottom">
<div class="pay-list pl30 pr30 pt20">
<div>
<h3>昨日收益<i class="iconfont icon-gantanhao"></i></h3>
<h1>{{yesterday.num}}<b class="ml15">{{yesterday.unit}}</b></h1>
</div>
<div class="mt55" flex="dir:left box:last">
<div class="d1">
<h3 class="mb5">今日已挖(预估)<i class="iconfont icon-gantanhao"></i></h3>
<p>{{today.num}}<b>{{today.unit}}</b></p>
</div>
<div class="d2">
<h3 class="mb5">已支付</h3>
<p>{{already.num}}<b>{{already.unit}}</b></p>
</div>
</div>
</div>
<div class="balance-list p30" flex="dir:left box:mean">
<div>
<i class="iconfont icon-keyongyue"></i>余额
</div>
<div class="f-tar">
{{balanceList.num}}<b>{{balanceList.unit}}</b>
</div>
</div>
<div class="ments-list p30" v-for='item in mentsList' flex="dir:left box:mean">
<div>
<span>{{item.time}}</span>
<s>{{item.module}}</s>
</div>
<div class="ments-list-right f-tar">
<span>{{item.num}}<b>{{item.unit}}</b></span>
<s>{{item.balance}}</s>
</div>
</div>
</div>
<!-- page-content end -->
<tabbar></tabbar>
</div> </div>
<!-- page end -->
</template> </template>
<script> <script>
import fn from '@/assets/js/function.js';
import { mapState } from 'vuex';
import tabbar from "@/components/Tabbar.vue";
export default { export default {
name: 'payments', name: 'payments',
components: {
tabbar
},
data() { data() {
return { return {
msg: '收益页面' yesterday: {
num: '1.21270311',
unit: 'lct'
},
today: {
num: '3.79003919',
unit: 'lct'
},
already: {
num: '3.79003919',
unit: 'lct'
},
balanceList: {
num: '3.79003919',
unit: 'lct'
},
mentsList: [{
time: '2017-10-27',
module: 'PPS模式',
num: '3.79003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-26',
module: 'PPS模式',
num: '1.43003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-25',
module: 'PPS模式',
num: '4.99003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-24',
module: 'PPS模式',
num: '2.79003919',
unit: 'lct',
balance: '存入余额'
},{
time: '2017-10-27',
module: 'PPS模式',
num: '3.79003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-26',
module: 'PPS模式',
num: '1.43003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-25',
module: 'PPS模式',
num: '4.99003919',
unit: 'lct',
balance: '存入余额'
}, {
time: '2017-10-24',
module: 'PPS模式',
num: '2.79003919',
unit: 'lct',
balance: '存入余额'
}]
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {}
}
} }
</script> </script>
<style> <style lang="less">
//仿原生线
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
.payments {background-color: #ededf2;
h1,h3,b{font-weight: 400; }
b {text-transform: uppercase;font-size: .20rem;margin-left: .08rem;display: inline-block;}
.pay-list {position: fixed;z-index: 9; left: 0; right: 0; height: 3.15rem; background-color: #103f73; color: #fff; box-sizing: border-box;
h1 {font-size: .90rem;
b {font-size: .48rem; }
}
h3 {font-size: .24rem;color: #c3cfdc;}
p{font-size: .30rem;}
.d2{width: 2.8rem;}
i{font-size: .22rem;color: #dbe2ea;display: inline-block; vertical-align: top;margin-left: .05rem;}
}
.balance-list {margin: 3.35rem 0 .05rem 0;font-size: .34rem;background: #fff;
i{color: #1c5fa9;font-size: .42rem;margin:0 .12rem 0 .05rem;display: inline-block;vertical-align: middle;margin-top: -.02rem;}
}
.ments-list {background: #fff;font-size: .34rem;position: relative;
span{display: block;}
s{color: #727272;font-size: .22rem;}
&:after{.line.xb;}
}
.page-content {
&.bottom{bottom:1rem;}
}
}
</style> </style>
src/components/Tabbar.vue 0 → 100644
<template>
<div class="tab-bar">
<ul flex="main:justify box:mean cross:center">
<li @click="goTo(0)" :class="index==0?'active':''">
<i class="iconfont icon-tubiaozhexiantu"></i>
<p>用户面板</p>
</li>
<li @click="goTo(1)" :class="index==1?'active':''">
<i class="iconfont icon-cabinet-settings"></i>
<p>矿机</p>
</li>
<li @click="goTo(2)" :class="index==2?'active':''">
<i class="iconfont icon-shouyi"></i>
<p>收益</p>
</li>
<li @click="goTo(3)" :class="index==3?'active':''">
<i class="iconfont icon-unie606"></i>
<p>设置</p>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'tabbar',
data() {
return {
msg: '底部选项卡',
index: 0,
}
},
mounted() {
},
methods: {
goTo(n) {
this.index = n;
switch (n) {
case 0:
this.$router.replace('/my/puid0/coin_type/region_id/payments')
break;
case 1:
this.$router.replace('/my/puid1/coin_type/region_id/payments')
break;
case 2:
this.$router.replace('/my/puid2/coin_type/region_id/payments')
break;
default:
this.$router.replace('/my/puid3/coin_type/region_id/payments')
break;
}
}
}
}
</script>
<style lang="less">
.tab-bar {position: fixed; left: 0; right: 0; bottom: 0; background: #fff; height:1rem;padding: .10rem 0;box-shadow: 0 -2px 10px #e5eaf0;box-sizing: border-box;
li {text-align: center;
.iconfont {color: #b8b8b8;font-size: .40rem;}
p {color: #727272;font-size: .20rem;margin-top: .02rem;}
&.active {
p, .iconfont {color: #1c5fa9; }
}
}
}
</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 sign in to comment