BiKing/pages/login/index.vue

<template>
	<view>
		<!-- 头部 -->
		<headContent>
			<template #left>
				<view class="" @click.stop="reversBackBtn()">
					<—— </view>
			</template>
		</headContent>

		<view class="page-content">
			<text class="login-title">登录</text>
			<text class="login-content">立即注册属于您的BiKing账号</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>
	.page-content {
		width: 100%;
		padding: 110rpx 60rpx 0;

		.login-title {
			display: block;
			font-size: 48rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
			line-height: 67rpx;
			letter-spacing: 0.96rpx;
		}

		.login-content {

			display: block;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #808080;
			line-height: 40rpx;
			letter-spacing: 0.56rpx;
		}

	}
	
	.tab-box{
		padding-bottom: 44rpx;
	}
	
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 46rpx;

		.tab-item {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			line-height: 38rpx;
			letter-spacing: 0.6rpx;

			+.tab-item {
				margin-left: 50rpx;
			}
		}

		.active-tab-item {
			color: #20B482;
			position: relative;

			&::before {
				position: absolute;
				left: 0;
				bottom: -11rpx;
				content: '';
				width: 100%;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #20B482;
			}
		}

	}
</style>