[liang]
3 years ago
51 changed files with 1890 additions and 62 deletions
@ -0,0 +1,16 @@ |
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
|||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 |
|||
"version": "0.0", |
|||
"configurations": [{ |
|||
"app-plus" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"default" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"type" : "uniCloud" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<view class="KeyValueRow"> |
|||
<u--text class="keyName" :text="keyName" :mode="mode" :lines="lines" :color='leftColor' :size="size"> |
|||
</u--text> |
|||
<u--text class="value" :text="value" :mode="mode" :lines="lines" :color='rightColor' :size="size"> |
|||
</u--text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'KeyValueRow', |
|||
props: { |
|||
keyName: { |
|||
type: String | Number, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
value: { |
|||
type: String | Number, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
leftColor: { |
|||
type: String | Number, |
|||
default() { |
|||
return '#A1A0A8' |
|||
} |
|||
}, |
|||
rightColor: { |
|||
type: String | Number, |
|||
default() { |
|||
return '#fff' |
|||
} |
|||
}, |
|||
size: { |
|||
type: String | Number, |
|||
default() { |
|||
return '28rpx' |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* date 日期格式化 , name姓名脱敏 张*三, price 显示金额 |
|||
*/ |
|||
mode: { |
|||
type: String, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
/** |
|||
* 超出隐藏 |
|||
*/ |
|||
lines: { |
|||
type: String | Number, |
|||
default() { |
|||
return '1' |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.KeyValueRow { |
|||
box-sizing: border-box; |
|||
margin-bottom: 10rpx; |
|||
position: relative; |
|||
|
|||
.keyName { |
|||
height: 100%; |
|||
width: auto; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.value { |
|||
position: absolute; |
|||
right: 0; |
|||
height: 100%; |
|||
width: auto; |
|||
display: inline-block; |
|||
text-align: right; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<view class="cardHeader"> |
|||
<view class="icon"> |
|||
<u-icon :name="iconName" size="40rpx" width="40rpx"></u-icon> |
|||
</view> |
|||
<view class="title">{{ title }}</view> |
|||
<view class="button" :style="{ |
|||
textAlign: hasBtn ? 'center' : 'right', |
|||
backgroundColor: hasBtn ? btnColor : '#211F32', |
|||
paddingRight: hasBtn ? 0 : '12rpx', |
|||
color: fontColor, |
|||
}">{{ rightName }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'cardHeader', |
|||
props: { |
|||
iconName: { |
|||
type: String, |
|||
default() { |
|||
return '@/static/maskets/bye.png' |
|||
} |
|||
}, |
|||
title: { |
|||
type: String | Number, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
rightName: { |
|||
type: String | Number, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
fontColor: { |
|||
type: String | Boolean, |
|||
default() { |
|||
return '#15141F' |
|||
} |
|||
}, |
|||
hasBtn: { |
|||
type: Boolean, |
|||
default() { |
|||
return false |
|||
} |
|||
}, |
|||
btnColor: { |
|||
type: String | Number, |
|||
default() { |
|||
return '#211F32' |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
leftColor: '#A1A0A8', |
|||
rightColor: '#fff', |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.cardHeader { |
|||
overflow: hidden; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
height: 104rpx; |
|||
border-bottom: 2rpx solid #323045; |
|||
padding: 20rpx; |
|||
|
|||
.icon { |
|||
vertical-align: top; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: #323045; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx; |
|||
} |
|||
|
|||
.title { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.button { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
display: inline-block; |
|||
width: 202rpx; |
|||
height: 64rpx; |
|||
border-radius: 16rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
color: #15141F; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,419 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation :bgTransparent=true>{{ i18n.CharityDetails }}</navigation> |
|||
<view class="body"> |
|||
<view class="titleBody"> |
|||
<!-- 海报 --> |
|||
<u--image class="img" :showLoading="true" src="../../static/charity/Rectangle 2.png" width="750rpx" |
|||
height="762rpx"></u--image> |
|||
<!-- 文章标题 --> |
|||
<view class="title">New Balance Raff Simons Bright </view> |
|||
</view> |
|||
|
|||
<view class="contentBody"> |
|||
<view class="about">{{ i18n.About }}</view> |
|||
<!-- 文字内容 --> |
|||
<view class="content">Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be |
|||
posted |
|||
and cannot be returned |
|||
This address is your latest deposit address. When the system receives deposit, it will be |
|||
automatically |
|||
credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it |
|||
reaches 10 network confirmations, your USDT will be automatically deposit into the account。 |
|||
Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot |
|||
be |
|||
returned |
|||
This address is your latest deposit address. When the system receives deposit, it will be |
|||
automatically |
|||
credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it |
|||
reaches 10 network confirmations, your USDT will be automatically deposit into the account。Minimum |
|||
deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot be |
|||
returned |
|||
This address is your latest deposit address. When the </view> |
|||
<!-- 捐赠详情 --> |
|||
<view class="Participants"> |
|||
<view class="title">{{ i18n.Participants }}</view> |
|||
<!-- 进度条 --> |
|||
<u-line-progress class="progressbar" :showText="false" :percentage="50" activeColor="#00E8A2" |
|||
height="32rpx"> |
|||
</u-line-progress> |
|||
<!-- 百分比 --> |
|||
<view class="progress">50%</view> |
|||
<!-- 捐赠用户头像 --> |
|||
<view class="userIconList"> |
|||
<u--image v-for="(item, index) in 10" :key="index" class="userIcon" :showLoading="true" |
|||
src="../../static/charity/Ellipse 502.png" width="64rpx" height="64rpx"></u--image> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- 按钮 --> |
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="DonatePopupShow = true">{{ |
|||
i18n.DonateNow |
|||
}} |
|||
</u-button> |
|||
|
|||
<!-- DonateNow按钮通知弹出层 --> |
|||
<u-popup class="DonatePopup" :show="DonatePopupShow" round="40rpx" mode="bottom" |
|||
@close="DonatePopupShow = false" @open="DonatePopupShow = true" bgColor="#211F32"> |
|||
<view class="content"> |
|||
<view class="close" @click="DonatePopupShow = false"></view> |
|||
<u--form class="form" :model="coinInfo" :rules="rules" ref="form1" errorType="toast"> |
|||
<!-- coin选择框 --> |
|||
<u-form-item class="input-item" prop="verificationCode" ref="item1"> |
|||
<u-input class="input" v-model="coinInfo.verificationCode" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.PleaseChooseCoin"> |
|||
</u-input> |
|||
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT |
|||
</view> |
|||
</u-form-item> |
|||
<view class="Available">{{ i18n.AvailableBlance }}:0USDT</view> |
|||
<!-- 数量 --> |
|||
<u-form-item class="input-item" prop="number" ref="item1"> |
|||
<u-input class="input" v-model="coinInfo.number" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.Quantity"> |
|||
</u-input> |
|||
</u-form-item> |
|||
<!-- 密码 --> |
|||
<u-form-item class="input-item" prop="password" ref="item1"> |
|||
<u-input class="input" v-model="coinInfo.password" color="#fff" fontSize="32rpx" |
|||
border="none" :placeholder="i18n.WithdrawalPassword"> |
|||
</u-input> |
|||
</u-form-item> |
|||
|
|||
</u--form> |
|||
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="DonatePopupDisabled" |
|||
@click="DonatePopupShow = false">{{ i18n.DonateNow }} |
|||
</u-button> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
<!-- USDT按钮通知弹出层 --> |
|||
|
|||
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" |
|||
@close="USDTPopupShow = false" @open="USDTPopupShow = true" bgColor="#211F32"> |
|||
<view class="content"> |
|||
<view class="close" @click="USDTPopupShow = false"></view> |
|||
<scroll-view scroll-y="true" style="height: 580rpx;" scroll-with-animation="true" |
|||
@touchmove.stop> |
|||
<radio-group class="radioGroup" @change="radioChange" v-model="radioValue"> |
|||
<label class="checkBox" v-for="(item, index) in 40" :key="index"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/bye.png" size="52rpx" width="52rpx"></u-icon> |
|||
</view> |
|||
<view class="iconName"> |
|||
<view class="top">USDT</view> |
|||
<view class="bottom">BTC</view> |
|||
</view> |
|||
|
|||
<radio color="#00E8A2" shape="square"></radio> |
|||
</label> |
|||
|
|||
</radio-group> |
|||
</scroll-view> |
|||
|
|||
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK |
|||
</u-button> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import UButton from '../../uview-ui/components/u-button/u-button' |
|||
export default { |
|||
name: "charityDetails", |
|||
data() { |
|||
return { |
|||
DonatePopupShow: false, |
|||
USDTPopupShow: false, |
|||
DonatePopupDisabled: true, |
|||
coinInfo: {}, |
|||
rules: {}, |
|||
radioValue: '', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("charity"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
// console.log(this.$t('login.emailInputMessage')); |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
radioChange(e) { |
|||
// console.log(e); |
|||
} |
|||
}, |
|||
components: { UButton } |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.body { |
|||
overflow: hidden; |
|||
|
|||
.titleBody { |
|||
position: relative; |
|||
height: 762rpx; |
|||
|
|||
.title { |
|||
position: absolute; |
|||
bottom: 48rpx; |
|||
font-size: 40rpx; |
|||
font-weight: 800; |
|||
z-index: 20; |
|||
margin: 0 48rpx; |
|||
} |
|||
} |
|||
|
|||
.contentBody { |
|||
padding: 0 48rpx; |
|||
|
|||
.about { |
|||
margin: 32rpx 0; |
|||
font-size: 32rpx; |
|||
color: #A2A0A8; |
|||
} |
|||
|
|||
.content { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.Participants { |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
padding: 32rpx; |
|||
|
|||
.title { |
|||
font-size: 28rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
// .progressBody{ |
|||
.progressbar { |
|||
vertical-align: top; |
|||
display: inline-block; |
|||
width: 426rpx; |
|||
margin: 8rpx 0; |
|||
} |
|||
|
|||
.progress { |
|||
margin-left: 20rpx; |
|||
display: inline-block; |
|||
width: 144rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
|
|||
.userIconList { |
|||
height: 104rpx; |
|||
|
|||
.userIcon { |
|||
overflow: hidden; |
|||
border-radius: 64rpx; |
|||
display: inline-block; |
|||
margin-left: -20rpx; |
|||
margin-top: 34rpx; |
|||
|
|||
&:first-child { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.button { |
|||
margin-top: 64rpx; |
|||
margin-bottom: 120rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 32rpx; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
.DonatePopup { |
|||
.content { |
|||
height: 844rpx; |
|||
|
|||
/deep/.u-button--disabled { |
|||
background-color: #A1A0A8 !important; |
|||
border-color: #A1A0A8 !important; |
|||
} |
|||
|
|||
.close { |
|||
margin: 48rpx 346rpx; |
|||
width: 58rpx; |
|||
height: 20rpx; |
|||
background-image: url(../../static/charity/Turn.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 58rpx 20rpx; |
|||
} |
|||
|
|||
.form { |
|||
font-size: 32rpx; |
|||
margin: 0 32rpx; |
|||
|
|||
.Available { |
|||
height: 44rpx; |
|||
margin: 32rpx 0; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.input-item { |
|||
overflow: hidden; |
|||
height: 124rpx; |
|||
line-height: 124rpx; |
|||
background: #323045; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
padding: 0 40rpx; |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
height: 124rpx; |
|||
} |
|||
|
|||
.selectCoinBtn { |
|||
position: relative; |
|||
width: 150rpx; |
|||
height: 54rpx; |
|||
right: 0rpx; |
|||
line-height: 56rpx; |
|||
font-size: 36rpx; |
|||
padding: 0; |
|||
color: #fff; |
|||
|
|||
&::after { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/charity/ic_ma_arrow_down.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
right: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
width: 654rpx; |
|||
margin: 0 48rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.USDTPopup { |
|||
.content { |
|||
height: 844rpx; |
|||
|
|||
.close { |
|||
margin: 48rpx 346rpx; |
|||
width: 58rpx; |
|||
height: 20rpx; |
|||
background-image: url(../../static/charity/Turn.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 58rpx 20rpx; |
|||
} |
|||
|
|||
.radioGroup { |
|||
height: 580rpx; |
|||
|
|||
.checkBox { |
|||
height: 84rpx; |
|||
width: 670rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 40rpx 32rpx; |
|||
|
|||
.icon { |
|||
width: 84rpx; |
|||
height: 84rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
background: #323045; |
|||
padding: 16rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.iconName { |
|||
width: 520rpx; |
|||
|
|||
.top { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
.bottom { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/deep/.uni-radio-input { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 16rpx; |
|||
background: #323045; |
|||
} |
|||
|
|||
/deep/.uni-radio-input-checked::before { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.button { |
|||
width: 654rpx; |
|||
margin: 40rpx 48rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- 列表 --> |
|||
<view class="charityList"> |
|||
<view class="item" v-for="(item, index) in 10" :key="index" @click="goto(index)"> |
|||
<u--image class="img" :showLoading="true" src="../../static/charity/Rectangle 2.png" width="318rpx" |
|||
height="230rpx"></u--image> |
|||
<view class="title">New Balance Raff Simons Bright Bright </view> |
|||
<view class="target">Target: $1309348</view> |
|||
<u-line-progress class="progressbar" :showText="(index * 10) > 18" :percentage="index * 10" |
|||
activeColor="#00E8A2" height="22rpx"> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="3"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'charity', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('markets') |
|||
} |
|||
}, |
|||
methods: { |
|||
goto(index) { |
|||
uni.navigateTo({ |
|||
url: `/pages/charity/details?id=${index}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.charityList { |
|||
// width: 318rpx; |
|||
margin: 120rpx 38rpx 0 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
position: relative; |
|||
width: 318rpx; |
|||
height: 430rpx; |
|||
box-sizing: border-box; |
|||
background-color: #323045; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 32rpx; |
|||
|
|||
/deep/.img { |
|||
overflow: hidden; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.title { |
|||
height: 72rpx; |
|||
line-height: 35rpx; |
|||
font-size: 32rpx; |
|||
margin: 24rpx 20rpx 12rpx; |
|||
// 超出字符省略成... |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; //兼容 |
|||
word-wrap: break-word; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 2; //显示行数 |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.target { |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
color: $mainColor; |
|||
font-size: 26rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.progressbar { |
|||
margin: 12rpx 20rpx 0; |
|||
|
|||
/deep/.u-line-progress__text { |
|||
color: #000; |
|||
font-size: 16rpx; |
|||
transform: scale(0.66) // 字体超过12px以下的需要缩放 8/12 =0.666 |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<view class="nav-head"> |
|||
<view class="left">{{ i18n.TrandingPair }}</view> |
|||
<view class="middle">{{ i18n.LatestPrice }}</view> |
|||
<view class="right">{{ i18n.RiseAndfall }}</view> |
|||
</view> |
|||
<!-- 列表 --> |
|||
<view class="coinList"> |
|||
<view class="coin" v-for="(item, index) in 20" :key="index"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/bye.png" size="40rpx" width="40rpx"></u-icon> |
|||
</view> |
|||
<view class="name">BTC/USDT</view> |
|||
<view class="price">{{ 5145 * index * index * index }}</view> |
|||
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> |
|||
</view> |
|||
</view> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="2"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'markets', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('markets') |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.nav-head { |
|||
overflow: hidden; |
|||
position: fixed; |
|||
top: 0rpx; |
|||
height: 112rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
width: 750rpx; |
|||
z-index: 8; |
|||
background-color: #15141F; |
|||
border-bottom: 4rpx solid #323045; |
|||
padding-top: 88rpx; |
|||
|
|||
} |
|||
|
|||
.coinList { |
|||
margin: 212rpx 32rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.coin { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 64rpx; |
|||
padding: 12rpx 0; |
|||
|
|||
|
|||
.icon { |
|||
vertical-align: top; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx; |
|||
} |
|||
|
|||
.name { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
color: #A1A0A8; |
|||
text-align: center; |
|||
} |
|||
|
|||
.priceChange { |
|||
position: absolute; |
|||
right: 0; |
|||
display: inline-block; |
|||
width: 164rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 24rpx; |
|||
text-align: right; |
|||
padding-right: 16rpx; |
|||
box-sizing: border-box; |
|||
|
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_arrow_up.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 18rpx; |
|||
left: 16rpx; |
|||
} |
|||
|
|||
|
|||
&.down { |
|||
background-color: $assistRed; |
|||
|
|||
&::before { |
|||
background-image: url(../../static/maskets/ic_arrow_down.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<view class="contentBody"> |
|||
<view class="userInfo"> |
|||
<u-image class="headImg" src="../../static/me/Ellipse 85.png" width="160rpx" height="160rpx" |
|||
radius="160rpx"></u-image> |
|||
<view class="idAndAccount"> |
|||
<view class="id">ID:984934</view> |
|||
<view class="account">{{i18n.account}}:348798457498579</view> |
|||
</view> |
|||
</view> |
|||
<!-- 三个按钮 --> |
|||
<view class="btnDiv"> |
|||
<view class="item"> |
|||
<u--image class="img" :showLoading="true" src="../../static/home/img_recharge.png" width="144rpx" |
|||
height="144rpx"></u--image> |
|||
<view class="text">{{ i18n.Recharge }}</view> |
|||
</view> |
|||
<view class="item"> |
|||
<u--image class="img" :showLoading="true" src="../../static/home/img_Mine.png" width="144rpx" |
|||
height="144rpx"></u--image> |
|||
<view class="text">{{ i18n.Withdrawal }}</view> |
|||
</view> |
|||
<view class="item"> |
|||
<u--image class="img" :showLoading="true" src="../../static/home/img_Subcription.png" width="144rpx" |
|||
height="144rpx"></u--image> |
|||
<view class="text">{{ i18n.Subcription }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="5"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'me', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('me') |
|||
} |
|||
}, |
|||
methods: { |
|||
gotoDetails(index) { |
|||
if (this.pageState !== 'product') return |
|||
uni.navigateTo({ |
|||
url: `/pages/subscription/details?id=${index}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-top: 88rpx; |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.contentBody { |
|||
|
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
background: #211F32; |
|||
border-radius: 64rpx 64rpx 0 0; |
|||
padding: 44rpx 48rpx; |
|||
overflow: hidden; |
|||
|
|||
|
|||
.userInfo { |
|||
height: 168rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.headImg { |
|||
height: 160rpx; |
|||
width: 160rpx; |
|||
border-radius: 160rpx; |
|||
border: 4rpx solid #F6A609; |
|||
} |
|||
|
|||
.idAndAccount { |
|||
margin-left: 40rpx; |
|||
|
|||
.id { |
|||
height: 56rpx; |
|||
width: 378rpx; |
|||
font-weight: 600; |
|||
font-size: 40rpx; |
|||
margin: 16rpx 0; |
|||
} |
|||
|
|||
.account { |
|||
position: relative; |
|||
height: 56rpx; |
|||
line-height: 56rpx; |
|||
width: 378rpx; |
|||
background: rgba(255, 188, 31, 0.1); |
|||
border-radius: 16rpx; |
|||
font-size: 24rpx; |
|||
color: #FFBC1F; |
|||
text-align: center; |
|||
padding-left: 20rpx; |
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/me/ranking.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 12rpx; |
|||
left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.btnDiv { |
|||
margin: 32rpx 48rpx; |
|||
|
|||
.item { |
|||
display: inline-block; |
|||
width: 218rpx; |
|||
text-align: center; |
|||
|
|||
.img { |
|||
margin: 0 36rpx 16rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,258 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.Subscription }}</navigation> |
|||
<view class="body"> |
|||
<!-- 倒计时 --> |
|||
<view class="countDown"> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.Days }}</view> |
|||
<view class="value">20</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.Hours }}</view> |
|||
<view class="value">8</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.Minutes }}</view> |
|||
<view class="value">47</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">{{ i18n.Seconds }}</view> |
|||
<view class="value">9</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- input --> |
|||
<view class="input-item"> |
|||
<u-input class="input" v-model="SubscribeCount" color="#A1A0A8" fontSize="32rpx" border="none" |
|||
:placeholder="i18n.PleaseChooseCoin"> |
|||
</u-input> |
|||
<view class="selectCoin" @click="USDTPopupShow = true">USDT |
|||
</view> |
|||
</view> |
|||
<!-- total --> |
|||
<Key-value-row :keyName="i18n.Total" :value="'≈ 993.64069952 ACTA'" :size="'24rpx'" :leftColor="'#A1A0A8'" |
|||
:rightColor="'#A1A0A8'"></Key-value-row> |
|||
|
|||
<!-- 按钮 --> |
|||
<u-button class="button" color="#00E8A2" throttleTime="500">{{ |
|||
i18n.SubscribeNow |
|||
}} |
|||
</u-button> |
|||
|
|||
<!-- ProjectDetails --> |
|||
<view class="contentTitle"> |
|||
<view class="ProjectDetails">{{ i18n.ProjectDetails }}</view> |
|||
<view class="videoBtn">{{ i18n.Video }}</view> |
|||
<view class="whiteBook">{{ i18n.WhiteBook }}</view> |
|||
</view> |
|||
|
|||
<!-- 文字内容 --> |
|||
<view class="content">Access to COVID-19 Tools Accelerator (ACTA) is a fully decentralized financial (DeFi) |
|||
ecosystem with blockchain as the underlying architecture, 100% decentralized exchange, 100% free |
|||
trading, 100% customized trading model, 100% cross-chain support. We have pre-customized two trading |
|||
models, ACTA/BTC and ACTA/USDT. ACTA/BTC is the mainstream currency with stable appreciation space; |
|||
ACTA/USDT is a stable settlement virtual currency which can be 1:1 freely convertible with US dollars. |
|||
ACTA is the leader of the global digital encryption currency decentralized market. |
|||
|
|||
Full name of the token: Access to COVID-19 Tools Accelerator |
|||
|
|||
ACTA total circulation: 1,200,000,000.00 |
|||
|
|||
ICO Price: 0.02 USDT |
|||
|
|||
ICO Time: From December 12,2021 to March 12, 2022</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
import UButton from '../../uview-ui/components/u-button/u-button' |
|||
export default { |
|||
name: "subscriptionDetails", |
|||
data() { |
|||
return { |
|||
SubscribeCount: 0, |
|||
DonatePopupShow: false, |
|||
USDTPopupShow: false, |
|||
DonatePopupDisabled: true, |
|||
coinInfo: {}, |
|||
rules: {}, |
|||
radioValue: '', |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("subscription"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
// console.log(this.$t('login.emailInputMessage')); |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
radioChange(e) { |
|||
// console.log(e); |
|||
} |
|||
}, |
|||
components: { UButton, KeyValueRow } |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.body { |
|||
overflow: hidden; |
|||
margin-top: 200rpx; |
|||
padding: 0 48rpx; |
|||
|
|||
.countDown { |
|||
margin-top: 60rpx; |
|||
height: 248rpx; |
|||
background-image: url(../../static/subscription/RoundedRectangle.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 654rpx 248rpx; |
|||
color: #15141F; |
|||
padding: 36rpx 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
box-sizing: border-box; |
|||
|
|||
.item { |
|||
width: 140rpx; |
|||
height: 174rpx; |
|||
font-weight: bold; |
|||
|
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.value { |
|||
margin-top: 10rpx; |
|||
font-size: 96rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.input-item { |
|||
position: relative; |
|||
overflow: hidden; |
|||
height: 124rpx; |
|||
line-height: 124rpx; |
|||
background: #323045; |
|||
margin: 32rpx 0; |
|||
border-radius: 32rpx; |
|||
padding: 0 40rpx; |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
width: 80%; |
|||
height: 124rpx; |
|||
} |
|||
|
|||
.selectCoin { |
|||
position: absolute; |
|||
width: 150rpx; |
|||
height: 54rpx; |
|||
top: 36rpx; |
|||
right: 0rpx; |
|||
line-height: 56rpx; |
|||
font-size: 36rpx; |
|||
padding: 0; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
margin-top: 38rpx; |
|||
margin-bottom: 48rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 32rpx; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.contentTitle { |
|||
position: relative; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.ProjectDetails { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.videoBtn { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 184rpx; |
|||
width: 134rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
background: #F2FE8D; |
|||
border-radius: 8rpx; |
|||
text-align: right; |
|||
color: #15141F; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
box-sizing: border-box; |
|||
padding: 0 16rpx; |
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/subscription/ic_play.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 32rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
top: 8rpx; |
|||
left: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.whiteBook { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0rpx; |
|||
width: 164rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
background: #F2FE8D; |
|||
border-radius: 8rpx; |
|||
text-align: center; |
|||
color: #15141F; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
|
|||
|
|||
.content { |
|||
font-size: 24rpx; |
|||
color: #A1A0A8; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<view class="nav-head"> |
|||
<view class="navItem" @click="pageState = 'product'" :class="{ select: pageState === 'product' }"> |
|||
{{ i18n.Product }} |
|||
</view> |
|||
<view class="navItem" @click="pageState = 'pending'" :class="{ select: pageState === 'pending' }"> |
|||
{{ i18n.Pending }} |
|||
</view> |
|||
<view class="navItem" @click="pageState = 'complete'" :class="{ select: pageState === 'complete' }"> |
|||
{{ i18n.Complete }} |
|||
</view> |
|||
</view> |
|||
<!-- Product 产品列表 --> |
|||
<view class="cardList"> |
|||
<view class="card" v-for="(item, index) in 10" :key="index" @click="gotoDetails(index)"> |
|||
<!-- 卡片条件渲染 --> |
|||
<!-- product --> |
|||
<card-header v-if="pageState === 'product'" :iconName="'../../static/maskets/bye.png'" |
|||
:title="'BTC(Bitcoin)'" :rightName="i18n.Subscribe" :hasBtn="true" :btnColor="'#00E8A2'"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'product'"> |
|||
<Key-value-row :keyName="i18n.STLTotalCirculation" :value="'23989'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.PrivateSalePrice" :value="'284145.61'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.ICOTime" :value="'2022/08/06-2022/08/31'"></Key-value-row> |
|||
</view> |
|||
|
|||
|
|||
<!-- pending --> |
|||
<card-header v-if="pageState === 'pending'" :iconName="'../../static/maskets/bye.png'" |
|||
:title="'973430980989323445'" :rightName="'Pending'" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'pending'"> |
|||
<Key-value-row :keyName="i18n.Price" :value="'284145.61'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Quantity" :value="'1000'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.USDT" :value="'3166.61'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row> |
|||
</view> |
|||
|
|||
|
|||
<!-- complete --> |
|||
<card-header v-if="pageState === 'complete'" :iconName="'../../static/maskets/bye.png'" |
|||
:title="'973430980989323445'" :rightName="'complete'" fontColor="#00E8A2"> |
|||
</card-header> |
|||
<view class="dataBody" v-if="pageState === 'complete'"> |
|||
<Key-value-row :keyName="i18n.Price" :value="'284145.61'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.Quantity" :value="'1000'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.ConfirmAmount" :value="'999'" :leftColor="'#F2FE8D'" |
|||
:rightColor="'#F2FE8D'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.USDT" :value="'3166.61'"></Key-value-row> |
|||
<Key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="'2000'" :leftColor="'#F2FE8D'" |
|||
:rightColor="'#F2FE8D'"> |
|||
</Key-value-row> |
|||
<Key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></Key-value-row> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="4"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import CardHeader from '../../components/cardHeader/cardHeader.vue'; |
|||
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue'; |
|||
export default { |
|||
components: { KeyValueRow, CardHeader }, |
|||
name: 'subscription', |
|||
data() { |
|||
return { |
|||
pageState: 'product', // 当前页签状态 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('subscription') |
|||
} |
|||
}, |
|||
methods: { |
|||
gotoDetails(index) { |
|||
if (this.pageState !== 'product') return |
|||
uni.navigateTo({ |
|||
url: `/pages/subscription/details?id=${index}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.nav-head { |
|||
overflow: hidden; |
|||
position: fixed; |
|||
top: 0rpx; |
|||
height: 80rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
z-index: 8; |
|||
background-color: #15141F; |
|||
padding: 94rpx 48rpx 0; |
|||
|
|||
|
|||
.navItem { |
|||
width: 218rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
color: #0b7e60; |
|||
font-size: 28rpx; |
|||
border-bottom: 10rpx solid #0b7e60; |
|||
} |
|||
|
|||
.select { |
|||
color: #00E8A2; |
|||
border-bottom: 10rpx solid #00E8A2; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.cardList { |
|||
margin-top: 212rpx; |
|||
|
|||
.card { |
|||
background: #211F32; |
|||
border-radius: 32rpx; |
|||
margin: 32rpx; |
|||
|
|||
|
|||
|
|||
.dataBody { |
|||
box-sizing: border-box; |
|||
padding: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 669 B |
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
|
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 541 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 988 B |
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 957 B |
Loading…
Reference in new issue