Skip to content

U
uni-starter

Wheat_Liu / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter

体验新版 GitCode，发现更多精彩内容 >>

提交 85cf8673 编写于 作者: L linju
浏览文件
操作

213

上级 05a2bca1 4102167b
隐藏空白更改
内联 并排
Showing with 392 addition and 80 deletion
uni_modules/uni-login-page/common/loginPage.css 0 → 100644
浏览文件 @ 85cf8673
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* #endif */
.wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
width: 750rpx;
background-color: #fff;
}
.wrap-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 630rpx;
flex-direction: column;
}
.content-top-title {
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
}
.hidden,
page {
background-color: transparent;
}
.login-iknow {
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
border-radius: 6rpx;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.phone-area {
padding: 0 20rpx;
font-size: 30rpx;
}
.phone-input {
flex: 1;
border-left-width: 1px;
border-left-color: #d7d9d8;
padding: 0 20rpx;
font-size: 30rpx;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
color: #8a8f8b;
font-size: 26rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
width: 630rpx;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.send-btn-text {
color: #fff;
}
.send-btn-active {
background-color: #007aff;
}
.auth-box {
width: 630rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.login-text {
color: #1c436e;
font-size: 26rpx;
}
.hover {
opacity: 0.8;
}
uni_modules/uni-login-page/components/login-action-sheet/login-action-sheet.vue
浏览文件 @ 85cf8673
<template>
<uni-popup ref="actionSheet" type="bottom">
<view class="flex w-750 action-sheet-box bg-white">
<view class="flex flex-row flex-nowrap align-center justify-center auth-item" @click="clickItem(item)"
<view class="action-sheet-box">
<view class="auth-wrap auth-item" @click="clickItem(item)"
hover-class="hover" v-for="(item, index) in providerList" :key="index">
<image :src="item.image" class="login-logo"></image>
<text class="px-1 font-28">{{providerName[item.value]}}</text>
<text class="auth-text">{{providerName[item.value]}}</text>
</view>
<view class="cancel-line"></view>
<view class="flex flex-row flex-nowrap align-center justify-center cancel-item" @click="clickItem(item)">
<text class="font-28">取消</text>
<view class="auth-wrap cancel-item" @click="clickItem(item)">
<text class="auth-text">取消</text>
</view>
</view>
</uni-popup>
......@@ -88,19 +88,32 @@
}
</script>
<style>
@import url("../../common/myStyle.css");
<style scoped>
.action-sheet-box {
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
border-top-right-radius: 20rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 750rpx;
background-color: #fff;
}
.login-logo {
width: 42rpx;
height: 42rpx;
}
.auth-wrap{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.auth-item {
border-bottom-width: 1px;
border-bottom-color: #F1F1F1;
......@@ -115,5 +128,9 @@
width: 750rpx;
height: 10rpx;
background-color: #F1F1F1;
}
.auth-text{
padding: 0 10rpx;
font-size: 28rpx;
}
</style>
uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue
浏览文件 @ 85cf8673
<template>
<view class="flex flex-row flex-wrap">
<text class="text-sub font-26" v-for="(t, i) in innerText" :key="i" :class="t.to?'link-color':''"
<view class="login-iknow-wrap">
<text class="text-sub" v-for="(t, i) in innerText" :key="i" :class="t.to?'link-color':''"
@click="clickLink(t)">{{t.text || t}}</text>
</view>
</template>
......@@ -19,7 +19,7 @@
},
link: {
type: Array,
default: []
default: ()=>[]
}
},
data() {
......@@ -69,9 +69,18 @@
}
</script>
<style>
@import url("../../common/myStyle.css");
<style scoped>
.login-iknow-wrap{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
}
.text-sub{
color: #8a8f8b;
font-size: 26rpx;
}
.link-color {
color: #04498c;
}
......
uni_modules/uni-login-page/components/login-short-code/login-short-code.vue
浏览文件 @ 85cf8673
<template>
<view class="flex justify-center align-center short-code-btn" hover-class="hover" @click="clickBtn">
<text class="font-28">{{innerText}}</text>
<view class="short-code-btn" hover-class="hover" @click="clickBtn">
<text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text>
</view>
</template>
......@@ -70,11 +70,20 @@
}
</script>
<style>
@import url("../../common/myStyle.css");
<style scoped>
.short-code-btn {
width: 200rpx;
height: 85rpx;
height: 85rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.inner-text{
font-size: 28rpx;
}
.inner-text-active{
color: #007aff;
}
</style>
uni_modules/uni-login-page/pages/index/index.vue
浏览文件 @ 85cf8673
......@@ -5,14 +5,14 @@
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">登陆后即可展示自己</text>
<login-ikonw class="lgnin-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="phone-input" placeholder="请输入手机号"
<input type="number" class="phone-input" maxlength="11" placeholder="请输入手机号"
v-model="phoneNumber" />
</view>
......@@ -95,6 +95,7 @@
</script>
<style>
<<<<<<< HEAD
page {
background: transparent;
}
......@@ -131,11 +132,13 @@
width: 630rpx;
flex-direction: column;
}
=======
@import url("../../common/loginPage.css");
>>>>>>> 4102167b2d3d22ebf4994a07a5b8421d8539345c
.content-top-title{
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
text-align: center;
}
<<<<<<< HEAD
@import url("../../common/myStyle.css");
.lgnin-iknow {
......@@ -150,59 +153,9 @@
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
=======
.login-iknow{
>>>>>>> 4102167b2d3d22ebf4994a07a5b8421d8539345c
justify-content: center;
}
.phone-area{
padding: 0 20rpx;
font-size: 30rpx;
}
.phone-input {
border-left-width: 1px;
border-left-color: #d7d9d8;
padding: 0 20rpx;
font-size: 30rpx;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
color: #8a8f8b;
font-size: 26rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
width: 630rpx;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.send-btn-text{
color: #fff;
}
.send-btn-active {
background-color: #007aff;
}
.auth-box{
width: 630rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.login-text {
color: #1c436e;
font-size: 26rpx;
}
</style>
\ No newline at end of file
uni_modules/uni-login-page/pages/index/pwd-login.nvue → uni_modules/uni-login-page/pages/index/pwd-login.vue
浏览文件 @ 85cf8673
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">手机号密码登录</text>
<text class="content-top-title">手机号密码登录</text>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-5">
<view class="phone-input-box">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="px-2 font-30">{{currenPhoneArea}}</text>
<text class="phone-area">{{currenPhoneArea}}</text>
</picker>
<input type="number" class="flex-1 phone-input px-2 font-30" placeholder="请输入手机号"
v-model="phoneNumber" />
<input type="number" class="phone-input" placeholder="请输入手机号" maxlength="11" v-model="phoneNumber" />
</view>
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
<view class="phone-input-box">
<input type="password" :password="true" class="phone-input pwd-input" placeholder="请输入密码"
v-model="password" />
</view>
<login-ikonw class="lgnin-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round" hover-class="hover"
<view class="send-btn-box" hover-class="hover"
@click="pwdLogin" :class="canLogin?'send-btn-active':''">
<text class="text-white">登录</text>
<text class="send-btn-text">登录</text>
</view>
<!-- 忘记密码 -->
<view class="flex flex-row flex-nowrap">
<text class="font-26 text-sub">忘记了?</text>
<text class="font-26 login-text" @click="toRetrievePwd">找回密码</text>
<view class="auth-box">
<text class="login-text login-text-sub">忘记了?</text>
<text class="login-text" @click="toRetrievePwd">找回密码</text>
</view>
</view>
</view>
......@@ -95,39 +94,14 @@
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
}
.phone-input {
border-left-width: 1px;
border-left-color: #d7d9d8;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
.auth-box{
justify-content: flex-start;
}
.login-text-sub{
color: #8a8f8b;
}
</style>
uni_modules/uni-login-page/pages/index/pwd-retrieve.nvue → uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
浏览文件 @ 85cf8673
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">手机号密码登录</text>
<login-ikonw class="lgnin-iknow" :text="tipText"></login-ikonw>
<text class="content-top-title">手机号密码登录</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
<input type="number" :maxlength="6" class="flex-1 phone-input px-2 font-30" placeholder="请输入验证码"
<view class="phone-input-box">
<input type="number" :maxlength="6" class="phone-input" placeholder="请输入验证码"
v-model="phoneCode" />
<login-short-code @getCode="getCode"></login-short-code>
</view>
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
<view class="phone-input-box">
<input type="password" :password="true" class="phone-input" placeholder="请输入密码"
v-model="password" />
</view>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round mt-5" hover-class="hover"
@click="pwdLogin" :class="canSubmit?'send-btn-active':''">
<text class="text-white">完成</text>
<view class="send-btn-box" hover-class="hover"
@click="submit" :class="canSubmit?'send-btn-active':''">
<text class="send-btn-text">完成</text>
</view>
</view>
</view>
......@@ -69,42 +69,26 @@
});
// 发送成功后开启倒计时
done();
},
/**
* 完成并提交
*/
submit(){
}
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
}
.phone-input {}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
<style>
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
.phone-input{
border-left-width: 0;
}
.send-btn-box{
margin-top: 50rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或