blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-06 03:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): 修改了icon的包装，优化login样式

Browse Source
This commit is contained in:
Coffee-crocodile 2022-08-12 12:54:42 +08:00
parent c832194801
commit 34f0951364
4 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/EIcon.vue
View File

@ -1,19 +1,17 @@
<template>
<Icon :icon="props.icon" class="inline-block" :width="props.size" />
<n-icon :size="props.size || 18" :depth="props.depth" :color="props.color">
<Icon :icon="props.icon" />
</n-icon>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
const props = defineProps({
icon: {
type: String,
default: 'icon-park-outline:game',
},
size: {
type: Number,
default: 18,
},
});
const props = defineProps<{
icon: string;
color?: string;
size?: number;
depth?: 1 | 2 | 3 | 4 | 5;
}>();
</script>
<style scoped></style>

4
src/layouts/components/header/Breadcrumb.vue
View File

@ -1,9 +1,5 @@
<template>
<n-breadcrumb class="px-5">
<n-breadcrumb-item class="align-middle">
<e-icon icon="icon-park-outline:home-two" />
首页
</n-breadcrumb-item>
<n-breadcrumb-item v-for="(item, index) in routes" :key="index">
<e-icon :icon="item.meta.icon" />
{{ item.meta.title }}

2
src/layouts/components/header/UserCenter.vue
View File

@ -1,7 +1,7 @@
<template>
<n-dropdown trigger="hover" :options="options" @select="handleSelect">
<HeaderButton>
<n-avatar size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
<n-avatar round size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
{{ authStore.name }}
</HeaderButton>
</n-dropdown>

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

@ -12,13 +12,40 @@
<n-p depth="3">高效、简约、可能对你有点帮助</n-p>
<n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
<n-form-item path="account">
<n-input v-model:value="formValue.account" placeholder="输入账号" round />
<n-input v-model:value="formValue.account" placeholder="输入账号" round>
<template #prefix>
<e-icon icon="icon-park-outline:woman" />
</template>
</n-input>
</n-form-item>
<n-form-item path="pwd">
<n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" round />
<n-input
v-model:value="formValue.pwd"
type="password"
placeholder="输入密码"
show-password-on="click"
round
>
<template #prefix>
<e-icon icon="icon-park-outline:lock" />
</template>
<template #password-invisible-icon>
<e-icon icon="icon-park-outline:preview-close-one" />
</template>
<template #password-visible-icon>
<e-icon icon="icon-park-outline:preview-open" />
</template>
</n-input>
</n-form-item>
<n-form-item path="code">
<n-input v-model:value="formValue.code" placeholder="输入验证码" round />
<n-space align="center">
<n-input v-model:value="formValue.code" placeholder="输入验证码" round>
<template #prefix>
<e-icon icon="icon-park-outline:message" />
</template>
</n-input>
<span>这边可以放点什么</span>
</n-space>
</n-form-item>
<n-space vertical :size="24">
<div class="flex-y-center justify-between">
@ -28,7 +55,6 @@
<n-button w-full type="primary" round size="large" @click="validateAll">登录</n-button>
</n-space>
</n-form>
<n-divider><span op-50>其他登录</span></n-divider>
</div>
</div>