~xiewanyan/dapp-wallet.git

parent: 5ed03a90 | patch | commit | ignore whitespace

queenwuli

2022-03-17 b702a5141e4bb77369c7c6b0d740aaf4a7713f6d

gx

36 files added

	.browserslistrc	4 ●●●●● patch \| view \| raw \| blame \| history
	.eslintignore	2 ●●●●● patch \| view \| raw \| blame \| history
	.eslintrc.js	17 ●●●●● patch \| view \| raw \| blame \| history
	.gitignore	23 ●●●●● patch \| view \| raw \| blame \| history
	.postcssrc.js	11 ●●●●● patch \| view \| raw \| blame \| history
	babel.config.js	12 ●●●●● patch \| view \| raw \| blame \| history
	jsconfig.json	19 ●●●●● patch \| view \| raw \| blame \| history
	package-lock.json	28694 ●●●●● patch \| view \| raw \| blame \| history
	package.json	30 ●●●●● patch \| view \| raw \| blame \| history
	public/favicon.ico	patch \| view \| raw \| blame \| history
	public/index.html	20 ●●●●● patch \| view \| raw \| blame \| history
	src/App.vue	26 ●●●●● patch \| view \| raw \| blame \| history
	src/assets/images/banner.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon2.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon3.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon4.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon5.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon6.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon7.png	patch \| view \| raw \| blame \| history
	src/assets/images/icon8.png	patch \| view \| raw \| blame \| history
	src/assets/images/img1.png	patch \| view \| raw \| blame \| history
	src/assets/images/img2.png	patch \| view \| raw \| blame \| history
	src/assets/images/img3.png	patch \| view \| raw \| blame \| history
	src/assets/images/img4.png	patch \| view \| raw \| blame \| history
	src/assets/images/img5.png	patch \| view \| raw \| blame \| history
	src/assets/images/img6.png	patch \| view \| raw \| blame \| history
	src/assets/images/img7.png	patch \| view \| raw \| blame \| history
	src/assets/images/img8.png	patch \| view \| raw \| blame \| history
	src/assets/images/img9.png	patch \| view \| raw \| blame \| history
	src/assets/style/common.css	132 ●●●●● patch \| view \| raw \| blame \| history
	src/main.js	16 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/index/account.vue	258 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/index/index.vue	161 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/index/orePool.vue	197 ●●●●● patch \| view \| raw \| blame \| history
	vue.config.js	26 ●●●●● patch \| view \| raw \| blame \| history

 .browserslistrc

New file
@@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11

 .eslintignore

New file
@@ -0,0 +1,2 @@
/src/**/*.vue
/src/**/*.js

 .eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 .gitignore

New file
@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 .postcssrc.js

New file
@@ -0,0 +1,11 @@
module.exports = {
    "plugins": {
        "autoprefixer": {},
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*']
        }
    }
}

 babel.config.js

New file
@@ -0,0 +1,12 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

 jsconfig.json

New file
@@ -0,0 +1,19 @@
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,30 @@
{
  "name": "dapp-wallet",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@walletconnect/web3-provider": "^1.7.4",
    "core-js": "^3.8.3",
    "lib-flexible": "^0.3.2",
    "tronweb": "^4.1.0",
    "vant": "^3.4.6",
    "vue": "^3.2.13",
    "web3": "^1.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss-pxtorem": "^6.0.0"
  }
}

 public/favicon.ico


 public/index.html

New file
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
    </script>
  </body>
</html>

 src/App.vue

New file
@@ -0,0 +1,26 @@
<template>
  <Index></Index>
</template>

<script>
import Index from './pages/index/index'

