更新记录

1.2.0（2024-12-08） 下载此版本

效果优化

1.1.0（2024-03-29） 下载此版本

更新配置

1.0.0（2023-06-04） 下载此版本

初始化

平台兼容性

uni-app

其他

支持扫码体验-见右侧二维码

<template>
    <view class="login">
        <view class="title">
            微光后台
        </view>
        <view class="input-item">
            <view class="input-label">
                <view class="line"></view>
                账户
            </view>
            <input class="popup-content-input" v-model="account" placeholder="请输入账户" />
        </view>
        <view class="input-item">
            <view class="input-label">
                <view class="line"></view>密码
            </view>
            <input class="popup-content-input" type="password" v-model="password" placeholder="请输入账户密码" />
        </view>
        <move-verify :style="{ marginTop: '40rpx'} " @vertify='vertifyResult'></move-verify>
        <view class="common-button" @click="handleValidate">
            登录
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                account: '', //账号
                password: "", //验证码
                vertify: false,
            };
        },
        methods: {
            /**
             * 登录
             */
            async handleValidate() {
                let errorMsg
                if (!this.account) errorMsg = '请输入账户'
                else if (!this.password) errorMsg = '请输入账户密码'
                else if (!this.vertify) errorMsg = '请拖动滑块验证'
                if (errorMsg) {
                    uni.showToast({
                        title: errorMsg,
                        icon: 'none'
                    })
                    return
                }
                console.log('-登录-')
            },
            /**
             * 滑动验证
             */
            vertifyResult(vertify) {
                this.vertify = vertify
            },
        }
    }
</script>
<style lang="scss">
    page {
        background: #fff;
    }

    .login {
        .title {
            font-size: 44rpx;
            font-weight: 500;
            text-align: center;
            margin: 240rpx auto 0;
        }

        .input-item {
            width: 700rpx;
            margin: 10rpx auto;
            padding: 0 0 20rpx 0;
            border-bottom: 1px solid rgba(52, 52, 52, 0.2);

            .input-label {
                font-size: 28rpx;
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;

                .line {
                    background: #2979ff;
                    width: 6rpx;
                    height: 24rpx;
                    border-radius: 4rpx;
                    margin-right: 12rpx;
                }
            }

            .popup-content-input {
                flex: 1;
            }
        }

        .common-button {
            width: 680rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            border-radius: 10rpx;
            margin: 50rpx auto;
            background: linear-gradient(to right, #FEEF3C, #F3CD34);
        }
    }
</style>

当前登录页使用了