feat:首页输入框、文字卡片

miniprogram/pages/index/index.json

@@ -1,7 +1,11 @@
 {
-    "navigationBarTitleText": "首页",
-    "navigationBarBackgroundColor": "#d2e7d8",
+    "navigationBarTitleText": "涂鸦丫",
+    "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
-    "backgroundColor": "#e8eddb",
-    "enablePullDownRefresh": false
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "word-input": "../../components/word-input/word-input",
+        "word-card": "../../components/word-card/word-card"
+    }
 }

miniprogram/pages/index/index.less

@@ -1,33 +1,38 @@
-/**index.less**/
 page {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
+    background-color: #F6F6F6;
 }
 
-.scroll-view {
-    flex: 1;
-    overflow-y: hidden;
-}
-
-.card {
-    margin: 10px;
-    padding: 10px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: calc(33.33% - 20px);
-    /* Adjust width for three cards per row */
+.page-container {
+    background-color: #F6F6F6;
+    padding: 24rpx;
     box-sizing: border-box;
-    /* Ensure padding and margin are included in the width */
-    display: inline-block;
-    /* Allow cards to sit next to each other */
-    vertical-align: top;
-    /* Align cards to the top */
 
-    .card-title {
-        font-size: 18px;
-        font-weight: bold;
-        color: #333;
+    .wrapper {
+        background-color: #ffffff;
+        border-radius: 20rpx;
+        padding: 30rpx;
+        box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
+        margin: 30rpx 0;
+        display: flex;
+        flex-direction: column;
+
+        .wrapper-title {
+            font-size: 32rpx;
+            color: #141414;
+            margin-bottom: 30rpx;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+
+    .word-card-box {
+        margin-top: 30rpx;
+    }
+
+    .word-card-list {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
     }
 }

miniprogram/pages/index/index.ts

@@ -1,28 +1,5 @@
 Page({
-    data: {
-        cards: [
-            {
-                key: 0,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 1,
-                title: '文本绘制2',
-                url: '/demoPages/textPaint2/textPaint',
-            },
-            {
-                key: 2,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 3,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-        ],
-    },
+    data: {},
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;

miniprogram/pages/index/index.wxml

@@ -1,12 +1,19 @@
-<!--index.wxml-->
-<scroll-view class="scroll-view" scroll-y type="list">
-    <view 
-        class="card" 
-        wx:for="{{cards}}"
-        wx:for-item="card"
-        wx:key="*this"
-        bindtap="tapCard" 
-        data-url="{{card.url}}">
-        <view class="card-title">{{card.title}}</view>
+<scroll-view class="page-container" scroll-y type="list">
+    <view class="wrapper">
+        <text class="wrapper-title">设置文字和颜色</text>
+        <word-input />
+        <view class="word-card-box">
+            <view class="word-card-list">
+                <word-card />
+                <word-card />
+            </view>
+            <view class="word-card-list">
+                <word-card />
+                <word-card />
+            </view>
+        </view>
+    </view>
+    <view class="wrapper">
+        <text class="wrapper-title">预览打印效果</text>
     </view>
 </scroll-view>