Skip to content

html / poolin_app

Go to a project
Commit 68085c69 by gaolei
Options

下拉框选择

parents d8e5a8a2 73ad5db5
Showing with 377 additions and 70 deletions
package.json
......@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.10.57",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
......
src/assets/less/style2.less
......@@ -69,3 +69,150 @@
}
.descript{padding:0 0.3rem; color: @fontGray;}
}
.notice{
.page-content{
.notice-content{
width: 7.5rem;
.notice-notice{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-xiaoxigonggao{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #1b82d2;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
.notice-alarm{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-tongyongleibaojing{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #ff6600;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
}
}
}
.list{
.page-header{
.btn-mark{
padding: 0 15px;
font-size: 0.32rem;
color: #f5f5f9;
}
}
.page-content{
.list-content{
.list-item{
.pos(r);
box-sizing: border-box;
&:after{.line.xb;}
&.unread{
p{
font-size: 0.32rem;
color: #252525;
}
span{
font-size: 0.22rem;
color: #727272;
}
}
&.read{
p{
font-size: 0.32rem;
color: #a9b2bf;
}
span{
font-size: 0.22rem;
color: #a9b2bf;
}
}
}
}
}
}
src/components/Dashboard/coin.vue
<template>
<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':''">
<li class="list-coin" v-for="(cur_coin,index) in $store.state['cur_coins']" :key="cur_coin" @click="coinAcitve(cur_coin,index)" :class="{active:coin==cur_coin}">
<b :class="cur_coin">{{cur_coin|uppercase}}</b>
<i class="iconfont icon-dui"></i>
</li>
......@@ -11,15 +11,15 @@
<script>
export default {
name:'coin',
props: ['coin'],
data(){
return {
i:0
}
},
methods: {
incrementCounter(info,index){
this.i = index
}
coinAcitve(info,index){
this.$emit('childCoin',info)
},
}
}
</script>
src/components/Dashboard/index.vue
......@@ -2,17 +2,17 @@
<div class="page dashboard">
<div class="page-header" :class="hasZIndex==true?'zIndexAuto':''" flex="main:justify cross:center">
<div class="side" @click="getSide"><i class="iconfont icon-mulu"></i></div>
<div class="title" @click="getRegion">YZCF - 南方电信<i class="iconfont icon-down"></i></div>
<div class="btn-choose-coin" @click="getCoin"><span class="dash"></span><i class="iconfont icon-down"></i></div>
<div class="title" @click="getRegion">YZCF - {{messageRegion}}<i class="iconfont icon-down"></i></div>
<div class="btn-choose-coin" @click="getCoin"><span :class="messageCoin"></span><i class="iconfont icon-down"></i></div>
</div>
<div class="page-content">
<!-- 切换币种 -->
<mt-popup v-model="showCoin" position="top" class='top show-top'>
<coin></coin>
<coin :coin="messageCoin" v-on:childCoin="fromCoin"></coin>
</mt-popup>
<!-- 切换区域 -->
<mt-popup v-model="showRegion" position="top" class='top show-top'>
<region></region>
<region :region="messageRegion" v-on:childRegion="fromRegion"></region>
</mt-popup>
<!-- 切换子账户 -->
<mt-popup v-model="showSide" position="left" class="left show-left">
......@@ -97,7 +97,9 @@
payment_stats: {
yesterday_amount: 0,
today_estimate: 0
}
},
messageRegion: '北方联通',
messageCoin:'dash'
};
},
mounted() {
......@@ -201,6 +203,14 @@
this.showRegion = !this.showRegion;
this.showCoin = false;
this.showSide = false;
},
fromRegion(msg){
this.messageRegion = msg;
this.showRegion = false;
},
fromCoin(msg){
this.messageCoin = msg;
this.showCoin = false;
}
}
};
......
src/components/Dashboard/region.vue
<template>
<div class="my-popup">
<ul>
<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>
<ul>
<li v-for="(items, index) in regionDate" :key="items.text" :class="{active:region==items.text}" v-on:click="regionAcitve(items, index)" >
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'region',
data(){
return {
regionDate:[{
text:'南方电信'
},{
text:'北方联通'
},{
text:'美国旧金山'
},{
text:'德国法兰克福'
}],
i:0
}
},
methods: {
regionActive(items, index){
this.i = index
console.log(items.text)
}
}
export default {
name: 'region',
props: ['region'],
data() {
return {
regionDate: [{
text: '南方电信'
}, {
text: '北方联通'
}, {
text: '美国旧金山'
}, {
text: '德国法兰克福'
}],
}
</script>
},
methods: {
regionAcitve(items, index) {
this.$emit('childRegion', items.text)
}
}
}
</script>
src/components/Dashboard/subaccount.vue
......@@ -7,7 +7,7 @@
<h2>选择子账户</h2>
</div>
<div class="list-item">
<div class="list" v-for="(items, index) in subaccountDate" @click="subaccountActive(items, index)" :class="index==i?'active':''">
<div class="list" v-for="(items, index) in subaccountDate" :key="items" @click="subaccountActive(items, index)" :class="index==i?'active':''">
<span>{{items}}</span>
<i v-show="index == i" class="iconfont icon-dui"></i>
</div>
......
src/components/Miners/group.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :key="items.text" :class="{active:group==items.text}">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'group',
props: ['group'],
data(){
return {
sortDate:[{
text:'全部'
},{
text:'默认分组'
},{
text:'北京机房'
},{
text:'四川'
}]
}
},
methods: {
sortActive(items, index){
this.$emit("childGroup",items.text)
}
}
}
</script>
src/components/Miners/index.vue
......@@ -2,19 +2,27 @@
<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="title" @click="getGroup">{{messageGroup}}</div>
<div class="search"><i class="iconfont icon-fanhui"></i></div>
</div>
<div class="page-content bottom">
<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>
<div class="miners-sort f-tar"><span @click="getSort"><b><i class="iconfont icon-paixujiang"></i>排序：</b><b>{{messageSort}}<i class="iconfont icon-down"></i></b></span></div>
<!-- 默认分组 -->
<mt-popup v-model="showGroup" position="top" class='top show-center'>
<group :group="messageGroup" v-on:childGroup="formGroup"></group>
</mt-popup>
<!-- 切换排序 -->
<mt-popup v-model="showSort" position="top" class='top show-center'>
<sort></sort>
<sort :sort="messageSort" v-on:childSort="fromSort"></sort>
</mt-popup>
<div class="title list-row">
<div class="s1">矿机名</div>
<div class="s2">实时算力</div>
......@@ -50,11 +58,13 @@
<script>
import fn from '@/assets/js/function.js';
import sort from "@/components/Miners/sort";
import group from "@/components/Miners/group";
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: 'miners',
components: {
sort,
group,
tabbar
},
data() {
......@@ -175,7 +185,10 @@ export default {
}],
i: 0, //miners-tab默认第一个选中
hasZIndex: false,
showSort:false
showSort:false,
showGroup:false,
messageSort:'矿机名 倒序',
messageGroup:'全部'
}
},
mounted() {
......@@ -194,7 +207,21 @@ export default {
getSort() {
this.hasZIndex = true;
this.showSort = !this.showSort;
}
this.showGroup=false;
},
getGroup(){
this.hasZIndex = false;
this.showGroup = !this.showGroup;
this.showSort=false;
},
fromSort(msg){
this.messageSort = msg;
this.showSort=false;
},
formGroup(msg){
this.messageGroup = msg;
this.showGroup=false;
}
}
}
......
src/components/Miners/sort.vue
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :class="index==i?'active':''">
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :key="items.text" :class="{active:sort==items.text}">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
......@@ -11,9 +11,12 @@
<script>
export default {
name:'sort',
props: ['sort'],
data(){
return {
sortDate:[{
text:'默认排序'
},{
text:'日算力 低到高'
},{
text:'日算力 高到低'
......@@ -22,7 +25,7 @@
},{
text:'拒绝率 高到低'
},{
text:'拒绝率 高到低'
text:'拒绝率 低到高'
},{
text:'最后在线时间'
}],
......@@ -31,8 +34,7 @@
},
methods: {
sortActive(items, index){
this.i = index
console.log(items.text)
this.$emit('childSort', items.text)
}
}
}
......
src/components/Notice/index.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeList">跳转到通知列表</button>
<div class="page notice">
<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">
<div class="notice-content">
<div class="notice-notice" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-xiaoxigonggao">
<b class="notice-badge">{{notice.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
公告
</span>
<s class="f-tar">
{{notice.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{notice.title}}</div>
</div>
</div>
<div class="notice-alarm" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-tongyongleibaojing">
<b class="notice-badge">{{alarm.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
报警
</span>
<s class="f-tar">
{{alarm.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{alarm.title}}</div>
</div>
</div>
</div>
<!--<button @click="goNoticeList">跳转到通知列表</button>-->
</div>
</div>
</template>
<script>
......@@ -9,16 +48,31 @@ export default {
name: 'dashboard',
data() {
return {
msg: '通知中心'
notice: {
time: '2017-11-05 11:33',
num: '15',
title:'矿池关于比特币现金版本升级及更名的通知'
},
alarm: {
time: '2017-11-05 11:33',
num: '5',
title:'活跃矿机数下降到1500台'
}
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1);
},
goNoticeList() {
this.$router.push('/noticeList')
}
},
// goAlarmList() {
// this.$router.push('/alarmList')
// }
}
}
......
src/components/Notice/list.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeShow">跳转到通知详情</button>
<div class="page list">
<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 class="btn-mark" @click="markAllList">全标已读</div>
</div>
<div class="page-content">
<ul class="list-content">
<li v-for="(notice,index) in noticeList" :key="notice.id" class="list-item p30" :class="notice.status=='unread'?'unread':'read'" @click="goNoticeShow(index) ">
<p>{{notice.title}}</p>
<span>{{notice.time}}</span>
</li>
</ul>
</div>
<!--{{msg}}-->
<!--<button @click="goNoticeShow">跳转到通知详情</button>-->
</div>
</template>
<script>
......@@ -9,15 +22,38 @@ export default {
name: 'noticeList',
data() {
return {
msg: '通知列表'
noticeList:[{
id: 0,
time: '2017-11-05 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'unread'
},{
id: 1,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read'
},{
id: 2,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read',
isRead: false
}],
}
},
mounted() {
},
methods: {
goNoticeShow() {
this.$router.push('/NoticeShow')
goBack() {
this.$router.go(-1);
},
goNoticeShow(index) {
this.noticeList[index].status='read';
// this.$router.push('/NoticeShow');
},
markAllList() {
}
}
}
......
src/components/Settings/DefaultCoin.vue
......@@ -2,7 +2,7 @@
<div class="page default-coin">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
<div class="title">设置默认币种</div>
</div>
<div class="page-content">
<el-form :model="createForm" :rules="createRules" ref="createForm">
......@@ -28,7 +28,6 @@ export default {
name: 'defaultCoin',
data() {
return {
msg: '设置默认币种',
createForm: {
defaultCoin: ""
},
......
src/components/Settings/Language.vue
......@@ -2,7 +2,7 @@
<div class="page language">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
<div class="title">语言设置</div>
</div>
<div class="page-content top">
<div class="language-content">
......@@ -46,7 +46,6 @@ export default {
name: 'language',
data() {
return {
msg: '语言设置',
index: 0
}
},
......
src/components/Settings/index.vue
<template>
<div class="page settings">
<div class="page-header" flex="main:justify cross:center">
<div class="title">{{msg}}</div>
<div class="title">设置页面</div>
</div>
<div class="page-content bottom">
<div class="setting-content">
......@@ -21,7 +21,7 @@
</div>
<div class="mt40 settings-group notice-content">
<div class="settings-title">通知公告</div>
<mt-cell title="通知中心" is-link>
<mt-cell title="通知中心" is-link to="/notice">
<span class="notice-badge">2</span>
</mt-cell>
</div>
......@@ -65,7 +65,7 @@ export default {
},
data() {
return {
msg: '设置页面'
}
},
mounted() {
......
src/main.js
......@@ -37,7 +37,7 @@ axios.interceptors.request.use(config => {
function checkToken() {
return new Promise((resolve, reject) => {
resolve("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTBNRUl4UVRVME5qazJNa0ZFT0RCRk56WkJNVGc0TmtFd09UWkNOakZGTlRFMFEwVTJOdyJ9.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2MzQ5OTc5LCJleHAiOjE1MTYzNTcxNzksImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.haaSilf9d24nu2xJlD5kadftoFNcRgNCLbWvwWhNnp0jQiv5aNUC2aEg2CcK5y3LZIUnUWKZ3JKMYN_egGGyxnwgLL4NF-gAoL-y95TcZnYnxem-mQjGiSl5NdhIwt0y6Bh-xywRbCjGBQTWiQJK5GUFEUcBWJdff8Zej4uuxc0CcbWrsAZSlWQNtzSQKoiZNP9Omsc1PWYc6sIbOEd5P0lzgtBDolAD2OyM_-KhGg4A2AvhN-3OStfftS4SXw2E11keKjPblee8Wtl0o2WRFteRTkBMDGcI2gZkT2WYOtf1Bx-QGJ52kp8Df97Y8ZKf0r8Z05uIiO9lIBhnkW0lVg");
resolve("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTBNRUl4UVRVME5qazJNa0ZFT0RCRk56WkJNVGc0TmtFd09UWkNOakZGTlRFMFEwVTJOdyJ9.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2NjcxOTI4LCJleHAiOjE1MTY2NzkxMjgsImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.UPdJbluTv3Xmcfs_9VI-Wih_SlfQL0QbEh2Rmbu2967lB0_5RXD4sqn3yWTf_VyMYjJqlqTRTkb8yPtUPcsQCA4oXz9fwUqkvmJYhVqCbeRBax-GtZ596um080IZjfc_rsHsemu49UcjCGBtBN4Z1EfyStMnP888_i7XN1Jg3fQxhj87DBn8QLIkj0DIolj0rHvie-cNRCGk14WDd5zP-KAWmvKW4nLwnrEEOLHcmaeH46z0ZCNTpJ7sFr0UHxBQTVVE5fU2zBlym7f0jpofR5M7BCa98UWV7KCJxioeljCkvu-dvCr0IO-oxWsQ0_WwoKkRj1jiDAwp_sgVMq0Yvg");
})
}
window.$axios = Vue.prototype.$axios = axios;
......
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