application [child-coding-miniapp] view page [pages/index] development

2026-01-05 06:46:45 +00:00
parent a533dd276c
commit 7441e65b42
5 changed files with 1153 additions and 0 deletions
--- a/apps/child-coding-miniapp/src/pages/index.vue
+++ b/apps/child-coding-miniapp/src/pages/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <view class="container">
+    <view class="header">
+      <text class="title">儿童编程游戏</text>
+      <text class="subtitle">通过拖拽代码块学习编程！</text>
+    </view>
+    <view class="content">
+      <button class="start-btn" @click="startGame">开始游戏</button>
+      <view class="features">
+        <view class="feature">
+          <text>关卡挑战</text>
+        </view>
+        <view class="feature">
+          <text>成就系统</text>
+        </view>
+        <view class="feature">
+          <text>分享朋友</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const startGame = () => {
+  uni.navigateTo({ url: '/pages/home' })
+}
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.title {
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.subtitle {
+  font-size: 24px;
+}
+
+.start-btn {
+  background: #ff6b6b;
+  color: white;
+  border: none;
+  padding: 20px 40px;
+  font-size: 24px;
+  border-radius: 50px;
+  margin-bottom: 50px;
+}
+
+.features {
+  display: flex;
+  gap: 20px;
+}
+
+.feature {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  border-radius: 20px;
+  text-align: center;
+}
+</style>