测试
<template> <view class="content"> <view class="avatorWrapper"> <view class="avator"> <image class="img" src="../../static/icons/ceshi.jpg" mode="widthFix"></image> </view> </view> <view class="form"> <view class="inputWrapper"> <input class="input" type="text" v-model="username" value="" placeholder="请输入用户名" /> </view> <view class="inputWrapper"> <input class="input" type="password" v-model="password" value="" placeholder="请输入密码" /> </view> <view class="loginBtn"> <text class="btnValue" @tap="goto">登录</text> </view> <view class="forgotBtn"> <text>找回密码</text> </view> </view> </view> </template> <script> export default { data() { return { title: '标题', username: '', password: '' }; }, onLoad() { }, mounted() { /* let that = this; */ }, methods: { //登录 goto() { console.log(this.username, this.password) if (this.username && this.password) { uni.navigateTo({ url: "../h3/h3" }) } } } } </script> <style> .content { background: #377EB4; width: 100vw; height: 100vh; } .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: #77B307; border-radius: 50upx; 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>
Slowly I find myself