YileUI - 登录页面

简述

登录页面界面，基于 帐号 + 密码 + 去注册 + 找回密码 等内容项。

平台支持

<template>
    <view class="login_con">
        <view class="title">帐号登录</view>
        <view class="form">
            <view class="con">
                <label>帐号</label>
                <yile-input placeholder="手机号/邮箱" size="34rpx"></yile-input>
            </view>
            <view class="con">
                <label>密码</label>
                <yile-input type="password" placeholder="请输入密码" size="34rpx"></yile-input>
            </view>
        </view>
        <view class="href" @click="onClick(1)">
            没有帐号？立即注册
        </view>
        <view class="btns">
            <text>上述帐号信息仅用于登录验证</text>
            <button @click="onClick(2)">同意并登录</button>
            <view><label @click="onClick(3)">找回密码</label>|<label @click="onClick(4)">更多选项</label></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {
            onClick(type) {
                switch (type) {
                    case 1:
                        uni.showToast({
                            title: '事件：立即注册',
                            icon: "none"
                        });
                        break;
                    case 2:
                        uni.showToast({
                            title: '事件：同意并登录',
                            icon: "none"
                        });
                        break;
                    case 3:
                        uni.showToast({
                            title: '事件：找回密码',
                            icon: "none"
                        });
                        break;
                    case 4:
                        uni.showToast({
                            title: '事件：更多选项',
                            icon: "none"
                        });
                        break;
                }
            }
        }
    }
</script>

<style>
    page {
        background-color: #f8f8f8;
    }

    .login_con {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 0 10%;

        .title {
            width: 100%;
            text-align: center;
            font-size: 40rpx;
            margin-top: 70rpx;
            font-weight: bold;
        }

        .form {
            display: flex;
            flex-direction: column;
            margin-top: 80rpx;
            border-bottom: 1px solid #eee;

            view.con {
                display: flex;
                flex-direction: row;
                width: 100%;
                border-top: 1px solid #eee;
                padding: 10rpx 0;

                label {
                    display: flex;
                    align-items: center;
                    width: 90rpx;
                    font-size: 34rpx;
                }

                yile-input {
                    flex: 1;
                }
                
                .yile-input-con {
                    flex: 1;
                    border: 0;
                }
            }
        }

        .href {
            width: 100%;
            font-size: 28rpx;
            font-weight: bold;
            color: #3485FB;
            margin-top: 30rpx;
        }

        .btns {
            position: fixed;
            bottom: 60rpx;
            text-align: center;
            width: 80%;
            left: 10%;

            text {
                font-size: 28rpx;
                color: #999;
            }

            button {
                background-color: #3485FB;
                color: #fff;
                width: 60%;
                font-size: 32rpx;
                margin: 30rpx auto 50rpx;
            }

            view {
                color: #3485FB;
                font-size: 28rpx;

                label {
                    margin: 0 15rpx;
                }
            }
        }
    }
</style>