mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
fix: 修改首页代码
This commit is contained in:
MTrun
+130
-103
@@ -1,69 +1,84 @@
|
||||
<template>
|
||||
<div class="go-login">
|
||||
<div class="login-account">
|
||||
<div class="login-account-header"></div>
|
||||
<div class="login-account-container">
|
||||
<div class="login-account-top">
|
||||
<div class="login-account-top-logo">
|
||||
<img src="~@/assets/images/logo.png" alt="" />
|
||||
</div>
|
||||
<div class="login-account-top-desc">
|
||||
GoView
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-account-form">
|
||||
<n-form
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
>
|
||||
<n-form-item path="username">
|
||||
<n-input
|
||||
v-model:value="formInline.username"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item path="password">
|
||||
<n-input
|
||||
v-model:value="formInline.password"
|
||||
type="password"
|
||||
show-password-toggle
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item class="default-color">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-initial">
|
||||
<n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
|
||||
</div>
|
||||
<div class="go-login-box">
|
||||
<n-divider class="go-login-box-header" />
|
||||
<div class="go-login">
|
||||
<div class="go-login-carousel">
|
||||
<n-carousel autoplay>
|
||||
<img
|
||||
v-for="(e, i) in imgList"
|
||||
:key="i"
|
||||
class="go-login-carousel-img"
|
||||
:src="e"
|
||||
alt="展示图片"
|
||||
/>
|
||||
</n-carousel>
|
||||
</div>
|
||||
<div class="login-account">
|
||||
<div class="login-account-container">
|
||||
<n-card title="登录">
|
||||
<div class="login-account-top">
|
||||
<div class="login-account-top-logo">
|
||||
<img src="~@/assets/images/logo.png" alt="" />
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<div class="login-account-top-desc">
|
||||
欢迎使用 GoView !
|
||||
</div>
|
||||
</div>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
>
|
||||
<n-form-item path="username">
|
||||
<n-input
|
||||
v-model:value="formInline.username"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
<PersonOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item path="password">
|
||||
<n-input
|
||||
v-model:value="formInline.password"
|
||||
type="password"
|
||||
show-password-toggle
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
<LockClosedOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-initial">
|
||||
<n-checkbox v-model:checked="autoLogin">
|
||||
自动登录
|
||||
</n-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,6 +90,9 @@ import { reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
|
||||
import imgOne from '@/assets/images/login/one.png'
|
||||
import imgTwo from '@/assets/images/login/two.png'
|
||||
import imgThree from '@/assets/images/login/three.png'
|
||||
|
||||
interface FormState {
|
||||
username: string
|
||||
@@ -96,6 +114,8 @@ const rules = {
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' }
|
||||
}
|
||||
|
||||
const imgList = [imgOne, imgTwo, imgThree]
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
@@ -116,55 +136,62 @@ const handleSubmit = (e: Event) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(login) {
|
||||
.login-account {
|
||||
$width: 450px;
|
||||
@include go(login-box) {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
|
||||
&-header {
|
||||
margin: 0px;
|
||||
margin-top: $--header-height;
|
||||
}
|
||||
@include go(login) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
|
||||
|
||||
&-container {
|
||||
flex: 1;
|
||||
padding: 32px 0;
|
||||
width: 384px;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
&-top {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #808695;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin-top: -$--header-height;
|
||||
&-carousel {
|
||||
width: 50%;
|
||||
&-img {
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
.login-account {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
&-container {
|
||||
flex: 1;
|
||||
padding: 32px 0;
|
||||
width: $width;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
&-other {
|
||||
width: 100%;
|
||||
}
|
||||
&-top {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
|
||||
.default-color {
|
||||
color: #515a6e;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
color: #515a6e;
|
||||
&-desc {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-account {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.login-account {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.page-account-container {
|
||||
padding: 32px 0 24px 0;
|
||||
.page-account-container {
|
||||
padding: 32px 0 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user