报单页面完成

pages.json

@@ -7,6 +7,12 @@
 				"navigationBarTitleText": "%title.index"
 			}
 		},
+		{
+			"path": "pages/index/contract",
+			"style": {
+				"navigationBarTitleText": "%title.contract"
+			}
+		},
 		{
 			"path": "pages/login/index",
 			"style": {

pages/index/components/top-head.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="head-box" :class="{'top-two':topType!==1}">
+    <view class="top-head">
+      <view class="head-item head-left">
+        <view class="left-img">
+          <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>
+      <view class="head-item head-right">
+        <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>
+  </view>
+</template>
+
+<script>
+import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
+
+export default {
+  name: "top-head",
+  components: {},
+  props: {
+    topType:{
+      default:1
+    }
+  },
+  data() {
+    return {
+      langList: [{'name': 'zh-Hans', 'value': '简体中文'}, {'name': 'en', 'value': 'English'}, {
+        'name': 'ja',
+        'value': '日本語'
+      }, {'name': 'ko', 'value': '한국어'}],
+      babAddress: '',
+      showLang:false
+    }
+  },
+  watch: {},
+  async mounted() {
+    this.babAddress = tokenpocketBnb.getMyAddress()
+  },
+  methods: {
+    setLocaleLang(code) {
+      uni.setLocale(code);
+      this.$i18n.locale = code;
+      this.applicationLocale = code;
+      this.showLang = false
+    },
+    setShowLang() {
+      this.showLang = !this.showLang
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.head-box {
+  .top-head {
+    display: flex;
+    justify-content: space-between;
+    height: 84rpx;
+    padding-left: 20rpx;
+
+    .head-item {
+      display: flex;
+      justify-content: left;
+    }
+
+    .head-left {
+      .left-img {
+        margin-top: 1rpx;
+
+        image {
+          width: 80rpx;
+          height: 80rpx;
+        }
+      }
+
+      .left-text {
+        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 {
+        width: 70rpx;
+        height: 70rpx;
+
+        image {
+          width: 70rpx;
+          height: 70rpx;
+        }
+      }
+
+      .right-text {
+        margin-left: 20rpx;
+        height: 70rpx;
+        line-height: 70rpx;
+        width: 200rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: rgb(116, 132, 164);
+      }
+    }
+  }
+  .top-lang{
+    position: absolute;
+    top:120rpx ;
+    right: 0;
+    width: 300rpx;
+    transition: 0.5s ease;
+    height: 0;
+    overflow: hidden;
+    background-color: rgba(0, 0, 0, 0.8);
+    .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;
+  }
+
+
+}
+.top-two{
+  .item-item{
+    color: #222 !important;
+  }
+  .right-text{
+    color: rgb(0, 87, 255) !important;
+  }
+
+}
+</style>

pages/index/contract.vue

@@ -0,0 +1,323 @@
+<template>
+  <view class="contract-box">
+    <view class="contract-top">
+      <top-head :top-type="2"></top-head>
+    </view>
+    <view class="contract-data">
+      <view class="data-input">
+        <view class="input-item">
+          <view class="item-detail">数量</view>
+          <view class="item-detail">可用余额</view>
+        </view>
+        <view class="input-item">
+          <view class="item-detail">100</view>
+          <view class="item-detail item-img">
+            <view class="text-img">
+              <image src="@/static/img/index/bnb.png"></image>
+            </view>
+            <view class="text">BNB</view>
+          </view>
+        </view>
+      </view>
+      <view class="data-but">
+        <button>定金</button>
+      </view>
+      <view class="data-button">
+        <image src="@/static/img/index/msg.svg"></image>
+        <view>阅读文档>></view>
+      </view>
+    </view>
+    <view class="contract-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>
+      <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>
+        <division class="division-item"></division>
+      </view>
+
+    </view>
+    <view class="contract-bottom"></view>
+  </view>
+</template>
+
+<script>
+
+import TopHead from "@/pages/index/components/top-head";
+import Division from "@/pages/index/components/division";
+
+export default {
+  name: "contract",
+  components: {Division, TopHead},
+  props: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    goToUrl(type) {
+      switch (type) {
+        case 1:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+        case 2:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+        case 3:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contract-box {
+  box-shadow: 0 0 24rpx 0 rgba(0, 0, 0, 0.16);
+
+  .contract-top {
+    padding: 20rpx 0;
+    background: #fff;
+  }
+
+  .contract-data {
+    background: #fff;
+    width: 90%;
+    margin: 60rpx auto 0;
+    border-radius: 20rpx;
+    padding: 40rpx 20rpx;
+    font-size: 36rpx;
+    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);
+
+    .data-input {
+      border: 1rpx solid #000;
+      overflow: hidden;
+      border-radius: 10rpx;
+      padding: 20rpx;
+
+      .input-item {
+        display: flex;
+        justify-content: space-between;
+
+        .item-detail {
+          font-size: 26rpx;
+        }
+      }
+
+      .item-img {
+        display: flex;
+        justify-content: right;
+
+        .text-img {
+          display: inline-block;
+          border-radius: 50%;
+          height: 60rpx;
+          width: 60rpx;
+          box-sizing: border-box;
+          margin-right: 10rpx;
+
+          image {
+            width: 60rpx;
+            height: 60rpx;
+            z-index: 100;
+          }
+        }
+
+        .text {
+          line-height: 60rpx;
+        }
+      }
+
+      .input-item:first-child {
+        margin-bottom: 40rpx;
+      }
+
+      .input-item:last-child {
+        height: 60rpx;
+
+        .item-detail {
+          font-size: 32rpx;
+          line-height: 60rpx;
+        }
+      }
+    }
+
+    .data-but {
+      border-radius: 20rpx;
+      margin-top: 60rpx;
+
+      button {
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        background: rgb(0, 87, 255);
+        color: #fff;
+        font-size: 26rpx;
+      }
+    }
+
+    .data-button {
+      margin-top: 40rpx;
+      display: flex;
+      justify-content: right;
+      image {
+        width: 40rpx;
+        height: 40rpx;
+      }
+      view {
+        font-size: 26rpx;
+        margin-left: 10rpx;
+        color: rgb(0, 87, 255);
+        line-height: 40rpx;
+      }
+
+    }
+
+  }
+
+  .contract-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;
+
+        image {
+          width: 80rpx;
+          height: 80rpx;
+        }
+      }
+
+      .title-text {
+        margin-left: 20rpx;
+        line-height: 100rpx;
+        font-size: 34rpx;
+        font-weight: bold;
+      }
+    }
+
+    .list-item {
+      margin-top: 20rpx;
+
+      .item-line {
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: space-between;
+
+        .item-text {
+          font-size: 26rpx;
+          color: rgb(177, 177, 177);
+          line-height: 42rpx;
+          height: 42rpx;
+        }
+
+        .text-two {
+          display: flex;
+          justify-content: right;
+
+          .text-img {
+            display: inline-block;
+            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;
+            }
+          }
+
+          .text {
+            margin-left: 10rpx;
+            font-size: 30rpx;
+          }
+        }
+      }
+
+      .line-text {
+        margin-bottom: 40rpx;
+
+        .item-text {
+          font-weight: bold;
+          font-size: 26rpx;
+          color: #222;
+        }
+      }
+    }
+
+    .item:last-child {
+      .division-item {
+        display: none;
+      }
+    }
+  }
+
+  .contract-bottom {
+    height: 50rpx;
+  }
+}
+
+</style>

pages/index/index-two.vue

@@ -1,619 +0,0 @@
-<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

@@ -1,45 +1,30 @@
 <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/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>
-        <view class="head-item head-right">
-          <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>-->
+        <top-head></top-head>
       <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 class="text-item"> instantly!</view>
       </view>
       <view class="top-but">
-        <button>定金</button>
+        <button @click="goToUrl(1)">定金</button>
       </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">Running SAFE for 236 days. Read more in the</text>
         <text class="bottom-text"> Audit report</text>
       </view>
     </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-img">
+          <image src="@/static/img/index/bnb2.png" mode="aspectFill"></image>
+        </view>
         <view class="title-text">我的收支明细(100)</view>
       </view>
-      <division ></division>
+      <division></division>
       <view v-for="i in 5" class="item">
         <view class="list-item">
           <view class="item-line">
@@ -68,11 +53,11 @@
           </view>
           <view class="item-line">
             <view class="item-text">手续费</view>
-            <view class="item-text">56 </view>
+            <view class="item-text">56</view>
           </view>
           <view class="item-line">
             <view class="item-text">时间</view>
-            <view class="item-text">56 </view>
+            <view class="item-text">56</view>
           </view>
         </view>
         <division class="division-item"></division>
@@ -89,24 +74,28 @@ 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";
+import TopHead from "@/pages/index/components/top-head";
 
 export default {
-  components: {Division},
+  components: {TopHead,  Division},
   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:{
+      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:{
+      memberData: {
         "id": 30,
         "address": "",
         "invite_code": "72592982",
@@ -115,8 +104,8 @@ export default {
         "recommendNum": 0,
         "teamNum": 0
       },
-      bnbNum:0,
-      babAddress:''
+      bnbNum: 0,
+      babAddress: ''
 
     }
 
@@ -126,32 +115,45 @@ export default {
     this.applicationLocale = uni.getLocale();
     this.getInvestData()
     this.bnbNum = await tokenpocketBnb.getBalance();
-    console.log('this.bnbNum:'+this.bnbNum)
-   this.getMyData()
+    this.getMyData()
   },
   mounted() {
 
   },
   methods: {
+    goToUrl(type) {
+      switch (type) {
+        case 1:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+        case 2:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+        case 3:
+          uni.navigateTo({
+            'url': 'pages/index/contract'
+          })
+          break
+      }
+    },
     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
+
+    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
+    getMyData() {
+      this.babAddress = tokenpocketBnb.getMyAddress()
+      getMemberInfo().then((res) => {
+        if (res.code === 1) {
+          this.memberData = res.data
         }
       })
     },
@@ -175,26 +177,26 @@ export default {
         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'))
-         }
-       })
+      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){
+    sendSetInvest(hashRes) {
+      setInvest({'txid': hashRes, 'id': this.investData.id}).then((res) => {
+        if (res.code === 1) {
           tools.success(res.msg)
           // setTimeout(()=>{
           //   tools.leftClick()
           // },1500)
-        }else {
+        } else {
           this.isAjax = false
           tools.error(res.msg)
         }
@@ -207,56 +209,66 @@ export default {
 </script>
 <style lang="scss" scoped>
 //@import "/static/css/common.css";
-.index-data{
-  .index-top{
-    box-shadow:0 0 24rpx 0 #000;
+.index-data {
+  .index-top {
+    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{
+
+    .top-head {
       display: flex;
       justify-content: space-between;
       height: 84rpx;
       padding-left: 20rpx;
-      .head-item{
+
+      .head-item {
         display: flex;
         justify-content: left;
       }
-      .head-left{
-        .left-img{
+
+      .head-left {
+        .left-img {
           margin-top: 1rpx;
-          image{
+
+          image {
             width: 80rpx;
             height: 80rpx;
           }
         }
-        .left-text{
+
+        .left-text {
           padding-top: 5px;
           margin-left: 10px;
 
-          .item-item{
+          .item-item {
             font-size: 22rpx;
             color: #fff;
           }
-          .item-item:nth-of-type(1){
+
+          .item-item:nth-of-type(1) {
             font-size: 32rpx;
             font-weight: bold;
           }
         }
       }
-      .head-right{
+
+      .head-right {
         justify-content: right;
-        .right-img{
+
+        .right-img {
           width: 70rpx;
           height: 70rpx;
-          image{
+
+          image {
             width: 70rpx;
             height: 70rpx;
           }
         }
-        .right-text{
+
+        .right-text {
           margin-left: 20rpx;
           height: 70rpx;
           line-height: 70rpx;
@@ -267,22 +279,26 @@ export default {
         }
       }
     }
-    .top-text{
+
+    .top-text {
       clear: both;
       padding: 40rpx;
       margin-top: 40rpx;
-      .text-item{
+
+      .text-item {
         color: #fff;
         font-size: 50rpx;
         font-weight: bold;
       }
     }
-    .top-but{
+
+    .top-but {
       width: 80%;
       margin: 60rpx auto 0;
-      button{
+
+      button {
         height: 90rpx;
-        line-height:  90rpx;
+        line-height: 90rpx;
         text-align: center;
         background: rgb(0, 87, 255);
         color: #fff;
@@ -290,25 +306,30 @@ export default {
         font-weight: bold;
       }
     }
-    .top-bottom{
+
+    .top-bottom {
       padding: 40rpx;
-      .bottom-img{
+
+      .bottom-img {
         display: inline-block;
         width: 24rpx;
         height: 24rpx;
         margin-right: 10rpx;
       }
-      .bottom-text{
+
+      .bottom-text {
         font-size: 24rpx;
         color: #7484a4;
       }
-      .bottom-text:nth-of-type(2){
+
+      .bottom-text:nth-of-type(2) {
         margin-left: 0.5em;
         text-decoration: underline;
       }
     }
   }
-  .index-list{
+
+  .index-list {
     background: #fff;
     width: 90%;
     margin: 40rpx auto;
@@ -316,42 +337,51 @@ export default {
     padding: 20px 10px;
     overflow: hidden;
     font-size: 13px;
-    box-shadow:  0 8rpx 16rpx 0 rgba(0,0,0,0.08);
-    .list-title{
+    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);
+
+    .list-title {
       display: flex;
       justify-content: left;
-      .title-img{
+
+      .title-img {
         background: rgb(0, 87, 255);
         padding: 10rpx;
         border-radius: 20rpx;
-        image{
+
+        image {
           width: 80rpx;
           height: 80rpx;
         }
       }
-      .title-text{
+
+      .title-text {
         margin-left: 20rpx;
         line-height: 100rpx;
         font-size: 34rpx;
         font-weight: bold;
       }
     }
-    .list-item{
+
+    .list-item {
       margin-top: 20rpx;
-      .item-line{
+
+      .item-line {
         margin-bottom: 20rpx;
         display: flex;
         justify-content: space-between;
-        .item-text{
+
+        .item-text {
           font-size: 26rpx;
           color: rgb(177, 177, 177);
           line-height: 42rpx;
           height: 42rpx;
         }
-        .text-two{
+
+        .text-two {
           display: flex;
           justify-content: right;
-          .text-img{
+
+          .text-img {
             display: inline-block;
             padding: 6rpx;
             background: rgb(0, 87, 255);
@@ -359,38 +389,43 @@ export default {
             height: 42rpx;
             width: 42rpx;
             box-sizing: border-box;
-            image{
+
+            image {
               width: 30rpx;
               height: 30rpx;
               z-index: 100;
             }
           }
-          .text{
+
+          .text {
             margin-left: 10rpx;
             font-size: 30rpx;
           }
         }
       }
-      .line-text{
+
+      .line-text {
         margin-bottom: 40rpx;
-        .item-text{
+
+        .item-text {
           font-weight: bold;
           font-size: 26rpx;
           color: #222;
         }
       }
     }
-    .item:last-child{
-      .division-item{
+
+    .item:last-child {
+      .division-item {
         display: none;
       }
     }
   }
-  .index-bottom{
+
+  .index-bottom {
     height: 50rpx;
   }
 }
 
 
-
 </style>

static/img/index/msg.svg

@@ -0,0 +1,74 @@
+<!--?xml version="1.0" encoding="iso-8859-1"?-->
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" class="">
+<g>
+	<g>
+		<path d="M463.996,126.864L340.192,3.061C338.231,1.101,335.574,0,332.803,0H95.726C67.724,0,44.944,22.782,44.944,50.784v410.434
+			c0,28.001,22.781,50.783,50.783,50.783h320.547c28.002,0,50.783-22.781,50.783-50.783V134.253
+			C467.056,131.482,465.955,128.824,463.996,126.864z M343.255,35.679l88.127,88.126H373.14c-7.984,0-15.49-3.109-21.134-8.753
+			c-5.643-5.643-8.752-13.148-8.751-21.131V35.679z M446.158,461.217c0,16.479-13.406,29.885-29.884,29.885H95.726
+			c-16.479,0-29.885-13.406-29.885-29.885V50.784c0.001-16.479,13.407-29.886,29.885-29.886h226.631v73.021
+			c-0.002,13.565,5.28,26.318,14.871,35.909c9.592,9.592,22.345,14.874,35.911,14.874h73.018V461.217z" data-original="#000000" class="active-path  " style="fill: rgb(0, 89, 225);"></path>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M275.092,351.492h-4.678c-5.77,0-10.449,4.678-10.449,10.449s4.679,10.449,10.449,10.449h4.678
+			c5.77,0,10.449-4.678,10.449-10.449S280.862,351.492,275.092,351.492z" data-original="#000000" class="active-path " style="fill: rgb(0, 89, 225);"></path>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M236.61,351.492H135.118c-5.77,0-10.449,4.678-10.449,10.449s4.679,10.449,10.449,10.449H236.61
+			c5.77,0,10.449-4.678,10.449-10.449S242.381,351.492,236.61,351.492z" data-original="#000000" class="active-path" style="fill: rgb(0, 89, 225);"></path>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M376.882,303.747H135.119c-5.77,0-10.449,4.678-10.449,10.449c0,5.771,4.679,10.449,10.449,10.449h241.763
+			c5.77,0,10.449-4.678,10.449-10.449C387.331,308.425,382.652,303.747,376.882,303.747z" data-original="#000000" class="active-path" style="fill: rgb(0, 89, 225);"></path>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M376.882,256H135.119c-5.77,0-10.449,4.678-10.449,10.449c0,5.771,4.679,10.449,10.449,10.449h241.763
+			c5.77,0,10.449-4.678,10.449-10.449C387.331,260.678,382.652,256,376.882,256z" data-original="#000000" class="active-path" style="fill: rgb(0, 89, 225);"></path>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M376.882,208.255H135.119c-5.77,0-10.449,4.678-10.449,10.449c0,5.771,4.679,10.449,10.449,10.449h241.763
+			c5.77,0,10.449-4.678,10.449-10.449S382.652,208.255,376.882,208.255z" data-original="#000000" class="active-path" style="fill: rgb(0, 89, 225);"></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>
+<g>
+</g>
+</svg>