xinyilu/xinelu-doctor-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页

Browse Source
This commit is contained in:
shidongli 2023-10-23 09:59:14 +08:00
parent 04dcab5aaf
commit 02cdac88dd
1 changed files with 148 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
pages/index/index.vue
View File

@ -1,8 +1,34 @@
<template> <template>
<view class="content"> <view class="app">
<view class="text-area"> <image src="../../static/logos.png" mode=""></image>
<text class="title">{{title}}</text> <view class="text">
欢迎加入新医路
</view> </view>
<view class="body">
<view class="login">
<view class="logins">
登录
</view>
<view class="border">
</view>
</view>
<view class="name">
<u-form :model="form" ref="uForm" label-width="110">
<u-form-item label="用户名:"><u-input placeholder="请输入用户名" /></u-form-item>
</u-form>
<u-form :model="form" ref="uForm">
<u-form-item label="密码:">
<u-input placeholder="请输入密码" :password-icon="true" type="password"/>
<!-- <span class="pwd">忘记密码</span> -->
</u-form-item>
</u-form>
</view>
<view class="loginsubmit">
登录
</view>
</view>
</view> </view>
</template> </template>
@ -10,9 +36,16 @@
export default { export default {
data() { data() {
return { return {
title: 'Hello' title: 'Hello',
form: {
name: '',
}
} }
}, },
// onReady() {
// this.$refs.uForm.setRules(this.rules);
// },
onLoad() { onLoad() {
}, },
@ -22,30 +55,118 @@
} }
</script> </script>
<style> <style lang="scss">
.content { .app {
display: flex; height: 100vh;
flex-direction: column; background-image: url(../../static/bg.png);
align-items: center; background-size: 100% 100%;
justify-content: center; position: relative;
} overflow: scroll;
.logo { .text {
height: 200rpx; width: 235rpx;
width: 200rpx; height: 30rpx;
margin-top: 200rpx; font-size: 32rpx;
margin-left: auto; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
margin-right: auto; font-weight: 500;
margin-bottom: 50rpx; color: #333333;
} position: absolute;
top: 22%;
left: 50%;
transform: translateX(-50%);
}
.text-area { image {
display: flex; position: absolute;
justify-content: center; width: 114rpx;
} height: 114rpx;
left: 50%;
top: 12%;
transform: translateX(-50%);
}
.body {
width: 100%;
height: 70%;
position: relative;
top: 32%;
overflow: scroll;
background: #F9F9F9;
border-radius: 30rpx 0rpx 0rpx 30rpx;
opacity: 1;
.login {
top: 31px;
width: 30%;
height: 49px;
font-size: 23px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #18CBB3;
/* background: red; */
position: relative;
.logins {
position: absolute;
left: 50%;
transform: translateX(-50%);
// top: 5%;
}
.border {
width: 30rpx;
height: 8rpx;
background: #18CBB3;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1rpx solid #18CBB3;
top: 65rpx;
}
}
.name {
position: relative;
width: 96%;
/* background: red; */
left: 9%;
top: 9%;
::v-deep .u-form-item--left {
font-size: 30rpx;
}
.pwd{
display: inline-block;
position: absolute;
right: 10%;
font-size: 30rpx;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #18CBB3;
line-height: 38rpx;
}
}
.loginsubmit{
text-align: center;
width: 83%;
height: 88rpx;
line-height: 88rpx;
background: #18CBB3;
/* position: absolute; */
margin: 177rpx auto;
color: #fff;
border-radius: 100rpx
}
}
.title {
font-size: 36rpx;
color: #8f8f94;
} }
</style> </style>