用uniapp写一个美观好看的登录界面
时间: 2023-05-22 17:05:27 浏览: 81
好的,让我来回答这个问题。Uniapp 是一个基于 Vue.js 的开发框架,可以用来开发多端应用。下面是一个使用 Uniapp 开发的简单登录界面的代码示例:
<template>
<view class="login">
<view class="logo">
<image src="../../static/logo.png"></image>
<view class="title">登录</view>
</view>
<view class="input">
<input type="text" placeholder="请输入手机号"></input>
<input type="password" placeholder="请输入密码"></input>
</view>
<view class="buttons">
<button class="login-btn" type="primary">登录</button>
<button class="register-btn" type="default">注册</button>
</view>
</view>
</template>
<style lang="scss">
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.logo image {
width: 50px;
height: 50px;
}
.logo .title {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.input {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.input input {
width: 80%;
height: 50px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
padding-left: 20px;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: space-between;
width: 80%;
}
.login-btn {
width: 45%;
height: 50px;
color: #fff;
background-color: #007aff;
border-radius: 25px;
}
.register-btn {
width: 45%;
height: 50px;
color: #007aff;
border: 1px solid #007aff;
border-radius: 25px;
}
</style>
这是一个非常简单的登录界面,包括一个 logo,一个输入框和两个按钮。你可以根据自己的需要进行修改和扩展。