From aeadf5dce5646f19ada355b3a35eab4f5b0956a1 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 27 五月 2024 18:34:57 +0800
Subject: [PATCH] ''
---
h5/pages/login/login.vue | 237 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 127 insertions(+), 110 deletions(-)
diff --git a/h5/pages/login/login.vue b/h5/pages/login/login.vue
index 5d34620..a948b9d 100644
--- a/h5/pages/login/login.vue
+++ b/h5/pages/login/login.vue
@@ -1,28 +1,33 @@
<template>
<view class="login">
- <image class="login_bg" src="@/static/login_bg@2x.png" />
+ <image class="login_bg" src="@/static/login_bg@2x.png" />
<image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
<view class="login_title">瀹夋嘲鐗╂祦鏅烘収鍥尯</view>
<view class="login_list">
<view class="login_list_item">
<image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
- <input v-model="form.idCard" maxlength="18" type="number" placeholder="璐﹀彿">
+ <input
+ v-model="form.idCard"
+ maxlength="18"
+ type="number"
+ placeholder="璐﹀彿"
+ />
</view>
<view class="login_list_item">
<image src="@/static/login_ic_password@2x.png" mode="widthFix" />
- <input v-model="form.password" type="password" placeholder="瀵嗙爜">
+ <input v-model="form.password" type="password" placeholder="瀵嗙爜" />
</view>
</view>
<view class="login_btn">
- <view class="login_btn_n">绔嬪嵆鐧诲綍</view>
- <view class="for_psd">蹇樿瀵嗙爜</view>
+ <view class="login_btn_n" @click="onLogin">绔嬪嵆鐧诲綍</view>
+ <view class="for_psd">蹇樿瀵嗙爜</view>
</view>
- <view class="deal_wrap">
- <checkbox @change="dealChange" />
- <text>鐧诲綍鍗冲悓鎰�</text>
- <text class="deal">銆婂畨娉扮墿娴佺敤鎴峰崗璁��</text>
- </view>
+ <view class="deal_wrap">
+ <checkbox @change="dealChange" />
+ <text>鐧诲綍鍗冲悓鎰�</text>
+ <text class="deal">銆婂畨娉扮墿娴佺敤鎴峰崗璁��</text>
+ </view>
</view>
</template>
@@ -30,7 +35,7 @@
export default {
name: 'login',
- data () {
+ data() {
return {
form: {
idCard: '',
@@ -39,112 +44,124 @@
}
},
- created () {
- console.log('---');
+ created() {
},
methods: {
- dealChange(e) {
- console.log(e);
- }
+ dealChange(e) {
+ console.log(e)
+ },
+ onLogin() {
+ const appID = 'wx4d7c10bdec51942b'
+ const AppSecret = '922c93596d134fedf5bd22a9354b3bfe'
+ // const scope = 'snsapi_userinfo'
+ let uri = encodeURIComponent('http://xiaopiqiu2.natapp1.cc')
+ let authURL =
+ `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
+ window.location.href = authURL
+
+ }
}
}
</script>
<style lang="scss" scoped>
- .login {
- width: 100%;
- height: 100vh;
- display: flex;
- padding-top: 160rpx;
- box-sizing: border-box;
- align-items: center;
- flex-direction: column;
- background: linear-gradient( 180deg, rgba(39,155,170,0.2) 0%, rgba(39,155,170,0) 100%);
- .login_logo {
- width: 180rpx;
- height: 180rpx;
- }
- .login_bg{
- position: absolute;
- top: 0;
- width: 750rpx;
- }
- .login_title {
- font-size: 44rpx;
- font-weight: 600;
- color: #333333;
- margin-top: 40rpx;
- margin-bottom: 120rpx;
- }
- .login_list {
- width: 100%;
- padding: 0 60rpx;
- box-sizing: border-box;
- .login_list_item {
- width: 100%;
- border-radius: 50rpx;
- height: 98rpx;
- padding: 0 40rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- margin-bottom: 40rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- &:last-child {
- margin-bottom: 0 !important;
- }
- image {
- flex-shrink: 0;
- width: 40rpx;
- height: 40rpx;
- }
- input {
- flex: 1;
- height: 100%;
- color: #666666;
- margin-left: 24rpx;
- border: none;
- }
- }
- }
- .login_btn {
- width: 100%;
- padding: 0 60rpx;
- box-sizing: border-box;
- margin-top: 80rpx;
- .for_psd{
- color: #279BAA;
- margin-top: 40rpx;
- width: 140rpx;
- text-align: center;
- margin: 40rpx auto;
- }
- .login_btn_n {
- width: 100%;
- height: 98rpx;
- background: #279BAA;
- box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39,155,170,0.2);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- border-radius: 50rpx;
- }
- }
- .deal_wrap{
- position: absolute;
- width: 100%;
- left: 0;
- text-align: center;
- bottom: 108rpx;
- .deal{
- color: #279BAA;
- }
-
- }
+.login {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ padding-top: 160rpx;
+ box-sizing: border-box;
+ align-items: center;
+ flex-direction: column;
+ background: linear-gradient(
+ 180deg,
+ rgba(39, 155, 170, 0.2) 0%,
+ rgba(39, 155, 170, 0) 100%
+ );
+ .login_logo {
+ width: 180rpx;
+ height: 180rpx;
}
+ .login_bg {
+ position: absolute;
+ top: 0;
+ width: 750rpx;
+ }
+ .login_title {
+ font-size: 44rpx;
+ font-weight: 600;
+ color: #333333;
+ margin-top: 40rpx;
+ margin-bottom: 120rpx;
+ }
+ .login_list {
+ width: 100%;
+ padding: 0 60rpx;
+ box-sizing: border-box;
+ .login_list_item {
+ width: 100%;
+ border-radius: 50rpx;
+ height: 98rpx;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+ background: #ffffff;
+ margin-bottom: 40rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &:last-child {
+ margin-bottom: 0 !important;
+ }
+ image {
+ flex-shrink: 0;
+ width: 40rpx;
+ height: 40rpx;
+ }
+ input {
+ flex: 1;
+ height: 100%;
+ color: #666666;
+ margin-left: 24rpx;
+ border: none;
+ }
+ }
+ }
+ .login_btn {
+ width: 100%;
+ padding: 0 60rpx;
+ box-sizing: border-box;
+ margin-top: 80rpx;
+ .for_psd {
+ color: #279baa;
+ margin-top: 40rpx;
+ width: 140rpx;
+ text-align: center;
+ margin: 40rpx auto;
+ }
+ .login_btn_n {
+ width: 100%;
+ height: 98rpx;
+ background: #279baa;
+ box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #ffffff;
+ border-radius: 50rpx;
+ }
+ }
+ .deal_wrap {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ text-align: center;
+ bottom: 108rpx;
+ .deal {
+ color: #279baa;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3