gx

queenwuli

2022-03-22 f4cd10c3462b4482958d8f6bb816de306434b97f

 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>