#

whycq

2023-08-17 290bf03803f24befe259ae201e04e4b73751c5a3

#

 components/My-input/My-input.vue

New file
@@ -0,0 +1,31 @@
<template>
    <view class="my-input">
        <uni-icons type="person" size="20" color="#707070" style="margin: 0 8px 0 8px;"></uni-icons>
        <view class="box-text">账号:</view>
        <input type="text" class="input" placeholder="请输入账号" style="margin-left: 8px;margin-right:8px;flex:1;">
        <uni-icons type="eye" size="20" color="#707070" style="margin-left: auto;margin-right: 8px;"></uni-icons>
    </view>
</template>

<script>
</script>

<style lang="scss">
    .my-input {
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        background-color:  #ECF0F1;
        border-radius: 14rpx;
        box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
                    inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
                    -8rpx -8rpx 10rpx rgba(0,0,0,.4);
    }
    .box-text {
        line-height: 1;
    }
    .input {
        // background-color:  #ECF0F1;
    }
</style>

 pages/LoginDemo/LoginDemo.vue

@@ -1,12 +1,32 @@
<template>
    <view class="main">
        <!-- 设置按钮 -->
        <uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
        <view class="left">
            <!-- logo -->
            <view class="logo-box">
                <image src="../../static/img/logo.png" mode="aspectFit"></image>
            </view>
        </view>
        <view class="right">right</view>
        <view class="right">
            <view class="input-box">
                <My-input style="width: 80%;margin: 32rpx 10% 32rpx 10%;" />
                <My-input style="width: 80%;margin: 32rpx 10% 8rpx 10%;" />
                <view class="rember-password">
                    <view class="text">记住密码</view>
                    <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
                </view>
            </view>
            <view class="button">
                登录
            </view>
        </view>
        <!-- 版本号 -->
        <!-- #ifdef APP-PLUS -->
        <view class="version">
            当前版本:{{version}}
        </view>
        <!-- #endif -->
    </view>
</template>

@@ -14,15 +34,23 @@
    export default {
        data() {
            return {
                version: '',
                
            }
        },
        mounted() {
            uni.getSystemInfo({
                success(res) {
                    console.log(res);
                    // console.log(res);
                }
            })
            // 手机端版本号
            // #ifdef APP-PLUS
            var that = this
            plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
                that.version = wgtinfo.version
            });
            // #endif
        },
        methods: {
            
@@ -30,56 +58,113 @@
    }
</script>

<style>
<style lang="scss">
    .setting {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        border-radius: 40rpx;
        box-shadow: inset 4rpx 4rpx 4rpx rgba(0,0,0,.3),
                    inset -4rpx -4rpx 4rpx rgba(255,255,255,.7),
                    -4rpx -4rpx 4rpx rgba(0,0,0,.4);
    }
    .main {
        height: 100%;
        width: 100%;
        display: flex;
        background-color: #ECF0F1;
        position: absolute;
    }
    .left {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo-box {
        background-color:  #ECF0F1;
        border-radius: 40rpx;
        box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
                    inset -8px -8px 8px rgba(255,255,255,.7),
                    -8px -8px 10px rgba(0,0,0,.4);
    }
    image {
        height: 100%;
        width: 100%;
    }
    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .input-box {
        width: 100%;
        // background-color: #888;
    }
    .rember-password {
        width: 78%;
        margin: 0 11% 0 11%;
        display: flex;
        justify-content: space-between;
        .text {
            line-height: 1;
        }
    }
    .button {
        width: 40%;
        margin: 0 auto;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 20px;
        background-color:  #409EFF;
        color: #ECF0F1;
        border-radius: 14rpx;
        box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
                    inset -8rpx -8rpx 8rpx rgba(255,255,255,.4),
                    -8rpx -8rpx 10rpx rgba(0,0,0,.4);
    }
    @media screen and (orientation: portrait) {
        /* 竖屏 */
        .main {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: crimson;
            display: flex;
            flex-direction: column;
        }
        .left {
            height: 40%;
            width: 100%;
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .right {
            height: 40%;
            width: 100%;
        }
        .logo-box {
            height: 60%;
            background-color: aliceblue;
        }
        image {
            height: 100%;
            width: 80%;
        }
    }
    @media screen and (orientation: landscape) {
        /* 横屏 */
        .main {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: crimson;
            display: flex;
        }
        .left {
            height: 100%;
            width: 50%;
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .right {
            height: 100%;
            width: 50%;
        }
        .logo-box {
            height: 40%;
            background-color: aliceblue;
            height: 60%;
            width: 80%;
        }
        image {
            height: 100%;
        }
    }
    .version {
        position: fixed;
        width: 100%;
        bottom: 0;
        text-align: center;
        font-size: 10px;
        color: #909399;
    }
</style>