BiKing/pages/contract/index.vue

<template>
	<view class="contract">
		<headContent :showleftRight="false">
			<template #content>
				<view class="navigation-box">
					<view :class="['navigation-item hide_1' , contractIndex === index ? 'active-navigation-item' : '']"
						v-for="(item , index) in contractArr" :key="`navigation_${index}`"
						@click.stop="contractIndex = index">
						{{ item }}
					</view>
				</view>
			</template>
		</headContent>
		
		<!-- 永续合约 -->
		<template v-if="contractIndex === 0">
			<sustainability :currency-info="currency"/>
		</template>
		<!-- 永续合约 -->
		<template v-if="contractIndex === 1">
			<shortcut />
		</template>
		<!-- 赠金交易 -->
		<template v-if="contractIndex === 2">
			<grants />
		</template>
		<notarize />
	</view>
</template>

<script>
	import notarize from "./modules/notarize.vue"
	import sustainability from "./sustainability/index.vue"
	import grants from "./grants/index.vue" 
	import shortcut from "./shortcut/index.vue" 
	import { Api_getLeverDeal } from "@/api/index.js"
	// import { startWebSocket , startAjaxSocket} from "@/utils/websock.js"
	export default {
		name:'contract',
		components:{notarize , sustainability , grants , shortcut},
		data() {
			return {
				contractIndex: 0,
				contractArr:[
					'永续合约',
					'快捷合约',
					'赠金交易'
				],
				currency:{},
			};
		},
		onLoad() {
			 // startWebSocket(); 
			// startAjaxSocket()
			const val = this.$getStorageSync('Picture');
			if(val){
				this.currency = val;
			}
			console.log('val = ' , val)
			
		},
		methods:{
			
		}
	}
</script>

 
<style lang="scss" scoped>
	.navigation-box {
		width: 100%;
		height: 100%;
		padding:0 $pages-padding 11rpx;
		display: flex;
		align-items: flex-end;

		.navigation-item {
			// width: 25%;
			flex: 1;
			flex-shrink: 0;
			text-align: center;
			height: 60rpx;
			border: 2rpx solid #27ae83;
			line-height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #05c175;

			&:nth-child(n + 2) {
				border-left: none;
			}

			&:last-child {
				border-radius: 0 6rpx 6rpx 0;
			}

			&:first-child {
				border-radius: 6rpx 0 0 6rpx;
			}
		}

		.active-navigation-item {
			background-color: #05C175;
			color: #FFFFFF;
		}
	}
</style>