update
This commit is contained in:
aaron
parent
a28ae6063f
commit
9beb6e98bc
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-layout style="min-height: 100vh">
|
||||
<a-layout class="admin-layout">
|
||||
<!-- 侧边栏 -->
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible :theme="'dark'" style="background: #1a1a1a;">
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible :theme="'dark'" style="background: #1a1a1a; position: fixed; height: 100vh; z-index: 10; left: 0; top: 0;">
|
||||
<div class="logo">
|
||||
<h1 v-if="!collapsed">蜂快·运营商平台</h1>
|
||||
<h1 v-else>蜂快</h1>
|
||||
@ -19,9 +19,20 @@
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout>
|
||||
<a-layout :style="{ marginLeft: collapsed ? '80px' : '200px', transition: 'all 0.2s' }">
|
||||
<!-- 头部 -->
|
||||
<a-layout-header style="background: #fff; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);">
|
||||
<a-layout-header class="layout-header" :style="{ width: `calc(100% - ${collapsed ? 80 : 200}px)` }">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="header-breadcrumb">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<home-outlined />
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>蜂快·运营商平台</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>{{ currentPageTitle }}</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
@ -40,14 +51,14 @@
|
||||
</a-layout-header>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<a-layout-content style="margin: 16px">
|
||||
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px', borderRadius: '8px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }">
|
||||
<a-layout-content class="layout-content">
|
||||
<div class="content-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
|
||||
<!-- 底部 -->
|
||||
<a-layout-footer style="text-align: center; color: rgba(0, 0, 0, 0.45);">
|
||||
<a-layout-footer class="layout-footer">
|
||||
蜂快·运营商平台 ©2025
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
@ -59,13 +70,15 @@ import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import {
|
||||
DashboardOutlined
|
||||
DashboardOutlined,
|
||||
HomeOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'AdminLayout',
|
||||
components: {
|
||||
DashboardOutlined
|
||||
DashboardOutlined,
|
||||
HomeOutlined
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@ -80,6 +93,11 @@ export default {
|
||||
const userInfo = computed(() => store.getters.userInfo);
|
||||
const selectedKeys = ref([]);
|
||||
|
||||
// 获取当前页面标题
|
||||
const currentPageTitle = computed(() => {
|
||||
return route.meta.title || '页面';
|
||||
});
|
||||
|
||||
// 根据当前路由设置选中的菜单项
|
||||
watch(() => route.path, (path) => {
|
||||
const key = path.split('/')[1] || 'dashboard';
|
||||
@ -102,13 +120,18 @@ export default {
|
||||
collapsed,
|
||||
selectedKeys,
|
||||
userInfo,
|
||||
handleLogout
|
||||
handleLogout,
|
||||
currentPageTitle
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -124,8 +147,27 @@ export default {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.header-breadcrumb {
|
||||
margin-left: 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
margin-right: 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
@ -146,6 +188,28 @@ export default {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
margin-top: 64px; /* 头部高度 */
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 64px - 70px); /* 减去头部和底部的高度 */
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
min-height: 360px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
padding: 16px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-trigger) {
|
||||
background: #000000;
|
||||
}
|
||||
@ -172,7 +236,6 @@ export default {
|
||||
|
||||
:deep(.ant-layout-sider) {
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:deep(.ant-dropdown-menu) {
|
||||
|
||||
@ -1,31 +1,15 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<div class="login-left">
|
||||
<div class="logo-container">
|
||||
<img src="../assets/logo.png" alt="蜂快到家" class="logo"/>
|
||||
<div class="logo-text">蜂快到家</div>
|
||||
</div>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<check-circle-outlined />
|
||||
<span>高效管理配送</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<check-circle-outlined />
|
||||
<span>实时监控订单</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<check-circle-outlined />
|
||||
<span>便捷数据分析</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-right">
|
||||
|
||||
<div class="welcome-text">
|
||||
<h1>欢迎使用 蜂快 · 运营商平台</h1>
|
||||
<p>请使用您的手机号和密码登录</p>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
:model="formState"
|
||||
name="login"
|
||||
@ -73,27 +57,26 @@
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>© 2025 蜂快到家. 保留所有权利</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { UserOutlined, LockOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
CheckCircleOutlined
|
||||
LockOutlined
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@ -146,77 +129,45 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
width: 420px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.login-left {
|
||||
width: 40%;
|
||||
background-color: #1a1a1a;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-top: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-item .anticon {
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 60%;
|
||||
background-color: white;
|
||||
padding: 40px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 12px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.welcome-text h1 {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8px;
|
||||
@ -228,7 +179,7 @@ export default {
|
||||
}
|
||||
|
||||
.login-form {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-input {
|
||||
@ -257,42 +208,24 @@ export default {
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 40px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 480px) {
|
||||
.login-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
border-radius: 0;
|
||||
width: 90%;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
padding: 20px;
|
||||
.welcome-text h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
margin-bottom: 20px;
|
||||
.logo {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user