提交10

src/views/index.vue

@@ -9,19 +9,29 @@
         <p>查看今日水果销售情况，管理订单和库存。</p>
       </section>
       <section class="quick-actions">
-        <router-link to="/order-management" class="action-item">
+        <router-link to="/goods" class="action-item" @click.prevent="openModal('../assets/images/dingdanguanli.jpg', '订单管理')">
           <img src="../assets/images/dingdanguanli.jpg" alt="Order Management Icon" />
-          <span>订单管理</span>
+          <span>水果产品</span>
         </router-link>
-        <router-link to="/stock-management" class="action-item">
+        <router-link to="/shopcar" class="action-item" @click.prevent="openModal('../assets/images/kucunguanli.png', '库存管理')">
           <img src="../assets/images/kucunguanli.png" alt="Stock Management Icon" />
-          <span>库存管理</span>
+          <span>购物车</span>
         </router-link>
-        <router-link to="/new-arrivals" class="action-item">
+        <router-link to="/recommend" class="action-item" @click.prevent="openModal('../assets/images/newshop.png', '新品上架')">
           <img src="../assets/images/newshop.png" alt="New Arrivals Icon" />
-          <span>新品上架</span>
+          <span>推荐表</span>
         </router-link>
       </section>
+      <!-- Modal -->
+      <transition name="fade">
+        <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+          <div class="modal-content">
+            <span class="close-btn" @click="closeModal">&times;</span>
+            <img :src="currentImage" :alt="currentTitle" />
+            <p>{{ currentTitle }}</p>
+          </div>
+        </div>
+      </transition>
       <section class="statistics-section">
         <div class="statistic-item">
           <h3>今日销售额</h3>
@@ -64,7 +74,21 @@
 </template>
 
 <script setup>
-// JavaScript逻辑（如有需要）
+import { ref } from 'vue';
+
+const showModal = ref(false);
+const currentImage = ref('');
+const currentTitle = ref('');
+
+function openModal(imageSrc, title) {
+  currentImage.value = imageSrc;
+  currentTitle.value = title;
+  showModal.value = true;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -93,6 +117,7 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
       font-size: 2.5em;
       margin-bottom: 0.5em;
       text-shadow: 2px 2px 5px rgba(255, 204, 203, 0.7);
+      animation: fadeInDown 1s ease-in-out;
     }
   }
 
@@ -127,11 +152,13 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
         color: $primary-color;
         font-size: 1.5em;
         margin-bottom: 0.5em;
+        animation: fadeInUp 1s ease-in-out;
       }
 
       p {
         color: darken($secondary-color, 20%);
         font-size: 1em;
+        animation: fadeInUp 1.2s ease-in-out;
       }
     }
 
@@ -151,20 +178,28 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
         border-radius: 15px;
         background-color: lighten($secondary-color, 5%);
         transition: all 0.3s ease;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
         img {
           width: 80px;
           height: 80px;
           margin-bottom: 10px;
+          transition: transform 0.3s ease;
         }
 
         span {
           font-size: 1.2em;
           font-weight: bold;
+          animation: fadeInUp 1.4s ease-in-out;
         }
 
         &:hover {
           background-color: lighten($secondary-color, 10%);
+          transform: scale(1.05);
+          img {
+            transform: rotateY(360deg);
+          }
         }
       }
     }
@@ -179,19 +214,23 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
         border-radius: 15px;
         background-color: lighten($secondary-color, 5%);
         transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
         h3 {
           font-size: 1.2em;
           margin-bottom: 0.5em;
+          animation: fadeInUp 1.6s ease-in-out;
         }
 
         p {
           font-size: 1.5em;
           font-weight: bold;
+          animation: fadeInUp 1.8s ease-in-out;
         }
 
         &:hover {
           background-color: lighten($secondary-color, 10%);
+          transform: scale(1.05);
         }
       }
     }
@@ -201,12 +240,14 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
         h3 {
           font-size: 1.5em;
           margin-bottom: 1em;
+          animation: fadeInUp 2s ease-in-out;
         }
 
         .calendar-content {
           display: flex;
           flex-direction: column;
           gap: 0.5em;
+          animation: fadeInUp 2.2s ease-in-out;
         }
 
         .month {
@@ -229,6 +270,7 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
     text-align: center;
     font-size: 0.8em;
     color: #888;
+    animation: fadeInUp 2.4s ease-in-out;
   }
 }
 
@@ -246,4 +288,103 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   }
 }
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  max-width: 90%;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  animation: zoomIn 0.5s ease-in-out;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+  }
+
+  p {
+    margin-top: 10px;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 2em;
+    cursor: pointer;
+    color: $primary-color;
+  }
+}
+
+// 动画定义
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
 </style>