Skip to content

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

调整 ui

上级 3e0cccdc
显示空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 79 行删除
src/assets/images/bg.png
查看替换文件 @ 3e0cccdc 浏览文件 @ 342f86d7
src/assets/images/bg.png

624.9 KB | W: | H:

src/assets/images/bg.png

165.6 KB | W: | H:

src/assets/images/bg.png
src/assets/images/bg.png
src/assets/images/bg.png
src/assets/images/bg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/bgPc.png
查看替换文件 @ 3e0cccdc 浏览文件 @ 342f86d7
src/assets/images/bgPc.png

67.0 KB | W: | H:

src/assets/images/bgPc.png

336.8 KB | W: | H:

src/assets/images/bgPc.png
src/assets/images/bgPc.png
src/assets/images/bgPc.png
src/assets/images/bgPc.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/exchange.png
查看替换文件 @ 3e0cccdc 浏览文件 @ 342f86d7
src/assets/images/exchange.png

13.1 KB | W: | H:

src/assets/images/exchange.png

2.4 KB | W: | H:

src/assets/images/exchange.png
src/assets/images/exchange.png
src/assets/images/exchange.png
src/assets/images/exchange.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/styles/rem.js
浏览文件 @ 342f86d7
...@@ -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 = 75 + 'px'; docEl.style.fontSize = 60 + 'px'; // 页面宽度2200
} else { } else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// console.log("00001111") // console.log("00001111")
......
src/i18n/locale/en.js
浏览文件 @ 342f86d7
...@@ -3,7 +3,7 @@ export default { ...@@ -3,7 +3,7 @@ export default {
balance: 'Balance', balance: 'Balance',
placeholder1: 'Please enter the exchange quantity', placeholder1: 'Please enter the exchange quantity',
expectedGet: 'Expected to get', expectedGet: 'Expected to get',
handlingFee: 'Handling fee', handlingFee: 'Handling fee ',
transfer: 'Exchange', transfer: 'Exchange',
chain: 'Chain', chain: 'Chain',
title: 'Title', title: 'Title',
......
src/views/thinkiumBridge/pcIndex.vue
浏览文件 @ 342f86d7
...@@ -27,7 +27,6 @@ import thinkiumBridge from './thinkiumBridge.vue' ...@@ -27,7 +27,6 @@ import thinkiumBridge from './thinkiumBridge.vue'
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
// background: rgba(0,0,0,0.4); // background: rgba(0,0,0,0.4);
.container { .container {
......
src/views/thinkiumBridge/thinkiumBridge.vue
浏览文件 @ 342f86d7
...@@ -5,33 +5,32 @@ ...@@ -5,33 +5,32 @@
<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-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-window hold" style="margin-bottom: .85rem">
</div> <div class="redemption-tit">
<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> </div>
<div class="redemption-over">{{$t('balance')}}：{{$toRegularNumber(balance)}}</div>
</div>
<div class="redemption-money">
<input type="text" :placeholder="$t('placeholder1')" v-positiveInt class="number-input"> <input type="text" :placeholder="$t('placeholder1')" v-positiveInt class="number-input">
</div> </div>
</div> </div>
<div class="change-img pointer"> <div class="change-img pointer" @click="exchange">
<img src="@/assets/images/exchange.png" alt=""> <img src="@/assets/images/exchange.png" alt="">
<div @click="exchange"></div>
</div> </div>
<div class="redemption-name">{{exchangeItem.name}}</div>
<div class="redemption-window exchange"> <div class="redemption-window exchange">
<div class="redemption-tit"> <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)"> <div class="token-name pointer" @click="changeToken('exchangeItem', exchangeItem.chainName)">
<img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt=""> <img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
<span>{{exchangeItem.coinData.name}}</span> <span>{{exchangeItem.coinData.name}}</span>
</div> </div>
<div class="redemption-over">{{$t('expectedGet')}}</div>
</div>
<div class="redemption-money">
<div class="number">{{obtain}}</div> <div class="number">{{obtain}}</div>
</div> </div>
</div> </div>
...@@ -113,7 +112,7 @@ export default { ...@@ -113,7 +112,7 @@ export default {
return this.$store.getters.walletConnected; return this.$store.getters.walletConnected;
}, },
obtain() { obtain() {
return this.inputValue * 0.997; return this.inputValue * 0.997 || '';
}, },
currentWalletAddressAndChainId() { currentWalletAddressAndChainId() {
return this.currentWalletAddress && this.chainId return this.currentWalletAddress && this.chainId
...@@ -406,98 +405,118 @@ export default { ...@@ -406,98 +405,118 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}
}
.container { .container {
background: #F6F7FB;
.main {
width: 6.86rem;
padding: .87rem .33rem .62rem;
background: #FFF; background: #FFF;
border-radius: .2rem;
position: relative;
}
.cannect-wallet { .cannect-wallet {
margin: 0.47rem 0 0.18rem auto; position: absolute;
width: 2.00rem; right: .33rem;
height: 0.60rem; top: .2rem;
padding: 0 .22rem;
height: 0.5rem;
background: rgba(252, 191, 25, 0.2); background: rgba(252, 191, 25, 0.2);
border-radius: 0.30rem 0rem 0rem 0.30rem; border-radius: .1rem;
font-size: 0.26rem; font-size: 0.24rem;
line-height: 0.60rem;
color: #FCBF19; color: #FCBF19;
text-align: center; text-align: center;
display: flex;
align-items: center;
} }
.redemption-wrap { .redemption-wrap {
position: relative; // flex: 1; position: relative; // flex: 1;
.redemption-name {
font-size: .28rem;
color: #999;
margin-bottom: .2rem;
}
.redemption-window { .redemption-window {
height: 2.2rem; height: 1.5rem;
background: #F7F7F7; background: #F4F5F9;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
border-radius: .1rem;
padding: 0 .3rem .2rem;
.redemption-tit { .redemption-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 0.58rem; align-items: center;
line-height: 0.58rem; height: 0.66rem;
border-bottom: 0.01rem solid #DDDDDD;
.redemption-name {
font-size: 0.3rem;
color: #333333;
font-weight: bold;
}
.redemption-over {
font-size: 0.3rem;
color: #555555;
}
}
.redemption-money {
display: flex;
justify-content: space-between;
margin-top: 0.27rem;
height: 0.46rem;
line-height: 0.46rem;
.token-name { .token-name {
height: 0.46rem; height: 0.46rem;
font-size: 0.3rem; font-size: 0.3rem;
color: #666666; color: #666666;
display: flex; display: flex;
align-items: center;
img { img {
width: 0.46rem; width: 0.27rem;
height: 0.46rem; height: 0.27rem;
margin-right: 0.1rem; margin-right: 0.11rem;
} }
span { span {
display: inline-block; display: inline-block;
line-height: 0.46rem; font-size: .3rem;
font-weight: 500;
color: #333;
}
}
.redemption-over {
font-size: 0.22rem;
font-weight: 300;
color: #999;
} }
} }
.redemption-money {
display: flex;
justify-content: space-between;
height: 0.46rem;
line-height: 0.46rem;
margin-top: .12rem;
input { input {
background-color: #F7F7F7; background-color: rgba(0, 0, 0, 0);
min-width: 4.72rem; width: 100%;
height: 0.46rem; height: 0.46rem;
color: #333; color: #333;
font-size: 0.3rem; font-size: 0.3rem;
text-align: right; @include placeholder {
} // input[placeholder] { color: #CCC;
// color: #CCCCCC; }
// font-size: 0.3rem; }
// text-align: right;
// }
.number { .number {
color: #333333; color: #333333;
font-size: 0.3rem; font-size: 0.3rem;
} }
} }
} }
.hold {
padding: 0.34rem 0.59rem 0 0.48rem;
}
.exchange {
padding: 0.53rem 0.59rem 0 0.48rem;
}
.change-img { .change-img {
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 50%; left: 50%;
right: 50%; right: 50%;
top: 1.83rem; top: 2.14rem;
margin-left: -0.6rem; transform: translate(-50%, 0);
width: 1.2rem; width: .5rem;
height: 1.2rem; height: .5rem;
img { img {
width: 1.2rem; width: 100%;
height: 1.2rem; height: 100%;
} }
div { div {
position: absolute; position: absolute;
...@@ -510,9 +529,6 @@ export default { ...@@ -510,9 +529,6 @@ export default {
} }
} }
.handling-fee { .handling-fee {
padding-left: 0.48rem;
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.26rem; font-size: 0.26rem;
color: #555555; color: #555555;
} }
...@@ -520,8 +536,7 @@ export default { ...@@ -520,8 +536,7 @@ export default {
.convert-btn { .convert-btn {
transform: translate(-50%); transform: translate(-50%);
margin-left: 50%; margin-left: 50%;
margin-top: 2.3rem; margin-top: .25rem;
margin-bottom: 2rem;
width: 6rem; width: 6rem;
height: 0.8rem; height: 0.8rem;
background-color: #FCBF19; background-color: #FCBF19;
...@@ -577,8 +592,8 @@ export default { ...@@ -577,8 +592,8 @@ export default {
color: red; color: red;
font-size: .36rem; font-size: .36rem;
} }
/deep/{ /deep/ {
.loading-bg.van-loading{ .loading-bg.van-loading {
top: 0; top: 0;
left: 0; left: 0;
} }
...@@ -591,10 +606,13 @@ export default { ...@@ -591,10 +606,13 @@ export default {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.banner-top { .banner-top {
height: 3.0rem; height: 3.6rem;
background: url('../../assets/images/bg.png') center no-repeat; background: url('../../assets/images/bg.png') center no-repeat;
background-size: cover; background-size: cover;
} }
.main {
margin: -.74rem auto 0;
}
} }
} }
...@@ -604,16 +622,17 @@ export default { ...@@ -604,16 +622,17 @@ export default {
height: 100%; height: 100%;
display: block; display: block;
.banner-top { .banner-top {
height: 22vw; height: 28vw;
background: url('../../assets/images/bgPc.png') center no-repeat; background: url('../../assets/images/bgPc.png') center no-repeat;
background-size: cover; background-size: cover;
} }
.main { .main {
width: 10rem; margin: -1.59rem auto 0;
margin: 0 auto; padding-top: .4rem;
padding-bottom: 1rem; .cannect-wallet{
display: none;
}
} }
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论