mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests 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
src
plugins
naive.ts
styles/common
var.scss
views/login
index.vue

6
src/plugins/naive.ts

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

6
src/styles/common/var.scss

@ -4,6 +4,12 @@ $--color-red: #fc625d;
$--color-warn: #fcbc40; $--color-warn: #fcbc40;
$--color-success: #34c749; $--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; $--header-height: 60px;
// 模糊 // 模糊

166
src/views/login/index.vue

@ -15,78 +15,82 @@
</div> </div>
<div class="login-account"> <div class="login-account">
<div class="login-account-container"> <div class="login-account-container">
<n-card title="登录"> <n-collapse-transition :appear="true" :show="show">
<div class="login-account-top"> <n-card title="登录">
<div class="login-account-top-logo"> <div class="login-account-top">
<img src="~@/assets/images/logo.png" alt="" /> <img
class="login-account-top-logo"
src="~@/assets/images/logo.png"
alt="logo"
/>
</div> </div>
<div class="login-account-top-desc"> <n-form
欢迎使用 GoView ! ref="formRef"
</div> label-placement="left"
</div> size="large"
<n-form :model="formInline"
ref="formRef" :rules="rules"
label-placement="left" >
size="large" <n-form-item path="username">
:model="formInline" <n-input
:rules="rules" v-model:value="formInline.username"
> placeholder="请输入用户名"
<n-form-item path="username"> >
<n-input <template #prefix>
v-model:value="formInline.username" <n-icon size="18">
placeholder="请输入用户名" <PersonOutline />
> </n-icon>
<template #prefix> </template>
<n-icon size="18"> </n-input>
<PersonOutline /> </n-form-item>
</n-icon> <n-form-item path="password">
</template> <n-input
</n-input> v-model:value="formInline.password"
</n-form-item> type="password"
<n-form-item path="password"> show-password-toggle
<n-input placeholder="请输入密码"
v-model:value="formInline.password" >
type="password" <template #prefix>
show-password-toggle <n-icon size="18">
placeholder="请输入密码" <LockClosedOutline />
> </n-icon>
<template #prefix> </template>
<n-icon size="18"> </n-input>
<LockClosedOutline /> </n-form-item>
</n-icon> <n-form-item>
</template> <div class="flex justify-between">
</n-input> <div class="flex-initial">
</n-form-item> <n-checkbox v-model:checked="autoLogin">
<n-form-item> 自动登录
<div class="flex justify-between"> </n-checkbox>
<div class="flex-initial"> </div>
<n-checkbox v-model:checked="autoLogin">
自动登录
</n-checkbox>
</div> </div>
</div> </n-form-item>
</n-form-item> <n-form-item>
<n-form-item> <n-button
<n-button type="primary"
type="primary" @click="handleSubmit"
@click="handleSubmit" size="large"
size="large" :loading="loading"
:loading="loading" block
block >
> 登录
登录 </n-button>
</n-button> </n-form-item>
</n-form-item> </n-form>
</n-form> </n-card>
</n-card> </n-collapse-transition>
</div> </div>
</div> </div>
</div> </div>
<div class="go-login-box-footer">
文档地址: http://www.mtruning.club/
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref } from 'vue' import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui' import { useMessage } from 'naive-ui'
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5' import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
@ -103,6 +107,13 @@ const formRef = ref()
const message = useMessage() const message = useMessage()
const loading = ref(false) const loading = ref(false)
const autoLogin = ref(true) const autoLogin = ref(true)
const show = ref(false)
onMounted(() => {
setTimeout(() => {
show.value = true
}, 100)
})
const formInline = reactive({ const formInline = reactive({
username: 'admin', username: 'admin',
@ -137,14 +148,22 @@ const handleSubmit = (e: Event) => {
<style lang="scss" scoped> <style lang="scss" scoped>
$width: 450px; $width: 450px;
$account-img-height: 270px;
$footer-height: 50px;
$account-height: calc(100vh - $footer-height);
* {
box-sizing: border-box;
}
@include go(login-box) { @include go(login-box) {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background-image: linear-gradient(120deg, #17171a 0%, #232324 100%); background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
&-header { &-header {
margin: 0px; margin: 0px;
margin-top: $--header-height; padding-top: $--header-height;
} }
@include go(login) { @include go(login) {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
@ -160,8 +179,7 @@ $width: 450px;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: $account-height;
overflow: auto;
&-container { &-container {
flex: 1; flex: 1;
padding: 32px 0; padding: 32px 0;
@ -171,17 +189,21 @@ $width: 450px;
} }
&-top { &-top {
padding: 32px 0; padding-top: 10px;
text-align: center; text-align: center;
height: $account-img-height;
&-desc { margin-bottom: 20px;
font-size: 16px;
color: #fff;
}
} }
} }
} }
&-footer {
text-align: center;
height: $footer-height;
line-height: $footer-height;
color: $--color-text-2;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.login-account { .login-account {
background-repeat: no-repeat; background-repeat: no-repeat;