From f4cd10c3462b4482958d8f6bb816de306434b97f Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Tue, 22 Mar 2022 16:47:45 +0800
Subject: [PATCH] gx
---
src/pages/index/index.vue | 252 +++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 225 insertions(+), 27 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 8a047ce..81aa587 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -4,34 +4,87 @@
<div class="header flex align-center justify-between">
<div class="left flex align-center">
<img src="../../assets/images/icon3.png" class="icon"/>
- <van-dropdown-menu active-color="#3D8AF2">
- <van-dropdown-item v-model="value1" :options="option1" />
+ <van-dropdown-menu active-color="#3D8AF2" class="i18-wrap">
+ <van-dropdown-item v-model="local" :options="languague" @change="changeLanguage"/>
</van-dropdown-menu>
</div>
<span class="title">ANT-ETH</span>
<div class="right flex align-center">
<img src="../../assets/images/icon.png" class="icon"/>
- <span>连接钱包</span>
+ <span>{{ $t("message.ConnectWallet") }}</span>
</div>
</div>
<div class="banner-content">
- <p>免质押挖矿</p>
- <p>奖励<span class="em">1000,000</span> ETH</p>
- <button @click="show = true">授权凭证</button>
+ <p>{{ $t("message.Defi") }}</p>
+ <p>{{ $t("message.Reward") }}<span class="em">1000,000</span> ETH</p>
+ <button @click="showApproveModal()">{{ $t("message.ReceiveVoucher") }}</button>
</div>
</div>
<img src="../../assets/images/banner.png" class="banner"/>
<van-tabs class="scale" title-active-color="#080808" title-inactive-color="#999999" line-height="4px">
- <van-tab title="矿池">
+ <van-tab :title='$t("message.MiningPool")'>
<OrePool></OrePool>
</van-tab>
- <van-tab title="账户">
+ <van-tab :title='$t("message.Account")'>
<Account></Account>
</van-tab>
</van-tabs>
- <van-overlay :show="show" @click="show = false">
+ <van-overlay :show="isShowApproveModal" @click="hideApproveModal">
<div class="wrapper" @click.stop>
- <div class="block" />
+ <div class="block">
+ <div class="block-title">
+ <p>{{ $t("message.ReceiveDescription") }}</p>
+ </div>
+ <p class="block-content">{{ $t("message.Description") }}</p>
+ <button class="block-btn" @click="showAccreditModal()">{{ $t("message.Receive") }}</button>
+ </div>
+ </div>
+ </van-overlay>
+ <van-overlay :show="isShowAccreditModal" @click="hideAccreditModal">
+ <div class="wrapper" @click.stop>
+ <div class="block">
+ <img class="close-icon" @click="hideAccreditModal" src="../../assets/images/close-icon.png">
+ <div class="accredit-box flex align-center justify-between">
+ <div class="item flex flex-v align-center justify-center">
+ <img src="../../assets/images/icon7.png">
+ <p class="title">Dapp</p>
+ <p>DappConnect</p>
+ </div>
+ <div class="item flex flex-v align-center justify-center" @click="showWalletModal()">
+ <img src="../../assets/images/icon8.png">
+ <p class="title">Wallet</p>
+ <p>WalletConnect</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </van-overlay>
+ <van-overlay :show="isShowWalletModal" @click="hideWalletModal">
+ <div class="wrapper" @click.stop>
+ <div class="block">
+ <img class="close-icon" @click="hideWalletModal" src="../../assets/images/close-icon.png">
+ <div class="wallet-box">
+ <p class="title">选择你的钱包</p>
+ <div class="wallet-warp flex align-center justify-between">
+ <div>
+ <img src="../../assets/images/icon8.png">
+ <p>coinbase</p>
+ </div>
+ <div>
+ <img src="../../assets/images/icon8.png">
+ <p>coinbase</p>
+ </div>
+ <div>
+ <img src="../../assets/images/icon8.png">
+ <p>coinbase</p>
+ </div>
+ <div>
+ <img src="../../assets/images/icon8.png">
+ <p>coinbase</p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</van-overlay>
</div>
@@ -40,7 +93,8 @@
<script>
import WalletConnectProvider from "@walletconnect/web3-provider";
import Web3 from "web3";
-import { ref } from 'vue';
+import { ref, reactive, getCurrentInstance,onBeforeMount,onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
import OrePool from './orePool';
import Account from './account';
@@ -51,16 +105,36 @@
Account
},
setup() {
- const value1 = ref(0);
- const option1 = [
- { text: '简体中文', value: 0 },
- { text: 'English', value: 1 }
- ];
- const show = ref(false);
+ const { proxy } = getCurrentInstance();
+ const changeLanguage = (type) => {
+ proxy.$i18n.locale = type;
+ }
+ let provider = reactive(new WalletConnectProvider({
+ infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
+ bridge: "https://bridge.walletconnect.org",
+ }))
+ let walletAddress = ref('');
+ async function initWalletConnect() {
+ if(window.tronWeb){
+ walletAddress = window.tronWeb.defaultAddress.base58;
+ alert(walletAddress)
+ }
+ }
+ onMounted(() => {
+ initWalletConnect()
+ })
return {
- value1,
- option1,
- show
+ local: ref('zh'),
+ languague: [
+ { text: '简体中文', value: 'zh' },
+ { text: 'English', value: 'en' }
+ ],
+ provider,
+ initWalletConnect,
+ isShowApproveModal: ref(false),
+ isShowAccreditModal: ref(false),
+ isShowWalletModal: ref(false),
+ changeLanguage
};
},
methods: {
@@ -84,6 +158,27 @@
return;
}
},
+ showApproveModal(){
+ this.provider.enable();
+ this.isShowApproveModal = true
+ },
+ hideApproveModal(){
+ this.isShowApproveModal = false
+ },
+ showAccreditModal(){
+ this.isShowApproveModal = false
+ this.isShowAccreditModal = true
+ },
+ hideAccreditModal(){
+ this.isShowAccreditModal = false
+ },
+ showWalletModal(){
+ this.hideAccreditModal()
+ this.isShowWalletModal = true
+ },
+ hideWalletModal(){
+ this.isShowWalletModal = false
+ }
}
}
</script>
@@ -132,21 +227,25 @@
font-size: 48px;
font-weight: bold;
color: #F5F6F7;
- letter-spacing:4px;
+ letter-spacing:2px;
}
.banner-content p .em{
font-size: 68px;
color: #FEAA4A;
}
.banner-content button{
- background: linear-gradient(142deg, #FEAA4A 0%, #FF8517 100%);
+ display: block;
+ background: linear-gradient(86deg, #FEAA4A 0%, #FF8517 100%);
border: 0;
color: #FFFFFF;
font-size: 32px;
font-weight: bold;
- padding: 24px 72px;
- border-radius: 44px;
- margin-top: 30px
+ padding: 24px 0;
+ width: 310px;
+ height: 90px;
+ border-radius: 48px;
+ margin-top: 30px;
+ box-sizing: border-box;
}
.wrapper {
display: flex;
@@ -154,8 +253,107 @@
justify-content: center;
}
.block {
- width: 120px;
- background-color: #fff;
+ background-color: #fff;
+ border-radius: 20px;
+ padding: 24px 34px 32px;
+ position: fixed;
+ top: 30%;
+ left: 24px;
+ right: 24px;
+}
+.block-title{
+ text-align: left;
+}
+.block-title p{
+ font-size: 32px;
+ font-weight: bold;
+ position: relative;
+ margin: 0;
+}
+.block-title p::before{
+ content: '';
+ width: 10px;
+ height: 10px;
+ background: #FEAA4A;
+ display: block;
+ border-radius: 50%;
+ position: absolute;
+ left: -20px;
+ top: 50%;
+}
+.block-content{
+ font-size: 28px;
+ text-align: left;
+ color: #999999;
+ margin: 28px 0 0;
+ line-height: 38px;
+}
+.block-btn{
+ margin-top: 80px;
+ background: linear-gradient(142deg, #FEAA4A 0%, #FF8517 100%);
+ border: 0;
+ color: #FFFFFF;
+ font-size: 32px;
+ font-weight: bold;
+ padding: 24px 104px;
+ border-radius: 48px;
+}
+.close-icon{
+ position: absolute;
+ top: -63px;
+ right: 0px;
+ width: 50px;
+ height: 50px;
+ color: #fff;
+}
+.accredit-box{
+ padding: 54px 30px;
+}
+.accredit-box .item{
+ width: 45%;
+ border: 1px solid #E9E9E9;
+ border-radius: 20px;
+ padding: 35px;
+ box-sizing: border-box;
+}
+.accredit-box .item img{
+ width: 84px;
+ height: 84px;
+}
+.accredit-box .item p{
+ margin: 10px 0 0;
+ font-size: 24px;
+ color: #999999;
+}
+.accredit-box .item .title{
+ font-size: 32px;
+ color: #080808;
+ font-weight: bold;
+}
+.wallet-box{
+ padding: 20px;
+}
+.wallet-box p{
+ margin: 0;
+}
+.wallet-box .title{
+ font-size: 32px;
+ color: #080808;
+ font-weight: bold;
+}
+.wallet-warp{
+ box-sizing: border-box;
+ margin-top: 80px;
+}
+.wallet-warp img{
+ width: 88px;
+ height: 88px;
+ border-radius: 20px;
+}
+.wallet-warp p{
+ font-size: 24px;
+ color: #080808;
+ margin-top: 15px;
}
</style>
--
Gitblit v1.9.1