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