Skip to content

D
dapp-web
提交 2aabe3e5 authored 作者: zhanglian's avatar zhanglian
浏览文件
操作

调整 pc 的背景

上级 1d8edd5e
隐藏空白字符变更
内嵌 并排
正在显示 包含 104 行增加 和 73 行删除
src/assets/styles/rem.js
浏览文件 @ 2aabe3e5
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
console.log("11111",clientWidth) console.log("11111",clientWidth)
if (!clientWidth) return; if (!clientWidth) return;
if (clientWidth >= 640) { if (clientWidth >= 640) {
docEl.style.fontSize = 16 * 4 + 'px'; docEl.style.fontSize = 75 + 'px';
} else { } else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// console.log("00001111") // console.log("00001111")
......
src/views/thinkiumBridge/pcIndex.vue
浏览文件 @ 2aabe3e5
...@@ -28,9 +28,9 @@ import thinkiumBridge from './thinkiumBridge.vue' ...@@ -28,9 +28,9 @@ import thinkiumBridge from './thinkiumBridge.vue'
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgba(0,0,0,0.4); // background: rgba(0,0,0,0.4);
.container { .container {
width: 7.5rem;
margin: 0 auto; margin: 0 auto;
} }
......
src/views/thinkiumBridge/thinkiumBridge.vue
浏览文件 @ 2aabe3e5
<template> <template>
<div class="container"> <div class="container">
<div class="banner-top"> <div class="banner-top" />
<img src="@/assets/images/bg.png" alt=""> <div class="main">
</div> <div class="cannect-wallet" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
<div class="cannect-wallet" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div> <div class="cannect-wallet pointer" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div>
<div class="cannect-wallet pointer" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div> <div class="redemption-wrap">
<div class="redemption-wrap"> <div class="redemption-window hold">
<div class="redemption-window hold"> <div class="redemption-tit">
<div class="redemption-tit"> <div class="redemption-name">{{holdItem.name}}</div>
<div class="redemption-name">{{holdItem.name}}</div> <div class="redemption-over">{{$t('balance')}}：{{$toRegularNumber(balance)}}</div>
<div class="redemption-over">{{$t('balance')}}：{{$toRegularNumber(balance)}}</div> </div>
</div> <div class="redemption-money">
<div class="redemption-money"> <div class="token-name pointer" @click="changeToken('holdItem', holdItem.chainName)">
<div class="token-name pointer" @click="changeToken('holdItem', holdItem.chainName)"> <img :src="holdItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
<img :src="holdItem.coinData.url || require(`@/assets/images/logo.png`)" alt=""> <span>{{holdItem.coinData.name}}</span>
<span>{{holdItem.coinData.name}}</span> </div>
<input type="text" :placeholder="$t('placeholder1')" v-positiveInt class="number-input">
</div> </div>
<input type="text" :placeholder="$t('placeholder1')" v-positiveInt class="number-input">
</div> </div>
</div> <div class="change-img pointer">
<div class="change-img pointer"> <img src="@/assets/images/exchange.png" alt="">
<img src="@/assets/images/exchange.png" alt=""> <div @click="exchange"></div>
<div @click="exchange"></div>
</div>
<div class="redemption-window exchange">
<div class="redemption-tit">
<div class="redemption-name">{{exchangeItem.name}}</div>
<div class="redemption-over">{{$t('expectedGet')}}</div>
</div> </div>
<div class="redemption-money"> <div class="redemption-window exchange">
<div class="token-name pointer" @click="changeToken('exchangeItem', exchangeItem.chainName)"> <div class="redemption-tit">
<img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt=""> <div class="redemption-name">{{exchangeItem.name}}</div>
<span>{{exchangeItem.coinData.name}}</span> <div class="redemption-over">{{$t('expectedGet')}}</div>
</div>
<div class="redemption-money">
<div class="token-name pointer" @click="changeToken('exchangeItem', exchangeItem.chainName)">
<img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
<span>{{exchangeItem.coinData.name}}</span>
</div>
<div class="number">{{obtain}}</div>
</div> </div>
<div class="number">{{obtain}}</div>
</div> </div>
<div class="handling-fee">{{$t('handlingFee')}}<span>0.3%</span></div>
</div> </div>
<div class="handling-fee">{{$t('handlingFee')}}<span>0.3%</span></div> <div class="convert-btn pointer" @click="transfer">{{$t('transfer')}}</div>
</div> </div>
<div class="convert-btn pointer" @click="transfer">{{$t('transfer')}}</div>
<EDialog :title="$t('chooseToken')" :visible="dialogVisible" @close="dialogVisible = false" v-if="dialogVisible"> <EDialog :title="$t('chooseToken')" :visible="dialogVisible" @close="dialogVisible = false" v-if="dialogVisible">
<ul class="select-list"> <ul class="select-list">
<li class="select-item" v-for="(item, index) in tokenList" :key="index" @click="changeSelect(index,item)" :class="selectIndex === index ? 'active' : ''"> <li class="select-item" v-for="(item, index) in tokenList" :key="index" @click="changeSelect(index,item)" :class="selectIndex === index ? 'active' : ''">
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
</ul> </ul>
</EDialog> </EDialog>
<van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" /> <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" />
</div> </div>
</template> </template>
...@@ -171,7 +172,7 @@ export default { ...@@ -171,7 +172,7 @@ export default {
} }
console.log('----123', token); console.log('----123', token);
this.changeSelect(0, token) this.changeSelect(0, token)
}, },
refreshBalance() { refreshBalance() {
this.rbalance++ this.rbalance++
...@@ -189,8 +190,8 @@ export default { ...@@ -189,8 +190,8 @@ export default {
} }
}, },
networkAlert() { networkAlert() {
if(!this.holdItem.coinData.chainId || !this.exchangeItem.coinData.chainId){ if (!this.holdItem.coinData.chainId || !this.exchangeItem.coinData.chainId) {
return; return;
} }
let fromChainName = this.formateChainName(this.holdItem.coinData.chainId); let fromChainName = this.formateChainName(this.holdItem.coinData.chainId);
let toChainName = this.formateChainName(this.exchangeItem.coinData.chainId); let toChainName = this.formateChainName(this.exchangeItem.coinData.chainId);
...@@ -259,7 +260,7 @@ export default { ...@@ -259,7 +260,7 @@ export default {
message: this.$t('pleaseLinkTheWallet'), message: this.$t('pleaseLinkTheWallet'),
confirmButtonText: this.$t('OK') confirmButtonText: this.$t('OK')
}).then(() => { }).then(() => {
connectWallet() connectWallet()
}) })
return; return;
} }
...@@ -280,27 +281,27 @@ export default { ...@@ -280,27 +281,27 @@ export default {
let holdName = this.holdItem.coinData.name let holdName = this.holdItem.coinData.name
let isTKM = holdName == 'TKM' || holdName == 'BTKM' || holdName == 'TKM3' || holdName == 'BTKM3' let isTKM = holdName == 'TKM' || holdName == 'BTKM' || holdName == 'TKM3' || holdName == 'BTKM3'
let minNum = 0 let minNum = 0
if (isTKM && value < 1000) { // if (isTKM && value < 1000) {
minNum = 1000 // minNum = 1000
this.$dialog.alert({ // this.$dialog.alert({
title: this.$t('title'), // title: this.$t('title'),
message: this.$t('placeholder3', { minNum }), // message: this.$t('placeholder3', { minNum }),
confirmButtonText: this.$t('confirm') // confirmButtonText: this.$t('confirm')
}).then(() => { // }).then(() => {
// on close // // on close
}); // });
return; // return;
} else if (!isTKM && value < 200) { // } else if (!isTKM && value < 200) {
minNum = 200 // minNum = 200
this.$dialog.alert({ // this.$dialog.alert({
title: this.$t('title'), // title: this.$t('title'),
message: this.$t('placeholder3', { minNum }), // message: this.$t('placeholder3', { minNum }),
confirmButtonText: this.$t('confirm') // confirmButtonText: this.$t('confirm')
}).then(() => { // }).then(() => {
// on close // // on close
}); // });
return; // return;
} // }
this.pageLoading = true; this.pageLoading = true;
try { try {
if (holdItem.coinData.type == 'main') { if (holdItem.coinData.type == 'main') {
...@@ -397,19 +398,7 @@ export default { ...@@ -397,19 +398,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
background: #FFF; background: #FFF;
.banner-top {
height: 3.0rem;
img {
width: 7.5rem;
height: 3.0rem;
}
}
.cannect-wallet { .cannect-wallet {
margin: 0.47rem 0 0.18rem auto; margin: 0.47rem 0 0.18rem auto;
width: 2.00rem; width: 2.00rem;
...@@ -520,8 +509,10 @@ export default { ...@@ -520,8 +509,10 @@ export default {
} }
} }
.convert-btn { .convert-btn {
margin-left: 0.75rem; transform: translate(-50%);
margin-left: 50%;
margin-top: 2.3rem; margin-top: 2.3rem;
margin-bottom: 2rem;
width: 6rem; width: 6rem;
height: 0.8rem; height: 0.8rem;
background-color: #FCBF19; background-color: #FCBF19;
...@@ -577,5 +568,45 @@ export default { ...@@ -577,5 +568,45 @@ export default {
color: red; color: red;
font-size: .36rem; font-size: .36rem;
} }
/deep/{
.loading-bg.van-loading{
top: 0;
left: 0;
}
}
}
@media screen and ( max-width: 640px) {
.container {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
.banner-top {
height: 3.0rem;
background: url('../../assets/images/bg.png') center no-repeat;
background-size: cover;
}
}
}
@media screen and ( min-width: 640px) {
.container {
width: 100%;
height: 100%;
display: block;
.banner-top {
height: 24.3vw;
background: url('../../assets/images/bgPc.png') center no-repeat;
background-size: cover;
}
.main {
width: 10rem;
margin: 0 auto;
padding-bottom: 1rem;
}
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论