From 7001de2b8cd0b94d22815b4df65cbeb47e1ee216 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Wed, 07 Jul 2021 17:17:30 +0800
Subject: [PATCH] 问题修复
---
pages/loging/loging.vue | 393 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 246 insertions(+), 147 deletions(-)
diff --git a/pages/loging/loging.vue b/pages/loging/loging.vue
index e7b7d90..41a0a22 100644
--- a/pages/loging/loging.vue
+++ b/pages/loging/loging.vue
@@ -1,30 +1,50 @@
<template>
- <view id="login" ref="login">
- <!-- <span style="position: absolute;top: 0;">user: {{$store.state.message.useName}}</span> -->
- <view class="main">
- <view class="topImg">
- <image class="Timg" src="../../static/users.png" mode=""></image>
+ <view class="container">
+ <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" back-icon-name="arrow-leftward" title="登录"
+ :background="{ background: '#fff' }" title-color="#000000">
+ <view class="" slot="right">
+ <image src="/static/images/login/c8.png" class="set-icon" mode="widthFix"></image>
</view>
- <view class="titie">
- <span>群防群控APP</span>
+ </u-navbar>
+
+ <view class="content">
+ <view class="top">
+ <view class="titie">
+ <span>群防群控APP</span>
+ </view>
+ <view class="cell">
+ <view class="name">账号</view>
+ <view class="input-box">
+ <input type="text" v-model="names" placeholder="请输入账号" class="ipt" placeholder-class="hold"
+ @blur="handleInputCheck" />
+ </view>
+ </view>
+ <view class="cell">
+ <view class="name">密码</view>
+ <view class="input-box">
+ <input type="password" v-model="passwords" placeholder="请输入密码" class="ipt"
+ placeholder-class="hold" @blur="handleInputCheck" />
+ </view>
+ </view>
+
+ <!-- <view class="agree">
+ 登录即代表同意
+ <text class="a">《用户协议》</text>
+ 和
+ <text class="a">《隐私政策》</text>
+ </view> -->
+ <button class="submit" @click="longing(names,passwords)" :disabled="disabled">登录</button>
+ <view class="tip">未注册用户注册审核通过后才可登录</view>
+ <navigator url="/pages/registerUser/registerUser" hover-class="none" class="change">注册 ></navigator>
</view>
- <view class="name">
- <span>账号：</span>
- <input type="text" v-model="names" placeholder="请输入账号" />
- </view>
- <view class="password">
- <span>密码：</span>
- <input type="password" v-model="passwords" placeholder="请输入密码" />
- </view>
- <view class="loging">
- <button class="confirm bubble" @click="longing(names,passwords)" type="default">登录</button>
- <button class="zhuce" @click="zhuce" type="default">没有账号？点击注册</button>
- </view>
- <view class="msg">
- <span>{{msg}}</span>
- <icon :type="icons" :color="colors" size="20" />
+
+ <!-- 社交账号登录 -->
+ <view class="bottom">
+ <view class="tag"></view>
+ <!-- <view class="tsp">江西北邮信息通信技术有限公司</view> -->
</view>
</view>
+ <!-- -->
</view>
</template>
@@ -37,7 +57,8 @@
names: '',
passwords: '',
msg: '',
- colors: '#123456'
+ colors: '#123456',
+ disabled: true
}
},
computed: {
@@ -74,6 +95,7 @@
if (this.msg == "格式正确") {
this.icons = 'success';
this.colors = '#4ac503';
+ this.disabled = false
} else {
this.icons = 'warn';
this.colors = '#d53c00';
@@ -88,7 +110,16 @@
if (this.msg == "格式正确") {
uni.showNavigationBarLoading();
this.$store.dispatch('loging', data)
+ }else{
+ uni.showToast({
+ title: '格式错误，请重试',
+ icon:'none',
+ duration: 2000
+ });
}
+ },
+ handleInputCheck() {
+ //this.disabled = false
},
zhuce(){
uni.navigateTo({
@@ -128,140 +159,208 @@
</script>
<style lang="scss">
- page {
- background-image: linear-gradient(to right, #07d4f3, #6099f3) //页面背景颜色
+ .titie{
+ display: block;
+ width: 281rpx;
+ height: auto;
+ margin: 0 auto 120rpx;
+ span {
+ font-weight: 600;
+ font-size: 6vw;
+ color: #14b9c8;
+ }
}
-
- #login {
- width: 100%;
- height: 157vw;
+ .container {
+ min-height: 100vh;
+ overflow: hidden;
+
+ .set-icon {
+ vertical-align: middle;
+ width: 41rpx;
+ height: auto;
+ margin-right: 35rpx;
+ }
+ }
+
+ .content {
display: flex;
+ flex-direction: column;
+ justify-content: space-around;
align-items: center;
- justify-content: center;
-
- .main {
- border-radius: 5vw;
- border: 1px solid #fff;
- width: 80vw;
- height: 100vw;
- background-image: linear-gradient(to right, #f3f3f3, #f3f3f3);
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
-
- .loging {
- width: 65vw;
- height: 13vw;
- margin: 1vw 0;
+
+ height: 90vh;
+ width: 100%;
+
+ .top {
+ width: 100%;
+ }
+
+ .logo {
+ display: block;
+ width: 281rpx;
+ height: auto;
+ margin: 0 auto 120rpx;
+ }
+
+ .cell {
+ width: 100%;
+ padding: 0 85rpx;
+ box-sizing: border-box;
+ margin-top: 36rpx;
+
+ .name {
+ font-size: 22rpx;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #3e4a59;
+ line-height: 30rpx;
+ opacity: 0.72;
}
-
- .topImg,
- .titie,
- .name,
- .password,
-
- .msg {
- width: 65vw;
- height: 13vw;
- // border: 1px solid #00ff7f;
+
+ .input-box {
+ padding: 30rpx 0;
+ border-bottom: 2rpx solid #f6f6f6;
display: flex;
align-items: center;
- justify-content: center;
- margin: 1vw 0;
- }
-
- .topImg {
- .Timg {
- width: 13vw;
- height: 13vw;
+
+ .code {
+ font-size: 22rpx;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #0d0d0d;
+ line-height: 30rpx;
+
+ text {
+ color: #14b9c8;
+ }
}
- }
-
- .titie {
- span {
- font-weight: 600;
- font-size: 6vw;
+
+ .ipt {
+ flex: 1;
+ // height: 24rpx;
+ font-size: 24rpx;
}
- }
-
- .name,
- .password {
- border-bottom: 1px solid rgba($color: #b9b9b9, $alpha: .7);
- margin-bottom: 0;
- margin-bottom: 0;
-
- span {
- display: inline-block;
- width: 15vw;
- }
-
- input {
- width: 40vw;
- }
- }
-
- .msg {
- font-size: 3vw;
- width: 65vw;
- height: 6vw;
- display: flex;
- align-items: center;
- justify-content: center;
- // border: 1px solid #00ff7f;
-
- span,
- icon {
- margin: 0 1vw;
+
+ .hold {
+ font-size: 26rpx;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #3e4a59;
+ line-height: 30px;
+ opacity: 0.45;
}
}
}
- }
-
- /* 按钮 */
- .confirm {
- width: 325rpx;
- height: 80rpx;
- background-color: #07c160;
- border-radius: 6rpx;
- font-size: 30rpx;
- color: #fff;
- line-height: 80rpx;
- text-align: center;
-
- }
-
- .bubble {
- position: relative;
- overflow: hidden;
- }
-
- .bubble:after {
- content: "44444";
- background-color: #5c9899;
- position: absolute;
- width: 750rpx;
- height: 750rpx;
- left: calc(50% - 375rpx);
- top: calc(50% - 375rpx);
- opacity: 0;
- margin: auto;
- border-radius: 50%;
- transform: scale(1);
- transition: all 0.5s ease-in-out;
- }
-
- .bubble:active:after {
- transform: scale(0);
- opacity: 1;
- transition: 0s;
- }
-
- .zhuce {
- position: relative;
- font-size: 0.2rem;
- width: 10rem;
- top: 1rem;
- border: 1px solid transparent;
+
+ .agree {
+ margin: 27rpx 95rpx 0;
+ font-size: 22rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #cacaca;
+ line-height: 34rpx;
+
+ .a {
+ color: #000000;
+ }
+ }
+
+ .submit {
+ margin: 60rpx 90rpx 0;
+ border: none;
+ width: 572rpx;
+ height: 86rpx;
+ line-height: 86rpx;
+ box-sizing: border-box;
+ border-radius: 15rpx;
+ background-color: #14b9c8;
+ color: #ffffff;
+
+ &::after {
+ content: none;
+ }
+
+ &::before {
+ content: none;
+ }
+
+ &[disabled='true'] {
+ background: #e4e4e4;
+ font-size: 36rpx;
+ font-family: Source Han Sans CN;
+ font-weight: 500;
+ color: #ffffff;
+ }
+ }
+
+ .tip {
+ margin-top: 30rpx;
+ text-align: center;
+ font-size: 22rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #cacaca;
+ line-height: 34rpx;
+ }
+ .tsp {
+ margin-top: 30rpx;
+ text-align: center;
+ font-size: 28rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #a8a8a8;
+ line-height: 34rpx;
+ }
+
+ .change {
+ margin-top: 20rpx;
+ text-align: center;
+ font-size: 22rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #14b9c8;
+ line-height: 34rpx;
+ }
+
+ .tag {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 22rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #9f9f9f;
+ line-height: 34rpx;
+
+ &::before {
+ content: '';
+ display: block;
+ width: 160rpx;
+ height: 1px;
+ background: #d8d8d8;
+ opacity: 0.86;
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ width: 160rpx;
+ height: 1px;
+ background: #d8d8d8;
+ opacity: 0.86;
+ }
+ }
+
+ .chat-arr {
+ margin-top: 50rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .icon {
+ width: 73rpx;
+ height: 73rpx;
+ }
+ }
}
</style>
--
Gitblit v1.9.3