使用的是vant组件，引用和使用组件请去官网学习，链接↓
vant组件官网 
 

<div class="center"><!-- 背景图片 --><div class="background"><imgsrc="@/assets/background.jpg"width="100%"height="100%"alt=""/></div><!-- 前景 --><div class="front"><div class="card"><!-- 标题 --><divslot="header"class="title"><span>XXXXXX系统</span></div><!-- 表单 --><div><van-form @submit="onSubmit"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="请输入用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="请输入密码":rules="[{ required: true, message: '请填写密码' }]"/><van-row><van-col span="16"><van-fieldstyle="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-buttonroundblocktype="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;
}