<template>
	<view class="">

		<view class="main">
			<u-input v-model="value"  :placeholder="teee" :type="type" :border="border"
				class="custom-style" />
			<image src="../../../static/tongyonh/MaskGroup.png" mode="aspectFit" class="bg"></image>
			<u-tabs  font-size="26" bar-width="124" inactive-color="#7D87A6" active-color="#5B53FF" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view class="item_con">
			
			<view class="item">
				<image src="../../../static/tongyonh/Ellipse45.png" mode="aspectFit" class="img"></image>
			<view class="text_con">
				<view class="text1">
				{{i18n.Beefy}}
				</view>
				<view class="text2">
				{{i18n.revenue}}
				</view>
			</view>
			</view>
			
			<view class="item">
				<image src="../../../static/tongyonh/Ellipse46.png" mode="aspectFit" class="img"></image>
			<view class="text_con">
				<view class="text1">
						{{i18n.Bunicorn}}
				</view>
				<view class="text2">
						{{i18n.throughmobility}}
				</view>
			</view>
			</view>
			
			
			<view class="item">
				<image src="../../../static/tongyonh/Ellipse47.png" mode="aspectFit" class="img"></image>
			<view class="text_con">
				<view class="text1">
						{{i18n.ForTube}}
				</view>
				<view class="text2">
				{{i18n.platform}}）
				</view>
			</view>
			</view>
			
			
		</view>
		</view>
 <view class="view_con" v-if="false">
	 <view class="bg">
	 <image src="../../../static/tongyonh/Ellipse46.png" mode="aspectFit" class="img1"></image>
	  </view>
	 	 <view class="tiao"></view>
		 <view class="title">
		 {{i18n.Disclaimers}}
		 </view>
		 <view class="bottom">
		 	<view class="title2">
				{{i18n.Beefy}}
		 	</view>
			<view class="text">
					{{i18n.redirected}}
			</view>
			
			<view class="select">
				<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox 
								@change="checkboxChange" 
								v-model="item.checked" 
								v-for="(item, index) in list2" :key="index" 
								:name="item.name"
								 active-color="#5B53FF"
							>  <text class="name">{{item.name}}</text> </u-checkbox>
						</u-checkbox-group>
			</view>
			<view class="btn">
					{{i18n.Confirm}}
			</view>
		 </view>
	 </view>
<u-mask :show="show" @click="show = false" z-index="10"></u-mask>

		<tab-bar :selectActive="4"></tab-bar>
	</view>




</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	import tabBar from "@/components/tabBar/tabBar.vue"
	export default {
		data() {
			return {
				teee: this.$t('index').DAPPwebsite,
					list2: [
								{
									name: 'No more tips next time',
									checked: false,
									disabled: false
								},
							],
				show: false,
				value: '',
				type: 'text',
				border: true,
				list: [
					{
					name: this.$t('index').Popular
				}, 
				{
					name: this.$t('index').Lending
				},
				{
					name: this.$t('index').Trade

				}, 
				{
					name: this.$t('index').Yield
				
				}, 
				{
					name:  this.$t('index').Stake
				
				}, 
				],
				current: 0
			}
		},
	computed: {
					i18n() {
						return this.$t('index')
					},
				},

		methods: {
			change(index) {
				this.current = index;
			}
		}
	};
</script>
<style scoped>

</style>

<style>
	@import './index.css';
</style>
