使用的是vant组件，引用和使用组件请去官网学习，链接↓
<div class="center"> <!-- 背景图片 --> <div class="background"> <img src="@/assets/background.jpg" width="100%" height="100%" alt="" /> </div> <!-- 前景 --> <div class="front"> <div class="card"> <!-- 标题 --> <div slot="header" class="title" > <span> XXXXXX系统 </span> </div> <!-- 表单 --> <div> <van-form @submit="onSubmit"> <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" /> <van-row> <van-col span="16"> <van-field style="width:15rem" v-model="authcode" name="验证码" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]" /> </van-col> <!-- 获取验证码 --> <van-col span="7"> <img :src="codeUrl" @click="getAutoCodeImg" style="height:2rem;width:5rem;margin-right:3rem;margin-top:0.4rem" /> </van-col> <van-col span="1"> </van-col> </van-row> <div style="margin: 16px;"> <van-button round block type="info" native-type="submit" >提交</van-button> </div> </van-form> </div> </div> </div>
.background { width: 100%; height: 100%; /**宽高100%是为了图片铺满屏幕 */ z-index: -1; position: absolute; } .front { z-index: 1; position: absolute; } .title { text-align: center; font-size: 1.3rem; color: rgba(50, 50, 50, 0.8); } .card { width: 320px; margin-top: 35%; margin-left: calc(calc(100vw - 400px) / 2); /* 动态剧中 */ background-color: rgba(200, 200, 200, 0.5); /* 半透明 */ border-color: rgba(200, 200, 200, 0.5); /* 半透明 */ border-radius: 10px; } .van-cell { background-color: rgba(200, 200, 200, 0) !important; /* 改变了组件的css为半透明 */ color: white; } .center { /* 元素居中 */ display: flex; justify-content: center; }
