<template>
|
<div>
|
<div class="box">
|
<h3 class="title">{{ $t("message.PoolData") }}</h3>
|
<div class="box-content">
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.TotalOutput") }}</span>
|
<span class="count em">741522.920798 ETH</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.ValidNode") }}</span>
|
<span class="count em">38</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.Participant") }}</span>
|
<span class="count">123</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.UserRevenue") }}</span>
|
<span class="count">73235521.340353 USDT</span>
|
</div>
|
</div>
|
</div>
|
<h2 class="m-title">{{ $t("message.Mining") }}</h2>
|
<h3 class="m-subtitle">{{ $t("message.LiquidityMiningIncome") }}</h3>
|
<div class="box">
|
<h3 class="title">{{ $t("message.UserOutput") }}</h3>
|
<div class="box-content">
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.Address") }}</span>
|
<span class="name">{{ $t("message.Quantity") }}</span>
|
</div>
|
<vue-seamless-scroll :data="listData" :class-option="scrollOption" class="list-warp">
|
<div class="row flex align-center justify-between" v-for="item in listData">
|
<span class="small-name">TFptQTd********7j3bms</span>
|
<span class="small-count">0.920798 ETH</span>
|
</div>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
<h2 class="m-title">{{$t("message.HelpCenter")}}</h2>
|
<h3 class="m-subtitle">{{$t("message.HelpCenter2")}}</h3>
|
<van-collapse v-model="activeNames">
|
<van-collapse-item :title='$t("message.Question1")' name="1">
|
{{$t("message.Answer1")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question2")' name="2">
|
{{$t("message.Answer2")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question3")' name="3">
|
{{$t("message.Answer3")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question4")' name="4">
|
{{$t("message.Answer4")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question5")' name="5">
|
100USDT-499USDT{{$t("message.Yield")}}≈2%<br>
|
500USDT-4999USDT{{$t("message.Yield")}}≈2.4%<br>
|
5000USDT-29999USDT{{$t("message.Yield")}}≈2.8%<br>
|
30000USDT-99999USDT{{$t("message.Yield")}}≈3.2%<br>
|
100000USDT-499999USDT{{$t("message.Yield")}}≈3.6%<br>
|
500000USDT-999999USDT{{$t("message.Yield")}}≈4.2%<br>
|
1000000USDT-4999999USDT{{$t("message.Yield")}}≈4.8%<br>
|
5000000USDT-9999999USDT{{$t("message.Yield")}}≈5.2%<br>
|
{{$t("message.Answer5")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question6")' name="6">
|
{{$t("message.Answer6")}}
|
</van-collapse-item>
|
<van-collapse-item :title='$t("message.Question7")' name="7">
|
{{$t("message.Answer7")}}
|
</van-collapse-item>
|
</van-collapse>
|
<h2 class="m-title">{{$t("message.AuditReport")}}</h2>
|
<h3 class="m-subtitle">{{$t("message.AuditReport2")}}</h3>
|
<div class="img-wrap flex justify-between">
|
<img src="../../assets/images/img1.png" />
|
<img src="../../assets/images/img2.png" />
|
<img src="../../assets/images/img3.png" />
|
</div>
|
<h2 class="m-title">{{$t("message.Partner")}}</h2>
|
<h3 class="m-subtitle">{{$t("message.Partner2")}}</h3>
|
<div class="img-wrap flex justify-between flex-wrap">
|
<img src="../../assets/images/img4.png" />
|
<img src="../../assets/images/img5.png" />
|
<img src="../../assets/images/img6.png" />
|
<img src="../../assets/images/img7.png" />
|
<img src="../../assets/images/img8.png" />
|
<img src="../../assets/images/img9.png" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref } from 'vue';
|
export default {
|
name: 'orePool',
|
setup() {
|
const activeNames = ref(['1']);
|
return {
|
activeNames,
|
listData: [{
|
'title': '无缝滚动第一行无缝滚动第一行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第二行无缝滚动第二行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第三行无缝滚动第三行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第四行无缝滚动第四行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第五行无缝滚动第五行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第六行无缝滚动第六行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第七行无缝滚动第七行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第八行无缝滚动第八行',
|
'date': '2017-12-16'
|
}, {
|
'title': '无缝滚动第九行无缝滚动第九行',
|
'date': '2017-12-16'
|
}],
|
scrollOption: {
|
step: 0.5
|
}
|
};
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style>
|
.m-title{
|
font-size: 32px;
|
color: #333333;
|
margin: 64px 0 0;
|
}
|
.m-subtitle{
|
font-size: 24px;
|
color: #999999;
|
margin: 20px 0 26px;
|
font-weight: normal;
|
}
|
.box{
|
background: #FFFFFF;
|
border-radius: 20px;
|
padding: 24px 34px 32px;
|
text-align: left;
|
margin: 24px;
|
}
|
.box .title{
|
font-size: 32px;
|
position: relative;
|
margin: 0
|
}
|
.box .title::before{
|
content: '';
|
width: 10px;
|
height: 10px;
|
background: #FEAA4A;
|
display: block;
|
border-radius: 50%;
|
position: absolute;
|
left: -20px;
|
top: 50%;
|
}
|
.box-content{
|
|
}
|
.box-content .row:not(:last-child){
|
margin: 30px 0;
|
}
|
.box-content .row .name{
|
font-size: 28px;
|
color: #999999
|
}
|
.box-content .row .count{
|
font-size: 32px;
|
font-weight: bold;
|
}
|
.box-content .row .count.em{
|
color: #3D8AF2
|
}
|
.box-content .row .small-name{
|
font-size: 24px;
|
color: #3D8AF2
|
}
|
.box-content .row .small-count{
|
font-size: 24px;
|
font-weight: bold;
|
}
|
.img-wrap{
|
margin: 68px 12px 24px;
|
}
|
.img-wrap img{
|
width: 33%;
|
padding: 0 12px;
|
margin: 24px 0;
|
box-sizing: border-box;
|
}
|
.van-collapse-item{
|
margin: 0 24px 24px;
|
}
|
.van-cell{
|
border-radius: 10px;
|
padding: 24px 34px;
|
}
|
.van-collapse-item__content{
|
border-radius: 0 0 10px 10px;
|
}
|
.van-cell__title{
|
text-align: left;
|
font-size: 32px;
|
font-weight: bold;
|
}
|
.van-collapse-item__content{
|
text-align: left;
|
font-size: 26px;
|
}
|
.list-warp{
|
overflow: hidden;
|
height: 450px;
|
}
|
</style>
|
