Skip to content

html / poolin_app

Go to a project
Commit d8e5a8a2 by gaolei
Options

更改矿机页面，完善用户面板弹窗，增加子账户选择页面

parent 90786ed4
Showing with 351 additions and 123 deletions
src/assets/less/style3.less
......@@ -37,47 +37,110 @@
//矿机页面
.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;
.miners-fixed{.pos(f);z-index: 9999;left: 0;right: 0;}
.miners-tab{padding: 0 .30rem;box-sizing: border-box;background: #fff;
li{height: 1.6rem;line-height: 1rem;.tc;color: #b3b3b3;font-size: .34rem;.pos(r);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;
height: 0;
}
}
span{margin:.30rem 0;.pos(r);.d-b;
&:after{.line.yr;}
}
}
span{.d-b;font-size: .30rem;margin: .30rem 0;.pos(r);
&:after{.line.yr;}
}
b{.d-b;font-weight: 400;}
b{.d-ib;font-size: .30rem;line-height: .40rem;vertical-align: middle;font-weight: 400;}
}
.miners-content{padding-top: 1.6rem}
.miners-sort{padding: .45rem .30rem .15rem;color: #2d6baf;font-size: .28rem;
.miners-sort{height:1rem;box-sizing: border-box;padding: .40rem .30rem 0;color: #2d6baf;font-size: .28rem;background: #ededf2;
i{font-size: .30rem;}
b{font-weight: 400;}
}
.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;}
}
.list-row{background: #fff;overflow: hidden;position: relative;
&>div{.fl;.tr;padding-right: .20rem;box-sizing: border-box;
&.s1{width: 22%;.tl;padding-left:.20rem;padding-right: 0;}
&.s2{width: 27%;}
&.s3{width: 27%;}
&.s4{width: 16%;padding-right: 0}
&.s5{width: 8%;.tc;padding-right: 0;}
}
}
.title{
&>div{color: #727272;font-size: .24rem;.txt-ver(.60rem;);background: #Fff;}
&:after{.line.xb;}
}
.miners-content{padding-top: 3.2rem}
.list{color: #252525;
&>div{height: 1rem;box-sizing: border-box;font-size: .28rem;padding-top: .30rem;}
&:after{.line.xb;}
span{font-size: .18rem;}
b{font-weight: 400;text-transform : uppercase}
i{font-size: .50rem;}
.s5{padding-top: 0;line-height: 1rem;color: #818181;}
em{font-size: .18rem;.d-b;font-weight: 400;
&.red{color: #fb2727;}
&.grey{color: #b3b3b3;}
}
&.redBg{background: #fcd7b4;}
&.greyBg{background: #f9f9f9;color: #b3b3b3;}
}
.bottom{padding-bottom:1rem;}
}
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;}
}
//设置页面-子账户选择
.account{background-color: #ededf2;
h2{height: .96rem;padding: .45rem .30rem 0;box-sizing: border-box;}
ul{background-color: #Fff;
li{.txt-ver(1rem);.pos(r);padding: 0 .20rem 0 .30rem;
&:after{.line.xb;}
span:nth-last-of-type(1){width: 2rem;}
i{font-size: .56rem;color: #757575;.fr;}
b{.d-ib;padding-left: .60rem;vertical-align: top;}
&:active{background-color: #e6e6e6;}
}
}
}
//货币icon
.list-coin{
b{background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center;color: #999;}
.ltc {background-image:url(../img/index-tab1.png);}
.eth {background-image:url(../img/index-tab2.png);}
.dash {background-image:url(../img/index-tab3.png);}
.xmr {background-image:url(../img/index-tab4.png);}
.btc {background-image:url(../img/index-tab5.png);}
.sc {background-image:url(../img/index-tab6.png);}
.zcash {background-image:url(../img/index-tab7.png);}
.doge {background-image:url(../img/index-tab8.png);}
&.active {
.ltc {background-image:url(../img/index-tab1-active.png);}
.eth {background-image:url(../img/index-tab2-active.png);}
.dash {background-image:url(../img/index-tab3-active.png);}
.xmr {background-image:url(../img/index-tab4-active.png);}
.btc {background-image:url(../img/index-tab5-active.png);}
.sc {background-image:url(../img/index-tab6-active.png);}
.zcash {background-image:url(../img/index-tab7-active.png);}
.doge {background-image:url(../img/index-tab8-active.png);}
}
}
//弹窗样式
.show-center,.show-top{width: 100%;}
.my-popup{width: 100%;max-height: 6rem;overflow: auto;
ul{
li{overflow: hidden;position: relative;padding: 0 .30rem;line-height: 1rem;height: 1rem;font-size: .32rem;color: #8e8e8e;
&:after{.line.xb;}
span{float: left;}
i{font-size: .50rem;color: #1c5fa9;float: right;display: none;}
&.active{color: #1c5fa9;
i{display: block;}
}
&:active{background-color: #e6e6e6;}
b{display: inline-block;font-weight: 400;vertical-align:middle;padding-left: .70rem;}
}
}
}
src/components/Dashboard/coin.vue
<template>
<div>
<ul>
<li>coin</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
<div class="my-popup">
<ul>
<li class="list-coin" v-for="(cur_coin,index) in $store.state['cur_coins']" :key="cur_coin" @click="incrementCounter(cur_coin,index)" :class="index==i?'active':''">
<b :class="cur_coin">{{cur_coin|uppercase}}</b>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
export default {
name:'coin',
data(){
return {
i:0
}
},
methods: {
incrementCounter(info,index){
this.i = index
}
}
}
</script>
<style>
</style>
src/components/Dashboard/index.vue
......@@ -7,15 +7,15 @@
</div>
<div class="page-content">
<!-- 切换币种 -->
<mt-popup v-model="showCoin" position="top" class='top'>
<mt-popup v-model="showCoin" position="top" class='top show-top'>
<coin></coin>
</mt-popup>
<!-- 切换区域 -->
<mt-popup v-model="showRegion" position="top" class='top'>
<mt-popup v-model="showRegion" position="top" class='top show-top'>
<region></region>
</mt-popup>
<!-- 切换子账户 -->
<mt-popup v-model="showSide" position="left">
<mt-popup v-model="showSide" position="left" class="left show-left">
<subaccount></subaccount>
</mt-popup>
<div class="block-list">
......@@ -97,7 +97,7 @@
payment_stats: {
yesterday_amount: 0,
today_estimate: 0
},
}
};
},
mounted() {
......
src/components/Dashboard/region.vue
<template>
<div>
<div class="my-popup">
<ul>
<li>region</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
<li v-for="(items, index) in regionDate" @click="regionActive(items, index)" :class="index==i?'active':''">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
......@@ -13,12 +13,25 @@
name:'region',
data(){
return {
regionDate:[{
text:'南方电信'
},{
text:'北方联通'
},{
text:'美国旧金山'
},{
text:'德国法兰克福'
}],
i:0
}
},
methods: {
regionActive(items, index){
this.i = index
console.log(items.text)
}
}
}
</script>
<style>
</style>
src/components/Dashboard/subaccount.vue
<template>
<div>
<ul>
<li>subaccount</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
<div class="subaccount">
<div class="subtop">
<div class="logo">
<p>{{infoUser}}<i class="iconfont icon-jiantou"></i></p>
</div>
<h2>选择子账户</h2>
</div>
<div class="list-item">
<div class="list" v-for="(items, index) in subaccountDate" @click="subaccountActive(items, index)" :class="index==i?'active':''">
<span>{{items}}</span>
<i v-show="index == i" class="iconfont icon-dui"></i>
</div>
<div class="subAdd" @click="goCreate">
<b class="iconfont icon-jiantou"></b>创建子账户
</div>
</div>
</div>
</template>
<script>
export default {
name:'subaccount',
data(){
return {
}
}
<script>
export default {
name: 'subaccount',
data() {
return {
infoUser: 'xuzhiyuan@163.com',
subaccountDate: ['wakuang1', 'wakuang2', 'wakuang3', 'wakuang4'],
i: 0
}
},
methods: {
subaccountActive(items, index) {
this.i = index
console.log(items)
},
goCreate(){
this.$router.replace('/create')
}
}
}
</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);}
}
.show-left,.subaccount{width:5.9rem;background-color: #fff;}
.show-left{height: 100%;}
.subaccount{height: 100%;
.subtop{position: fixed;margin:auto;top: 0;left: 0;right: 0;height: .88rem;z-index: 999;}
.logo{height: 2rem;padding:1.1rem .30rem 0;line-height: .9rem;background-color: #103f73;color: #Fff;box-sizing: border-box;font-size: .32rem;
i{font-size: .50rem;color: #Fff;float: right;}
}
h2{padding:.20rem .30rem 0;font-size: .28rem;color: #727272;line-height: .68rem;background: #ededf2;}
.list-item{padding-top:2.88rem;box-sizing: border-box;height: 100%;overflow: auto;
.list{line-height: .90rem;height: .90rem;position: relative;padding: 0 .30rem;
&:after{.line.xb;}
i{font-size: .50rem;color: #1c5fa9;float: right;}
&.active{color: #1c5fa9;}
&:active{background-color: #e6e6e6;}
}
}
.subAdd{text-align: center;font-size: .32rem;color:#1c5fa9;line-height: .90rem;height: .90rem;position: relative;
b{font-size: .40rem;font-weight: 400;}
&:after{.line.xb;}
&:active{background-color: #e6e6e6;}
}
}
</style>
src/components/Jump.vue
......@@ -13,6 +13,9 @@
<router-link to="/welcome">2.跳转到欢迎页，即列表页精简版</router-link>
</li>
<li @click="goDashboard" style="cursor:pointer">3.跳转到子账户面板</li>
<li>
<router-link to="/my/7/ltc/shenzhen/dashboard">4.跳入用户面板页面</router-link>
</li>
</ul>
</div>
</template>
......
src/components/Miners/index.vue
......@@ -6,42 +6,37 @@
<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-fixed">
<ul class="miners-tab" flex="dir:center box:mean cross:center">
<li v-for="(items,index) in tablist" @click="tabActive(items,index)" :class="index==i?'active':''"><span><b>{{items.text}}<br>{{items.num}}</b></span></li>
</ul>
<div class="miners-sort f-tar"><span @click="getSort"><b><i class="iconfont icon-paixujiang"></i>排序：</b><b>默认排序<i class="iconfont icon-down"></i></b></span></div>
<!-- 切换排序 -->
<mt-popup v-model="showSort" position="top" class='top show-center'>
<sort></sort>
</mt-popup>
<div class="title list-row">
<div class="s1">矿机名</div>
<div class="s2">实时算力</div>
<div class="s3">日算力</div>
<div class="s4">拒绝</div>
<div class="s5"></div>
</div>
</div>
<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 class="list list-row" v-for="items in tableData" :class="{'redBg':items.status==1,'greyBg':items.status==2} ">
<div class="s1">{{items.name}}
<em v-if="items.status==1" class="red">不活跃</em>
<em v-else-if="items.status==2" class="grey">失效</em>
</div>
<div class="s2">{{items.realPower}}<span><b>{{items.unit}}h/</b>s</span></div>
<div class="s3">{{items.dayPower}}<span><b>{{items.unit}}h/</b>s</span></div>
<div class="s4">{{items.refuse}}</div>
<div class="s5"><i class="iconfont icon-jiantou"></i></div>
</div>
<!-- 添加刷新加载位置 -->
</div>
</div>
<!-- page-content end -->
......@@ -49,20 +44,36 @@
</div>
<!-- page end -->
</template>
<script>
import fn from '@/assets/js/function.js';
import { mapState } from 'vuex';
import sort from "@/components/Miners/sort";
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: 'miners',
components: {
sort,
tabbar
},
data() {
return {
num: [1613, 1007, 6001, 302],
tablist:[{
text:'全部',
num:'1006'
},{
text:'活跃',
num:'1002'
},{
text:'不活跃',
num:'107'
},{
text:'失效',
num:'17'
}],
tableData: [{
name: '3103037',
name: '1103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
......@@ -162,31 +173,28 @@ export default {
refuse: '19.45%',
unit: 'H',
}],
index: 0, //miners-tab默认第一个选中
i: 0, //miners-tab默认第一个选中
hasZIndex: false,
showSort:false
}
},
mounted() {
},
methods: {
//表格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
tabActive(items,index) {
this.i = index
console.log(items.text)
},
getSort() {
this.hasZIndex = true;
this.showSort = !this.showSort;
}
}
}
......
src/components/Miners/sort.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :class="index==i?'active':''">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'sort',
data(){
return {
sortDate:[{
text:'日算力 低到高'
},{
text:'日算力 高到低'
},{
text:'矿机名 倒序'
},{
text:'拒绝率 高到低'
},{
text:'拒绝率 高到低'
},{
text:'最后在线时间'
}],
i:0,
}
},
methods: {
sortActive(items, index){
this.i = index
console.log(items.text)
}
}
}
</script>
src/components/Settings/Account.vue 0 → 100644
<template>
<div class="page account">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">子账户选择</div>
</div>
<div class="page-content">
<h2>请选择子账户</h2>
<ul class="list-coin active">
<li v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin" flex="dir:left box:last">
<span>kuangchang</span>
<span>
<b :class="cur_coin">{{cur_coin|uppercase}}</b>
<i class="iconfont icon-jiantou"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'account',
data() {
return {
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1)
}
}
}
</script>
<style>
</style>
src/components/Settings/index.vue
......@@ -6,7 +6,7 @@
<div class="page-content bottom">
<div class="setting-content">
<div class="settings-group current-subaccount">
<mt-cell title="当前子账户">
<mt-cell title="当前子账户" is-link to="/account">
<span class="fore-link-text">zhiyuan</span>
<b class="ltc fore-link-img"/>
</mt-cell>
......
src/main.js
......@@ -37,7 +37,7 @@ axios.interceptors.request.use(config => {
function checkToken() {
return new Promise((resolve, reject) => {
resolve("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTBNRUl4UVRVME5qazJNa0ZFT0RCRk56WkJNVGc0TmtFd09UWkNOakZGTlRFMFEwVTJOdyJ9.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2MTc0NDM5LCJleHAiOjE1MTYxODE2MzksImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.fRvVcMrLru4kN271PESF8wPH3XS4CIbucQiDw3a2TmXkapf4OaxzgBKv7GaE-iuM02_iWJl3n6ipqjxHls_hw4_nfjT70dtLNXTZQ6aiiij94NZ3-9M3lkZtr1kxy8wBt3vFT4AiC8qxdpu3GJpcMFcrSzN7TWi1Czf9MUvUuwBF3GXQbmCJqMvCrPZrT-ZUoPKwiNS3t_K-uzmzcGoNcdZCUB1XIAS8C4ZRUrcG0umfCpnL9DH1MwFCZGV7oaUhBzH7rRkNoeUCUUdgfklUnV0OwGpmrM4Hvlgo5IVKY7dHtpQ3FKoGGdY4KSPp-8JY4vvsD505PBJ_mpDP8zBOHA");
resolve("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTBNRUl4UVRVME5qazJNa0ZFT0RCRk56WkJNVGc0TmtFd09UWkNOakZGTlRFMFEwVTJOdyJ9.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2MzQ5OTc5LCJleHAiOjE1MTYzNTcxNzksImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.haaSilf9d24nu2xJlD5kadftoFNcRgNCLbWvwWhNnp0jQiv5aNUC2aEg2CcK5y3LZIUnUWKZ3JKMYN_egGGyxnwgLL4NF-gAoL-y95TcZnYnxem-mQjGiSl5NdhIwt0y6Bh-xywRbCjGBQTWiQJK5GUFEUcBWJdff8Zej4uuxc0CcbWrsAZSlWQNtzSQKoiZNP9Omsc1PWYc6sIbOEd5P0lzgtBDolAD2OyM_-KhGg4A2AvhN-3OStfftS4SXw2E11keKjPblee8Wtl0o2WRFteRTkBMDGcI2gZkT2WYOtf1Bx-QGJ52kp8Df97Y8ZKf0r8Z05uIiO9lIBhnkW0lVg");
})
}
window.$axios = Vue.prototype.$axios = axios;
......
src/router/index.js
......@@ -18,6 +18,7 @@ import Payments from '@/components/Payments/'
import Settings from '@/components/Settings/'
import DefaultCoin from '@/components/Settings/DefaultCoin'
import Language from '@/components/Settings/Language'
import Account from '@/components/Settings/Account'
import Create from '@/components/Users/Create'
import Subaccount from '@/components/Users/Subaccount'
......@@ -126,7 +127,14 @@ const router = new Router({
meta: {
title: 'Language.vue'
}
}, {
},{
path: '/account',
name: 'account',
component: Account,
meta: {
title: 'Account.vue'
}
},{
path: '/notice',
name: 'notice',
component: Notice,
......
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