小小美化
This commit is contained in:
ChoChoX
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/登陆界面背景.mp4
Normal file
BIN
public/登陆界面背景.mp4
Normal file
Binary file not shown.
@@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 背景视频 -->
|
||||
<video src="../../public/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
|
||||
<div class="video-overlay"></div>
|
||||
|
||||
<!-- 登录卡片 -->
|
||||
<el-card class="login-card" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h2>欢迎登录</h2>
|
||||
<img src="../../public/logo.png" alt="logo" class="login-logo">
|
||||
<h2>蜜雪冰城管理系统</h2>
|
||||
<p class="subtitle">请输入您的账号信息</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -100,17 +106,58 @@ const handleLogin = async () => {
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px 60px 20px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景视频 */
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 登录卡片 */
|
||||
.login-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 420px;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.login-card :deep(.el-card__header) {
|
||||
border-bottom: 2px solid #E60012;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 420px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
.login-logo {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 12px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -119,7 +166,9 @@ const handleLogin = async () => {
|
||||
|
||||
.card-header h2 {
|
||||
margin: 0 0 8px;
|
||||
color: #303133;
|
||||
color: #E60012;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -128,10 +177,33 @@ const handleLogin = async () => {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 输入框聚焦时红色边框 */
|
||||
.login-card :deep(.el-input__wrapper:focus-within) {
|
||||
box-shadow: 0 0 0 1px #E60012 inset;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
background: #E60012;
|
||||
border-color: #E60012;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #d50010;
|
||||
border-color: #d50010;
|
||||
}
|
||||
|
||||
/* 记住我复选框 */
|
||||
.login-card :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||
background-color: #E60012;
|
||||
border-color: #E60012;
|
||||
}
|
||||
|
||||
.login-card :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
||||
color: #E60012;
|
||||
}
|
||||
</style>
|
||||
|
||||
196
src/components/contract.vue
Normal file
196
src/components/contract.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<script setup>
|
||||
import { ref,computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const selectField = ref('1')
|
||||
const dateRange = ref([])
|
||||
const loading=ref(false)
|
||||
|
||||
//过滤搜索结果
|
||||
const filteredContracts=computed(()=>{
|
||||
|
||||
})
|
||||
|
||||
//处理搜索
|
||||
const handleSearch=()=>{
|
||||
|
||||
}
|
||||
|
||||
//日期变更处理
|
||||
const handleDateChange=()=>{
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
// 重置搜索
|
||||
const resetSearch = () => {
|
||||
searchKeyword.value = ''
|
||||
searchField.value = '1'
|
||||
dateRange.value = []
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 日期快捷选项
|
||||
const dateShortcuts = [
|
||||
{
|
||||
text: '最近一周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 7 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 30 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 90 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return ''
|
||||
return date
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contract-container">
|
||||
<!-- 搜索栏区域 -->
|
||||
<div class="contract-search">
|
||||
<div class="search-row">
|
||||
<el-input v-model="searchKeyword" style="max-width: 600px" placeholder="Please input"
|
||||
class="contract-search-with-select">
|
||||
<template #prepend>
|
||||
<el-select v-model="searchField" placeholder="Select" style="width: 115px">
|
||||
<el-option label="编号" value="1" />
|
||||
<el-option label="名称" value="2" />
|
||||
<el-option label="类型" value="3" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="search-row date-range">
|
||||
<span class="date-label">日期范围</span>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:shortcuts="dateShortcuts"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="addCustomer" style="margin-left: 20px">
|
||||
新增合同
|
||||
</el-button>
|
||||
<el-button type="default" @click="resetSearch" style="margin-left:20px">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 合同列表 -->
|
||||
<div class="contract-list">
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredContracts.length===0" class="empty-container">
|
||||
<el-empty description="暂无合同数据" />
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="list-header">
|
||||
<span class="total-count">共找到{{ filteredContracts.length }}条合同</span>
|
||||
</div>
|
||||
|
||||
<div class="contract-cards">
|
||||
<el-card
|
||||
v-for="contract in filteredContracts"
|
||||
:key="contract.id"
|
||||
class="contract-card"
|
||||
shadow="hover"
|
||||
@click="viewDetail"
|
||||
>
|
||||
<div class="contract-info">
|
||||
<div class="contract-no">
|
||||
<el-tag size="small" type="primary">编号</el-tag>
|
||||
<span class="no-value">{{ contract.contractNo }}</span>
|
||||
</div>
|
||||
<div class="contract-name">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span class="name-value">{{ contract.contractName }}</span>
|
||||
</div>
|
||||
<div class="contract-date">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span class="date-value">{{ formatDate(contract.signDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增客户表单 -->
|
||||
<div v-if="showAddForm" class="customer-info-label">
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
|
||||
placeholder="请输入11位手机号" style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地区">
|
||||
<el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
|
||||
placeholder="请选择省/市/区" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.address" placeholder=" 请输入详细地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电子邮箱">
|
||||
<el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="代理商类型">
|
||||
<el-radio-group v-model="form.customer_type">
|
||||
<el-radio value="VIP">地区总代理</el-radio>
|
||||
<el-radio value="Normal">普通代理</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveCustomer">保存</el-button>
|
||||
<el-button type="danger" @click="cancelAdd">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -61,8 +61,9 @@ const clearSearch = () => {
|
||||
<template #prepend>
|
||||
<el-select v-model="select" placeholder="Select" style="width: 115px">
|
||||
<el-option label="姓名" value="1" />
|
||||
<el-option label="电话" value="2" />
|
||||
<el-option label="邮箱" value="3" />
|
||||
<el-option label="编号" value="2" />
|
||||
<el-option label="电话" value="3" />
|
||||
<el-option label="邮箱" value="4" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
@@ -70,7 +71,7 @@ const clearSearch = () => {
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-button type="primary" @click="addCustomer" style="margin-left: 20px">
|
||||
<el-button color="#E60012" :dark="isDark" @click="addCustomer" style="margin-left: 20px">
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -1,32 +1,42 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="banner">
|
||||
<video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop></video>
|
||||
<!-- 顶部视频横幅 -->
|
||||
<div class="video-banner">
|
||||
<video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop class="bg-video"></video>
|
||||
<div class="video-overlay">
|
||||
<h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-body">
|
||||
<div class="first-head">雪王简介</div>
|
||||
<div class="intro-content">
|
||||
<div class="pic">
|
||||
<img src="../../public/mixue.png" alt="雪王">
|
||||
<!-- 雪王简介 -->
|
||||
<div class="intro-section">
|
||||
<div class="section-header">
|
||||
<div class="header-line"></div>
|
||||
<h2 class="section-title">雪王简介</h2>
|
||||
<div class="header-line"></div>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<div class="second-head">
|
||||
|
||||
<div class="intro-content">
|
||||
<div class="pic-wrapper">
|
||||
<img src="../../public/mixue.png" alt="雪王" class="xuewang-img">
|
||||
</div>
|
||||
<div class="txt-wrapper">
|
||||
<div class="quote">
|
||||
"我是手拿冰淇凌权杖的雪王"
|
||||
<br>
|
||||
"一生只爱冰淇凌与茶"
|
||||
</div>
|
||||
<ul class="xuewang-list">
|
||||
<ul class="info-list">
|
||||
<li v-for="(item, index) in snowKingInfo" :key="index">
|
||||
<span class="label">{{ item.label }}</span>
|
||||
<span class="divider"></span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
<span class="info-label">{{ item.label }}</span>
|
||||
<span class="info-divider"></span>
|
||||
<span class="info-value">{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -43,152 +53,182 @@ const snowKingInfo = ref([
|
||||
|
||||
<style scoped>
|
||||
.home-container {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
min-height: 500px;
|
||||
/* ========== 视频横幅 ========== */
|
||||
.video-banner {
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
margin: -20px -20px 0 -20px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner video {
|
||||
.bg-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.home-body {
|
||||
padding: 100px 80px;
|
||||
background: linear-gradient(180deg, #FEF7F7 0%, rgba(254, 247, 247, 0.00) 64.96%);
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(230, 0, 18, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.first-head {
|
||||
text-align: center;
|
||||
font-size: 58px;
|
||||
.banner-title {
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ========== 简介区域 ========== */
|
||||
.intro-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header-line {
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #E60012, transparent);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #2E2F30;
|
||||
margin-bottom: 68px;
|
||||
line-height: 1.17;
|
||||
color: #E60012;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
gap: 60px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 750px;
|
||||
height: 660px;
|
||||
border-radius: 30px;
|
||||
/* 雪王图片 */
|
||||
.pic-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.pic img {
|
||||
.pic-wrapper:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.xuewang-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.pic:hover img {
|
||||
transform: scale(1.05);
|
||||
/* 文字内容 */
|
||||
.txt-wrapper {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
width: 676px;
|
||||
}
|
||||
|
||||
.second-head {
|
||||
font-size: 46px;
|
||||
.quote {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #E60012;
|
||||
line-height: 1.33;
|
||||
margin-bottom: 67px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
padding-left: 20px;
|
||||
border-left: 4px solid #E60012;
|
||||
}
|
||||
|
||||
.xuewang-list {
|
||||
.info-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.xuewang-list li {
|
||||
.info-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.xuewang-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
.info-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.xuewang-list .label {
|
||||
color: #2E2F30;
|
||||
font-weight: 700;
|
||||
min-width: 80px;
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.xuewang-list .divider {
|
||||
.info-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background-color: #999;
|
||||
margin: 0 15px;
|
||||
height: 16px;
|
||||
background: #E60012;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.xuewang-list .value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.info-value {
|
||||
color: #606266;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 1200px) {
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (max-width: 900px) {
|
||||
.intro-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.pic {
|
||||
.pic-wrapper {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
aspect-ratio: 750/660;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.txt {
|
||||
.txt-wrapper {
|
||||
width: 100%;
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-body {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.first-head {
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
.banner-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.second-head {
|
||||
font-size: 28px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.xuewang-list li {
|
||||
font-size: 18px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.xuewang-list .divider {
|
||||
display: none;
|
||||
.video-banner {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>hello ,im 2</h1>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -8,84 +8,83 @@ const isCollapse = ref(false)
|
||||
const switchFold = () => {
|
||||
isCollapse.value = !isCollapse.value
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container style="height: 100vh">
|
||||
<el-header style="display: flex; align-items: center;">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="app-header">
|
||||
<el-menu
|
||||
:ellipsis="false"
|
||||
mode="horizontal"
|
||||
router
|
||||
style="flex: 1;"
|
||||
class="header-menu"
|
||||
>
|
||||
<!-- 左侧 -->
|
||||
<el-menu-item index="">
|
||||
<h1 style="margin: 0;">信息管理系统</h1>
|
||||
<!-- 左侧 Logo -->
|
||||
<el-menu-item index="" class="logo-item">
|
||||
<img src="../../public/logo.png" alt="logo" class="logo-img">
|
||||
<h1 class="logo-title">蜜雪冰城管理系统</h1>
|
||||
</el-menu-item>
|
||||
|
||||
<!-- 右侧：margin-left: auto 把它推到底部 -->
|
||||
<el-menu-item index="/login" style="margin-left: auto">
|
||||
<!-- 右侧退出 -->
|
||||
<el-menu-item index="/login" class="logout-item">
|
||||
<el-icon><SwitchButton/></el-icon>
|
||||
<template #title>LogOut</template>
|
||||
<template #title>退出登录</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
|
||||
<el-container>
|
||||
<el-aside style="display: flex; flex-direction: column" width="200px">
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
|
||||
<el-menu
|
||||
:collapse="isCollapse"
|
||||
:default-active="route.path"
|
||||
router
|
||||
style="flex: 1; display: flex; flex-direction: column"
|
||||
class="aside-menu"
|
||||
>
|
||||
<!-- <el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon><IconMenu/></el-icon>
|
||||
<span>一号栏</span>
|
||||
</template>
|
||||
</el-sub-menu> -->
|
||||
|
||||
<el-menu-item index="/panel/home">
|
||||
<el-icon><House /></el-icon>
|
||||
<template #title>首页</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/panel/page1">
|
||||
<el-menu-item index="/panel/customer">
|
||||
<el-icon><Avatar /></el-icon>
|
||||
<template #title>客户管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/panel/page2">
|
||||
<el-menu-item index="/panel/contract">
|
||||
<el-icon><Document /></el-icon>
|
||||
<template #title>合同管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/panel/page3">
|
||||
|
||||
<el-menu-item index="/panel/service">
|
||||
<el-icon><Service /></el-icon>
|
||||
<template #title>售后管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/panel/page3">
|
||||
<el-icon><IceTea /></el-icon>
|
||||
<template #title>产品管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/panel/page3">
|
||||
<el-icon><User /></el-icon>
|
||||
<template #title>员工管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<!-- ⭐ 关键：margin-top: auto 把它推到最底部 -->
|
||||
<el-menu-item style="margin-top: auto" @click="switchFold">
|
||||
<el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}" ><ArrowLeft /></el-icon>
|
||||
<!-- 底部收缩按钮 -->
|
||||
<el-menu-item index="" class="collapse-btn" @click="switchFold">
|
||||
<el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
<template #title>收缩</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-main>
|
||||
<!-- ⭐ 这个 router-view 渲染嵌套的子路由（page1/page2/page3） -->
|
||||
<!-- 主内容区 -->
|
||||
<el-main class="app-main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
@@ -93,37 +92,121 @@ const switchFold = () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ========== 顶部导航栏 ========== */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid #E60012;
|
||||
padding: 0;
|
||||
height: 60px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
flex: 1;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #E60012;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logout-item {
|
||||
margin-left: auto !important;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.logout-item:hover {
|
||||
color: #E60012 !important;
|
||||
}
|
||||
|
||||
/* ========== 侧边栏 ========== */
|
||||
.app-aside {
|
||||
transition: width 0.3s ease;
|
||||
background: #fff;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.aside-menu:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* 菜单项样式 */
|
||||
.aside-menu .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
color: #606266;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.aside-menu .el-menu-item:hover {
|
||||
background: #FEF0F0;
|
||||
color: #E60012;
|
||||
}
|
||||
|
||||
.aside-menu .el-menu-item.is-active {
|
||||
background: #E60012;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aside-menu .el-menu-item.is-active .el-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 底部收缩按钮 */
|
||||
.collapse-btn {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
/* ========== 主内容区 ========== */
|
||||
.app-main {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ========== 收缩动画 ========== */
|
||||
.rotate-180-animation {
|
||||
/* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
|
||||
animation: rotate-180 0.3s ease-in-out;
|
||||
animation-fill-mode:forwards;
|
||||
animation: rotate-180 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.rotate-180-animation-reverse {
|
||||
/* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
|
||||
animation: rotate-180-reverse 0.3s ease-in-out;
|
||||
animation-fill-mode:forwards;
|
||||
animation: rotate-180-reverse 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes rotate-180 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(180deg); }
|
||||
}
|
||||
|
||||
@keyframes rotate-180-reverse {
|
||||
from {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
from { transform: rotate(180deg); }
|
||||
to { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@ import {createRouter, createWebHistory} from "vue-router";
|
||||
import Login from "./components/Login.vue";
|
||||
import Home from "./components/home.vue"
|
||||
import Panel from "./components/panel.vue";
|
||||
import Page1 from "./components/page1.vue";
|
||||
import Page2 from "./components/page2.vue";
|
||||
import Page3 from "./components/page3.vue";
|
||||
import Customer from "./components/customer.vue";
|
||||
import Contract from "./components/contract.vue";
|
||||
import Service from "./components/service.vue";
|
||||
|
||||
const routes = [
|
||||
{ path: "/", redirect: "/login" },
|
||||
@@ -15,9 +15,9 @@ const routes = [
|
||||
redirect: "/panel/home",
|
||||
children: [
|
||||
{ path: "home", component:Home},
|
||||
{ path: "page1", component: Page1 },
|
||||
{ path: "page2", component: Page2 },
|
||||
{ path: "page3", component: Page3 },
|
||||
{ path: "customer", component: Customer },
|
||||
{ path: "contract", component: Contract },
|
||||
{ path: "service", component: Service },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user