github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-22 23:32:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 修改首页

Browse Source
This commit is contained in:
MTrun 2021-12-14 20:32:22 +08:00
parent d699206cd9
commit ac8274f791
3 changed files with 104 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/naive.ts
View File

@ -66,7 +66,8 @@ import {
NTimePicker,
NBackTop,
NSkeleton,
NCarousel
NCarousel,
NCollapseTransition
} from 'naive-ui';
const naive = create({
@ -136,7 +137,8 @@ const naive = create({
NTimePicker,
NBackTop,
NSkeleton,
NCarousel
NCarousel,
NCollapseTransition
],
});

6
src/styles/common/var.scss
View File

@ -4,6 +4,12 @@ $--color-red: #fc625d;
$--color-warn: #fcbc40;
$--color-success: #34c749;
// 文字
$--color-text-1: hsla(0, 0%, 100%, 0.9);
$--color-text-2: hsla(0, 0%, 100%, 0.7);
$--color-text-3: hsla(0, 0%, 100%, 0.5);
$--color-text-4: hsla(0, 0%, 100%, 0.3);
// 顶部距离
$--header-height: 60px;
// 模糊

166
src/views/login/index.vue
View File

@ -15,78 +15,82 @@
</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="" />
<n-collapse-transition :appear="true" :show="show">
<n-card title="登录">
<div class="login-account-top">
<img
class="login-account-top-logo"
src="~@/assets/images/logo.png"
alt="logo"
/>
</div>
<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>
<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>
</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>
</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>
</n-collapse-transition>
</div>
</div>
</div>
<div class="go-login-box-footer">
文档地址: http://www.mtruning.club/
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
@ -103,6 +107,13 @@ const formRef = ref()
const message = useMessage()
const loading = ref(false)
const autoLogin = ref(true)
const show = ref(false)
onMounted(() => {
setTimeout(() => {
show.value = true
}, 100)
})
const formInline = reactive({
username: 'admin',
@ -137,14 +148,22 @@ const handleSubmit = (e: Event) => {
<style lang="scss" scoped>
$width: 450px;
$account-img-height: 270px;
$footer-height: 50px;
$account-height: calc(100vh - $footer-height);
* {
box-sizing: border-box;
}
@include go(login-box) {
height: 100vh;
overflow: hidden;
background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
&-header {
margin: 0px;
margin-top: $--header-height;
padding-top: $--header-height;
}
@include go(login) {
display: flex;
justify-content: space-evenly;
@ -160,8 +179,7 @@ $width: 450px;
z-index: 1;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
height: $account-height;
&-container {
flex: 1;
padding: 32px 0;
@ -171,17 +189,21 @@ $width: 450px;
}
&-top {
padding: 32px 0;
padding-top: 10px;
text-align: center;
&-desc {
font-size: 16px;
color: #fff;
}
height: $account-img-height;
margin-bottom: 20px;
}
}
}
&-footer {
text-align: center;
height: $footer-height;
line-height: $footer-height;
color: $--color-text-2;
}
@media (min-width: 768px) {
.login-account {
background-repeat: no-repeat;