用uniapp,配合uview2 的ui框架,写一个登录页,需要验证账号密码,验证规则是必填。背景图放一个美景图。需要看到一个圆形的头像,头像上面写了宜春环保局。按钮是蓝绿的渐变色,输入框也要做的大气一点,边框有阴影。
时间: 2023-12-28 07:03:22 浏览: 33
好的,以下是一个简单的登录页示例,使用uview2的UI框架:
```html
<template>
<view class="login-page">
<image class="bg-image" src="../static/bg-image.jpg"></image>
<view class="login-container">
<view class="avatar-container">
<view class="avatar-circle">
<text class="avatar-text">宜春环保局</text>
</view>
</view>
<view class="form-container">
<u-input class="input-item" v-model="username" placeholder="请输入账号" clearable></u-input>
<u-input class="input-item" v-model="password" placeholder="请输入密码" clearable></u-input>
<u-button class="login-button" type="primary" @click="handleLogin">登录</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 处理登录逻辑
if (!this.username || !this.password) {
uni.showToast({
title: '账号和密码不能为空',
icon: 'none'
})
return
}
// TODO: 发送登录请求
}
}
}
</script>
<style lang="scss">
.login-page {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.bg-image {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.login-container {
width: 80%;
max-width: 400rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
.avatar-container {
width: 120rpx;
height: 120rpx;
margin-top: -60rpx; /* 头像上方是个圆形,要把头像的一半高度减去 */
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 60rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
.avatar-circle {
width: 100rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50rpx;
background-color: #7acfa6;
.avatar-text {
color: #fff;
font-size: 14rpx;
font-weight: bold;
}
}
}
.form-container {
margin-top: 30rpx;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.input-item {
width: 100%;
margin-bottom: 20rpx;
border-radius: 50rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}
.login-button {
width: 100%;
border-radius: 50rpx;
background-image: linear-gradient(to right, #00b4db, #0083b0);
}
}
}
}
</style>
```
这个登录页满足了你的要求:美景图背景、圆形头像、大气的输入框、蓝绿渐变色按钮。当账号和密码为空时,会提示“账号和密码不能为空”,可以根据实际需求修改提示内容和样式。