完成助教端 页面

src/pages.json

@@ -375,7 +375,12 @@
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#fff",
     "backgroundColor": "#F8F8F8",
-    "orientation": "portrait"
+    "orientation": "portrait",
+    "navigationStyle": "custom",
+    "app-plus": {
+      "background": "#efeff4",
+      "titleView": false
+    }
   },
   "tabBar": {
     "selectedColor": "#447ade",

src/pages/base/service/index.vue

@@ -2,20 +2,26 @@
   <view class="service-page">
     <!-- 1. 顶部 Header -->
     <view class="header-section">
+      <view class="header-gradient"></view>
       <image
         class="header-image"
         src="@/static/base/home/120851x.png"
         mode="aspectFit"
       ></image>
+      <view class="header-overlay">
+        <text class="header-title">智慧校园</text>
+        <text class="header-subtitle">教师服务平台</text>
+      </view>
     </view>
 
     <!-- 2. 主要内容区域 -->
     <view class="main-content">
       <!-- 循环渲染功能分区 -->
-      <view class="section-block" v-for="section in sections" :key="section.id">
+      <view class="section-block" v-for="(section, index) in sections" :key="section.id">
         <view class="section-title">
-          <view class="title-decorator"></view>
+          <view class="title-decorator" :style="{backgroundColor: getSectionColor(index)}"></view>
           <text>{{ section.title }}</text>
+          <view class="title-line"></view>
         </view>
         <view class="section-grid-card">
           <template v-for="item in section.items" :key="item.id">
@@ -24,12 +30,13 @@
               class="grid-item"
               @click="handleGridItemClick(item)"
             >
-              <!-- 根据 item.icon 动态拼接图片路径 -->
+              <view class="grid-icon-container" :style="{backgroundColor: getIconBgColor(index)}">
                 <image
                   class="grid-icon"
                   :src="`/static/base/home/${item.icon}.png`"
                   mode="aspectFit"
                 ></image>
+              </view>
               <text class="grid-text">{{ item.text }}</text>
             </view>
           </template>
@@ -139,13 +146,6 @@ const sections = reactive<Section[]>([
         show: true,
         path: "/pages/view/notice/index",
       },
-      // {
-      //   id: "hs5",
-      //   icon: "message-3-line",
-      //   text: "家校沟通",
-      //   show: true,
-      //   path: "/pages/view/homeSchool/JiaXiaoGouTong",
-      // },
       {
         id: "hs6",
         icon: "filechart2fil",
@@ -184,6 +184,18 @@ const sections = reactive<Section[]>([
   },
 ]);
 
+// 获取分区颜色
+const getSectionColor = (index: number) => {
+  const colors = ['#4F46E5', '#059669', '#DC2626'];
+  return colors[index % colors.length];
+};
+
+// 获取图标背景颜色
+const getIconBgColor = (index: number) => {
+  const colors = ['rgba(79, 70, 229, 0.1)', 'rgba(5, 150, 105, 0.1)', 'rgba(220, 38, 38, 0.1)'];
+  return colors[index % colors.length];
+};
+
 // 处理网格项点击事件
 const handleGridItemClick = (item: GridItem) => {
   console.log("Clicked item:", item);
@@ -197,62 +209,132 @@ const handleGridItemClick = (item: GridItem) => {
 
 <style scoped lang="scss">
 .service-page {
-  background-color: #f4f5f7; // 页面背景色
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
+  position: relative;
 }
 
 // 顶部 Header
 .header-section {
-  background-color: #447ade; // 主题蓝色
+  position: relative;
+  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
   color: #ffffff;
-  overflow: hidden; // 防止图片溢出
+  overflow: hidden;
+  height: 280rpx;
+
+  .header-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    z-index: 1;
+  }
 
   .header-image {
-    width: 100%; // 根据图片实际调整
+    width: 100%;
-    height: 204rpx; // 根据图片实际调整
+    height: 100%;
-    display: block; // 消除图片底部空隙
+    display: block;
+    opacity: 0.3;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    object-fit: cover;
+  }
+
+  .header-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 2;
+
+    .header-title {
+      font-size: 32px;
+      font-weight: bold;
+      color: #ffffff;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .header-subtitle {
+      font-size: 16px;
+      color: rgba(255,255,255,0.9);
+      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    }
   }
 }
 
 // 主要内容区域
 .main-content {
-  padding: 15px;
+  padding: 20px 15px 40px 15px;
   position: relative;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%);
+  border-radius: 20px 20px 0 0;
+  margin-top: -20px;
+  z-index: 3;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
 }
 
 // 功能分区块
 .section-block {
-  margin-bottom: 15px;
+  margin-bottom: 25px;
+  animation: fadeInUp 0.6s ease-out;
+
+  &:nth-child(1) { animation-delay: 0.1s; }
+  &:nth-child(2) { animation-delay: 0.2s; }
+  &:nth-child(3) { animation-delay: 0.3s; }
 
   .section-title {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
-    padding-left: 5px; // 微调标题位置
+    padding-left: 5px;
+    position: relative;
 
     .title-decorator {
-      width: 6px;
+      width: 8px;
-      height: 6px;
+      height: 8px;
-      background-color: #447ade;
       border-radius: 50%;
-      margin-right: 8px;
+      margin-right: 12px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     }
 
     text {
-      font-size: 16px;
+      font-size: 20px;
-      font-weight: bold;
+      font-weight: 600;
-      color: #333;
+      color: #1f2937;
+      letter-spacing: 0.5px;
+    }
+
+    .title-line {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(to right, rgba(156, 163, 175, 0.3), transparent);
+      margin-left: 15px;
     }
   }
 
   .section-grid-card {
-    background-color: #ffffff;
+    background: #ffffff;
-    border-radius: 8px;
+    border-radius: 16px;
-    padding: 15px 5px; // 稍微减少左右 padding，让网格项间距更明显
+    padding: 20px 15px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(255,255,255,0.8);
+    backdrop-filter: blur(10px);
     display: grid;
-    grid-template-columns: repeat(4, 1fr); // 每行 4 列
+    grid-template-columns: repeat(3, 1fr);
-    gap: 15px 5px; // 行间距 15px，列间距 5px
+    gap: 20px 15px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 
@@ -263,19 +345,88 @@ const handleGridItemClick = (item: GridItem) => {
   align-items: center;
   justify-content: center;
   text-align: center;
-  cursor: pointer; // 提示可点击
+  cursor: pointer;
+  padding: 10px 5px;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+
+  &:hover {
+    transform: translateY(-3px) scale(1.05);
+    background: rgba(79, 70, 229, 0.05);
+  }
+
+  &:active {
+    transform: translateY(-1px) scale(1.02);
+  }
+
+  .grid-icon-container {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 
     .grid-icon {
-    width: 32px; // 图标尺寸
+      width: 24px;
-    height: 32px; // 图标尺寸
+      height: 24px;
-    margin-bottom: 8px;
+      transition: all 0.3s ease;
+    }
   }
 
   .grid-text {
-    font-size: 12px;
+    font-size: 14px;
-    color: #666;
+    color: #4b5563;
-    // 可能需要限制行数或处理换行
+    font-weight: 500;
     line-height: 1.3;
+    transition: color 0.3s ease;
+  }
+
+  &:hover .grid-text {
+    color: #1f2937;
+  }
+
+  &:hover .grid-icon-container {
+    transform: scale(1.1);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+  }
+}
+
+// 动画定义
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 响应式优化
+@media (max-width: 375px) {
+  .section-grid-card {
+    gap: 15px 8px;
+    padding: 15px 10px;
+  }
+  
+  .grid-item {
+    padding: 8px 3px;
+  }
+  
+  .grid-icon-container {
+    width: 42px;
+    height: 42px;
+    
+    .grid-icon {
+      width: 20px;
+      height: 20px;
+    }
   }
 }
 </style>