photo_uniapp/meeting/login/index.vue

<template>
    <view class="bg container">
        <meet-sticky :bg="bg">
            <meet-navbar title="" :isFixed="false"></meet-navbar>
        </meet-sticky>
        <view class="content">
            <view v-if="type == 1">
                <view class="text-1">密码登录</view>
                <view class="input-1">
                    <image class="img" src="/static/image/login/icon1.png"></image>
                    <u--input placeholder="请输入手机号" border="surround" v-model="mobile" clearable></u--input>
                </view>
                <view class="input-1">
                    <image class="img" src="/static/image/login/icon2.png"></image>
                    <u--input placeholder="请输入密码" border="surround" v-model="mobile" clearable></u--input>
                </view>
                <view class="loginBtn">登陆</view>
                <view class="text-2">验证码登录</view>
            </view>
            <view v-if="type == 2">
                <view class="text-1 mb-16">验证码登录</view>
                <view class="text-4">若手机号未注册，我们将为您自动注册</view>
                <view class="input-1">
                    <image class="img" src="/static/image/login/icon1.png"></image>
                    <u--input placeholder="请输入手机号" border="surround" v-model="mobile" clearable></u--input>
                </view>
                <view class="input-1">
                    <image class="img" src="/static/image/login/icon6.png"></image>
                    <u--input placeholder="请输入验证码" border="surround" v-model="mobile" clearable></u--input>
                    <view class="text-3">获取验证码</view>
                </view>
                <view class="loginBtn">登陆</view>
                <view class="text-2">密码登录</view>
            </view>
        </view>
        <!-- footer -->
        <view class="footer">
            <image class="img01" src="/static/image/login/icon3.png"></image>
            <view class="footer-text">使用微信登录</view>
            <view class="footer-icon">
                <image class="img02" src="/static/image/login/icon4.png"></image>
                <view class="footer-text-1">已阅读并接受《AI会议助手隐私用户协议》</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bg: "",
            mobile: "",
            type: 2,//1密码 2验证码
        };
    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
@import "../common.scss";

.container {
    min-height: 100vh;
    background-color: #d1dcfe;
    padding: 20rpx 0;

    .content {
        box-sizing: border-box;
        padding: 0 64rpx;
        padding-top: 100rpx;

        .text-1 {
            font-size: 40rpx;
            font-weight: bold;
            color: #23262B;
            margin-bottom: 48rpx;
        }

        .input-1 {
            border: 1px solid #fff;
            border-radius: 24rpx;
            height: 88rpx;
            background: #F0F7FF;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 32rpx;
            margin-bottom: 32rpx;

            .img {
                width: 36rpx;
                height: 36rpx;
            }

            ::v-deep .u-input {
                border: 0;
            }

            .text-3 {
                color: #1467FF;
                font-size: 28rpx;
                width: 150rpx;
                display: block;
            }
        }

        .text-4 {
            color: #4B5158;
            font-size: 28rpx;
            margin-bottom: 48rpx;
        }

        .mb-16 {
            margin-bottom: 16rpx;
        }

        .loginBtn {
            background: #1467FF;
            border-radius: 16rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            color: #fff;
            font-size: 30rpx;
            margin-top: 88rpx;
        }

        .text-2 {
            text-align: center;
            color: #1467FF;
            font-size: 28rpx;
            margin-top: 40rpx;
        }
    }

    .footer {
        position: fixed;
        bottom: 100rpx;
        width: 100%;
        box-sizing: border-box;
        .img01 {
            width: 64rpx;
            height: 64rpx;
            display: block;
            margin: 0 auto;
        }

        .footer-text {
            text-align: center;
            margin-top: 6rpx;
            color: #4B5158;
            font-size: 28rpx;
        }
        .footer-icon{
            padding: 0 64rpx;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            margin-top: 40rpx;
            .img02{
                width: 32rpx;
                height: 32rpx;
                margin-right: 16rpx;
            }
            .footer-text-1{
                color: #4B5158;
                font-size: 28rpx;
            }
        }
    }
}
</style>