|
|
@@ -1,20 +1,101 @@
|
|
|
<template>
|
|
|
- <view class="box-data">
|
|
|
- <en-nav title="首页" :left-show="false"></en-nav>
|
|
|
- <view class="box-but"><button @click="goToUrl(1)">投资</button> </view>
|
|
|
+ <view class="index-data">
|
|
|
+ <view class="index-top">
|
|
|
+ <view class="top-logo">
|
|
|
+ <view class="logo-img">
|
|
|
+ <image src="/static/img/index/index-logo.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="logo-lang">
|
|
|
+ <image src="/static/img/index/en.svg" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-name">
|
|
|
+ <image src="/static/img/index/name.svg" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="top-bg"></view>
|
|
|
+ </view>
|
|
|
+ <view class="index-from">
|
|
|
+ <view class="from-data">
|
|
|
+ <view class="from-tab">
|
|
|
+ <view class="tab-item" :class="{'option-tab':optionNum===1}" >
|
|
|
+ <view class="item-content">投资</view>
|
|
|
+ <view class="item-img img-left">
|
|
|
+ <image src="/static/img/index/left.png" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tab-item" :class="{'option-tab':optionNum===2}" >
|
|
|
+ <view class="item-content">复投</view>
|
|
|
+ <view class="item-img img-right">
|
|
|
+ <image src="/static/img/index/right.png" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="from-data">
|
|
|
+ <view class="from-icon">
|
|
|
+ <view class="icon-img">
|
|
|
+ <image src="/static/img/index/USDT(ERC20).png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-name">USDT(TRC20)</view>
|
|
|
+ <view class="icon-icon">
|
|
|
+ <image src="/static/img/index/select.svg" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="from-between"></view>
|
|
|
+ <view class="from-input">
|
|
|
+ <view class="input-data">
|
|
|
+ <view class="data-money">余额:0</view>
|
|
|
+ <view class="data-input">
|
|
|
+ <view>
|
|
|
+ <input type="number">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view> <button>MAX</button></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="from-but">
|
|
|
+ <button>确认</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="index-list">
|
|
|
+ <view class="list-title">
|
|
|
+ <view class="title-data">
|
|
|
+ <view><image class="title-img" mode="aspectFit" src="/static/img/index/a.png"></image></view>
|
|
|
+ <view class="title-str">交易记录</view>
|
|
|
+ </view>
|
|
|
+ <view class="title-all">更多>></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-tab">
|
|
|
+ <view class="tab-items">
|
|
|
+ <view class="tab-item" @click="setListTab(1)" :class="{'option-tab':listTab===1}">NFT</view>
|
|
|
+ <view class="tab-item" @click="setListTab(2)" :class="{'option-tab':listTab===2}">我的团队</view>
|
|
|
+ <view class="tab-item" @click="setListTab(3)" :class="{'option-tab':listTab===3}">推荐码</view>
|
|
|
+ </view>
|
|
|
+ <view class="tab-item-bg" :class="{'bg-location-1':listTab===1,'bg-location-2':listTab===2,'bg-location-3':listTab===3}"></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-data">
|
|
|
+ <view class="contract-list"></view>
|
|
|
+ <view class="team-list"></view>
|
|
|
+ <view class="recommend-code"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
<script>
|
|
|
-import EnNav from "@/components/en-utils/en-nav/en-nav";
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
- EnNav
|
|
|
+
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ optionNum:1,
|
|
|
+ listTab:1
|
|
|
}
|
|
|
|
|
|
},
|
|
|
@@ -28,6 +109,11 @@ import EnNav from "@/components/en-utils/en-nav/en-nav";
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ setListTab(listTab){
|
|
|
+ if(this.listTab!==listTab){
|
|
|
+ this.listTab=listTab
|
|
|
+ }
|
|
|
+ },
|
|
|
goToUrl(type){
|
|
|
switch (type) {
|
|
|
case 1:
|
|
|
@@ -41,17 +127,284 @@ import EnNav from "@/components/en-utils/en-nav/en-nav";
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.box-data{
|
|
|
-min-height: calc(100vh - 100px);
|
|
|
-padding-bottom: 50px;
|
|
|
- .box-but{
|
|
|
- padding: 32rpx;
|
|
|
- button{
|
|
|
- background: #3169FA;
|
|
|
- color: #fff;
|
|
|
- font-size: 32rpx;
|
|
|
+.index-data{
|
|
|
+ min-height: 100vh;
|
|
|
+ .index-top{
|
|
|
+ height: 120px;
|
|
|
+ .top-logo{
|
|
|
+ height: 35px;
|
|
|
+ padding:10px 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .logo-img{
|
|
|
+ width: 68px;
|
|
|
+ image{
|
|
|
+ width: 68px;
|
|
|
+ height: 29px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logo-lang{
|
|
|
+ height: 35px;
|
|
|
+ background: rgba(241,134,134,.04);
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid hsla(0,0%,100%,.2);
|
|
|
+ image{
|
|
|
+ margin: 0 5px;
|
|
|
+ height: 35px;
|
|
|
+ width: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-name{
|
|
|
+ image{
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-bg{
|
|
|
+ height: 270px;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: -99;
|
|
|
+ background: #277ffa!important;
|
|
|
}
|
|
|
}
|
|
|
+ .index-from{
|
|
|
+ padding: 6px;
|
|
|
+ .from-data{
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 30px;
|
|
|
+ width: calc(100vw - 12px);
|
|
|
+ .from-tab{
|
|
|
+ position: relative;
|
|
|
+ width: calc(100vw - 12px);
|
|
|
+ border-radius: 30px 30px 0 0;
|
|
|
+ background: #f7f8fa;
|
|
|
+ height: 38px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .tab-item{
|
|
|
+ width: 50%;
|
|
|
+ z-index: 1;
|
|
|
+ .item-content{
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ color: #9197a5;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .item-img{
|
|
|
+ display: none;
|
|
|
+ z-index: -1;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ image{
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-left{
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .img-right{
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .option-tab{
|
|
|
+ z-index: 3;
|
|
|
+ .item-content{
|
|
|
+ color: #000;
|
|
|
+ z-index: 5;
|
|
|
+ }
|
|
|
+ .item-img{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .from-data{
|
|
|
+ border-radius: 0 0 30px 30px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .from-icon{
|
|
|
+ position: relative;
|
|
|
+ height: 46px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ .icon-img{
|
|
|
+ margin-right: 10px;
|
|
|
+ image{
|
|
|
+ height: 46px;
|
|
|
+ width: 46px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-name{
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .icon-icon{
|
|
|
+ position: absolute;
|
|
|
+ right: 22px;
|
|
|
+ top: 13px;
|
|
|
+ image{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .from-between{
|
|
|
+ margin: 18px 0;
|
|
|
+ height: 2px;
|
|
|
+ background: #fbfbfd;
|
|
|
+ }
|
|
|
+ .from-input{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #f2f5fa;
|
|
|
+ margin-bottom: 55px;
|
|
|
+ .input-data{
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 45px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 16px;
|
|
|
+ .data-money{
|
|
|
+ height: 20px;
|
|
|
+ color: #6b6c70;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .data-input{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ input{
|
|
|
+ height: 25px;
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ font-size: 18px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ padding: 1px 2px;
|
|
|
+ }
|
|
|
+ button{
|
|
|
+ font-size: 12px;
|
|
|
+ -webkit-text-size-adjust: none;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #fff;
|
|
|
+ width: 38px;
|
|
|
+ height: 18px;
|
|
|
+ padding: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+ line-height: 15px;
|
|
|
+ margin-top: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #277ffa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .from-but{
|
|
|
+ margin-top: 18px;
|
|
|
+ height: 64px;
|
|
|
+ button{
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ font-size: 24px;
|
|
|
+ background: #277ffa;
|
|
|
+ border-radius: 17px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .index-list{
|
|
|
+ padding:6px 16px;
|
|
|
+ .list-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title-data{
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ .title-img{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .title-str{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #292929;
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .title-all{
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3184fa;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-tab{
|
|
|
+ height: 100%;
|
|
|
+ background: #eaf2ff;
|
|
|
+ border-radius: 36px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ .tab-items{
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 36px;
|
|
|
+ .tab-item{
|
|
|
+ z-index: 10;
|
|
|
+ width: calc(100% / 3);
|
|
|
+ font-size: 13px;
|
|
|
+ color: #adbad0;
|
|
|
+ display: block;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .option-tab{
|
|
|
+ color: #292929;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-item-bg{
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 36px;
|
|
|
+ background: #fff;
|
|
|
+ transition: .5s ease;
|
|
|
+ height: 32px;
|
|
|
+ width: calc(100% / 3);
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .bg-location-1{
|
|
|
+ left: 0;
|
|
|
+ transition: .5s ease;
|
|
|
+ }
|
|
|
+ .bg-location-2{
|
|
|
+ left: 33.33%;
|
|
|
+ transition: .5s ease;
|
|
|
+ }
|
|
|
+ .bg-location-3{
|
|
|
+ left: 66.66%;
|
|
|
+ transition: .5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
sys
