uniapp-shikongwang/pages/login/index.vue

<template>
	<view>
		<view class="lf-row-center lf-flex-column box">
			<image class="img"></image>
			<view class="lf-m-t-10 lf-font-32">游客jdsfbuskdnko</view>
			<button class="btn">
				<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
				<text class="lf-m-l-20">绑定微信</text>
			</button>
			<view class="lf-m-t-40 lf-font-28">暂不绑定继续操作</view>
		</view>
		<!-- 服务条款 -->
		<view class="fixed-bottom">
			<checkbox class="lf-text-vertical" :checked="checked"></checkbox>
			<text class="lf-m-l-10 lf-font-24 lf-color-gray">
				<text>请认真阅读并同意</text>
				<text class="highlight" @click="enterAgree">《时空网协议》</text>
				<text>，在小程序下单购买即表示您已默认同意</text>
				<text class="highlight" @click="enterAgree">《时空网协议》</text>
				<text>的所有条款。</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				checked: true
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.box{
		padding: 60rpx 32rpx;
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		.img{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background-color: #EEEEEE;
		}
		.btn{
			background-color: #09BB07;
			color: #FFFFFF;
			width: 100%;
			height: 88rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 80rpx;
		}
	}
	.fixed-bottom{
		position: fixed;
		bottom: 60rpx;
		left: 0;
		padding: 0 32rpx;
		.highlight{
			color: #1e90ff;
		}
	}
</style>