Dread 4 years ago
parent
commit
012bb590d3
  1. 275
      pages/menu/collection/index.css
  2. 2
      pages/menu/collection/index.vue
  3. 76
      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

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

76
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