From a2653e6d5aeb02f083550e155fcbc21224000b4c Mon Sep 17 00:00:00 2001 From: mjz <2286101414@qq.com> Date: Tue, 13 Jun 2023 07:46:55 +0800 Subject: [PATCH] mjz update --- docs/.vuepress/dist/404.html | 4 +- docs/.vuepress/dist/archives/index.html | 19 +- .../js/{10.9bc4e830.js => 10.2c6b507c.js} | 2 +- .../js/{11.aa5f2866.js => 11.8f891ef9.js} | 2 +- .../js/{12.b6dfb3ff.js => 12.5a61345d.js} | 2 +- docs/.vuepress/dist/assets/js/13.52dfb2d7.js | 1 + docs/.vuepress/dist/assets/js/13.fa82888f.js | 1 - docs/.vuepress/dist/assets/js/14.de01b888.js | 1 - docs/.vuepress/dist/assets/js/14.ee6b7794.js | 1 + docs/.vuepress/dist/assets/js/15.2c1914c5.js | 1 + docs/.vuepress/dist/assets/js/15.f4a625ba.js | 1 - docs/.vuepress/dist/assets/js/16.7a82715e.js | 1 + docs/.vuepress/dist/assets/js/16.d2825fa1.js | 1 - docs/.vuepress/dist/assets/js/17.5b31e114.js | 1 - docs/.vuepress/dist/assets/js/17.c9592bc4.js | 1 + docs/.vuepress/dist/assets/js/18.78def283.js | 1 + docs/.vuepress/dist/assets/js/18.d3188366.js | 1 - docs/.vuepress/dist/assets/js/19.5f011825.js | 1 + docs/.vuepress/dist/assets/js/20.b480e9bf.js | 1 + docs/.vuepress/dist/assets/js/21.1aa9948a.js | 1 + docs/.vuepress/dist/assets/js/21.44ec1dc7.js | 1 - docs/.vuepress/dist/assets/js/22.2bf7c109.js | 1 + docs/.vuepress/dist/assets/js/22.3c0d8868.js | 1 - docs/.vuepress/dist/assets/js/23.0e21233a.js | 1 + docs/.vuepress/dist/assets/js/23.a105e75e.js | 1 - docs/.vuepress/dist/assets/js/24.4420ea87.js | 1 - docs/.vuepress/dist/assets/js/24.7b300973.js | 1 + .../js/{25.1ed8cac5.js => 25.96bbab41.js} | 2 +- .../js/{26.eea2fb13.js => 26.24fadaff.js} | 2 +- .../js/{28.e9603cb0.js => 28.2a118694.js} | 2 +- .../js/{30.6b55ac5f.js => 30.2daabb12.js} | 2 +- .../js/{31.6798c53e.js => 31.c9d2ae6b.js} | 2 +- .../js/{32.d3f0e1fc.js => 32.e86ce51e.js} | 2 +- .../js/{33.901c0e5c.js => 33.e61116b9.js} | 2 +- .../js/{34.588cf7ee.js => 34.664f5502.js} | 2 +- .../js/{19.908b9cea.js => 35.a3f9ac6f.js} | 2 +- docs/.vuepress/dist/assets/js/35.f9cf5c30.js | 1 - docs/.vuepress/dist/assets/js/36.124c98a3.js | 1 - .../js/{20.bd3c0c15.js => 36.41463aa2.js} | 2 +- .../js/{6.5d3b8b43.js => 6.79dc241c.js} | 2 +- .../js/{7.cba8e246.js => 7.14247048.js} | 2 +- .../js/{8.91b4f711.js => 8.b5737bc4.js} | 2 +- .../js/{9.a1a5ef58.js => 9.c89ca94c.js} | 2 +- docs/.vuepress/dist/assets/js/app.3af2dee2.js | 16 + docs/.vuepress/dist/assets/js/app.733581c7.js | 16 - docs/.vuepress/dist/index.html | 12 +- docs/.vuepress/dist/pages/43ebee/index.html | 39 --- docs/.vuepress/dist/pages/733677/index.html | 39 --- docs/.vuepress/dist/pages/base/index.html | 8 +- .../.vuepress/dist/pages/baseStart/index.html | 8 +- .../dist/pages/basics/avatar/index.html | 10 +- .../dist/pages/basics/background/index.html | 6 +- .../dist/pages/basics/button/index.html | 6 +- .../dist/pages/basics/icon/index.html | 8 +- .../dist/pages/basics/layout/index.html | 8 +- .../dist/pages/basics/loading/index.html | 14 +- .../dist/pages/basics/progress/index.html | 14 +- .../dist/pages/basics/shadow/index.html | 12 +- .../dist/pages/basics/tag/index.html | 12 +- .../dist/pages/basics/text/index.html | 8 +- .../pages/component/bar/bottom/index.html | 194 +++++++++++- .../pages/component/bar/search/index.html | 154 ++++++++++ .../dist/pages/component/bar/title/index.html | 95 ++++++ .../dist/pages/component/bar/top/index.html | 101 +++++++ .../dist/pages/component/card/index.html | 104 ++++++- .../dist/pages/component/chat/index.html | 8 +- .../dist/pages/component/form/index.html | 6 +- .../dist/pages/component/list/index.html | 284 +++++++++++++++++- .../dist/pages/component/modal/index.html | 8 +- .../dist/pages/component/nav/index.html | 60 +++- .../dist/pages/component/steps/index.html | 6 +- .../dist/pages/component/swiper/index.html | 8 +- .../dist/pages/component/timeline/index.html | 6 +- docs/.vuepress/dist/pages/f2dfd8/index.html | 39 --- .../dist/pages/plugin/animation/index.html | 6 +- .../dist/pages/plugin/drawer/index.html | 6 +- .../dist/pages/plugin/indexes/index.html | 6 +- .../dist/pages/plugin/verticalnav/index.html | 8 +- 78 files changed, 1119 insertions(+), 297 deletions(-) rename docs/.vuepress/dist/assets/js/{10.9bc4e830.js => 10.2c6b507c.js} (99%) rename docs/.vuepress/dist/assets/js/{11.aa5f2866.js => 11.8f891ef9.js} (96%) rename docs/.vuepress/dist/assets/js/{12.b6dfb3ff.js => 12.5a61345d.js} (99%) create mode 100644 docs/.vuepress/dist/assets/js/13.52dfb2d7.js delete mode 100644 docs/.vuepress/dist/assets/js/13.fa82888f.js delete mode 100644 docs/.vuepress/dist/assets/js/14.de01b888.js create mode 100644 docs/.vuepress/dist/assets/js/14.ee6b7794.js create mode 100644 docs/.vuepress/dist/assets/js/15.2c1914c5.js delete mode 100644 docs/.vuepress/dist/assets/js/15.f4a625ba.js create mode 100644 docs/.vuepress/dist/assets/js/16.7a82715e.js delete mode 100644 docs/.vuepress/dist/assets/js/16.d2825fa1.js delete mode 100644 docs/.vuepress/dist/assets/js/17.5b31e114.js create mode 100644 docs/.vuepress/dist/assets/js/17.c9592bc4.js create mode 100644 docs/.vuepress/dist/assets/js/18.78def283.js delete mode 100644 docs/.vuepress/dist/assets/js/18.d3188366.js create mode 100644 docs/.vuepress/dist/assets/js/19.5f011825.js create mode 100644 docs/.vuepress/dist/assets/js/20.b480e9bf.js create mode 100644 docs/.vuepress/dist/assets/js/21.1aa9948a.js delete mode 100644 docs/.vuepress/dist/assets/js/21.44ec1dc7.js create mode 100644 docs/.vuepress/dist/assets/js/22.2bf7c109.js delete mode 100644 docs/.vuepress/dist/assets/js/22.3c0d8868.js create mode 100644 docs/.vuepress/dist/assets/js/23.0e21233a.js delete mode 100644 docs/.vuepress/dist/assets/js/23.a105e75e.js delete mode 100644 docs/.vuepress/dist/assets/js/24.4420ea87.js create mode 100644 docs/.vuepress/dist/assets/js/24.7b300973.js rename docs/.vuepress/dist/assets/js/{25.1ed8cac5.js => 25.96bbab41.js} (87%) rename docs/.vuepress/dist/assets/js/{26.eea2fb13.js => 26.24fadaff.js} (86%) rename docs/.vuepress/dist/assets/js/{28.e9603cb0.js => 28.2a118694.js} (86%) rename docs/.vuepress/dist/assets/js/{30.6b55ac5f.js => 30.2daabb12.js} (86%) rename docs/.vuepress/dist/assets/js/{31.6798c53e.js => 31.c9d2ae6b.js} (87%) rename docs/.vuepress/dist/assets/js/{32.d3f0e1fc.js => 32.e86ce51e.js} (86%) rename docs/.vuepress/dist/assets/js/{33.901c0e5c.js => 33.e61116b9.js} (87%) rename docs/.vuepress/dist/assets/js/{34.588cf7ee.js => 34.664f5502.js} (86%) rename docs/.vuepress/dist/assets/js/{19.908b9cea.js => 35.a3f9ac6f.js} (68%) delete mode 100644 docs/.vuepress/dist/assets/js/35.f9cf5c30.js delete mode 100644 docs/.vuepress/dist/assets/js/36.124c98a3.js rename docs/.vuepress/dist/assets/js/{20.bd3c0c15.js => 36.41463aa2.js} (68%) rename docs/.vuepress/dist/assets/js/{6.5d3b8b43.js => 6.79dc241c.js} (96%) rename docs/.vuepress/dist/assets/js/{7.cba8e246.js => 7.14247048.js} (99%) rename docs/.vuepress/dist/assets/js/{8.91b4f711.js => 8.b5737bc4.js} (99%) rename docs/.vuepress/dist/assets/js/{9.a1a5ef58.js => 9.c89ca94c.js} (99%) create mode 100644 docs/.vuepress/dist/assets/js/app.3af2dee2.js delete mode 100644 docs/.vuepress/dist/assets/js/app.733581c7.js delete mode 100644 docs/.vuepress/dist/pages/43ebee/index.html delete mode 100644 docs/.vuepress/dist/pages/733677/index.html create mode 100644 docs/.vuepress/dist/pages/component/bar/search/index.html create mode 100644 docs/.vuepress/dist/pages/component/bar/title/index.html create mode 100644 docs/.vuepress/dist/pages/component/bar/top/index.html delete mode 100644 docs/.vuepress/dist/pages/f2dfd8/index.html diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html index 45d518d..9dac365 100644 --- a/docs/.vuepress/dist/404.html +++ b/docs/.vuepress/dist/404.html @@ -10,11 +10,11 @@ - +
404
这是一个Four-Oh-Four.
返回首页
- + diff --git a/docs/.vuepress/dist/archives/index.html b/docs/.vuepress/dist/archives/index.html index 69a39c1..fe6df13 100644 --- a/docs/.vuepress/dist/archives/index.html +++ b/docs/.vuepress/dist/archives/index.html @@ -10,7 +10,7 @@ - + @@ -18,20 +18,11 @@ GitHub (opens new window)

