登录输入框

源代码

    <el-col
      :lg="8"
      :md="12"
      class="flex items-center justify-center flex-col bg-light-50"
    >
      <h2 class="text-3xl font-bold">欢迎回来</h2>
      <div class="my-5 text-gray-300 flex items-center justify-center">
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span class="mx-1">账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <!-- 用户输入账号密码表单 -->
      <div>
        <el-form :model="form" class="w-[250px]">
          <el-form-item>
            <el-input v-model="form.username" placeholder="请输入用户名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" placeholder="请输入密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="w-[250px] rounded-full"
              type="primary"
              @click="onSubmit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-col>
posted @ 2023-04-09 21:22  LeoShi2020  阅读(23)  评论(0编辑  收藏  举报