From c50c9d936589c14af20112310b013e7ac490f275 Mon Sep 17 00:00:00 2001 From: mjz <2286101414@qq.com> Date: Wed, 1 May 2024 19:59:46 +0800 Subject: [PATCH] mjz update --- docs/.vuepress/config/htmlModules.js | 4 ++-- docs/.vuepress/dist/404.html | 6 +++--- docs/.vuepress/dist/archives/index.html | 4 ++-- .../dist/assets/js/{10.2c6b507c.js => 10.9bc4e830.js} | 2 +- .../dist/assets/js/{11.be9ad194.js => 11.94510164.js} | 2 +- .../dist/assets/js/{12.c09da45d.js => 12.971ac3e8.js} | 2 +- .../dist/assets/js/{13.b63baa22.js => 13.4cfe5d80.js} | 2 +- .../dist/assets/js/{14.ee6b7794.js => 14.7526daa3.js} | 2 +- .../dist/assets/js/{15.06614330.js => 15.2c1914c5.js} | 2 +- .../dist/assets/js/{16.da09304c.js => 16.7a82715e.js} | 2 +- .../dist/assets/js/{20.c48b8548.js => 20.94b746f2.js} | 2 +- .../dist/assets/js/{21.ff6aef6c.js => 21.b5887f35.js} | 2 +- .../dist/assets/js/{23.f734173f.js => 23.5ed1a31e.js} | 2 +- .../dist/assets/js/{24.b958c107.js => 24.8847366c.js} | 2 +- .../dist/assets/js/{25.7ab9f939.js => 25.88d64e31.js} | 2 +- .../dist/assets/js/{26.185ed6b1.js => 26.d067de4f.js} | 2 +- .../dist/assets/js/{27.27f84651.js => 27.1f7318dd.js} | 2 +- .../dist/assets/js/{28.8446f6a3.js => 28.e62ff9f0.js} | 2 +- .../dist/assets/js/{29.f2c7bc05.js => 29.caa6369d.js} | 2 +- .../dist/assets/js/{30.fdf59e6b.js => 30.028c0d8e.js} | 2 +- .../dist/assets/js/{32.ce547e96.js => 32.d2425621.js} | 2 +- .../dist/assets/js/{33.8fc7629e.js => 33.81cbd8a1.js} | 2 +- .../dist/assets/js/{34.f43470a7.js => 34.775808ae.js} | 2 +- .../dist/assets/js/{35.a3f9ac6f.js => 35.e0bd5c01.js} | 2 +- .../dist/assets/js/{36.800cad01.js => 36.124c98a3.js} | 2 +- .../dist/assets/js/{7.14247048.js => 7.d0c2e76f.js} | 2 +- .../dist/assets/js/{9.9ee08866.js => 9.a1a5ef58.js} | 2 +- .../dist/assets/js/{app.5ee51c1e.js => app.c575522f.js} | 4 ++-- docs/.vuepress/dist/index.html | 4 ++-- docs/.vuepress/dist/pages/base/index.html | 6 +++--- docs/.vuepress/dist/pages/baseStart/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/avatar/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/background/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/button/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/icon/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/layout/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/loading/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/progress/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/shadow/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/tag/index.html | 6 +++--- docs/.vuepress/dist/pages/basics/text/index.html | 6 +++--- docs/.vuepress/dist/pages/component/bar/bottom/index.html | 6 +++--- docs/.vuepress/dist/pages/component/bar/search/index.html | 6 +++--- docs/.vuepress/dist/pages/component/bar/title/index.html | 6 +++--- docs/.vuepress/dist/pages/component/bar/top/index.html | 6 +++--- docs/.vuepress/dist/pages/component/card/index.html | 6 +++--- docs/.vuepress/dist/pages/component/chat/index.html | 6 +++--- docs/.vuepress/dist/pages/component/form/index.html | 6 +++--- docs/.vuepress/dist/pages/component/list/index.html | 6 +++--- docs/.vuepress/dist/pages/component/modal/index.html | 6 +++--- docs/.vuepress/dist/pages/component/nav/index.html | 6 +++--- docs/.vuepress/dist/pages/component/steps/index.html | 6 +++--- docs/.vuepress/dist/pages/component/swiper/index.html | 6 +++--- docs/.vuepress/dist/pages/component/timeline/index.html | 6 +++--- docs/.vuepress/dist/pages/plugin/animation/index.html | 6 +++--- docs/.vuepress/dist/pages/plugin/drawer/index.html | 6 +++--- docs/.vuepress/dist/pages/plugin/indexes/index.html | 6 +++--- docs/.vuepress/dist/pages/plugin/verticalnav/index.html | 6 +++--- 58 files changed, 122 insertions(+), 122 deletions(-) rename docs/.vuepress/dist/assets/js/{10.2c6b507c.js => 10.9bc4e830.js} (99%) rename docs/.vuepress/dist/assets/js/{11.be9ad194.js => 11.94510164.js} (96%) rename docs/.vuepress/dist/assets/js/{12.c09da45d.js => 12.971ac3e8.js} (99%) rename docs/.vuepress/dist/assets/js/{13.b63baa22.js => 13.4cfe5d80.js} (99%) rename docs/.vuepress/dist/assets/js/{14.ee6b7794.js => 14.7526daa3.js} (99%) rename docs/.vuepress/dist/assets/js/{15.06614330.js => 15.2c1914c5.js} (99%) rename docs/.vuepress/dist/assets/js/{16.da09304c.js => 16.7a82715e.js} (99%) rename docs/.vuepress/dist/assets/js/{20.c48b8548.js => 20.94b746f2.js} (99%) rename docs/.vuepress/dist/assets/js/{21.ff6aef6c.js => 21.b5887f35.js} (99%) rename docs/.vuepress/dist/assets/js/{23.f734173f.js => 23.5ed1a31e.js} (99%) rename docs/.vuepress/dist/assets/js/{24.b958c107.js => 24.8847366c.js} (99%) rename docs/.vuepress/dist/assets/js/{25.7ab9f939.js => 25.88d64e31.js} (99%) rename docs/.vuepress/dist/assets/js/{26.185ed6b1.js => 26.d067de4f.js} (99%) rename docs/.vuepress/dist/assets/js/{27.27f84651.js => 27.1f7318dd.js} (99%) rename docs/.vuepress/dist/assets/js/{28.8446f6a3.js => 28.e62ff9f0.js} (99%) rename docs/.vuepress/dist/assets/js/{29.f2c7bc05.js => 29.caa6369d.js} (99%) rename docs/.vuepress/dist/assets/js/{30.fdf59e6b.js => 30.028c0d8e.js} (99%) rename docs/.vuepress/dist/assets/js/{32.ce547e96.js => 32.d2425621.js} (99%) rename docs/.vuepress/dist/assets/js/{33.8fc7629e.js => 33.81cbd8a1.js} (99%) rename docs/.vuepress/dist/assets/js/{34.f43470a7.js => 34.775808ae.js} (99%) rename docs/.vuepress/dist/assets/js/{35.a3f9ac6f.js => 35.e0bd5c01.js} (68%) rename docs/.vuepress/dist/assets/js/{36.800cad01.js => 36.124c98a3.js} (68%) rename docs/.vuepress/dist/assets/js/{7.14247048.js => 7.d0c2e76f.js} (99%) rename docs/.vuepress/dist/assets/js/{9.9ee08866.js => 9.a1a5ef58.js} (99%) rename docs/.vuepress/dist/assets/js/{app.5ee51c1e.js => app.c575522f.js} (52%) diff --git a/docs/.vuepress/config/htmlModules.js b/docs/.vuepress/config/htmlModules.js index 01fbad8..6215fd8 100644 --- a/docs/.vuepress/config/htmlModules.js +++ b/docs/.vuepress/config/htmlModules.js @@ -18,8 +18,8 @@ * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。 */ -const fhmView = `

👀 视觉的诱惑，美丽的邂逅~

📸 全网微密合集，每一张都值得珍藏~

🎁 点击进入 风华迷开启浪漫之旅~
`; +// const fhmView = `