+ (opens new window)

归档

- 总共 3 篇文章 -
+ 总共 0 篇文章 +

    Theme by Vdoing | Copyright © 2022-2023 @@ -44,6 +35,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/assets/js/10.9bc4e830.js b/docs/.vuepress/dist/assets/js/10.2c6b507c.js similarity index 99% rename from docs/.vuepress/dist/assets/js/10.9bc4e830.js rename to docs/.vuepress/dist/assets/js/10.2c6b507c.js index 43cb1b7..c1f4ab9 100644 --- a/docs/.vuepress/dist/assets/js/10.9bc4e830.js +++ b/docs/.vuepress/dist/assets/js/10.2c6b507c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{338:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"文字大小"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字大小"}},[t._v("#")]),t._v(" 文字大小")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-xsl 文字大小 60px 用于图标、数字等特大显示\n.text-sl 文字大小 40px 用于图标、数字等较大显示\n.text-xxl 文字大小 22px 用于金额数字等信息\n.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页\n.text-lg 文字大小 16px 页面小标题，首要层级显示内容\n.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本\n.text-sm 文字大小 12px 页面辅助信息，次级内容等\n.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字\n")])])]),a("h2",{attrs:{id:"文字颜色"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字颜色"}},[t._v("#")]),t._v(" 文字颜色")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-red "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 嫣红 #e54d42 */")]),t._v("\n.text-orange "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桔橙 #f37b1d */")]),t._v("\n.text-yellow "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 明黄 #fbbd08 */")]),t._v("\n.text-olive "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 橄榄 #8dc63f */")]),t._v("\n.text-green "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 森绿 #39b54a */")]),t._v("\n.text-cyan "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 天青 #1cbbb4 */")]),t._v("\n.text-blue "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 海蓝 #0081ff */")]),t._v("\n.text-purple "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 姹紫 #6739b6 */")]),t._v("\n.text-mauve "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 木槿 #9c26b0 */")]),t._v("\n.text-pink "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桃粉 #e03997 */")]),t._v("\n.text-brown "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 棕褐 #a5673f */")]),t._v("\n.text-grey "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 玄灰 #8799a3 */")]),t._v("\n.text-gray "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 草灰 #aaaaaa */")]),t._v("\n.text-black "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 墨黑 #333333 */")]),t._v("\n.text-white "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 雅白 #ffffff */")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字阴影"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字阴影"}},[t._v("#")]),t._v(" 文字阴影")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".text-shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 4px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("204"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 69"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 59"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字截断"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字截断"}},[t._v("#")]),t._v(" 文字截断")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-cut 定义文字容器宽度，超出截断\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-cut padding bg-grey radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("220px")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"文字对齐"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字对齐"}},[t._v("#")]),t._v(" 文字对齐")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-left padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊文字"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊文字"}},[t._v("#")]),t._v(" 特殊文字")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-price 价格文本，利用伪元素添加"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"¥"')]),t._v("符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding text-center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("80.00"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('价格文本，利用伪元素添加"¥"符号'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-Abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("英文单词首字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-ABC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母小写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{340:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"文字大小"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字大小"}},[t._v("#")]),t._v(" 文字大小")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-xsl 文字大小 60px 用于图标、数字等特大显示\n.text-sl 文字大小 40px 用于图标、数字等较大显示\n.text-xxl 文字大小 22px 用于金额数字等信息\n.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页\n.text-lg 文字大小 16px 页面小标题，首要层级显示内容\n.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本\n.text-sm 文字大小 12px 页面辅助信息，次级内容等\n.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字\n")])])]),a("h2",{attrs:{id:"文字颜色"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字颜色"}},[t._v("#")]),t._v(" 文字颜色")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-red "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 嫣红 #e54d42 */")]),t._v("\n.text-orange "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桔橙 #f37b1d */")]),t._v("\n.text-yellow "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 明黄 #fbbd08 */")]),t._v("\n.text-olive "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 橄榄 #8dc63f */")]),t._v("\n.text-green "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 森绿 #39b54a */")]),t._v("\n.text-cyan "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 天青 #1cbbb4 */")]),t._v("\n.text-blue "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 海蓝 #0081ff */")]),t._v("\n.text-purple "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 姹紫 #6739b6 */")]),t._v("\n.text-mauve "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 木槿 #9c26b0 */")]),t._v("\n.text-pink "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桃粉 #e03997 */")]),t._v("\n.text-brown "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 棕褐 #a5673f */")]),t._v("\n.text-grey "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 玄灰 #8799a3 */")]),t._v("\n.text-gray "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 草灰 #aaaaaa */")]),t._v("\n.text-black "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 墨黑 #333333 */")]),t._v("\n.text-white "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 雅白 #ffffff */")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字阴影"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字阴影"}},[t._v("#")]),t._v(" 文字阴影")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".text-shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 4px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("204"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 69"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 59"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字截断"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字截断"}},[t._v("#")]),t._v(" 文字截断")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-cut 定义文字容器宽度，超出截断\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-cut padding bg-grey radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("220px")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"文字对齐"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字对齐"}},[t._v("#")]),t._v(" 文字对齐")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-left padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊文字"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊文字"}},[t._v("#")]),t._v(" 特殊文字")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-price 价格文本，利用伪元素添加"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"¥"')]),t._v("符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding text-center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("80.00"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('价格文本，利用伪元素添加"¥"符号'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-Abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("英文单词首字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-ABC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母小写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/11.aa5f2866.js b/docs/.vuepress/dist/assets/js/11.8f891ef9.js similarity index 96% rename from docs/.vuepress/dist/assets/js/11.aa5f2866.js rename to docs/.vuepress/dist/assets/js/11.8f891ef9.js index b6344d0..d8ab0d4 100644 --- a/docs/.vuepress/dist/assets/js/11.aa5f2866.js +++ b/docs/.vuepress/dist/assets/js/11.8f891ef9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{339:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),s("p",[t._v("点击右侧图标页面，对应的图标，即可复制类名："),s("code",[t._v("cuIcon-图标名称")])])]),t._v(" "),s("h2",{attrs:{id:"引入样式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引入样式"}},[t._v("#")]),t._v(" 引入样式")]),t._v(" "),s("p",[t._v("编辑 "),s("code",[t._v("App.vue")]),t._v("文件在"),s("code",[t._v("\n\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\nApp.vue 获得系统信息\n\nonLaunch: function() {\n uni.getSystemInfo({\n success: function(e) {\n // #ifndef MP\n Vue.prototype.StatusBar = e.statusBarHeight;\n if (e.platform == \'android\') {\n Vue.prototype.CustomBar = e.statusBarHeight + 50;\n } else {\n Vue.prototype.CustomBar = e.statusBarHeight + 45;\n };\n // #endif\n // #ifdef MP-WEIXIN\n Vue.prototype.StatusBar = e.statusBarHeight;\n let custom = wx.getMenuButtonBoundingClientRect();\n Vue.prototype.Custom = custom;\n Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n // #endif\t\t\n // #ifdef MP-ALIPAY\n Vue.prototype.StatusBar = e.statusBarHeight;\n Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;\n // #endif\n }\n })\n},\n\n\npages.json 配置取消系统导航栏\n\n"globalStyle": {\n "navigationStyle": "custom"\n},\n\n\n复制代码结构可以直接使用，注意全局变量的获取。\n\n使用封装,在main.js 引入 cu-custom 组件。\n\nimport cuCustom from \'./colorui/components/cu-custom.vue\'\nVue.component(\'cu-custom\',cuCustom)\n\n\npage.vue 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgColor 背景颜色类名 String \'\'\nisBack 是否开启返回 Boolean false\nbgImage 背景图片路径 String \'\'\n\nSLOT块 作用\nbackText 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)\n\n\n# 使用原生小程序开发\n\n\n# 从现有项目开始\n\n下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录\n\nApp.wxss` 引入关键Css `main.wxss` `icon.wxss\n@import "colorui/main.wxss";\n@import "colorui/icon.wxss";\n@import "app.css"; /* 你的项目css */\n....\n\n\n\n# 从新项目开始\n\n下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\nApp.js 获得系统信息\n\nonLaunch: function() {\n wx.getSystemInfo({\n success: e => {\n this.globalData.StatusBar = e.statusBarHeight;\n let custom = wx.getMenuButtonBoundingClientRect();\n this.globalData.Custom = custom; \n this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n }\n })\n},\n\n\nApp.json 配置取消系统导航栏,并全局引入组件\n\n"window": {\n "navigationStyle": "custom"\n},\n"usingComponents": {\n "cu-custom":"/colorui/components/cu-custom"\n}\n\n\npage.wxml 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgColor 背景颜色类名 String \'\'\nisBack 是否开启返回 Boolean false\nisCustom 是否开启左侧胶囊 Boolean false\nbgImage 背景图片路径 String \'\'\n\nSLOT块 作用\nbackText 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)',normalizedContent:'# 素材\n\ncolorui在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和ui素材供开发使用哦！ 语雀-colorui群资源\n\n\n# 前言\n\ncolorui是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。\n\n\n# 交流\n\n微信群：加入微信群请先添加开发者微信，备注uniapp插件市场。qq群：240787041 或扫描二维码。\n\n\n\n\n# 使用uniapp开发\n\n\n# 开始\n\n下载源码解压获得/colorui-uniapp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录\n\napp.vue` 引入关键css `main.css` `icon.css\n\n\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\napp.vue 获得系统信息\n\nonlaunch: function() {\n uni.getsysteminfo({\n success: function(e) {\n // #ifndef mp\n vue.prototype.statusbar = e.statusbarheight;\n if (e.platform == \'android\') {\n vue.prototype.custombar = e.statusbarheight + 50;\n } else {\n vue.prototype.custombar = e.statusbarheight + 45;\n };\n // #endif\n // #ifdef mp-weixin\n vue.prototype.statusbar = e.statusbarheight;\n let custom = wx.getmenubuttonboundingclientrect();\n vue.prototype.custom = custom;\n vue.prototype.custombar = custom.bottom + custom.top - e.statusbarheight;\n // #endif\t\t\n // #ifdef mp-alipay\n vue.prototype.statusbar = e.statusbarheight;\n vue.prototype.custombar = e.statusbarheight + e.titlebarheight;\n // #endif\n }\n })\n},\n\n\npages.json 配置取消系统导航栏\n\n"globalstyle": {\n "navigationstyle": "custom"\n},\n\n\n复制代码结构可以直接使用，注意全局变量的获取。\n\n使用封装,在main.js 引入 cu-custom 组件。\n\nimport cucustom from \'./colorui/components/cu-custom.vue\'\nvue.component(\'cu-custom\',cucustom)\n\n\npage.vue 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgcolor 背景颜色类名 string \'\'\nisback 是否开启返回 boolean false\nbgimage 背景图片路径 string \'\'\n\nslot块 作用\nbacktext 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)\n\n\n# 使用原生小程序开发\n\n\n# 从现有项目开始\n\n下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录\n\napp.wxss` 引入关键css `main.wxss` `icon.wxss\n@import "colorui/main.wxss";\n@import "colorui/icon.wxss";\n@import "app.css"; /* 你的项目css */\n....\n\n\n\n# 从新项目开始\n\n下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\napp.js 获得系统信息\n\nonlaunch: function() {\n wx.getsysteminfo({\n success: e => {\n this.globaldata.statusbar = e.statusbarheight;\n let custom = wx.getmenubuttonboundingclientrect();\n this.globaldata.custom = custom; \n this.globaldata.custombar = custom.bottom + custom.top - e.statusbarheight;\n }\n })\n},\n\n\napp.json 配置取消系统导航栏,并全局引入组件\n\n"window": {\n "navigationstyle": "custom"\n},\n"usingcomponents": {\n "cu-custom":"/colorui/components/cu-custom"\n}\n\n\npage.wxml 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgcolor 背景颜色类名 string \'\'\nisback 是否开启返回 boolean false\niscustom 是否开启左侧胶囊 boolean false\nbgimage 背景图片路径 string \'\'\n\nslot块 作用\nbacktext 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)',charsets:{cjk:!0},lastUpdated:"2023/05/28, 18:15:33",lastUpdatedTimestamp:1685268933e3},{title:"布局",frontmatter:{title:"布局",date:"2023-05-28T10:34:38.000Z",permalink:"/pages/basics/layout",article:!1},regularPath:"/10.%E6%96%87%E6%A1%A3/20.%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0/10.%E5%B8%83%E5%B1%80.html",relativePath:"10.文档/20.基础元素/10.布局.md",key:"v-189fb43f",path:"/pages/basics/layout/",headers:[{level:2,title:"Flex布局",slug:"flex布局",normalizedTitle:"flex布局",charIndex:2},{level:3,title:"固定尺寸",slug:"固定尺寸",normalizedTitle:"固定尺寸",charIndex:36},{level:3,title:"比例布局",slug:"比例布局",normalizedTitle:"比例布局",charIndex:668},{level:3,title:"水平对齐",slug:"水平对齐",normalizedTitle:"水平对齐",charIndex:1453},{level:3,title:"垂直对齐",slug:"垂直对齐",normalizedTitle:"垂直对齐",charIndex:2714},{level:2,title:"Grid布局",slug:"grid布局",normalizedTitle:"grid布局",charIndex:3584},{level:3,title:"等分列",slug:"等分列",normalizedTitle:"等分列",charIndex:3595},{level:3,title:"等高",slug:"等高",normalizedTitle:"等高",charIndex:3901},{level:2,title:"辅助布局",slug:"辅助布局",normalizedTitle:"辅助布局",charIndex:4512},{level:3,title:"浮动",slug:"浮动",normalizedTitle:"浮动",charIndex:4521},{level:3,title:"内外边距",slug:"内外边距",normalizedTitle:"内外边距",charIndex:4740}],headersStr:"Flex布局 固定尺寸 比例布局 水平对齐 垂直对齐 Grid布局 等分列 等高 辅助布局 浮动 内外边距",content:'# Flex布局\n\n父级容器的 class 需要加入 flex\n\n\n# 固定尺寸\n\n> css\n\n.basis-xs 所占比例 20%\n.basis-sm 所占比例 40%\n.basis-sub 所占比例 50%\n.basis-lg 所占比例 60%\n.basis-xl 所占比例 80%\n\n\n> 演示代码\n\n\n xs(20%)\n \n sm(40%)\n \n sub(50%)\n lg(60%)\n xl(80%)\n\n\n\n\n# 比例布局\n\n> css\n\n.flex-sub 所占比例 1\n.flex-twice 所占比例 2\n.flex-treble 所占比例 3\n\n\n> 演示代码\n\n\x3c!-- 1:1 --\x3e\n\n 1\n 1\n\n\x3c!-- 1:2 --\x3e\n\n 1\n 2\n\n\x3c!-- 1:2:3 --\x3e\n\n 1\n 2\n 3\n\n\n\n\n# 水平对齐\n\n父容器的 class 中加入 justify-start|end|center|between|around\n\n> css\n\n.justify-start 对齐方式 从行首开始排列\n.justify-end 对齐方式 从行尾开始排列\n.justify-center 对齐方式 居中排列\n.justify-between 对齐方式 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点\n.justify-around 对齐方式 均匀排列每个元素，每个元素之间的间隔相等\n\n\n> 演示代码\n\n\n start\n start\n\n\n end\n end\n\n\n center\n center\n\n\n between\n between\n\n\n around\n around\n\n\n\n\n# 垂直对齐\n\n父容器的 class 中加入 align-start|end|center\n\n> css\n\n.align-start 对齐方式 元素位于容器的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。\n.align-end 对齐方式 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。\n.align-center 对齐方式 元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。\n\n\n> 演示代码\n\n\n ColorUi\n start\n\n\n ColorUi\n end\n\n\n ColorUi\n center\n\n\n\n\n# Grid布局\n\n\n# 等分列\n\nclass 加入 grid col-1|2|3|...\n\n> 演示代码\n\n\n {{indexs+1}}\n\n\n\n\n# 等高\n\n在 class 中加入 grid col-4|5|... grid-square\n\n\n \n\n\n + diff --git a/docs/.vuepress/dist/pages/43ebee/index.html b/docs/.vuepress/dist/pages/43ebee/index.html deleted file mode 100644 index de4391a..0000000 --- a/docs/.vuepress/dist/pages/43ebee/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - 标题操作条 | ColorUI 使用文档 - - - - - - - - - - -
    ColorUI 使用文档
    • 文档
    • 交互组件
    • 操作条
    miren
    2023-06-02

    标题操作条

    底部操作条
    顶部操作条

    - ← - 顶部操作条→ -

    - Theme by - Vdoing - | Copyright © 2022-2023 - miren | MIT License
    - - - diff --git a/docs/.vuepress/dist/pages/733677/index.html b/docs/.vuepress/dist/pages/733677/index.html deleted file mode 100644 index 4755f7a..0000000 --- a/docs/.vuepress/dist/pages/733677/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - 顶部操作条 | ColorUI 使用文档 - - - - - - - - - - -
    ColorUI 使用文档
    • 文档
    • 交互组件
    • 操作条
    miren
    2023-06-02

    顶部操作条

    标题操作条
    搜索操作条

    - ← - 搜索操作条→ -

    - Theme by - Vdoing - | Copyright © 2022-2023 - miren | MIT License
    - - - diff --git a/docs/.vuepress/dist/pages/base/index.html b/docs/.vuepress/dist/pages/base/index.html index 702f507..1113545 100644 --- a/docs/.vuepress/dist/pages/base/index.html +++ b/docs/.vuepress/dist/pages/base/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    介绍

    温馨提示

    本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用。

    # 基本介绍

    Color UI 我想大家都知晓吧，我就不过多阐述了，是 文晓港 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的 Css 组件库.，属于出道即巅峰的史诗级大作，众所周知，万物皆可 Color UI，很多人用 Color UI 做了不少精美的项目，我也一样，在此再次感谢作者。

    ColorUI Github地址 (opens new window)

    ColorUI 插件市场 (opens new window)

    ColorUI 在线展示 (opens new window) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。

    # 文档说明

    文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。

    在查看文档的同时，可以根据右侧预览图对比当前查看模块的预览效果

    # 视图/目录 切换

    点击h5预览模板左上角的切换视图，可以随心所欲切换目录/视图，方便快速定位需要查找的内容

    上次更新: 2023/05/29, 22:47:21
    快速使用

    快速使用→

    Theme by Vdoing @@ -36,6 +36,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/baseStart/index.html b/docs/.vuepress/dist/pages/baseStart/index.html index 3ddb5dd..74ffabd 100644 --- a/docs/.vuepress/dist/pages/baseStart/index.html +++ b/docs/.vuepress/dist/pages/baseStart/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    快速使用

    # 素材

    ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！ 语雀-ColorUI群资源 (opens new window)

    # 前言

    ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。

    # 交流

    微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。

    img (opens new window)

    # 使用UniApp开发

    # 开始

    下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录

    App.vue` 引入关键Css `main.css` `icon.css
 <style>
 @import "colorui/main.css";
 @import "colorui/icon.css";
@@ -103,6 +103,6 @@ Vue.componen
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/avatar/index.html b/docs/.vuepress/dist/pages/basics/avatar/index.html index 104ed83..a73122c 100644 --- a/docs/.vuepress/dist/pages/basics/avatar/index.html +++ b/docs/.vuepress/dist/pages/basics/avatar/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    头像

    需要设置成头像的元素加上 class 类名 cu-avatar，然后再设置 css 样式 background-image 即可

    # 头像形状

    css 代码

    .cu-avatar  默认　
 .cu-avatar round  圆
 .cu-avatar radius  圆角

    演示代码

    <view class='cu-avatar'>默认</view>
@@ -59,7 +59,7 @@

    # 头像标签

    父容器是头像，该容器内是数字标签。

    演示代码

    <view class="cu-avatar radius bg-red margin-left">
     <view class="cu-tag badge cuIcon-male bg-blue"></view>
 </view>
-
    上次更新: 2023/06/01, 23:30:40
    标签
    进度条

    +

    上次更新: 2023/06/07, 23:32:56
    标签
    进度条

    ← 进度条→

    @@ -75,6 +75,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/background/index.html b/docs/.vuepress/dist/pages/basics/background/index.html index f7195dd..56c7e40 100644 --- a/docs/.vuepress/dist/pages/basics/background/index.html +++ b/docs/.vuepress/dist/pages/basics/background/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    - + diff --git a/docs/.vuepress/dist/pages/basics/loading/index.html b/docs/.vuepress/dist/pages/basics/loading/index.html index e6d4e83..d91b67b 100644 --- a/docs/.vuepress/dist/pages/basics/loading/index.html +++ b/docs/.vuepress/dist/pages/basics/loading/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    加载

    在需要设置加载的元素加上 class 类名 cu-load，可以设置自己喜欢的背景颜色 .bg-red|...

    加载状态 loading 正在加载中，over 加载完成，erro 加载失败

    css

    .cu-load loading  加载中
 .cu-load over     加载结束
 .cu-load erro     加载错误
 .cu-load loading load-cuIcon  只有加载图标没有文字
@@ -38,12 +38,12 @@
         </view>
     </block>
 </cu-custom>
-

    # 弹窗加载

    父容器加上 class cu-load load-modal，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容

    可以在弹窗里面放文字、带颜色的图标、静态图片等

    演示代码

    <view class="cu-load load-modal" v-if="loadModal">
+

    # 弹窗加载

    父容器加上 class 类名 cu-load load-modal，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容

    可以在弹窗里面放文字、带颜色的图标、静态图片等

    演示代码

    <view class="cu-load load-modal" v-if="loadModal">
     <!-- <view class="cuIcon-emojifill text-orange"></view> -->
     <image src="/static/logo.png" mode="aspectFit"></image>
     <view class="gray-text">加载中...</view>
 </view>
-

    # 进度条加载

    父容器加上 class load-progress show|hide，动态变量控制 class show 和 hide，动态 style 设置距离顶部的高度 top: 高度px

    容器里第一个就是加载的进度条，需要加上 class load-progress-bar bg-green|...，通过动态 style，控制进度

    容器里第二个就是右侧的加载圆圈，需要加上 class load-progress-spinner text-green|...

    演示代码

    <view class="cu-bar bg-white margin-top">
+

    # 进度条加载

    父容器加上 class 类名 load-progress show|hide，动态变量控制 class show 和 hide，动态 style 设置距离顶部的高度 top: 高度px

    容器里第一个就是加载的进度条，需要加上 class load-progress-bar bg-green|...，通过动态 style，控制进度

    容器里第二个就是右侧的加载圆圈，需要加上 class load-progress-spinner text-green|...

    演示代码

    <view class="cu-bar bg-white margin-top">
     <view class="action">
         <text class="cuIcon-title text-blue"></text>进度条加载
     </view>
@@ -80,7 +80,7 @@
 		}
 	}
 </script>
