From eabfdea3f6f37bdcc63d79dccd062210d345d5c2 Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期一, 20 三月 2023 08:43:08 +0800 Subject: [PATCH] # --- pages/login/login.vue | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 271 insertions(+), 0 deletions(-) diff --git a/pages/login/login.vue b/pages/login/login.vue new file mode 100644 index 0000000..e51335c --- /dev/null +++ b/pages/login/login.vue @@ -0,0 +1,271 @@ +<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="popup-item"> + <view class="popup-item-left">IP:</view> + <view class="popup-item-right"><input type="text"></view> + </view> + <view class="popup-item"> + <view class="popup-item-left">绔彛:</view> + <view class="popup-item-right"><input type="text"></view> + </view> + <view class="popup-item"> + <view class="popup-item-left">椤圭洰:</view> + <view class="popup-item-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> + @import url('../../static/css/wms.css/wms.css'); + /* 璁剧疆鍖哄煙 */ + .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; + } + + + + + + + + + + + + + + + + + /* ------ */ + + .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