From 290bf03803f24befe259ae201e04e4b73751c5a3 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 17 八月 2023 23:05:48 +0800
Subject: [PATCH] #
---
components/My-input/My-input.vue | 31 ++++++++++
pages/LoginDemo/LoginDemo.vue | 143 ++++++++++++++++++++++++++++++++++++++---------
2 files changed, 145 insertions(+), 29 deletions(-)
diff --git a/components/My-input/My-input.vue b/components/My-input/My-input.vue
new file mode 100644
index 0000000..727b851
--- /dev/null
+++ b/components/My-input/My-input.vue
@@ -0,0 +1,31 @@
+<template>
+ <view class="my-input">
+ <uni-icons type="person" size="20" color="#707070" style="margin: 0 8px 0 8px;"></uni-icons>
+ <view class="box-text">璐﹀彿:</view>
+ <input type="text" class="input" placeholder="璇疯緭鍏ヨ处鍙�" style="margin-left: 8px;margin-right:8px;flex:1;">
+ <uni-icons type="eye" size="20" color="#707070" style="margin-left: auto;margin-right: 8px;"></uni-icons>
+ </view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+ .my-input {
+ width: 100%;
+ height: 3rem;
+ display: flex;
+ align-items: center;
+ background-color: #ECF0F1;
+ border-radius: 14rpx;
+ box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
+ inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
+ -8rpx -8rpx 10rpx rgba(0,0,0,.4);
+ }
+ .box-text {
+ line-height: 1;
+ }
+ .input {
+ // background-color: #ECF0F1;
+ }
+</style>
\ No newline at end of file
diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue
index 2a4b096..d01c25c 100644
--- a/pages/LoginDemo/LoginDemo.vue
+++ b/pages/LoginDemo/LoginDemo.vue
@@ -1,12 +1,32 @@
<template>
<view class="main">
+ <!-- 璁剧疆鎸夐挳 -->
+ <uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
<view class="left">
<!-- logo -->
<view class="logo-box">
<image src="../../static/img/logo.png" mode="aspectFit"></image>
</view>
</view>
- <view class="right">right</view>
+ <view class="right">
+ <view class="input-box">
+ <My-input style="width: 80%;margin: 32rpx 10% 32rpx 10%;" />
+ <My-input style="width: 80%;margin: 32rpx 10% 8rpx 10%;" />
+ <view class="rember-password">
+ <view class="text">璁颁綇瀵嗙爜</view>
+ <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
+ </view>
+ </view>
+ <view class="button">
+ 鐧诲綍
+ </view>
+ </view>
+ <!-- 鐗堟湰鍙� -->
+ <!-- #ifdef APP-PLUS -->
+ <view class="version">
+ 褰撳墠鐗堟湰:{{version}}
+ </view>
+ <!-- #endif -->
</view>
</template>
@@ -14,15 +34,23 @@
export default {
data() {
return {
+ version: '',
}
},
mounted() {
uni.getSystemInfo({
success(res) {
- console.log(res);
+ // console.log(res);
}
})
+ // 鎵嬫満绔増鏈彿
+ // #ifdef APP-PLUS
+ var that = this
+ plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
+ that.version = wgtinfo.version
+ });
+ // #endif
},
methods: {
@@ -30,56 +58,113 @@
}
</script>
-<style>
+<style lang="scss">
+ .setting {
+ position: absolute;
+ top: 16rpx;
+ right: 16rpx;
+ border-radius: 40rpx;
+ box-shadow: inset 4rpx 4rpx 4rpx rgba(0,0,0,.3),
+ inset -4rpx -4rpx 4rpx rgba(255,255,255,.7),
+ -4rpx -4rpx 4rpx rgba(0,0,0,.4);
+ }
+ .main {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ background-color: #ECF0F1;
+ position: absolute;
+ }
+ .left {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .logo-box {
+ background-color: #ECF0F1;
+ border-radius: 40rpx;
+ box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
+ inset -8px -8px 8px rgba(255,255,255,.7),
+ -8px -8px 10px rgba(0,0,0,.4);
+ }
+ image {
+ height: 100%;
+ width: 100%;
+ }
+ .right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ }
+ .input-box {
+ width: 100%;
+ // background-color: #888;
+ }
+ .rember-password {
+ width: 78%;
+ margin: 0 11% 0 11%;
+ display: flex;
+ justify-content: space-between;
+ .text {
+ line-height: 1;
+ }
+ }
+ .button {
+ width: 40%;
+ margin: 0 auto;
+ height: 100rpx;
+ text-align: center;
+ line-height: 100rpx;
+ font-size: 20px;
+ background-color: #409EFF;
+ color: #ECF0F1;
+ border-radius: 14rpx;
+ box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
+ inset -8rpx -8rpx 8rpx rgba(255,255,255,.4),
+ -8rpx -8rpx 10rpx rgba(0,0,0,.4);
+ }
@media screen and (orientation: portrait) {
/* 绔栧睆 */
.main {
- position: absolute;
- height: 100%;
- width: 100%;
- background-color: crimson;
- display: flex;
flex-direction: column;
}
.left {
height: 40%;
width: 100%;
- background-color: aqua;
- display: flex;
- align-items: center;
- justify-content: center;
+ }
+ .right {
+ height: 40%;
+ width: 100%;
}
.logo-box {
height: 60%;
- background-color: aliceblue;
- }
- image {
- height: 100%;
+ width: 80%;
}
}
@media screen and (orientation: landscape) {
/* 妯睆 */
.main {
- position: absolute;
- height: 100%;
- width: 100%;
- background-color: crimson;
display: flex;
}
.left {
height: 100%;
width: 50%;
- background-color: aqua;
- display: flex;
- align-items: center;
- justify-content: center;
+ }
+ .right {
+ height: 100%;
+ width: 50%;
}
.logo-box {
- height: 40%;
- background-color: aliceblue;
+ height: 60%;
+ width: 80%;
}
- image {
- height: 100%;
- }
+ }
+ .version {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ text-align: center;
+ font-size: 10px;
+ color: #909399;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1