-
    上次更新: 2023/06/01, 23:30:40
    边框阴影
    底部操作条

    +

    上次更新: 2023/06/07, 23:32:56
    边框阴影
    底部操作条

    ← 底部操作条→

    @@ -96,6 +96,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/progress/index.html b/docs/.vuepress/dist/pages/basics/progress/index.html index 39814bd..2aad0a4 100644 --- a/docs/.vuepress/dist/pages/basics/progress/index.html +++ b/docs/.vuepress/dist/pages/basics/progress/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    进度条

    父容器加上 class 类名 cu-progress，该容器内放一个元素加上背景 .bg-red|...，设置样式 width: '10%'，10% 就是该进度条的所占比例。

    子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 width 属性，配合动态变量即可做到好看的动画效果

    # 进度条形状

    css 代码

    .cu-progress  默认　
 .cu-progress round  圆
 .cu-progress radius  椭圆

    演示代码

    <view class="cu-progress">
@@ -66,10 +66,10 @@
 </view>
 
 // 以下js代码参照 进度条形状 演示代码js
-

    # 进度条颜色

    子容器加上 class bg-red|...

    演示代码

    <view class="cu-progress round">
+

    # 进度条颜色

    子容器加上 class 类名 bg-red|...

    演示代码

    <view class="cu-progress round">
     <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
 </view>
