Skip to content

html / poolin_app

Go to a project
Commit 74cb2b39 by jingjie
Options

jingjie

parent 50239229
Showing with 117 additions and 144 deletions
src/assets/less/style2.less
@import url('../css/reset.css');
@import url('function.less');
@import url('animate.less');
/*复用颜色*/
@fontBlue:#1c5fa9;
@fontGray: #8e8e8e;
@bgGray:#ededf2;
//线
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ededf2;;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
.page{
background: @bgGray;
.page-content{
}
}
.language{
.page-content{
&.top{
padding-top: 0.28rem;
}
.language-content{
.language-item{
height: 0.87rem;
line-height: 0.87rem;
padding: 0 10px;
background-color: #fff;
.pos(r);
&:after{.line.xb;}
.language-title{
height: 0.87rem;
line-height: 0.87rem;
span{
font-size: 0.3rem;
color: @fontGray;
}
img{
width: 0.48rem;
height: 0.32rem;
margin-top: -0.02rem;
}
}
.language-selected{
width: 0.36rem;
height: 0.26rem;
background: url(../../assets/img/selected.png) center center no-repeat;
background-size: 0.36rem 0.26rem;
.pos(a);
top: 50%;
right: 10px;
transform: translateY(-50%);
}
&.active{color:@fontBlue;}
}
}
}
}
.default-coin {
.el-form-item {background: #fff; padding: 0rem 0.3rem;
.el-input {padding:0.1rem 0;}
.el-input__inner {border: 0px; padding:0; font-size: 0.32rem;}
}
label {font-size: 0.28rem;color: @fontGray; padding:0.2rem 0.3rem;.d-b;}
.coin-area {padding: 0.2rem 0rem;
label {padding: 0;}
}
.descript-list {line-height: 1.5; text-align: justify;
li {padding:0.1rem 0; color: @fontGray;}
}
.descript{padding:0 0.3rem; color: @fontGray;}
}
src/assets/less/style3.less
@import url('../css/reset.css');
@import url('function.less');
@import url('animate.less');
/*复用颜色*/
@fontBlue:#1c5fa9;
@fontGray: #8e8e8e;
@bgGray:#ededf2;
//线
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ededf2;;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
.language{
background: @bgGray;
.page-content{
&.top{
padding-top: 0.28rem;
}
.language-content{
.language-item{
height: 0.87rem;
line-height: 0.87rem;
padding: 0 10px;
background-color: #fff;
.pos(r);
&:after{.line.xb;}
.language-title{
height: 0.87rem;
line-height: 0.87rem;
span{
font-size: 0.3rem;
color: @fontGray;
}
img{
width: 0.48rem;
height: 0.32rem;
margin-top: -0.02rem;
}
}
.language-selected{
width: 0.36rem;
height: 0.26rem;
background: url(../../assets/img/selected.png) center center no-repeat;
background-size: 0.36rem 0.26rem;
.pos(a);
top: 50%;
right: 10px;
transform: translateY(-50%);
}
&.active{color:@fontBlue;}
}
}
}
}
.default-coin{
background: @bgGray;
.page-content{
&.top{
padding-top: 0.28rem;
}
.coin-text{
padding: 0 0.3rem;
font-size: 0.28rem;
&.coin-text-top{
color: #103f73;
}
&.bottom{
color: #727272;
}
}
.coin-type{
padding: 0.3rem;
margin: 0.18rem 0 0.24rem 0;
background-color: #fff;
.coin-item{
width: 1.98rem;
height: 0.6rem;
line-height: 0.6rem;
box-sizing: border-box;
border: 1px solid #dcdedf;
margin-right:0.48rem;
&:nth-child(3n){
margin-right:0;
}
&.active{
border-color: #2b6aaf;
}
.coin-img{
display: inline-block;
width: 0.44rem;
height:0.44rem;
background: url(../../assets/img/index-tab1.png) center center no-repeat;
background-size: 0.44rem 0.44rem;
}
}
}
.commit-btn{
width: 6.9rem;
height: 0.9rem;
line-height: 0.9rem;
.bc;
background: #103f73;
color: #fff;
font-size: 0.36rem;
border-radius: 30px;
margin: 0 auto;
.pos(a);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: none;
}
}
}
src/components/Settings/DefaultCoin.vue
......@@ -4,20 +4,21 @@
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
</div>
<div class="page-content top">
<div class="coin-text coin-text-top">请选择默认币种</div>
<ul class="coin-type f-cb">
<li class="coin-item f-fl mb40" @click="toggleClass(0)" :class="index==0?'active':''">
<i class="coin-img"></i>
<span class="coin-name">LTC</span>
</li>
<li class="coin-item f-fl mb40" @click="toggleClass(1)" :class="index==1?'active':''"></li>
<li class="coin-item f-fl mb40" @click="toggleClass(2)" :class="index==2?'active':''"></li>
<li class="coin-item f-fl" @click="toggleClass(3)" :class="index==3?'active':''"></li>
<li class="coin-item f-fl" @click="toggleClass(4)" :class="index==4?'active':''"></li>
</ul>
<div class="coin-text coin-text-bottom">当切换到该子账户时，将默认显示该币种</div>
<button class="commit-btn">提交</button>
<div class="page-content">
<el-form :model="createForm" :rules="createRules" ref="createForm">
<label for="">选择此子账户优先显示的币种</label>
<el-form-item prop="defaultCoin">
<div class="coin-area f-cb">
<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>
<div class="descript">当切换到该子账户时，将默认显示该币种</div>
<div class='btn-group full pl30 pr30 mt50'>
<el-button type="primary" round @click="submitForm('createForm')" :disabled="!showBtn">确定</el-button>
</div>
</el-form>
</div>
</div>
......@@ -28,18 +29,33 @@ export default {
data() {
return {
msg: '设置默认币种',
index: 0
createForm: {
defaultCoin: ""
},
createRules: {
defaultCoin: [{ required: true, trigger: "blur" }]
}
}
},
mounted() {
computed: {
showBtn: function() {
return this.createForm.defaultCoin;
}
},
mounted() {},
methods: {
goBack() {
this.$router.go(-1)
this.$router.go(-1);
},
toggleClass(n){
this.index = n;
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$messagebox.alert("提交成功！", "温馨提示");
} else {
this.$messagebox.alert("提交错误!", "温馨提示");
return false;
}
});
}
}
}
......
src/components/Settings/index.vue
......@@ -8,7 +8,7 @@
<div class="settings-group current-subaccount">
<mt-cell title="当前子账户">
<span class="fore-link-text">zhiyuan</span>
<img src="../../assets/img/index-tab1-active.png" alt="" class="fore-link-img"/>
<b class="ltc fore-link-img"/>
</mt-cell>
</div>
<div class="mt40 settings-group subaccount-settings">
......@@ -16,7 +16,7 @@
<mt-cell title="LTC收益地址" is-link></mt-cell>
<mt-cell title="DOGE补贴地址" is-link></mt-cell>
<mt-cell title="默认币种设置" is-link to="/defaultCoin">
<img src="../../assets/img/index-tab1-active.png" alt="" class="fore-link-img"/>
<b class="ltc fore-link-img"/>
</mt-cell>
</div>
<div class="mt40 settings-group notice-content">
......@@ -88,9 +88,6 @@ export default {
.fore-link-img{
margin-right: 0.1rem;
}
.fore-link-text{
margin-right: 0.08rem;
}
}
.settings-group{
.line(){
......@@ -116,10 +113,15 @@ export default {
font-size: 0.28rem;
color: #959595;
}
.fore-link-img{
width: 0.41rem;
height: 0.41rem;
}
.fore-link-img {display: block;width: 0.41rem;height: 0.41rem;vertical-align:middle;padding:0 0.3rem 0 0;background-size:0.41rem 0.41rem; background-repeat: no-repeat; background-position: 0.3rem center; color: #999;}
.ltc {background-image:url(../../assets/img/index-tab1.png);}
.eth {background-image:url(../../assets/img/index-tab2.png);}
.dash {background-image:url(../../assets/img/index-tab3.png);}
.xmr {background-image:url(../../assets/img/index-tab4.png);}
.btc {background-image:url(../../assets/img/index-tab5.png);}
.sc {background-image:url(../../assets/img/index-tab6.png);}
.zcash {background-image:url(../../assets/img/index-tab7.png);}
.doge {background-image:url(../../assets/img/index-tab8.png);}
.notice-badge{
display: inline-block;
width: 0.41rem;
......
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