BiKing/pages/login/index.vue

<template>
	<view>
		<!-- 头部 -->
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
		</headContent>

		<view class="page-content">
			<text class="login-title">登录</text>
			<text class="login-content">Hi, 欢迎来到币王</text>

			<view class="tab-box">
				<view class="tab">
					<view v-for="(item , index) in marketTab"
						:class="['tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
						@click.stop="marketTabIndex = index">
						{{ item }}
					</view>

				</view>
				<!-- <component :is="phoneLogin"/> -->
			</view>
			<phoneLogin />
		</view>


	</view>
</template>

<script>
	import {
		reverseBack
	} from "@/utils/common.js"
	import phoneLogin from "./modules/phone.vue"
	import mailboxLogin from "./modules/mailbox.vue"
	export default {
		name: 'login',
		components: {
			phoneLogin,
			mailboxLogin
		},
		data() {
			return {
				marketTabIndex: 0,
				marketTab: [
					'手机号',
					'邮箱'
				]
			};
		},
		methods: {
			reversBackBtn() {
				reverseBack()
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	@import "~./common.scss"
</style>