-

    # 进度条条纹

    父容器加上 class striped，进度条就会以条纹形式展示。

    再加上 class active，进度条纹便以动画形式展示。

    演示代码

    <!-- 静态条纹 -->
+

    # 进度条条纹

    父容器加上 class striped，进度条就会以条纹形式展示。

    再加上 class 类名 active，进度条纹便以动画形式展示。

    演示代码

    <!-- 静态条纹 -->
 <view class="cu-progress round striped">
     <view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
 </view>
@@ -94,7 +94,7 @@
     </view>
     <text class="margin-left">80%</text>
 </view>
-
    上次更新: 2023/05/29, 22:50:31
    头像
    边框阴影

    +

    上次更新: 2023/06/07, 23:32:56
    头像
    边框阴影

    ← 边框阴影→

    @@ -110,6 +110,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/shadow/index.html b/docs/.vuepress/dist/pages/basics/shadow/index.html index ed5b693..077bb6b 100644 --- a/docs/.vuepress/dist/pages/basics/shadow/index.html +++ b/docs/.vuepress/dist/pages/basics/shadow/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    边框阴影

    # 边框

    在需要加边框的元素加上 class 类名 solid，加粗的就是 solids，然后还有单独四个不同的方向 solid-top|...

    css 代码

    .solid         四周
 .solid-top     上
 .solid-right   右
 .solid-bottom  
