首页切图完成

pages/index/components/division.vue

@@ -0,0 +1,31 @@
+<template>
+  <view class="division-box">
+
+  </view>
+</template>
+
+<script>
+export default {
+  name: "division",
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.division-box{
+  width: 100%;
+  height: 10rpx;
+  background-color: rgb(246, 247, 249);
+  margin-top: 40rpx;
+}
+
+</style>

pages/index/index-two.vue

@@ -0,0 +1,619 @@
+<template>
+  <view class="index-data">
+    <view class="index-top">
+      <view class="top-head">
+        <view class="head-item head-left">
+          <view class="left-img">
+            <image src="@/static/img/index/logo.gif" mode="aspectFill"></image>
+          </view>
+          <view class="left-text">bnb.dao</view>
+        </view>
+        <view class="head-item head-right">
+          <view class="right-img" @click.stop="setShowLang"><image src="@/static/img/index/lang-img.png" mode="aspectFill"></image></view>
+          <view class="right-text">{{getShowAddress()}}</view>
+        </view>
+      </view>
+      <view class="top-lang" :class="{'show-lang':showLang}">
+        <view class="lang-item" v-for="langItem in langList" @click.stop="setLocaleLang(langItem.name)">{{langItem.value}}</view>
+      </view>
+    </view>
+    <view :style="{'height':(100+(showLang?langList.length*100:0))+'rpx'}"></view>
+    <view class="index-tab">
+        <view class="tab-items">
+          <view class="tab-item" @click.stop="setTabNum(1)" :class="{'select-item':tabNum===1}">{{$t('index.index.tab.one')}}</view>
+          <view class="tab-item" @click.stop="setTabNum(0)" :class="{'select-item':tabNum===0}">{{$t('index.index.tab.two')}}</view>
+        </view>
+        <view class="tab-item-bg" :class="{'bg-location-1':tabNum===1,'bg-location-0':tabNum===0}"></view>
+    </view>
+    <view class="tab-one" v-if="tabNum===0">
+      <view class="index-content">
+        <view class="content-my" @click="setInvest">
+          <view class="my-img"><image src="@/static/img/index/my-img.png"></image></view>
+          <view class="my-text">{{$t('index.index.my.title')}}</view>
+        </view>
+        <view class="content-data">
+          <view class="data-item">BP1.08</view>
+          <view class="data-item">{{$t('index.index.data.text')}}</view>
+        </view>
+        <view class="content-item">
+          <view class="item-value">{{$t('index.index.item.one')}} : {{memberData.levelName}}</view>
+          <view class="item-value">ID : {{memberData.invite_code}}</view>
+        </view>
+        <view class="content-item">
+          <view class="item-value">{{$t('index.index.item.two')}} : {{memberData.recommendNum}}</view><view class="item-value"></view>
+        </view>
+        <view class="content-item">
+          <view class="item-value">{{$t('index.index.item.three')}} : {{memberData.teamNum}}</view><view class="item-value"></view>
+        </view>
+        <view class="content-share">
+          <view class="share-title">{{$t('index.index.share.one')}}</view>
+          <view class="share-join">{{$t('index.index.share.two')}}</view>
+          <view class="share-join share-copy">{{$t('index.index.share.three')}}</view>
+        </view>
+      </view>
+      <view class="index-list">
+        <view class="list-title">
+          <view class="title-img"><image src="@/static/img/index/my-img.png"></image></view>
+          <view class="title-text">{{$t('index.index.list.title')}}</view>
+        </view>
+        <view class="list-item">
+          <view class="item-name">{{$t('index.index.list.item1')}}</view>
+          <view class="item-name">{{$t('index.index.list.item2')}}</view>
+          <view class="item-name">{{$t('index.index.list.item3')}}</view>
+          <view class="item-name">{{$t('index.index.list.item4')}}</view>
+        </view>
+      </view>
+
+    </view>
+    <view class="tab-two" v-else>
+      <view class="content-item content-one">
+        <view class="content-title">
+          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Contracts</view></view>
+          <view class="title-item"><view class="item-text">How bn.dao contracts work</view></view>
+        </view>
+        <view class="content-img">
+          <image src="@/static/img/index/p_0.c3c2de4e.png"></image>
+        </view>
+        <view class="content-text">
+          <view class="text-title">The main advantage of the bn.dao ?</view>
+          <view class="text-title">One key to start</view>
+          <view class="text-title">Provide users with an integrated solution to automatically income that takes into account both high yield and high liquidity. Even novice users can easily get started.</view>
+        </view>
+        <view class="content-but">Start now</view>
+
+      </view>
+      <view class="content-item content-two">
+        <view class="content-title">
+          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Earn interest</view></view>
+          <view class="title-item"><view class="item-text">The interest source of the</view></view>
+        </view>
+        <view class="content-text">
+          <view class="text-title">It aims to become a high-yield stablecoin Yu'e Bao, providing users with stablecoin interest income with the highest return in the market. Currently supported currencies Including
+            BNB (BSC) based on Ethereum, BNB (BEP20) based on Binance based. Users only need to deposit tokens into the cooperative wallet App, and they can periodically obtain interest
+            income.</view>
+          <view class="text-title">As an interest aggregator, the BSC network has opened up a lending/liquidity protocol at the bottom layer. Through predictable currency holding data, we can dynamically adjust the
+            transaction volume according to the rise and fall of miners' fees, which can provide users with access to market The highest deposit interest. We will continue to evaluate and
+            integrate more open financial protocols, including Hybrid lending platform.</view>
+        </view>
+        <view class="content-but">Start now</view>
+      </view>
+
+    </view>
+    <view class="index-button">
+      <view class="button-item">Binance Smart Contract</view>
+      <view class="button-item">Financial Program</view>
+    </view>
+
+  </view>
+
+</template>
+<script>
+import {getInvestData, setInvest} from "@/api/contract";
+import tools from "@/common/js/tools";
+import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
+import {getMemberInfo} from "@/api/member";
+
+export default {
+  components: {},
+  data() {
+    return {
+      applicationLocale: '',
+      systemLocale: '',
+      showLang: false,
+      isAjax: false,
+      langList:[{'name':'zh-Hans','value':'简体中文'},{'name':'en','value':'English'},{'name':'ja','value':'日本語'},{'name':'ko','value':'한국어'}],
+      tabNum:0,
+      investData:{
+        id: 1,
+        invest_money: '',
+        sysAddress: "",
+        sendNum: "",
+      },
+      memberData:{
+        "id": 30,
+        "address": "",
+        "invite_code": "72592982",
+        "level_id": 0,
+        "levelName": "V0",
+        "recommendNum": 0,
+        "teamNum": 0
+      },
+      bnbNum:0,
+      babAddress:''
+
+    }
+
+  },
+  watch: {},
+  async onLoad(query) {
+    this.applicationLocale = uni.getLocale();
+    this.getInvestData()
+    this.bnbNum = await tokenpocketBnb.getBalance();
+    console.log('this.bnbNum:'+this.bnbNum)
+   this.getMyData()
+  },
+  mounted() {
+
+  },
+  methods: {
+    getShowAddress(){
+      return tools.getShowAddress(this.babAddress)
+    },
+    setShowLang() {
+      this.showLang = !this.showLang
+    },
+    setLocaleLang(code) {
+      uni.setLocale(code);
+      this.$i18n.locale = code;
+      this.applicationLocale = code;
+      this.showLang = false
+    },
+    setTabNum(tabNum){
+      if(tabNum!==this.tabNum){
+        this.tabNum=tabNum
+      }
+    },
+    getMyData(){
+      this.babAddress= tokenpocketBnb.getMyAddress()
+      getMemberInfo().then((res)=>{
+        if(res.code===1){
+          this.memberData=res.data
+        }
+      })
+    },
+    getInvestData() {
+      getInvestData().then((res) => {
+        if (res.code === 1) {
+          this.investData = res.data
+        } else {
+          tools.goToError(4)
+        }
+      }).catch((e) => {
+        tools.goToError(4)
+      })
+    },
+    async setInvest() {
+      if (this.bnbNum < this.investData.invest_money && !tools.isDevelopment()) {
+        tools.error(this.$t('index.index.invest.no_usdt'))
+        return
+      }
+      if (this.isAjax) {
+        return
+      }
+      // this.isAjax = true
+       tokenpocketBnb.getTransactionData(this.investData.sysAddress, 0.0001).then((data)=>{
+         try {
+           tokenpocketBnb.sendTransaction(data).then((res)=>{
+             this.sendSetInvest(res)
+           }).catch((e)=>{
+             tools.error(this.$t('index.index.invest.send_no'))
+           })
+         }catch (e) {
+           tools.error(this.$t('index.index.invest.send_no'))
+         }
+       })
+    },
+    sendSetInvest(hashRes){
+      setInvest({'txid':hashRes,'id':this.investData.id}).then((res)=>{
+        if(res.code===1){
+          tools.success(res.msg)
+          // setTimeout(()=>{
+          //   tools.leftClick()
+          // },1500)
+        }else {
+          this.isAjax = false
+          tools.error(res.msg)
+        }
+      })
+    },
+
+
+  },
+}
+</script>
+<style lang="scss" scoped>
+.index-data {
+  min-height: 100vh;
+  background: rgb(21, 26, 47);
+  position: relative;
+  .index-top{
+    z-index: 100;
+    position: fixed;
+    width: 100vw;
+    padding: 20rpx;
+    color: #fff;
+    background: rgba(0,0,0,.67);
+    box-sizing: border-box;
+    .top-head{
+      height: 60rpx;
+      display: flex;
+      justify-content: space-between;
+      .head-item{
+        height: 60rpx;
+        display: flex;
+        justify-content: left;
+      }
+      .head-left{
+        .left-img{
+          width: 60rpx;
+          height: 60rpx;
+          image{
+            width: 60rpx;
+            height: 60rpx;
+          }
+        }
+        .left-text{
+          font-weight: 600;
+          color: #734ce2;
+          font-size: 30rpx;
+          line-height: 60rpx;
+          margin-left: 10rpx;
+        }
+      }
+      .head-right{
+        .right-img{
+          margin-top: 6rpx;
+          width: 48rpx;
+          height: 48rpx;
+          image{
+            width: 48rpx;
+            height: 48rpx;
+          }
+        }
+        .right-text{
+          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
+          color: #fff;
+          border-radius:52rpx;
+          font-size: 24rpx;
+          width: 208rpx;
+          height: 52rpx;
+          margin-top: 4rpx;
+          margin-left: 20rpx;
+          line-height: 52rpx;
+          text-align: center;
+        }
+      }
+    }
+    .top-lang{
+      transition: 0.5s ease;
+      height: 0;
+      overflow: hidden;
+      .lang-item{
+        height: 100rpx;
+        display: flex;
+        align-items: center;
+        color: #fff;
+        font-size: 32rpx;
+        padding-left: 40rpx;
+        box-sizing: border-box;
+      }
+    }
+    .show-lang{
+      height: auto;
+      transition: 0.5s ease;
+    }
+
+
+
+  }
+  .index-tab{
+    height: 88rpx;
+    background-color: rgba(35,35,35,.8);
+    border-radius: 20rpx;
+    padding:14rpx 30rpx;
+    margin: 20rpx 20rpx 0 20rpx;
+    box-sizing: border-box;
+    position: relative;
+    .tab-items{
+      display: flex;
+      justify-content: space-between;
+      .tab-item{
+        width: calc((100% - 60rpx)/2);
+        height: 60rpx;
+        line-height: 60rpx;
+        color: #fff;
+        text-align: center;
+        transition: 0.2s;
+      }
+    }
+    .tab-item-bg{
+      width: calc((100% - 120rpx)/2);
+      height: 60rpx;
+      background-color: hsla(0,0%,100%,.18);
+      border-radius: 16rpx;
+      top: 14rpx;
+      position: absolute;
+    }
+    .bg-location-1{
+      left: 30rpx;
+      transition: .5s ease;
+    }
+    .bg-location-0{
+      left: calc(50% + 30rpx);
+      transition: .5s ease;
+    }
+
+  }
+  .tab-one{
+    .index-content{
+      margin: 20rpx 20rpx 0 20rpx;
+      padding: 30rpx;
+      box-sizing: border-box;
+      background-color: rgba(35,35,35,.8);
+      backdrop-filter: saturate(180%) blur(20px);
+      border-radius: 20rpx;
+      height: 860rpx;
+      background-image: url(@/static/img/index/inv_bg.png);
+      background-size: cover;
+      .content-my{
+        display: flex;
+        justify-content: left;
+        height: 80rpx;
+        padding: 16rpx 0;
+        box-sizing: border-box;
+        .my-img{
+          width: 44rpx;
+          image{
+            width: 44rpx;
+            height: 44rpx;
+          }
+        }
+        .my-text{
+          margin-left: 20rpx;
+          color: #fff;
+          font-size: 32rpx;
+          line-height: 44rpx;
+        }
+      }
+      .content-data{
+        flex-direction: column;
+        width: 200rpx;
+        height: 200rpx;
+        background-image: url(@/static/img/index/logo.gif);
+        background-size: cover;
+        margin: 20rpx auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .data-item{
+          font-size: 32rpx;
+          color: #f0b90b;
+        }
+      }
+      .content-item{
+        display: flex;
+        justify-content: space-between;
+        height: 82rpx;
+        .item-value{
+          color: #fff;
+          height: 82rpx;
+          line-height: 82rpx;
+          font-size: 32rpx;
+        }
+      }
+      .content-share{
+        width: 100%;
+        min-height: 200rpx;
+        box-sizing: border-box;
+        border: 2rpx solid #000;
+        border-radius: 20rpx;
+        margin-bottom: 20rpx;
+        .share-title{
+          font-size: 32rpx;
+          margin: 0 auto 20rpx;
+          text-align: center;
+          color: #fff;
+        }
+        .share-join{
+          width: 90%;
+          margin: 0 5% 20rpx 5%;
+          padding: 10px;
+          box-sizing: border-box;
+          border: 1px solid #666;
+          border-radius: 20rpx;
+          font-size: 24rpx;
+          color: #999;
+          word-break: break-all;
+          text-align: center;
+        }
+        .share-copy{
+          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
+          color: #fff;
+          font-size: 26rpx;
+          text-align: center;
+        }
+      }
+    }
+    .index-list{
+      margin: 20rpx 20rpx 0 20rpx;
+      padding: 30rpx;
+      box-sizing: border-box;
+      background-color: rgba(35,35,35,.8);
+      backdrop-filter: saturate(180%) blur(20px);
+      border-radius: 20rpx;
+      height: 640rpx;
+      background-image: url(@/static/img/index/gift_bg.png);
+      background-size: cover;
+      .list-title{
+        display: flex;
+        justify-content: left;
+        height: 80rpx;
+        padding: 16rpx 0;
+        box-sizing: border-box;
+        .title-img{
+          width: 44rpx;
+          image{
+            width: 44rpx;
+            height: 44rpx;
+          }
+        }
+        .title-text{
+          margin-left: 20rpx;
+          color: #fff;
+          font-size: 32rpx;
+          line-height: 44rpx;
+        }
+      }
+      .list-item{
+        display: flex;
+        justify-content: space-between;
+        .item-name{
+          width: 22%;
+          text-align: center;
+          color: #fff;
+          font-size: 24rpx;
+        }
+        .item-name:nth-of-type(2){
+          width: 43%;
+        }
+        .item-name:nth-of-type(3){
+          width: 20%;
+        }
+        .item-name:nth-of-type(4){
+          width: 15%;
+        }
+
+      }
+    }
+  }
+  .tab-two{
+    padding: 0 30rpx;
+    .content-item{
+      margin-top: 32px;
+      background-color: #f5f3ff;
+      border-radius: 48rpx;
+      padding-bottom:30rpx;
+      .content-title{
+        box-sizing: border-box;
+        padding: 36rpx 30rpx;
+        .title-item{
+          display: flex;
+          justify-content: left;
+          padding-left: 20rpx;
+          .item-text{
+            font-size: 36rpx;
+            color: #7349f2;
+
+            font-weight: 600;
+          }
+          .item-solid {
+            display: inline-block;
+            width: 48px;
+            height: 2px;
+            background-color: #7349f2;
+            margin-top: 24rpx;
+          }
+        }
+      }
+      .content-text{
+        padding: 36rpx 30rpx;
+        .text-title{
+          font-size: 30rpx;
+        }
+        .text-title:nth-of-type(1){
+          color: #7349f2;
+        }
+        .text-title:nth-of-type(2){
+          color: #292d33;
+          font-weight: 600;
+          margin-top: 20rpx;
+        }
+        .text-title:nth-of-type(3){
+          color: #5c6066;
+          margin-top: 20rpx;
+        }
+      }
+      .content-but{
+        margin-left: 36rpx;
+        width: 200rpx;
+        height: 90rpx;
+        background-color: #7349f2;
+        border-radius: 16rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30rpx;
+        color: #fff;
+      }
+    }
+    .content-one{
+      position: relative;
+      background-color: #f5f3ff;
+      background-image: url("@/static/img/index/p.a945ca3b.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      .content-img{
+        height: 600rpx;
+        image{
+          position: absolute;
+          top: 315rpx;
+          left: -10rpx;
+          width: calc(100vw - 20rpx);
+          height: 432rpx;
+          z-index: 9;
+        }
+      }
+    }
+    .content-two{
+      background-color: #f2fffd;
+      .content-title{
+        .title-item{
+          .item-text{
+            color:#0ab192;
+          }
+          .item-solid {
+            background-color: #0ab192;
+          }
+        }
+      }
+      .content-text{
+        .text-title{
+          color: #5c6066 !important;
+          font-weight: 400 !important;
+        }
+      }
+      .content-but{
+        background-color: #0ab192;
+      }
+    }
+  }
+  .index-button{
+    margin: 20rpx 20rpx 0 20rpx;
+    height: 80rpx;
+    display: flex;
+    justify-content: space-between;
+    .button-item{
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+    .button-item:nth-of-type(1){
+      color: rgb(115, 76, 226);
+    }
+
+  }
+
+}
+
+
+</style>

pages/index/index.vue

@@ -4,106 +4,82 @@
       <view class="top-head">
         <view class="head-item head-left">
           <view class="left-img">
-            <image src="@/static/img/index/logo.gif" mode="aspectFill"></image>
+            <image src="@/static/img/index/logo1.png" mode="aspectFill"></image>
+          </view>
+          <view class="left-text">
+            <view class="item-item">BNBDAO</view>
+            <view class="item-item">WEB3 DATA</view>
           </view>
-          <view class="left-text">bnb.dao</view>
         </view>
         <view class="head-item head-right">
-          <view class="right-img" @click.stop="setShowLang"><image src="@/static/img/index/lang-img.png" mode="aspectFill"></image></view>
-          <view class="right-text">{{getShowAddress()}}</view>
+          <view class="right-img" @click.stop="setShowLang"><image src="@/static/img/index/yy.svg" mode="aspectFill"></image></view>
+          <view class="right-text">{{babAddress}}</view>
         </view>
       </view>
-      <view class="top-lang" :class="{'show-lang':showLang}">
-        <view class="lang-item" v-for="langItem in langList" @click.stop="setLocaleLang(langItem.name)">{{langItem.value}}</view>
+<!--      <view class="top-lang" :class="{'show-lang':showLang}">-->
+<!--        <view class="lang-item" v-for="langItem in langList" @click.stop="setLocaleLang(langItem.name)">{{langItem.value}}</view>-->
+<!--      </view>-->
+      <view class="top-text">
+        <view class="text-item">Use your NFTs as collateral</view>
+        <view class="text-item"> to borrow ETH or deposit</view>
+        <view class="text-item"> your ETH and earn yields</view>
+        <view class="text-item">  instantly!</view>
       </view>
-    </view>
-    <view :style="{'height':(100+(showLang?langList.length*100:0))+'rpx'}"></view>
-    <view class="index-tab">
-        <view class="tab-items">
-          <view class="tab-item" @click.stop="setTabNum(1)" :class="{'select-item':tabNum===1}">{{$t('index.index.tab.one')}}</view>
-          <view class="tab-item" @click.stop="setTabNum(0)" :class="{'select-item':tabNum===0}">{{$t('index.index.tab.two')}}</view>
-        </view>
-        <view class="tab-item-bg" :class="{'bg-location-1':tabNum===1,'bg-location-0':tabNum===0}"></view>
-    </view>
-    <view class="tab-one" v-if="tabNum===0">
-      <view class="index-content">
-        <view class="content-my" @click="setInvest">
-          <view class="my-img"><image src="@/static/img/index/my-img.png"></image></view>
-          <view class="my-text">{{$t('index.index.my.title')}}</view>
-        </view>
-        <view class="content-data">
-          <view class="data-item">BP1.08</view>
-          <view class="data-item">{{$t('index.index.data.text')}}</view>
-        </view>
-        <view class="content-item">
-          <view class="item-value">{{$t('index.index.item.one')}} : {{memberData.levelName}}</view>
-          <view class="item-value">ID : {{memberData.invite_code}}</view>
-        </view>
-        <view class="content-item">
-          <view class="item-value">{{$t('index.index.item.two')}} : {{memberData.recommendNum}}</view><view class="item-value"></view>
-        </view>
-        <view class="content-item">
-          <view class="item-value">{{$t('index.index.item.three')}} : {{memberData.teamNum}}</view><view class="item-value"></view>
-        </view>
-        <view class="content-share">
-          <view class="share-title">{{$t('index.index.share.one')}}</view>
-          <view class="share-join">{{$t('index.index.share.two')}}</view>
-          <view class="share-join share-copy">{{$t('index.index.share.three')}}</view>
-        </view>
+      <view class="top-but">
+        <button>定金</button>
       </view>
-      <view class="index-list">
-        <view class="list-title">
-          <view class="title-img"><image src="@/static/img/index/my-img.png"></image></view>
-          <view class="title-text">{{$t('index.index.list.title')}}</view>
-        </view>
-        <view class="list-item">
-          <view class="item-name">{{$t('index.index.list.item1')}}</view>
-          <view class="item-name">{{$t('index.index.list.item2')}}</view>
-          <view class="item-name">{{$t('index.index.list.item3')}}</view>
-          <view class="item-name">{{$t('index.index.list.item4')}}</view>
-        </view>
+      <view class="top-bottom">
+        <image class="bottom-img" src="@/static/img/index/dagou.svg" mode="aspectFill"></image>
+        <text class="bottom-text">Running SAFE for 236 days. Read more in the  </text>
+        <text class="bottom-text"> Audit report</text>
       </view>
-
     </view>
-    <view class="tab-two" v-else>
-      <view class="content-item content-one">
-        <view class="content-title">
-          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Contracts</view></view>
-          <view class="title-item"><view class="item-text">How bn.dao contracts work</view></view>
-        </view>
-        <view class="content-img">
-          <image src="@/static/img/index/p_0.c3c2de4e.png"></image>
-        </view>
-        <view class="content-text">
-          <view class="text-title">The main advantage of the bn.dao ?</view>
-          <view class="text-title">One key to start</view>
-          <view class="text-title">Provide users with an integrated solution to automatically income that takes into account both high yield and high liquidity. Even novice users can easily get started.</view>
-        </view>
-        <view class="content-but">Start now</view>
-
+    <view class="index-list">
+      <view class="list-title">
+        <view class="title-img"> <image src="@/static/img/index/bnb2.png" mode="aspectFill"></image></view>
+        <view class="title-text">我的收支明细(100)</view>
       </view>
-      <view class="content-item content-two">
-        <view class="content-title">
-          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Earn interest</view></view>
-          <view class="title-item"><view class="item-text">The interest source of the</view></view>
-        </view>
-        <view class="content-text">
-          <view class="text-title">It aims to become a high-yield stablecoin Yu'e Bao, providing users with stablecoin interest income with the highest return in the market. Currently supported currencies Including
-            BNB (BSC) based on Ethereum, BNB (BEP20) based on Binance based. Users only need to deposit tokens into the cooperative wallet App, and they can periodically obtain interest
-            income.</view>
-          <view class="text-title">As an interest aggregator, the BSC network has opened up a lending/liquidity protocol at the bottom layer. Through predictable currency holding data, we can dynamically adjust the
-            transaction volume according to the rise and fall of miners' fees, which can provide users with access to market The highest deposit interest. We will continue to evaluate and
-            integrate more open financial protocols, including Hybrid lending platform.</view>
+      <division ></division>
+      <view v-for="i in 5" class="item">
+        <view class="list-item">
+          <view class="item-line">
+            <view class="item-text">BNB</view>
+          </view>
+          <view class="item-line line-text">
+            <view class="item-text">平台分润</view>
+          </view>
+          <view class="item-line">
+            <view class="item-text">BNB Number</view>
+            <view class="item-text text-two">
+              <view class="text-img">
+                <image src="@/static/img/index/bnb2.png"></image>
+              </view>
+              <view class="text">56</view>
+            </view>
+          </view>
+          <view class="item-line">
+            <view class="item-text">积分</view>
+            <view class="item-text text-two">
+              <view class="text-img">
+                <image src="@/static/img/index/jf.svg"></image>
+              </view>
+              <view class="text">56</view>
+            </view>
+          </view>
+          <view class="item-line">
+            <view class="item-text">手续费</view>
+            <view class="item-text">56 </view>
+          </view>
+          <view class="item-line">
+            <view class="item-text">时间</view>
+            <view class="item-text">56 </view>
+          </view>
         </view>
-        <view class="content-but">Start now</view>
+        <division class="division-item"></division>
       </view>
 
     </view>
-    <view class="index-button">
-      <view class="button-item">Binance Smart Contract</view>
-      <view class="button-item">Financial Program</view>
-    </view>
-
+    <view class="index-bottom"></view>
   </view>
 
 </template>
@@ -112,9 +88,10 @@ import {getInvestData, setInvest} from "@/api/contract";
 import tools from "@/common/js/tools";
 import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
 import {getMemberInfo} from "@/api/member";
+import Division from "@/pages/index/components/division";
 
 export default {
-  components: {},
+  components: {Division},
   data() {
     return {
       applicationLocale: '',
@@ -156,9 +133,6 @@ export default {
 
   },
   methods: {
-    getShowAddress(){
-      return tools.getShowAddress(this.babAddress)
-    },
     setShowLang() {
       this.showLang = !this.showLang
     },
@@ -232,388 +206,191 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.index-data {
-  min-height: 100vh;
-  background: rgb(21, 26, 47);
-  position: relative;
+//@import "/static/css/common.css";
+.index-data{
   .index-top{
-    z-index: 100;
-    position: fixed;
-    width: 100vw;
-    padding: 20rpx;
-    color: #fff;
-    background: rgba(0,0,0,.67);
+    box-shadow:0 0 24rpx 0 #000;
     box-sizing: border-box;
+    overflow: hidden;
+    padding: 40rpx 0;
+    width: 100%;
+    background: linear-gradient(0deg, rgb(64, 74, 96) 0%, rgb(9, 21, 36) 100%);
     .top-head{
-      height: 60rpx;
       display: flex;
       justify-content: space-between;
+      height: 84rpx;
+      padding-left: 20rpx;
       .head-item{
-        height: 60rpx;
         display: flex;
         justify-content: left;
       }
       .head-left{
         .left-img{
-          width: 60rpx;
-          height: 60rpx;
+          margin-top: 1rpx;
           image{
-            width: 60rpx;
-            height: 60rpx;
+            width: 80rpx;
+            height: 80rpx;
           }
         }
         .left-text{
-          font-weight: 600;
-          color: #734ce2;
-          font-size: 30rpx;
-          line-height: 60rpx;
-          margin-left: 10rpx;
+          padding-top: 5px;
+          margin-left: 10px;
+
+          .item-item{
+            font-size: 22rpx;
+            color: #fff;
+          }
+          .item-item:nth-of-type(1){
+            font-size: 32rpx;
+            font-weight: bold;
+          }
         }
       }
       .head-right{
+        justify-content: right;
         .right-img{
-          margin-top: 6rpx;
-          width: 48rpx;
-          height: 48rpx;
+          width: 70rpx;
+          height: 70rpx;
           image{
-            width: 48rpx;
-            height: 48rpx;
+            width: 70rpx;
+            height: 70rpx;
           }
         }
         .right-text{
-          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
-          color: #fff;
-          border-radius:52rpx;
-          font-size: 24rpx;
-          width: 208rpx;
-          height: 52rpx;
-          margin-top: 4rpx;
           margin-left: 20rpx;
-          line-height: 52rpx;
-          text-align: center;
+          height: 70rpx;
+          line-height: 70rpx;
+          width: 200rpx;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          color: rgb(116, 132, 164);
         }
       }
     }
-    .top-lang{
-      transition: 0.5s ease;
-      height: 0;
-      overflow: hidden;
-      .lang-item{
-        height: 100rpx;
-        display: flex;
-        align-items: center;
+    .top-text{
+      clear: both;
+      padding: 40rpx;
+      margin-top: 40rpx;
+      .text-item{
         color: #fff;
-        font-size: 32rpx;
-        padding-left: 40rpx;
-        box-sizing: border-box;
+        font-size: 50rpx;
+        font-weight: bold;
       }
     }
-    .show-lang{
-      height: auto;
-      transition: 0.5s ease;
-    }
-
-
-
-  }
-  .index-tab{
-    height: 88rpx;
-    background-color: rgba(35,35,35,.8);
-    border-radius: 20rpx;
-    padding:14rpx 30rpx;
-    margin: 20rpx 20rpx 0 20rpx;
-    box-sizing: border-box;
-    position: relative;
-    .tab-items{
-      display: flex;
-      justify-content: space-between;
-      .tab-item{
-        width: calc((100% - 60rpx)/2);
-        height: 60rpx;
-        line-height: 60rpx;
-        color: #fff;
+    .top-but{
+      width: 80%;
+      margin: 60rpx auto 0;
+      button{
+        height: 90rpx;
+        line-height:  90rpx;
         text-align: center;
-        transition: 0.2s;
+        background: rgb(0, 87, 255);
+        color: #fff;
+        border-radius: 20rpx;
+        font-weight: bold;
       }
     }
-    .tab-item-bg{
-      width: calc((100% - 120rpx)/2);
-      height: 60rpx;
-      background-color: hsla(0,0%,100%,.18);
-      border-radius: 16rpx;
-      top: 14rpx;
-      position: absolute;
-    }
-    .bg-location-1{
-      left: 30rpx;
-      transition: .5s ease;
-    }
-    .bg-location-0{
-      left: calc(50% + 30rpx);
-      transition: .5s ease;
-    }
-
-  }
-  .tab-one{
-    .index-content{
-      margin: 20rpx 20rpx 0 20rpx;
-      padding: 30rpx;
-      box-sizing: border-box;
-      background-color: rgba(35,35,35,.8);
-      backdrop-filter: saturate(180%) blur(20px);
-      border-radius: 20rpx;
-      height: 860rpx;
-      background-image: url(@/static/img/index/inv_bg.png);
-      background-size: cover;
-      .content-my{
-        display: flex;
-        justify-content: left;
-        height: 80rpx;
-        padding: 16rpx 0;
-        box-sizing: border-box;
-        .my-img{
-          width: 44rpx;
-          image{
-            width: 44rpx;
-            height: 44rpx;
-          }
-        }
-        .my-text{
-          margin-left: 20rpx;
-          color: #fff;
-          font-size: 32rpx;
-          line-height: 44rpx;
-        }
+    .top-bottom{
+      padding: 40rpx;
+      .bottom-img{
+        display: inline-block;
+        width: 24rpx;
+        height: 24rpx;
+        margin-right: 10rpx;
       }
-      .content-data{
-        flex-direction: column;
-        width: 200rpx;
-        height: 200rpx;
-        background-image: url(@/static/img/index/logo.gif);
-        background-size: cover;
-        margin: 20rpx auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .data-item{
-          font-size: 32rpx;
-          color: #f0b90b;
-        }
+      .bottom-text{
+        font-size: 24rpx;
+        color: #7484a4;
       }
-      .content-item{
-        display: flex;
-        justify-content: space-between;
-        height: 82rpx;
-        .item-value{
-          color: #fff;
-          height: 82rpx;
-          line-height: 82rpx;
-          font-size: 32rpx;
-        }
+      .bottom-text:nth-of-type(2){
+        margin-left: 0.5em;
+        text-decoration: underline;
       }
-      .content-share{
-        width: 100%;
-        min-height: 200rpx;
-        box-sizing: border-box;
-        border: 2rpx solid #000;
+    }
+  }
+  .index-list{
+    background: #fff;
+    width: 90%;
+    margin: 40rpx auto;
+    border-radius: 10px;
+    padding: 20px 10px;
+    overflow: hidden;
+    font-size: 13px;
+    box-shadow:  0 8rpx 16rpx 0 rgba(0,0,0,0.08);
+    .list-title{
+      display: flex;
+      justify-content: left;
+      .title-img{
+        background: rgb(0, 87, 255);
+        padding: 10rpx;
         border-radius: 20rpx;
-        margin-bottom: 20rpx;
-        .share-title{
-          font-size: 32rpx;
-          margin: 0 auto 20rpx;
-          text-align: center;
-          color: #fff;
-        }
-        .share-join{
-          width: 90%;
-          margin: 0 5% 20rpx 5%;
-          padding: 10px;
-          box-sizing: border-box;
-          border: 1px solid #666;
-          border-radius: 20rpx;
-          font-size: 24rpx;
-          color: #999;
-          word-break: break-all;
-          text-align: center;
-        }
-        .share-copy{
-          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
-          color: #fff;
-          font-size: 26rpx;
-          text-align: center;
+        image{
+          width: 80rpx;
+          height: 80rpx;
         }
       }
-    }
-    .index-list{
-      margin: 20rpx 20rpx 0 20rpx;
-      padding: 30rpx;
-      box-sizing: border-box;
-      background-color: rgba(35,35,35,.8);
-      backdrop-filter: saturate(180%) blur(20px);
-      border-radius: 20rpx;
-      height: 640rpx;
-      background-image: url(@/static/img/index/gift_bg.png);
-      background-size: cover;
-      .list-title{
-        display: flex;
-        justify-content: left;
-        height: 80rpx;
-        padding: 16rpx 0;
-        box-sizing: border-box;
-        .title-img{
-          width: 44rpx;
-          image{
-            width: 44rpx;
-            height: 44rpx;
-          }
-        }
-        .title-text{
-          margin-left: 20rpx;
-          color: #fff;
-          font-size: 32rpx;
-          line-height: 44rpx;
-        }
+      .title-text{
+        margin-left: 20rpx;
+        line-height: 100rpx;
+        font-size: 34rpx;
+        font-weight: bold;
       }
-      .list-item{
+    }
+    .list-item{
+      margin-top: 20rpx;
+      .item-line{
+        margin-bottom: 20rpx;
         display: flex;
         justify-content: space-between;
-        .item-name{
-          width: 22%;
-          text-align: center;
-          color: #fff;
-          font-size: 24rpx;
-        }
-        .item-name:nth-of-type(2){
-          width: 43%;
-        }
-        .item-name:nth-of-type(3){
-          width: 20%;
-        }
-        .item-name:nth-of-type(4){
-          width: 15%;
+        .item-text{
+          font-size: 26rpx;
+          color: rgb(177, 177, 177);
+          line-height: 42rpx;
+          height: 42rpx;
         }
-
-      }
-    }
-  }
-  .tab-two{
-    padding: 0 30rpx;
-    .content-item{
-      margin-top: 32px;
-      background-color: #f5f3ff;
-      border-radius: 48rpx;
-      padding-bottom:30rpx;
-      .content-title{
-        box-sizing: border-box;
-        padding: 36rpx 30rpx;
-        .title-item{
+        .text-two{
           display: flex;
-          justify-content: left;
-          padding-left: 20rpx;
-          .item-text{
-            font-size: 36rpx;
-            color: #7349f2;
-
-            font-weight: 600;
-          }
-          .item-solid {
+          justify-content: right;
+          .text-img{
             display: inline-block;
-            width: 48px;
-            height: 2px;
-            background-color: #7349f2;
-            margin-top: 24rpx;
-          }
-        }
-      }
-      .content-text{
-        padding: 36rpx 30rpx;
-        .text-title{
-          font-size: 30rpx;
-        }
-        .text-title:nth-of-type(1){
-          color: #7349f2;
-        }
-        .text-title:nth-of-type(2){
-          color: #292d33;
-          font-weight: 600;
-          margin-top: 20rpx;
-        }
-        .text-title:nth-of-type(3){
-          color: #5c6066;
-          margin-top: 20rpx;
-        }
-      }
-      .content-but{
-        margin-left: 36rpx;
-        width: 200rpx;
-        height: 90rpx;
-        background-color: #7349f2;
-        border-radius: 16rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 30rpx;
-        color: #fff;
-      }
-    }
-    .content-one{
-      position: relative;
-      background-color: #f5f3ff;
-      background-image: url("@/static/img/index/p.a945ca3b.png");
-      background-size: contain;
-      background-repeat: no-repeat;
-      .content-img{
-        height: 600rpx;
-        image{
-          position: absolute;
-          top: 315rpx;
-          left: -10rpx;
-          width: calc(100vw - 20rpx);
-          height: 432rpx;
-          z-index: 9;
-        }
-      }
-    }
-    .content-two{
-      background-color: #f2fffd;
-      .content-title{
-        .title-item{
-          .item-text{
-            color:#0ab192;
+            padding: 6rpx;
+            background: rgb(0, 87, 255);
+            border-radius: 50%;
+            height: 42rpx;
+            width: 42rpx;
+            box-sizing: border-box;
+            image{
+              width: 30rpx;
+              height: 30rpx;
+              z-index: 100;
+            }
           }
-          .item-solid {
-            background-color: #0ab192;
+          .text{
+            margin-left: 10rpx;
+            font-size: 30rpx;
           }
         }
       }
-      .content-text{
-        .text-title{
-          color: #5c6066 !important;
-          font-weight: 400 !important;
+      .line-text{
+        margin-bottom: 40rpx;
+        .item-text{
+          font-weight: bold;
+          font-size: 26rpx;
+          color: #222;
         }
       }
-      .content-but{
-        background-color: #0ab192;
+    }
+    .item:last-child{
+      .division-item{
+        display: none;
       }
     }
   }
-  .index-button{
-    margin: 20rpx 20rpx 0 20rpx;
-    height: 80rpx;
-    display: flex;
-    justify-content: space-between;
-    .button-item{
-      font-size: 32rpx;
-      font-weight: 600;
-      color: #fff;
-    }
-    .button-item:nth-of-type(1){
-      color: rgb(115, 76, 226);
-    }
-
+  .index-bottom{
+    height: 50rpx;
   }
-
 }
 
 
+
 </style>

static/css/common.css

@@ -0,0 +1,2 @@
+*{margin: 0;padding: 0;font-family: "思源黑体 CN", "微软雅黑", Whitney Light, Helvetica, Arial, "sans-serif"}
+body{background-color: rgb(246, 247, 249);}

static/img/index/dagou.svg

@@ -0,0 +1,42 @@
+<!--?xml version="1.0" encoding="iso-8859-1"?-->
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 229.5 229.5" style="enable-background:new 0 0 229.5 229.5;" xml:space="preserve">
+<path d="M214.419,32.12c-0.412-2.959-2.541-5.393-5.419-6.193L116.76,0.275c-1.315-0.366-2.704-0.366-4.02,0L20.5,25.927
+	c-2.878,0.8-5.007,3.233-5.419,6.193c-0.535,3.847-12.74,94.743,18.565,139.961c31.268,45.164,77.395,56.738,79.343,57.209
+	c0.579,0.14,1.169,0.209,1.761,0.209s1.182-0.07,1.761-0.209c1.949-0.471,48.076-12.045,79.343-57.209
+	C227.159,126.864,214.954,35.968,214.419,32.12z M174.233,85.186l-62.917,62.917c-1.464,1.464-3.384,2.197-5.303,2.197
+	s-3.839-0.732-5.303-2.197l-38.901-38.901c-1.407-1.406-2.197-3.314-2.197-5.303s0.791-3.897,2.197-5.303l7.724-7.724
+	c2.929-2.928,7.678-2.929,10.606,0l25.874,25.874l49.89-49.891c1.406-1.407,3.314-2.197,5.303-2.197s3.897,0.79,5.303,2.197
+	l7.724,7.724C177.162,77.508,177.162,82.257,174.233,85.186z" data-original="#000000" class="active-path" style="fill: rgb(116, 132, 164);"></path>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/index/jf.svg

@@ -0,0 +1,46 @@
+<!--?xml version="1.0" encoding="iso-8859-1"?-->
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25.152 25.152" style="enable-background:new 0 0 25.152 25.152;" xml:space="preserve" class="">
+<g>
+	<path style="fill: rgb(255, 255, 255);" d="M12.575,13.713c-4.725,0-8.68-1.385-9.761-3.26C2.623,10.785,2.51,11.127,2.51,11.48v3.062
+		c0,2.367,4.506,4.283,10.065,4.283s10.066-1.916,10.066-4.283V11.48c0-0.354-0.113-0.695-0.305-1.027
+		C21.256,12.328,17.302,13.713,12.575,13.713z" data-original="#030104" class="active-path"></path>
+	<path style="fill: rgb(255, 255, 255);" d="M12.575,20.039c-4.725,0-8.68-1.391-9.761-3.258c-0.191,0.328-0.304,0.668-0.304,1.024v3.064
+		c0,2.365,4.506,4.283,10.065,4.283s10.066-1.918,10.066-4.283v-3.064c0-0.355-0.113-0.695-0.305-1.023
+		C21.256,18.648,17.302,20.039,12.575,20.039z" data-original="#030104" class="active-path "></path>
+	<path style="fill: rgb(255, 255, 255);" d="M22.365,4.334c-0.195,1.732-4.496,3.119-9.789,3.119c-5.291,0-9.594-1.387-9.789-3.119
+		C2.615,4.65,2.51,4.977,2.51,5.314v3.061c0,2.369,4.506,4.283,10.065,4.283s10.066-1.914,10.066-4.283V5.314
+		C22.642,4.977,22.538,4.65,22.365,4.334z" data-original="#030104" class="active-path"></path>
+	<ellipse style="fill: rgb(255, 255, 255);" cx="12.576" cy="3.241" rx="9.807" ry="3.241" data-original="#030104" class="active-path"></ellipse>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/img/index/yy.svg

@@ -0,0 +1,7 @@
+<!--?xml version="1.0" ?--><svg height="64px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" viewBox="0 0 445 445" width="64px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class=""><defs><style type="text/css">
+   
+    .fil0 {fill:none}
+    .fil2 {fill:#0070B7}
+    .fil1 {fill:#303C47}
+   
+  </style></defs><g id="Layer_x0020_1"><g id="_1011168336"><path class="fil1  " d="M137 0c70,0 128,53 136,122 0,4 -2,7 -6,8 -36,7 -67,25 -91,50 -2,2 -5,3 -8,2 -7,-3 -13,-6 -18,-9 31,-32 42,-62 45,-81l21 0c2,0 3,-1 3,-4l0 -16c0,-2 -1,-4 -3,-4l-65 0c-1,0 -2,-1 -2,-2l0 -15c0,-2 -1,-3 -3,-3l-18 0c-2,0 -4,1 -4,3l0 15c0,1 -1,2 -2,2l-64 0c-2,0 -4,2 -4,4l0 16c0,3 2,4 4,4l114 0c-4,16 -14,41 -41,67 -17,-14 -24,-28 -27,-36 -1,-3 -4,-4 -7,-3l-11 2c-2,1 -3,2 -4,3 -1,2 -1,3 0,5 3,10 12,27 30,44 -13,10 -29,20 -48,30 -3,1 -5,4 -3,7l5 11c0,2 2,3 3,3 2,1 3,1 5,0 23,-11 42,-23 58,-36 5,4 11,7 18,10 2,1 3,3 3,5 1,2 1,4 0,6 -11,17 -19,36 -23,57 -1,4 -4,6 -8,6 -69,-8 -122,-66 -122,-136 0,-76 61,-137 137,-137z" data-original="#303C47"></path><path class="fil2   active-path  " d="M302 159c79,0 143,64 143,143 0,79 -64,143 -143,143 -79,0 -143,-64 -143,-143 0,-79 64,-143 143,-143zm0 105l-23 61 46 0 -23 -61zm-35 90l-11 29c-1,3 -3,6 -8,6l-22 0c-3,0 -6,-3 -4,-7 22,-58 45,-115 67,-173 1,-3 3,-3 6,-3l7 0 7 0c3,0 5,0 6,3 22,58 45,115 67,173 2,4 -1,7 -4,7l-22 0c-5,0 -7,-3 -8,-6l-12 -29 -69 0z" data-original="#0070B7" style="fill: rgb(60, 171, 240);"></path></g></g></svg>