feat: 添加引导内容，第一步引导

2025-06-17 17:31:33 +08:00
parent 02df74f35f
commit c0c55fb4f1
15 changed files with 373 additions and 8 deletions
@@ -0,0 +1,9 @@
+{
+    "component": true,
+    "styleIsolation": "isolated",
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "van-icon": "@vant/weapp/icon/index",
+        "toy-button": "/ui/button/button"
+    }
+}
@@ -0,0 +1,60 @@
+.introduction-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 9999;
+
+    &-title {
+        text-align: center;
+        color: rgba(255, 235, 59, 0.95);
+        font-size: 40rpx;
+        font-weight: bold;
+        margin-top: 52rpx;
+    }
+
+    .tip-box {
+        border: 4rpx solid rgba(147, 211, 51, 1);
+    }
+
+    .tip-text {
+        color: rgba(255, 235, 59, 0.95);
+        font-size: 32rpx;
+    }
+
+    .first-step {
+        position: relative;
+
+        .tip-box {
+            position: absolute;
+            top: 18rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 342px;
+            height: 46px;
+            border-radius: 21px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .guide-icon {
+            position: absolute;
+            top: 66rpx;
+            left: 106rpx;
+            width: 22px;
+            height: 39px;
+            opacity: 1;
+        }
+
+        .tip-text {
+            position: absolute;
+            top: 156rpx;
+            left: 110rpx;
+            width: 550rpx;
+            height: 94rpx;
+            line-height: 46rpx;
+        }
+    }
+
+}
@@ -0,0 +1,27 @@
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {},
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+    },
+});
@@ -0,0 +1,15 @@
+<view class="introduction-popup">
+    <view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
+    <view class="first-step">
+        <view class="tip-box"></view>
+        <van-icon
+            class-prefix="toy-icon"
+            name="guide"
+            color="#FFEB3B"
+            custom-class="guide-icon"
+            size="100rpx" />
+        <view class="tip-text">
+            这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
+        </view>
+    </view>
+</view>