👀 视觉的诱惑，美丽的邂逅~

📸 全网微密合集，每一张都值得珍藏~

🎁 点击进入 风华迷开启浪漫之旅~
`; module.exports = { - pageT: fhmView +// pageT: fhmView }; diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html index 092aead..5b6f6b3 100644 --- a/docs/.vuepress/dist/404.html +++ b/docs/.vuepress/dist/404.html @@ -10,11 +10,11 @@ - + -
404
我是谁？我在哪？
返回首页
- +
404
看来我们的链接坏掉了~
返回首页
+ diff --git a/docs/.vuepress/dist/archives/index.html b/docs/.vuepress/dist/archives/index.html index 4964c0e..56c2f97 100644 --- a/docs/.vuepress/dist/archives/index.html +++ b/docs/.vuepress/dist/archives/index.html @@ -10,7 +10,7 @@ - + @@ -39,6 +39,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/assets/js/10.2c6b507c.js b/docs/.vuepress/dist/assets/js/10.9bc4e830.js similarity index 99% rename from docs/.vuepress/dist/assets/js/10.2c6b507c.js rename to docs/.vuepress/dist/assets/js/10.9bc4e830.js index c1f4ab9..43cb1b7 100644 --- a/docs/.vuepress/dist/assets/js/10.2c6b507c.js +++ b/docs/.vuepress/dist/assets/js/10.9bc4e830.js @@ -1 +1 @@ -(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 +(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 diff --git a/docs/.vuepress/dist/assets/js/11.be9ad194.js b/docs/.vuepress/dist/assets/js/11.94510164.js similarity index 96% rename from docs/.vuepress/dist/assets/js/11.be9ad194.js rename to docs/.vuepress/dist/assets/js/11.94510164.js index e6c1686..514ee5e 100644 --- a/docs/.vuepress/dist/assets/js/11.be9ad194.js +++ b/docs/.vuepress/dist/assets/js/11.94510164.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{338: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-28T15:16:38.000Z",permalink:"/pages/basics/icon",article:!1},regularPath:"/10.%E6%96%87%E6%A1%A3/20.%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0/40.%E5%9B%BE%E6%A0%87.html",relativePath:"10.文档/20.基础元素/40.图标.md",key:"v-61409c18",path:"/pages/basics/icon/",headers:[{level:2,title:"引入样式",slug:"引入样式",normalizedTitle:"引入样式",charIndex:44},{level:2,title:"使用语法",slug:"使用语法",normalizedTitle:"使用语法",charIndex:171}],headersStr:"引入样式 使用语法",content:'温馨提示\n\n点击右侧图标页面，对应的图标，即可复制类名：cuIcon-图标名称\n\n\n# 引入样式\n\n编辑 App.vue文件在\n\n\n\n# 使用语法\n\n<标签 class="cuIcon-图标名称">\n',normalizedContent:'温馨提示\n\n点击右侧图标页面，对应的图标，即可复制类名：cuicon-图标名称\n\n\n# 引入样式\n\n编辑 app.vue文件在\n\n\n\n# 使用语法\n\n<标签 class="cuicon-图标名称">\n',charsets:{cjk:!0},lastUpdated:"2023/06/01, 23:30:40",lastUpdatedTimestamp:168563344e4},{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/base/index.html b/docs/.vuepress/dist/pages/base/index.html index 759998e..9a32faa 100644 --- a/docs/.vuepress/dist/pages/base/index.html +++ b/docs/.vuepress/dist/pages/base/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 介绍

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    温馨提示

    本文档并非是官方文档，而是本人自己经常使用 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来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。

    微信扫码预览h5

    # 文档说明

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

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

    # 视图/目录 切换

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

    上次更新: 2023/06/17, 23:53:47
    快速使用

    快速使用→ +

    介绍

    温馨提示

    本文档并非是官方文档，而是本人自己经常使用 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来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。

    微信扫码预览h5

    # 文档说明

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

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

    # 视图/目录 切换

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

    上次更新: 2023/06/17, 23:53:47
    快速使用

    快速使用→

    Theme by Vdoing @@ -40,6 +40,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/baseStart/index.html b/docs/.vuepress/dist/pages/baseStart/index.html index c113970..ca0ce2b 100644 --- a/docs/.vuepress/dist/pages/baseStart/index.html +++ b/docs/.vuepress/dist/pages/baseStart/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 快速使用

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 素材

    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
+

    快速使用

    # 素材

    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";
@@ -107,6 +107,6 @@ Vue.componen
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/avatar/index.html b/docs/.vuepress/dist/pages/basics/avatar/index.html index ca48d70..f5e0dee 100644 --- a/docs/.vuepress/dist/pages/basics/avatar/index.html +++ b/docs/.vuepress/dist/pages/basics/avatar/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 头像

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

    # 头像形状

    css 代码

    .cu-avatar  默认　
+

    头像

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

    # 头像形状

    css 代码

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

    演示代码

    <view class='cu-avatar'>默认</view>
@@ -79,6 +79,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/background/index.html b/docs/.vuepress/dist/pages/basics/background/index.html index 96cf1c3..1301f26 100644 --- a/docs/.vuepress/dist/pages/basics/background/index.html +++ b/docs/.vuepress/dist/pages/basics/background/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 背景

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 深色背景

    在 class 中加入 bg-red|orange|...

    .bg-red  /* 嫣红 #e54d42 */
+

    背景

    # 深色背景

    在 class 中加入 bg-red|orange|...

    .bg-red  /* 嫣红 #e54d42 */
 .bg-orange  /* 桔橙 #f37b1d */
 .bg-yellow  /* 明黄 #fbbd08 */
 .bg-olive  /* 橄榄 #8dc63f */
@@ -101,6 +101,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/button/index.html b/docs/.vuepress/dist/pages/basics/button/index.html index 48bfcbc..fab5731 100644 --- a/docs/.vuepress/dist/pages/basics/button/index.html +++ b/docs/.vuepress/dist/pages/basics/button/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 按钮

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    在 button 上加 class cu-btn 即可

    # 按钮形状

    css 代码

    .cu-btn  默认　　
+

    按钮

    在 button 上加 class cu-btn 即可

    # 按钮形状

    css 代码

    .cu-btn  默认　　
 .cu-btn round  圆角
 .cu-btn cuIcon  图标按钮

    演示代码

    <button class="cu-btn">默认</button>
@@ -77,6 +77,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/icon/index.html b/docs/.vuepress/dist/pages/basics/icon/index.html index f2d6c6b..713711b 100644 --- a/docs/.vuepress/dist/pages/basics/icon/index.html +++ b/docs/.vuepress/dist/pages/basics/icon/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 图标

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    温馨提示

    点击右侧图标页面，对应的图标，即可复制类名：cuIcon-图标名称

    # 引入样式

    编辑 App.vue文件在<style> 项引入 icon.css

    <style>
+

    图标

    温馨提示

    点击右侧图标页面，对应的图标，即可复制类名：cuIcon-图标名称

    # 引入样式

    编辑 App.vue文件在<style> 项引入 icon.css

    <style>
     @import "colorui/main.css";
     @import "colorui/icon.css";
 </style>
@@ -47,6 +47,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/layout/index.html b/docs/.vuepress/dist/pages/basics/layout/index.html index a0defb2..5b1fc0e 100644 --- a/docs/.vuepress/dist/pages/basics/layout/index.html +++ b/docs/.vuepress/dist/pages/basics/layout/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 布局

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # Flex布局

    父级容器的 class 需要加入 flex

    # 固定尺寸

    css

    .basis-xs   所占比例 20%
+

    布局

    # Flex布局

    父级容器的 class 需要加入 flex

    # 固定尺寸

    css

    .basis-xs   所占比例 20%
 .basis-sm   所占比例 40%
 .basis-sub  所占比例 50%
 .basis-lg   所占比例 60%
@@ -135,6 +135,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/loading/index.html b/docs/.vuepress/dist/pages/basics/loading/index.html index dcccd08..c0f83da 100644 --- a/docs/.vuepress/dist/pages/basics/loading/index.html +++ b/docs/.vuepress/dist/pages/basics/loading/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 加载

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

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

    css

    .cu-load loading  加载中
+

    加载

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

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

    css

    .cu-load loading  加载中
 .cu-load over     加载结束
 .cu-load erro     加载错误
 .cu-load loading load-cuIcon  只有加载图标没有文字
@@ -100,6 +100,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/progress/index.html b/docs/.vuepress/dist/pages/basics/progress/index.html index efcf4f7..24dc163 100644 --- a/docs/.vuepress/dist/pages/basics/progress/index.html +++ b/docs/.vuepress/dist/pages/basics/progress/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 进度条

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

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

    # 进度条形状

    css 代码

    .cu-progress  默认　
+

    进度条

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

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

    # 进度条形状

    css 代码

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

    演示代码

    <view class="cu-progress">
@@ -114,6 +114,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/shadow/index.html b/docs/.vuepress/dist/pages/basics/shadow/index.html index dfc8aeb..907bf0a 100644 --- a/docs/.vuepress/dist/pages/basics/shadow/index.html +++ b/docs/.vuepress/dist/pages/basics/shadow/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 边框阴影

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 边框

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

    css 代码

    .solid         四周
+

    边框阴影

    # 边框

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

    css 代码

    .solid         四周
 .solid-top     上
 .solid-right   右
 .solid-bottom  
@@ -64,6 +64,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/tag/index.html b/docs/.vuepress/dist/pages/basics/tag/index.html index f17b120..705a4b6 100644 --- a/docs/.vuepress/dist/pages/basics/tag/index.html +++ b/docs/.vuepress/dist/pages/basics/tag/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 标签

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

    # 标签形状

    css 代码

    .cu-tag  默认　　
+

    标签

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

    # 标签形状

    css 代码

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

    演示代码

    <view class='cu-tag'>默认</view>
@@ -110,6 +110,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/text/index.html b/docs/.vuepress/dist/pages/basics/text/index.html index a4a1732..e2f2762 100644 --- a/docs/.vuepress/dist/pages/basics/text/index.html +++ b/docs/.vuepress/dist/pages/basics/text/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 文本

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 文字大小

    .text-xsl  文字大小 60px 用于图标、数字等特大显示
+

    文本

    # 文字大小

    .text-xsl  文字大小 60px 用于图标、数字等特大显示
 .text-sl   文字大小 40px 用于图标、数字等较大显示
 .text-xxl  文字大小 22px 用于金额数字等信息
 .text-xl   文字大小 18px 页面大标题，用于结果页等单一信息页
@@ -117,6 +117,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/bottom/index.html b/docs/.vuepress/dist/pages/component/bar/bottom/index.html index c45c2da..439a4d1 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 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 底部操作条

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    温馨提示

    我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。 +

    底部操作条

    温馨提示

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

    # 自定义底部操作条

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

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

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

    点此查看官方示例 
    <template>
 	<view>
         <!-- 这三个是对应的页面 -->
@@ -225,6 +225,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/search/index.html b/docs/.vuepress/dist/pages/component/bar/search/index.html index 49ec492..4699265 100644 --- a/docs/.vuepress/dist/pages/component/bar/search/index.html +++ b/docs/.vuepress/dist/pages/component/bar/search/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

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

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 搜索操作条

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

    演示代码

    <!-- 第一个：搜索按钮在右边 -->
+

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

    # 搜索操作条

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

    演示代码

    <!-- 第一个：搜索按钮在右边 -->
 <view class="cu-bar search bg-white">
     <view class="search-form round">
         <text class="cuIcon-search"></text>
@@ -153,6 +153,6 @@ InputBlur(e) {
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/title/index.html b/docs/.vuepress/dist/pages/component/bar/title/index.html index 743b712..1044aef 100644 --- a/docs/.vuepress/dist/pages/component/bar/title/index.html +++ b/docs/.vuepress/dist/pages/component/bar/title/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 标题操作条

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

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

    # 演示代码

    <view class="box">
+

    标题操作条

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

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

    # 演示代码

    <view class="box">
     // 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
     // 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
 	<view class="cu-bar bg-white">
@@ -94,6 +94,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/top/index.html b/docs/.vuepress/dist/pages/component/bar/top/index.html index e0cd978..a4fe4e4 100644 --- a/docs/.vuepress/dist/pages/component/bar/top/index.html +++ b/docs/.vuepress/dist/pages/component/bar/top/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 顶部操作条

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

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

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

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

    2. App.vue 获得系统信息

      onLaunch: function() {
+

    顶部操作条

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

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

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

    2. App.vue 获得系统信息

      onLaunch: function() {
     uni.getSystemInfo({
         success: function(e) {
             // #ifndef MP
@@ -100,6 +100,6 @@ Vue.component('cu-custom',cuCustom)
    3. 阅读模式
    - + diff --git a/docs/.vuepress/dist/pages/component/card/index.html b/docs/.vuepress/dist/pages/component/card/index.html index 76e544e..c2349fd 100644 --- a/docs/.vuepress/dist/pages/component/card/index.html +++ b/docs/.vuepress/dist/pages/component/card/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 卡片

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    cu-card 卡片必选值

    # 案例类卡片

    1. cu-card 和 case 结合，在配合子元素的 cu-item 类名，写出案例类的样式

    2. 内部其他样式可以根据其他类名自行设置，cu-item 自带 margin:30px，可以通过类名 no-card 去除

    3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上

    4. 卡片下面就是一个消息列表

    <view class="cu-card case no-card">
+

    卡片

    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"
@@ -138,6 +138,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/chat/index.html b/docs/.vuepress/dist/pages/component/chat/index.html index c1f4fb9..25f58ef 100644 --- a/docs/.vuepress/dist/pages/component/chat/index.html +++ b/docs/.vuepress/dist/pages/component/chat/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 聊天

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    cu-chat 聊天必选值

    # 基本样式

    1. 聊天的外部大框架是 cu-chat

    2. cu-item 包裹某人的聊天信息

    3. self 表示右侧自己的聊天样式

    4. main 包含聊天内容

    5. date 表示消息时间

    6. cu-info 表示提示词

    <view class="cu-chat">
+

    聊天

    cu-chat 聊天必选值

    # 基本样式

    1. 聊天的外部大框架是 cu-chat

    2. cu-item 包裹某人的聊天信息

    3. self 表示右侧自己的聊天样式

    4. main 包含聊天内容

    5. date 表示消息时间

    6. cu-info 表示提示词

    <view class="cu-chat">
 	<view class="cu-item self">
 		<view class="main">
 			<view class="content bg-green shadow">
@@ -148,6 +148,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/form/index.html b/docs/.vuepress/dist/pages/component/form/index.html index 26d3ce2..596c3ee 100644 --- a/docs/.vuepress/dist/pages/component/form/index.html +++ b/docs/.vuepress/dist/pages/component/form/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 表单

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # input输入框

    1. form 表单最外层是用 form 标签包裹

    2. 每一个子元素添加类名 cu-form-group，行内可以自定义，input 标签就是输入框

    3. title 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度

    4. 行内没有 input 标签的话，title 后面的元素定位在行内右侧，有 input 标签的话，标签后的元素也是在行内右侧

    <form>	
+

    表单

    # input输入框

    1. form 表单最外层是用 form 标签包裹

    2. 每一个子元素添加类名 cu-form-group，行内可以自定义，input 标签就是输入框

    3. title 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度

    4. 行内没有 input 标签的话，title 后面的元素定位在行内右侧，有 input 标签的话，标签后的元素也是在行内右侧

    <form>	
     <view class="cu-form-group margin-top">
 		<view class="title">邮件</view>
 		<input placeholder="两字短标题" name="input"></input>
@@ -485,6 +485,6 @@ textareaBInput(e) {
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/list/index.html b/docs/.vuepress/dist/pages/component/list/index.html index e01a498..391d689 100644 --- a/docs/.vuepress/dist/pages/component/list/index.html +++ b/docs/.vuepress/dist/pages/component/list/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 列表

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    列表主要就是 cu-list 和 cu-item 的配合使用

    # 宫格列表

    1. 宫格列表就是列表结合 grid 布局设计出的样式

    2. 通过 col-1|... 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 no-border 去除边框

    3. cu-item 里就是图标加文字，图标可以设置数字角标

    4. 可以在通过遍历循环的变量设置对应的图标、名称等

    演示代码

    <view class="cu-list grid col-3 no-border">
+

    列表

    列表主要就是 cu-list 和 cu-item 的配合使用

    # 宫格列表

    1. 宫格列表就是列表结合 grid 布局设计出的样式

    2. 通过 col-1|... 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 no-border 去除边框

    3. cu-item 里就是图标加文字，图标可以设置数字角标

    4. 可以在通过遍历循环的变量设置对应的图标、名称等

    演示代码

    <view class="cu-list grid col-3 no-border">
     <view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
         <view class="cuIcon-cardboardfill text-grey">
             <view class="cu-tag badge" v-if="item.badge!=0">
@@ -318,6 +318,6 @@ SwitchSex(e) {
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/modal/index.html b/docs/.vuepress/dist/pages/component/modal/index.html index c8ecabe..86d05ce 100644 --- a/docs/.vuepress/dist/pages/component/modal/index.html +++ b/docs/.vuepress/dist/pages/component/modal/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 模态框

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    1. cu-modal 和 cu-dialog 为模态框必选值，所有模态框的大体框架都是 cu-modal 包裹 cu-dialog

    2. cu-dialog 内部填充操作部分和信息展示部分，操作部分可以用 cu-bar 操作条来布局，信息展示就直接写

    3. 弹框的显示隐藏是通过添加或移除类名 show 来实现的，示例中隐藏弹框是绑定 tap 调用 hideModal 事件，hideModal 函数内执行的语句就是将变量 modalName 赋值为 null，从而移除类名 show，你想让用户点击哪里隐藏弹框，就可以把 hideModal 事件绑定在哪里（比如设置点击遮罩层隐藏弹框，就把 hideModal 事件绑定在有类名 cu-modal 的标签上）

    # 普通窗口

    1. 就是 cu-modal 包裹 cu-dialog，只做信息的展示，没有交互效果
    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
+

    模态框

    1. cu-modal 和 cu-dialog 为模态框必选值，所有模态框的大体框架都是 cu-modal 包裹 cu-dialog

    2. cu-dialog 内部填充操作部分和信息展示部分，操作部分可以用 cu-bar 操作条来布局，信息展示就直接写

    3. 弹框的显示隐藏是通过添加或移除类名 show 来实现的，示例中隐藏弹框是绑定 tap 调用 hideModal 事件，hideModal 函数内执行的语句就是将变量 modalName 赋值为 null，从而移除类名 show，你想让用户点击哪里隐藏弹框，就可以把 hideModal 事件绑定在哪里（比如设置点击遮罩层隐藏弹框，就把 hideModal 事件绑定在有类名 cu-modal 的标签上）

    # 普通窗口

    1. 就是 cu-modal 包裹 cu-dialog，只做信息的展示，没有交互效果
    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
 	<view class="cu-dialog">
 		<view class="cu-bar bg-white justify-end">
 			<view class="content">Modal标题</view>
@@ -209,6 +209,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/nav/index.html b/docs/.vuepress/dist/pages/component/nav/index.html index 7f7818f..84804c5 100644 --- a/docs/.vuepress/dist/pages/component/nav/index.html +++ b/docs/.vuepress/dist/pages/component/nav/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 导航栏

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    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">
+

    导航栏

    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>
@@ -92,6 +92,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/steps/index.html b/docs/.vuepress/dist/pages/component/steps/index.html index 1c5da20..6b082f0 100644 --- a/docs/.vuepress/dist/pages/component/steps/index.html +++ b/docs/.vuepress/dist/pages/component/steps/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 步骤条

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    cu-steps 步骤条必选值

    # 基本用法

    1. cu-steps 和 cu-item 配合使用
    2. 对应右侧基本用法第一个
    <view class="bg-white padding">
+

    步骤条

    cu-steps 步骤条必选值

    # 基本用法

    1. cu-steps 和 cu-item 配合使用
    2. 对应右侧基本用法第一个
    <view class="bg-white padding">
 	<view class="cu-steps">
 		<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
 			<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
@@ -111,6 +111,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/swiper/index.html b/docs/.vuepress/dist/pages/component/swiper/index.html index 1e633af..e7ee976 100644 --- a/docs/.vuepress/dist/pages/component/swiper/index.html +++ b/docs/.vuepress/dist/pages/component/swiper/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 轮播

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 全屏限高轮播

    1. 添加类名 screen-swiper，宽度为全屏，高度自定义

    2. 请直接参考 swiper 官方文档 (opens new window)，可以通过类名 square-dot 和 round-dot 定义小圆点样式

    <template>
+

    轮播

    # 全屏限高轮播

    1. 添加类名 screen-swiper，宽度为全屏，高度自定义

    2. 请直接参考 swiper 官方文档 (opens new window)，可以通过类名 square-dot 和 round-dot 定义小圆点样式

    <template>
 	<view>
 		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
 		 :autoplay="true" interval="5000" duration="500">
@@ -208,6 +208,6 @@ cardSwiper(e) {
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/timeline/index.html b/docs/.vuepress/dist/pages/component/timeline/index.html index 70b289d..8174531 100644 --- a/docs/.vuepress/dist/pages/component/timeline/index.html +++ b/docs/.vuepress/dist/pages/component/timeline/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 时间轴

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 默认时间轴

    1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式

    2. 由 cu-timeline 包裹 cu-time 和 cu-item，在 item 内编写内容，由 content 包裹

    <view class="cu-timeline">
+

    时间轴

    # 默认时间轴

    1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式

    2. 由 cu-timeline 包裹 cu-time 和 cu-item，在 item 内编写内容，由 content 包裹

    <view class="cu-timeline">
 	<view class="cu-time">06-17</view>
 	<view class="cu-item">
 		<view class="content">
@@ -122,6 +122,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/animation/index.html b/docs/.vuepress/dist/pages/plugin/animation/index.html index cfc2267..f1f327b 100644 --- a/docs/.vuepress/dist/pages/plugin/animation/index.html +++ b/docs/.vuepress/dist/pages/plugin/animation/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 微动画

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 微动画

    1. 加上类名 animation-fade|... 即可实现动画

    2. 加上类名 animation-reverse 反向动画

    3. 延迟动画加上 style animation-delay: 1s

    .animation-fade         /* 淡入  */
+

    微动画

    # 微动画

    1. 加上类名 animation-fade|... 即可实现动画

    2. 加上类名 animation-reverse 反向动画

    3. 延迟动画加上 style animation-delay: 1s

    .animation-fade         /* 淡入  */
 .animation-scale-up     /* 放大  */
 .animation-scale-down   /* 缩小  */
 .animation-slide-top    /* 从上向下滑动  */
@@ -77,6 +77,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/drawer/index.html b/docs/.vuepress/dist/pages/plugin/drawer/index.html index 18ca375..eed185f 100644 --- a/docs/.vuepress/dist/pages/plugin/drawer/index.html +++ b/docs/.vuepress/dist/pages/plugin/drawer/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 全屏抽屉

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 全屏抽屉

    1. 全屏抽屉效果主要分为三个部分，主要有三个类名

    2. 第一个类名 DrawerPage，就是第一张图总体外部包裹的类名

    3. 第二个类名 DrawerClose，用来包裹打开抽屉之后关闭部分

    4. 第三个类名 DrawerWindow，就是打开的抽屉部分了

    <template>
+

    全屏抽屉

    # 全屏抽屉

    1. 全屏抽屉效果主要分为三个部分，主要有三个类名

    2. 第一个类名 DrawerPage，就是第一张图总体外部包裹的类名

    3. 第二个类名 DrawerClose，用来包裹打开抽屉之后关闭部分

    4. 第三个类名 DrawerWindow，就是打开的抽屉部分了

    <template>
 	<view class="bg-gradual-blue">
         // 全屏主体页面
 		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
@@ -216,6 +216,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/indexes/index.html b/docs/.vuepress/dist/pages/plugin/indexes/index.html index bee076f..81979de 100644 --- a/docs/.vuepress/dist/pages/plugin/indexes/index.html +++ b/docs/.vuepress/dist/pages/plugin/indexes/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 索引列表

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 使用

    1. 索引列表主要由 scroll-view 标签实现，类名为 indexes，具体js逻辑请看源码

    2. 我个人没有使用过这个，大家根据源码来看一下，我也有些地方没弄懂

    <template>
+

    索引列表

    # 使用

    1. 索引列表主要由 scroll-view 标签实现，类名为 indexes，具体js逻辑请看源码

    2. 我个人没有使用过这个，大家根据源码来看一下，我也有些地方没弄懂

    <template>
 	<view>
 		<view class="cu-bar bg-white search fixed">
 			<view class="search-form round">
@@ -242,6 +242,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html index d9ac82d..d7ed96b 100644 --- a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html +++ b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html @@ -10,7 +10,7 @@ - + @@ -26,7 +26,7 @@ 视图模式
  • 目录模式 -

    • 垂直导航

    👀 视觉的诱惑，美丽的邂逅~

    📸 全网微密合集，每一张都值得珍藏~

    🎁 点击进入 风华迷开启浪漫之旅~

    # 操作条

    1. 垂直导航主要有两个 scroll-view 标签实现

    2. 分别是左侧的导航栏部分和右侧的内容部分，左侧导航栏部分使用类名 VerticalBox，右侧内容部分使用类名 VerticalMain

    <template>
+

    垂直导航

    # 操作条

    1. 垂直导航主要有两个 scroll-view 标签实现

    2. 分别是左侧的导航栏部分和右侧的内容部分，左侧导航栏部分使用类名 VerticalBox，右侧内容部分使用类名 VerticalMain

    <template>
 	<view>
 		<view class="fixed">
 			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
@@ -268,6 +268,6 @@
         
  • 
           阅读模式
    • - +