export default {
  name: 'App',
  components: {
    Index
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #080808;
  background: #F8F8F8
}

</style>

 src/assets/images/banner.png


 src/assets/images/icon.png


 src/assets/images/icon2.png


 src/assets/images/icon3.png


 src/assets/images/icon4.png


 src/assets/images/icon5.png


 src/assets/images/icon6.png


 src/assets/images/icon7.png


 src/assets/images/icon8.png


 src/assets/images/img1.png


 src/assets/images/img2.png


 src/assets/images/img3.png


 src/assets/images/img4.png


 src/assets/images/img5.png


 src/assets/images/img6.png


 src/assets/images/img7.png


 src/assets/images/img8.png


 src/assets/images/img9.png


 src/assets/style/common.css

New file
@@ -0,0 +1,132 @@
.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: -moz-flex;
    display: flex;
}
.flex-v{
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex-wrap{
    flex-wrap: wrap;
}
.align-center{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.align-end{
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
}
.justify-center{
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -moz-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify-between{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify-around{
    -webkit-box-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}
.justify-end{
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
}

.van-dropdown-menu__bar{
    background: transparent;
    box-shadow: none
}
.van-dropdown-menu__title{
    font-size: 24px;
    color: #FFFFFF;
}
.van-dropdown-menu__title:after{
    top: 46%;
    border: 8px solid;
    border-color: transparent transparent #FFFFFF #FFFFFF;
}
.scale.van-tabs--line>.van-tabs__wrap{
    height: 156px;
}
.scale>.van-tabs__wrap>.van-tabs__nav>.van-tab{
    font-size: 32px;
}
.scale>.van-tabs__wrap>.van-tabs__nav>.van-tab--active{
  font-size: 48px;
  font-weight: bold;
}
.scale>.van-tabs__wrap>.van-tabs__nav>.van-tabs__line{
    background: #3D8AF2;
    bottom: 40px;
}
.scale .van-tab__text--ellipsis{
    overflow: visible
}
.van-tabs--card>.van-tabs__wrap{
    height: 78px;
}
.van-tabs__nav--card{
    border-radius: 40px;
    height: 78px;
}
.van-tab--card{
    padding: 16px 0;
    font-size: 32px;
    line-height: 78px;
    font-weight: bold;
}
.van-tab--card:nth-child(1).van-tab--active{
    border-radius: 40px 0 0 40px;
}
.van-tab--card:nth-child(3).van-tab--active{
    border-radius:  0 40px 40px 0;
}
.van-tab--shrink{
    padding: 0 28px ;
}
.tab-wrap .van-tabs__wrap{
    border-bottom: 1px solid #E9E9E9;
}
.van-tabs__nav--line.van-tabs__nav--shrink, .van-tabs__nav--line.van-tabs__nav--complete{
    padding-left: 0;
    padding-right: 0;
}

 src/main.js

New file
@@ -0,0 +1,16 @@
import { createApp } from 'vue'
import { Button, DropdownMenu, DropdownItem, Tab, Tabs, Collapse, CollapseItem,Overlay  } from 'vant';
import App from './App.vue'
import 'lib-flexible/flexible'
import './assets/style/common.css'

const app = createApp(App);
app.use(Button);
app.use(DropdownMenu);
app.use(DropdownItem);
app.use(Tab);
app.use(Tabs);
app.use(Collapse);
app.use(CollapseItem);
app.use(Overlay);
app.mount('#app')

 src/pages/index/account.vue

New file
@@ -0,0 +1,258 @@
<template>
    <div>
        <div class="box">
            <h3 class="title">我的账户</h3>
            <div class="box-content">
                <div class="row flex align-center justify-between">
                    <span class="name">总产量</span>
                    <span class="count">741522.920798 ETH</span>
                </div>
                <div class="row flex align-center justify-between">
                    <span class="name">收入余额</span>
                    <span class="count">3789 USDT</span>
                </div>
                <div class="row flex align-center justify-between">
                    <span class="name">可兑换</span>
                    <span class="count">62183 ETH</span>
                </div>
            </div>
        </div>
        <van-tabs type="card" color="#3D8AF2" title-active-color="#FFFFFF" title-inactive-color="#080808">
            <van-tab title="兑换">
                <div class="box">
                    <h3 class="title">兑换</h3>
                    <div class="box-content ">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
                                <div>
                                    <img src="../../assets/images/icon4.png"/>
                                    <span>ETH</span>
                                </div>
                                <input placeholder="0.000"/>
                            </div>
                            <img src="../../assets/images/icon6.png" class="exchange-icon"/>
                            <div class="item flex-1 flex align-end flex-v">
                                <div>
                                    <img src="../../assets/images/icon5.png"/>
                                    <span>USDT</span>
                                </div>
                                <span class="amount">0.0000</span>
                            </div>
                        </div>
                        <span class="all">全部兑换</span>
                        <button class="btn">兑换</button>
                        <div class="tips">
                            <p>价格：1ETH≈2562.47USDT</p>
                            <p>从0.1分开始，将您挖掘的ETH硬币转换为USDT</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="提现">
                <div class="box">
                    <h3 class="title">提现</h3>
                    <div class="box-content">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
                                <div>
                                    <img src="../../assets/images/icon5.png"/>
                                    <span>USDT</span>
                                </div>
                                <input placeholder="0.000"/>
                                <span class="all">提现金额</span>
                            </div>
                            <div class="item flex-1 flex align-end flex-v">
                                <div>
                                    <img src="../../assets/images/icon5.png"/>
                                    <span>USDT</span>
                                </div>
                                <span class="amount">0.0000</span>
                                <span class="all">总余额</span>
                            </div>
                        </div>
                        <button class="btn">确认</button>
                        <div class="tips">
                            <p>USDT取款将在24小时内发送到您的USDT钱包地址，每天只
                                能取款一次，从100USDT开始，每位矿工的费用为30USDT</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="记录">
                <div class="box">
                    <h3 class="title">记录</h3>
                    <div class="box-content">
                        <div class="tab-wrap">
                            <van-tabs v-model:active="active" shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
                                <van-tab title="兑换">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">数量</span>
                                        <span class="name">状态</span>
                                    </div>
                                    <div class="row flex align-center justify-between" v-for="item in 8">
                                        <span>2022-3-11 10:20</span>
                                        <span>1000</span>
                                        <span>成功</span>
                                    </div>
                                </van-tab>
                                <van-tab title="提现">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">数量</span>
                                        <span class="name">状态</span>
                                    </div>
                                    <div class="row flex align-center justify-between" v-for="item in 8">
                                        <span>2022-3-11 10:20</span>
                                        <span>10000</span>
                                        <span>成功</span>
                                    </div>
                                </van-tab>
                                <van-tab title="采矿">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">类型</span>
                                        <span class="name">输出</span>
                                    </div>
                                    <div class="row flex align-center justify-between" v-for="item in 8">
                                        <span>2022-3-11 10:20</span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script scope>
import { ref } from 'vue';
export default {
  name: 'account',
  setup() {
    const activeNames = ref(['1']);
        return { activeNames };
  },
  methods: {
    
  }
}
</script>

<style scoped>
    .box{
        background: #FFFFFF;
        border-radius: 20px;
        padding: 24px 34px 32px;
        text-align: left;
        margin: 24px 24px 32px;
    }
    .box:not(:last-child){
        margin-bottom: 60px
    }
    .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{

    }
    .exchange{
        margin: 54px 0 0;
    }
    .exchange .item{
        color: #999999;
        font-size: 28px;
    }
    .exchange .item img{
        width: 40px;
        vertical-align: middle;
        margin-right: 8px;
    }
    .exchange .item input{
        width: 100%;
        color: #999999;
        font-size: 48px;
        border: 0;
        border-bottom: 1px solid #E9E9E9;
        padding: 20px 0;
        margin: 40px 0 0;
        font-weight: bold;
    }
    .exchange .item .amount{
        width: 100%;
        color: #FEAA4A;
        font-size: 32px;
        border-bottom: 1px solid #E9E9E9;
        padding: 20px 0;
        line-height: 56px;
        margin: 40px 0 0;
        text-align: right;
        font-weight: bold;
    }
    .exchange-icon{
        width: 64px;
        height: 64px;
    }
    .all{
        display: block;
        color: #3769CF;
        font-size: 28px;
        margin-top: 15px;
    }
    .btn{
        width: 100%;
        font-size: 32px;
        font-weight: bold;
        color: #F5F6F7;
        background: #3D8AF2;
        border-radius: 48px;
        padding: 26px;
        border: 0;
        box-shadow: 0px 3px 15px rgba(55, 105, 207, 0.3);
        margin: 62px 0 0;
    }
    .tips{
        color: #AFAFAF;
        font-size: 24px;
        margin-top: 48px;
    }
    .tips p{
        margin: 0;
        line-height: 32px;
    }
    .tab-wrap{
        margin: 20px -28px;
    }
    .row{
        font-size: 24px;
        color: #080808;
        padding: 0 28px;
    }
    .row .name{
        font-size: 28px;
        color: #999999
    }
    .row span:nth-child(1){
        width: 34%
    }
    .row span:nth-child(2){
        text-align: center
    }
</style>

 src/pages/index/index.vue

New file
@@ -0,0 +1,161 @@
<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>

 src/pages/index/orePool.vue

New file
@@ -0,0 +1,197 @@
<template>
    <div>
        <div class="box">
            <h3 class="title">矿池数据</h3>
            <div class="box-content">
                <div class="row flex align-center justify-between">
                    <span class="name">总产量</span>
                    <span class="count em">741522.920798 ETH</span>
                </div>
                <div class="row flex align-center justify-between">
                    <span class="name">有效节点</span>
                    <span class="count em">38</span>
                </div>
                <div class="row flex align-center justify-between">
                    <span class="name">参与者</span>
                    <span class="count">123</span>
                </div>
                <div class="row flex align-center justify-between">
                    <span class="name">用户收入</span>
                    <span class="count">73235521.340353 USDT</span>
                </div>
            </div>
        </div>
        <h2 class="m-title">采矿</h2>
        <h3 class="m-subtitle">流动性采矿收入</h3>
        <div class="box">
            <h3 class="title">用户输出</h3>
            <div class="box-content">
                <div class="row flex align-center justify-between">
                    <span class="name">地址</span>
                    <span class="name">数量</span>
                </div>
                <div>
                    <div class="row flex align-center justify-between" v-for="item in 8">
                        <span class="small-name">TFptQTd********7j3bms</span>
                        <span class="small-count">0.920798 ETH</span>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="m-title">帮助中心</h2>
        <h3 class="m-subtitle">希望对你有帮助</h3>
        <van-collapse v-model="activeNames">
            <van-collapse-item title="什么是节点挖掘？" name="1">
                USDT存储在自己的钱包中，0风险，新的区块链数据管理和计算模型，以促进DEFI生态。通过每个用户节点的总价值生产、无保留的流动性节点挖掘以及预挖掘和增量行为，所有ETH用户提供链上流动性，所有这些都将通过智能合约节点执行收入自动锁定。目前，您可以通过任何钱包参与，对矿工新一代节点进行挖掘，在通过流动性节点挖掘获得的总收入结束时，通过USDT代币分割每个用户的集中钱包。
            </van-collapse-item>
            <van-collapse-item title="采矿收入来自哪里？" name="2">
                一旦用户参与挖掘，流动性节点挖掘将被激活，每天节点挖掘产生的总金额将在24小时内结束，每个用户从Minres新一代流动性节点池中获取挖掘数据，用于计算收益。每日结算6次，每4小时结算1次，挖矿收益以液体节点池用户钱包代币百分比计算。成功提交社区后，挖掘收益将被释放到用户的中央钱包。移动节点挖掘的总量占用户钱包token总量的比例。你在移动池中拥有的代币越多，你从挖掘中获得的代币就越多。
            </van-collapse-item>
            <van-collapse-item title="我需要如何加入？" name="3">
                参与非破坏性和非担保流动性挖掘需要支付ETH或者TRX矿工费用才能收到替换金券，ETH钱包或者TRX钱包地址只需申请一次。成功后自动打开挖掘权限
            </van-collapse-item>
            <van-collapse-item title="我怎样提现？" name="4">
                您可以将每天生成的货币转换为USDT，然后启动提款。USDT取款将自动发送到您添加到节点的钱包地址，不支持其他地址
            </van-collapse-item>
            <van-collapse-item title="收益率是多少？" name="5">
                100USDT-499USDT收益率≈2%<br>
                500USDT-4999USDT收益率≈2.4%<br>
                5000USDT-29999USDT收益率≈2.8%<br>
                30000USDT-99999USDT收益率≈3.2%<br>
                100000USDT-499999USDT收益率≈3.6%<br>
                500000USDT-999999USDT收益率≈4.2%<br>
                1000000USDT-4999999USDT收益率≈4.8%<br>
                5000000USDT-9999999USDT收益率≈5.2%<br>
                100USDT以下沒有盈利。
            </van-collapse-item>
            <van-collapse-item title="额外的收益是什么？" name="6">
                当你每天有足够的挖掘量，并持续保持足够的时间，挖掘池将有很多奖励。有关更多详细信息，请联系在线客户服务。
            </van-collapse-item>
            <van-collapse-item title="如何联系你？" name="7">
                请发送电子邮件，我们将在收到电子邮件后立即回复您；miningusdtvip@gmail.com
            </van-collapse-item>
        </van-collapse>
        <h2 class="m-title">审计报告</h2>
        <h3 class="m-subtitle">我没有一份安全的审计报告</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">伙伴</h2>
        <h3 class="m-subtitle">我们的商业伙伴</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 };
  },
  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;
        text-align: justify;
        font-size: 26px;
    }
</style>

 vue.config.js

New file
@@ -0,0 +1,26 @@
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    resolve: {
      alias: {
        querystring:false,
        url:false,
        os:false,
        crypto: false,
        stream: false,
        assert: false,
        http: false,
        https: false
        }
    },
    plugins: [
      new webpack.ProvidePlugin({
        process: "process/browser",
        Buffer: ["buffer", "Buffer"],
      }),
    ]
  }
})

