#

whycq

2023-03-18 c3158c81707c0a0dee518fe3afa7290276e2d7a3

#

 App.vue

@@ -14,4 +14,9 @@

<style>
    /*每个页面公共css */
    body {
        background-color: #f1f1f1;
        color: #606266;
        font-family: Helvetica Neue, Helvetica, sans-serif;
    }
</style>

 pages/login/login.vue

@@ -20,7 +20,7 @@
                </view>
                <view class="box-text">账号:</view>
                <view class="box-input">
                    <input type="text">
                    <input type="text" placeholder="请输入账号" placeholder-style="font-size:14px;color:#ccc;">
                </view>
                <view class="box-show"></view>
            </view>
@@ -31,7 +31,7 @@
                </view>
                <view class="box-text">密码:</view>
                <view class="box-input">
                    <input type="text">
                    <input password placeholder="请输入密码" placeholder-style="font-size:14px;color:#ccc;" >
                </view>
                <view class="box-show">
                    <uni-icons type="eye-filled" size="20" color="#707070"></uni-icons>
@@ -60,9 +60,9 @@
            <uni-popup ref="inputDialog" type="dialog">
                <view class="popup">
                    <!-- 标题 -->
                    <view class="title title-font">配置</view>
                    <view class="title">配 置</view>
                    <view class="input">
                        <view class="input-left">ip:</view>
                        <view class="input-left">IP:</view>
                        <view class="input-right"><input type="text"></view>
                    </view>
                    <view class="input">
@@ -147,38 +147,139 @@
    /* 输入框区域 */
    .content {
        min-height: 250rpx;
        /* background-color: coral; */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        color: #606266;
    }
    .box {
        width: 80%;
        height: 100rpx;
        margin-top: 40rpx;
        margin-top: 30rpx;
        background-color: white;
        display: flex;
        font-size: 14px;
        align-items: center;
        font-size: 12px;
		
    }
    .box-icon {
        width: 60rpx;
        width: 80rpx;
        text-align: center;
    }
    .box-text {
        width: 100rpx;
        text-align: center;
    }
    .box-show {
        /* background-color: aqua; */
        margin-left: auto;
        /* margin-right: 10rpx; */
        width: 60rpx;
        text-align: center;
    }
    input {
        padding-left: 40rpx;
		
        background-color: #000;
        padding-left: 10rpx;
        font-size: 14px;
        color: #303133;
    }
    
    .check {
        width: 78%;
        display: flex;
        font-size: 12px;
        color: #606266;
        margin-top: 10rpx;
    }
    .check-right {
        margin-left: auto;
    }
    .submit {
        display: flex;
        justify-content: center;
        position: fixed;
        width: 100%;
        bottom: 100rpx;
    }
    .version {
        position: fixed;
        width: 100%;
        bottom: 0;
        text-align: center;
        font-size: 12px;
        color: #909399;
    }
	
    .popup {
        width: 80vw;
        min-height: 400rpx;
        background-color: #FFF;
        border-radius: 25rpx;
    }
    .title {
        height: 100rpx;
        line-height: 100rpx;
        width: 100%;
        color: #606266;
        text-align: center;
        font-size: 18px;
    }
    .input {
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        align-items: center;
        font-size: 14px;
    }
    .input-left {
        width: 16vw;
        padding-right: 20rpx;
        text-align: right;
        color: #606266;
    }
    .input-right {
        display: flex;
        align-items: center;
        width: 50vw;
        height: 50rpx;
        padding: 2px 5px;
        border: 1px solid #E4E7ED;
        border-radius: 5rpx;
    }
    .input-right input{
        color: #606266;
    }
    .btn {
        display: flex;
        height: 90rpx;
        margin-top: 20rpx;
        border-top: 1px solid #DCDFE6;
        justify-content: center;
        align-items: center;
    }
    .btn-left {
        display: flex;
        flex: 1;
        height: 100%;
        justify-content: center;
        align-items: center;
        color: #606266;
        border-right: 1px solid #DCDFE6;
    }
    .btn-right {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        color: #409EFF;
    }