@@ -32,7 +32,7 @@
 <view class="padding solid-right">右</view>
 <view class="padding solid-bottom">下</view>
 <view class="padding solid-left">左</view>
-

    # 阴影

    在需要加阴影的元素加上 class shadow 即可

    css 代码

    .shadow              默认阴影
+

    # 阴影

    在需要加阴影的元素加上 class 类名 shadow 即可

    css 代码

    .shadow              默认阴影
 .shadow bg-blue|...  根据背景颜色而改变的阴影
 .shadow shadow-lg    长阴影
 .shadow-warp         翘边阴影
@@ -44,7 +44,7 @@
 <view class="padding-xl radius shadow-blur bg-red bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
     <view>根据背景图而改变的阴影</view>
 </view>
-
    上次更新: 2023/06/01, 23:30:40
    进度条
    加载

    +

    上次更新: 2023/06/07, 23:32:56
    进度条
    加载

    ← 加载→

    @@ -60,6 +60,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/tag/index.html b/docs/.vuepress/dist/pages/basics/tag/index.html index 36b181a..45317bf 100644 --- a/docs/.vuepress/dist/pages/basics/tag/index.html +++ b/docs/.vuepress/dist/pages/basics/tag/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    标签

    需要设置成标签的元素加上 class 类名 cu-tag 即可

    # 标签形状

    css 代码

    .cu-tag  默认　　
 .cu-tag round  椭圆
 .cu-tag radius  圆角

    演示代码

    <view class='cu-tag'>默认</view>
@@ -76,7 +76,7 @@
         23
     </view>
 </view>
-

    # 数字标签

    父容器一般为头像 cu-avatar，其中包裹标签，加入样式 .badge

    演示代码 可对比右侧预览

    <view class='cu-avatar xl radius'>
+

    # 数字标签

    父容器一般为头像 cu-avatar，其中包裹标签，class 为 cu-tag badge，元素内部没有内容，则默认为红色圆点

    演示代码 可对比右侧预览

    <view class='cu-avatar xl radius'>
     港
     <view class="cu-tag badge">99+</view>
 </view>
@@ -90,7 +90,7 @@
 <view class='cu-avatar xl radius'>
     <view class='cu-tag badge'>99+</view>
 </view>
-
    上次更新: 2023/06/01, 23:30:40
    按钮
    头像

    +

    上次更新: 2023/06/07, 23:32:56
    按钮
    头像

    ← 头像→

    @@ -106,6 +106,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/text/index.html b/docs/.vuepress/dist/pages/basics/text/index.html index 55a505e..745d9ae 100644 --- a/docs/.vuepress/dist/pages/basics/text/index.html +++ b/docs/.vuepress/dist/pages/basics/text/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    文本

    # 文字大小

    .text-xsl  文字大小 60px 用于图标、数字等特大显示
 .text-sl   文字大小 40px 用于图标、数字等较大显示
 .text-xxl  文字大小 22px 用于金额数字等信息
 .text-xl   文字大小 18px 页面大标题，用于结果页等单一信息页
@@ -113,6 +113,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/bottom/index.html b/docs/.vuepress/dist/pages/component/bar/bottom/index.html index 09ca07e..1e5bab7 100644 --- a/docs/.vuepress/dist/pages/component/bar/bottom/index.html +++ b/docs/.vuepress/dist/pages/component/bar/bottom/index.html @@ -10,7 +10,7 @@ - + @@ -18,14 +18,196 @@ GitHub (opens new window)

    底部操作条

    温馨提示

    我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。 +想要使用自定义底部操作条的同学，需要用组件来进行封装，因此这里建议大家提前学习一下组件的封装。

    # 自定义底部操作条

    1. pages.json 文件中的 tabBar 不需要配置，操作条代码放在首页即可。

    2. pages.json 文件中的 pages 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。

    3. 示例中通过变量 PageCur 来切换不同 tabBar 页面，控制 tabBar 图标文字的样式切换，同时也控制需要显示对应 tabBar 的页面（组件引入）。

    点此查看官方示例 
    <template>
+	<view>
+        <!-- 这三个是对应的页面 -->
+		<basics v-if="PageCur=='basics'"></basics>
+		<components v-if="PageCur=='component'"></components>
+		<plugin v-if="PageCur=='plugin'"></plugin>
+        <!-- 底部操作条 -->
+		<view class="cu-bar tabbar bg-white shadow foot">
+			<view class="action" @click="NavChange" data-cur="basics">
+				<view class='cuIcon-cu-image'>
+					<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
+				</view>
+				<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
+			</view>
+			<view class="action" @click="NavChange" data-cur="component">
+				<view class='cuIcon-cu-image'>
+					<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
+				</view>
+				<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
+			</view>
+			<view class="action" @click="NavChange" data-cur="plugin">
+				<view class='cuIcon-cu-image'>
+					<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
+				</view>
+				<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
+			</view>
+		</view>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+		return {
+				PageCur: 'basics'
+			}
+		},
+		methods: {
+			NavChange: function(e) {
+				this.PageCur = e.currentTarget.dataset.cur
+			}
+		}
+	}
+</script>
+

    # tab 操作条实现

    1. 操作条的父容器需求加上 class 类名 cu-bar 和 tabbar，同时可以加上 bg-white|... shadow|... 等样式来优化操作条。

    2. 固定底部：需要操作条固定在底部加上 class 类名 foot 即可。

    3. 每一个 tab 的元素需要加上 class 类名 action，该 tab 里面则放置对应的图标和文字。

    4. 展示不同的页面，以及 tab 需要用一个变量 PageCur 来进行控制。（官方示例 tab 图标是采用的图片，自定义也可以用图标）。

    5. 数字标签：对应的 tab 元素里可以加上 数字标签 <view class="cu-tag badge">99+</view>，红色圆点：数字标签里没有内容。

    6. 中间的添加按钮：action 同级加上 class 类名 add-action，其里面的图标换成 button 即可。

    演示代码（可直接复制使用）

    <template>