New file
			@@ -0,0 +1,17 @@
			module.exports = {
			root: true,
			env: {
			node: true
			},
			'extends': [
			'plugin:vue/vue3-essential',
			'eslint:recommended'
			],
			parserOptions: {
			parser: '@babel/eslint-parser'
			},
			rules: {
			'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
			}
			}

New file
			@@ -0,0 +1,23 @@
			.DS_Store
			node_modules
			/dist


			# local env files
			.env.local
			.env.*.local

			# Log files
			npm-debug.log*
			yarn-debug.log*
			yarn-error.log*
			pnpm-debug.log*

			# Editor directories and files
			.idea
			.vscode
			*.suo
			.ntvs
			*.njsproj
			*.sln
			*.sw?

New file
			@@ -0,0 +1,11 @@
			module.exports = {
			"plugins": {
			"autoprefixer": {},
			'postcss-pxtorem': {
			rootValue({ file }) {
			return file.indexOf('vant') !== -1 ? 37.5 : 75;
			},
			propList: ['*']
			}
			}
			}

New file
			@@ -0,0 +1,12 @@
			module.exports = {
			presets: [
			'@vue/cli-plugin-babel/preset'
			],
			plugins: [
			['import', {
			libraryName: 'vant',
			libraryDirectory: 'es',
			style: true
			}, 'vant']
			]
			}

