<template>
|
<div class="wrap">
|
<div class="top">
|
<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>
|
</div>
|
<span class="title">ANT-ETH</span>
|
<div class="right flex align-center">
|
<img src="../../assets/images/icon.png" class="icon"/>
|
<span>连接钱包</span>
|
</div>
|
</div>
|
<div class="banner-content">
|
<p>免质押挖矿</p>
|
<p>奖励<span class="em">1000,000</span> ETH</p>
|
<button @click="show = true">授权凭证</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="矿池">
|
<OrePool></OrePool>
|
</van-tab>
|
<van-tab title="账户">
|
<Account></Account>
|
</van-tab>
|
</van-tabs>
|
<van-overlay :show="show" @click="show = false">
|
<div class="wrapper" @click.stop>
|
<div class="block" />
|
</div>
|
</van-overlay>
|
</div>
|
</template>
|
|
<script>
|
import WalletConnectProvider from "@walletconnect/web3-provider";
|
import Web3 from "web3";
|
import { ref } from 'vue';
|
import OrePool from './orePool';
|
import Account from './account';
|
|
export default {
|
name: 'App',
|
components: {
|
OrePool,
|
Account
|
},
|
setup() {
|
const value1 = ref(0);
|
const option1 = [
|
{ text: '简体中文', value: 0 },
|
{ text: 'English', value: 1 }
|
];
|
const show = ref(false);
|
return {
|
value1,
|
option1,
|
show
|
};
|
},
|
methods: {
|
connect() {
|
const provider = new WalletConnectProvider({
|
infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
|
bridge: "https://bridge.walletconnect.org",
|
});
|
// Enable session (triggers QR Code modal)
|
provider.enable();
|
|
this.web3 = new Web3(provider);
|
|
// this.getAccount();
|
// subscribe to events
|
// this.subscribeToEvents();
|
},
|
subscribeToEvents() {
|
const connector = this.connector;
|
if (!connector) {
|
return;
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.wrap{
|
padding-bottom: 40px;
|
}
|
.top{
|
position: absolute;
|
left: 0;
|
right: 0;
|
}
|
.header{
|
padding: 0 24px
|
}
|
.header .left .icon{
|
width: 48px
|
}
|
.header .title{
|
font-size: 32px;
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
.header .right{
|
background: #FFFFFF;
|
border-radius: 24px;
|
padding-right: 24px;
|
padding-left: 12px;
|
font-size: 24px;
|
color: #3D8AF2;
|
}
|
.header .right .icon{
|
width: 48px
|
}
|
.banner{
|
width: 100%;
|
display: block;
|
}
|
.banner-content{
|
margin-top: 120px;
|
padding-left: 40px;
|
text-align: left
|
}
|
.banner-content p{
|
font-size: 48px;
|
font-weight: bold;
|
color: #F5F6F7;
|
letter-spacing:4px;
|
}
|
.banner-content p .em{
|
font-size: 68px;
|
color: #FEAA4A;
|
}
|
.banner-content button{
|
background: linear-gradient(142deg, #FEAA4A 0%, #FF8517 100%);
|
border: 0;
|
color: #FFFFFF;
|
font-size: 32px;
|
font-weight: bold;
|
padding: 24px 72px;
|
border-radius: 44px;
|
margin-top: 30px
|
}
|
.wrapper {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.block {
|
width: 120px;
|
background-color: #fff;
|
}
|
|
</style>
|
