Skip to content

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

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

上级 048f98cc
正在显示 包含 107 行增加 和 137 行删除
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,19 +225,26 @@ ...@@ -268,19 +225,26 @@
</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>
<!-- <text class="text-#999 text-24">{{ '*小程序仅供内部员工使用' }}</text> -->
</view> </view>
</view> </view>
<fui-form class="form" ref="form" top="50" :padding="['0rpx', '32rpx']" background="#e46962">
<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 <fui-input
height="100rpx" height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input" class="input"
autocomplete="off" autocomplete="off"
:required="false" :required="false"
...@@ -291,32 +255,26 @@ ...@@ -291,32 +255,26 @@
v-model="model.form.data.username" v-model="model.form.data.username"
name="mobile" name="mobile"
backgroundColor="transparent" backgroundColor="transparent"
borderColor="#DDDDDD" borderColor="transparent"
maxlength="11" 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>
</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 <fui-input
:padding="['20rpx', '32rpx']" height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
type="number"
placeholder="请输入验证码" placeholder="请输入验证码"
:bottomLeft="0"
marginTop="10"
v-model="model.form.data.code" v-model="model.form.data.code"
backgroundColor="transparent" backgroundColor="transparent"
borderColor="#DDDDDD" borderColor="transparent"
type="number" ><fui-button
>
<template #left>
<view class="fui-left__icon mr-2">
<fui-icon name="keyboard" color="#333" :size="48" />
</view>
</template>
<fui-button
width="200rpx" width="200rpx"
height="64rpx" height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'" :background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
...@@ -327,20 +285,25 @@ ...@@ -327,20 +285,25 @@
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'" :text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/> />
</fui-input> </fui-input>
<view class="btn__box flex-center p-32rpx box-border"> </view>
</view>
<view class="submit_btn_view">
<fui-button <fui-button
height="88rpx" height="72rpx"
background="#67c17a" background="#5DB66F"
size="32rpx" size="28rpx"
radius="8rpx" radius="36rpx"
text="立即登录" text="立即登录"
@click="login" @click="login"
:disabled="model.loading" :disabled="model.loading"
:loading="model.loading" :loading="model.loading"
/> />
</view> </view>
<view class="flex-center p-32rpx box-border btn-register" @click="goRegister"> 还没有账号，立即注册 </view>
</view>
</fui-form> </fui-form>
<!-- </view> --> <!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox"> <fui-checkbox-group class="checkbox" name="checkbox">
<view class="fui-list__item fiexdText"> <view class="fui-list__item fiexdText">
...@@ -378,7 +341,6 @@ ...@@ -378,7 +341,6 @@
<fui-safe-area /> <fui-safe-area />
</view> </view>
</fui-checkbox-group> </fui-checkbox-group>
<fui-modal <fui-modal
:show="readConfirmShow" :show="readConfirmShow"
title="服务协议及隐私保护" title="服务协议及隐私保护"
...@@ -403,14 +365,6 @@ ...@@ -403,14 +365,6 @@
</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,74 +376,90 @@ ...@@ -422,74 +376,90 @@
} }
} }
.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;
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;
} }
.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 { .login_content{
// position: absolute; display:flex;
// left: 40rpx;
// bottom: 40rpx;
font-size: 38rpx;
color: #474747;
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
flex-wrap:wrap;
position: relative;
.login-input-area{
width: 650rpx;
// border:1rpx red solid;
.user_phone{
display:flex;
align-items: center; align-items: center;
.user_phone_img{
.logo-text { width: 40rpx;
margin-top: 20rpx; height: 40rpx;
font-weight: bold; }
display: flex; }
width: fit-content; .user_text_view{
margin-left:12rpx;
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
letter-spacing: 0.15em; .view_text{
border-right: 0.2em solid transparent; font-size: 30rpx;
padding-right: 0.15em; font-weight: 500;
animation: blink-caret 1s infinite; 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 { .form {
position: absolute; position: absolute;
top: 500rpx; top: 480rpx;
width: 100%;
z-index: 10; z-index: 10;
} }
...@@ -515,7 +485,6 @@ ...@@ -515,7 +485,6 @@
} }
.fiexdText { .fiexdText {
// position: absolute;
width: 100%; width: 100%;
margin-top: 40rpx; margin-top: 40rpx;
} }
...@@ -527,4 +496,5 @@ ...@@ -527,4 +496,5 @@
.btn-register { .btn-register {
color: cadetblue; 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论