New file
			@@ -0,0 +1,19 @@
			{
			"compilerOptions": {
			"target": "es5",
			"module": "esnext",
			"baseUrl": "./",
			"moduleResolution": "node",
			"paths": {
			"@/*": [
			"src/*"
			]
			},
			"lib": [
			"esnext",
			"dom",
			"dom.iterable",
			"scripthost"
			]
			}
			}

New file
			@@ -0,0 +1,30 @@
			{
			"name": "dapp-wallet",
			"version": "0.1.0",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint"
			},
			"dependencies": {
			"@walletconnect/web3-provider": "^1.7.4",
			"core-js": "^3.8.3",
			"lib-flexible": "^0.3.2",
			"tronweb": "^4.1.0",
			"vant": "^3.4.6",
			"vue": "^3.2.13",
			"web3": "^1.7.1"
			},
			"devDependencies": {
			"@babel/core": "^7.12.16",
			"@babel/eslint-parser": "^7.12.16",
			"@vue/cli-plugin-babel": "~5.0.0",
			"@vue/cli-plugin-eslint": "~5.0.0",
			"@vue/cli-service": "~5.0.0",
			"babel-plugin-import": "^1.13.3",
			"eslint": "^7.32.0",
			"eslint-plugin-vue": "^8.0.3",
			"postcss-pxtorem": "^6.0.0"
			}
			}

