Dread 4 years ago
parent
commit
012bb590d3
  1. 529
      pages/menu/collection/index.css
  2. 2
      pages/menu/collection/index.vue
  3. 80
      pages/menu/market/index.css
  4. 11
      pages/menu/market/index.vue
  5. 13
      pages/menu/token/btc/index.css
  6. 2
      pages/menu/token/btc/index.vue
  7. 29
      pages/menu/transction/detail/index.css
  8. 7
      pages/menu/transction/detail/index.vue
  9. 12
      pages/menu/wallet/index.css
  10. 2
      pages/menu/wallet/index.vue

529
pages/menu/collection/index.css

@ -1,18 +1,30 @@
.maintoP{ .maintoP {
margin-top: 100rpx; margin-top: 80rpx;
position: relative; position: relative;
} }
.big_con{
.big_con {
padding: 0 32rpx; padding: 0 32rpx;
padding-bottom: 300rpx; padding-bottom: 180rpx;
} }
.aaa{
.head {
background: #FAFAFA !important; background: #FAFAFA !important;
} position: sticky;
page { /* #ifdef H5 */
background: #FAFAFA; top: 80rpx;
} /* #endif */
.main{ /* #ifndef H5 */
top: 0;
/* #endif */
z-index: 999;
}
page {
background: #FAFAFA;
}
.main {
padding: 0 24rpx; padding: 0 24rpx;
margin-top: 50rpx; margin-top: 50rpx;
background: #fff; background: #fff;
@ -21,47 +33,56 @@
max-height: 1200rpx; max-height: 1200rpx;
overflow-y: scroll; overflow-y: scroll;
} }
.title{
.title {
height: 150rpx; height: 150rpx;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 32rpx; font-size: 32rpx;
border-bottom: 2rpx solid #F6F8FD; border-bottom: 2rpx solid #F6F8FD;
} }
.flex{
.flex {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.flex2{
.flex2 {
display: flex; display: flex;
} }
.main_con .item .left .img{ .main_con .item .left .img {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
border-radius: 100rpx; border-radius: 100rpx;
} }
.main_con .item{
.main_con .item {
height: 180rpx; height: 180rpx;
border-bottom: 2rpx solid #F6F8FD; border-bottom: 2rpx solid #F6F8FD;
border-radius: 24rpx; border-radius: 24rpx;
} }
.main_con .item .img{
.main_con .item .img {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
.main_con .textcon{
.main_con .textcon {
margin-left: 20rpx; margin-left: 20rpx;
} }
.main_con .textcon .text1{
.main_con .textcon .text1 {
font-size: 30rpx; font-size: 30rpx;
} }
.main_con .textcon .text2{
.main_con .textcon .text2 {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} }
.letImg{
.letImg {
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
} }
@ -69,220 +90,254 @@
.bottom_con{ .bottom_con {
position: fixed; position: fixed;
bottom:0rpx; bottom: 0rpx;
z-index: 9999; z-index: 9999;
} }
.bottom_con{
width: 100%; .bottom_con {
background-color:#F7F8FA; width: 100%;
padding: 0 24rpx; background-color: #F7F8FA;
border-radius: 16rpx 16rpx 0 0; padding: 0 24rpx;
padding-bottom: 40rpx; border-radius: 16rpx 16rpx 0 0;
} padding-bottom: 40rpx;
.title_con{ }
padding: 30rpx 0;
text-align: center; .title_con {
color: #7A7A81; padding: 30rpx 0;
} text-align: center;
.money_con{ color: #7A7A81;
background-color: #fff; }
padding: 70rpx 30rpx;
border-radius: 16rpx 16rpx 0 0; .money_con {
} background-color: #fff;
.money_con .money{ padding: 70rpx 30rpx;
display: flex; border-radius: 16rpx 16rpx 0 0;
justify-content: center; }
align-items: center;
} .money_con .money {
.money_con .money .tex1{ display: flex;
font-size: 64rpx; justify-content: center;
margin-right: 10rpx; align-items: center;
} }
.money_con .img{
width: 48rpx; .money_con .money .tex1 {
height: 48rpx; font-size: 64rpx;
position: absolute; margin-right: 10rpx;
left: 12rpx; }
top: 24rpx;
} .money_con .img {
.money_con .img2{ width: 48rpx;
width: 28rpx; height: 48rpx;
height: 28rpx; position: absolute;
position: absolute; left: 12rpx;
left: 32rpx; top: 24rpx;
top: 32rpx; }
}
.money_con .money .tex2{ .money_con .img2 {
font-size: 42rpx; width: 28rpx;
} height: 28rpx;
.money_con .money .text{ position: absolute;
left: 32rpx;
} top: 32rpx;
.info_con{ }
margin-top: 40rpx;
} .money_con .money .tex2 {
.info_con .item{ font-size: 42rpx;
display: flex; }
padding-bottom: 24rpx;
border-bottom: 2rpx solid #DDDDDD; .money_con .money .text {}
background-color: #6747D1;
} .info_con {
.info_con .item:last-child{ margin-top: 40rpx;
border-bottom: none; }
}
.info_con .item .text1{ .info_con .item {
color: #9B9C9E; display: flex;
margin-right: 50rpx; padding-bottom: 24rpx;
} border-bottom: 2rpx solid #DDDDDD;
.info_con .item .text2{ background-color: #6747D1;
word-break: break-word; }
}
.info_con .item:last-child {
.bottom_con .btn{ border-bottom: none;
line-height: 96rpx; }
background-color: #5B53FF;
text-align: center; .info_con .item .text1 {
color: #fff; color: #9B9C9E;
border-radius: 32rpx; margin-right: 50rpx;
margin-top: 50rpx; }
}
.money_con2{ .info_con .item .text2 {
height: 400rpx; word-break: break-word;
} }
.btn2{
line-height: 96rpx; .bottom_con .btn {
background-color: #E9ECF5; line-height: 96rpx;
text-align: center; background-color: #5B53FF;
color: #fff; text-align: center;
border-radius: 32rpx; color: #fff;
margin-top: 50rpx; border-radius: 32rpx;
} margin-top: 50rpx;
.btncolor{ }
background-color: #5B53FF;
} .money_con2 {
.btncolor2{ height: 400rpx;
background-color: #E9ECF5; }
}
.btn2 {
.bot_con .item{ line-height: 96rpx;
width: 575rpx; background-color: #E9ECF5;
height: 164rpx; text-align: center;
background-image: linear-gradient(to right, #FF9913, #FFB60C); color: #fff;
padding: 44rpx 0; border-radius: 32rpx;
padding-left: 25rpx; margin-top: 50rpx;
padding-right: 32rpx; }
border-radius: 24rpx;
margin-bottom: 28rpx; .btncolor {
position: relative; background-color: #5B53FF;
box-shadow: 0 8rpx 8rpx 8rpx #EFF1F3; }
}
.btncolor2 {
.flexx{ background-color: #E9ECF5;
display: flex; }
justify-content: space-between;
} .bot_con .item {
.bot_con .item .left .img1{ width: 575rpx;
width: 84rpx; height: 164rpx;
height: 84rpx; background-image: linear-gradient(to right, #FF9913, #FFB60C);
margin-right: 20rpx; padding: 44rpx 0;
} padding-left: 25rpx;
.bot_con .item .left .textcon .text1{ padding-right: 32rpx;
font-size: 36rpx; border-radius: 24rpx;
color: #fff; margin-bottom: 28rpx;
} position: relative;
.bot_con .item .left .textcon{ box-shadow: 0 8rpx 8rpx 8rpx #EFF1F3;
width: auto; }
flex: 1;
} .flexx {
.bot_con .item .left .textcon .text2{ display: flex;
font-size: 28rpx; justify-content: space-between;
color: rgba(255,255,255,.5); }
word-break: break-all;
.bot_con .item .left .img1 {
} width: 84rpx;
.bot_con .item .rig{ height: 84rpx;
text-align: right; margin-right: 20rpx;
color: #fff; }
font-size: 34rpx;
} .bot_con .item .left .textcon .text1 {
font-size: 36rpx;
.bot_con .item .rig .text1{ color: #fff;
font-size: 36rpx; }
}
.bot_con .item .rig .text2{ .bot_con .item .left .textcon {
width: auto;
font-size: 28rpx; flex: 1;
color: #B0BBD5; }
}
.opc{ .bot_con .item .left .textcon .text2 {
opacity: .4; font-size: 28rpx;
} color: rgba(255, 255, 255, .5);
.rimg{ word-break: break-all;
width: 28rpx;
height: 28rpx; }
}
.bot_con .item .rig {
.letConimg{ text-align: right;
display: block; color: #fff;
width: 84rpx; font-size: 34rpx;
height: 84rpx; }
margin-bottom: 68rpx;
} .bot_con .item .rig .text1 {
.pur{ font-size: 36rpx;
background-image: linear-gradient(to right, #6846D2, #887BFE) !important; }
}
.red{ .bot_con .item .rig .text2 {
background-image: linear-gradient(to right, #B4142C, #F04850) !important;
} font-size: 28rpx;
.green{ color: #B0BBD5;
background-image: linear-gradient(to right, #13BB9C, #23D7AF) !important; }
}
.opc {
.gou{ opacity: .4;
width: 80rpx; }
height: 74rpx;
background-size: cover; .rimg {
position: absolute; width: 28rpx;
bottom: 0; height: 28rpx;
right: 0; }
}
.gou .img{ .letConimg {
position: absolute; display: block;
left: 75%; width: 84rpx;
top: 65%; height: 84rpx;
transform: translate(-50%,-50%); margin-bottom: 68rpx;
width: 28rpx; }
height: 28rpx;
} .pur {
background-image: linear-gradient(to right, #6846D2, #887BFE) !important;
.bl{ }
display: block !important;
} .red {
.dis{ background-image: linear-gradient(to right, #B4142C, #F04850) !important;
display: none !important; }
}
.ethimg1{ .green {
width: 80rpx; background-image: linear-gradient(to right, #13BB9C, #23D7AF) !important;
height: 80rpx; }
margin-right: 30rpx;
} .gou {
.ethimg2{ width: 80rpx;
width: 32rpx; height: 74rpx;
height: 32rpx; background-size: cover;
position: absolute; position: absolute;
top: 20rpx; bottom: 0;
left: 20rpx; right: 0;
} }
.info_con .item{
border-radius: 24rpx; .gou .img {
padding: 24rpx; position: absolute;
margin-bottom: 50rpx; left: 75%;
} top: 65%;
.text111{ transform: translate(-50%, -50%);
color: #fff !important; width: 28rpx;
} height: 28rpx;
.textcon .text2{ }
color: #fff;
} .bl {
display: block !important;
}
.dis {
display: none !important;
}
.ethimg1 {
width: 80rpx;
height: 80rpx;
margin-right: 30rpx;
}
.ethimg2 {
width: 32rpx;
height: 32rpx;
position: absolute;
top: 20rpx;
left: 20rpx;
}
.info_con .item {
border-radius: 24rpx;
padding: 24rpx;
margin-bottom: 50rpx;
}
.text111 {
color: #fff !important;
}
.textcon .text2 {
color: #fff;
}

2
pages/menu/collection/index.vue

@ -1,6 +1,6 @@
<template> <template>
<view class="maintoP"> <view class="maintoP">
<navigation :showBack="false" :bgnum="true" class="aaa"> <navigation :showBack="false" :bgnum="true" class="head">
NFT collection NFT collection
</navigation> </navigation>
<view class="big_con"> <view class="big_con">

80
pages/menu/market/index.css

@ -1,80 +1,106 @@
.main_con{ .main_con {
padding: 0 24rpx; padding: 0 24rpx;
padding-bottom: 250rpx; padding-bottom: 250rpx;
margin-top: 60rpx; margin-top: 80rpx;
position: relative;
} }
.main_con .title{
.head {
background: #FAFAFA !important;
position: sticky;
/* #ifdef H5 */
top: 80rpx;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.main_con .title {
padding-top: 36rpx; padding-top: 36rpx;
padding-bottom: 28rpx; padding-bottom: 28rpx;
font-size: 36rpx; font-size: 36rpx;
font-weight: 500; font-weight: 500;
color: #0F1828; color: #0F1828;
} }
.main{
.main {
background-color: #fff; background-color: #fff;
border-radius: 15rpx; border-radius: 15rpx;
padding: 0 24rpx; padding: 0 24rpx;
margin-top: 50rpx;
box-shadow: 0 20rpx 20rpx 20rpx #ECEFF2; box-shadow: 0 20rpx 20rpx 20rpx #ECEFF2;
} }
.flex{
.flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.title_item{ .title_item {
padding-top: 32rpx; padding-top: 32rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-bottom: 2rpx solid #F4F7FE; border-bottom: 2rpx solid #F4F7FE;
color: #7D87A6; color: #7D87A6;
font-size: 26rpx; font-size: 26rpx;
} }
.title_item .imgcon{
.title_item .imgcon {}
}
.green{ .green {
background-color: #6FCF97; background-color: #6FCF97;
} }
.red{
.red {
background-color: #EB5757; background-color: #EB5757;
} }
.main .item{
.main .item {
border-bottom: 2rpx solid #F4F7FE; border-bottom: 2rpx solid #F4F7FE;
padding-top: 40rpx; padding: 34rpx 0;
padding-bottom: 32rpx; line-height: 58rpx;
} }
.main .item .text2{
.main .item .text2 {
color: #0F1828; color: #0F1828;
font-size: 30rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
text-align: center;
} }
.main .item .text2 .t1{
.main .item .text2 .t1 {
color: #7D87A6; color: #7D87A6;
font-size: 28rpx; font-size: 28rpx;
} }
.main .item .btn{
.main .item .btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 8rpx; border-radius: 8rpx;
color: #fff; color: #fff;
font-size: 30rpx; font-size: 24rpx;
height: 80rpx; height: 58rpx;
width: 176rpx; width: 160rpx;
} }
.main .item .btn .img1{ .main .item .btn .img1 {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
.Colorimg{
.Colorimg {
display: block; display: block;
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
} }
.title_item .imgcon{
.title_item .imgcon {
margin-left: 14rpx; margin-left: 14rpx;
} }
.scroll{
max-height: 1200rpx; .scroll {
max-height: 1160rpx;
overflow: scroll; overflow: scroll;
} }

11
pages/menu/market/index.vue

@ -1,8 +1,9 @@
<template> <template>
<view class="main_con"> <view class="main_con">
<view class="title">
<navigation :showBack="false" :bgnum="true" class="head">
Market Market
</view> </navigation>
<view class="main"> <view class="main">
<view class="title_item flex"> <view class="title_item flex">
<view class="text1">Tranding Pairs</view> <view class="text1">Tranding Pairs</view>
@ -19,11 +20,9 @@
</view> </view>
<view class="text2"> <view class="text2">
<view class=""> <view class="">
{{item.current_price_usd}} {{item.current_price_usd}}/{{item.current_price}}
</view>
<view class="t1">
{{item.current_price}}
</view> </view>
</view> </view>
<view class="btn" :class="item.change_percent>0?'red':'green'"> <view class="btn" :class="item.change_percent>0?'red':'green'">
<image src="../../../static/tongyonh/arrow-down-left1.png" mode="aspectFit" class="img1" <image src="../../../static/tongyonh/arrow-down-left1.png" mode="aspectFit" class="img1"

13
pages/menu/token/btc/index.css

@ -1,10 +1,21 @@
.renYou { .renYou {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
position: absolute; position: absolute;
right: 30rpx; right: 30rpx;
} }
.head {
background: #FAFAFA !important;
position: sticky;
/* #ifdef H5 */
top: 80rpx;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
z-index: 999;
}
.big_title { .big_title {
font-size: 36rpx; font-size: 36rpx;
} }

2
pages/menu/token/btc/index.vue

@ -1,6 +1,6 @@
<template> <template>
<view class=""> <view class="">
<navigation :showBack="true" :bgnum="true"> <navigation :showBack="true" :bgnum="true" class="head">
<text class="big_title"> <text class="big_title">
{{coin.name}} {{coin.name}}
</text> </text>

29
pages/menu/transction/detail/index.css

@ -1,21 +1,24 @@
page{
height:100%;
}
.main{ .main{
padding: 0 26rpx; padding: 0 30rpx;
padding-bottom: 100rpx; /* padding-bottom: 100rpx; */
} }
.main_con{ .main_con{
background-color: #fff; background-color: #fff;
border-radius: 26rpx; border-radius: 26rpx;
padding-left: 26rpx; padding-left: 40rpx;
padding-right: 40rpx; padding-right: 40rpx;
margin-top: 98rpx; margin-top: 100rpx;
box-shadow: 0 10rpx 30rpx 10rpx #EAEDF0; box-shadow: 0 10rpx 30rpx 10rpx #EAEDF0;
position: relative; position: relative;
} }
.main_con .title{ .main_con .title{
text-align: center; text-align: center;
color: #6AD6A8; color: #6AD6A8;
font-size: 36rpx; font-size: 32rpx;
padding-top: 100rpx; padding-top: 60rpx;
} }
.flex{ .flex{
display: flex; display: flex;
@ -28,7 +31,7 @@
border-bottom: 2rpx solid #F6F8FD; border-bottom: 2rpx solid #F6F8FD;
} }
.main_con .title_con .text1{ .main_con .title_con .text1{
font-size: 40rpx; font-size: 28rpx;
font-size: 500; font-size: 500;
} }
.main_con .item{ .main_con .item{
@ -40,7 +43,7 @@
color: #7D87A6; color: #7D87A6;
} }
.main_con .item .text2{ .main_con .item .text2{
font-size: 32rpx; font-size: 26rpx;
margin-top: 8rpx; margin-top: 8rpx;
word-wrap: break-word; word-wrap: break-word;
} }
@ -59,8 +62,8 @@
padding: 60rpx 0 !important; padding: 60rpx 0 !important;
} }
.yuan{ .yuan{
width: 114rpx; width: 90rpx;
height: 114rpx; height: 90rpx;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
@ -69,8 +72,8 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.yuan .img1{ .yuan .img1{
width: 82rpx; width: 70rpx;
height: 82rpx; height: 70rpx;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -108,6 +111,6 @@ width: 100%;
margin-top: 30rpx; margin-top: 30rpx;
} }
.scroll{ .scroll{
max-height: 1000rpx;
overflow-y: scroll; overflow-y: scroll;
} }

7
pages/menu/transction/detail/index.vue

@ -24,7 +24,7 @@
{{info.value}} {{info.network}} {{info.value}} {{info.network}}
</view> </view>
</view> </view>
<view class="item"> <view class="title_con flex">
<view class="text1"> <view class="text1">
Time Time
</view> </view>
@ -32,14 +32,15 @@
{{info.time}} {{info.time}}
</view> </view>
</view> </view>
<view class="item"> <view class="title_con flex">
<view class="text1"> <view class="text2">
Tx Fee Tx Fee
</view> </view>
<view class="text2"> <view class="text2">
{{info.fee}} {{info.network}} {{info.fee}} {{info.network}}
</view> </view>
</view> </view>
<view class="item"> <view class="item">
<view class="text1"> <view class="text1">
Transaction ID Transaction ID

12
pages/menu/wallet/index.css

@ -1,4 +1,14 @@
.head{
background: #FAFAFA !important;
position: sticky;
/* #ifdef H5 */
top: 80rpx;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
z-index: 999;
}
.renYou{ .renYou{
width: 36rpx; width: 36rpx;
height: 20rpx; height: 20rpx;

2
pages/menu/wallet/index.vue

@ -1,6 +1,6 @@
<template> <template>
<view class=""> <view class="">
<navigation :showBack="false" :bgnum="true"> <navigation :showBack="false" :bgnum="true" class="head">
<image src="../../../static/tongyonh/san.png" mode="aspectFit" class="renYou" slot="logo" <image src="../../../static/tongyonh/san.png" mode="aspectFit" class="renYou" slot="logo"
@click="goCwallet()"></image> @click="goCwallet()"></image>
<image src="../../../static/tongyonh/erwei.png" mode="aspectFit" class="renYou2" slot="logo" <image src="../../../static/tongyonh/erwei.png" mode="aspectFit" class="renYou2" slot="logo"

Loading…
Cancel
Save