From 6162a9fd65b22ef6414f05db1503e91f9e53c5de Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 10 二月 2023 12:58:38 +0800
Subject: [PATCH] #
---
pages/login/login.vue | 299 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 258 insertions(+), 41 deletions(-)
diff --git a/pages/login/login.vue b/pages/login/login.vue
index b4686a7..ea7e997 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,71 +1,288 @@
<template>
+ <!-- 璁剧疆 -->
+ <label class="settings">
+ <uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
+ </label>
+ <!-- logo -->
<view class="head">
<view class="logo">
-
+ <image src="../../static/img/logo.png" mode="aspectFit"></image>
</view>
</view>
<view class="content">
- <view class="input">
- <view class="">
-
+ <!-- 璐﹀彿 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="person" size="20" color="#707070"></uni-icons>
</view>
- <view class="">
+ <view class="box-text">璐﹀彿:</view>
+ <view class="box-input">
<input type="text">
</view>
-
+ <view class="box-show"></view>
</view>
-
- <view class="input">
- <view class="">
-
+ <!-- 瀵嗙爜 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="locked" size="20" color="#707070"></uni-icons>
</view>
- <view class="">
+ <view class="box-text">瀵嗙爜:</view>
+ <view class="box-input">
<input type="text">
</view>
-
+ <view class="box-show">
+ <uni-icons type="eye-filled" size="20" color="#707070"></uni-icons>
+ </view>
</view>
-
+ <!-- 璁颁綇瀵嗙爜 -->
+ <view class="check">
+ <view class="check-left">
+ <view>璁颁綇瀵嗙爜</view>
+ </view>
+ <view class="check-right">
+ <switch checked color="#FFCC33" style="zoom:.5"/>
+ </view>
+ </view>
</view>
+ <!-- 鐧诲綍鎸夐挳 -->
+ <view class="submit">
+ <view class="" style="width: 400rpx;">
+ <button type="primary" size="default">鐧诲綍</button>
+ </view>
+
+ </view>
+
+ <!-- 璁剧疆寮圭獥鍖哄煙 -->
+ <view>
+ <uni-popup ref="inputDialog" type="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>
+
+
+ <!-- 鐗堟湰鍙� -->
+ <!-- #ifdef APP-PLUS -->
+ <view class="version">
+ 褰撳墠鐗堟湰:{{version}}
+ </view>
+ <!-- #endif -->
</template>
-<script lang="ts">
-// 杩欓噷缂栧啓ts浠ｇ爜
- let s:string = "123"
- console.log(s)
+<script>
+ export default {
+ data() {
+ return {
+ version: '',
+ value: ''
+ }
+ },
+ onLoad() {
+ // 鎵嬫満绔増鏈彿
+ // #ifdef APP-PLUS
+ var that = this
+ plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
+ that.version = wgtinfo.version
+ });
+ // #endif
+ },
+ methods: {
+ // 璁剧疆绐楀彛寮�鍚寜閽�
+ settings() {
+ this.$refs.inputDialog.open()
+ },
+ // 璁剧疆绐楀彛纭淇敼鎸夐挳
+ dialogInputConfirm() {
+ this.$refs.inputDialog.close()
+ },
+ // 璁剧疆绐楀彛鍏抽棴鎸夐挳
+ close() {
+ this.$refs.inputDialog.close()
+ }
+ }
+ }
</script>
<style lang="less">
- .head {
- height: 200rpx;
- width: 100%;
- background-color: aquamarine;
- display: grid;
- grid-template-columns: 1fr;
- justify-items: center;
- align-items: center;
- .logo {
- width: 10%;
- height: 90%;
- background-color: red;
- }
+ .title-font {
+ color: #606266;
+ font-size: 18px;
+ letter-spacing: 3px;
+ font-weight: 500;
}
- .content {
+ // 璁剧疆鍖哄煙
+ .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%;
- margin-top: 10rpx;
- background-color: bisque;
+ display: grid;
+ grid-template-columns: 1fr;
+ // background-color: aqua;
+ justify-items: center;
+ align-items: center;
+
+ .logo {
+ image {
+ height: 300rpx;
+ }
+ }
+ }
+ // 杈撳叆妗嗗尯鍩�
+ .content {
+ min-height: 250rpx;
+ width: 100%;
+ // background-color: bisque;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
- align-items: center;
- .input {
- width: 50%;
- height: 30%;
- background-color: #fff;
+ align-items: flex-start;
+ // 杈撳叆澶у尯
+ .box {
+ width: 80%;
+ height: 80rpx;
+ background-color: #FFFFFF;
display: grid;
- grid-template-columns: 1fr;
- justify-items: center;
+ grid-template-columns: 1fr 1fr 5fr 1fr;
align-items: center;
+ font-size: 12px;
+ // 鍥炬爣
+ &-icon {
+ display: grid;
+ justify-items: center;
+ }
+ // 杈撳叆妗�
+ &-input {
+ background-color: aquamarine;
+ }
+ // 闅愯棌鏄剧ず瀵嗙爜
+ &-show {
+ display: grid;
+ justify-items: center;
+ }
+ }
+ // 璁颁綇瀵嗙爜
+ .check {
+ width: 80%;
+ // background-color: blueviolet;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ text-align: left;
+ &-left {
+ display: grid;
+ align-items: center;
+ font-size: 12px;
+ text-indent: 10rpx;
+ }
+ &-right {
+ display: grid;
+ align-items: center;
+ justify-items: flex-end;
+ }
}
}
-</style>
\ No newline at end of file
+ // 鐧诲綍鎸夐挳
+ .submit {
+ position: fixed;
+ width: 100%;
+ bottom: 200rpx;
+ display: grid;
+ 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%;
+ bottom: 0;
+ text-align: center;
+ }
+</style>
--
Gitblit v1.9.1