New file
			@@ -0,0 +1,20 @@
			<!DOCTYPE html>
			<html lang="">
			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width,initial-scale=1.0">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title><%= htmlWebpackPlugin.options.title %></title>
			</head>
			<body>
			<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			<script>
			/(pad\|pod\|iPad\|iPod\|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
			</script>
			</body>
			</html>

New file
			@@ -0,0 +1,26 @@
			<template>
			<Index></Index>
			</template>

			<script>
			import Index from './pages/index/index'

			export default {
			name: 'App',
			components: {
			Index
			}
			}
			</script>

			<style>
			#app {
			font-family: Avenir, Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-align: center;
			color: #080808;
			background: #F8F8F8
			}

			</style>

New file
			@@ -0,0 +1,132 @@
			.flex{
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: -moz-box;
			display: -moz-flex;
			display: flex;
			}
			.flex-v{
			-webkit-box-orient: vertical;
			-webkit-flex-direction: column;
			-moz-box-orient: vertical;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			}
			.flex-1{
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-moz-box-flex: 1;
			-moz-flex: 1;
			-ms-flex: 1;
			flex: 1;
			}
			.flex-wrap{
			flex-wrap: wrap;
			}
			.align-center{
			-webkit-box-align: center;
			-webkit-align-items: center;
			-moz-box-align: center;
			-moz-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			}
			.align-end{
			-webkit-box-align: end;
			-webkit-align-items: flex-end;
			-moz-align-items: flex-end;
			-ms-align-items: flex-end;
			align-items: flex-end;
			}
			.justify-center{
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-moz-box-pack: center;
			-moz-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
			}
			.justify-between{
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			-moz-box-pack: justify;
			-moz-justify-content: space-between;
			-ms-flex-pack: justify;
			justify-content: space-between;
			}
			.justify-around{
			-webkit-box-pack: distribute;
			-webkit-justify-content: space-around;
			-moz-justify-content: space-around;
			-ms-justify-content: space-around;
			justify-content: space-around;
			}
			.justify-end{
			-webkit-box-pack: end;
			-webkit-justify-content: flex-end;
			-moz-justify-content: flex-end;
			-ms-justify-content: flex-end;
			justify-content: flex-end;
			}

			.van-dropdown-menu__bar{
			background: transparent;
			box-shadow: none
			}
			.van-dropdown-menu__title{
			font-size: 24px;
			color: #FFFFFF;
			}
			.van-dropdown-menu__title:after{
			top: 46%;
			border: 8px solid;
			border-color: transparent transparent #FFFFFF #FFFFFF;
			}
			.scale.van-tabs--line>.van-tabs__wrap{
			height: 156px;
			}
			.scale>.van-tabs__wrap>.van-tabs__nav>.van-tab{
			font-size: 32px;
			}
			.scale>.van-tabs__wrap>.van-tabs__nav>.van-tab--active{
			font-size: 48px;
			font-weight: bold;
			}
			.scale>.van-tabs__wrap>.van-tabs__nav>.van-tabs__line{
			background: #3D8AF2;
			bottom: 40px;
			}
			.scale .van-tab__text--ellipsis{
			overflow: visible
			}
			.van-tabs--card>.van-tabs__wrap{
			height: 78px;
			}
			.van-tabs__nav--card{
			border-radius: 40px;
			height: 78px;
			}
			.van-tab--card{
			padding: 16px 0;
			font-size: 32px;
			line-height: 78px;
			font-weight: bold;
			}
			.van-tab--card:nth-child(1).van-tab--active{
			border-radius: 40px 0 0 40px;
			}
			.van-tab--card:nth-child(3).van-tab--active{
			border-radius: 0 40px 40px 0;
			}
			.van-tab--shrink{
			padding: 0 28px ;
			}
			.tab-wrap .van-tabs__wrap{
			border-bottom: 1px solid #E9E9E9;
			}
			.van-tabs__nav--line.van-tabs__nav--shrink, .van-tabs__nav--line.van-tabs__nav--complete{
			padding-left: 0;
			padding-right: 0;
			}

