bn-q-icon/pages/index/index.vue

<template>
	<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" @click="setShowLang">
            <image v-if="applicationLocale==='en'" src="/static/img/index/en.svg" mode="aspectFit"></image>
            <image v-else src="/static/img/index/cn.svg" mode="aspectFit"></image>
            <view class="lang-list" @click.stop v-show="showLang">
              <view class="lang-item" @click.stop="onLocaleChange('en')" :class="{'lang-item-option':applicationLocale==='en'}">
                <image class="image-ok" src="/static/img/index/en.svg" mode="aspectFit"></image>
                <image class="image-no" src="/static/img/index/en-no.svg" mode="aspectFit"></image>
                <view class="item-vertical"></view>
                <view class="item-str">English</view>
              </view>
              <view class="lang-item"  @click.stop="onLocaleChange('zh-Hans')" :class="{'lang-item-option':applicationLocale==='zh-Hans'}">
                <image class="image-ok" src="/static/img/index/cn.svg" mode="aspectFit"></image>
                <image  class="image-no" src="/static/img/index/cn-no.svg" mode="aspectFit"></image>
                <view class="item-vertical"></view>
                <view class="item-str">简体中文</view>
              </view>
            </view>
          </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" @click="setOptionType(1)" :class="{'option-tab':optionNum===1}" >
              <view class="item-content">{{$t('index.index.investment')}}</view>
              <view class="item-img img-left">
                <image src="/static/img/index/left.png" mode="heightFix"></image>
              </view>
            </view>
            <view class="tab-item" @click="setOptionType(2)" :class="{'option-tab':optionNum===2}" >
              <view class="item-content">{{$t('index.index.after')}}</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">{{$t('index.index.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>{{$t('index.index.affirm')}}</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">{{$t('index.index.transaction')}}</view>
          </view>
          <view class="title-all">{{$t('index.index.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}">{{$t('index.index.team')}}</view>
            <view class="tab-item" @click="setListTab(3)" :class="{'option-tab':listTab===3}">{{$t('index.index.code')}}</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>

  export default {
		components: {


		},
		data() {
			return {
        applicationLocale:'',
        systemLocale:'',
        showLang:false,
        optionNum:1,
        listTab:1
      }

		},
		watch: {

		},
    onLoad(query) {
      this.applicationLocale = uni.getLocale();
    },
    mounted() {

		},
		methods: {
      setShowLang(){
        this.showLang=true
      },
      onLocaleChange(code){
        uni.setLocale(code);
        this.$i18n.locale = code;
        this.applicationLocale = code;
        this.showLang=false
      },
      setOptionType(optionNum){
        if(this.optionNum!==optionNum){
          this.optionNum=optionNum
        }
      },
      setListTab(listTab){
        if(this.listTab!==listTab){
          this.listTab=listTab
        }
      },
      goToUrl(type){
        switch (type) {
          case 1:
            uni.navigateTo({
              'url':'pages/contract/add'
            })
        }
      }

		},
	}
</script>
<style lang="scss" scoped>
.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);
        position: relative;
        image{
          margin: 0 5px;
          height: 35px;
          width: 32px;
        }
        .lang-list{
          padding: 0 10px;
          position: absolute;
          top: 45px;
          right: 0;
          height: 100px;
          word-break: keep-all;
          background: #f6f9ff;
          border-radius: 13px;
          border: 1px solid rgba(39,127,250,.64);
          z-index: 99;
          .lang-item{
            height: 42px;
            padding: 0 10px;
            margin: 5px 0;
            border-radius: 9px;
            display: flex;
            justify-content: left;
            cursor: pointer;
            font-size: 18px;
            image{
              margin-top: 6px;
              width: 30px;
              height: 30px;
            }
            .image-ok{
              display: none;
            }
            .image-no{
              display: block;
            }
            .item-vertical{
              height: 20px;
              width: 1px;
              margin: 11px 5px 0 5px;
              background: #277ffa;
            }
            .item-str{
              color: #277ffa;
              cursor: pointer;
              font-size: 18px;
              line-height: 42px;
              text-align: left;
              margin-left: 5px;
            }
          }
          .lang-item-option{
            background: #277ffa;
            .image-ok{
              display: block;
            }
            .image-no{
              display: none;
            }
            .item-vertical{
              background: #fff;
            }
            .item-str{
              color: #fff;
            }
          }
        }
      }
    }
    .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;
      }

    }

  }

}



</style>