+	<view>
+        <!-- 这里是对应的页面 -->
+		<homePage v-if="PageCur=='home'"></homePage>
+
+        <!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
+        <view class="cu-bar tabbar bg-white foot">
+            <!-- 首页 -->
+            <view class="action" :class="PageCur=='home'?'text-green':'text-gray'" 
+                data-cur="home" @click="NavChange">
+                <view class="cuIcon-homefill"></view> 首页
+            </view>
+            <!-- 分类 -->
+            <view class="action" :class="PageCur=='similar'?'text-green':'text-gray'" 
+                data-cur="similar" @click="NavChange">
+                <view class="cuIcon-similar"></view> 分类
+            </view>
+            <!-- 中间发布按钮 -->
+            <view class="action add-action" :class="PageCur=='sub'?'text-green':'text-gray'"         
+                data-cur="sub" @click="NavChange">
+                <button class="cu-btn cuIcon-add bg-green shadow"></button>
+                发布
+            </view>
+            <!-- 购物车、右上角有数字角标 -->
+            <view class="action" :class="PageCur=='cart'?'text-green':'text-gray'" 
+                data-cur="cart" @click="NavChange">
+                <view class="cuIcon-cart">
+                    <!-- 数字角标 -->
+                    <view class="cu-tag badge">99</view>
+                </view>
+                购物车
+            </view>
+            <!-- 我的、左上角红色圆点 -->
+            <view class="action" :class="PageCur=='mine'?'text-green':'text-gray'" 
+                data-cur="mine" @click="NavChange">
+                <view class="cuIcon-my">
+                    <!-- 红色圆点（数字角标） -->
+                    <view class="cu-tag badge"></view>
+                </view>
+                我的
+            </view>
+        </view>
+
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+		    return {
+				PageCur: 'home'
+			}
+		},
+		methods: {
+			NavChange: function(e) {
+				this.PageCur = e.currentTarget.dataset.cur
+			}
+		}
+	}
+</script>
+

    # 购物车底部操作条

    1. 操作条的父容器需求加上 class 类名 cu-bar 和 tabbar，还有一个 shop，同时可以加上 bg-white|... shadow|... 等样式来优化操作条。

    2. 固定底部：需要操作条固定在底部加上 class 类名 foot 即可。

    3. 每一个需要操作的元素需要加上 class 类名 action，该 action 元素里面则放置对应的图标和文字以及按钮。

    4. 数字标签：对应的 action 元素里可以加上 数字标签 <view class="cu-tag badge">99+</view>，红色圆点：数字标签里没有内容。

    5. 立即订购：和 action 元素同级的 view 加上 class 类名 submit bg-red|...，该元素会默认占据剩余的宽度，从右侧预览图知道，可以是三个 action 元素加上一个 submit 元素，也可以是两个 action 元素加上两个 submit 元素。

    6. 立即订购的第二种样式：上面一种是默认撑宽的元素，第二种则是再该元素里放置一个自定义的按钮，实现为 action 同级元素加上 class 类名 btn-group，相当于把第五条 submit 换成 btn-group；然后 btn-group 里再放置自定义按钮。

    演示代码（可直接复制使用）

    <!-- 右侧预览图，第一个购物车示例 -->
+<view class="cu-bar bg-white tabbar border shop foot">
+    <button class="action" open-type="contact">
+        <view class="cuIcon-service text-green">
+            <view class="cu-tag badge"></view>
+        </view>
+        客服
+    </button>
+    <view class="action text-orange">
+        <view class="cuIcon-favorfill"></view> 已收藏
+    </view>
+    <view class="action">
+        <view class="cuIcon-cart">
+            <view class="cu-tag badge">99</view>
+        </view>
+        购物车
+    </view>
+    <view class="bg-red submit">立即订购</view>
+</view>
+
+<!-- 右侧预览图，第二个购物车示例 -->
+<view class="cu-bar bg-white tabbar border shop foot">
+    <button class="action" open-type="contact">
+        <view class="cuIcon-service text-green">
+            <view class="cu-tag badge"></view>
+        </view>
+        客服
+    </button>
+    <view class="action">
+        <view class="cuIcon-cart">
+            <view class="cu-tag badge">99</view>
+        </view>
+        购物车
+    </view>
+    <view class="bg-orange submit">加入购物车</view>
+    <view class="bg-red submit">立即订购</view>
+</view>
+
+<!-- 右侧预览图，第三个购物车示例 -->
+<view class="cu-bar bg-white tabbar border shop foot">
+    <button class="action" open-type="contact">
+        <view class="cuIcon-service text-green">
+            <view class="cu-tag badge"></view>
+        </view>
+        客服
+    </button>
+    <view class="action">
+        <view class=" cuIcon-shop"></view> 店铺
+    </view>
+    <view class="action">
+        <view class="cuIcon-cart">
+            <view class="cu-tag badge">99</view>
+        </view>
+        购物车
+    </view>
+    <view class="btn-group">
+        <button class="cu-btn bg-red round shadow-blur">立即订购</button>
+    </view>
+</view>
+
+<!-- 右侧预览图，第四个购物车示例 -->
+<view class="cu-bar bg-white tabbar border shop foot">
+    <button class="action" open-type="contact">
+        <view class="cuIcon-service text-green">
+            <view class="cu-tag badge"></view>
+        </view> 客服
+    </button>
+    <view class="action">
+        <view class="cuIcon-cart">
+            <view class="cu-tag badge">99</view>
+        </view>
+        购物车
+    </view>
+    <view class="btn-group">
+        <button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
+        <button class="cu-btn bg-red round shadow-blur">立即订购</button>
+    </view>
+</view>
+
    上次更新: 2023/06/07, 23:32:56
    加载
    标题操作条

    ← - 标题操作条→ + 标题操作条→

    Theme by Vdoing @@ -39,6 +221,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/search/index.html b/docs/.vuepress/dist/pages/component/bar/search/index.html new file mode 100644 index 0000000..5c218eb --- /dev/null +++ b/docs/.vuepress/dist/pages/component/bar/search/index.html @@ -0,0 +1,154 @@ + + + + + + 搜索&按钮组&输入操作条 | ColorUI 使用文档 + + + + + + + + + + +
    ColorUI 使用文档

    搜索&按钮组&输入操作条

    # 搜索操作条

    搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。

    演示代码

    <!-- 第一个：搜索按钮在右边 -->
+<view class="cu-bar search bg-white">
+    <view class="search-form round">
+        <text class="cuIcon-search"></text>
+        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
+            confirm-type="search"></input>
+    </view>
+    <view class="action">
+        <button class="cu-btn bg-green shadow-blur round">搜索</button>
+    </view>
+</view>
+
+<!-- 第二个：右边是广州选择位置 -->
+<view class="cu-bar search bg-white">
+    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
+    <view class="search-form round">
+        <text class="cuIcon-search"></text>
+        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
+            confirm-type="search"></input>
+    </view>
+    <view class="action">
+        <text>广州</text>
+        <text class="cuIcon-triangledownfill"></text>
+    </view>
+</view>
+
+<!-- 第三个：右边是广州选择位置（红色背景） -->
+<view class="cu-bar bg-red search">
+    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
+    <view class="search-form radius">
+        <text class="cuIcon-search"></text>
+        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
+            confirm-type="search"></input>
+    </view>
+    <view class="action">
+        <text>广州</text>
+        <text class="cuIcon-triangledownfill"></text>
+    </view>
+</view>
+
+<!-- 第四个：右边是取消 -->
+<view class="cu-bar bg-cyan search">
+    <view class="search-form radius">
+        <text class="cuIcon-search"></text>
+        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
+            confirm-type="search"></input>
+    </view>
+    <view class="action">
+        <text class="cuIcon-close"></text>
+        <text>取消</text>
+    </view>
+</view>
+
+<!-- data -->
+return {
+    InputBottom: 0
+};
+
+<!-- js -->
+InputFocus(e) {
+    this.InputBottom = e.detail.height
+},
+InputBlur(e) {
+    this.InputBottom = 0
+}
+

    # 按钮组操作条

    就是几个按钮，cu-bar 操作条类名就是为这个按钮组设置了平铺的样式

    <view class="cu-bar btn-group">
