对原作者的页面进行了修改
<template>
<view class="content">
<view class="avatorWrapper">
<view class="avator">
<image class="img" src="/static/logo.png" mode="widthFix"></image>
</view>
</view>
<view class="form">
<view class="inputWrapper">
<input class="input" type="text" v-model="data.num" placeholder="请输入学号或工号"/>
</view>
<view class="inputWrapper">
<input class="input" type="password" v-model="data.password" placeholder="请输入密码"/>
</view>
<view class="loginBtn" @click="submit()">
<text class="btnValue">登录</text>
</view>
<view class="forgotBtn">
<navigator url=""><text>找回密码</text></navigator>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:{}
}
},
onLoad() {
},
methods: {
submit(){
console.log(this.data);
}
}
}
</script>
<style>
.content {
background: #48a8ec;
width: 100vw;
height: calc(100vh - var(--window-top));
}
.avatorWrapper{
height: 30vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: flex-end;
}
.avator{
width: 200upx;
height: 200upx;
overflow: hidden;
}
.avator .img{
width: 100%
}
.form{
padding: 0 100upx;
margin-top: 80px;
}
.inputWrapper{
width: 100%;
height: 80upx;
background: white;
border-radius: 20px;
box-sizing: border-box;
padding: 0 20px;
margin-top: 25px;
}
.inputWrapper .input{
width: 100%;
height: 100%;
text-align: center;
font-size: 15px;
}
.loginBtn{
width: 100%;
height: 80upx;
background: #81be07;
border-radius: 50upx;
font-weight: 600;
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.loginBtn .btnValue{
color: white;
}
.forgotBtn{
text-align: center;
color: #EAF6F9;
font-size: 15px;
margin-top: 20px;
}
</style>