Skip to content

html / poolin_app

Go to a project
Commit 5e242fa8 by zhanghui1
Options

1

parent d2d3b656
Showing with 188 additions and 43 deletions
index.html
......@@ -7,7 +7,7 @@
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_538501_5mndck7tpvsoflxr.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_538501_1tkik4howqzlrf6r.css" />
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<title>poolin_app</title>
......
src/assets/less/style.less
......@@ -74,25 +74,36 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
@fontBlue1:#1c5fa9;
@fontBlue2:#6c87b2;
@gray:#727272;
@fontGreen:#2caa32;
.c-blue1 {color: @fontBlue1;}
.c-blue2 {color: @fontBlue2;}
.c-green {color: @fontGreen;
span {color: @fontGreen;}
}
.bg-blue{background: #ededf2;}
/*样式修正*/
.button-primary {background:@blue;border-color:@blue; box-shadow: 0 0.2rem 0.3rem rgba(16,63,115,0.2);
&.is-disabled { background: #d6dbe5; box-shadow: none; border-color:#d6dbe5;}
}
.page {width:100%;height:100%; overflow: hidden;.pos(a);
.page-header {background:@blue;color:#fff;.pos(f); left:0; top:0; right:0; height:44px;
.page-header {background:@blue;color:#fff;.pos(f); left:0; top:0; right:0; height:44px; z-index: 9999;
.back {width:44px;height:44px; vertical-align: middle;.tc;
i {font-size:30px;.txt-ver(44px);}
}
.title {font-size:0.36rem;.pos(a); left:100px; right:100px; .tc;}
.side {.back;}
.title {font-size:0.36rem;.pos(a); left:100px; right:100px; .tc;.txt-ver(44px);}
.btns {font-size:0.36rem; padding:0 15px;}
.btn-choose-coin{ height: 44px; vertical-align: middle; padding-right: 10px;
span {.d-ib; background-size: 32px 32px; width:44px; height: 44px; background-repeat: no-repeat; background-position: center center;.fl;}
.iconfont {margin-top: 15px;.d-ib; vertical-align: middle}
.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);}
}
}
.page-content {position:absolute;top:44px;width:100%;height:auto;left:0;right:0;bottom:0;overflow-x:hidden;overflow-y:auto;}
}
......@@ -203,13 +214,24 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
.title {margin-top: 0.1rem;}
}
.c-charts {width:100%;height:220px;}
.main {margin-top: 50px; min-height: 120vh;}
.mobile-android{
.dashboard {
.zIndexAuto{z-index: auto;}
.page-content{
.top {top:44px;}
}
}
.mobile-ios {
.page-header {padding-top: 20px;}
.page-content {top:64px;}
.dashboard {
.page-content{
.top {top:64px;}
}
.page-header {}
}
}
src/components/Dashboard/coin.vue 0 → 100644
<template>
<div>
<ul>
<li>coin</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'coin',
data(){
return {
}
}
}
</script>
<style>
</style>
src/components/Dashboard/index.vue
<template>
<div class="">
{{msg}}
<button @click="goMiners">跳转到矿机列表</button>
<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>
<div class="page-content">
<!-- 切换币种 -->
<mt-popup v-model="showCoin" position="top" class='top'>
<coin></coin>
</mt-popup>
<!-- 切换区域 -->
<mt-popup v-model="showRegion" position="top" class='top'>
<region></region>
</mt-popup>
<!-- 切换子账户 -->
<mt-popup v-model="showSide" position="left">
<subaccount></subaccount>
</mt-popup>
<div class="block-list">
<div class="cell" flex="box:mean">
<div flex="main:center dir:top box:center cross:center">
<p><span class="v"><animated-num :value="26.83 " :fixed=3></animated-num></span><span class="k">TH/s</span></p>
<h3 class="title f24gray">24小时算力</h3>
</div>
<div flex="main:center dir:top box:center cross:center">
<p><span class="v"><animated-num :value="19.39" :fixed=3></animated-num></span><span class="k">TH/s</span></p>
<h3 class="title f24gray">实时算力</h3>
</div>
</div>
<div class="cell" flex="box:mean">
<div flex="main:center dir:top box:center cross:center">
<p><span class="v c-green"><animated-num :value="1609" :fixed=0></animated-num></span></p>
<h3 class="title f24gray">活跃矿机</h3>
</div>
<div flex="main:center dir:top box:center cross:center">
<p><span class="v"><animated-num :value="3.99330257" :fixed=8></animated-num></span><span class="k">BTC</span></p>
<h3 class="title f24gray">昨日收益</h3>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import coin from "@/components/dashboard/coin";
import region from "@/components/dashboard/region";
import subaccount from "@/components/dashboard/subaccount";
import animatedNum from "@/components/common/AnimatedNum";
export default {
name: 'dashboard',
name: "dashboard",
components: {
coin,
region,
subaccount,
animatedNum
},
data() {
return {
msg: '子账户面板'
}
},
mounted() {
hasZIndex: false,
showCoin: false,
showRegion: false,
showSide: false
};
},
mounted() {},
methods: {
goMiners() {
this.$router.push({ name: 'miners' })
getSide() {
this.hasZIndex = true;
this.showSide = !this.showSide;
this.showRegion = false;
this.showCoin = false;
},
getCoin() {
this.hasZIndex = false;
this.showCoin = !this.showCoin;
this.showRegion = false;
},
getRegion() {
this.hasZIndex = false;
this.showRegion = !this.showRegion;
this.showCoin = false;
}
}
}
};
</script>
<style>
.aaa .v-modal {
top: 64px;
}
</style>
src/components/Dashboard/region.vue 0 → 100644
<template>
<div>
<ul>
<li>region</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'region',
data(){
return {
}
}
}
</script>
<style>
</style>
src/components/Dashboard/subaccount.vue 0 → 100644
<template>
<div>
<ul>
<li>subaccount</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'subaccount',
data(){
return {
}
}
}
</script>
<style>
</style>
src/components/Users/Create.vue
......@@ -14,18 +14,8 @@
<label for="">选择此子账户优先显示的币种</label>
<el-form-item prop="defaultCoin">
<div class="coin-area f-cb">
<el-radio v-model="createForm.defaultCoin" :label="cur_coin|uppercase" border v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin">{{cur_coin|uppercase}}</el-radio>
<label class="btn-coin" :class="createForm.defaultCoin=='ltc'?'active':''"><b class="ltc">LTC</b>
<input type="radio" id="ltc" value="ltc" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='eth'?'active':''"><b class="eth">ETH</b>
<input type="radio" id="eth" value="eth" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='dash'?'active':''"><b class="dash">DASH</b>
<input type="radio" id="dash" value="dash" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='xmr'?'active':''"><b class="xmr">XMR</b>
<input type="radio" id="xmr" value="xmr" v-model="createForm.defaultCoin">
<label class="btn-coin" :class="createForm.defaultCoin==cur_coin?'active':''" v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin"><b :class="cur_coin">{{cur_coin|uppercase}}</b>
<input type="radio" id="cur_coin" :value="cur_coin" v-model="createForm.defaultCoin">
</label>
</div>
</el-form-item>
......@@ -41,7 +31,6 @@
</ul>
</div>
</div>
<!-- {{msg}} <button @click="dashboard">跳转到子账户面板</button> -->
</div>
</template>
<script>
......@@ -66,12 +55,11 @@ export default {
],
defaultCoin: [{ required: true, trigger: "blur" }]
}
// showBtn: false
};
},
computed: {
showBtn: function() {
return !!this.createForm.username && !!this.createForm.defaultCoin;
return this.createForm.username && this.createForm.defaultCoin;
}
},
mounted() {},
......@@ -82,9 +70,9 @@ export default {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
this.$messagebox.alert("提交成功！", "温馨提示");
} else {
console.log("error submit!!");
this.$messagebox.alert("提交错误!", "温馨提示");
return false;
}
});
......
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