1 撰寫最外層div樣式，讓其html上下左右居中

#login {

position: absolute;

width: 500px;

height: 400px;

top: 50%;

left: 50%;

margin-top: -200px;

margin-left: -250px;

border: 1px solid red;

}

重繪頁面看下效果

在elementui官網找一個表單案例

把代碼copy到Login.vue中

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="form.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

先來看下頁面效果

只保留兩個input框（用戶名和密碼），一個登錄按鈕

代碼如下：

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用戶名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創建</el-button>
      </el-form-item>
    </el-form>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.form.username, this.form.password);
    },
  },
};
</script>

頁面效果如下

很明顯樣式還不太行，加上標題，樣式

通過官方檔案，element-ui可以用 :span來控制input寬度

修改代碼

再看下頁面效果，基本效果達到了