首页样式切图完成

common/router/router.js

@@ -15,16 +15,16 @@ router.beforeEach((to, from, next) => {
     let isWallet= tokenpocketBnb.isInstall()
     console.log('isWallet:'+isWallet)
     if(isWallet){
-        let token = to.query.token;
-        if (token) {
-            uni.setStorageSync('token',token);
-        }
-        const userToken = uni.getStorageSync('token')
-        if(!userToken  ){
-            if(whiteList.indexOf(to.path)<0){
-                next('/pages/login/index');
-            }
-        }
+        // let token = to.query.token;
+        // if (token) {
+        //     uni.setStorageSync('token',token);
+        // }
+        // const userToken = uni.getStorageSync('token')
+        // if(!userToken  ){
+        //     if(whiteList.indexOf(to.path)<0){
+        //         next('/pages/login/index');
+        //     }
+        // }
         console.log('前置守卫to----------', to)
         next();
     }else {
@@ -47,4 +47,4 @@ router.afterEach((to, from) => {
 export {
     router,
     RouterMount
-}
+}

locale/en.json

@@ -20,5 +20,20 @@
   "index.index.invest.send_no": "fail",
   "index.index.invest.send_ok": "succeed",
   "index.error.quit": "log out",
-  "index.error.errorMsg": "Error!"
+  "index.error.errorMsg": "Error!",
+  "index.index.tab.one": "Introduction",
+  "index.index.tab.two": "Reward",
+  "index.index.my.title": "Mine",
+  "index.index.data.text": "Triggered",
+  "index.index.item.one": "Current identity",
+  "index.index.item.two": "Share number",
+  "index.index.item.three": "Team size",
+  "index.index.share.one": "Invitation link",
+  "index.index.share.two": "Participation is required",
+  "index.index.share.three": "Copy",
+  "index.index.list.title": "Income List",
+  "index.index.list.item1": "time",
+  "index.index.list.item2": "memo",
+  "index.index.list.item3": "num",
+  "index.index.list.item4": "status"
 }

locale/index.js

@@ -1,6 +1,10 @@
 import en from './en.json'
+import ja from './ja.json'
+import ko from './ko.json'
 import zhHans from './zh-Hans.json'
 export default {
+	ko,
+	ja,
 	en,
 	'zh-Hans': zhHans
 }

locale/ja.json

@@ -20,5 +20,20 @@
   "index.index.invest.send_no": "fail",
   "index.index.invest.send_ok": "succeed",
   "index.error.quit": "log out",
-  "index.error.errorMsg": "Error!"
+  "index.error.errorMsg": "Error!",
+  "index.index.tab.one": "プロジェクト",
+  "index.index.tab.two": "報酬",
+  "index.index.my.title": "私",
+  "index.index.data.text": "トリガー",
+  "index.index.item.one": "現在の状態",
+  "index.index.item.two": "共有人数",
+  "index.index.item.three": "チームサイズ",
+  "index.index.share.one": "招待リンク",
+  "index.index.share.two": "参加する必要があります",
+  "index.index.share.three": "コピー",
+  "index.index.list.title": "収入一覧",
+  "index.index.list.item1": "時間",
+  "index.index.list.item2": "詳細",
+  "index.index.list.item3": "数量",
+  "index.index.list.item4": "状態"
 }

locale/ko.json

@@ -20,5 +20,20 @@
   "index.index.invest.send_no": "fail",
   "index.index.invest.send_ok": "succeed",
   "index.error.quit": "log out",
-  "index.error.errorMsg": "Error!"
+  "index.error.errorMsg": "Error!",
+  "index.index.tab.one": "사업소개",
+  "index.index.tab.two": "나의 상",
+  "index.index.my.title": "나의 것",
+  "index.index.data.text": "트리거됨",
+  "index.index.item.one": "현재 상태",
+  "index.index.item.two": "지분인원수",
+  "index.index.item.three": "팀 규모",
+  "index.index.share.one": "초대 링크",
+  "index.index.share.two": "먼저 참여",
+  "index.index.share.three": "복사",
+  "index.index.list.title": "소득 목록",
+  "index.index.list.item1": "시각",
+  "index.index.list.item2": "세부",
+  "index.index.list.item3": "수량",
+  "index.index.list.item4": "상태"
 }

locale/zh-Hans.json

@@ -20,5 +20,21 @@
 	"index.index.invest.send_no": "失败",
 	"index.index.invest.send_ok": "成功",
 	"index.error.quit": "退出",
-	"index.error.errorMsg": "出错啦！"
+	"index.error.errorMsg": "出错啦！",
+	"index.index.tab.one": "項目介紹",
+	"index.index.tab.two": "我的獎勵",
+	"index.index.my.title": "我的",
+	"index.index.data.text": "一觸即發",
+	"index.index.item.one": "當前身份",
+	"index.index.item.two": "分享人數",
+	"index.index.item.three": "團隊人數",
+	"index.index.share.one": "邀請鏈接",
+	"index.index.share.two": "需先參與",
+	"index.index.share.three": "複製",
+	"index.index.list.title": "收入列表",
+	"index.index.list.item1": "時間",
+	"index.index.list.item2": "詳情",
+	"index.index.list.item3": "數量",
+	"index.index.list.item4": "狀態",
+	"index.text": "一觸即發"
 }

pages/index/index.vue

@@ -15,6 +15,92 @@
         <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">
+          <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')}}</view>
+          <view class="item-value">ID:</view>
+        </view>
+        <view class="content-item">
+          <view class="item-value">{{$t('index.index.item.two')}}</view><view class="item-value"></view>
+        </view>
+        <view class="content-item">
+          <view class="item-value">{{$t('index.index.item.three')}}</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>
 
@@ -28,7 +114,8 @@ export default {
       systemLocale: '',
       showLang: false,
       isAjax: false,
-      langList:[{'name':'zh-Hans','value':'简体中文'},{'name':'en','value':'English'},{'name':'ja','value':'日本語'},{'name':'ko','value':'한국어'}]
+      langList:[{'name':'zh-Hans','value':'简体中文'},{'name':'en','value':'English'},{'name':'ja','value':'日本語'},{'name':'ko','value':'한국어'}],
+      tabNum:0,
 
     }
 
@@ -51,6 +138,11 @@ export default {
       this.$i18n.locale = code;
       this.applicationLocale = code;
       this.showLang = false
+    },
+    setTabNum(tabNum){
+      if(tabNum!==this.tabNum){
+        this.tabNum=tabNum
+      }
     }
 
 
@@ -61,7 +153,10 @@ export default {
 .index-data {
   min-height: 100vh;
   background: #6d1cb9;
+  position: relative;
   .index-top{
+    z-index: 100;
+    position: fixed;
     width: 100vw;
     padding: 20rpx;
     color: #fff;
@@ -138,7 +233,302 @@ export default {
 
 
   }
+  .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-color: #e2bd17;
+          color: #000;
+          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: #e2bd17;
+    }
+
+  }
 
 }