Vue移动端登录页面

使用的是vant组件，引用和使用组件请去官网学习，链接↓
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;
}