New file
			@@ -0,0 +1,16 @@
			import { createApp } from 'vue'
			import { Button, DropdownMenu, DropdownItem, Tab, Tabs, Collapse, CollapseItem,Overlay } from 'vant';
			import App from './App.vue'
			import 'lib-flexible/flexible'
			import './assets/style/common.css'

			const app = createApp(App);
			app.use(Button);
			app.use(DropdownMenu);
			app.use(DropdownItem);
			app.use(Tab);
			app.use(Tabs);
			app.use(Collapse);
			app.use(CollapseItem);
			app.use(Overlay);
			app.mount('#app')

New file
			@@ -0,0 +1,258 @@
			<template>
			<div>
			<div class="box">
			<h3 class="title">我的账户</h3>
			<div class="box-content">
			<div class="row flex align-center justify-between">
			<span class="name">总产量</span>
			<span class="count">741522.920798 ETH</span>
			</div>
			<div class="row flex align-center justify-between">
			<span class="name">收入余额</span>
			<span class="count">3789 USDT</span>
			</div>
			<div class="row flex align-center justify-between">
			<span class="name">可兑换</span>
			<span class="count">62183 ETH</span>
			</div>
			</div>
			</div>
			<van-tabs type="card" color="#3D8AF2" title-active-color="#FFFFFF" title-inactive-color="#080808">
			<van-tab title="兑换">
			<div class="box">
			<h3 class="title">兑换</h3>
			<div class="box-content ">
			<div class="exchange flex justify-between">
			<div class="item flex-1">
			<div>
			<img src="../../assets/images/icon4.png"/>
			<span>ETH</span>
			</div>
			<input placeholder="0.000"/>
			</div>
			<img src="../../assets/images/icon6.png" class="exchange-icon"/>
			<div class="item flex-1 flex align-end flex-v">
			<div>
			<img src="../../assets/images/icon5.png"/>
			<span>USDT</span>
			</div>
			<span class="amount">0.0000</span>
			</div>
			</div>
			<span class="all">全部兑换</span>
			<button class="btn">兑换</button>
			<div class="tips">
			<p>价格：1ETH≈2562.47USDT</p>
			<p>从0.1分开始，将您挖掘的ETH硬币转换为USDT</p>
			</div>
			</div>
			</div>
			</van-tab>
			<van-tab title="提现">
			<div class="box">
			<h3 class="title">提现</h3>
			<div class="box-content">
			<div class="exchange flex justify-between">
			<div class="item flex-1">
			<div>
			<img src="../../assets/images/icon5.png"/>
			<span>USDT</span>
			</div>
			<input placeholder="0.000"/>
			<span class="all">提现金额</span>
			</div>
			<div class="item flex-1 flex align-end flex-v">
			<div>
			<img src="../../assets/images/icon5.png"/>
			<span>USDT</span>
			</div>
			<span class="amount">0.0000</span>
			<span class="all">总余额</span>
			</div>
			</div>
			<button class="btn">确认</button>
			<div class="tips">
			<p>USDT取款将在24小时内发送到您的USDT钱包地址，每天只
			能取款一次，从100USDT开始，每位矿工的费用为30USDT</p>
			</div>
			</div>
			</div>
			</van-tab>
			<van-tab title="记录">
			<div class="box">
			<h3 class="title">记录</h3>
			<div class="box-content">
			<div class="tab-wrap">
			<van-tabs v-model:active="active" shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
			<van-tab title="兑换">
			<div class="row flex align-center justify-between">
			<span class="name">时间</span>
			<span class="name">数量</span>
			<span class="name">状态</span>
			</div>
			<div class="row flex align-center justify-between" v-for="item in 8">
			<span>2022-3-11 10:20</span>
			<span>1000</span>
			<span>成功</span>
			</div>
			</van-tab>
			<van-tab title="提现">
			<div class="row flex align-center justify-between">
			<span class="name">时间</span>
			<span class="name">数量</span>
			<span class="name">状态</span>
			</div>
			<div class="row flex align-center justify-between" v-for="item in 8">
			<span>2022-3-11 10:20</span>
			<span>10000</span>
			<span>成功</span>
			</div>
			</van-tab>
			<van-tab title="采矿">
			<div class="row flex align-center justify-between">
			<span class="name">时间</span>
			<span class="name">类型</span>
			<span class="name">输出</span>
			</div>
			<div class="row flex align-center justify-between" v-for="item in 8">
			<span>2022-3-11 10:20</span>
			<span></span>
			<span></span>
			</div>
			</van-tab>
			</van-tabs>
			</div>
			</div>
			</div>
			</van-tab>
			</van-tabs>
			</div>
			</template>

			<script scope>
			import { ref } from 'vue';
			export default {
			name: 'account',
			setup() {
			const activeNames = ref(['1']);
			return { activeNames };
			},
			methods: {

			}
			}
			</script>

			<style scoped>
			.box{
			background: #FFFFFF;
			border-radius: 20px;
			padding: 24px 34px 32px;
			text-align: left;
			margin: 24px 24px 32px;
			}
			.box:not(:last-child){
			margin-bottom: 60px
			}
			.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{

			}
			.exchange{
			margin: 54px 0 0;
			}
			.exchange .item{
			color: #999999;
			font-size: 28px;
			}
			.exchange .item img{
			width: 40px;
			vertical-align: middle;
			margin-right: 8px;
			}
			.exchange .item input{
			width: 100%;
			color: #999999;
			font-size: 48px;
			border: 0;
			border-bottom: 1px solid #E9E9E9;
			padding: 20px 0;
			margin: 40px 0 0;
			font-weight: bold;
			}
			.exchange .item .amount{
			width: 100%;
			color: #FEAA4A;
			font-size: 32px;
			border-bottom: 1px solid #E9E9E9;
			padding: 20px 0;
			line-height: 56px;
			margin: 40px 0 0;
			text-align: right;
			font-weight: bold;
			}
			.exchange-icon{
			width: 64px;
			height: 64px;
			}
			.all{
			display: block;
			color: #3769CF;
			font-size: 28px;
			margin-top: 15px;
			}
			.btn{
			width: 100%;
			font-size: 32px;
			font-weight: bold;
			color: #F5F6F7;
			background: #3D8AF2;
			border-radius: 48px;
			padding: 26px;
			border: 0;
			box-shadow: 0px 3px 15px rgba(55, 105, 207, 0.3);
			margin: 62px 0 0;
			}
			.tips{
			color: #AFAFAF;
			font-size: 24px;
			margin-top: 48px;
			}
			.tips p{
			margin: 0;
			line-height: 32px;
			}
			.tab-wrap{
			margin: 20px -28px;
			}
			.row{
			font-size: 24px;
			color: #080808;
			padding: 0 28px;
			}
			.row .name{
			font-size: 28px;
			color: #999999
			}
			.row span:nth-child(1){
			width: 34%
			}
			.row span:nth-child(2){
			text-align: center
			}
			</style>

