login页面

This commit is contained in:
洛洛希雅 2024-04-25 08:41:48 +08:00
parent 4daf4ba24c
commit 725ea5064a
4 changed files with 15 additions and 11 deletions

View File

@ -1,5 +1,5 @@
{ {
"name": "vue3-admin-plus", "name": "lolosia-web",
"version": "2.0.2", "version": "2.0.2",
"license": "MIT", "license": "MIT",
"author": "一七年夏", "author": "一七年夏",

View File

@ -1,7 +1,6 @@
import packageJson from '../package.json'
import type { SettingsConfig } from '~/basic' import type { SettingsConfig } from '~/basic'
export const settings: SettingsConfig = { export const settings: SettingsConfig = {
title: packageJson.name, title: '洛洛希雅的小网站',
/** /**
* @type {boolean} true | false * @type {boolean} true | false
* @description Whether show the logo in sidebar * @description Whether show the logo in sidebar

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="login-container columnCE"> <div class="login-container columnCE">
<div class="login-hero"> <!-- <div class="login-hero">-->
<img src="@/assets/layout/login.svg" :alt="settings.title" /> <!-- <img src="@/assets/layout/login.svg" :alt="settings.title" />-->
</div> <!-- </div>-->
<el-form ref="refLoginForm" class="login-form" :model="subForm" :rules="formRules"> <el-form ref="refLoginForm" class="login-form" :model="subForm" :rules="formRules">
<div class="title-container"> <div class="title-container">
<h3 class="title text-center">{{ settings.title }}</h3> <h3 class="title text-center">{{ settings.title }}</h3>
@ -32,7 +32,7 @@
</span> </span>
</el-form-item> </el-form-item>
<div class="tip-message">{{ tipMessage }}</div> <div class="tip-message">{{ tipMessage }}</div>
<el-button :loading="subLoading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin"> <el-button :loading="subLoading" color="#E3B4D0" class="login-btn" size="default" @click.prevent="handleLogin">
登录 登录
</el-button> </el-button>
</el-form> </el-form>
@ -163,14 +163,19 @@ $light_gray: #eee;
overflow-y: hidden; overflow-y: hidden;
width: 100%; width: 100%;
background-color: $bg; background-color: $bg;
background-image: url('./1712042358737.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-x: right;
background-position-y: center;
.login-form { .login-form {
width: 360px; width: 360px;
padding: 40px 30px; padding: 40px 30px;
background: #fff; background: #fff6;
box-shadow: 0 4px 16px rgba(4, 61, 175, 0.15); box-shadow: 0 4px 16px rgba(4, 61, 175, 0.15);
border-radius: 8px; border-radius: 8px;
margin-right: 20vw; margin-right: 10vw;
z-index: 10; z-index: 10;
@media screen and (min-width: 769px) and (max-width: 992px) { @media screen and (min-width: 769px) and (max-width: 992px) {
margin-right: 10vw; margin-right: 10vw;
@ -184,7 +189,7 @@ $light_gray: #eee;
.title-container { .title-container {
.title { .title {
font-size: 18px; font-size: 18px;
color: $dark_gray; color: white;
margin: 0 auto 25px auto; margin: 0 auto 25px auto;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
@ -261,7 +266,7 @@ $light_gray: #eee;
.el-form-item { .el-form-item {
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
background: #fff; background: #fffb;
border-radius: 4px; border-radius: 4px;
color: #999; color: #999;