|
|
@@ -1,574 +1,146 @@
|
|
|
<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 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">bn.dao</view>
|
|
|
</view>
|
|
|
- <view class="top-name">
|
|
|
- <image src="/static/img/index/name.svg" mode="widthFix"></image>
|
|
|
+ <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">0x848da9...cfa9</view>
|
|
|
</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')}}: {{(usdtNum).toFixed(6)}}</view>
|
|
|
- <view class="data-input">
|
|
|
- <view>
|
|
|
- <input type="number">
|
|
|
- </view>
|
|
|
-
|
|
|
- <view> <button>MAX</button></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="from-but">
|
|
|
- <button @click="setInvest">{{$t('index.index.affirm')}}</button>
|
|
|
- </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 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>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
|
|
|
</template>
|
|
|
<script>
|
|
|
-
|
|
|
-import {getInvestData, setInvest} from "@/api/contract";
|
|
|
-import tools from "@/common/js/tools";
|
|
|
-import bitkeepTron from "@/common/wallet/bitkeep-wallet/bitkeep-tron";
|
|
|
-
|
|
|
export default {
|
|
|
- components: {
|
|
|
-
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ applicationLocale: '',
|
|
|
+ systemLocale: '',
|
|
|
+ showLang: false,
|
|
|
+ isAjax: false,
|
|
|
+ langList:[{'name':'zh-Hans','value':'简体中文'},{'name':'en','value':'English'},{'name':'ja','value':'日本語'},{'name':'ko','value':'한국어'}]
|
|
|
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- applicationLocale:'',
|
|
|
- systemLocale:'',
|
|
|
- showLang:false,
|
|
|
- optionNum:1,
|
|
|
- listTab:1,
|
|
|
- investData: {
|
|
|
- id: 1,
|
|
|
- invest_money: '',
|
|
|
- sysAddress: "",
|
|
|
- sendNum: "",
|
|
|
- },
|
|
|
- isAjax: false,
|
|
|
- usdtNum:0
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- watch: {
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- async onLoad(query) {
|
|
|
- this.applicationLocale = uni.getLocale();
|
|
|
- this.getInvestData()
|
|
|
- this.usdtNum = await bitkeepTron.getTokenBalance('', 0);
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ async onLoad(query) {
|
|
|
+ this.applicationLocale = uni.getLocale();
|
|
|
+ // this.getInvestData()
|
|
|
+ // this.usdtNum = await bitkeepTron.getTokenBalance('', 0);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setShowLang() {
|
|
|
+ this.showLang = !this.showLang
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ setLocaleLang(code) {
|
|
|
+ uni.setLocale(code);
|
|
|
+ this.$i18n.locale = code;
|
|
|
+ this.applicationLocale = code;
|
|
|
+ this.showLang = false
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getInvestData() {
|
|
|
- getInvestData().then((res) => {
|
|
|
- if (res.code === 1) {
|
|
|
- this.investData = res.data
|
|
|
- } else {
|
|
|
- tools.leftClick()
|
|
|
- }
|
|
|
- }).catch((e) => {
|
|
|
- tools.leftClick()
|
|
|
- })
|
|
|
- },
|
|
|
- async setInvest() {
|
|
|
- if (this.investData.sendNum > 0) {
|
|
|
- tools.error(this.$t('index.index.invest.execute'))
|
|
|
- return;
|
|
|
- }
|
|
|
- let trxNum = await bitkeepTron.getBalance('');
|
|
|
- if (trxNum < 5) {
|
|
|
- tools.error(this.$t('index.index.invest.mix'))
|
|
|
- return
|
|
|
- }
|
|
|
- let usdtNum = await bitkeepTron.getTokenBalance('', 0);
|
|
|
- if (usdtNum < this.investData.invest_money && !tools.isDevelopment()) {
|
|
|
- tools.error(this.$t('index.index.invest.no_usdt'))
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.isAjax) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.isAjax = true
|
|
|
- let transactionData = bitkeepTron.getContractData(this.investData.sysAddress, this.investData.invest_money,0)
|
|
|
- bitkeepTron.sendTransaction(transactionData).then((res) => {
|
|
|
- if (res) {
|
|
|
- setInvest({'txid':res,'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)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.isAjax = false
|
|
|
- tools.error(this.$t('index.index.invest.send_no'))
|
|
|
- }
|
|
|
- }).catch((e) => {
|
|
|
- this.isAjax = false
|
|
|
- tools.error(this.$t('index.index.invest.send_no'))
|
|
|
- })
|
|
|
- },
|
|
|
- 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{
|
|
|
+.index-data {
|
|
|
min-height: 100vh;
|
|
|
+ background: #6d1cb9;
|
|
|
.index-top{
|
|
|
- height: 120px;
|
|
|
- .top-logo{
|
|
|
- height: 35px;
|
|
|
- padding:10px 16px;
|
|
|
+ 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;
|
|
|
- .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;
|
|
|
+ .head-item{
|
|
|
+ height: 60rpx;
|
|
|
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;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ justify-content: left;
|
|
|
}
|
|
|
- .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;
|
|
|
+ .head-left{
|
|
|
+ .left-img{
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ image{
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
}
|
|
|
- .icon-icon{
|
|
|
- position: absolute;
|
|
|
- right: 22px;
|
|
|
- top: 13px;
|
|
|
- image{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
- .from-between{
|
|
|
- margin: 18px 0;
|
|
|
- height: 2px;
|
|
|
- background: #fbfbfd;
|
|
|
+ .left-text{
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffe347;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .head-right{
|
|
|
+ .right-img{
|
|
|
+ margin-top: 6rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ image{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
- .from-but{
|
|
|
- margin-top: 18px;
|
|
|
- height: 64px;
|
|
|
- button{
|
|
|
- height: 64px;
|
|
|
- line-height: 64px;
|
|
|
- font-size: 24px;
|
|
|
- background: #277ffa;
|
|
|
- border-radius: 17px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .right-text{
|
|
|
+ background: #ffe347;
|
|
|
+ border-radius:52rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ width: 208rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- .index-list{
|
|
|
- padding:6px 16px;
|
|
|
- .list-title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .title-data{
|
|
|
+ .top-lang{
|
|
|
+ transition: 0.5s ease;
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .lang-item{
|
|
|
+ height: 100rpx;
|
|
|
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;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
+ .show-lang{
|
|
|
+ height: auto;
|
|
|
+ transition: 0.5s ease;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-}
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
</style>
|
BF-202210271038\Administrator
