uniapp 注册页 样式效果

uniapp yekong 269℃

uniapp开发 注册页 样式效果模板
uniapp 注册页 样式效果

<template>
    <view class="flex-col container">
        <view class="flex-col group">
            <view class="divider"> </view>
            <image src="/static/1024.png" class="image_1" />
            <div class="form">
                <div class="formdata2">
                    <text>手机</text>
                </div>
                <div class="formdata">
                    <input type="text" placeholder="请输入用户名" v-model="userinfo">
                    <u-icon color="#6C6C6C" class="image_3" name="account" size="20"></u-icon>
                </div>
                <div class="formdata2">
                    <text>验证码</text>
                    <getcode></getcode>
                </div>
                <div class="formdata">
                    <input type="text" placeholder="请输入验证码" v-model="code">
                </div>
                <div class="formdata2">
                    <text>密码</text>
                </div>
                <div class="formdata">
                    <input v-if="!ispassword" type="password" placeholder="请输入密码" v-model="password">
                    <input v-else type="text" placeholder="请输入密码" v-model="password">
                    <u-icon v-if="ispassword" @click="ispassword=false" color="#6C6C6C" class="image_3" name="eye"
                        size="20"></u-icon>
                    <u-icon v-else @click="ispassword=true" color="#6C6C6C" class="image_3" name="eye-off" size="20">
                    </u-icon>
                </div>
            </div>
            <view class="flex-col group_5">
                <view @click="view_8OnClick" class="justify-center button">
                    <text>立即提交</text>
                </view>
            </view>
            <view @click="goback" class="group_1 flex-col items-center view_1">
                <text>登录</text>
            </view>
        </view>
    </view>
</template>

<script>
    import getcode from '../../components/getcode.vue'
    export default {
        components: {
            getcode
        },
        data() {
            return {
                password: '',
                userinfo: '',
                code: '',
                ispassword: false,
                selected: true
            };
        },

        methods: {
            view_8OnClick() {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            },
            goback() {
                uni.navigateBack({

                })
            },
            getselected() {
                this.selected = !this.selected
            }
        },
    };
</script>

<style scoped lang="scss">
    .container {
        background-color: rgb(255, 255, 255);
        width: 100vw;
        height: 100vh;
        overflow-y: auto;

        .group {

            .image_1 {
                margin-top: 50rpx;
                align-self: center;
                width: 200rpx;
                height: 200rpx;
            }

            .group_1 {
                position: relative;

                .group_2 {
                    margin-left: 48rpx;
                    margin-right: 50rpx;
                    color: rgb(0, 0, 0);
                    font-size: 24rpx;
                    line-height: 105rpx;
                    height: 355rpx;
                    position: relative;

                    .group_3 {
                        width: 81rpx;
                        position: absolute;
                        left: 2rpx;
                        top: 0;

                        .text_1 {
                            opacity: 0.5;
                        }
                    }

                    .group_4 {
                        width: 249rpx;
                        position: absolute;
                        left: 0;
                        top: 40rpx;
                    }

                    .divider_1 {
                        background-color: rgb(0, 172, 167);
                        height: 2rpx;
                        position: absolute;
                        left: 2rpx;
                        right: 0;
                        top: 115rpx;
                    }

                    .divider_2 {
                        background-color: rgba(0, 0, 0, 0.08);
                        height: 2rpx;
                        position: absolute;
                        left: 2rpx;
                        right: 0;
                        top: 220rpx;
                    }

                    .divider_3 {
                        background-color: rgba(0, 0, 0, 0.08);
                        height: 2rpx;
                        position: absolute;
                        left: 2rpx;
                        right: 0;
                        top: 325rpx;
                    }
                }

                .image_2 {
                    width: 25rpx;
                    height: 24rpx;
                    position: absolute;
                    left: 673rpx;
                    top: 80rpx;
                }

                .text_8 {
                    color: rgb(0, 172, 167);
                    font-size: 24rpx;
                    line-height: 105rpx;
                    white-space: nowrap;
                    position: absolute;
                    left: 583rpx;
                    top: 104rpx;
                }

                .image_4 {
                    width: 650rpx;
                    height: 2rpx;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .view {
                margin-top: 80rpx;
            }

            .group_5 {
                margin-top: 100rpx;

                .button {
                    padding: 27rpx 51rpx 31rpx;
                    align-self: center;
                    color: rgb(255, 255, 255);
                    font-size: 24rpx;
                    line-height: 23rpx;
                    white-space: nowrap;
                    background-color: #3D9CFF;
                    border-radius: 40rpx;
                    width: 350rpx;
                    position: relative;

                    .icon {
                        position: absolute;
                        right: 51rpx;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 9rpx;
                        height: 17rpx;
                    }
                }
            }

            .view_1 {
                margin-top: 132rpx;
                color: rgb(153, 153, 153);
                font-size: 24rpx;
                line-height: 22rpx;
                white-space: nowrap;
            }

            .image_5 {
                margin-top: 176rpx;
                align-self: center;
                width: 100vw;
                height: 55.5vw;
            }
        }
    }

    .form {
        width: 650rpx;
        margin: auto;

        .formdata2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            margin-top: 20rpx;

            text {
                font-size: 24rpx;
                font-family: PingFang;
                font-weight: 300;
                color: rgba(#000000, 0.5);
            }
        }

        .formdata {
            height: 60rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            line-height: 60rpx;
            width: 100%;
            position: relative;

            input {
                font-size: 24rpx;
                color: rgba(0, 0, 0, 1);
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
                width: 100%;
                height: 60rpx;
            }

            &:focus {
                border-color: red;
            }
        }
    }

    .image_2 {
        width: 25rpx;
        height: 24rpx;
        position: absolute;
        right: 0;
        top: 20rpx;
    }

    .image_3 {
        width: 25rpx;
        height: 19rpx;
        position: absolute;
        right: 10rpx;
        top: 20rpx;
    }

    .group_6 {
        margin-top: 53rpx;
        color: rgba(0, 0, 0, 0.5);
        font-size: 24rpx;
        line-height: 23rpx;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;

        .icon_1 {
            width: 28rpx;
            height: 28rpx;
        }

        .icon_2 {
            width: 28rpx;
            height: 28rpx;
            border: 1rpx solid rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }

        .text_10 {
            margin-left: 11rpx;
            margin-bottom: 4rpx;
        }
    }

    .group_6.active {
        color: rgb(0, 172, 167);
    }
</style>

getcode

<template>
    <div class="getcode">
        <span @click="getcodedjs" v-if="showText && count<=0" class="sendcode" slot="append">发送验证码</span>
        <span @click="getcodedjs" v-else-if="showText" class="sendcode" slot="append">发送验证码</span>
        <span v-else-if="!showText" class="sendcode" slot="append">{{ second }} s</span>
    </div>
</template>

<script>
    export default {
        name: 'getcode',
        components: {},
        props: {
            id: {
                type: String,
                default () {
                    return ''
                }
            }
        },
        data() {
            return {
                showText: true,
                second: 60,
                count: 0,
            }
        },
        watch: {},
        mounted() {},
        methods: {
            getcodedjs() {
                this.second = 60
                this.showText = false
                this.count++
                this.interval = setInterval(() => {
                    --this.second
                    this.reset()
                }, 1000)
            },
            reset() {
                if (this.second <= 0) {
                    clearInterval(this.interval)
                    this.showText = true
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .getcode {
        font-size: 24rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #3D9CFF;
        flex-shrink: 0;
        width: 90px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        cursor: pointer;
    }
</style>

喜欢 (0)