```

feat(home): 重构首页界面添加课程导航功能

- 替换原有简单按钮为图片导航界面
- 添加课程目录入口、虚拟实验、学习报告和我的收获模块
- 集成响应式布局和交互功能
- 新增静态资源文件用于界面展示
```

pages/catalog/index.uvue

@@ -1,7 +1,7 @@
 <template>
   <cl-page>
     <Back />
-    <img src="/static/home/2.png" alt="" class="w-full h-full object-cover">
+    <img src="/static/home/2.png" alt="" class="w-full h-full object-cover" />
     <!-- 精灵图动画 -->
     <cl-image src="/static/home/3.gif" mode="heightFix" class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
     <view>

pages/index/home.uvue

@@ -7,9 +7,57 @@ function handleLogin(url) {
 </script>
 <template>
 	<cl-page>
-		<cl-button @tap="handleLogin('/pages/user/login')">登录</cl-button>
-
-		<cl-button @tap="handleLogin('/pages/catalog/index')">物理课</cl-button>
+		<img src="/static/home/11.png" alt="" class="w-full h-full object-cover" />
+		<view class="content">
+			<view class="relative w-[25vw] " @click="handleLogin('/pages/catalog/index')">
+				<img src="/static/home/13.png" alt="" class="w-full object-cover" />
+				<view class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pb-3">
+					<view class="text-2xl font-bold">全部课程</view>
+					<view class="text-[11px] px-2 py-1 rounded-full bg-[#55B58A] text-white font-bold mt-2">点击这里查看上过课程</view>
+				</view>
+			</view>
+			<view class="relative w-[50vw] ">
+				<cl-row>
+					<cl-col :span="12" :pt="{ className: '!p-3' }">
+						<view class="relative w-full ">
+							<img src="/static/home/14.png" alt="" class="w-full object-cover" />
+							<view class="absolute top-4 left-5">
+								<view class="text-2xl font-bold">虚拟实验</view>
+							</view>
+							<view class="absolute bottom-5 right-3">
+								<img src="/static/home/17.png" alt="" class="w-[16vw] object-cover" />
+							</view>
+						</view>
+					</cl-col>
+					<cl-col :span="12" :pt="{ className: '!p-3' }">
+						<view class="relative w-full ">
+							<img src="/static/home/15.png" alt="" class="w-full object-cover" />
+							<view class="absolute top-4 left-5">
+								<view class="text-2xl font-bold">学习报告</view>
+							</view>
+							<view class="absolute bottom-1 right-3">
+								<img src="/static/home/18.png" alt="" class="w-[15vw] object-cover" />
+							</view>
+						</view>
+					</cl-col>
+					<cl-col :span="12" :pt="{ className: '!p-3' }">
+						<view class="relative w-full ">
+							<img src="/static/home/16.png" alt="" class="w-full object-cover" />
+							<view class="absolute top-4 left-5">
+								<view class="text-2xl font-bold">我的收获</view>
+							</view>
+							<view class="absolute bottom-2 right-2">
+								<img src="/static/home/19.png" alt="" class="w-[20vw] object-cover" />
+							</view>
+						</view>
+					</cl-col>
+				</cl-row>
+			</view>
+		</view>
 	</cl-page>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.content {
+	@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[80vw] flex flex-row items-center justify-between gap-4;
+}
+</style>