Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 1f17ecd4 作者: e
操作

feat: 登录页面已按设计稿还原

上级 048f98cc
正在显示 包含 252 行增加 和 282 行删除
src/pages/login/login.vue
......@@ -205,49 +205,6 @@
})
}
/**
* 跳转到注册页面
*/
function goRegister() {
uni.reLaunch({
url: '/pages/login/register',
})
}
// 添加欢迎登录的文字打字动态效果
let loop = null
let direction = 'right'
const count = ref(defaultText.length)
watch(
() => model.show,
(show) => {
if (show) {
loop && clearInterval(loop)
loop = setInterval(() => {
if (direction === 'right') {
count.value++
if (count.value > defaultText.length + 20) {
direction = 'left'
count.value = defaultText.length
}
} else {
count.value--
if (count.value < 0) {
direction = 'right'
}
}
if (count.value > defaultText.length) {
model.text = defaultText
} else if (count.value < 0) {
model.text = ''
} else {
model.text = defaultText.slice(0, count.value)
}
}, 200)
}
},
)
onHide(() => {
loop && clearInterval(loop)
loop = null
......@@ -268,149 +225,146 @@
</script>
<template>
<view class="warp">
<!-- <image class="login-warp" src="/static/login/login_bg.png" /> -->
<view class="login-bg-wrap">
<image class="login-bg" src="/static/logo.png" />
<view class="logo-content-wrap">
<!-- <view class="">{{ '欢迎登录' }}</view> -->
<view class="logo-text mb-3">{{ model.text }}</view>
<!-- <text class="text-#999 text-24">{{ '*小程序仅供内部员工使用' }}</text> -->
</view>
</view>
<fui-form class="form" ref="form" top="50" :padding="['0rpx', '32rpx']" background="#e46962">
<fui-input
height="100rpx"
class="input"
autocomplete="off"
:required="false"
clearable
trim
type="number"
placeholder="请输入手机号"
v-model="model.form.data.username"
name="mobile"
backgroundColor="transparent"
borderColor="#DDDDDD"
maxlength="11"
>
<template #left>
<view class="fui-left__icon mr-2">
<fui-icon name="my" color="#333" :size="48" />
</view>
</template>
</fui-input>
<fui-input
:padding="['20rpx', '32rpx']"
placeholder="请输入验证码"
:bottomLeft="0"
marginTop="10"
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="#DDDDDD"
type="number"
>
<template #left>
<view class="fui-left__icon mr-2">
<fui-icon name="keyboard" color="#333" :size="48" />
</view>
</template>
<fui-button
width="200rpx"
height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
:color="model.countdown > 0 ? '#67c17a' : '#fff'"
@click="smsCode"
:size="28"
:disabled="model.countdown > 0"
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/>
</fui-input>
<view class="btn__box flex-center p-32rpx box-border">
<fui-button
height="88rpx"
background="#67c17a"
size="32rpx"
radius="8rpx"
text="立即登录"
@click="login"
:disabled="model.loading"
:loading="model.loading"
/>
</view>
<view class="flex-center p-32rpx box-border btn-register" @click="goRegister"> 还没有账号，立即注册 </view>
</fui-form>
<!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox">
<view class="fui-list__item fiexdText">
<view class="fui-align__center" style="justify-content: center">
<view
class="fui-text privacy-wrap"
style="font-size: 28rpx; text-align: center; align-items: center"
>
<fui-label style="display: inline-flex; align-items: center">
<fui-checkbox
value="true"
color="#4da25b"
:checked="model.form.data.read"
@change="(e) => (model.form.data.read = e.checked)"
style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx"
/>
已阅读并同意
</fui-label>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/>和
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</view>
</view>
<!-- 安全区 -->
<fui-safe-area />
</view>
</fui-checkbox-group>
<fui-modal
:show="readConfirmShow"
title="服务协议及隐私保护"
:buttons="[
{ text: '不同意', plain: true },
{ text: '同意', plain: false, color: '#fff' },
]"
@click="onReadConfirm"
>
<text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#1890FF"
/>和
<fui-text @tap="Link.to(Link.privacy, '隐私政策')" size="28rpx" text="《隐私政策》" color="#1890FF" />
</text>
</fui-modal>
<view class="login_warp">
<image class="login_top_bg" src="/static/images/login/login_top_bg.png" />
<view class="login_top_warp">
<view class="login_hello">
<text class="text_hello">您好，欢迎使用</text>
<view class="login_server_name"><text class="text_server_name">湘农数智服务平台</text></view>
</view>
</view>
<fui-form class="form" ref="form" top="0" :padding="['0rpx', '0rpx']" background="#e46962">
<view class="login_content">
<view class="login-input-area">
<view class="user_phone">
<image class="user_phone_img" src="/static/images/register/user.png" />
<view class="user_text_view"><text class="view_text">手机号</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
autocomplete="off"
:required="false"
clearable
trim
type="number"
placeholder="请输入手机号"
v-model="model.form.data.username"
name="mobile"
backgroundColor="transparent"
borderColor="transparent"
maxlength="11"
>
</fui-input>
</view>
<view class="user_phone mt50">
<image class="user_phone_img" src="/static/images/register/sms.png" />
<view class="user_text_view"><text class="view_text">验证码</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
type="number"
placeholder="请输入验证码"
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="transparent"
><fui-button
width="200rpx"
height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
:color="model.countdown > 0 ? '#67c17a' : '#fff'"
@click="smsCode"
:size="28"
:disabled="model.countdown > 0"
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/>
</fui-input>
</view>
</view>
<view class="submit_btn_view">
<fui-button
height="72rpx"
background="#5DB66F"
size="28rpx"
radius="36rpx"
text="立即登录"
@click="login"
:disabled="model.loading"
:loading="model.loading"
/>
</view>
</view>
</fui-form>
<!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox">
<view class="fui-list__item fiexdText">
<view class="fui-align__center" style="justify-content: center">
<view
class="fui-text privacy-wrap"
style="font-size: 28rpx; text-align: center; align-items: center"
>
<fui-label style="display: inline-flex; align-items: center">
<fui-checkbox
value="true"
color="#4da25b"
:checked="model.form.data.read"
@change="(e) => (model.form.data.read = e.checked)"
style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx"
/>
已阅读并同意
</fui-label>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/>和
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</view>
</view>
<!-- 安全区 -->
<fui-safe-area />
</view>
</fui-checkbox-group>
<fui-modal
:show="readConfirmShow"
title="服务协议及隐私保护"
:buttons="[
{ text: '不同意', plain: true },
{ text: '同意', plain: false, color: '#fff' },
]"
@click="onReadConfirm"
>
<text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#1890FF"
/>和
<fui-text @tap="Link.to(Link.privacy, '隐私政策')" size="28rpx" text="《隐私政策》" color="#1890FF" />
</text>
</fui-modal>
</view>
</template>
<style lang="less" scoped>
// .login-warp {
// width: 100%;
// height: calc(100vh);
// position: absolute;
// // border: 1px solid #000;
// z-index: 0;
// }
@keyframes blink-caret {
0%,
100% {
......@@ -422,109 +376,125 @@
}
}
.warp {
.login_warp {
position: relative;
font-size: 24rpx;
height: calc(100vh);
block-size: 100% 100%;
// background-size: 100% 100%;
// border: 1px solid #000;
background-color: #fff;
}
.fui-descr {
letter-spacing: 1rpx;
padding: 50rpx;
font-size: 24rpx;
color: #b2b2b2;
padding-top: 12rpx;
padding-bottom: 48rpx;
::v-deep(.fui-text__content) {
text-indent: 0 !important;
}
}
.login-bg-wrap {
position: absolute;
top: 260rpx;
width: 100%;
// border: 1px solid #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.login-bg {
width: 124rpx;
height: 124rpx;
}
.logo-content-wrap {
// position: absolute;
// left: 40rpx;
// bottom: 40rpx;
font-size: 38rpx;
color: #474747;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.logo-text {
margin-top: 20rpx;
font-weight: bold;
display: flex;
width: fit-content;
height: 40rpx;
line-height: 40rpx;
letter-spacing: 0.15em;
border-right: 0.2em solid transparent;
padding-right: 0.15em;
animation: blink-caret 1s infinite;
}
}
}
.form {
position: absolute;
top: 500rpx;
width: 100%;
z-index: 10;
}
.checkbox {
position: fixed;
left: 0rpx;
bottom: 32rpx;
width: 100%;
z-index: 10;
}
.privacy-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.input,
.btn__box {
width: 100%;
height: 100rpx;
margin-top: 60rpx;
}
.fiexdText {
// position: absolute;
width: 100%;
margin-top: 40rpx;
}
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
background-color: #fafefc;
.login_top_bg{
width:750rpx;
height:1324rpx;
position:absolute;
left:0rpx;
top:0rpx;
}
.login_top_warp{
width:750rpx;
height:482rpx;
position: relative;
.login_hello{
position: absolute;
left: 50rpx;
top: 226rpx;
color: rgba(51, 51, 51, 1);
.text_hello{
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
}
.login_server_name{
margin-top:32rpx;
.text_server_name{
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 40rpx;
}
}
}
}
.login_content{
display:flex;
justify-content: center;
flex-wrap:wrap;
position: relative;
.login-input-area{
width: 650rpx;
// border:1rpx red solid;
.user_phone{
display:flex;
align-items: center;
.user_phone_img{
width: 40rpx;
height: 40rpx;
}
}
.user_text_view{
margin-left:12rpx;
height: 40rpx;
line-height: 40rpx;
.view_text{
font-size: 30rpx;
font-weight: 500;
letter-spacing: 0rpx;
color: rgba(51, 51, 51, 1);
}
}
.input-bottom-border{
border-bottom: 2rpx #eeeeee solid;
}
.mt50{
margin-top:50rpx;
}
}
}
.submit_btn_view{
margin-top:120rpx;
width:650rpx;
}
.form {
position: absolute;
top: 480rpx;
z-index: 10;
}
.checkbox {
position: fixed;
left: 0rpx;
bottom: 32rpx;
width: 100%;
z-index: 10;
}
.privacy-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.input,
.btn__box {
width: 100%;
height: 100rpx;
margin-top: 60rpx;
}
.fiexdText {
width: 100%;
margin-top: 40rpx;
}
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
}
}
</style>
src/static/images/home/icon.png
src/static/images/home/icon.png

2.7 KB | W: | H:

src/static/images/home/icon.png

102.2 KB | W: | H:

src/static/images/home/icon.png
src/static/images/home/icon.png
src/static/images/home/icon.png
src/static/images/home/icon.png
  • 2-up
  • Swipe
  • Onion skin
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论