From 419818eb246d8223fdc7dd6c04265aa66cbb04cd Mon Sep 17 00:00:00 2001 From: joey Date: Fri, 30 May 2025 20:49:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=A6=96=E9=A1=B5=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=A1=86=E3=80=81=E6=96=87=E5=AD=97=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigation-bar/navigation-bar.json | 8 +- .../navigation-bar/navigation-bar.less | 128 +++++------ .../navigation-bar/navigation-bar.ts | 199 +++++++++--------- .../navigation-bar/navigation-bar.wxml | 113 +++++----- .../components/word-card/word-card.json | 7 + .../components/word-card/word-card.less | 43 ++++ miniprogram/components/word-card/word-card.ts | 27 +++ .../components/word-card/word-card.wxml | 9 + .../components/word-input/word-input.json | 7 + .../components/word-input/word-input.less | 22 ++ .../components/word-input/word-input.ts | 27 +++ .../components/word-input/word-input.wxml | 9 + miniprogram/constants/index.ts | 0 miniprogram/pages/demoIndex/index.json | 7 + miniprogram/pages/demoIndex/index.less | 33 +++ miniprogram/pages/demoIndex/index.ts | 32 +++ miniprogram/pages/demoIndex/index.wxml | 12 ++ miniprogram/pages/index/index.json | 12 +- miniprogram/pages/index/index.less | 57 ++--- miniprogram/pages/index/index.ts | 25 +-- miniprogram/pages/index/index.wxml | 27 ++- miniprogram/ui/README.md | 1 + 22 files changed, 517 insertions(+), 288 deletions(-) create mode 100644 miniprogram/components/word-card/word-card.json create mode 100644 miniprogram/components/word-card/word-card.less create mode 100644 miniprogram/components/word-card/word-card.ts create mode 100644 miniprogram/components/word-card/word-card.wxml create mode 100644 miniprogram/components/word-input/word-input.json create mode 100644 miniprogram/components/word-input/word-input.less create mode 100644 miniprogram/components/word-input/word-input.ts create mode 100644 miniprogram/components/word-input/word-input.wxml create mode 100644 miniprogram/constants/index.ts create mode 100644 miniprogram/pages/demoIndex/index.json create mode 100644 miniprogram/pages/demoIndex/index.less create mode 100644 miniprogram/pages/demoIndex/index.ts create mode 100644 miniprogram/pages/demoIndex/index.wxml create mode 100644 miniprogram/ui/README.md diff --git a/miniprogram/components/navigation-bar/navigation-bar.json b/miniprogram/components/navigation-bar/navigation-bar.json index 4a20f17..278aeab 100644 --- a/miniprogram/components/navigation-bar/navigation-bar.json +++ b/miniprogram/components/navigation-bar/navigation-bar.json @@ -1,5 +1,5 @@ { - "component": true, - "styleIsolation": "apply-shared", - "usingComponents": {} -} \ No newline at end of file + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": {} +} diff --git a/miniprogram/components/navigation-bar/navigation-bar.less b/miniprogram/components/navigation-bar/navigation-bar.less index 8bd379e..eff1536 100644 --- a/miniprogram/components/navigation-bar/navigation-bar.less +++ b/miniprogram/components/navigation-bar/navigation-bar.less @@ -1,96 +1,98 @@ .weui-navigation-bar { - --weui-FG-0:rgba(0,0,0,.9); - --height: 44px; - --left: 16px; + --weui-FG-0: rgba(0, 0, 0, .9); + --height: 44px; + --left: 16px; } + .weui-navigation-bar .android { - --height: 48px; + --height: 48px; } .weui-navigation-bar { - overflow: hidden; - color: var(--weui-FG-0); - flex: none; + overflow: hidden; + color: var(--weui-FG-0); + flex: none; } .weui-navigation-bar__inner { - position: relative; - top: 0; - left: 0; - height: calc(var(--height) + env(safe-area-inset-top)); - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding-top: env(safe-area-inset-top); - width: 100%; - box-sizing: border-box; + position: relative; + top: 0; + left: 0; + height: calc(var(--height) + env(safe-area-inset-top)); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding-top: env(safe-area-inset-top); + width: 100%; + box-sizing: border-box; } .weui-navigation-bar__left { - position: relative; - padding-left: var(--left); - display: flex; - flex-direction: row; - align-items: flex-start; - height: 100%; - box-sizing: border-box; + position: relative; + padding-left: var(--left); + display: flex; + flex-direction: row; + align-items: flex-start; + height: 100%; + box-sizing: border-box; } .weui-navigation-bar__btn_goback_wrapper { - padding: 11px 18px 11px 16px; - margin: -11px -18px -11px -16px; + padding: 11px 18px 11px 16px; + margin: -11px -18px -11px -16px; } .weui-navigation-bar__btn_goback_wrapper.weui-active { - opacity: 0.5; + opacity: 0.5; } .weui-navigation-bar__btn_goback { - font-size: 12px; - width: 12px; - height: 24px; - -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%; - mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--weui-FG-0); + font-size: 12px; + width: 12px; + height: 24px; + -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%; + mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--weui-FG-0); } .weui-navigation-bar__center { - font-size: 17px; - text-align: center; - position: relative; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - font-weight: bold; - flex: 1; - height: 100%; + font-size: 17px; + text-align: center; + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-weight: bold; + flex: 1; + height: 100%; } .weui-navigation-bar__loading { - margin-right: 4px; - align-items: center; + margin-right: 4px; + align-items: center; } .weui-loading { - font-size: 16px; - width: 16px; - height: 16px; - display: block; - background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat; - background-size: 100%; - margin-left: 0; - animation: loading linear infinite 1s; + font-size: 16px; + width: 16px; + height: 16px; + display: block; + background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat; + background-size: 100%; + margin-left: 0; + animation: loading linear infinite 1s; } @keyframes loading { - from { - transform: rotate(0); - } - to { - transform: rotate(360deg); - } -} + from { + transform: rotate(0); + } + + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/miniprogram/components/navigation-bar/navigation-bar.ts b/miniprogram/components/navigation-bar/navigation-bar.ts index 4466e8e..464c928 100644 --- a/miniprogram/components/navigation-bar/navigation-bar.ts +++ b/miniprogram/components/navigation-bar/navigation-bar.ts @@ -1,105 +1,106 @@ Component({ - options: { - multipleSlots: true // 在组件定义时的选项中启用多slot支持 - }, - /** - * 组件的属性列表 - */ - properties: { - extClass: { - type: String, - value: '' + options: { + multipleSlots: true, // 在组件定义时的选项中启用多slot支持 }, - title: { - type: String, - value: '' + /** + * 组件的属性列表 + */ + properties: { + extClass: { + type: String, + value: '', + }, + title: { + type: String, + value: '', + }, + background: { + type: String, + value: '', + }, + color: { + type: String, + value: '', + }, + back: { + type: Boolean, + value: true, + }, + loading: { + type: Boolean, + value: false, + }, + homeButton: { + type: Boolean, + value: false, + }, + animated: { + // 显示隐藏的时候opacity动画效果 + type: Boolean, + value: true, + }, + show: { + // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在 + type: Boolean, + value: true, + observer: '_showChange', + }, + // back为true的时候，返回的页面深度 + delta: { + type: Number, + value: 1, + }, }, - background: { - type: String, - value: '' + /** + * 组件的初始数据 + */ + data: { + displayStyle: '', }, - color: { - type: String, - value: '' + lifetimes: { + attached() { + const rect = wx.getMenuButtonBoundingClientRect(); + wx.getSystemInfo({ + success: (res) => { + const isAndroid = res.platform === 'android'; + const isDevtools = res.platform === 'devtools'; + this.setData({ + ios: !isAndroid, + innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`, + leftWidth: `width: ${res.windowWidth - rect.left}px`, + safeAreaTop: + isDevtools || isAndroid + ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` + : ``, + }); + }, + }); + }, }, - back: { - type: Boolean, - value: true + /** + * 组件的方法列表 + */ + methods: { + _showChange(show: boolean) { + const animated = this.data.animated; + let displayStyle = ''; + if (animated) { + displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`; + } else { + displayStyle = `display: ${show ? '' : 'none'}`; + } + this.setData({ + displayStyle, + }); + }, + back() { + const data = this.data; + if (data.delta) { + wx.navigateBack({ + delta: data.delta, + }); + } + this.triggerEvent('back', { delta: data.delta }, {}); + }, }, - loading: { - type: Boolean, - value: false - }, - homeButton: { - type: Boolean, - value: false, - }, - animated: { - // 显示隐藏的时候opacity动画效果 - type: Boolean, - value: true - }, - show: { - // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在 - type: Boolean, - value: true, - observer: '_showChange' - }, - // back为true的时候，返回的页面深度 - delta: { - type: Number, - value: 1 - }, - }, - /** - * 组件的初始数据 - */ - data: { - displayStyle: '' - }, - lifetimes: { - attached() { - const rect = wx.getMenuButtonBoundingClientRect() - wx.getSystemInfo({ - success: (res) => { - const isAndroid = res.platform === 'android' - const isDevtools = res.platform === 'devtools' - this.setData({ - ios: !isAndroid, - innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`, - leftWidth: `width: ${res.windowWidth - rect.left }px`, - safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : `` - }) - } - }) - }, - }, - /** - * 组件的方法列表 - */ - methods: { - _showChange(show: boolean) { - const animated = this.data.animated - let displayStyle = '' - if (animated) { - displayStyle = `opacity: ${ - show ? '1' : '0' - };transition:opacity 0.5s;` - } else { - displayStyle = `display: ${show ? '' : 'none'}` - } - this.setData({ - displayStyle - }) - }, - back() { - const data = this.data - if (data.delta) { - wx.navigateBack({ - delta: data.delta - }) - } - this.triggerEvent('back', { delta: data.delta }, {}) - } - }, -}) +}); diff --git a/miniprogram/components/navigation-bar/navigation-bar.wxml b/miniprogram/components/navigation-bar/navigation-bar.wxml index be9a663..c6075f9 100644 --- a/miniprogram/components/navigation-bar/navigation-bar.wxml +++ b/miniprogram/components/navigation-bar/navigation-bar.wxml @@ -1,64 +1,61 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + - - - - - - - - - - - - - - - + + {{title}} + + + + + - - - - - - - {{title}} - - - - + + + + - - - - - - diff --git a/miniprogram/components/word-card/word-card.json b/miniprogram/components/word-card/word-card.json new file mode 100644 index 0000000..44daf20 --- /dev/null +++ b/miniprogram/components/word-card/word-card.json @@ -0,0 +1,7 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } +} diff --git a/miniprogram/components/word-card/word-card.less b/miniprogram/components/word-card/word-card.less new file mode 100644 index 0000000..f82c59b --- /dev/null +++ b/miniprogram/components/word-card/word-card.less @@ -0,0 +1,43 @@ +.word-card { + display: flex; + flex-direction: row; + // width: 324rpx; + height: 100rpx; + border-radius: 16rpx; + background-color: #EEFCFC; + align-items: center; + box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35); + + .color-box { + width: 60rpx; + height: 60rpx; + border-radius: 50%; + background-color: #ff0000; + margin-left: 20rpx; + border: 1rpx solid #141414; + } + + .word-box { + margin: 0 24rpx; + display: flex; + justify-content: center; + align-items: center; + width: 82rpx; + height: 52rpx; + border: 1rpx solid #000; + background-color: #fff; + + .word-content { + font-size: 28rpx; + color: #141414; + text-align: center; + + } + } + + .delete-icon { + padding: 20rpx; + margin-right: 8rpx; + color: #141414; + } +} \ No newline at end of file diff --git a/miniprogram/components/word-card/word-card.ts b/miniprogram/components/word-card/word-card.ts new file mode 100644 index 0000000..20d417b --- /dev/null +++ b/miniprogram/components/word-card/word-card.ts @@ -0,0 +1,27 @@ +Component({ + options: { + // multipleSlots: true, // 在组件定义时的选项中启用多slot支持 + }, + /** + * 组件的属性列表 + */ + properties: { + extClass: { + type: String, + value: '', + }, + }, + /** + * 组件的初始数据 + */ + data: { + displayStyle: '', + }, + lifetimes: { + attached() {}, + }, + /** + * 组件的方法列表 + */ + methods: {}, +}); diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml new file mode 100644 index 0000000..515af29 --- /dev/null +++ b/miniprogram/components/word-card/word-card.wxml @@ -0,0 +1,9 @@ + + + + 文 + + + + + diff --git a/miniprogram/components/word-input/word-input.json b/miniprogram/components/word-input/word-input.json new file mode 100644 index 0000000..44daf20 --- /dev/null +++ b/miniprogram/components/word-input/word-input.json @@ -0,0 +1,7 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } +} diff --git a/miniprogram/components/word-input/word-input.less b/miniprogram/components/word-input/word-input.less new file mode 100644 index 0000000..c47e8b9 --- /dev/null +++ b/miniprogram/components/word-input/word-input.less @@ -0,0 +1,22 @@ +.word-input-container { + display: flex; + flex-direction: row; + width: 100%; + border-radius: 20rpx; + background-color: #f8f8f8; + align-items: center; + + .word-input-icon { + // border: 1px solid red; + padding: 22rpx; + } + + .word-input { + flex: 1; + height: 92rpx; + padding-right: 20rpx; + // padding: 0 20rpx 0 10rpx; + font-size: 28rpx; + line-height: 92rpx; + } +} \ No newline at end of file diff --git a/miniprogram/components/word-input/word-input.ts b/miniprogram/components/word-input/word-input.ts new file mode 100644 index 0000000..20d417b --- /dev/null +++ b/miniprogram/components/word-input/word-input.ts @@ -0,0 +1,27 @@ +Component({ + options: { + // multipleSlots: true, // 在组件定义时的选项中启用多slot支持 + }, + /** + * 组件的属性列表 + */ + properties: { + extClass: { + type: String, + value: '', + }, + }, + /** + * 组件的初始数据 + */ + data: { + displayStyle: '', + }, + lifetimes: { + attached() {}, + }, + /** + * 组件的方法列表 + */ + methods: {}, +}); diff --git a/miniprogram/components/word-input/word-input.wxml b/miniprogram/components/word-input/word-input.wxml new file mode 100644 index 0000000..9442357 --- /dev/null +++ b/miniprogram/components/word-input/word-input.wxml @@ -0,0 +1,9 @@ + + + + diff --git a/miniprogram/constants/index.ts b/miniprogram/constants/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/miniprogram/pages/demoIndex/index.json b/miniprogram/pages/demoIndex/index.json new file mode 100644 index 0000000..76f0ed5 --- /dev/null +++ b/miniprogram/pages/demoIndex/index.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "首页", + "navigationBarBackgroundColor": "#d2e7d8", + "homeButton": true, + "backgroundColor": "#e8eddb", + "enablePullDownRefresh": false +} diff --git a/miniprogram/pages/demoIndex/index.less b/miniprogram/pages/demoIndex/index.less new file mode 100644 index 0000000..51c5884 --- /dev/null +++ b/miniprogram/pages/demoIndex/index.less @@ -0,0 +1,33 @@ +/**index.less**/ +page { + height: 100vh; + display: flex; + flex-direction: column; +} + +.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 */ + 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; + } +} \ No newline at end of file diff --git a/miniprogram/pages/demoIndex/index.ts b/miniprogram/pages/demoIndex/index.ts new file mode 100644 index 0000000..74d58be --- /dev/null +++ b/miniprogram/pages/demoIndex/index.ts @@ -0,0 +1,32 @@ +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', + }, + ], + }, + + tapCard(e: WechatMiniprogram.TouchEvent) { + const { url } = e.currentTarget.dataset; + console.log('navigateTo url:', url); + wx.navigateTo({ url }); + }, +}); diff --git a/miniprogram/pages/demoIndex/index.wxml b/miniprogram/pages/demoIndex/index.wxml new file mode 100644 index 0000000..af88b65 --- /dev/null +++ b/miniprogram/pages/demoIndex/index.wxml @@ -0,0 +1,12 @@ + + + + {{card.title}} + + diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json index 76f0ed5..e5c0ea9 100644 --- a/miniprogram/pages/index/index.json +++ b/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" + } } diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less index 51c5884..5333d39 100644 --- a/miniprogram/pages/index/index.less +++ b/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; } } \ No newline at end of file diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 74d58be..bb1ff89 100644 --- a/miniprogram/pages/index/index.ts +++ b/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; diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index af88b65..2eb7828 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -1,12 +1,19 @@ - - - - {{card.title}} + + + 设置文字和颜色 + + + + + + + + + + + + + + 预览打印效果 diff --git a/miniprogram/ui/README.md b/miniprogram/ui/README.md new file mode 100644 index 0000000..a30c0e4 --- /dev/null +++ b/miniprogram/ui/README.md @@ -0,0 +1 @@ +# ui 目录用于放UI类组件