Skip to content

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

调整 ui

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