Skip to content

html / poolin_app

Go to a project
Commit 793b5355 by gaolei
Options

gaolei

parent 1882f2de
Showing with 264 additions and 45 deletions
src/assets/less/style3.less
@import url('../css/reset.css');
@import url('function.less');
@import url('animate.less');
//仿原生线
.line(){
&.xt{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';.pos(a);top:0;transform: scaleY(0.33) translateY(-1px);}
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';.pos(a);bottom:0;transform: scaleY(0.33) translateY(1px);}
&.yl{top: 0; bottom:0; width: 1px; height: 100%;background: #ccc;content: '';.pos(a);left:0;transform: scaleX(0.33) translateX(-1px);}
&.yr{top: 0; bottom:0; width: 1px; height: 100%;background: #ccc;content: '';.pos(a);right:0;transform: scaleX(0.33) translateX(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;}
}
}
//矿机页面
.miners{background: #ededf2;
.miners-tab{padding: 0 .30rem;height: 1.6rem;box-shadow: 0 1px 10px #ccc;box-sizing: border-box;.pos(f);z-index: 9999;left: 0;right: 0;background: #fff;
li{.tc;color: #b3b3b3;font-size: .34rem;line-height: .50rem;border-bottom: 2px solid #fff;margin-top: -2px;
&.active{color: #1c5fa9;border-bottom: 2px solid #1c5fa9;}
&:nth-last-of-type(1){
span:after{
background: #fff;
}
}
}
span{.d-b;font-size: .30rem;margin: .30rem 0;.pos(r);
&:after{.line.yr;}
}
b{.d-b;font-weight: 400;}
}
.miners-content{padding-top: 1.6rem}
.miners-sort{padding: .45rem .30rem .15rem;color: #2d6baf;font-size: .28rem;
i{font-size: .30rem;}
}
.miners-table-box{
th{padding: 0;line-height: .60rem;font-size: .24rem;}
td{font-size: .28rem;padding: 0;height: 1.1rem;
div.cell{padding: 0 10px 0 0;line-height:.30rem;}
&:nth-of-type(1){
div.cell{padding:0 0 0 10px;}
}
&:nth-last-of-type(1){
div,.cell{padding: 0;}
}
}
span{font-size: .20rem;}
.arrow{font-size: .40rem;color: #727272;.d-ib;vertical-align: middle;}
b{.d-b;font-size:.18rem;}
.red{color: #fb2727;}
.grey{color: #b3b3b3;}
.cell{
&:after{height: 0;}
}
.bgred{background: #fcd7b4;}
.bggrey{background: #f9f9f9;color: #b3b3b3;}
}
}
\ No newline at end of file
src/components/Common/Tabbar.vue
......@@ -21,12 +21,13 @@
</div>
</template>
<script>
var indexNum = 0
export default {
name: 'tabbar',
data() {
return {
msg: '底部选项卡',
index: 0,
index: indexNum,
}
},
mounted() {
......@@ -38,21 +39,24 @@ export default {
switch (n) {
case 0:
this.$router.replace('/my/puid0/coin_type/region_id/payments')
indexNum=0
break;
case 1:
this.$router.replace('/my/puid1/coin_type/region_id/payments')
this.$router.replace('/my/puid/coin_type/region_id/miners')
indexNum=1
break;
case 2:
this.$router.replace('/my/puid2/coin_type/region_id/payments')
this.$router.replace('/my/puid0/coin_type/region_id/payments')
indexNum=2
break;
default:
this.$router.replace('/my/puid3/coin_type/region_id/payments')
this.$router.replace('/settings')
indexNum=3
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;
......
src/components/Miners/index.vue
<template>
<div class="">
{{msg}} <button @click="goMinerShow">跳转到矿机详情页</button>
<div class="page miners">
<div class="page-header" flex="main:justify cross:center">
<div class="edit"><i class="iconfont icon-fanhui"></i></div>
<div class="title">默认分组</div>
<div class="search"><i class="iconfont icon-fanhui"></i></div>
</div>
<div class="page-content bottom">
<ul class="miners-tab" flex="dir:center box:mean cross:center">
<li @click="tabActive(0)" :class="index==0?'active':''"><span>全部<b>{{num[0]}}</b></span></li>
<li @click="tabActive(1)" :class="index==1?'active':''"><span>活跃<b>{{num[1]}}</b></span></li>
<li @click="tabActive(2)" :class="index==2?'active':''"><span>不活跃<b>{{num[2]}}</b></span></li>
<li @click="tabActive(3)" :class="index==3?'active':''"><span>失效<b>{{num[3]}}</b></span></li>
</ul>
<div class="miners-content">
<div class="miners-sort f-tar"><span><i class="iconfont icon-paixujiang"></i>排序：</span><span>默认排序<i class="iconfont icon-down"></i></span></div>
<el-table :data="tableData" style="width: 100%" class="miners-table-box" :row-class-name="tableRowClassName">
<el-table-column width="40" type="selection" align=center>
</el-table-column>
<el-table-column label="矿机名" prop="name" align=left>
<template slot-scope="scope">
{{scope.row.name}}
<b class="red" v-if="scope.row.status==='1'">活跃</b>
<b class="grey" v-else-if="scope.row.status==='2'">失效</b>
</template>
</el-table-column>
<el-table-column label="实时算力" align=right width="100">
<template slot-scope="scope">
{{scope.row.realPower}}<span>{{scope.row.unit}}H/s</span>
</template>
</el-table-column>
<el-table-column label="日算力" align=right width="100">
<template slot-scope="scope">
{{scope.row.dayPower}}<span>{{scope.row.unit}}H/s</span>
</template>
</el-table-column>
<el-table-column label="拒绝率" prop="refuse" align=right width="60">
</el-table-column>
<el-table-column width="25" align=left>
<template slot-scope="scope">
<i class="arrow iconfont icon-jiantou"></i>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- page-content end -->
<tabbar></tabbar>
</div>
<!-- page end -->
</template>
<script>
import fn from '@/assets/js/function.js';
import { mapState } from 'vuex';
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: 'dashboard',
name: 'miners',
components: {
tabbar
},
data() {
return {
msg: '矿机列表页面'
num: [1613, 1007, 6001, 302],
tableData: [{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
}],
index: 0, //miners-tab默认第一个选中
}
},
mounted() {
},
methods: {
goMinerShow(){
//表格status状态的Class
tableRowClassName({ row, rowIndex }) {
if (row.status == 1) {
return 'bgred';
} else if (row.status == 2) {
return 'bggrey';
}
return '';
},
goMinerShow() {
// <button @click="goMinerShow">跳转到矿机详情页</button>
this.$router.push('/my/puid/coin_type/region_id/miners/worker_id')
}
},
//miners-tab点击切换的选中状态
tabActive(n) {
this.index = n
},
}
}
</script>
<style>
</style>
src/components/Payments/index.vue
......@@ -131,34 +131,4 @@ export default {
}
</script>
<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>
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