添加管理页面样式

src/views/ManagementInterface.vue

@@ -11,7 +11,34 @@
       </div>
     </div>
     <div class="main-content">
-      <div class="home-buttons">
+      <div class="inner-content">
+        <div 
+          class="small-box" 
+          v-if="hasAiCoursePermission"
+          @click="navigateToHome(aiCourseRoutes.home)" 
+          :style="{ backgroundImage: `url(${enlightenment})` }"
+        >
+          <div class="box-logout-btn">AI启蒙课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
+        </div>
+        <div 
+          class="small-box" 
+          v-if="hasHomePermission"
+          @click="navigateToHome(homeRoutes.home)" 
+          :style="{ backgroundImage: `url(${programming})` }"
+        >
+          <div class="box-logout-btn" >AI通识课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
+        </div>
+        <div 
+          class="small-box" 
+          v-if="hasBlocklyPermission"
+          @click="navigateToHome(blocklyRoutes.home)" 
+          :style="{ backgroundImage: `url(${general})` }"
+        >
+          <div class="box-logout-btn">AI编程课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
+        </div>
+      </div>
+      
+      <!-- <div class="home-buttons">
         <el-button 
           v-if="hasHomePermission" 
           type="primary" 
@@ -36,7 +63,7 @@
         >
           AI实验课首页
         </el-button>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -48,6 +75,15 @@ import UserInfoPopover from '@/components/user/UserInfoPopover.vue'
 import { homeRoutes, blocklyRoutes, aiCourseRoutes, managementRoutes } from '@/router'
 import { CONFIG } from '@/utils/roleUtils.js'
 import { Message } from '@/utils/message/Message.js'
+import { DArrowRight } from '@element-plus/icons-vue'
+
+// 背景图
+// 启蒙课
+import enlightenment from '@/assets/manage/enlightenment.png'
+// 编程课
+import programming from '@/assets/manage/programming.png'
+// 通识课
+import general from '@/assets/manage/general.png'
 
 // 平台标题响应式变量
 const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
@@ -114,7 +150,8 @@ window.updateTenantName = (newName) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to bottom, #001169, #8a78d0);
+  background: url('@/assets/manage/manageBG.png') no-repeat center center;
+  background-size: cover;
   display: flex;
   flex-direction: column;
 }
@@ -125,7 +162,62 @@ window.updateTenantName = (newName) => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: rpx(40);
+}
+
+.inner-content{
+  width: 100%;
+  height: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: rpx(30);
+}
+
+.small-box {
+  width: rpx(180);
+  height: rpx(230);
+  background-size: 110%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-origin: border-box; // 确保背景图从边框开始显示
+  background-clip: padding-box; // 确保背景图不会延伸到边框外
+  border-radius: rpx(25);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  position: relative;
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .box-logout-btn {
+    position: absolute;
+    bottom: rpx(0);
+    right: rpx(0);
+    padding: rpx(2) rpx(15);
+    background: linear-gradient(
+      to right,
+      #face03,
+      #fd9f1b
+    );
+    border-top-left-radius: rpx(20);
+    border-bottom-right-radius: rpx(15);
+    color: white;
+    font-size: rpx(12);
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: rpx(3);
+
+    .arrow-icon {
+      font-size: rpx(14);
+    }
+  }
 }
 
 .main-content h2 {