application [child-coding-miniapp] layout development

apps/child-coding-miniapp/src/pages/home.vue

@@ -1,6 +1,27 @@
 <template>
-  <view class="flex flex-col items-center justify-center space-y-4">
-    Index123
+  <view class="container">
+    <view class="header">
+      <image src="/static/logo.png" class="logo" />
+      <text class="welcome">欢迎来到儿童编程世界！</text>
+    </view>
+    <view class="menu">
+      <view class="menu-item" @click="goToLevels">
+        <view class="icon">🎯</view>
+        <text class="label">选择关卡</text>
+      </view>
+      <view class="menu-item" @click="goToProgress">
+        <view class="icon">📊</view>
+        <text class="label">查看进度</text>
+      </view>
+      <view class="menu-item" @click="goToShare">
+        <view class="icon">🎉</view>
+        <text class="label">分享成就</text>
+      </view>
+      <view class="menu-item" @click="goToGame">
+        <view class="icon">🚀</view>
+        <text class="label">开始游戏</text>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -33,5 +54,81 @@ onLoad(async () => {
   }
 })
 
+const goToLevels = () => {
+  uni.navigateTo({ url: '/pages/levels' })
+}
+
+const goToProgress = () => {
+  uni.navigateTo({ url: '/pages/progress' })
+}
+
+const goToShare = () => {
+  uni.navigateTo({ url: '/pages/share' })
+}
+
+const goToGame = () => {
+  uni.navigateTo({ url: '/pages/game' })
+}
+
 </script>
-<style></style>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+}
+
+.welcome {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+}
+
+.menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.menu-item {
+  background: white;
+  border-radius: 20px;
+  padding: 30px 20px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.menu-item:active {
+  transform: scale(0.95);
+}
+
+.icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.label {
+  font-size: 18px;
+  font-weight: bold;
+  color: #555;
+}
+</style>

apps/child-coding-miniapp/src/pages/share.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { onLoad } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 import { auth, entities } from '@/lib/nvwa'
 import redirectToLogin from '@/custom/redirect-to-login'