Skip to content

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

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

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