话不多说 上代码 额不 先上图

使用的是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>

首先设置一个背景图片，并将其设为绝对定位，z-index 为-1。
然后把表单也设置成绝对定位，z-index为1。
这样就有图中的效果了

接下来是css的讲解

.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;
}

顺带把自动登录的方法说一下吧，采用的是cookie的方式。给出两个方法。

	//读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "token") {
            this.token = arr2[1]; //保存到保存数据的地方
            this.query();
          }
        }
      }
    },

    //设置cookie
    setCookie(c_token, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "token" +
        "=" +
        c_token +
        ";path=/;expires=" +
        exdate.toGMTString();
    },

在登录的时候 判断有无cookie，如果密码 账号 都对， 或者token对了 即可直接登录。从而实现手机端的自动登录