New file
			@@ -0,0 +1,161 @@
			<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>

New file
			@@ -0,0 +1,197 @@
			<template>
			<div>
			<div class="box">
			<h3 class="title">矿池数据</h3>
			<div class="box-content">
			<div class="row flex align-center justify-between">
			<span class="name">总产量</span>
			<span class="count em">741522.920798 ETH</span>
			</div>
			<div class="row flex align-center justify-between">
			<span class="name">有效节点</span>
			<span class="count em">38</span>
			</div>
			<div class="row flex align-center justify-between">
			<span class="name">参与者</span>
			<span class="count">123</span>
			</div>
			<div class="row flex align-center justify-between">
			<span class="name">用户收入</span>
			<span class="count">73235521.340353 USDT</span>
			</div>
			</div>
			</div>
			<h2 class="m-title">采矿</h2>
			<h3 class="m-subtitle">流动性采矿收入</h3>
			<div class="box">
			<h3 class="title">用户输出</h3>
			<div class="box-content">
			<div class="row flex align-center justify-between">
			<span class="name">地址</span>
			<span class="name">数量</span>
			</div>
			<div>
			<div class="row flex align-center justify-between" v-for="item in 8">
			<span class="small-name">TFptQTd********7j3bms</span>
			<span class="small-count">0.920798 ETH</span>
			</div>
			</div>
			</div>
			</div>
			<h2 class="m-title">帮助中心</h2>
			<h3 class="m-subtitle">希望对你有帮助</h3>
			<van-collapse v-model="activeNames">
			<van-collapse-item title="什么是节点挖掘？" name="1">
			USDT存储在自己的钱包中，0风险，新的区块链数据管理和计算模型，以促进DEFI生态。通过每个用户节点的总价值生产、无保留的流动性节点挖掘以及预挖掘和增量行为，所有ETH用户提供链上流动性，所有这些都将通过智能合约节点执行收入自动锁定。目前，您可以通过任何钱包参与，对矿工新一代节点进行挖掘，在通过流动性节点挖掘获得的总收入结束时，通过USDT代币分割每个用户的集中钱包。
			</van-collapse-item>
			<van-collapse-item title="采矿收入来自哪里？" name="2">
			一旦用户参与挖掘，流动性节点挖掘将被激活，每天节点挖掘产生的总金额将在24小时内结束，每个用户从Minres新一代流动性节点池中获取挖掘数据，用于计算收益。每日结算6次，每4小时结算1次，挖矿收益以液体节点池用户钱包代币百分比计算。成功提交社区后，挖掘收益将被释放到用户的中央钱包。移动节点挖掘的总量占用户钱包token总量的比例。你在移动池中拥有的代币越多，你从挖掘中获得的代币就越多。
			</van-collapse-item>
			<van-collapse-item title="我需要如何加入？" name="3">
			参与非破坏性和非担保流动性挖掘需要支付ETH或者TRX矿工费用才能收到替换金券，ETH钱包或者TRX钱包地址只需申请一次。成功后自动打开挖掘权限
			</van-collapse-item>
			<van-collapse-item title="我怎样提现？" name="4">
			您可以将每天生成的货币转换为USDT，然后启动提款。USDT取款将自动发送到您添加到节点的钱包地址，不支持其他地址
			</van-collapse-item>
			<van-collapse-item title="收益率是多少？" name="5">
			100USDT-499USDT收益率≈2%<br>
			500USDT-4999USDT收益率≈2.4%<br>
			5000USDT-29999USDT收益率≈2.8%<br>
			30000USDT-99999USDT收益率≈3.2%<br>
			100000USDT-499999USDT收益率≈3.6%<br>
			500000USDT-999999USDT收益率≈4.2%<br>
			1000000USDT-4999999USDT收益率≈4.8%<br>
			5000000USDT-9999999USDT收益率≈5.2%<br>
			100USDT以下沒有盈利。
			</van-collapse-item>
			<van-collapse-item title="额外的收益是什么？" name="6">
			当你每天有足够的挖掘量，并持续保持足够的时间，挖掘池将有很多奖励。有关更多详细信息，请联系在线客户服务。
			</van-collapse-item>
			<van-collapse-item title="如何联系你？" name="7">
			请发送电子邮件，我们将在收到电子邮件后立即回复您；miningusdtvip@gmail.com
			</van-collapse-item>
			</van-collapse>
			<h2 class="m-title">审计报告</h2>
			<h3 class="m-subtitle">我没有一份安全的审计报告</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">伙伴</h2>
			<h3 class="m-subtitle">我们的商业伙伴</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 };
			},
			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;
			text-align: justify;
			font-size: 26px;
			}
			</style>

New file
			@@ -0,0 +1,26 @@
			const { defineConfig } = require('@vue/cli-service')
			const webpack = require('webpack');

			module.exports = defineConfig({
			transpileDependencies: true,
			configureWebpack:{
			resolve: {
			alias: {
			querystring:false,
			url:false,
			os:false,
			crypto: false,
			stream: false,
			assert: false,
			http: false,
			https: false
			}
			},
			plugins: [
			new webpack.ProvidePlugin({
			process: "process/browser",
			Buffer: ["buffer", "Buffer"],
			}),
			]
			}
			})