deliveryman/partner-admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2025-03-09 09:46:44 +08:00
parent a28ae6063f
commit 9beb6e98bc
2 changed files with 149 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/layouts/AdminLayout.vue
View File

@ -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) {

215
src/views/Login.vue
View File

@ -1,81 +1,65 @@
<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 class="logo-container">
<img src="../assets/logo.png" alt="蜂快到家" class="logo"/>
</div>
<div class="login-right">
<div class="welcome-text">
<h1>欢迎使用 蜂快·运营商平台</h1>
<p>请使用您的手机号和密码登录</p>
</div>
<a-form
:model="formState"
name="login"
@finish="onFinish"
class="login-form"
<div class="welcome-text">
<h1>欢迎使用 蜂快 · 运营商平台</h1>
<p>请使用您的手机号和密码登录</p>
</div>
<a-form
:model="formState"
name="login"
@finish="onFinish"
class="login-form"
>
<a-form-item
name="phone"
:rules="[
{ required: true, message: '请输入手机号!' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码!' }
]"
>
<a-form-item
name="phone"
:rules="[
{ required: true, message: '请输入手机号!' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码!' }
]"
<a-input
v-model:value="formState.phone"
placeholder="请输入手机号"
size="large"
class="login-input"
>
<a-input
v-model:value="formState.phone"
placeholder="请输入手机号"
size="large"
class="login-input"
>
<template #prefix><user-outlined /></template>
</a-input>
</a-form-item>
<template #prefix><user-outlined /></template>
</a-input>
</a-form-item>
<a-form-item
name="password"
:rules="[{ required: true, message: '请输入密码!' }]"
<a-form-item
name="password"
:rules="[{ required: true, message: '请输入密码!' }]"
>
<a-input-password
v-model:value="formState.password"
placeholder="请输入密码"
size="large"
class="login-input"
>
<a-input-password
v-model:value="formState.password"
placeholder="请输入密码"
size="large"
class="login-input"
>
<template #prefix><lock-outlined /></template>
</a-input-password>
</a-form-item>
<template #prefix><lock-outlined /></template>
</a-input-password>
</a-form-item>
<div class="login-options">
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
</div>
<a-form-item>
<a-button type="primary" html-type="submit" class="login-button" :loading="loading" size="large">
登 录
</a-button>
</a-form-item>
</a-form>
<div class="login-footer">
<p>© 2025 蜂快到家. 保留所有权利</p>
<div class="login-options">
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
</div>
<a-form-item>
<a-button type="primary" html-type="submit" class="login-button" :loading="loading" size="large">
登 录
</a-button>
</a-form-item>
</a-form>
<div class="login-footer">
<p>© 2025 蜂快到家. 保留所有权利</p>
</div>
</div>
</div>
@ -85,15 +69,14 @@
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>