Quasar 项目登录界面的实现

今天心血来潮，用 Quasar 写了一个注册登陆界面，
手机端：

pc端：

<template>

  <div class="demo form-bg">

    <div class="logo">

      <img

        src="图片地址"

        alt="Logo"

      />

      <p style="font-size: 35px"><strong>xxxxxstrong>p>

    div>

    <q-card class="form-card">

      <q-card-section>

        <div class="text-h5" align="center">登录div>

      q-card-section>

      <q-card-section>

        <q-form @submit="onSubmit" class="q-gutter-md">

          <q-input

            filled

            v-model="name"

            label="账号"

            lazy-rules

            icon="person"

            :rules="[(val) => (val && val.length > 0) || '请输入账号']"

          >

            <template v-slot:before>

              <q-icon name="person" class="on-left" />

            template>

          q-input>

          <q-input

            filled

            v-model="password"

            label="密码"

            lazy-rules

            :rules="[(val) => (val && val.length > 0) || '请输入密码']"

          >

            <template v-slot:before>

              <q-icon name="lock" class="on-left" />

            template>

          q-input>
          <q-card-actions align="center">

            <q-btn

              label="登录"

              type="submit"

              color="primary"

              size="md"

              style="width: 100px"

            />

          q-card-actions>

          <q-card-actions align="between">

            <q-btn label="注册" @click="onRegistere" color="grey-5" flat />

            <q-btn label="忘记密码" @click="onForget" color="grey-5" flat />

          q-card-actions>

        q-form>

      q-card-section>

    q-card>

  div>

template>

  

<script>

export default {

  name: "LoginLayout",

};

script>

<script setup>

import { ref } from "vue";

const name = ref("");

const password = ref("");

const onSubmit = () => {

  console.log("submit");

};

const onRegistere = () => {

  console.log("registere");

};

const onForget = () => {

  console.log("forget");

};

script>

  

<style>

/* 设置页面背景颜色 */

.demo {

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-image: linear-gradient(-225deg, #e3fdf5 0%, #ffe6fa 100%);

}

/* 设置登录框的样式 */

.form-bg {

  background-color: rgba(255, 255, 255, 0.5);

  border-radius: 10px;

  padding: 20px;

}

.form-card {

  width: 400px;

}

/* 设置logo的样式 */

.logo {

  width: 100%;

  text-align: center;

  margin-bottom: 20px;

  position: absolute;

  top: 100px;

}

.logo img {

  width: 300px;

}

style>