|
|
@@ -1,916 +1,311 @@
|
|
|
<template>
|
|
|
+
|
|
|
<div class="home">
|
|
|
- <div class="top_nav">
|
|
|
- <div class="top_nav_cont">
|
|
|
- <a class="logo_a">
|
|
|
- <img src="@/assets/images/logo.png" />
|
|
|
- </a>
|
|
|
- <div class="tool_bar">
|
|
|
- <ul>
|
|
|
- <!-- <li>
|
|
|
- <a>
|
|
|
- <img src="@/assets/images/t-icon1.png" />
|
|
|
- </a>
|
|
|
- </li> -->
|
|
|
- <li>
|
|
|
- <a href="https://t.me/+Wrdk1D5ay9dhZjM1" target="_blank">
|
|
|
- <img src="@/assets/images/t-icon2.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="https://twitter.com/MyMyMoba" target="_blank">
|
|
|
- <img src="@/assets/images/t-icon3.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://discord.gg/Ha3j4qFCrR">
|
|
|
- <img src="@/assets/images/t-icon4.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="https://www.reddit.com/user/MyMyMoba11/" target="_blank">
|
|
|
- <img src="@/assets/images/t-icon5.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="https://medium.com/@mymymoba11" target="_blank">
|
|
|
- <img src="@/assets/images/t-icon6.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="first_part">
|
|
|
- <div class="words_cont">
|
|
|
- <h1>A NFT METAVERSE BLOCKCHAIN GAME</h1>
|
|
|
- <h2>
|
|
|
- <p>INTEGRATING A GAMIFIED DEFI</p>
|
|
|
- <p>AND PROFESSIONAL MOBA</p>
|
|
|
- </h2>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="sec_part">
|
|
|
- <div class="every_part_cont">
|
|
|
- <h3 class="every_part_title">Token</h3>
|
|
|
- </div>
|
|
|
- <div class="every_part_cont flex">
|
|
|
- <div class="token_main tleft">
|
|
|
- <img src="@/assets/images/token-icon.png" class="token_img" />
|
|
|
- <span class="font60 copfont">MMB</span>- the predominant value token
|
|
|
- as well as the governance token in our project, can bring blockchain
|
|
|
- players and game players together. MMB holders will be the leading
|
|
|
- voices as project develops and evolves.
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="three_part">
|
|
|
- <div class="every_part_cont">
|
|
|
- <h3 class="every_part_title">Game Features</h3>
|
|
|
- <div class="features_list">
|
|
|
- <ul class="clearfix">
|
|
|
- <li v-for="(item, index) in features_data" :key="index">
|
|
|
- <div class="features_img"><img :src="item.imgsrc" /></div>
|
|
|
- <div class="border_div">
|
|
|
- <div>
|
|
|
- <p class="features_name">{{ item.name }}</p>
|
|
|
- <p class="features_intro">{{ item.intro }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="four_part">
|
|
|
- <div class="every_part_cont">
|
|
|
- <h3 class="every_part_title tleft">roadmap</h3>
|
|
|
- <div class="map_cont">
|
|
|
- <!-- 1 -->
|
|
|
- <div class="every_map_box first_box">
|
|
|
- <img src="@/assets/images/home/map/map-line.png" class="map_line" />
|
|
|
- <div class="map_top">
|
|
|
- <div class="map_top_line"></div>
|
|
|
- <div class="map_top_words">
|
|
|
- <p>Q4</p>
|
|
|
- <p>2021</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="map_middle">
|
|
|
- <img src="@/assets/images/home/map/map-img1.png" />
|
|
|
- </div>
|
|
|
- <div class="map_bottom">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Organize team</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Brand & Strategy</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 2 -->
|
|
|
- <div class="every_map_box sec_box">
|
|
|
- <img src="@/assets/images/home/map/map-line.png" class="map_line" />
|
|
|
- <div class="map_top">
|
|
|
- <div class="map_top_line"></div>
|
|
|
- <div class="map_top_words">
|
|
|
- <p>Q1</p>
|
|
|
- <p>2022</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="map_middle">
|
|
|
- <img src="@/assets/images/home/map/map-img2.png" />
|
|
|
- </div>
|
|
|
- <div class="map_bottom">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Online official website</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Release social media</span>
|
|
|
- </li>
|
|
|
- <li><span class="dot_span"></span><span>Community</span></li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Release white pages</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Publish MMB Token</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Air drop in MMB Community</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Private sales</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Smart contract audit</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Decentralized NFT trading market</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span><span>Release Hero-NFT</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 3 -->
|
|
|
- <div class="every_map_box three_box">
|
|
|
- <img src="@/assets/images/home/map/map-line.png" class="map_line" />
|
|
|
- <div class="map_top">
|
|
|
- <div class="map_top_line"></div>
|
|
|
- <div class="map_top_words">
|
|
|
- <p>Q2</p>
|
|
|
- <p>2022</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="map_middle">
|
|
|
- <img src="@/assets/images/home/map/map-img3.png" />
|
|
|
- </div>
|
|
|
- <div class="map_bottom">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Bank MMB mortagage investment</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Hero Farm Hero-NFT MMB mining</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Decentralized exchange</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Hero-NFT development</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 4 -->
|
|
|
- <div class="every_map_box four_box">
|
|
|
- <img src="@/assets/images/home/map/map-line.png" class="map_line" />
|
|
|
- <div class="map_top">
|
|
|
- <div class="map_top_line"></div>
|
|
|
- <div class="map_top_words">
|
|
|
- <p>Q3</p>
|
|
|
- <p>2022</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="map_middle">
|
|
|
- <img src="@/assets/images/home/map/map-img4.png" />
|
|
|
- </div>
|
|
|
- <div class="map_bottom">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Officially release MOBA game </span>
|
|
|
- </li>
|
|
|
- <li><span class="dot_span"></span><span>Land auction</span></li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Open Hero skin system</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 5 -->
|
|
|
- <div class="every_map_box">
|
|
|
- <div class="map_top">
|
|
|
- <div class="map_top_line"></div>
|
|
|
- <div class="map_top_words">
|
|
|
- <p>Q4</p>
|
|
|
- <p>2022</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="map_middle">
|
|
|
- <img src="@/assets/images/home/map/map-img5.png" />
|
|
|
- </div>
|
|
|
- <div class="map_bottom">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Open MOBA tournaments</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span class="dot_span"></span
|
|
|
- ><span>Hero-NFT fighting for supremacy</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="five_part">
|
|
|
- <div class="every_part_cont">
|
|
|
- <h3 class="every_part_title">Core team</h3>
|
|
|
- <div class="swiper-box">
|
|
|
- <swiper :options="swiperOption">
|
|
|
- <swiper-slide class="swiper-slide" v-for="(item,index) in cat_tab_team" :key="index">
|
|
|
- <div class="cat_tab_team" :class="item.clicked?'clicked':''">
|
|
|
- <div class="team_people">
|
|
|
- <img :src="item.imgsrc" />
|
|
|
- <div class="team_words">
|
|
|
- <p class="font26 special-font">XX</p>
|
|
|
- <p class="font16 intro">xxxxxxxxx</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </swiper-slide>
|
|
|
- </swiper>
|
|
|
- <!-- <div class="swiper-button-prev"></div>
|
|
|
- <div class="swiper-button-next"></div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="foot_part">
|
|
|
- <h3 class="every_part_title">Follow us!</h3>
|
|
|
- <div class="tool_bar foot_tool">
|
|
|
- <ul>
|
|
|
- <!-- <li>
|
|
|
- <a>
|
|
|
- <img src="@/assets/images/f-nav-icon1.png" />
|
|
|
- </a>
|
|
|
- </li> -->
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://t.me/+Wrdk1D5ay9dhZjM1">
|
|
|
- <img src="@/assets/images/f-nav-icon2.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://twitter.com/MyMyMoba">
|
|
|
- <img src="@/assets/images/f-nav-icon3.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://discord.gg/Ha3j4qFCrR">
|
|
|
- <img src="@/assets/images/f-nav-icon4.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://www.reddit.com/user/MyMyMoba11/">
|
|
|
- <img src="@/assets/images/f-nav-icon5.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a target="_blank" href="https://medium.com/@mymymoba11">
|
|
|
- <img src="@/assets/images/f-nav-icon6.png" />
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- <div class="f_b_part">
|
|
|
- <span>Contact Us</span>
|
|
|
- <span>Report a Bug</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+
|
|
|
+
|
|
|
+<div>
|
|
|
+ <button style="" @click="addUSDT()">add USDT address</button>
|
|
|
+ <input type="text" style="width: 400px;" v-model="USDT">
|
|
|
+ <br />
|
|
|
+ <button style="" @click="addMMB()">add MMB address</button>
|
|
|
+ <input type="text" style="width: 400px;" v-model="MMB">
|
|
|
+ <br />
|
|
|
+ <button style="" @click="addKIT()">add KIT address</button>
|
|
|
+ <input type="text" style="width: 400px;" v-model="KIT">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="setApprovalForAll()">授权</button>
|
|
|
+ <input type="text" style="width: 400px;" v-model="approvalAddress">
|
|
|
+ <br />
|
|
|
+ <button style="" @click="isApprovalForAll()">检测是否授权</button>
|
|
|
+ <input type="text" style="width: 400px;" v-model="approvalAddress">
|
|
|
+ <input type="text" style="width: 50px;" v-model="isApproval">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="checkAddLiquidity()">查看添加流行性比例</button>
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenA">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenB">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountA</span>
|
|
|
+ <input type="text" v-model="amountA" @click="this.amountA='';this.amountB=''" >
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountB</span>
|
|
|
+ <input type="text" v-model="amountB" @click="this.amountA='';this.amountB=''">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="addLiquidity()">添加流动性</button>
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenA">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenB">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountA</span>
|
|
|
+ <input type="text" v-model="amountA">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountB</span>
|
|
|
+ <input type="text" v-model="amountB">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">toAddress</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="liquidityTo">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="removeLiquidity()">移除流动性</button>
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenA">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenB">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">LPAmount</span>
|
|
|
+ <input type="text" v-model="liquidityAmount">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">toAddress</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="liquidityTo">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="checkoutTokens()">查看币对信息</button>
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenA_2">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenB_2">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">币对地址</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokensAddress">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA数量</span>
|
|
|
+ <input type="text" style="width: 300px;" v-model="tokenAAmount">
|
|
|
+ <input type="text" style="width: 100px;" v-model="tokenAName">
|
|
|
+ <input type="text" style="width: 300px;" v-model="priceA">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB数量</span>
|
|
|
+ <input type="text" style="width: 300px;" v-model="tokenBAmount">
|
|
|
+ <input type="text" style="width: 100px;" v-model="tokenBName">
|
|
|
+ <input type="text" style="width: 300px;" v-model="priceB">
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button style="" @click="checkBuyTokens()">检测买入TokenA</button>===========
|
|
|
+ <button style="" @click="buyTokens()">买入TokenA</button>===========
|
|
|
+ <button style="" @click="exchange()">切换</button>
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenA</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenA_3">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">tokenB</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="tokenB_3">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountA_in</span>
|
|
|
+ <input type="text" v-model="amountA" @click="this.amountA='';this.amountB=''" >
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">amountB_out</span>
|
|
|
+ <input type="text" v-model="amountB" @click="this.amountA='';this.amountB=''">
|
|
|
+ <br />
|
|
|
+ <span style="color:#000;">toAddress</span>
|
|
|
+ <input type="text" style="width: 400px;" v-model="buyAddress">
|
|
|
+<br />
|
|
|
+ <!-- <button style="" @click="aaaa()">add token to metaMask</button>
|
|
|
+ <input type="text" v-model="aaa" @click="this.aaa=''"> -->
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// @ is an alias to /srcf-nav-icon1
|
|
|
+import walletMgr from '../wallet/WalletMgr.js'
|
|
|
+import Erc20 from '../wallet/contract/Erc20'
|
|
|
+import address from '../wallet/Address'
|
|
|
+import uniswapV2Router02 from '../wallet/contract/UniswapV2Router02'
|
|
|
+import UniswapV2Library from '../wallet/contract/UniswapV2Library'
|
|
|
+import { ethers } from 'ethers'
|
|
|
export default {
|
|
|
name: "Home",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- features_data: [
|
|
|
- {
|
|
|
- name: "Gamified Defi",
|
|
|
- intro: "A variety of gamified Defi gameplay",
|
|
|
- imgsrc:require('../assets/images/home/features/1.png'),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Socialization",
|
|
|
- intro: "A Moba game, fairly competing with friends around the world",
|
|
|
- imgsrc:require('../assets/images/home/features/2.png'),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Leasing",
|
|
|
- imgsrc:require('../assets/images/home/features/3.png'),
|
|
|
- intro:
|
|
|
- "Providing hero leasing services based on smart contract agreements. Moba players can play and win games without any threshold, and investors can easily enjoy asset appreciation",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "VR",
|
|
|
- imgsrc:require('../assets/images/home/features/4.png'),
|
|
|
- intro:
|
|
|
- "Supporting VR, Android, IOS multiple platforms and devices, and striving to create an immersive experience of the Moba Metaverse",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Hero",
|
|
|
- imgsrc:require('../assets/images/home/features/5.png'),
|
|
|
- intro:
|
|
|
- "Out-of-game hero development and battle gameplay based on Moba hero development",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Win-Win",
|
|
|
- imgsrc:require('../assets/images/home/features/6.png'),
|
|
|
- intro:
|
|
|
- "All hero skins are herokin-nft mined by players, not for sell",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "Earning",
|
|
|
- imgsrc:require('../assets/images/home/features/7.png'),
|
|
|
- intro:
|
|
|
- "Not only having Play to Earn but also innovative Participate to Earn, allowing more people to share development dividends",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "DAO",
|
|
|
- imgsrc:require('../assets/images/home/features/8.png'),
|
|
|
- intro:
|
|
|
- "DAO more community participation in content creation and community-driven game development",
|
|
|
- },
|
|
|
- ],
|
|
|
- cat_tab_team: [
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- imgsrc: require('../assets/images/home/team/1.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- imgsrc: require('../assets/images/home/team/2.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '3',
|
|
|
- imgsrc: require('../assets/images/home/team/3.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '4',
|
|
|
- imgsrc: require('../assets/images/home/team/4.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '5',
|
|
|
- imgsrc: require('../assets/images/home/team/5.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '6',
|
|
|
- imgsrc: require('../assets/images/home/team/6.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '7',
|
|
|
- imgsrc: require('../assets/images/home/team/7.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: '8',
|
|
|
- imgsrc: require('../assets/images/home/team/8.png'),
|
|
|
- name: 'XX', intro: `xxxxxxxxx`, clicked: true
|
|
|
- },
|
|
|
- ],
|
|
|
- swiperOption: {
|
|
|
- slidesPerView : 4,
|
|
|
- speed:1500,
|
|
|
- //显示分页
|
|
|
- pagination: {
|
|
|
- el: '.swiper-pagination',
|
|
|
- clickable:true //允许分页点击跳转
|
|
|
- },
|
|
|
- //设置点击箭头
|
|
|
- navigation: {
|
|
|
- nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
|
|
|
- prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
|
|
|
- },
|
|
|
- autoplay: 4000,
|
|
|
- //开启无限循环模式
|
|
|
- loop:true,
|
|
|
- //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
|
|
|
- mousewheel:false,
|
|
|
- }
|
|
|
- };
|
|
|
+ USDT:"0x563629bA101745864271Bc2cdD6C575Dd68393Fd",
|
|
|
+ MMB:"0xd094FE68Ab1196a644A80a2A5687ed42c7B9d2e9",
|
|
|
+ KIT:"0x975a6eE5B33CB29B0fF5d5F3CE238f31D19643EE",
|
|
|
+ approvalAddress:"",
|
|
|
+ tokenA:"0x563629bA101745864271Bc2cdD6C575Dd68393Fd",
|
|
|
+ tokenB:"0xd094FE68Ab1196a644A80a2A5687ed42c7B9d2e9",
|
|
|
+ amountA:"",
|
|
|
+ amountB:"",
|
|
|
+ liquidityTo:"",
|
|
|
+ liquidityAmount:"",
|
|
|
+ isApproval:"false",
|
|
|
+ tokensAddress:"",
|
|
|
+ tokenAAmount:"",
|
|
|
+ tokenBAmount:"",
|
|
|
+ tokenAName:"",
|
|
|
+ tokenBName:"",
|
|
|
+ priceA:"",
|
|
|
+ priceB:"",
|
|
|
+ tokenA_2:"0x563629bA101745864271Bc2cdD6C575Dd68393Fd",
|
|
|
+ tokenB_2:"0xd094FE68Ab1196a644A80a2A5687ed42c7B9d2e9",
|
|
|
+ tokenA_3:"0x563629bA101745864271Bc2cdD6C575Dd68393Fd",
|
|
|
+ tokenB_3:"0xd094FE68Ab1196a644A80a2A5687ed42c7B9d2e9",
|
|
|
+ buyAddress:"",
|
|
|
+ isTokenA:false,
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- toggleBodyClass() {
|
|
|
- let e = document.querySelector("body");
|
|
|
- let e1 = document.querySelector("#app");
|
|
|
- e1.scrollTop > 0
|
|
|
- ? e.classList.add("scrolladd")
|
|
|
- : e.classList.remove("scrolladd");
|
|
|
+ exchange(){
|
|
|
+ let a = this.tokenA_3;
|
|
|
+ this.tokenA_3 = this.tokenB_3
|
|
|
+ this.tokenB_3 = a;
|
|
|
+ a = this.amountA;
|
|
|
+ this.amountA = this.amountB;
|
|
|
+ this.amountB = a;
|
|
|
+ this.isTokenA = !this.isTokenA
|
|
|
+ },
|
|
|
+ buyTokens(){
|
|
|
+ if(this.isTokenA){
|
|
|
+ uniswapV2Router02.swapExactTokensForTokens(this.amountA,0,[this.tokenA_3,this.tokenB_3],this.buyAddress,100000000000);
|
|
|
+ }else{
|
|
|
+ let amountInMax = ethers.BigNumber.from("10000000000000000000000000")
|
|
|
+ uniswapV2Router02.swapTokensForExactTokens(this.amountB,amountInMax,[this.tokenA_3,this.tokenB_3],this.buyAddress,100000000000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkBuyTokens(){
|
|
|
+ this.isTokenA = false;
|
|
|
+ if(this.tokenA_3 < this.tokenB_3){
|
|
|
+ if (this.amountA != ""){
|
|
|
+ this.isTokenA = true;
|
|
|
+ uniswapV2Router02.getAmountsOut(this.amountA,[this.tokenA_3,this.tokenB_3],(x)=>{
|
|
|
+ console.log(x);
|
|
|
+ this.amountB = x.data[1];
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uniswapV2Router02.getAmountsIn(this.amountB,[this.tokenA_3,this.tokenB_3],(x)=>{
|
|
|
+ this.amountA = x.data[0];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if (this.amountA != ""){
|
|
|
+ this.isTokenA = true;
|
|
|
+ uniswapV2Router02.getAmountsIn(this.amountA,[this.tokenA_3,this.tokenB_3],(x)=>{
|
|
|
+ this.amountB = x.data[0];
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uniswapV2Router02.getAmountsOut(this.amountB,[this.tokenA_3,this.tokenB_3],(x)=>{
|
|
|
+ console.log(x);
|
|
|
+ this.amountA = x.data[1];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addUSDT(){
|
|
|
+ walletMgr.addTokensToMetaMask(this.USDT);
|
|
|
+ },
|
|
|
+ addMMB(){
|
|
|
+ walletMgr.addTokensToMetaMask(this.MMB);
|
|
|
+ },
|
|
|
+ addKIT(){
|
|
|
+ walletMgr.addTokensToMetaMask(this.KIT);
|
|
|
+ },
|
|
|
+ checkAddLiquidity(){
|
|
|
+ UniswapV2Library.getReserves(this.tokenA,this.tokenB,(x)=>{
|
|
|
+ let tokenAAmount = x.data.tokenAAmount;
|
|
|
+ let tokenBAmount = x.data.tokenBAmount;
|
|
|
+ if(this.amountA == ""){
|
|
|
+ UniswapV2Library.quote(this.amountB,tokenBAmount,tokenAAmount,(x)=>{
|
|
|
+ this.amountA = x.data;
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ UniswapV2Library.quote(this.amountA,tokenAAmount,tokenBAmount,(x)=>{
|
|
|
+ this.amountB = x.data;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addLiquidity(){
|
|
|
+ uniswapV2Router02.addLiquidity(this.tokenA,this.tokenB,this.amountA,this.amountB,1000,10000,this.liquidityTo,100000000000000,
|
|
|
+ (x)=>{
|
|
|
+ console.log("fun1:",x);
|
|
|
+ },(x)=>{
|
|
|
+ console.log("fun2:",x);
|
|
|
+ alert(x.code);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ removeLiquidity(){
|
|
|
+ uniswapV2Router02.removeLiquidity(this.tokenA,this.tokenB,this.liquidityAmount,0,0,this.liquidityTo,100000000000000,
|
|
|
+ (x)=>{
|
|
|
+ console.log("fun1:",x);
|
|
|
+ },(x)=>{
|
|
|
+ console.log("fun2:",x);
|
|
|
+ alert(x.code);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ setApprovalForAll(){
|
|
|
+ Erc20.setApprovalForAll(this.approvalAddress,address.address.UniswapV2Router02,
|
|
|
+ (x)=>{
|
|
|
+ console.log("fun1:",x);
|
|
|
+ },(x)=>{
|
|
|
+ console.log("fun2:",x);
|
|
|
+ alert(x.code);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ isApprovalForAll(){
|
|
|
+ this.isApproval = false;
|
|
|
+ Erc20.isApprovalForAll(this.approvalAddress,address.address.UniswapV2Router02,(x)=>{
|
|
|
+ this.isApproval = x.data;
|
|
|
+ console.log("bool:",x);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async checkoutTokens(){
|
|
|
+ this.tokensAddress = "";
|
|
|
+ this.tokenAAmount = "";
|
|
|
+ this.tokenBAmount = "";
|
|
|
+ UniswapV2Library.pairFor(this.tokenA_2,this.tokenB_2,(x)=>{
|
|
|
+ this.tokensAddress = x.data;
|
|
|
+ })
|
|
|
+ UniswapV2Library.getReserves(this.tokenA_2,this.tokenB_2,(x)=>{
|
|
|
+ this.tokenAAmount = x.data.tokenAAmount;
|
|
|
+ this.tokenBAmount = x.data.tokenBAmount;
|
|
|
+ this.priceA = ethers.FixedNumber.fromValue(this.tokenBAmount,2).divUnsafe( ethers.FixedNumber.fromValue(this.tokenAAmount,2))
|
|
|
+ this.priceB = ethers.FixedNumber.fromValue(this.tokenAAmount,2).divUnsafe( ethers.FixedNumber.fromValue(this.tokenBAmount,2))
|
|
|
+ })
|
|
|
+
|
|
|
+ let info = await Erc20.getTokenInfo(this.tokenA_2);
|
|
|
+ this.tokenAName = info.symbol+" "+info.decimals
|
|
|
+ info = await Erc20.getTokenInfo(this.tokenB_2);
|
|
|
+ this.tokenBName = info.symbol+" "+info.decimals
|
|
|
+ console.log(this.tokenBName)
|
|
|
+
|
|
|
},
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- let e = document.querySelector("#app");
|
|
|
- e.removeEventListener("scroll", this.toggleBodyClass);
|
|
|
+
|
|
|
},
|
|
|
mounted() {
|
|
|
- let $this = this;
|
|
|
- let e = document.querySelector("#app");
|
|
|
- console.log(e);
|
|
|
- e.addEventListener("scroll", this.toggleBodyClass);
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
-.home {
|
|
|
- width: 100%;
|
|
|
- max-width: 1920px;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-.top_nav {
|
|
|
- width: 100vw;
|
|
|
- height: 6vw;
|
|
|
- min-height: 60px;
|
|
|
- max-height: 98px;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- transition: transform 0.5s;
|
|
|
- z-index: 2;
|
|
|
-}
|
|
|
-.top_nav_cont {
|
|
|
- width: 100%;
|
|
|
- max-width: 1480px;
|
|
|
- margin: 0 auto;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.logo_a {
|
|
|
- cursor: pointer;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.logo_a img {
|
|
|
- max-width: 278px;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.tool_bar ul {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-}
|
|
|
-.tool_bar ul li {
|
|
|
- padding: 0 15px;
|
|
|
-}
|
|
|
-.tool_bar ul li a {
|
|
|
- cursor: pointer;
|
|
|
- display: block;
|
|
|
- width: 28px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.tool_bar ul li a img {
|
|
|
- width: 26px;
|
|
|
- opacity: 0.8;
|
|
|
-}
|
|
|
-.tool_bar ul li a:hover img {
|
|
|
- width: 28px;
|
|
|
- opacity: 1;
|
|
|
-}
|
|
|
-/* top header */
|
|
|
-.scrolladd .top_nav {
|
|
|
- transform: translateY(-5px);
|
|
|
- background: #000;
|
|
|
-}
|
|
|
-.scrolladd .top_nav .logo_a,
|
|
|
-.scrolladd .top_nav .tool_bar {
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-.first_part,
|
|
|
-.sec_part,
|
|
|
-.three_part,
|
|
|
-.four_part,
|
|
|
-.five_part {
|
|
|
- width: 100%;
|
|
|
- min-height: 100vh;
|
|
|
-}
|
|
|
-.first_part {
|
|
|
- background: url(../assets/images/bg.jpg) no-repeat center top;
|
|
|
- background-size: cover;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.words_cont {
|
|
|
- letter-spacing: 4px;
|
|
|
- width: 100%;
|
|
|
- max-width: 1480px;
|
|
|
- padding: 0 20px;
|
|
|
- margin: 0 auto;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.words_cont h1 {
|
|
|
- font-size: 60px;
|
|
|
- font-weight: 900;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 1.2em;
|
|
|
- background: linear-gradient(134deg, #eaba99 0%, #ddc8b7 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
-}
|
|
|
-.words_cont h2 {
|
|
|
- color: #fff;
|
|
|
- font-size: 30px;
|
|
|
- line-height: 1.5em;
|
|
|
- margin-top: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-.sec_part {
|
|
|
- background: url(../assets/images/bg2.jpg) no-repeat center top;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.three_part {
|
|
|
- background: url(../assets/images/bg3.png) no-repeat center top;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.four_part {
|
|
|
- background: url(../assets/images/bg4.png) no-repeat center top;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.five_part {
|
|
|
- background: url(../assets/images/bg1.png) no-repeat center top;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.foot_part {
|
|
|
- background: #000;
|
|
|
- width: 100%;
|
|
|
- padding: 6.25vw 0;
|
|
|
-}
|
|
|
-.every_part_cont {
|
|
|
- width: 100%;
|
|
|
- max-width: 1480px;
|
|
|
- padding: 6.25vw 20px;
|
|
|
- margin: 0 auto;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.every_part_cont.flex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-h3.every_part_title {
|
|
|
- font-size: 48px;
|
|
|
- font-family: 'ColusRegular';
|
|
|
- font-weight: bold;
|
|
|
- color: #eaba99;
|
|
|
- line-height: 1em;
|
|
|
- letter-spacing: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-// sec
|
|
|
-.token_main {
|
|
|
- width: calc(57.8vw + 100px);
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 2em;
|
|
|
- letter-spacing: 1px;
|
|
|
- padding: 60px 8vw 60px 14vw;
|
|
|
- background: linear-gradient(
|
|
|
- -45deg,
|
|
|
- transparent 6%,
|
|
|
- rgba(234, 186, 153, 0.5) 0
|
|
|
- )
|
|
|
- bottom right;
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: relative;
|
|
|
- margin-left: 8.8vw;
|
|
|
-}
|
|
|
-.token_img {
|
|
|
- position: absolute;
|
|
|
- width: 38vw;
|
|
|
- left: -16vw;
|
|
|
- top: -16vw;
|
|
|
-}
|
|
|
-.copfont {
|
|
|
- font-family: 'ColusRegular';
|
|
|
-}
|
|
|
-// three7778
|
|
|
-.features_list {
|
|
|
- margin: 40px auto 0;
|
|
|
-}
|
|
|
-.features_list ul li {
|
|
|
- width: calc(25% - 20px);
|
|
|
- height: 390px;
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- margin: 10px;
|
|
|
- color: #fff;
|
|
|
- background: url(../assets/images/home/features/features-bg.png) no-repeat center top;
|
|
|
-}
|
|
|
-.features_img{width: 100%;display: flex;height: 50%;text-align: center;justify-content: center;align-items: top;}
|
|
|
-.features_list ul li img {
|
|
|
- max-width: 100%;
|
|
|
-}
|
|
|
-.features_list ul li .border_div {
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: 380px;
|
|
|
- position: absolute;
|
|
|
- top: -10px;
|
|
|
- left: 10px;
|
|
|
- padding-top: 63.5%;
|
|
|
- background: url(../assets/images/home/features/features-border.png) no-repeat
|
|
|
- center top;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-.features_name {
|
|
|
- font-family: "ColusRegular";
|
|
|
- color: #eaba99;
|
|
|
- font-size: 24px;
|
|
|
- padding: 0 14px;
|
|
|
- word-break: break-all;
|
|
|
-}
|
|
|
-.features_intro {
|
|
|
- padding: 10px 14px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5em;
|
|
|
-}
|
|
|
-// four
|
|
|
-.map_cont {
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.every_map_box {
|
|
|
- position: relative;
|
|
|
- width: 20%;
|
|
|
- padding-top: 107px;
|
|
|
-}
|
|
|
-.first_box {
|
|
|
- margin-top: 304px;
|
|
|
-}
|
|
|
-.sec_box {
|
|
|
- margin-top: 230px;
|
|
|
-}
|
|
|
-.three_box {
|
|
|
- margin-top: 154px;
|
|
|
-}
|
|
|
-.four_box {
|
|
|
- margin-top: 76px;
|
|
|
-}
|
|
|
-.map_top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- left: 42px;
|
|
|
- top: 0;
|
|
|
-}
|
|
|
-.map_top_line {
|
|
|
- width: 3px;
|
|
|
- height: 107px;
|
|
|
- background: #eaba99;
|
|
|
- clip-path: polygon(0 0, 100% 0, 50% 100%);
|
|
|
-}
|
|
|
-.map_top_words {
|
|
|
- font-size: 30px;
|
|
|
- text-align: left;
|
|
|
- font-family: "ColusRegular";
|
|
|
- margin-left: 4px;
|
|
|
-}
|
|
|
-.map_middle {
|
|
|
- width: 84px;
|
|
|
- height: 100px;
|
|
|
- background: url(../assets/images/home/map/map-circle.png) no-repeat center top;
|
|
|
- position: relative;
|
|
|
- padding: 6px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-size: 100% auto;
|
|
|
-}
|
|
|
-.map_middle img{width: 100%;}
|
|
|
-.map_line {
|
|
|
- position: absolute;
|
|
|
- width: calc(100% - 80px);
|
|
|
- height: 70px;
|
|
|
- top: 50px;
|
|
|
- right: 2px;
|
|
|
-}
|
|
|
-.map_bottom {
|
|
|
- margin-left: 42px;
|
|
|
- margin-top: 18px;
|
|
|
-}
|
|
|
-.map_bottom ul li {
|
|
|
- text-align: left;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- margin: 8px 0;
|
|
|
-}
|
|
|
-.dot_span {
|
|
|
- display: block;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- background: #eaba99;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.map_bottom ul li span:not(.dot_span) {
|
|
|
- margin-left: 5px;width: calc(100% - 9px);
|
|
|
- color: #ffffff;
|
|
|
- text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
|
|
|
- word-break: break-all;
|
|
|
-}
|
|
|
-// five
|
|
|
- .swiper-box {
|
|
|
- width: 100%;height: 60vh;
|
|
|
- margin: 50px auto 30px;
|
|
|
- position: relative;
|
|
|
- padding: 0 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: static;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-button-prev,
|
|
|
- .swiper-box .swiper-button-next {
|
|
|
- color: #be9a5e !important;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-button-prev:after,
|
|
|
- .swiper-box .swiper-button-next:after {
|
|
|
- font-size: 20px !important;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-button-next,
|
|
|
- .swiper-box .swiper-container-rtl .swiper-button-prev {
|
|
|
- right: -8px;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-button-prev,
|
|
|
- .swiper-box .swiper-container-rtl .swiper-button-next {
|
|
|
- left: -8px;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box .swiper-slide {
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .cat_tab_team img{max-width: 100%;}
|
|
|
-
|
|
|
- .swiper-box .swiper-button-prev.swiper-button-disabled,
|
|
|
- .swiper-box .swiper-button-next.swiper-button-disabled {
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
|
|
|
- .swiper-box .swiper-container{
|
|
|
- .swiper-wrapper {
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-}
|
|
|
-.team_people{width: 200px;}
|
|
|
-.team_words{padding: 25px 10px 10px;background: url(../assets/images/team-bg.png);margin-top: -6px;height: 179px;}
|
|
|
-.team_words .special-font{color: #eaba99;}
|
|
|
-.team_words .intro{margin-top: 10px;}
|
|
|
-// foot
|
|
|
-.tool_bar.foot_tool {
|
|
|
- width: 316px;
|
|
|
- margin: 40px auto;
|
|
|
-}
|
|
|
-.tool_bar.foot_tool ul li{height: 28px;}
|
|
|
-.f_b_part {
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- width: 316px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-@media screen and (max-width: 1180px) {
|
|
|
- .map_line {
|
|
|
- height: 58px;
|
|
|
- top: 60px;
|
|
|
- }
|
|
|
- .four_box {
|
|
|
- margin-top: 65px;
|
|
|
- }
|
|
|
- .three_box {
|
|
|
- margin-top: 133px;
|
|
|
- }
|
|
|
- .sec_box {
|
|
|
- margin-top: 198px;
|
|
|
- }
|
|
|
- .first_box {
|
|
|
- margin-top: 264px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 950px) {
|
|
|
- .features_list ul li {
|
|
|
- width: calc(33.3% - 20px);
|
|
|
- }
|
|
|
- .features_list ul li .border_div {
|
|
|
- padding-top: 20vw;
|
|
|
- }
|
|
|
- .features_name {
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
- .map_top{left: 32px;}
|
|
|
- .map_top_line{height: 55px;width: 2px;}
|
|
|
- .every_map_box{padding-top: 55px;}
|
|
|
- .map_top_words{font-size: 22px;}
|
|
|
- .map_line {
|
|
|
- height: 45px;
|
|
|
- top: 24px;
|
|
|
- width: calc(100% - 64px);right: 1px;
|
|
|
- }
|
|
|
- .map_middle{
|
|
|
- width: 64px;
|
|
|
- height: 77px;
|
|
|
- padding: 4px;
|
|
|
- }
|
|
|
- .map_bottom {
|
|
|
- margin-left: 32px;
|
|
|
- margin-top: 0px;
|
|
|
-}
|
|
|
- .four_box {
|
|
|
- margin-top: 45px;
|
|
|
- }
|
|
|
- .three_box {
|
|
|
- margin-top: 91px;
|
|
|
- }
|
|
|
- .sec_box {
|
|
|
- margin-top: 136px;
|
|
|
- }
|
|
|
- .first_box {
|
|
|
- margin-top: 184px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 700px) {
|
|
|
- .features_list ul li {
|
|
|
- width: calc(50% - 20px);
|
|
|
- }
|
|
|
- .features_list ul li .border_div {
|
|
|
- padding-top: 28vw;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 650px) {
|
|
|
- .tool_bar ul li {
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 500px) {
|
|
|
- .features_list ul li {
|
|
|
- width: 100%;
|
|
|
- max-width: 330px;
|
|
|
- float: none;
|
|
|
- margin: 10px auto;
|
|
|
- }
|
|
|
- .features_list ul li .border_div {
|
|
|
- padding-top: 205px;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