+    <button class="cu-btn bg-green shadow-blur round lg">保存</button>
+</view>
+<view class="btn-group">
+    <button class="cu-btn bg-green shadow-blur">保存</button>
+    <button class="cu-btn text-green line-green shadow">上传</button>
+</view>
+<view class="cu-bar btn-group">
+    <button class="cu-btn bg-green shadow-blur round">保存</button>
+    <button class="cu-btn bg-blue shadow-blur round">提交</button>
+</view>
+

    # 输入操作条

    主要由cu-bar和input设置出大体样式，内部填充自定义，

    <view class="cu-bar input">
+    <view class="action">
+        <text class="cuIcon-sound text-grey"></text>
+    </view>
+    <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
+    <view class="action">
+        <text class="cuIcon-emojifill text-grey"></text>
+    </view>
+    <button class="cu-btn bg-green shadow-blur">发送</button>
+</view>
+
+<view class="cu-bar input">
+    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
+    <view class="action">
+        <text class="cuIcon-roundaddfill text-grey"></text>
+    </view>
+    <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
+    <view class="action">
+        <text class="cuIcon-emojifill text-grey"></text>
+    </view>
+    <button class="cu-btn bg-green shadow-blur">发送</button>
+</view>
+
+<!-- data -->
+return {
+    InputBottom: 0
+};
+
+<!-- js -->
+InputFocus(e) {
+    this.InputBottom = e.detail.height
+},
+InputBlur(e) {
+    this.InputBottom = 0
+}
+
    上次更新: 2023/06/07, 23:32:56
    顶部操作条
    导航栏

    + ← + 导航栏→ +

    + Theme by + Vdoing + | Copyright © 2022-2023 + miren | MIT License
    + + + diff --git a/docs/.vuepress/dist/pages/component/bar/title/index.html b/docs/.vuepress/dist/pages/component/bar/title/index.html new file mode 100644 index 0000000..94e80dd --- /dev/null +++ b/docs/.vuepress/dist/pages/component/bar/title/index.html @@ -0,0 +1,95 @@ + + + + + + 标题操作条 | ColorUI 使用文档 + + + + + + + + + + +
    ColorUI 使用文档

    标题操作条

    标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可

    演示代码里有代码注释，一条对应一条，复制即可

    # 演示代码

    <view class="box">
+    // 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
+    // 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
+	<view class="cu-bar bg-white">
+		<view class="action border-title">
+			<text class="text-xl text-bold">关于我们</text>
+			<text class="bg-grey" style="width:2rem"></text>
+		</view>
+	</view>
+	<view class="cu-bar bg-white">
+		<view class="action border-title">
+			<text class="text-xl text-bold text-blue">关于我们</text>
+			<text class="bg-gradual-blue" style="width:3rem"></text>
+		</view>
+	</view>
+
+    // 第三、四这两种和上面的原理相同，添加的是 sub-title 类名，底部可以设置文字
+	<view class="cu-bar bg-white">
+		<view class="action sub-title">
+			<text class="text-xl text-bold text-green">关于我们</text>
+			<text class="bg-green"></text>
+		</view>
+	</view>
+	<view class="cu-bar bg-white">
+		<view class="action sub-title">
+			<text class="text-xl text-bold text-blue">关于我们</text>
+			<text class="text-ABC text-blue">about</text>
+		</view>
+	</view>
+
+    // 第五种主要是类名 self-end，设置了最后一行字的位置，就是 css 属性 align-self: flex-end （详情可以去看看 flex 布局）
+	<view class="cu-bar bg-white">
+		<view class="action">
+			<text class="text-xl text-bold">关于我们</text>
+			<text class="text-Abc text-gray self-end margin-left-sm">about</text>
+		</view>
+	</view>
+
+    // 最后这两种就是简单的添加了两个图标，没什么好说的
+	<view class="cu-bar bg-white">
+		<view class="action">
+			<text class="cuIcon-title text-green"></text>
+			<text class="text-xl text-bold">关于我们</text>
+		</view>
+	</view>
+	<view class="cu-bar bg-white">
+		<view class="action">
+			<text class="cuIcon-titles text-green"></text>
+			<text class="text-xl text-bold">关于我们</text>
+		</view>
+	</view>
+</view>
+
    上次更新: 2023/06/07, 23:32:56
    底部操作条
    顶部操作条

    + ← + 顶部操作条→ +

    + Theme by + Vdoing + | Copyright © 2022-2023 + miren | MIT License
    + + + diff --git a/docs/.vuepress/dist/pages/component/bar/top/index.html b/docs/.vuepress/dist/pages/component/bar/top/index.html new file mode 100644 index 0000000..295687c --- /dev/null +++ b/docs/.vuepress/dist/pages/component/bar/top/index.html @@ -0,0 +1,101 @@ + + + + + + 顶部操作条 | ColorUI 使用文档 + + + + + + + + + + +
    ColorUI 使用文档

    顶部操作条

    顶部操作条设置属于自定义导航栏，接下来会给大家讲解配置。

    # 自定义操作条（导航栏）

    1. 导航栏作为常用组件 color-ui 里有做简单封装，你也可以直接复制代码结构自己修改，达到个性化目的。

    2. App.vue 获得系统信息

      onLaunch: function() {
+    uni.getSystemInfo({
+        success: function(e) {
+            // #ifndef MP
+            Vue.prototype.StatusBar = e.statusBarHeight;
+            if (e.platform == 'android') {
+                Vue.prototype.CustomBar = e.statusBarHeight + 50;
+            } else {
+                Vue.prototype.CustomBar = e.statusBarHeight + 45;
+            };
+            // #endif
+            // #ifdef MP-WEIXIN
+            Vue.prototype.StatusBar = e.statusBarHeight;
+            let custom = wx.getMenuButtonBoundingClientRect();
+            Vue.prototype.Custom = custom;
+            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+            // #endif		
+            // #ifdef MP-ALIPAY
+            Vue.prototype.StatusBar = e.statusBarHeight;
+            Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+            // #endif
+        }
+    })
+},
+

    3. 需要设置导航栏的页面配置 pages.json 配置取消系统导航栏，如下配置：

      "globalStyle": {
+    "navigationStyle": "custom"
+},
+

    4. 复制 color-ui 代码结构可以直接使用，注意全局变量的获取。

    5. 使用封装，在 main.js 引入 cu-custom 组件，cu-custom 组件里可以根据自己的需求来自定义。

      import cuCustom from './colorui/components/cu-custom.vue'
+Vue.component('cu-custom',cuCustom)
+

    6. 对应的页面 index.vue 可以直接调用即可。

      <cu-custom bgColor="bg-gradual-blue" :isBack="true">
+    <block slot="backText">返回</block>
+    <block slot="content">导航栏</block>
+</cu-custom>
+

    7. 以下是对应属性参数，自定义也可基于官方封装好的。

      参数 作用 类型 默认值
      bgColor 背景颜色类名 String ''
      isBack 是否开启返回 Boolean false
      isCustom 是否开启左侧胶囊 Boolean false
      bgImage 背景图片路径 String ''
      slot块 作用
      backText 返回时的文字
      content 中间区域
      right 右侧区域(小程序端可使用范围很窄！)

    # 使用原生小程序开发

    # 从现有项目开始

    下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录

    App.wxss` 引入关键Css `main.wxss` `icon.wxss
+@import "colorui/main.wxss";
+@import "colorui/icon.wxss";
+@import "app.css"; /* 你的项目css */
+....
+

    # 从新项目开始

    下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了

    # 使用自定义导航栏

    导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

    App.js 获得系统信息

    onLaunch: function() {
+  wx.getSystemInfo({
+    success: e => {
+      this.globalData.StatusBar = e.statusBarHeight;
+      let custom = wx.getMenuButtonBoundingClientRect();
+      this.globalData.Custom = custom;  
+      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+    }
+  })
+},
+

    App.json 配置取消系统导航栏,并全局引入组件

    "window": {
+  "navigationStyle": "custom"
+},
+"usingComponents": {
+  "cu-custom":"/colorui/components/cu-custom"
+}
+

    page.wxml 页面可以直接调用了

    <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
