From faed14d10fc2f6f54ffcfa496e67be58e3d2ee1f Mon Sep 17 00:00:00 2001
From: whycq <you@example.com>
Date: 星期日, 19 三月 2023 16:33:22 +0800
Subject: [PATCH] #
---
pages/login/login.vue | 329 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 329 insertions(+), 0 deletions(-)
diff --git a/pages/login/login.vue b/pages/login/login.vue
new file mode 100644
index 0000000..b5fa6e5
--- /dev/null
+++ b/pages/login/login.vue
@@ -0,0 +1,329 @@
+<template>
+ <view>
+ <!-- 璁剧疆 -->
+ <view class="settings">
+ <view class="settings-btn">
+ <uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
+ </view>
+ </view>
+ <!-- logo -->
+ <view class="logo">
+ <view class="logo-box">
+ <image src="../../static/img/logo.png" mode="aspectFit"></image>
+ </view>
+ </view>
+ <view class="content">
+ <!-- 璐﹀彿 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="person" size="20" color="#707070"></uni-icons>
+ </view>
+ <view class="box-text">璐﹀彿:</view>
+ <view class="box-input">
+ <input type="text" placeholder="璇疯緭鍏ヨ处鍙�" placeholder-style="font-size:14px;color:#ccc;">
+ </view>
+ <view class="box-show"></view>
+ </view>
+ <!-- 瀵嗙爜 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="locked" size="20" color="#707070"></uni-icons>
+ </view>
+ <view class="box-text">瀵嗙爜:</view>
+ <view class="box-input">
+ <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>
+ </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" @click="onLogin()" :loading="load.loading">{{load.btnText}}</button>
+ </view>
+
+ </view>
+
+ <!-- 璁剧疆寮圭獥鍖哄煙 -->
+ <view>
+ <uni-popup ref="inputDialog" type="dialog">
+ <view class="popup">
+ <!-- 鏍囬 -->
+ <view class="title">閰� 缃�</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 -->
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ version: '',
+ value: '',
+ load: {
+ loading: false,
+ btnText: '鐧诲綍'
+ },
+ }
+ },
+ 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()
+ },
+ onLogin() {
+ let that = this
+ that.load.loading = true;
+ that.load.btnText = '鐧诲綍涓�';
+ setTimeout(()=> {
+ uni.showToast({title: '鐧诲綍鎴愬姛'})
+ setTimeout(()=> {
+ uni.reLaunch({
+ url: '../home/home'
+ });
+ },300)
+ },700)
+ }
+ }
+ }
+</script>
+<style>
+ /* 璁剧疆鍖哄煙 */
+ .settings {
+ min-height: 100rpx;
+ }
+ .settings-btn {
+ float: right;
+ margin-right: 10rpx;
+ }
+ .logo {
+ height: 25%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+ .logo-box {
+ margin: auto 0;
+ }
+ image {
+ height: 300rpx;
+ }
+ /* 杈撳叆妗嗗尯鍩� */
+ .content {
+ min-height: 250rpx;
+ /* background-color: coral; */
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #606266;
+ }
+ .box {
+ width: 80%;
+ height: 100rpx;
+ margin-top: 30rpx;
+ background-color: white;
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+
+ }
+ .box-icon {
+ width: 80rpx;
+ text-align: center;
+ }
+ .box-text {
+ width: 100rpx;
+ text-align: center;
+ }
+ .box-show {
+ margin-left: auto;
+ /* margin-right: 10rpx; */
+ width: 60rpx;
+ text-align: center;
+ }
+ input {
+ 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;
+ }
+
+
+
+
+
+
+
+
+
+
+
+ /* ------ */
+
+ .shadow-warp {
+ position: relative;
+ box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
+ }
+
+ .shadow-warp:before,
+ .shadow-warp:after {
+ position: absolute;
+ content: "";
+ top: 20upx;
+ bottom: 30upx;
+ left: 20upx;
+ width: 50%;
+ box-shadow: 0 30upx 20upx rgba(0, 0, 0, 0.2);
+ transform: rotate(-3deg);
+ z-index: -1;
+ }
+
+ .shadow-warp:after {
+ right: 20upx;
+ left: auto;
+ transform: rotate(3deg);
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1