joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:重构按钮和icon组件

Browse Source
This commit is contained in:
R524809
2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/assets/fonts/demo.css
+242 -245
View File
@@ -1,176 +1,171 @@
/* Logo 字体 */
@font-face {
font-family: 'iconfont logo';
/* src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); */
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: 'iconfont logo';
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition:
font-size 0.25s linear,
width 0.25s linear;
-moz-transition:
font-size 0.25s linear,
width 0.25s linear;
transition:
font-size 0.25s linear,
width 0.25s linear;
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
@@ -178,139 +173,139 @@
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
margin: 1em 0;
}
.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
width: 80%;
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul > li {
list-style: circle;
.markdown ul>li {
list-style: circle;
}
.markdown > ul li,
.markdown blockquote ul > li {
margin-left: 20px;
padding-left: 4px;
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown > ul li p,
.markdown > ol li p {
margin: 0.6em 0;
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol > li {
list-style: decimal;
.markdown ol>li {
list-style: decimal;
}
.markdown > ol li,
.markdown blockquote ol > li {
margin-left: 20px;
padding-left: 4px;
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
font-weight: 600;
}
.markdown > table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown > table th {
white-space: nowrap;
color: #333;
font-weight: 600;
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown > table th,
.markdown > table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown > table th {
background: #f7f7f7;
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
color: #ccc;
}
.markdown h1:hover .anchor,
@@ -319,26 +314,27 @@
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
opacity: 1;
display: inline-block;
}
.markdown > br,
.markdown > p > br {
clear: both;
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
color: #969896;
}
.hljs-string,
@@ -347,29 +343,29 @@
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
color: #63a35c;
}
.hljs-tag {
color: #333333;
color: #333333;
}
.hljs-title,
@@ -378,21 +374,21 @@
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
text-decoration: underline;
}
/* 代码高亮 */
@@ -403,84 +399,85 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*='language-'],
pre[class*='language-'] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
text-shadow: none;
background: #b3d4fc;
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f2f0;
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: slategray;
}
.token.punctuation {
color: #999;
color: #999;
}
.namespace {
opacity: 0.7;
opacity: .7;
}
.token.property,
@@ -490,7 +487,7 @@ pre[class*='language-'] {
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
color: #905;
}
.token.selector,
@@ -499,7 +496,7 @@ pre[class*='language-'] {
.token.char,
.token.builtin,
.token.inserted {
color: #690;
color: #690;
}
.token.operator,
@@ -507,36 +504,36 @@ pre[class*='language-'] {
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
miniprogram/assets/fonts/demo_index.html
+600 -2
View File
File diff suppressed because one or more lines are too long
miniprogram/assets/fonts/iconfont.css
-91
View File
File diff suppressed because one or more lines are too long
miniprogram/assets/fonts/iconfont.js
+1 -1
View File
File diff suppressed because one or more lines are too long
miniprogram/assets/fonts/iconfont.json
+182
View File
@@ -5,6 +5,188 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "47282109",
"name": "setting",
"font_class": "setting",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "47282098",
"name": "round-star-o",
"font_class": "round-star-o",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "47281642",
"name": "plus",
"font_class": "plus",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "47281605",
"name": "star",
"font_class": "star",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "47281606",
"name": "minus",
"font_class": "minus",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "47281607",
"name": "round-star",
"font_class": "round-star",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "47281608",
"name": "star-o",
"font_class": "star-o",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "47281609",
"name": "about-o",
"font_class": "about-o",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "47281610",
"name": "feedback-o",
"font_class": "feedback-o",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "47281611",
"name": "feedback",
"font_class": "feedback",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "47281612",
"name": "about",
"font_class": "about",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "47281613",
"name": "heart-o",
"font_class": "heart-o",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "47281614",
"name": "heart",
"font_class": "heart",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "47281615",
"name": "print",
"font_class": "print",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "47281616",
"name": "family",
"font_class": "family",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "47281617",
"name": "search-plus",
"font_class": "search-plus",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "47281618",
"name": "search",
"font_class": "search",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "47281619",
"name": "clock-o",
"font_class": "clock-o",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "47281620",
"name": "clock",
"font_class": "clock",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "47281621",
"name": "search-minus",
"font_class": "search-minus",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "47279508",
"name": "setting-o",
"font_class": "setting-o",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "47278437",
"name": "line-share",
"font_class": "line-share",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "39768497",
"name": "arrow-up",
"font_class": "arrow-up",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "39768498",
"name": "arrow-right",
"font_class": "arrow-right",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "39768499",
"name": "arrow-down",
"font_class": "arrow-down",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "39768501",
"name": "arrow-left",
"font_class": "arrow-left",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "782338",
"name": "success",
miniprogram/assets/fonts/iconfont.less
+106 -6
View File
File diff suppressed because one or more lines are too long
miniprogram/assets/fonts/iconfont.ttf
BIN
View File
Binary file not shown.
miniprogram/assets/fonts/iconfont.woff
BIN
View File
Binary file not shown.
miniprogram/assets/fonts/iconfontV5.less
+91
View File
File diff suppressed because one or more lines are too long
miniprogram/components/color-picker/color-picker.json
+1 -1
View File
@@ -3,6 +3,6 @@
"styleIsolation": "isolated",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"toy-button": "/ui/button/button"
"toy-button": "/toy/button-v2/button"
}
}
miniprogram/components/introduction-popup/introduction-popup.json
+2 -2
View File
@@ -3,7 +3,7 @@
"styleIsolation": "isolated",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-icon": "@vant/weapp/icon/index",
"toy-button": "/ui/button/button"
"toy-icon": "/toy/icon/icon",
"toy-button": "/toy/button-v2/button"
}
}
miniprogram/components/introduction-popup/introduction-popup.wxml
+1 -1
View File
@@ -11,7 +11,7 @@
</toy-button>
</view>
<view class="step-box {{currentStep}}-step {{platform}}">
<van-icon
<toy-icon
class-prefix="toy-icon"
name="guide"
color="#FFEB3B"
miniprogram/components/math-bottom-buttons/math-bottom-buttons.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"component": true,
"usingComponents": {
"toy-button": "../../ui/button/button"
"toy-button": "../../toy/button-v2/button"
}
}
miniprogram/components/math-type-selector/math-type-selector.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"component": true,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index"
}
}
miniprogram/components/shape-card/shape-card.json
+1 -1
View File
@@ -2,6 +2,6 @@
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
"toy-icon": "/toy/icon/icon"
}
}
miniprogram/components/shape-card/shape-card.wxml
+1 -1
View File
@@ -11,7 +11,7 @@
bind:tap="onShapeTap" />
</view>
<view class="delete-icon" bind:tap="onDelete">
<van-icon
<toy-icon
class-prefix="toy-icon"
name="dustbin-o"
custom-class="delete-icon-inner"
miniprogram/components/shape-picker/shape-picker.json
+1 -1
View File
@@ -3,6 +3,6 @@
"styleIsolation": "isolated",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"toy-button": "/ui/button/button"
"toy-button": "/toy/button-v2/button"
}
}
miniprogram/components/word-card/word-card.json
+1 -1
View File
@@ -2,6 +2,6 @@
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
"toy-icon": "/toy/icon/icon"
}
}
miniprogram/components/word-card/word-card.wxml
+1 -1
View File
@@ -8,7 +8,7 @@
<text class="word-content">{{word}}</text>
</view>
<view class="delete-icon" bindtap="onDelete">
<van-icon
<toy-icon
class-prefix="toy-icon"
name="dustbin-o"
custom-class="delete-icon-inner"
miniprogram/components/word-input/word-input.json
+2 -2
View File
@@ -2,7 +2,7 @@
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"toy-button": "/ui/button/button"
"toy-icon": "/toy/icon/icon",
"toy-button": "/toy/button-v2/button"
}
}
miniprogram/components/word-input/word-input.wxml
+1 -1
View File
@@ -3,7 +3,7 @@
<view
class="word-input-container"
style="{{width ? 'width:' + width + ';' : ''}}">
<van-icon
<toy-icon
class-prefix="toy-icon"
name="translate"
custom-class="word-input-icon"
miniprogram/components/word-picker/word-picker.json
+1 -1
View File
@@ -3,7 +3,7 @@
"styleIsolation": "isolated",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"toy-button": "/ui/button/button",
"toy-button": "/toy/button-v2/button",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
miniprogram/components3.0/nav-bar/nav-bar.json
+3 -1
View File
@@ -1,3 +1,5 @@
{
"component": true
"component": true,
"styleIsolation": "apply-shared",
"addGlobalClass": true
}
miniprogram/components3.0/nav-bar/nav-bar.less
+18 -2
View File
@@ -1,4 +1,5 @@
@import '../../style/theme3.less';
@import '../../style/theme.less';
@import '../../assets/fonts/iconfont.less';
.nav-bar {
position: fixed;
@@ -22,6 +23,21 @@
box-sizing: border-box;
}
.nav-bar__back {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
}
.nav-bar__back-icon {
font-size: 40rpx;
color: @color-nav-title;
line-height: 1;
}
.nav-bar__title {
font-size: @fs-nav-title;
font-weight: @fw-nav-title;
@@ -41,4 +57,4 @@
.nav-bar__placeholder {
width: 100%;
flex-shrink: 0;
}
}
miniprogram/components3.0/nav-bar/nav-bar.ts
+12
View File
@@ -9,13 +9,25 @@ Component({
data: {
statusBarHeight: 0,
navBlockHeight: 0,
showBackButton: false,
},
lifetimes: {
attached() {
const { statusBarHeight } = wx.getWindowInfo();
const pages = getCurrentPages();
this.setData({
statusBarHeight,
navBlockHeight: statusBarHeight + NAV_INNER_PX,
showBackButton: pages.length > 1,
});
},
},
methods: {
handleBack() {
wx.navigateBack({
fail: () => {
wx.switchTab({ url: '/pages/home/home' });
},
});
},
},
miniprogram/components3.0/nav-bar/nav-bar.wxml
+6
View File
@@ -1,5 +1,11 @@
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}">
<view class="nav-bar__inner">
<view
wx:if="{{showBackButton}}"
class="nav-bar__back"
bindtap="handleBack">
<text class="toy-icon toy-icon-arrow-left nav-bar__back-icon"></text>
</view>
<slot name="left"></slot>
<text class="nav-bar__title">{{title}}</text>
<view class="nav-bar__right">
miniprogram/components3.0/preview-footer-actions/preview-footer-actions.json
+8
View File
@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"toy-button": "/toy/button/button"
},
"styleIsolation": "apply-shared",
"addGlobalClass": true
}
miniprogram/components3.0/preview-footer-actions/preview-footer-actions.less
+44
View File
@@ -0,0 +1,44 @@
@import '../../style/theme.less';
.preview-footer-actions {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 0 24rpx;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
z-index: 60;
&__bar {
max-width: 686rpx;
margin: 0 auto;
background: @bg-white;
border-radius: 48rpx;
padding: 20rpx;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
border: 1rpx solid #f0e7d6;
display: flex;
gap: 16rpx;
}
&__secondary {
flex: 4;
}
&__primary {
flex: 6;
}
&__secondary .toy-btn,
&__primary .toy-btn {
width: 100%;
height: 88rpx;
border-radius: 28rpx;
font-size: 30rpx;
}
&__primary .toy-btn--primary {
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}
}
miniprogram/components3.0/preview-footer-actions/preview-footer-actions.ts
+40
View File
@@ -0,0 +1,40 @@
/**
* 预览页底部悬浮操作条：左为次级操作（分享，toy-button type=secondary），右为主操作（保存等，primary）。
*/
Component({
options: {
styleIsolation: 'apply-shared',
addGlobalClass: true,
},
properties: {
primaryText: {
type: String,
value: '保存到作品库',
},
secondaryText: {
type: String,
value: '分享',
},
disabled: {
type: Boolean,
value: false,
},
loading: {
type: Boolean,
value: false,
},
shareOpenType: {
type: String,
value: 'share',
},
},
methods: {
onPrimaryTap() {
if (this.data.disabled || this.data.loading) return;
this.triggerEvent('primary');
},
onSecondaryTap() {
this.triggerEvent('secondary');
},
},
});
miniprogram/components3.0/preview-footer-actions/preview-footer-actions.wxml
+23
View File
@@ -0,0 +1,23 @@
<view class="preview-footer-actions">
<view class="preview-footer-actions__bar">
<toy-button
class="preview-footer-actions__secondary"
type="secondary"
icon="line-share"
icon-size="40rpx"
open-type="{{ shareOpenType }}"
bind:click="onSecondaryTap">
{{ secondaryText }}
</toy-button>
<toy-button
class="preview-footer-actions__primary"
type="primary"
icon="download"
icon-size="40rpx"
disabled="{{ disabled }}"
loading="{{ loading }}"
bind:click="onPrimaryTap">
{{ primaryText }}
</toy-button>
</view>
</view>
miniprogram/englishPages/letterTracing/letterTracing.json
+4 -1
View File
@@ -8,6 +8,9 @@
"usingComponents": {
"nav-bar": "../../components3.0/nav-bar/nav-bar",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"draw-ad": "../../components/draw-ad/draw-ad"
"draw-ad": "../../components/draw-ad/draw-ad",
"preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
"toy-button": "../../toy/button/button",
"toy-icon": "../../toy/icon/icon"
}
}
miniprogram/englishPages/letterTracing/letterTracing.less
+7 -95
View File
@@ -1,6 +1,4 @@
@import '../../style/theme3.less';
@lt-share-green: #9cd343;
@import '../../style/theme.less';
page {
background-color: @bg-page;
@@ -208,100 +206,14 @@ page {
box-shadow: @shadow;
}
/* ===== 换一批 ===== */
/* ===== 换一批（toy-button outlined 覆盖） ===== */
.lt-shuffle-btn {
width: 100%;
padding: 28rpx 24rpx;
margin: 0;
border-radius: @radius;
border: 6rpx solid @bg-header;
background: transparent;
font-size: 32rpx;
font-weight: 700;
color: @text-secondary;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
box-sizing: border-box;
&::after {
border: none;
}
}
.lt-shuffle-btn:active {
background: @bg-header;
transform: scale(0.98);
}
/* ===== 底栏 ===== */
.lt-bottom-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
flex-direction: row;
align-items: center;
gap: 20rpx;
padding: 24rpx @page-padding-x;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: @border;
box-shadow: 0 -8rpx 32rpx rgba(50, 46, 37, 0.06);
box-sizing: border-box;
}
.lt-bottom-share,
.lt-bottom-save {
margin: 0;
height: 96rpx;
line-height: 96rpx;
border-radius: @radius-sm;
font-size: 30rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 0;
box-sizing: border-box;
&::after {
border: none;
}
}
.lt-bottom-share {
flex: 0 0 35%;
width: 35%;
background: @lt-share-green;
color: @text-white;
box-shadow: @shadow;
}
.lt-bottom-save {
flex: 1;
min-width: 0;
background: @brand;
color: @text-selected-btn;
font-weight: 800;
box-shadow: @shadow-lg;
}
.lt-bottom-save[disabled] {
opacity: 0.45;
}
.lt-bottom-icon {
font-size: 36rpx;
line-height: 1;
border-width: 6rpx !important;
border-color: @bg-header !important;
height: 96rpx !important;
font-size: 32rpx !important;
}
.lt-spacer-bottom {
height: 24rpx;
}
}
miniprogram/englishPages/letterTracing/letterTracing.wxml
+17 -20
View File
@@ -66,33 +66,30 @@
</view>
</view>
<button
<toy-button
wx:if="{{showNextLetter}}"
hover-class="none"
class="lt-shuffle-btn"
bindtap="onNextLetter">
🔄 换一批
</button>
type="default"
variant="outlined"
block
icon="refresh"
custom-class="lt-shuffle-btn"
bind:click="onNextLetter">
换一批
</toy-button>
<draw-ad type="mathDraw"></draw-ad>
<view class="lt-spacer-bottom"></view>
</view>
</view>
<view class="lt-bottom-bar">
<button class="lt-bottom-share" hover-class="none" open-type="share">
<text class="lt-bottom-icon">↗</text>
分享
</button>
<button
class="lt-bottom-save"
hover-class="none"
disabled="{{!hasContent}}"
bindtap="exportToPrint">
<text class="lt-bottom-icon">⬇</text>
保存到相册
</button>
</view>
<preview-footer-actions
primary-text="保存到相册"
primary-icon="download"
secondary-text="分享"
secondary-icon="wechat"
disabled="{{!hasContent}}"
bind:primary="exportToPrint"
bind:secondary="onShare" />
<share-guide-popup
show="{{showShareDialog}}"
miniprogram/focusPages/codeConnect/codeConnect.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/colorPattern/colorPattern.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/colorShapeMatch/colorShapeMatch.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/dotConnect/dotConnect.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/lineRecognition/lineRecognition.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/matchConnect/matchConnect.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/positionColoring/positionColoring.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/focusPages/shape/shape.json
+1 -1
View File
@@ -9,7 +9,7 @@
"van-icon": "@vant/weapp/icon/index",
"van-popup": "@vant/weapp/popup/index",
"van-dialog": "@vant/weapp/dialog/index",
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"shape-card": "../../components/shape-card/shape-card",
"shape-picker": "../../components/shape-picker/shape-picker",
"color-picker": "../../components/color-picker/color-picker",
miniprogram/focusPages/shapeSymbol/shapeSymbol.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/breakTen/breakTen.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-type-selector": "../../components/math-type-selector/math-type-selector",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
miniprogram/mathPages/calculationPractice/calculationPractice.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"math-type-selector": "../../components/math-type-selector/math-type-selector",
miniprogram/mathPages/compare/compare.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/countingSelect/countingSelect.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/flatTen/flatTen.json
+1 -1
View File
@@ -6,7 +6,7 @@
"enablePullDownRefresh": false,
"usingComponents": {
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
}
miniprogram/mathPages/makeTen/makeTen.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/multiplicationTable/multiplicationTable.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/numberFind/numberFind.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/numberObjectMatch/numberObjectMatch.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad",
miniprogram/mathPages/numberSort/numberSort.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/mathPages/oneDigitAddition/oneDigitAddition.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
"draw-ad": "../../components/draw-ad/draw-ad"
miniprogram/pages/age/age.less
+1 -1
View File
@@ -1,4 +1,4 @@
@import '../../style/theme3.less';
@import '../../style/theme.less';
@age-tab-gap: 32rpx;
@age-tab-w: 226rpx;
miniprogram/pages/copyBook/copyBook.json
+1 -2
View File
@@ -6,8 +6,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "/ui/button/button",
"van-icon": "@vant/weapp/icon/index",
"toy-button": "/toy/button-v2/button",
"van-dialog": "@vant/weapp/dialog/index",
"word-input": "/components/word-input/word-input",
"word-card": "/components/word-card/word-card",
miniprogram/pages/copyBook/copyBook.wxml
+1 -1
View File
@@ -12,7 +12,7 @@
height="80rpx"
width="410rpx"
icon="success"
icon-class-prefix="van-icon">
icon-class-prefix="toy-icon">
选择文字
</toy-button>
<toy-button
miniprogram/pages/favorites/favorites.less
+1 -1
View File
@@ -1,4 +1,4 @@
@import '../../style/theme3.less';
@import '../../style/theme.less';
@fav-seg-track: #f0e7d6;
@fav-thumb-placeholder: #e5dcc9;
miniprogram/pages/home/home.less
+1 -1
View File
@@ -1,4 +1,4 @@
@import '../../style/theme3.less';
@import '../../style/theme.less';
@home-track-gap: 16rpx;
miniprogram/pages/index/index.json
+1 -1
View File
@@ -16,7 +16,7 @@
"introduction-popup": "../../components/introduction-popup/introduction-popup",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"add-to-miniprogram-tip": "../../components/add-to-miniprogram-tip/add-to-miniprogram-tip",
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"word-picker": "../../components/word-picker/word-picker",
"empty-state": "../../components/empty-state/empty-state"
}
miniprogram/pages/profile/profile.less
+1 -1
View File
@@ -1,4 +1,4 @@
@import '../../style/theme3.less';
@import '../../style/theme.less';
@profile-premium-bg: #2d2a26;
miniprogram/style/theme.less
+66 -27
View File
@@ -1,40 +1,79 @@
// v3.0 品牌色系
@brand: #f7ee47;
@brand-dark: #e6d520;
@brand-light: #fffef0;
/**
* v3.0 主题令牌（Less 变量）
*
* 使用：在页面/组件 less 顶部 @import '../../style/theme.less'，再用 @brand、@page-padding-x、@fs-nav-title 等
*
* 色谱速览：主题 #FFD709 · 页背景 #FEF6E7 · Header #F8F0E0
* · 主标题 #322E25 · 选中/强调字 #6C5A00
*/
// 主题色（保持向后兼容）
@primary-color: #798154;
@select-color: #f7ee47;
// ========== 品牌 / 主题色 ==========
@brand: #ffd709;
@brand-dark: #e5c200; // 按下、加深态
@brand-light: #fff4c4; // 浅底、高亮背景
// 与 theme.less 对齐的别名
@primary-color: @brand;
@select-color: @brand;
// ========== 页面结构背景 ==========
@bg-page: #fef6e7;
@bg-header: #f8f0e0;
@bg-default: @bg-page;
@bg-white: #ffffff;
@bg-gray: #f5edd8;
@bg-muted: #f5f5f5; // 分龄 Tab 未选中等弱对比底（Stitch）
@bg-week-head: #fafafa; // 分龄周卡头部（Stitch stone-50）
// ========== 文本色 ==========
@text-title: #322e25;
@text-primary: @text-title;
@text-default: @text-title;
@text-selected-btn: #6c5a00; // 黄底按钮上的字、强调整示
@text-secondary: #605b50;
@text-light: rgba(50, 46, 37, 0.45);
@text-gray: #8a8478;
@text-white: #ffffff;
@text-disable: rgba(50, 46, 37, 0.35);
// ========== 链接与外链 ==========
@link-color: #2794f4;
@wechat-color: #1fe000;
// 文本颜色
@text-default: #333333;
@text-primary: #333333;
@text-secondary: #999999;
@text-light: #cccccc;
@text-gray: #9da0a3;
@text-white: #fff;
@text-disable: #ccc;
// ========== 边框 ==========
@border: 1rpx solid rgba(50, 46, 37, 0.08);
@border-color: rgba(255, 215, 9, 0.35);
// 边框
@border: 1rpx solid rgba(221, 221, 221, 0.5);
@border-color: #eeeeee;
// ========== 页面水平内边距 ==========
// 主内容区与屏幕左右对齐；卡片内略小，避免双重视觉边距
@page-padding-x: 40rpx;
@page-padding-inner-x: 26rpx;
// 背景色
@bg-default: #f5f5f5;
@bg-white: #ffffff;
@bg-gray: #fef6db;
// ========== 区块纵向间距 ==========
@section-gap: 60rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-lg: 48rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-sm: 32rpx; // 区块内：标题与下方列表 / 横向列表顶距
@section-gap-stack: 28rpx; // 同级卡片堆叠（周卡、热门列表卡片等）
@section-gap-xs: 24rpx; // 更小块间（搜索区顶、Tab 区等）
// 圆角
// ========== 圆角 ==========
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
@radius-xl: 48rpx; // 大卡片（如个人中心主卡，对齐 Stitch 1.5rem）
// 阴影
@shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
// ========== 阴影 ==========
@shadow: 0 4rpx 16rpx rgba(50, 46, 37, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(50, 46, 37, 0.1);
// icon
// ========== 字号 ==========
@font-size-icon: 40rpx;
@fs-section-head-title: 36rpx; // 板块主标题（如首页区块头、分龄路径头等）
// ========== 顶栏（Tab 页固定导航标题）==========
@nav-inner-height: 44px;
@fs-nav-title: 34rpx;
@fw-nav-title: 700;
@color-nav-title: @text-title;
@ls-nav-title: -0.02em;
miniprogram/style/theme2.less
+40
View File
@@ -0,0 +1,40 @@
// v3.0 品牌色系
@brand: #f7ee47;
@brand-dark: #e6d520;
@brand-light: #fffef0;
// 主题色（保持向后兼容）
@primary-color: #798154;
@select-color: #f7ee47;
@link-color: #2794f4;
@wechat-color: #1fe000;
// 文本颜色
@text-default: #333333;
@text-primary: #333333;
@text-secondary: #999999;
@text-light: #cccccc;
@text-gray: #9da0a3;
@text-white: #fff;
@text-disable: #ccc;
// 边框
@border: 1rpx solid rgba(221, 221, 221, 0.5);
@border-color: #eeeeee;
// 背景色
@bg-default: #f5f5f5;
@bg-white: #ffffff;
@bg-gray: #fef6db;
// 圆角
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
// 阴影
@shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
// icon
@font-size-icon: 40rpx;
miniprogram/style/theme3.less
-79
View File
@@ -1,79 +0,0 @@
/**
* v3.0 主题令牌（Less 变量）
*
* 使用：在页面/组件 less 顶部 @import '../../style/theme3.less'，再用 @brand、@page-padding-x、@fs-nav-title 等
*
* 色谱速览：主题 #FFD709 · 页背景 #FEF6E7 · Header #F8F0E0
* · 主标题 #322E25 · 选中/强调字 #6C5A00
*/
// ========== 品牌 / 主题色 ==========
@brand: #ffd709;
@brand-dark: #e5c200; // 按下、加深态
@brand-light: #fff4c4; // 浅底、高亮背景
// 与 theme.less 对齐的别名
@primary-color: @brand;
@select-color: @brand;
// ========== 页面结构背景 ==========
@bg-page: #fef6e7;
@bg-header: #f8f0e0;
@bg-default: @bg-page;
@bg-white: #ffffff;
@bg-gray: #f5edd8;
@bg-muted: #f5f5f5; // 分龄 Tab 未选中等弱对比底（Stitch）
@bg-week-head: #fafafa; // 分龄周卡头部（Stitch stone-50）
// ========== 文本色 ==========
@text-title: #322e25;
@text-primary: @text-title;
@text-default: @text-title;
@text-selected-btn: #6c5a00; // 黄底按钮上的字、强调整示
@text-secondary: #605b50;
@text-light: rgba(50, 46, 37, 0.45);
@text-gray: #8a8478;
@text-white: #ffffff;
@text-disable: rgba(50, 46, 37, 0.35);
// ========== 链接与外链 ==========
@link-color: #2794f4;
@wechat-color: #1fe000;
// ========== 边框 ==========
@border: 1rpx solid rgba(50, 46, 37, 0.08);
@border-color: rgba(255, 215, 9, 0.35);
// ========== 页面水平内边距 ==========
// 主内容区与屏幕左右对齐；卡片内略小，避免双重视觉边距
@page-padding-x: 40rpx;
@page-padding-inner-x: 26rpx;
// ========== 区块纵向间距 ==========
@section-gap: 60rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-lg: 48rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-sm: 32rpx; // 区块内：标题与下方列表 / 横向列表顶距
@section-gap-stack: 28rpx; // 同级卡片堆叠（周卡、热门列表卡片等）
@section-gap-xs: 24rpx; // 更小块间（搜索区顶、Tab 区等）
// ========== 圆角 ==========
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
@radius-xl: 48rpx; // 大卡片（如个人中心主卡，对齐 Stitch 1.5rem）
// ========== 阴影 ==========
@shadow: 0 4rpx 16rpx rgba(50, 46, 37, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(50, 46, 37, 0.1);
// ========== 字号 ==========
@font-size-icon: 40rpx;
@fs-section-head-title: 36rpx; // 板块主标题（如首页区块头、分龄路径头等）
// ========== 顶栏（Tab 页固定导航标题）==========
@nav-inner-height: 44px;
@fs-nav-title: 34rpx;
@fw-nav-title: 700;
@color-nav-title: @text-title;
@ls-nav-title: -0.02em;
miniprogram/supportPages/debug/debug.json
+1 -1
View File
@@ -5,7 +5,7 @@
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"toy-button": "../../toy/button-v2/button",
"van-radio": "@vant/weapp/radio/index",
"van-radio-group": "@vant/weapp/radio-group/index",
"van-cell": "@vant/weapp/cell/index",
miniprogram/ui/README.md → miniprogram/toy/README.md
View File
miniprogram/ui/button/README.md → miniprogram/toy/button-v2/README.md
+8 -8
View File
@@ -1,6 +1,6 @@
# Toy Button 组件
基于涂鸦丫设计规范的按钮组件，与 doodle-ui 中的按钮样式保持一致。
基于涂鸦丫设计规范的按钮组件，当前视觉参考 `stitch-ui/letterTracing/code.html` 中底部“分享 / 保存到相册”按钮，内部不依赖 Vant。
## 功能特性
@@ -9,7 +9,7 @@
- ✅ 扁平化模式支持
- ✅ 图标支持
- ✅ 自定义尺寸
- ✅ 流畅的点击动效
- ✅ 参考设计稿的缩放点击动效
- ✅ 与 doodle-ui 样式完全一致
## 使用方法
@@ -89,16 +89,16 @@
### 按钮类型
- **primary**: 黄色背景 (#FFD719)，深色文字 (#141414)
- **secondary**: 绿色背景 (#93D333)，白色文字
- **green**: 绿色背景 (#93D333)，白色文字（与secondary相同）
- **white**: 白色背景，深色文字，带边框
- **primary**: 黄色背景 (#FFD700)，深色文字 (#6c5a00)
- **secondary**: 绿色背景 (#9CD343)，白色文字
- **green**: 绿色背景 (#9CD343)，白色文字（与secondary相同）
- **white**: 米白背景，深色文字，浅边框
### 点击动效
- 所有按钮都支持 `scale(0.95)` 的点击缩放效果
- 扁平化模式下有背景色变化效果
- 动效持续时间为 150ms
- `flat` 模式下更接近底部操作栏按钮视觉
- 动效持续时间约为 180ms
### 禁用状态
miniprogram/toy/button-v2/button.json
+8
View File
@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"toy-icon": "/toy/icon/icon"
},
"styleIsolation": "apply-shared",
"addGlobalClass": true
}
miniprogram/toy/button-v2/button.less
+194
View File
@@ -0,0 +1,194 @@
@button-default-height: 92rpx;
@button-border-radius: 32rpx;
@button-default-font-size: 30rpx;
@button-default-color: #fff;
@button-transition: 0.18s ease;
@button-shadow-primary: 0 8rpx 20rpx rgba(255, 215, 0, 0.22);
@button-shadow-green: 0 8rpx 20rpx rgba(156, 211, 67, 0.22);
@button-shadow-white: 0 6rpx 16rpx rgba(50, 46, 37, 0.08);
@button-shadow-pressed: 0 4rpx 10rpx rgba(50, 46, 37, 0.1);
@button-disabled-bg: #ece6da;
@button-disabled-color: #b8b2a6;
wx-button:not([size=mini]) {
margin-left: auto;
margin-right: auto;
width: auto;
}
.toy-button {
--button-bg: #f0e7d6;
--button-color: @button-default-color;
--button-border-color: transparent;
--button-shadow: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180rpx;
height: @button-default-height;
line-height: 1;
padding: 0 28rpx;
border-radius: @button-border-radius;
border: 2rpx solid var(--button-border-color);
background: var(--button-bg);
color: var(--button-color);
box-shadow: var(--button-shadow);
font-size: @button-default-font-size;
font-weight: 700;
letter-spacing: 0.5rpx;
text-align: center;
cursor: pointer;
transition:
transform @button-transition,
box-shadow @button-transition,
background-color @button-transition,
border-color @button-transition,
color @button-transition,
opacity @button-transition;
&::after {
border: none;
}
&--default {
--button-bg: #f0e7d6;
--button-color: #322e25;
--button-border-color: #e5dcc9;
--button-shadow: @button-shadow-white;
}
&--large {
width: 100%;
}
&--small {
min-width: 136rpx;
height: 72rpx;
padding: 0 20rpx;
border-radius: 20rpx;
font-size: 26rpx;
}
&--mini {
min-width: 96rpx;
height: 56rpx;
padding: 0 16rpx;
border-radius: 18rpx;
font-size: 24rpx;
}
&--primary {
--button-bg: #ffd700;
--button-color: #6c5a00;
--button-shadow: @button-shadow-primary;
}
&--green,
&--secondary {
--button-bg: #9cd343;
--button-color: #ffffff;
--button-shadow: @button-shadow-green;
}
&--white {
--button-bg: rgba(255, 255, 255, 0.96);
--button-color: #322e25;
--button-border-color: #ebe3d2;
--button-shadow: @button-shadow-white;
}
&.plain.toy-button--white {
--button-bg: transparent;
--button-color: #ffffff;
--button-border-color: rgba(255, 255, 255, 0.92);
--button-shadow: none;
}
&.disabled {
--button-bg: @button-disabled-bg !important;
--button-color: @button-disabled-color !important;
--button-border-color: transparent !important;
--button-shadow: none !important;
opacity: 1;
}
&.loading {
opacity: 0.92;
}
&.active {
transform: scale(0.95);
box-shadow: @button-shadow-pressed;
}
&--flat {
min-width: 0;
padding: 0 24rpx;
border-width: 0;
border-radius: 32rpx;
&.toy-button--green,
&.toy-button--secondary {
--button-bg: #9cd343;
--button-color: #ffffff;
--button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
font-weight: 700;
}
&.toy-button--primary {
--button-bg: #ffd700;
--button-color: #6c5a00;
--button-shadow: 0 8rpx 18rpx rgba(108, 90, 0, 0.12);
font-weight: 800;
}
&.toy-button--white {
--button-bg: rgba(255, 255, 255, 0.96);
--button-color: #322e25;
--button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
}
&.toy-button--white.plain {
--button-bg: transparent;
--button-color: #ffffff;
--button-shadow: none;
border-width: 2rpx;
}
&.active {
transform: scale(0.95);
}
&.disabled {
--button-bg: #e6e0d4 !important;
--button-color: #b8b2a6 !important;
--button-shadow: none !important;
}
}
.loading-class,
&__icon {
margin-right: 12rpx;
flex-shrink: 0;
}
&__spinner {
box-sizing: border-box;
border-radius: 50%;
border-width: 4rpx;
border-style: solid;
animation: toy-button-spin 0.8s linear infinite;
}
}
@keyframes toy-button-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
miniprogram/toy/button-v2/button.ts
+260
View File
@@ -0,0 +1,260 @@
Component({
options: {
styleIsolation: 'apply-shared',
addGlobalClass: true,
},
properties: {
type: {
type: String,
value: 'default',
},
openType: {
type: String,
value: '',
},
plain: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'normal',
},
disabled: {
type: Boolean,
value: false,
},
flat: {
type: Boolean,
value: false,
},
loading: {
type: Boolean,
value: false,
},
style: {
type: String,
value: '',
},
width: {
type: String,
value: '',
},
height: {
type: String,
value: '',
},
loadingType: {
type: String,
value: 'circular',
},
loadingSize: {
type: String,
value: '20px',
},
loadingColor: {
type: String,
value: '#ffffff',
},
icon: {
type: String,
value: '',
},
iconClassPrefix: {
type: String,
value: 'toy-icon',
},
iconSize: {
type: String,
value: '44rpx',
},
iconColor: {
type: String,
value: '#ffffff',
},
sessionFrom: {
type: String,
value: '',
},
sendMessageTitle: {
type: String,
value: '',
},
sendMessagePath: {
type: String,
value: '',
},
sendMessageImg: {
type: String,
value: '',
},
showMessageCard: {
type: Boolean,
value: false,
},
appParameter: {
type: String,
value: '',
},
ariaLabel: {
type: String,
value: '',
},
},
data: {
pressed: false,
rootClassName: '',
rootStyle: '',
resolvedIconColor: '#ffffff',
resolvedLoadingColor: '#ffffff',
resolvedIconSize: '44rpx',
resolvedLoadingSize: '20px',
},
observers: {
'type,plain,size,disabled,flat,loading,style,width,height,iconColor,iconSize,loadingColor,loadingSize,pressed':
function () {
this.syncViewState();
},
},
lifetimes: {
attached() {
this.syncViewState();
},
},
methods: {
syncViewState() {
const {
type,
plain,
size,
disabled,
flat,
loading,
style,
width,
height,
iconColor,
iconSize,
loadingColor,
loadingSize,
pressed,
} = this.data;
const classNames = ['toy-button', `toy-button--${type}`, `toy-button--${size}`];
if (flat) {
classNames.push('toy-button--flat');
}
if (plain) {
classNames.push('plain');
}
if (disabled) {
classNames.push('disabled');
}
if (loading) {
classNames.push('loading');
}
if (pressed && !disabled && !loading) {
classNames.push('active');
}
const styleSegments = [style];
const normalizedWidth = this.normalizeUnit(width);
const normalizedHeight = this.normalizeUnit(height);
if (normalizedWidth) {
styleSegments.push(`width:${normalizedWidth}`);
}
if (normalizedHeight) {
styleSegments.push(`height:${normalizedHeight}`);
}
const resolvedIconColor = this.getResolvedIconColor(
iconColor,
type,
plain,
disabled,
);
const resolvedLoadingColor = loadingColor || resolvedIconColor;
this.setData({
rootClassName: classNames.join(' '),
rootStyle: styleSegments.filter(Boolean).join(';'),
resolvedIconColor,
resolvedLoadingColor,
resolvedIconSize: this.normalizeUnit(iconSize) || '44rpx',
resolvedLoadingSize: this.normalizeUnit(loadingSize) || '20px',
});
},
normalizeUnit(value: string) {
if (!value) {
return '';
}
return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
},
getResolvedIconColor(
iconColor: string,
type: string,
plain: boolean,
disabled: boolean,
) {
if (disabled) {
return '#b8b2a6';
}
if (type === 'primary') {
return '#6c5a00';
}
if (type === 'white' && !plain) {
return '#322e25';
}
return iconColor || '#ffffff';
},
onTouchStart() {
if (this.data.disabled || this.data.loading) {
return;
}
this.setData({ pressed: true });
},
onTouchEnd() {
if (!this.data.pressed) {
return;
}
this.setData({ pressed: false });
},
onTouchCancel() {
if (!this.data.pressed) {
return;
}
this.setData({ pressed: false });
},
onClick(e: WechatMiniprogram.TouchEvent): void {
this.triggerEvent('click', e);
},
onGetUserInfo(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getuserinfo', e.detail);
},
onContact(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('contact', e.detail);
},
onGetPhoneNumber(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getphonenumber', e.detail);
},
onGetRealTimePhoneNumber(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getrealtimephonenumber', e.detail);
},
onAgreePrivacyAuthorization(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('agreeprivacyauthorization', e.detail);
},
onError(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('error', e.detail);
},
onLaunchApp(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('launchapp', e.detail);
},
onOpenSetting(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('opensetting', e.detail);
},
onChooseAvatar(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('chooseavatar', e.detail);
},
},
externalClasses: ['custom-class'],
});
miniprogram/ui/button/button.wxml → miniprogram/toy/button-v2/button.wxml
+12 -19
View File
@@ -1,13 +1,7 @@
<wxs src="../wxs/base.wxs" module="Utils" />
<wxs module="wxs" src="./button.wxs"></wxs>
<!-- <view class="keyboard" bind:touchstart="{{wxs.keypadTouchStart}}" bind:touchend="{{wxs.keypadTouchEnd}}"> -->
<button
data-id="test-toy-button-id"
class="toy-button toy-button--{{type}} {{flat ? 'toy-button--flat' : ''}} {{Utils.classNames({disabled: disabled, loading: loading, plain: plain })}} custom-class"
data-disabled="{{disabled}}"
data-loading="{{loading}}"
style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
class="{{rootClassName}} custom-class"
style="{{rootStyle}}"
session-from="{{ sessionFrom }}"
open-type="{{ disabled || loading ? '' : openType }}"
send-message-title="{{ sendMessageTitle }}"
@@ -16,8 +10,9 @@
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
aria-label="{{ ariaLabel }}"
bind:touchstart="{{wxs.touchStart}}"
bind:touchend="{{wxs.touchEnd}}"
bindtouchstart="onTouchStart"
bindtouchend="onTouchEnd"
bindtouchcancel="onTouchCancel"
bind:tap="{{ disabled || loading ? '' : 'onClick'}}"
bindgetuserinfo="onGetUserInfo"
bindcontact="onContact"
@@ -29,20 +24,18 @@
bindopensetting="onOpenSetting"
bindchooseavatar="onChooseAvatar">
<block wx:if="{{ loading }}">
<van-loading
custom-class="loading-class"
size="{{ loadingSize || iconSize }}"
type="{{ loadingType }}"
color="{{ loadingColor }}" />
<view
class="loading-class toy-button__spinner toy-button__spinner--{{loadingType}}"
style="width:{{resolvedLoadingSize}};height:{{resolvedLoadingSize}};border-color:transparent;border-top-color:{{resolvedLoadingColor}};border-right-color:{{resolvedLoadingColor}};"></view>
</block>
<block wx:else>
<van-icon
<toy-icon
wx:if="{{ icon }}"
name="{{ icon }}"
size="{{ iconSize }}"
color="{{ wxs.getIconColor(iconColor, type, plain, disabled) }}"
size="{{ resolvedIconSize }}"
color="{{ resolvedIconColor }}"
class-prefix="{{ iconClassPrefix }}"
class="toy-button__icon" />
custom-class="toy-button__icon" />
</block>
<slot></slot>
</button>
miniprogram/toy/button/button.json
+8
View File
@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"toy-icon": "/toy/icon/icon"
},
"styleIsolation": "apply-shared",
"addGlobalClass": true
}
miniprogram/toy/button/button.less
+317
View File
@@ -0,0 +1,317 @@
@import '../../style/theme.less';
/* ── design tokens（严格对齐 stitch-ui/buttonUi/code.html 色谱） ── */
/* primary 色系 */
@btn-primary-solid: #ffd709; /* primary-container / primary-fixed */
@btn-primary-gradient-from: #ffd709; /* primary-fixed */
@btn-primary-gradient-to: #efc900; /* primary-fixed-dim */
@btn-primary-text: #5b4b00; /* on-primary-container */
@btn-primary-pressed-bg: #5e4e00; /* primary-dim */
@btn-primary-pressed-text: #fff2cd; /* on-primary */
@btn-primary-ring: rgba(108, 90, 0, 0.10);
/* secondary 色系 */
@btn-secondary-bg: #9cd343; /* tertiary-container / tertiary-fixed */
@btn-secondary-text-on-tint: #5a8c1a;
/* error 色系 */
@btn-error-bg: #f95630; /* error-container */
@btn-error-text: #520c00; /* on-error-container */
/* surface 参考 */
@btn-surface-variant: #e5dcc9;
@btn-surface-container-high: #eae2d0;
@btn-surface-container-highest: #e5dcc9;
@btn-outline-variant-20: rgba(179, 172, 159, 0.20);
/* 阴影 */
@btn-shadow-primary: 0 8rpx 24rpx rgba(108, 90, 0, 0.15);
@btn-shadow-primary-lg: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
@btn-shadow-secondary: 0 8rpx 24rpx rgba(156, 211, 67, 0.18);
@btn-shadow-error: 0 8rpx 24rpx rgba(249, 86, 48, 0.18);
@btn-shadow-default: @shadow;
@btn-shadow-pressed: none;
/* 圆角 */
@btn-radius: @radius-lg;
@btn-radius-sm: 20rpx;
@btn-radius-mini: 18rpx;
/* 过渡 */
@btn-transition: 0.18s ease;
/* 禁用 */
@btn-disabled-bg: @bg-gray;
@btn-disabled-color: @text-disable;
/* ── reset native button chrome ── */
wx-button:not([size=mini]) {
margin-left: auto;
margin-right: auto;
width: auto;
}
/* ── base ── */
.toy-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10rpx;
min-width: 180rpx;
height: 92rpx;
padding: 0 32rpx;
border-radius: @btn-radius;
border: none;
background: @bg-gray;
color: @text-title;
box-shadow: @btn-shadow-default;
font-size: 30rpx;
font-weight: 700;
letter-spacing: 0.5rpx;
text-align: center;
line-height: 1;
transition:
transform @btn-transition,
box-shadow @btn-transition,
background @btn-transition,
color @btn-transition,
opacity @btn-transition;
&::after {
border: none;
}
/* ═══════ type variants ═══════ */
/* 默认：surface-container 底 + on-surface 字 */
&--default {
background: @bg-gray;
color: @text-title;
box-shadow: @btn-shadow-default;
}
/*
* 主色：中号/小号/mini 用纯色 primary-container (#ffd709)
* 大号单独覆盖为渐变（见 &--large 内）
*/
&--primary {
background: @btn-primary-solid;
color: @btn-primary-text;
box-shadow: @btn-shadow-primary;
}
/* 次级（语义名；视觉上目前为绿色） */
&--secondary {
background: @btn-secondary-bg;
color: @text-white;
box-shadow: @btn-shadow-secondary;
}
/* @deprecated 向后兼容，等同 secondary */
&--green {
background: @btn-secondary-bg;
color: @text-white;
box-shadow: @btn-shadow-secondary;
}
/* 危险操作：error-container 底 + on-error-container 深字 */
&--error {
background: @btn-error-bg;
color: @btn-error-text;
box-shadow: @btn-shadow-error;
}
/* 白色 / 浅底 */
&--white {
background: @bg-white;
color: @text-title;
box-shadow: @btn-shadow-default;
}
/* ═══════ size variants ═══════ */
/* 大号 / 全宽：primary 此时启用渐变 + 更强阴影 */
&--large {
width: 100%;
height: 100rpx;
padding: 0 40rpx;
font-size: 34rpx;
&.toy-btn--primary {
background: linear-gradient(135deg, @btn-primary-gradient-from, @btn-primary-gradient-to);
box-shadow: @btn-shadow-primary-lg;
}
}
&--normal {
min-width: 180rpx;
}
&--small {
min-width: 136rpx;
height: 72rpx;
padding: 0 24rpx;
border-radius: @btn-radius-sm;
font-size: 26rpx;
}
&--mini {
min-width: 96rpx;
height: 56rpx;
padding: 0 16rpx;
border-radius: @btn-radius-mini;
font-size: 24rpx;
}
/* ═══════ variant: outlined (描边) ═══════ */
&--outlined {
background: transparent !important;
box-shadow: none !important;
border: 4rpx solid @btn-surface-variant;
&.toy-btn--primary {
border-color: @btn-primary-solid;
color: @btn-primary-text;
}
&.toy-btn--secondary,
&.toy-btn--green {
border-color: @btn-secondary-bg;
color: @btn-secondary-text-on-tint;
}
&.toy-btn--error {
border-color: @btn-error-bg;
color: #b02500;
}
&.toy-btn--default {
border-color: @btn-surface-variant;
color: @text-secondary;
}
}
/* ═══════ variant: ghost (幽灵) ═══════ */
&--ghost {
background: transparent !important;
border: none !important;
box-shadow: none !important;
&.toy-btn--primary {
color: #6c5a00;
}
&.toy-btn--secondary,
&.toy-btn--green {
color: @btn-secondary-text-on-tint;
}
&.toy-btn--error {
color: #b02500;
}
&.toy-btn--default {
color: @text-secondary;
}
&.toy-btn--active {
background: @btn-surface-container-high !important;
}
}
/* ═══════ icon-only（纯图标按钮） ═══════ */
&--icon-only {
min-width: 0;
padding: 0;
gap: 0;
&.toy-btn--large {
width: 128rpx;
height: 128rpx;
border-radius: @btn-radius;
}
&.toy-btn--normal {
width: 112rpx;
height: 112rpx;
border-radius: @btn-radius;
}
&.toy-btn--small {
width: 88rpx;
height: 88rpx;
border-radius: @btn-radius-sm;
}
&.toy-btn--mini {
width: 72rpx;
height: 72rpx;
border-radius: @btn-radius-mini;
}
}
/* ═══════ block ═══════ */
&--block {
display: flex;
width: 100%;
}
/* ═══════ states ═══════ */
/* 通用按下态：缩放 0.95 */
&--active {
transform: scale(0.95);
box-shadow: @btn-shadow-pressed;
}
/* 图标按钮按下态：缩放 0.90 */
&--icon-only&--active {
transform: scale(0.90);
}
/* primary 按下态：切到 primary-dim 底色 + on-primary 字 + ring */
&--primary&--active {
background: @btn-primary-pressed-bg !important;
color: @btn-primary-pressed-text;
box-shadow: 0 0 0 8rpx @btn-primary-ring;
}
&--disabled {
background: @btn-disabled-bg !important;
color: @btn-disabled-color !important;
border-color: transparent !important;
box-shadow: none !important;
opacity: 1;
}
&--loading {
opacity: 0.88;
}
/* ═══════ inner elements ═══════ */
&__icon {
flex-shrink: 0;
}
&__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__spinner {
box-sizing: border-box;
border-radius: 50%;
border: 4rpx solid transparent;
border-style: solid;
animation: toy-btn-spin 0.8s linear infinite;
flex-shrink: 0;
}
}
@keyframes toy-btn-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
miniprogram/toy/button/button.ts
+284
View File
@@ -0,0 +1,284 @@
Component({
options: {
styleIsolation: 'apply-shared',
addGlobalClass: true,
},
properties: {
type: {
type: String,
value: 'default',
},
size: {
type: String,
value: 'normal',
},
variant: {
type: String,
value: 'filled',
},
block: {
type: Boolean,
value: false,
},
disabled: {
type: Boolean,
value: false,
},
loading: {
type: Boolean,
value: false,
},
icon: {
type: String,
value: '',
},
iconOnly: {
type: Boolean,
value: false,
},
iconClassPrefix: {
type: String,
value: 'toy-icon',
},
iconSize: {
type: String,
value: '',
},
iconColor: {
type: String,
value: '',
},
openType: {
type: String,
value: '',
},
style: {
type: String,
value: '',
},
width: {
type: String,
value: '',
},
height: {
type: String,
value: '',
},
loadingSize: {
type: String,
value: '20px',
},
sessionFrom: {
type: String,
value: '',
},
sendMessageTitle: {
type: String,
value: '',
},
sendMessagePath: {
type: String,
value: '',
},
sendMessageImg: {
type: String,
value: '',
},
showMessageCard: {
type: Boolean,
value: false,
},
appParameter: {
type: String,
value: '',
},
ariaLabel: {
type: String,
value: '',
},
},
externalClasses: ['custom-class'],
data: {
pressed: false,
rootClassName: '',
rootStyle: '',
resolvedIconColor: '',
resolvedIconSize: '44rpx',
resolvedLoadingColor: '#ffffff',
},
observers: {
'type,size,variant,block,disabled,loading,iconOnly,style,width,height,iconColor,iconSize,pressed':
function () {
this.syncViewState();
},
},
lifetimes: {
attached() {
this.syncViewState();
},
},
methods: {
syncViewState() {
const {
type,
size,
variant,
block,
disabled,
loading,
iconOnly,
style,
width,
height,
iconColor,
iconSize,
pressed,
} = this.data;
const visualType = type === 'green' ? 'secondary' : type;
const cls = ['toy-btn'];
cls.push(`toy-btn--${visualType}`);
cls.push(`toy-btn--${size}`);
if (variant !== 'filled') {
cls.push(`toy-btn--${variant}`);
}
if (block) {
cls.push('toy-btn--block');
}
if (iconOnly) {
cls.push('toy-btn--icon-only');
}
if (disabled) {
cls.push('toy-btn--disabled');
}
if (loading) {
cls.push('toy-btn--loading');
}
if (pressed && !disabled && !loading) {
cls.push('toy-btn--active');
}
const styleParts = [style];
const w = this.normalizeUnit(width);
const h = this.normalizeUnit(height);
if (w) styleParts.push(`width:${w}`);
if (h) styleParts.push(`height:${h}`);
const resolvedIconColor = this.resolveIconColor(
iconColor,
visualType,
variant,
disabled,
);
const resolvedIconSize =
this.normalizeUnit(iconSize) ||
this.getDefaultIconSize(size, iconOnly);
this.setData({
rootClassName: cls.join(' '),
rootStyle: styleParts.filter(Boolean).join(';'),
resolvedIconColor,
resolvedIconSize,
resolvedLoadingColor: resolvedIconColor || '#ffffff',
});
},
normalizeUnit(value: string) {
if (!value) return '';
return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
},
getDefaultIconSize(size: string, iconOnly: boolean) {
if (iconOnly) {
const map: Record<string, string> = {
large: '56rpx',
normal: '48rpx',
small: '44rpx',
mini: '40rpx',
};
return map[size] || '48rpx';
}
const map: Record<string, string> = {
large: '44rpx',
normal: '40rpx',
small: '36rpx',
mini: '32rpx',
};
return map[size] || '40rpx';
},
resolveIconColor(
iconColor: string,
type: string,
variant: string,
disabled: boolean,
) {
if (disabled) return '#b8b2a6';
if (iconColor) return iconColor;
if (variant === 'outlined' || variant === 'ghost') {
const outlinedMap: Record<string, string> = {
primary: '#6c5a00',
secondary: '#5a8c1a',
error: '#b02500',
default: '#605b50',
};
return outlinedMap[type] || '#605b50';
}
const filledMap: Record<string, string> = {
primary: '#5b4b00',
error: '#520c00',
default: '#322e25',
white: '#322e25',
};
return filledMap[type] || '#ffffff';
},
onTouchStart() {
if (this.data.disabled || this.data.loading) return;
this.setData({ pressed: true });
},
onTouchEnd() {
if (!this.data.pressed) return;
this.setData({ pressed: false });
},
onTouchCancel() {
if (!this.data.pressed) return;
this.setData({ pressed: false });
},
onClick(e: WechatMiniprogram.TouchEvent) {
if (this.data.disabled || this.data.loading) return;
this.triggerEvent('click', e);
},
onGetUserInfo(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getuserinfo', e.detail);
},
onContact(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('contact', e.detail);
},
onGetPhoneNumber(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getphonenumber', e.detail);
},
onGetRealTimePhoneNumber(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('getrealtimephonenumber', e.detail);
},
onAgreePrivacyAuthorization(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('agreeprivacyauthorization', e.detail);
},
onError(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('error', e.detail);
},
onLaunchApp(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('launchapp', e.detail);
},
onOpenSetting(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('opensetting', e.detail);
},
onChooseAvatar(e: WechatMiniprogram.CustomEvent) {
this.triggerEvent('chooseavatar', e.detail);
},
},
});
miniprogram/toy/button/button.wxml
+40
View File
@@ -0,0 +1,40 @@
<button
class="{{rootClassName}} custom-class"
style="{{rootStyle}}"
session-from="{{ sessionFrom }}"
open-type="{{ disabled || loading ? '' : openType }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
aria-label="{{ ariaLabel }}"
bindtouchstart="onTouchStart"
bindtouchend="onTouchEnd"
bindtouchcancel="onTouchCancel"
bind:tap="onClick"
bindgetuserinfo="onGetUserInfo"
bindcontact="onContact"
bindgetphonenumber="onGetPhoneNumber"
bindgetrealtimephonenumber="onGetRealTimePhoneNumber"
bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
binderror="onError"
bindlaunchapp="onLaunchApp"
bindopensetting="onOpenSetting"
bindchooseavatar="onChooseAvatar">
<view wx:if="{{ loading }}" class="toy-btn__spinner"
style="width:{{loadingSize}};height:{{loadingSize}};border-top-color:{{resolvedLoadingColor}};border-right-color:{{resolvedLoadingColor}};"></view>
<toy-icon
wx:elif="{{ icon }}"
name="{{ icon }}"
size="{{ resolvedIconSize }}"
color="{{ resolvedIconColor }}"
class-prefix="{{ iconClassPrefix }}"
custom-class="toy-btn__icon" />
<view wx:if="{{ !iconOnly }}" class="toy-btn__label">
<slot></slot>
</view>
</button>
miniprogram/toy/icon/icon.json
+6
View File
@@ -0,0 +1,6 @@
{
"usingComponents": {},
"component": true,
"styleIsolation": "apply-shared",
"addGlobalClass": true
}
miniprogram/toy/icon/icon.less
+33
View File
@@ -0,0 +1,33 @@
@import '../../style/theme.less';
@import '../../assets/fonts/iconfont.less';
.toy-icon-root {
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: inherit;
color: inherit;
line-height: 1;
box-sizing: border-box;
&--image {
width: @font-size-icon;
height: @font-size-icon;
}
&__image {
width: 100%;
height: 100%;
display: block;
}
/* 内层 text 显示 iconfont 字形 */
> text {
display: inline-block;
line-height: 1;
font-style: normal;
}
}
miniprogram/toy/icon/icon.ts
+95
View File
@@ -0,0 +1,95 @@
Component({
options: {
styleIsolation: 'apply-shared',
addGlobalClass: true,
},
properties: {
name: {
type: String,
value: '',
},
color: {
type: String,
value: '',
},
size: {
type: String,
value: '',
},
classPrefix: {
type: String,
value: 'toy-icon',
},
style: {
type: String,
value: '',
},
},
externalClasses: ['custom-class', 'ext-class'],
data: {
isImage: false,
rootClassName: '',
rootStyle: '',
fontGlyphClass: '',
},
observers: {
'name,color,size,classPrefix,style': function () {
this.syncViewState();
},
},
lifetimes: {
attached() {
this.syncViewState();
},
},
methods: {
syncViewState() {
const { name, color, size, classPrefix, style } = this.data;
const isImage = this.isImageSource(name);
const normalizedSize = this.normalizeUnit(size);
const classNames = ['toy-icon-root'];
let fontGlyphClass = '';
if (isImage) {
classNames.push('toy-icon-root--image');
} else {
const parts: string[] = [];
if (classPrefix) {
parts.push(classPrefix);
}
if (name) {
parts.push(`${classPrefix}-${name}`);
}
fontGlyphClass = parts.join(' ');
}
const styleSegments = [style];
if (normalizedSize) {
styleSegments.push(`font-size:${normalizedSize}`);
if (isImage) {
styleSegments.push(`width:${normalizedSize}`);
styleSegments.push(`height:${normalizedSize}`);
}
}
if (color && !isImage) {
styleSegments.push(`color:${color}`);
}
this.setData({
isImage,
rootClassName: classNames.join(' '),
rootStyle: styleSegments.filter(Boolean).join(';'),
fontGlyphClass,
});
},
isImageSource(name: string) {
return /^(https?:\/\/|data:|\/|\.{1,2}\/)/.test(name);
},
normalizeUnit(value: string) {
if (!value) {
return '';
}
return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
},
},
});
miniprogram/toy/icon/icon.wxml
+10
View File
@@ -0,0 +1,10 @@
<view
wx:if="{{isImage}}"
class="{{rootClassName}} custom-class ext-class"
style="{{rootStyle}}">
<image src="{{name}}" mode="aspectFit" class="toy-icon-root__image" />
</view>
<!-- 字体图标：内层 text 承载 iconfont（::before），外层 view 负责布局与 externalClass -->
<view wx:else class="{{rootClassName}} custom-class ext-class" style="{{rootStyle}}">
<text class="{{fontGlyphClass}}"></text>
</view>
miniprogram/ui/wxs/base.wxs → miniprogram/toy/wxs/base.wxs
View File
miniprogram/ui/button/button.json
-7
View File
@@ -1,7 +0,0 @@
{
"component": true,
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"van-loading": "@vant/weapp/loading/index"
}
}
miniprogram/ui/button/button.less
-184
View File
@@ -1,184 +0,0 @@
@button-default-height: 92rpx;
@button-border-radius: 16rpx;
@button-default-font-size: 32rpx;
@button-default-color: #fff;
wx-button:not([size=mini]) {
margin-left: auto;
margin-right: auto;
width: auto;
}
.toy-button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: @button-default-height;
line-height: @button-default-height;
border-radius: @button-border-radius;
font-size: @button-default-font-size;
color: @button-default-color;
padding: 0 24rpx;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
border: none;
&--primary {
background: #FFD719;
box-shadow: 0 4rpx 12rpx rgba(255, 215, 25, 0.3);
color: #141414;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(255, 215, 25, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--green {
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--secondary {
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--white {
background: #FFFFFF;
border: 1rpx solid #E8E8E8;
color: #141414;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
border-color: #E8E8E8;
}
&.plain {
color: #FFFFFF;
background: transparent;
border: 1rpx solid #FFFFFF;
}
&.active {
transform: scale(0.92);
background: #F8F8F8;
animation: buttonPress 0.15s ease-in-out;
}
}
&--flat {
box-shadow: none !important;
border: none !important;
transition: all 0.15s ease-in-out;
// 覆盖所有颜色变体
&.toy-button--primary,
&.toy-button--green,
&.toy-button--secondary,
&.toy-button--white {
box-shadow: none !important;
border: none !important;
&.active {
transform: scale(0.92) !important;
animation: buttonPress 0.15s ease-in-out !important;
}
}
// 特殊处理白色plain模式
&.toy-button--white.plain {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
// 彩色按钮active背景变化
&.toy-button--primary.active {
background: rgba(255, 215, 25, 0.8);
}
&.toy-button--green.active {
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--secondary.active {
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--white.active {
background: rgba(255, 255, 255, 0.8);
}
}
.loading-class,
&__icon {
margin-right: 12rpx;
}
// 添加按钮点击动画类
&.button-press {
animation: buttonPress 0.15s ease-in-out;
}
}
// 按钮点击动画
@keyframes buttonPress {
0% {
transform: scale(1);
}
25% {
transform: scale(0.92);
}
50% {
transform: scale(0.98);
}
75% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
}
miniprogram/ui/button/button.ts
-108
View File
@@ -1,108 +0,0 @@
Component({
options: {
// multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
type: {
type: String,
value: 'default', // primary, green, secondary, white
},
openType: {
type: String,
value: '',
},
plain: {
type: Boolean,
value: false, // 是否朴素按钮
},
size: {
type: String,
value: 'normal', // large, normal, small, mini
},
disabled: {
type: Boolean,
value: false, // 是否禁用
},
flat: {
type: Boolean,
value: false, // 是否扁平化
},
loading: {
type: Boolean,
value: false, // 是否加载中
},
style: {
type: String,
value: '', // 自定义样式
},
// className: {
// type: String,
// value: '', // 自定义类名
// },
width: {
type: String,
value: '', // 按钮宽度
},
height: {
type: String,
value: '',
},
loadingType: {
type: String,
value: 'circular',
},
loadingSize: {
type: String,
value: '20px',
},
loadingColor: {
type: String,
value: '#ffffff',
},
// icon
icon: {
type: String,
value: '',
},
iconClassPrefix: {
type: String,
value: 'toy-icon',
},
iconSize: {
type: String,
value: '44rpx',
},
iconColor: {
type: String,
value: '#ffffff',
},
},
/**
* 组件的初始数据
*/
data: {},
lifetimes: {
attached() {
const { type, plain, disabled } = this.data;
if (type === 'white' && !plain) {
const iconColor = disabled ? 'rgba(34, 36, 37, 0.5)' : 'rgba(34, 36, 37, 0.9)';
this.setData({
iconColor,
});
}
},
},
/**
* 组件的方法列表
*/
methods: {
onClick(e: WechatMiniprogram.TouchEvent): void {
this.triggerEvent('click', e);
},
},
externalClasses: ['custom-class'],
});
miniprogram/ui/button/button.wxs
-33
View File
@@ -1,33 +0,0 @@
module.exports = {
touchStart: function (event, ownerInstance) {
var instance = event.instance;
var dataSet = instance.getDataset();
var disabled = dataSet.disabled;
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.addClass('active');
}
},
touchEnd: function (event, ownerInstance) {
var instance = event.instance;
var dataSet = instance.getDataset();
var disabled = dataSet.disabled;
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.removeClass('active');
}
},
getIconColor: function (iconColor, type, plain, disabled) {
if (type === 'primary') {
return disabled ? '#CCCCCC' : '#141414';
}
if (type === 'white' && !plain) {
return disabled ? 'rgba(34, 36, 37, 0.5)' : 'rgba(34, 36, 37, 0.9)';
}
return iconColor;
},
};
miniprogram/ui/icon/icon.json
-4
View File
@@ -1,4 +0,0 @@
{
"usingComponents": {},
"component": true
}
miniprogram/ui/icon/icon.less
-21
View File
@@ -1,21 +0,0 @@
@import '../../style/theme.less';
@import '../../assets/fonts/iconfont.less';
.icon {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
font-size: inherit;
color: inherit;
&.icon_image {
width: @font-size-icon;
height: @font-size-icon;
}
&__image {
width: 100%;
height: 100%;
}
}
miniprogram/ui/icon/icon.ts
-35
View File
@@ -1,35 +0,0 @@
Component({
options: {
//@ts-ignore
styleIsolation: 'apply-shared',
},
properties: {
// icon name
name: {
type: String,
value: '',
optionalTypes: [String],
},
// icon color
color: {
type: String,
value: '',
optionalTypes: [String],
},
// icon size
size: {
type: String,
value: '',
optionalTypes: [String],
},
// icon classPrefix
classPrefix: {
type: String,
value: 'icon',
optionalTypes: [String],
},
},
externalClasses: ['ext-class'],
data: {},
methods: {},
});
miniprogram/ui/icon/icon.wxml
-4
View File
@@ -1,4 +0,0 @@
<wxs src="../wxs/base.wxs" module="Utils" />
<view class="{{ Utils.classNames('icon iconfont ' + classPrefix, { icon_image: Utils.isUrl(name)}) }} {{ !Utils.isUrl(name) && classPrefix + '-' + name }} ext-class" style="{{size ? 'font-size: ' + size + 'rpx;' : ''}}{{color ? 'color: ' + color + ';' : ''}}{{Utils.isUrl(name) && size ? 'width: ' + size + ';height: ' + size + ';' : ''}}">
<image wx:if="{{ Utils.isUrl(name) }}" src="{{ name }}" mode='aspectFit' class="icon__image" />
</view>
miniprogram/utils/navMetrics.ts
+1 -1
View File
@@ -1,2 +1,2 @@
/** 与 style/theme3.less 中 @nav-inner-height 对齐（px） */
/** 与 style/theme.less 中 @nav-inner-height 对齐（px） */
export const NAV_INNER_PX = 44;