+  <view slot="backText">返回</view>
+  <view slot="content">导航栏</view>
+</cu-custom>
+
    参数 作用 类型 默认值
    bgColor 背景颜色类名 String ''
    isBack 是否开启返回 Boolean false
    isCustom 是否开启左侧胶囊 Boolean false
    bgImage 背景图片路径 String ''
    slot块 作用
    backText 返回时的文字
    content 中间区域
    right 右侧区域(小程序端可使用范围很窄！)
    上次更新: 2023/06/07, 23:32:56
    标题操作条
    搜索&按钮组&输入操作条

    + ← + 搜索&按钮组&输入操作条→ +

    + Theme by + Vdoing + | Copyright © 2022-2023 + miren | MIT License
    + + + diff --git a/docs/.vuepress/dist/pages/component/card/index.html b/docs/.vuepress/dist/pages/component/card/index.html index 25d704b..abbed4f 100644 --- a/docs/.vuepress/dist/pages/component/card/index.html +++ b/docs/.vuepress/dist/pages/component/card/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,107 @@ GitHub (opens new window)

    卡片

    cu-card 卡片必选值

    # 案例类卡片

    1. cu-card 和 case 结合，在配合子元素的 cu-item 类名，写出案例类的样式
    2. 内部其他样式可以根据其他类名自行设置，cu-item 自带 margin:30px，可以通过类名 no-card 去除
    3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上
    4. 卡片下面就是一个消息列表
    <view class="cu-card case no-card">
+	<view class="cu-item shadow">
+		<view class="image">
+			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+			 mode="widthFix"></image>
+			<view class="cu-tag bg-blue">史诗</view>
+			<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view>
+		</view>
+		<view class="cu-list menu-avatar">
+			<view class="cu-item">
+				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+				<view class="content flex-sub">
+					<view class="text-grey">正义天使 凯尔</view>
+					<view class="text-gray text-sm flex justify-between">
+						十天前
+						<view class="text-gray text-sm">
+							<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+							<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+							<text class="cuIcon-messagefill margin-lr-xs"></text> 30
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+

    # 动态类卡片

    1. 该样式类似于 QQ 动态，由 cu-card 和 dynamic 结合，再配合子元素 cu-item 编写而成
    2. 动态下方的评论需要添加类名 comment
    3. 内部其他样式可以根据其他类名自行设置，cu-item 自带 margin:30px，可以通过类名 no-card 去除
    4. 动态图片内容，官网给出两种样式，第一就是等高 grid 宫格图片，第二就是一张图片
    <view class="cu-card dynamic" :class="isCard?'no-card':''">
+	<view class="cu-item shadow">
+		<view class="cu-list menu-avatar">
+			<view class="cu-item">
+				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+				<view class="content flex-sub">
+					<view>凯尔</view>
+					<view class="text-gray text-sm flex justify-between">
+						2019年12月3日
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="text-content">
+			折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
+		</view>
+        <!-- 官网给出两种样式，第一就是等高 grid ，第二就是一张图片，自行复制查看 -->
+		<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
+			<view class="bg-img " :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
+			 v-for="(item,index) in isCard?9:1" :key="index">
+			</view>
+		</view>
+		<view class="text-gray text-sm text-right padding">
+			<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+			<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+			<text class="cuIcon-messagefill margin-lr-xs"></text> 30
+		</view>
+ 
+		<view class="cu-list menu-avatar comment solids-top">
+			<view class="cu-item">
+				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
+				<view class="content">
+					<view class="text-grey">莫甘娜</view>
+					<view class="text-gray text-content text-df">
+						凯尔，你被自己的光芒变的盲目。
+					</view>
+					<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
+						<view class="flex">
+							<view>凯尔：</view>
+							<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
+						</view>
+					</view>
+					<view class="margin-top-sm flex justify-between">
+						<view class="text-gray text-df">2018年12月4日</view>
+						<view>
+							<text class="cuIcon-appreciatefill text-red"></text>
+							<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
+						</view>
+					</view>
+				</view>
+			</view>
+        </view>
+    </view>
+</view>
+

    # 文章类卡片

    1. 该卡片由 cu-card 和 article 结合，再配合子元素 cu-item
    2. cu-item 自带 margin:30px，可以通过类名 no-card 去除
    3. 卡片里面内容分为 title 和 content，两个内容皆可自定义
    <view class="cu-card article" :class="isCard?'no-card':''">
+	<view class="cu-item shadow">
+		<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
+		<view class="content">
+			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+			 mode="aspectFill"></image>
+			<view class="desc">
+				<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
+				<view>
+					<view class="cu-tag bg-red light sm round">正义天使</view>
+					<view class="cu-tag bg-green light sm round">史诗</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+

    # 卡片相关class

    class 说明
    cu-card 卡片必选值
    case 案例类卡片
    dynamic 动态类卡片
    article 文章类卡片
    comment 评论
    no-card 配合cu-card，去除子元素cu-item的margin和border
    desc 纵向的flex布局
    上次更新: 2023/06/08, 23:46:44
    列表
    表单

    ← 表单→

    @@ -38,6 +134,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/chat/index.html b/docs/.vuepress/dist/pages/component/chat/index.html index 05ac246..4830e22 100644 --- a/docs/.vuepress/dist/pages/component/chat/index.html +++ b/docs/.vuepress/dist/pages/component/chat/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    聊天

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/chat

    上次更新: 2023/05/28, 18:15:33
    时间轴
    轮播

    ← 轮播→

    @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/form/index.html b/docs/.vuepress/dist/pages/component/form/index.html index 2ff859f..c5e89a1 100644 --- a/docs/.vuepress/dist/pages/component/form/index.html +++ b/docs/.vuepress/dist/pages/component/form/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    - + diff --git a/docs/.vuepress/dist/pages/component/modal/index.html b/docs/.vuepress/dist/pages/component/modal/index.html index 7da62e4..5610842 100644 --- a/docs/.vuepress/dist/pages/component/modal/index.html +++ b/docs/.vuepress/dist/pages/component/modal/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    模态框

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/modal

    上次更新: 2023/05/28, 18:15:33
    轮播
    步骤条

    ← 步骤条→

    @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/nav/index.html b/docs/.vuepress/dist/pages/component/nav/index.html index bb22d1b..79ebeb3 100644 --- a/docs/.vuepress/dist/pages/component/nav/index.html +++ b/docs/.vuepress/dist/pages/component/nav/index.html @@ -10,7 +10,7 @@ - + @@ -18,13 +18,63 @@ GitHub (opens new window)

    导航栏

    nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 uni-app 的文档 (opens new window)，类名 nav 和 cu-item 是必选值

    # 默认

    通过一个变量来控制当前已选中的tab

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
+	<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				TabCur: 0,
+				scrollLeft: 0
+			};
+		},
+		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		}
+	}
+</script>
+

    # 居中

    父容器加上 class 类名 text-center

    <scroll-view scroll-x class="bg-white nav text-center">
+	<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+

    # 平分

    设置 flex 和 flex-sub 实现弹性布局，flex-sub 就是 css 属性 flex:1，将弹性盒子内子元素按照 1:1:1:1 来分配空间

    <scroll-view scroll-x class="bg-white nav">
+	<view class="flex text-center">
+		<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
+			Tab{{index}}
+		</view>
+	</view>
+</scroll-view>
+

    # 背景

    加上 class 类名 bg-red|...，参考背景

    <scroll-view scroll-x class="bg-red nav text-center">
+	<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+

    # 图标

    里面 tab 文字前加上图标 cuIcon-，参照图标

    <scroll-view scroll-x class="bg-green nav text-center">
+	<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
+		<text class="cuIcon-camerafill"></text> 数码
+	</view>
+	<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
+		<text class="cuIcon-upstagefill"></text> 排行榜
+	</view>
+	<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
+		<text class="cuIcon-clothesfill"></text> 皮肤
+	</view>
+</scroll-view>
+
    上次更新: 2023/06/07, 23:32:56
    搜索&按钮组&输入操作条
    列表

    ← - 列表→ + 列表→

    Theme by Vdoing @@ -38,6 +88,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/steps/index.html b/docs/.vuepress/dist/pages/component/steps/index.html index 8976c79..012503f 100644 --- a/docs/.vuepress/dist/pages/component/steps/index.html +++ b/docs/.vuepress/dist/pages/component/steps/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    - + diff --git a/docs/.vuepress/dist/pages/component/timeline/index.html b/docs/.vuepress/dist/pages/component/timeline/index.html index 944b8bd..0ea4586 100644 --- a/docs/.vuepress/dist/pages/component/timeline/index.html +++ b/docs/.vuepress/dist/pages/component/timeline/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)