blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 增加登录页，修改主题色

Browse Source
This commit is contained in:
‘chen.home’ 2022-08-09 23:31:28 +08:00
parent 0cd8f6a79a
commit d9a2330cad
4 changed files with 108 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -1,18 +1,12 @@
<script setup lang="ts">
// import { darkTheme } from 'naive-ui';
import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
import json from './theme.json';
const locale = zhCN;
const dateLocale = dateZhCN;
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#316C72FF',
primaryColorHover: '#316C72E3',
primaryColorPressed: '#2B4C59FF',
primaryColorSuppl: '#316C7263',
},
};
const themeOverrides: GlobalThemeOverrides = {} || json;
</script>
<template>

29
src/theme.json Normal file
View File

@ -0,0 +1,29 @@
{
"Card": {
"titleFontSizeSmall": "17px"
},
"common": {
"primaryColor": "#0F72EFFF",
"primaryColorHover": "#3892F2FF",
"primaryColorPressed": "#0958C6FF",
"primaryColorSuppl": "#63AEF5FF",
"successColor": "#00C18BFF",
"successColorHover": "#23C343FF",
"successColorPressed": "#009A29FF",
"successColorSuppl": "#4CD263FF",
"warningColor": "#FFA145FF",
"warningColorHover": "#FFB766FF",
"warningColorPressed": "#D2792BFF",
"warningColorSuppl": "#FFCB86FF",
"errorColor": "#FF5169FF",
"errorColorHover": "#FF6F7EFF",
"errorColorPressed": "#D2324DFF",
"errorColorSuppl": "#FF8D95FF",
"textColorBase": "#E61D1DFF",
"textColor1": "#252631FF",
"textColor2": "#778CA2FF",
"bodyColor": "#F2F3F5FF",
"textColor3": "#A6B6C6FF",
"textColorDisabled": "#C9CDD4FF"
}
}

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

@ -1,31 +1,82 @@
<template>
<div text-center flex-center wh-full>
<n-carousel autoplay w-500px>
<img
h-screen
object-cover
src="https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80"
/>
<img
object-cover
h-screen
src="https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
/>
<img
h-screen
object-cover
src="https://images.unsplash.com/photo-1657299156568-c94580e20fb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
/>
<img
object-cover
h-screen
src="https://images.unsplash.com/photo-1659983391845-47ea9d99e7bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
/>
<div flex-center wh-full bg-hex-F3F4F6>
<n-carousel autoplay trigger="hover" dot-type="line" effect="fade" :interval="3000" w-lg sm:hidden xl:block>
<img v-for="(item, index) in swiperList" :key="index" h-screen object-cover :src="item" />
</n-carousel>
<div c-lightBlue flex-1><router-link to="/">Go to layout</router-link></div>
<div flex-1 flex-center>
<div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
<n-h1>Ench Admin</n-h1>
<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-form-item>
<n-form-item path="pwd">
<n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" round />
</n-form-item>
<n-form-item path="code">
<n-input v-model:value="formValue.code" placeholder="输入验证码" round />
</n-form-item>
<n-space vertical :size="24">
<div class="flex-y-center justify-between">
<n-checkbox>记住我</n-checkbox>
<n-button :text="true">忘记密码？</n-button>
</div>
<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>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { FormInst } from 'naive-ui';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router = useRouter();
const swiperList = ref([
'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
'https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
'https://images.unsplash.com/photo-1657299156568-c94580e20fb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
'https://images.unsplash.com/photo-1659983391845-47ea9d99e7bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
]);
const formValue = ref({
account: '',
pwd: '',
code: '',
});
const rules = {
account: {
required: true,
trigger: 'blur',
message: '请输入账户',
},
pwd: {
required: true,
trigger: 'blur',
message: '请输入密码',
},
code: {
required: true,
trigger: 'blur',
min: 4,
message: '最短长度为 4',
},
};
const formRef = ref<FormInst | null>(null);
const validateAll = () => {
formRef.value?.validate((errors) => {
if (errors) {
return console.error(errors);
}
router.push('/');
});
};
</script>
<style scoped></style>

2
unocss.config.ts
View File

@ -5,5 +5,7 @@ export default defineConfig({
'wh-full': 'w-full h-full',
'flex-center': 'flex justify-center items-center',
'flex-col-center': 'flex-center flex-col',
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
},
});