<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">{{miningPoolData.totalOutput || 0}} ETH</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.ValidNode") }}</span>
|
<span class="count em">{{miningPoolData.validNode || 0}}</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.Participant") }}</span>
|
<span class="count">{{miningPoolData.partnerCnt || 0}}</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{ $t("message.UserRevenue") }}</span>
|
<span class="count">{{miningPoolData.partnerIncome || 0}} 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="incomeList" :class-option="scrollOption" class="list-warp">
|
<div class="row flex align-center justify-between" v-for="item in incomeList">
|
<span class="small-name">{{item.address}}</span>
|
<span class="small-count">{{item.income}} 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">
|
<p v-for="item in rateList">{{item.minValue}}USDT-{{item.maxValue}}USDT{{$t("message.Yield")}}≈{{item.ratio}}%</p>
|
{{$t("message.Answer5", {amount: rateList.length?rateList[0].minValue : 0})}}
|
</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")}}fei520114@outlook.com
|
</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, onMounted, getCurrentInstance } from 'vue';
|
export default {
|
name: 'orePool',
|
setup() {
|
const { proxy } = getCurrentInstance();
|
let miningPoolData = ref({});
|
let incomeList = ref([]);
|
const activeNames = ref(['']);
|
const rateList = ref([])
|
onMounted(() => {
|
proxy.initData()
|
proxy.initglobalSetData()
|
})
|
return {
|
activeNames,
|
miningPoolData,
|
incomeList,
|
scrollOption: {
|
step: 0.5
|
},
|
rateList
|
};
|
},
|
methods: {
|
initData () {
|
this.$axios({
|
url: '/dapi/common/totalIncome',
|
method: 'get'
|
}).then((res) => {
|
if(res.code == 200) {
|
this.miningPoolData = res.data.mineData
|
this.incomeList = res.data.userIncome
|
}
|
})
|
},
|
initglobalSetData () {
|
this.$axios({
|
url: '/dapi/common/globalSetting',
|
method: 'get'
|
}).then((res) => {
|
if(res.code == 200) {
|
this.rateList = res.data.ratio;
|
}
|
})
|
}
|
}
|
}
|
</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;
|
max-width: 50%;
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
}
|
.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>
|
