Compare commits
No commits in common. "22d9be62c7130441e48607855380f666659a2d53" and "b761878e5480a4ad1d0a34b86f05791c5c5263d3" have entirely different histories.
22d9be62c7
...
b761878e54
64
src/App.vue
64
src/App.vue
@ -1,9 +1,67 @@
|
||||
<style scoped></style>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
<a-layout style="min-height: 100vh">
|
||||
<a-layout-header :style="{ background: '#fff', width: '100%' }">
|
||||
<a-menu
|
||||
v-model:selectedKeys="current"
|
||||
mode="horizontal"
|
||||
:items="items"
|
||||
theme="light"
|
||||
:style="{ justifyContent: 'center' }"
|
||||
/>
|
||||
</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-content
|
||||
theme="light"
|
||||
:style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
|
||||
>
|
||||
<RouterView />
|
||||
</a-layout-content>
|
||||
<a-layout-sider
|
||||
theme="light"
|
||||
:collapsible="true"
|
||||
:collapsed-width="0"
|
||||
:defaultCollapsed="true"
|
||||
>
|
||||
<CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
|
||||
</a-layout-sider>
|
||||
</a-layout>
|
||||
<a-layout-footer> jjjj</a-layout-footer>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
import { h, ref } from 'vue'
|
||||
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
|
||||
import CustomCard from '@/components/CustomCard.vue'
|
||||
|
||||
<style scoped></style>
|
||||
const current = ref(['mail'])
|
||||
const items = ref([
|
||||
{
|
||||
key: 'home',
|
||||
icon: () => h(MailOutlined),
|
||||
label: h('a', { href: '/' }, '首页'),
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
icon: () => h(AppstoreOutlined),
|
||||
label: h('a', { href: '/about' }, '关于'),
|
||||
title: '关于'
|
||||
},
|
||||
{
|
||||
key: 'tool',
|
||||
icon: () => h(AppstoreOutlined),
|
||||
label: h('a', { href: '/tool' }, '工具'),
|
||||
title: '工具'
|
||||
},
|
||||
{
|
||||
key: 'login',
|
||||
icon: () => h(AppstoreOutlined),
|
||||
label: h('a', { href: '/login' }, '登录'),
|
||||
title: '登录'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 217 KiB |
@ -1,6 +1,7 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
@ -13,8 +14,8 @@ header {
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
/*width: 1080px;*/
|
||||
/*width: 80%;*/
|
||||
width: 1080px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 2 800px;
|
||||
@ -24,19 +25,19 @@ main {
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsl(0, 0%, 0%);
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(150, 1%, 56%, 0.2);
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#app {
|
||||
padding: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<script setup>
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
import { computed, reactive } from 'vue'
|
||||
|
||||
const formState = reactive({
|
||||
account: '',
|
||||
password: '',
|
||||
remember: false
|
||||
})
|
||||
|
||||
const onfinish = async () => {
|
||||
console.log('formState', formState)
|
||||
const response = await fetch('http://127.0.0.1:3000/login', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'default',
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(formState)
|
||||
})
|
||||
console.log(response)
|
||||
}
|
||||
|
||||
const onFinishFailed = () => {
|
||||
console.log('onFinishFailed')
|
||||
}
|
||||
|
||||
const disabled = computed(() => {
|
||||
return !formState.account || !formState.password
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card class="login-container" :hoverable="true">
|
||||
<a-form
|
||||
:model="formState"
|
||||
name="login"
|
||||
class="login-form"
|
||||
autocomplete="off"
|
||||
@finish="onfinish"
|
||||
@finishFailed="onFinishFailed"
|
||||
>
|
||||
<a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
|
||||
<a-input v-model:value="formState.account" placeholder="请输入账号">
|
||||
<template #prefix>
|
||||
<UserOutlined class="site-form-item-icon" style="margin-right: 8px"></UserOutlined>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
|
||||
<a-input-password v-model:value="formState.password" placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<LockOutlined class="site-form-item-icon" style="margin-right: 8px"></LockOutlined>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="remember" style="width: 100%">
|
||||
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
|
||||
<a class="login-form-forgot" href="">忘记密码?</a>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="width: 100%">
|
||||
<a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
|
||||
>登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
background-color: rgba(253, 253, 253, 0.9);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.login-form-forgot {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,61 +0,0 @@
|
||||
<script setup>
|
||||
import CustomCard from '@/components/CustomCard.vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
import { h, ref } from 'vue'
|
||||
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const current = ref(['mail'])
|
||||
const items = ref([
|
||||
{
|
||||
key: 'home',
|
||||
icon: () => h(MailOutlined),
|
||||
label: h('a', { href: '/' }, '首页'),
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
icon: () => h(AppstoreOutlined),
|
||||
label: h('a', { href: '/about' }, '关于'),
|
||||
title: '关于'
|
||||
},
|
||||
{
|
||||
key: 'tool',
|
||||
icon: () => h(AppstoreOutlined),
|
||||
label: h('a', { href: '/tool' }, '工具'),
|
||||
title: '工具'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout style="min-height: 100vh">
|
||||
<a-layout-header :style="{ background: '#fff', width: '100%' }">
|
||||
<a-menu
|
||||
v-model:selectedKeys="current"
|
||||
mode="horizontal"
|
||||
:items="items"
|
||||
theme="light"
|
||||
:style="{ justifyContent: 'center' }"
|
||||
/>
|
||||
</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-content
|
||||
theme="light"
|
||||
:style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
|
||||
>
|
||||
<RouterView />
|
||||
</a-layout-content>
|
||||
<a-layout-sider
|
||||
theme="light"
|
||||
:collapsible="true"
|
||||
:collapsed-width="0"
|
||||
:defaultCollapsed="true"
|
||||
>
|
||||
<CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
|
||||
</a-layout-sider>
|
||||
</a-layout>
|
||||
<a-layout-footer>footer</a-layout-footer>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="login-layout">
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-layout {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
|
||||
url('@/assets/background.jpg') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@ -1,51 +1,37 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '@/views/HomeView.vue'
|
||||
import AboutView from '@/views/AboutView.vue'
|
||||
import ToolView from '@/views/ToolView.vue'
|
||||
import NewsView from '@/views/NewsView.vue'
|
||||
import DefaultLayout from '../layouts/DefaultLayout.vue'
|
||||
import LoginLayout from '@/layouts/LoginLayout.vue'
|
||||
import LoginView from '@/views/LoginView.vue'
|
||||
import HomeView from '@/views/HomeView.vue'
|
||||
import NewsView from '@/views/NewsView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: DefaultLayout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: AboutView
|
||||
},
|
||||
{
|
||||
path: '/tool',
|
||||
name: 'tool',
|
||||
component: ToolView
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
name: 'news',
|
||||
component: NewsView
|
||||
}
|
||||
]
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: AboutView
|
||||
},
|
||||
{
|
||||
path: '/tool',
|
||||
name: 'tool',
|
||||
component: ToolView
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: LoginLayout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Login',
|
||||
component: LoginView
|
||||
}
|
||||
]
|
||||
name: 'login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
name: 'news',
|
||||
component: NewsView
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -1,21 +1,12 @@
|
||||
<script setup>
|
||||
import CustomLogin from '@/components/CustomLogin.vue'
|
||||
|
||||
import XiaoMiLogin from '@/components/XiaoMiLogin.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomLogin class="login-container"></CustomLogin>
|
||||
<XiaoMiLogin style="margin: 100px auto"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
margin-top: 50px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user