提交6
This commit is contained in:
parent
bd251a7cfe
commit
27d61cbca7
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 351 KiB |
|
|
@ -1,51 +1,73 @@
|
|||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3A71A8;
|
||||
$red: #C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
// 基础颜色
|
||||
$blue: #87ceeb; // 天空蓝
|
||||
$light-blue: #b3e5fc; // 更浅的天蓝色
|
||||
$red: #ff69b4; // 草莓红
|
||||
$pink: #ff87ce; // 樱桃粉
|
||||
$green: #90ee90; // 淡绿色
|
||||
$tiffany: #7bf2b3; // 蒂芙尼蓝
|
||||
$yellow: #f4d03f; // 柠檬黄
|
||||
$panGreen: #90ee90; // 淡绿色
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-logo-title-color: #ffffff;
|
||||
$base-menu-color: #f0f0f0; // 非常浅的灰色
|
||||
$base-menu-color-active: #ffffff; // 活跃时白色
|
||||
$base-menu-background: #f0f0f0; // 背景浅灰色
|
||||
$base-logo-title-color: #333; // 标题深灰色
|
||||
|
||||
$base-menu-light-color: rgba(0, 0, 0, 0.7);
|
||||
$base-menu-light-background: #ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
$base-menu-light-color: rgba(0, 0, 0, 0.6); // 深一点的浅灰色
|
||||
$base-menu-light-background: #ffffff; // 亮背景白色
|
||||
$base-logo-light-title-color: #333; // 亮标题深灰色
|
||||
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-sub-menu-background: #e0e0e0; // 子菜单背景浅灰色
|
||||
$base-sub-menu-hover: #d1d1d1; // 子菜单悬停浅灰色
|
||||
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
$base-menu-color:hsla(0,0%,100%,.65);
|
||||
$base-menu-color-active:#fff;
|
||||
$base-menu-background:#001529;
|
||||
$base-logo-title-color: #ffffff;
|
||||
// 字体
|
||||
$font-stack: '楷体', 'Comic Sans MS', cursive, sans-serif; // 使用楷体或Comic Sans字体，增加可爱感
|
||||
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#000c17;
|
||||
$base-sub-menu-hover:#001528;
|
||||
*/
|
||||
|
||||
$--color-primary: #409EFF;
|
||||
$--color-success: #67C23A;
|
||||
$--color-warning: #E6A23C;
|
||||
$--color-danger: #F56C6C;
|
||||
$--color-info: #909399;
|
||||
// 主题颜色
|
||||
$--color-primary: #6495ed;
|
||||
$--color-success: #4CAF50;
|
||||
$--color-warning: #ffeb3b;
|
||||
$--color-danger: #ff6347;
|
||||
$--color-info: #9e9e9e;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
// 可爱的动画
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
// 可爱的样式
|
||||
.menu-item {
|
||||
border-radius: 4px; // 圆角
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 轻微的阴影
|
||||
transition: background-color 0.3s ease; // 平滑的背景颜色变化
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($base-menu-background, 5%); // 悬停时背景色变浅
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $base-menu-color-active; // 活跃状态的背景色
|
||||
animation: bounce 0.5s infinite; // 添加可爱的跳动动画
|
||||
}
|
||||
}
|
||||
|
||||
// 可爱的字体
|
||||
body {
|
||||
font-family: $font-stack;
|
||||
}
|
||||
|
||||
// 导出变量供JS使用
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
|
|
@ -62,4 +84,4 @@ $base-sidebar-width: 200px;
|
|||
dangerColor: $--color-danger;
|
||||
infoColor: $--color-info;
|
||||
warningColor: $--color-warning;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,237 @@
|
|||
<template>
|
||||
<div class="index-container">
|
||||
<header class="header">
|
||||
<h1>社区水果APP管理系统</h1>
|
||||
<div class="dashboard-container">
|
||||
<header class="dashboard-header">
|
||||
<h1>🍎 欢迎来到水果社区管理系统 🍇</h1>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<section class="stats-section">
|
||||
<bar-chart></bar-chart>
|
||||
<line-chart></line-chart>
|
||||
<main class="dashboard-main">
|
||||
<section class="welcome-section">
|
||||
<h2>今日新鲜事</h2>
|
||||
<p>查看今日水果销售情况，管理订单和库存。</p>
|
||||
<img src="../assets/images/todaynewthing.png" alt="Fresh News Icon" class="fresh-news-icon"/>
|
||||
</section>
|
||||
<section class="image-section">
|
||||
<img src="../assets/images/logo_w.png" alt="Fruits" class="main-image" />
|
||||
<section class="quick-actions">
|
||||
<router-link to="/order-management" class="action-item">
|
||||
<img src="../assets/images/dingdanguanli.jpg" alt="Order Management Icon" />
|
||||
<span>订单管理</span>
|
||||
</router-link>
|
||||
<router-link to="/stock-management" class="action-item">
|
||||
<img src="../assets/images/kucunguanli.png" alt="Stock Management Icon" />
|
||||
<span>库存管理</span>
|
||||
</router-link>
|
||||
<router-link to="/new-arrivals" class="action-item">
|
||||
<img src="../assets/images/newshop.png" alt="New Arrivals Icon" />
|
||||
<span>新品上架</span>
|
||||
</router-link>
|
||||
</section>
|
||||
<section class="statistics-section">
|
||||
<div class="statistic-item">
|
||||
<h3>今日销售额</h3>
|
||||
<p>¥20,000</p>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<h3>今日订单数</h3>
|
||||
<p>1,000</p>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<h3>库存量</h3>
|
||||
<p>6,000</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="calendar-section">
|
||||
<div class="calendar">
|
||||
<h3>工作计划</h3>
|
||||
<div class="calendar-content">
|
||||
<div class="month">11月</div>
|
||||
<div class="event">11月5日，订单管理功能验收。任务，完成“订单管理”模块的功能测试与修复，确保所有关键流程正常运作，并通过内部验收。成果，提交完整的测试报告并获得产品经理批准。</div>
|
||||
<div class="event">11月18日，库存管理文档化。任务，整理并编写《库存管理模块功能说明》及相关操作指南。成果，形成技术文档并存档备案，为后续开发提供参考。</div>
|
||||
</div>
|
||||
<div class="calendar-content">
|
||||
<div class="month">12月</div>
|
||||
<div class="event">12月5日，新品上架功能上线。任务，实现“新品上架”页面设计及编码，优化用户体验。成果，完成内部验收并准备好市场推广所需资源。</div>
|
||||
<div class="event">12月18日，系统性能优化。任务，实施服务器负载优化措施，并进行压力测试。成果，确保平台稳定运行，出具压力测试报告。</div>
|
||||
</div>
|
||||
<div class="calendar-content">
|
||||
<div class="month">1月</div>
|
||||
<div class="event">1月5日，春节特别版规划。任务，策划春节特别版应用更新内容，包括视觉设计和营销策略。成果，制定详细的更新计划并得到管理层认可。</div>
|
||||
<div class="event">1月18日，春节特别版发布。任务，正式推出春节特别版，并启动促销活动。成果，成功发布更新包，监控线上表现，确保服务质量和用户参与度。</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>版权所有 © 2024 社区水果APP管理系统</p>
|
||||
<footer class="dashboard-footer">
|
||||
<p>社区水果APP管理系统</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
// JavaScript逻辑（如有需要）
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fffbea; // 更柔和的背景色
|
||||
font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
||||
|
||||
.dashboard-header {
|
||||
h1 {
|
||||
color: #d9534f;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 0.5em;
|
||||
text-shadow: 2px 2px 5px rgba(255, 204, 203, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.welcome-section {
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
background-color: #ffebcc;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h2 {
|
||||
color: #b94a03;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #8c6e3c;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.fresh-news-icon {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff3cd;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.statistic-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff3cd;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-section {
|
||||
width: 100%;
|
||||
margin-top: 2em;
|
||||
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff3cd;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.calendar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.month {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #b94a03;
|
||||
}
|
||||
|
||||
.event {
|
||||
font-size: 1em;
|
||||
color: #8c6e3c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-footer {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue