#

whycq

2023-02-10 c650073f71d4430bea7a9aedc559a45f096e2c11

#

 pages/login/login.vue

@@ -1,7 +1,7 @@
<template>
    <view class="settings">
        <uni-icons type="gear" size="30" color="#c5c5c5" @click="settings"></uni-icons>
    </view>
    <label class="settings">
        <uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
    </label>
    <view class="head">
        <view class="logo">
            <image src="../../static/img/logo.png" mode="aspectFit"></image>
@@ -22,6 +22,13 @@
            </view>

        </view>
        <view class="check">
            <view>
                <text>记住密码</text>
            </view>
			
            <view></view>
        </view>
    </view>
    <view class="submit">
        <view class="" style="width: 400rpx;">
@@ -33,12 +40,28 @@
    <!-- 弹窗区域 -->
    
    <view>
        <!-- 输入框示例 -->
        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"
                placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
                <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"
                    placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
            <view class="popup">
                <view class="title title-font">
                    配置
                </view>
                <view class="input">
                    <view class="input-left">ip:</view>
                    <view class="input-right"><input type="text"></view>
                </view>
                <view class="input">
                    <view class="input-left">端口:</view>
                    <view class="input-right"><input type="text"></view>
                </view>
                <view class="input">
                    <view class="input-left">项目:</view>
                    <view class="input-right"><input type="text"></view>
                </view>
                <view class="btn">
                    <view class="btn-left" @click="close">取消</view>
                    <view class="btn-right">确认</view>
                </view>
            </view>
        </uni-popup>
    </view>

@@ -73,19 +96,43 @@
            },
            dialogInputConfirm() {
                this.$refs.inputDialog.close()
            },
            close() {
                this.$refs.inputDialog.close()
            }
        }
    }
</script>

<style lang="less">
    .settings {
        width: 60rpx;
        height: 60rpx;
        position: fixed;
        right: 20rpx;
        top: 10rpx;
    .title-font {
        color: #606266;
        font-size: 18px;
        letter-spacing: 3px;
        font-weight: 500;
    }
    .settings {
        width: 100rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        position: fixed;
        // background-color: #007aff;
        right: 0;
        top: 70rpx;
    }
	
    <!-- #ifdef APP-PLUS -->
    .settings {
        width: 100rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        position: fixed;
        right: 0rpx;
        top: 0rpx;
    }
    <!-- #endif -->
    .head {
        height: 400rpx;
        width: 100%;
@@ -103,7 +150,7 @@
    }

    .content {
        height: 240rpx;
        min-height: 240rpx;
        width: 100%;
        // background-color: bisque;
        display: grid;
@@ -118,6 +165,12 @@
            align-items: center;
            justify-content: space-between;
        }
        .check {
            width: 78%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            text-align: left;
        }
    }

    .submit {
@@ -128,6 +181,56 @@
        grid-template-columns: 1fr;
        justify-items: center;
    }
    // 弹出层
    .popup {
        width: 650rpx;
        min-height: 400rpx;
        background-color: #FFF;
        border-radius: 25rpx;
        .title {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
        }
        .input {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            display: grid;
            grid-template-columns: 1fr 3fr;
            align-items: center;
            &-left {
                text-align: right;
            }
            &-right {
                display: grid;
                align-items: center;
                height: 50rpx;
                padding: 5rpx;
                margin-left: 20rpx;
                width: 400rpx;
                border-bottom: 1px solid #e7e6e4;
				
            }
        }
        .btn {
            margin-top: 20rpx;
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 1px solid #e7e6e4;
            &-left {
                border-right: 1px solid #e7e6e4;
            }
            &-right {
                color: #007aff;
            }
        }
    }
    .version {
        position: fixed;
        width: 100%;