首页

front/src/views/Home.vue

@@ -3,7 +3,6 @@
     <Header />
     <div class="content-container">
       <router-view v-if="$route.path !== '/home'"></router-view>
-      <!-- 首页内容，仅在路径为 /home 时显示 -->
       <div v-else class="home-content">
         <!-- 轮播图区域 -->
         <div class="carousel-section">
@@ -50,7 +49,6 @@ import Header from '../components/Header.vue';
 import { ref } from 'vue';
 import { Van, Search, Service, Bell } from '@element-plus/icons-vue';
 
-// 轮播图数据
 const carouselImages = ref([
   { id: 1, url: 'src/assets/sf1.jpg' },
   { id: 2, url: 'src/assets/sf2.jpg' },
@@ -62,7 +60,6 @@ const carouselImages = ref([
   { id: 8, url: 'src/assets/sf8.jpg' },
 ]);
 
-// 公告数据
 const notices = ref([
   { id: 1, title: '关于春节期间快递服务安排的通知', date: '2024-02-01' },
   { id: 2, title: '服务升级公告：新增智能快递柜服务', date: '2024-01-28' },
@@ -72,6 +69,7 @@ const notices = ref([
 </script>
 
 <style scoped>
+/* 容器样式 */
 .home-container {
   width: 100%;
   height: 100vh;
@@ -80,6 +78,7 @@ const notices = ref([
   position: fixed;
   top: 0;
   left: 0;
+  background-color: #f0f4f8; /* 增加背景色柔和度 */
 }
 
 .content-container {
@@ -87,7 +86,7 @@ const notices = ref([
   margin-left: 220px;
   height: 100vh;
   overflow: hidden;
-  background-color: #f0f2f5;
+  background-color: #f9fbfc; /* 区别背景层次 */
   position: relative;
 }
 
@@ -107,12 +106,20 @@ const notices = ref([
   margin: 0 auto;
   max-width: 1200px;
   margin-bottom: 30px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
 .carousel-image {
   width: 100%;
   height: 100%;
   border-radius: 8px;
+  transition: all 0.3s ease-in-out;
+}
+
+.carousel-image:hover {
+  transform: scale(1.05);
 }
 
 /* 快捷功能区域样式 */
@@ -120,10 +127,10 @@ const notices = ref([
   display: flex;
   justify-content: space-around;
   margin: 30px auto;
-  padding: 20px;
+  padding: 20px 30px;
   background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   max-width: 1200px;
 }
 
@@ -134,48 +141,60 @@ const notices = ref([
   cursor: pointer;
   padding: 20px;
   border-radius: 8px;
-  transition: all 0.3s;
+  transition: all 0.3s ease-in-out;
+  background: linear-gradient(135deg, #fdfbfb, #ebedee);
 }
 
 .quick-item:hover {
-  background: #f5f7fa;
+  background: linear-gradient(135deg, #ebf1f5, #d8dde2);
   transform: translateY(-5px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
-.quick-item .el-icon {
-  font-size: 40px;
-  color: #409EFF;
-  margin-bottom: 10px;
+.quick-item span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-top: 10px;
 }
 
 /* 公告区域样式 */
 .notice-section {
   background: white;
   padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   max-width: 1200px;
   margin: 0 auto;
+  transition: all 0.3s ease-in-out;
 }
 
 .notice-section h3 {
   display: flex;
   align-items: center;
   gap: 8px;
+  color: #333;
+  font-weight: 600;
   margin-bottom: 15px;
-  color: #303133;
+}
+
+.notice-section:hover {
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
 }
 
 .notice-item {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
+  padding: 10px 15px;
   border-bottom: 1px solid #ebeef5;
   cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 8px;
 }
 
 .notice-item:hover {
-  background: #f5f7fa;
+  background: #f9f9fb;
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
 }
 
 .notice-date {
@@ -192,10 +211,26 @@ const notices = ref([
   .home-content {
     width: calc(100% - 64px);
   }
-  
+
   .quick-access {
     flex-direction: column;
     gap: 15px;
   }
 }
-</style>
+
+/* 自定义滚动条 */
+.el-scrollbar__wrap::-webkit-scrollbar {
+  width: 6px;
+  background-color: #f1f1f1;
+}
+
+.el-scrollbar__wrap::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 3px;
+}
+
+.el-scrollbar__wrap:hover::-webkit-scrollbar-thumb {
+  background-color: #a1a1a1;
+}
+</style>
+