From 1fdc7f88315ee5d7d8f42aa0e680f0af67fff2e9 Mon Sep 17 00:00:00 2001 From: mjz <2286101414@qq.com> Date: Sun, 18 Jun 2023 13:41:09 +0800 Subject: [PATCH] mjz update --- docs/.vuepress/dist/404.html | 6 +- docs/.vuepress/dist/archives/index.html | 6 +- .../js/{10.9bc4e830.js => 10.230d760b.js} | 2 +- .../js/{11.94510164.js => 11.388aba94.js} | 2 +- .../js/{12.971ac3e8.js => 12.f801c2be.js} | 2 +- .../js/{13.d8c0c958.js => 13.b4d1ac6b.js} | 2 +- .../js/{15.c972ac38.js => 15.fbc3d85a.js} | 2 +- .../js/{16.da09304c.js => 16.ff717b47.js} | 2 +- .../js/{17.15374680.js => 17.31e8ea2a.js} | 2 +- .../js/{18.93fef267.js => 18.78def283.js} | 2 +- .../js/{19.86d5c6c8.js => 19.4f034cd4.js} | 2 +- .../js/{20.b480e9bf.js => 20.76bc794a.js} | 2 +- .../js/{21.1aa9948a.js => 21.b5887f35.js} | 2 +- .../js/{22.5c8e7d4a.js => 22.8ff6b731.js} | 2 +- docs/.vuepress/dist/assets/js/23.027d9b1c.js | 1 - docs/.vuepress/dist/assets/js/23.c8e01869.js | 1 + docs/.vuepress/dist/assets/js/24.0844608f.js | 1 - docs/.vuepress/dist/assets/js/24.58842b6b.js | 1 + docs/.vuepress/dist/assets/js/25.7ab9f939.js | 1 + docs/.vuepress/dist/assets/js/25.fcf0e5b0.js | 1 - docs/.vuepress/dist/assets/js/26.084fffcf.js | 1 + docs/.vuepress/dist/assets/js/26.ad3d9337.js | 1 - docs/.vuepress/dist/assets/js/27.a51b4d48.js | 1 - docs/.vuepress/dist/assets/js/27.cfa9855f.js | 1 + docs/.vuepress/dist/assets/js/28.8446f6a3.js | 1 + docs/.vuepress/dist/assets/js/28.8d4e487e.js | 1 - docs/.vuepress/dist/assets/js/29.6e1e8401.js | 1 + docs/.vuepress/dist/assets/js/29.b0521c11.js | 1 - docs/.vuepress/dist/assets/js/30.6b55ac5f.js | 1 - docs/.vuepress/dist/assets/js/30.8d15935b.js | 1 + docs/.vuepress/dist/assets/js/31.b6cd50a8.js | 1 - docs/.vuepress/dist/assets/js/31.e6a3e307.js | 1 + docs/.vuepress/dist/assets/js/32.956d7d1e.js | 1 + docs/.vuepress/dist/assets/js/32.e86ce51e.js | 1 - docs/.vuepress/dist/assets/js/33.22f2c5eb.js | 1 + docs/.vuepress/dist/assets/js/33.4a1b8e35.js | 1 - docs/.vuepress/dist/assets/js/34.4aeb1a30.js | 1 - docs/.vuepress/dist/assets/js/34.f43470a7.js | 1 + .../js/{36.aad47f8a.js => 36.60a43328.js} | 2 +- .../js/{6.b27b47f9.js => 6.fe6a84ee.js} | 2 +- .../js/{7.14247048.js => 7.d2383eb9.js} | 2 +- .../js/{8.a0cdad8d.js => 8.aecfa685.js} | 2 +- .../js/{9.b3cccf5b.js => 9.c06d2c2b.js} | 2 +- docs/.vuepress/dist/assets/js/app.98d9df19.js | 16 -- docs/.vuepress/dist/assets/js/app.ef061a61.js | 16 ++ docs/.vuepress/dist/index.html | 4 +- docs/.vuepress/dist/pages/base/index.html | 8 +- .../.vuepress/dist/pages/baseStart/index.html | 6 +- .../dist/pages/basics/avatar/index.html | 6 +- .../dist/pages/basics/background/index.html | 8 +- .../dist/pages/basics/button/index.html | 8 +- .../dist/pages/basics/icon/index.html | 8 +- .../dist/pages/basics/layout/index.html | 6 +- .../dist/pages/basics/loading/index.html | 6 +- .../dist/pages/basics/progress/index.html | 8 +- .../dist/pages/basics/shadow/index.html | 8 +- .../dist/pages/basics/tag/index.html | 6 +- .../dist/pages/basics/text/index.html | 6 +- .../pages/component/bar/bottom/index.html | 6 +- .../pages/component/bar/search/index.html | 6 +- .../dist/pages/component/bar/title/index.html | 6 +- .../dist/pages/component/bar/top/index.html | 8 +- .../dist/pages/component/card/index.html | 12 +- .../dist/pages/component/chat/index.html | 12 +- .../dist/pages/component/form/index.html | 20 +- .../dist/pages/component/list/index.html | 16 +- .../dist/pages/component/modal/index.html | 175 ++++++++++++- .../dist/pages/component/nav/index.html | 10 +- .../dist/pages/component/steps/index.html | 79 +++++- .../dist/pages/component/swiper/index.html | 12 +- .../dist/pages/component/timeline/index.html | 12 +- .../dist/pages/plugin/animation/index.html | 45 +++- .../dist/pages/plugin/drawer/index.html | 182 ++++++++++++- .../dist/pages/plugin/indexes/index.html | 210 ++++++++++++++- .../dist/pages/plugin/verticalnav/index.html | 235 ++++++++++++++++- docs/10.文档/30.交互组件/30.列表.md | 11 + docs/10.文档/30.交互组件/40.卡片.md | 8 + docs/10.文档/30.交互组件/50.表单.md | 12 +- .../10.文档/30.交互组件/60.时间轴.md | 2 + docs/10.文档/30.交互组件/70.聊天.md | 7 + docs/10.文档/30.交互组件/80.轮播.md | 17 +- .../10.文档/30.交互组件/90.模态框.md | 241 +++++++++++++++++- .../10.文档/30.交互组件/91.步骤条.md | 118 ++++++++- .../40.插件扩展/10.索引列表.md | 213 +++++++++++++++- .../10.文档/40.插件扩展/20.微动画.md | 55 +++- .../40.插件扩展/30.全屏抽屉.md | 189 +++++++++++++- .../40.插件扩展/40.垂直导航.md | 234 ++++++++++++++++- 87 files changed, 2130 insertions(+), 213 deletions(-) rename docs/.vuepress/dist/assets/js/{10.9bc4e830.js => 10.230d760b.js} (99%) rename docs/.vuepress/dist/assets/js/{11.94510164.js => 11.388aba94.js} (96%) rename docs/.vuepress/dist/assets/js/{12.971ac3e8.js => 12.f801c2be.js} (99%) rename docs/.vuepress/dist/assets/js/{13.d8c0c958.js => 13.b4d1ac6b.js} (99%) rename docs/.vuepress/dist/assets/js/{15.c972ac38.js => 15.fbc3d85a.js} (99%) rename docs/.vuepress/dist/assets/js/{16.da09304c.js => 16.ff717b47.js} (99%) rename docs/.vuepress/dist/assets/js/{17.15374680.js => 17.31e8ea2a.js} (99%) rename docs/.vuepress/dist/assets/js/{18.93fef267.js => 18.78def283.js} (99%) rename docs/.vuepress/dist/assets/js/{19.86d5c6c8.js => 19.4f034cd4.js} (99%) rename docs/.vuepress/dist/assets/js/{20.b480e9bf.js => 20.76bc794a.js} (99%) rename docs/.vuepress/dist/assets/js/{21.1aa9948a.js => 21.b5887f35.js} (99%) rename docs/.vuepress/dist/assets/js/{22.5c8e7d4a.js => 22.8ff6b731.js} (99%) delete mode 100644 docs/.vuepress/dist/assets/js/23.027d9b1c.js create mode 100644 docs/.vuepress/dist/assets/js/23.c8e01869.js delete mode 100644 docs/.vuepress/dist/assets/js/24.0844608f.js create mode 100644 docs/.vuepress/dist/assets/js/24.58842b6b.js create mode 100644 docs/.vuepress/dist/assets/js/25.7ab9f939.js delete mode 100644 docs/.vuepress/dist/assets/js/25.fcf0e5b0.js create mode 100644 docs/.vuepress/dist/assets/js/26.084fffcf.js delete mode 100644 docs/.vuepress/dist/assets/js/26.ad3d9337.js delete mode 100644 docs/.vuepress/dist/assets/js/27.a51b4d48.js create mode 100644 docs/.vuepress/dist/assets/js/27.cfa9855f.js create mode 100644 docs/.vuepress/dist/assets/js/28.8446f6a3.js delete mode 100644 docs/.vuepress/dist/assets/js/28.8d4e487e.js create mode 100644 docs/.vuepress/dist/assets/js/29.6e1e8401.js delete mode 100644 docs/.vuepress/dist/assets/js/29.b0521c11.js delete mode 100644 docs/.vuepress/dist/assets/js/30.6b55ac5f.js create mode 100644 docs/.vuepress/dist/assets/js/30.8d15935b.js delete mode 100644 docs/.vuepress/dist/assets/js/31.b6cd50a8.js create mode 100644 docs/.vuepress/dist/assets/js/31.e6a3e307.js create mode 100644 docs/.vuepress/dist/assets/js/32.956d7d1e.js delete mode 100644 docs/.vuepress/dist/assets/js/32.e86ce51e.js create mode 100644 docs/.vuepress/dist/assets/js/33.22f2c5eb.js delete mode 100644 docs/.vuepress/dist/assets/js/33.4a1b8e35.js delete mode 100644 docs/.vuepress/dist/assets/js/34.4aeb1a30.js create mode 100644 docs/.vuepress/dist/assets/js/34.f43470a7.js rename docs/.vuepress/dist/assets/js/{36.aad47f8a.js => 36.60a43328.js} (68%) rename docs/.vuepress/dist/assets/js/{6.b27b47f9.js => 6.fe6a84ee.js} (97%) rename docs/.vuepress/dist/assets/js/{7.14247048.js => 7.d2383eb9.js} (99%) rename docs/.vuepress/dist/assets/js/{8.a0cdad8d.js => 8.aecfa685.js} (99%) rename docs/.vuepress/dist/assets/js/{9.b3cccf5b.js => 9.c06d2c2b.js} (99%) delete mode 100644 docs/.vuepress/dist/assets/js/app.98d9df19.js create mode 100644 docs/.vuepress/dist/assets/js/app.ef061a61.js diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html index 930ee17..34f1c5a 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 bd1eae5..96d1d16 100644 --- a/docs/.vuepress/dist/archives/index.html +++ b/docs/.vuepress/dist/archives/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)

+ (opens new window)

归档

总共 0 篇文章 @@ -35,6 +35,6 @@
  • 阅读模式

    • - + diff --git a/docs/.vuepress/dist/assets/js/10.9bc4e830.js b/docs/.vuepress/dist/assets/js/10.230d760b.js similarity index 99% rename from docs/.vuepress/dist/assets/js/10.9bc4e830.js rename to docs/.vuepress/dist/assets/js/10.230d760b.js index 43cb1b7..80a76dd 100644 --- a/docs/.vuepress/dist/assets/js/10.9bc4e830.js +++ b/docs/.vuepress/dist/assets/js/10.230d760b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{338:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"文字大小"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字大小"}},[t._v("#")]),t._v(" 文字大小")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-xsl 文字大小 60px 用于图标、数字等特大显示\n.text-sl 文字大小 40px 用于图标、数字等较大显示\n.text-xxl 文字大小 22px 用于金额数字等信息\n.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页\n.text-lg 文字大小 16px 页面小标题，首要层级显示内容\n.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本\n.text-sm 文字大小 12px 页面辅助信息，次级内容等\n.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字\n")])])]),a("h2",{attrs:{id:"文字颜色"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字颜色"}},[t._v("#")]),t._v(" 文字颜色")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-red "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 嫣红 #e54d42 */")]),t._v("\n.text-orange "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桔橙 #f37b1d */")]),t._v("\n.text-yellow "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 明黄 #fbbd08 */")]),t._v("\n.text-olive "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 橄榄 #8dc63f */")]),t._v("\n.text-green "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 森绿 #39b54a */")]),t._v("\n.text-cyan "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 天青 #1cbbb4 */")]),t._v("\n.text-blue "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 海蓝 #0081ff */")]),t._v("\n.text-purple "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 姹紫 #6739b6 */")]),t._v("\n.text-mauve "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 木槿 #9c26b0 */")]),t._v("\n.text-pink "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桃粉 #e03997 */")]),t._v("\n.text-brown "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 棕褐 #a5673f */")]),t._v("\n.text-grey "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 玄灰 #8799a3 */")]),t._v("\n.text-gray "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 草灰 #aaaaaa */")]),t._v("\n.text-black "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 墨黑 #333333 */")]),t._v("\n.text-white "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 雅白 #ffffff */")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字阴影"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字阴影"}},[t._v("#")]),t._v(" 文字阴影")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".text-shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 4px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("204"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 69"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 59"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字截断"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字截断"}},[t._v("#")]),t._v(" 文字截断")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-cut 定义文字容器宽度，超出截断\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-cut padding bg-grey radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("220px")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"文字对齐"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字对齐"}},[t._v("#")]),t._v(" 文字对齐")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-left padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊文字"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊文字"}},[t._v("#")]),t._v(" 特殊文字")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-price 价格文本，利用伪元素添加"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"¥"')]),t._v("符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding text-center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("80.00"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('价格文本，利用伪元素添加"¥"符号'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-Abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("英文单词首字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-ABC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母小写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{342: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.94510164.js b/docs/.vuepress/dist/assets/js/11.388aba94.js similarity index 96% rename from docs/.vuepress/dist/assets/js/11.94510164.js rename to docs/.vuepress/dist/assets/js/11.388aba94.js index 514ee5e..e9c20d5 100644 --- a/docs/.vuepress/dist/assets/js/11.94510164.js +++ b/docs/.vuepress/dist/assets/js/11.388aba94.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{343: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-28T14:05:38.000Z",permalink:"/pages/basics/text",article:!1},regularPath:"/10.%E6%96%87%E6%A1%A3/20.%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0/30.%E6%96%87%E6%9C%AC.html",relativePath:"10.文档/20.基础元素/30.文本.md",key:"v-5b9dd156",path:"/pages/basics/text/",headers:[{level:2,title:"文字大小",slug:"文字大小",normalizedTitle:"文字大小",charIndex:2},{level:2,title:"文字颜色",slug:"文字颜色",normalizedTitle:"文字颜色",charIndex:298},{level:2,title:"文字阴影",slug:"文字阴影",normalizedTitle:"文字阴影",charIndex:755},{level:2,title:"文字截断",slug:"文字截断",normalizedTitle:"文字截断",charIndex:906},{level:2,title:"文字对齐",slug:"文字对齐",normalizedTitle:"文字对齐",charIndex:1133},{level:2,title:"特殊文字",slug:"特殊文字",normalizedTitle:"特殊文字",charIndex:1488}],headersStr:"文字大小 文字颜色 文字阴影 文字截断 文字对齐 特殊文字",content:'# 文字大小\n\n.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\n\n\n# 文字颜色\n\n.text-red /* 嫣红 #e54d42 */\n.text-orange /* 桔橙 #f37b1d */\n.text-yellow /* 明黄 #fbbd08 */\n.text-olive /* 橄榄 #8dc63f */\n.text-green /* 森绿 #39b54a */\n.text-cyan /* 天青 #1cbbb4 */\n.text-blue /* 海蓝 #0081ff */\n.text-purple /* 姹紫 #6739b6 */\n.text-mauve /* 木槿 #9c26b0 */\n.text-pink /* 桃粉 #e03997 */\n.text-brown /* 棕褐 #a5673f */\n.text-grey /* 玄灰 #8799a3 */\n.text-gray /* 草灰 #aaaaaa */\n.text-black /* 墨黑 #333333 */\n.text-white /* 雅白 #ffffff */\n\n\n\n# 文字阴影\n\n.text-shadow {\n /* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */\n text-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);\n}\n\n\n\n# 文字截断\n\n> css 代码\n\n.text-cut 定义文字容器宽度，超出截断\n\n\n> 演示代码\n\n\n\n\n\n# 文字对齐\n\n> css 代码\n\n.text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n\n\n> 演示代码\n\n\n\n\n\n# 特殊文字\n\n> css 代码\n\n.text-price 价格文本，利用伪元素添加"¥"符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n\n\n> 演示代码\n\n\n',normalizedContent:'# 文字大小\n\n.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\n\n\n# 文字颜色\n\n.text-red /* 嫣红 #e54d42 */\n.text-orange /* 桔橙 #f37b1d */\n.text-yellow /* 明黄 #fbbd08 */\n.text-olive /* 橄榄 #8dc63f */\n.text-green /* 森绿 #39b54a */\n.text-cyan /* 天青 #1cbbb4 */\n.text-blue /* 海蓝 #0081ff */\n.text-purple /* 姹紫 #6739b6 */\n.text-mauve /* 木槿 #9c26b0 */\n.text-pink /* 桃粉 #e03997 */\n.text-brown /* 棕褐 #a5673f */\n.text-grey /* 玄灰 #8799a3 */\n.text-gray /* 草灰 #aaaaaa */\n.text-black /* 墨黑 #333333 */\n.text-white /* 雅白 #ffffff */\n\n\n\n# 文字阴影\n\n.text-shadow {\n /* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */\n text-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);\n}\n\n\n\n# 文字截断\n\n> css 代码\n\n.text-cut 定义文字容器宽度，超出截断\n\n\n> 演示代码\n\n\n\n\n\n# 文字对齐\n\n> css 代码\n\n.text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n\n\n> 演示代码\n\n\n\n\n\n# 特殊文字\n\n> css 代码\n\n.text-price 价格文本，利用伪元素添加"¥"符号\n.text-abc 英文单词首字母大写\n.text-abc 全部字母大写\n.text-abc 全部字母小写\n\n\n> 演示代码\n\n\n',charsets:{cjk:!0},lastUpdated:"2023/05/28, 18:15:33",lastUpdatedTimestamp:1685268933e3},{title:"背景",frontmatter:{title:"背景",date:"2023-05-28T10:55:38.000Z",permalink:"/pages/basics/background",article:!1},regularPath:"/10.%E6%96%87%E6%A1%A3/20.%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0/20.%E8%83%8C%E6%99%AF.html",relativePath:"10.文档/20.基础元素/20.背景.md",key:"v-782bf4d4",path:"/pages/basics/background/",headers:[{level:2,title:"深色背景",slug:"深色背景",normalizedTitle:"深色背景",charIndex:2},{level:2,title:"浅色背景",slug:"浅色背景",normalizedTitle:"浅色背景",charIndex:460},{level:2,title:"渐变背景",slug:"渐变背景",normalizedTitle:"渐变背景",charIndex:938},{level:2,title:"图片背景",slug:"图片背景",normalizedTitle:"图片背景",charIndex:1256},{level:2,title:"透明背景（文字层）",slug:"透明背景-文字层",normalizedTitle:"透明背景（文字层）",charIndex:1868}],headersStr:"深色背景 浅色背景 渐变背景 图片背景 透明背景（文字层）",content:'# 深色背景\n\n在 class 中加入 bg-red|orange|...\n\n.bg-red /* 嫣红 #e54d42 */\n.bg-orange /* 桔橙 #f37b1d */\n.bg-yellow /* 明黄 #fbbd08 */\n.bg-olive /* 橄榄 #8dc63f */\n.bg-green /* 森绿 #39b54a */\n.bg-cyan /* 天青 #1cbbb4 */\n.bg-blue /* 海蓝 #0081ff */\n.bg-purple /* 姹紫 #6739b6 */\n.bg-mauve /* 木槿 #9c26b0 */\n.bg-pink /* 桃粉 #e03997 */\n.bg-brown /* 棕褐 #a5673f */\n.bg-grey /* 玄灰 #8799a3 */\n.bg-gray /* 草灰 #aaaaaa */\n.bg-black /* 墨黑 #333333 */\n.bg-white /* 雅白 #ffffff */\n\n\n\n# 浅色背景\n\n在 class 中加入 bg-red|orange|... 在 class 中再加入 light\n\n.light .bg-red /* 嫣红 #e54d42 */\n.light .bg-orange /* 桔橙 #f37b1d */\n.light .bg-yellow /* 明黄 #fbbd08 */\n.light .bg-olive /* 橄榄 #8dc63f */\n.light .bg-green /* 森绿 #39b54a */\n.light .bg-cyan /* 天青 #1cbbb4 */\n.light .bg-blue /* 海蓝 #0081ff */\n.light .bg-purple /* 姹紫 #6739b6 */\n.light .bg-mauve /* 木槿 #9c26b0 */\n.light .bg-pink /* 桃粉 #e03997 */\n.light .bg-brown /* 棕褐 #a5673f */\n.light .bg-grey /* 玄灰 #8799a3 */\n\n\n\n# 渐变背景\n\n在 class 中加入 bg-gradual-red|orange|...\n\n.bg-gradual-red /* 魅红 #f43f3b - #ec008c */\n.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */\n.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */\n.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */\n.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */\n.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */\n\n\n\n# 图片背景\n\n在 class 中加入 bg-img bg-mask\n\n> css 代码\n\n.bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。\n.bg-mask 在背景图片加一层黑色遮罩\n\n.bg-shadeTop 背景图片加一层黑色遮罩上面开始\n.bg-shadeBottom 背景图片加一层黑色遮罩下面开始\n\n\n> 演示代码\n\n\n \n \n 钢铁之翼\n \n \n Only the guilty need fear me.\n \n \n\n\n\n\n# 透明背景（文字层）\n\n在 class 中加入 bg-shadeBottom|shadeTop\n\n> 演示代码\n\n\n \n 上面开始\n \n\n\n \n 下面开始\n \n\n',normalizedContent:'# 深色背景\n\n在 class 中加入 bg-red|orange|...\n\n.bg-red /* 嫣红 #e54d42 */\n.bg-orange /* 桔橙 #f37b1d */\n.bg-yellow /* 明黄 #fbbd08 */\n.bg-olive /* 橄榄 #8dc63f */\n.bg-green /* 森绿 #39b54a */\n.bg-cyan /* 天青 #1cbbb4 */\n.bg-blue /* 海蓝 #0081ff */\n.bg-purple /* 姹紫 #6739b6 */\n.bg-mauve /* 木槿 #9c26b0 */\n.bg-pink /* 桃粉 #e03997 */\n.bg-brown /* 棕褐 #a5673f */\n.bg-grey /* 玄灰 #8799a3 */\n.bg-gray /* 草灰 #aaaaaa */\n.bg-black /* 墨黑 #333333 */\n.bg-white /* 雅白 #ffffff */\n\n\n\n# 浅色背景\n\n在 class 中加入 bg-red|orange|... 在 class 中再加入 light\n\n.light .bg-red /* 嫣红 #e54d42 */\n.light .bg-orange /* 桔橙 #f37b1d */\n.light .bg-yellow /* 明黄 #fbbd08 */\n.light .bg-olive /* 橄榄 #8dc63f */\n.light .bg-green /* 森绿 #39b54a */\n.light .bg-cyan /* 天青 #1cbbb4 */\n.light .bg-blue /* 海蓝 #0081ff */\n.light .bg-purple /* 姹紫 #6739b6 */\n.light .bg-mauve /* 木槿 #9c26b0 */\n.light .bg-pink /* 桃粉 #e03997 */\n.light .bg-brown /* 棕褐 #a5673f */\n.light .bg-grey /* 玄灰 #8799a3 */\n\n\n\n# 渐变背景\n\n在 class 中加入 bg-gradual-red|orange|...\n\n.bg-gradual-red /* 魅红 #f43f3b - #ec008c */\n.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */\n.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */\n.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */\n.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */\n.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */\n\n\n\n# 图片背景\n\n在 class 中加入 bg-img bg-mask\n\n> css 代码\n\n.bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。\n.bg-mask 在背景图片加一层黑色遮罩\n\n.bg-shadetop 背景图片加一层黑色遮罩上面开始\n.bg-shadebottom 背景图片加一层黑色遮罩下面开始\n\n\n> 演示代码\n\n\n \n \n 钢铁之翼\n \n \n only the guilty need fear me.\n \n \n\n\n\n\n# 透明背景（文字层）\n\n在 class 中加入 bg-shadebottom|shadetop\n\n> 演示代码\n\n\n \n 上面开始\n \n\n\n \n 下面开始\n \n\n',charsets:{cjk:!0},lastUpdated:"2023/05/28, 22:38:55",lastUpdatedTimestamp:1685284735e3},{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 292527b..bf09edf 100644 --- a/docs/.vuepress/dist/pages/base/index.html +++ b/docs/.vuepress/dist/pages/base/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    介绍

    温馨提示

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

    # 基本介绍

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

    ColorUI Github地址 (opens new window)

    ColorUI 插件市场 (opens new window)

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

    微信扫码预览h5

    # 文档说明

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

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

    # 视图/目录 切换

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

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

    快速使用→

    Theme by Vdoing @@ -36,6 +36,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/baseStart/index.html b/docs/.vuepress/dist/pages/baseStart/index.html index eba6d2e..8039817 100644 --- a/docs/.vuepress/dist/pages/baseStart/index.html +++ b/docs/.vuepress/dist/pages/baseStart/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    - + diff --git a/docs/.vuepress/dist/pages/basics/icon/index.html b/docs/.vuepress/dist/pages/basics/icon/index.html index 84586be..b55c112 100644 --- a/docs/.vuepress/dist/pages/basics/icon/index.html +++ b/docs/.vuepress/dist/pages/basics/icon/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    图标

    温馨提示

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

    # 引入样式

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

    <style>
     @import "colorui/main.css";
     @import "colorui/icon.css";
 </style>
@@ -43,6 +43,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/layout/index.html b/docs/.vuepress/dist/pages/basics/layout/index.html index 073d1d5..7b311f7 100644 --- a/docs/.vuepress/dist/pages/basics/layout/index.html +++ b/docs/.vuepress/dist/pages/basics/layout/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    - + diff --git a/docs/.vuepress/dist/pages/basics/tag/index.html b/docs/.vuepress/dist/pages/basics/tag/index.html index e115332..50dede5 100644 --- a/docs/.vuepress/dist/pages/basics/tag/index.html +++ b/docs/.vuepress/dist/pages/basics/tag/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    @@ -481,6 +481,6 @@ textareaBInput(e) {
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/list/index.html b/docs/.vuepress/dist/pages/component/list/index.html index ef47615..7f3d4de 100644 --- a/docs/.vuepress/dist/pages/component/list/index.html +++ b/docs/.vuepress/dist/pages/component/list/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    列表

    列表主要就是 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">
@@ -42,7 +42,7 @@ return {
         name: 'VR'
     }],
 };
-

    # 菜单列表

    1. 菜单列表就是列表加上类名 menu 设计出的样式
    2. 加上 class 类名 sm-border 设置每一行的短边框
    3. 加上 class 类名 card-menu 将列表设置成卡片样式
    4. 加上 class 类名 arrow 在列表子元素上添加arrow设置箭头

    演示代码

    <view class="cu-list menu sm-border card-menu">
+

    # 菜单列表

    1. 菜单列表就是列表加上类名 menu 设计出的样式

    2. 加上 class 类名 sm-border 设置每一行的短边框

    3. 加上 class 类名 card-menu 将列表设置成卡片样式

    4. 加上 class 类名 arrow 在列表子元素上添加arrow设置箭头

    演示代码

    <view class="cu-list menu sm-border card-menu">
     <!-- 图标 + 标题、arrow 带箭头 -->
     <view class="cu-item arrow">
         <view class="content">
@@ -160,7 +160,7 @@ SwitchSex(e) {
 .switch-sex::before {
     content: "\e7a9";
 }
-

    # 消息列表

    1. 菜单列表就是列表加上类名 menu-avatar 设计出的样式
    2. cu-item 里其实就 cu-avatar 和 content 两块内容
    3. cu-avatar 是左侧头像，加上 round lg 即可，同时可以是方形、圆形、右上角加上数字标签
    4. content 是右侧内容，基本可以完全自定义

    演示代码，可直接复制使用

    <view class="cu-list menu-avatar">
+

    # 消息列表

    1. 菜单列表就是列表加上类名 menu-avatar 设计出的样式

    2. cu-item 里其实就 cu-avatar 和 content 两块内容

    3. cu-avatar 是左侧头像，加上 round lg 即可，同时可以是方形、圆形、右上角加上数字标签

    4. content 是右侧内容，基本可以完全自定义

    演示代码，可直接复制使用

    <view class="cu-list menu-avatar">
     <!-- 凯尔 -->
     <view class="cu-item">
         <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
@@ -248,7 +248,7 @@ SwitchSex(e) {
         </view>
     </view>
 </view>
-

    # 列表左滑

    提示

    因为右侧预览图是 ifname 的原因，无法监听右滑事件，点此查看 ColorUI 在线展示 (opens new window)，

    1. 基于消息列表
    2. 用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 move-cur，就是将该项左移 260upx，右滑则回到原位不变。
    3. 除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度

    演示代码

    <view class="cu-list menu-avatar">
+

    # 列表左滑

    提示

    因为右侧预览图是 ifname 的原因，无法监听右滑事件，点此查看 ColorUI 在线展示 (opens new window)，

    1. 基于消息列表

    2. 用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 move-cur，就是将该项左移 260upx，右滑则回到原位不变。

    3. 除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度

    演示代码

    <view class="cu-list menu-avatar">
 	<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4" :key="index"
 	 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
 		<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
@@ -298,7 +298,7 @@ SwitchSex(e) {
 		}
 	}
 </script>
-

    # 列表相关class

    class类名 说明 可选值
    cu-list 列表必选值 ——
    cu-item 列表子元素 ——
    no-border 无边框 ——
    menu 菜单列表 ——
    sm-border 短边框 ——
    card-menu 卡片样式的菜单列表 ——
    arrow 右箭头 ——
    menu-avatar 消息列表（带头像） ——
    cu-avatar 头像 ——
    content 内容 ——
    grayscale 灰度（background-color: #f5f5f5） ——
    cur background-color: #fcf7e9
    move-cur 左移（transform: translateX(-260upx)）
    上次更新: 2023/06/07, 23:32:56
    导航栏
    卡片

    +

    # 列表相关class

    class类名 说明 可选值
    cu-list 列表必选值 ——
    cu-item 列表子元素 ——
    no-border 无边框 ——
    menu 菜单列表 ——
    sm-border 短边框 ——
    card-menu 卡片样式的菜单列表 ——
    arrow 右箭头 ——
    menu-avatar 消息列表（带头像） ——
    cu-avatar 头像 ——
    content 内容 ——
    grayscale 灰度（background-color: #f5f5f5） ——
    cur background-color: #fcf7e9
    move-cur 左移（transform: translateX(-260upx)）
    上次更新: 2023/06/17, 23:53:47
    导航栏
    卡片

    ← 卡片→

    @@ -314,6 +314,6 @@ SwitchSex(e) {
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/modal/index.html b/docs/.vuepress/dist/pages/component/modal/index.html index 4a48a9c..d800249 100644 --- a/docs/.vuepress/dist/pages/component/modal/index.html +++ b/docs/.vuepress/dist/pages/component/modal/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,178 @@ GitHub (opens new window)

    模态框

    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>
+			<view class="action" @tap="hideModal">
+				<text class="cuIcon-close text-red"></text>
+			</view> 
+		</view>
+		<view class="padding-xl">
+			Modal 内容。
+		</view>
+	</view>
+</view>
+

    # 底部窗口

    1. cu-modal 结合 bottom-modal 实现底部弹窗
    <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
+	<view class="cu-dialog">
+		<view class="cu-bar bg-white">
+			<view class="action text-green">确定</view>
+			<view class="action text-blue" @tap="hideModal">取消</view>
+		</view>
+		<view class="padding-xl">
+			Modal 内容。
+		</view>
+	</view>
+</view>
+

    # 对话窗口

    1. 对话窗口相较于普通窗口底部多了一些用户交互的操作
    //示例一
+<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
+	<view class="cu-dialog">
+		<view class="cu-bar bg-white justify-end">
+			<view class="content">Modal标题</view>
+			<view class="action" @tap="hideModal">
+				<text class="cuIcon-close text-red"></text>
+			</view>
+		</view>
+		<view class="padding-xl">
+			Modal 内容。
+		</view>
+		<view class="cu-bar bg-white justify-end">
+			<view class="action">
+				<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
+				<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
+			</view>
+		</view>
+	</view>
+</view>
+//示例二
+<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
+	<view class="cu-dialog">
+		<view class="cu-bar bg-white justify-end">
+			<view class="content">Modal标题</view>
+			<view class="action" @tap="hideModal">
+				<text class="cuIcon-close text-red"></text>
+			</view>
+		</view>
+		<view class="padding-xl">
+			Modal 内容。
+		</view>
+		<view class="cu-bar bg-white">
+			<view class="action margin-0 flex-sub text-green " @tap="hideModal">
+				<text class="cuIcon-moneybag"></text>微信支付</view>
+			<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
+			<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
+		</view>
+	</view>
+</view>
+

    # 图片窗口

    1. cu-dialog 里放置图片，也可自定义
    <view class="cu-modal" :class="modalName=='Image'?'show':''">
+	<view class="cu-dialog">
+		<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
+			<view class="cu-bar justify-end text-white">
+				<view class="action" @tap="hideModal">
+					<text class="cuIcon-close "></text>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar bg-white">
+			<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
+		</view>
+	</view>
+</view>
+

    # 单选窗口

    1. 就是普通窗口内部结合 radio 标签编写的
    <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
+	<view class="cu-dialog" @tap.stop="">
+		<radio-group class="block" @change="RadioChange">
+			<view class="cu-list menu text-left">
+				<view class="cu-item" v-for="(item,index) in 5" :key="index">
+					<label class="flex justify-between align-center flex-sub">
+						<view class="flex-sub">Item {{index +1}}</view>
+						<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
+						 :value="'radio' + index"></radio>
+					</label>
+				</view>
+			</view>
+		</radio-group>
+	</view>
+</view>
+

    # 多选窗口

    1. 配合 grid 布局自定义的
    <view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
+	<view class="cu-dialog" @tap.stop="">
+		<view class="cu-bar bg-white">
+			<view class="action text-blue" @tap="hideModal">取消</view>
+			<view class="action text-green" @tap="hideModal">确定</view>
+		</view>
+		<view class="grid col-3 padding-sm">
+			<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
+				<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
+				 :data-value="item.value"> {{item.name}}
+					<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
+				</button>
+			</view>
+		</view>
+	</view>
+</view>
+<script>
+	export default {
+		data() {
+			return {
+				modalName: null,
+				checkbox: [{value: 0,name: '10元',checked: false,hot: false,}, 
+                           {value: 1,name: '20元',checked: true,hot: false,},
+                           {value: 2,name: '30元',checked: true,hot: true,}, 
+                           {value: 3,name: '60元',checked: false,hot: true,},
+                           {value: 4,name: '80元',checked: false,hot: false,}, 
+                           {value: 5,name: '100元',checked: false,hot: false,}
+                          ]
+			};
+		},
+		methods: {
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			ChooseCheckbox(e) {
+				let items = this.checkbox;
+				let values = e.currentTarget.dataset.value;
+				for (let i = 0, lenI = items.length; i < lenI; ++i) {
+					if (items[i].value == values) {
+						items[i].checked = !items[i].checked;
+						break
+					}
+				}
+			}
+		}
+	}
+</script>
+

    # 侧边抽屉

    1. cu-modal 结合 drawer-modal，由 justify-start 和 justify-end决定抽屉方向
    //左侧抽屉
+<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
+	<view class="cu-dialog basis-lg" @tap.stop="">
+		<view class="cu-list menu text-left">
+			<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
+				<view class="content">
+					<view>Item {{index +1}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+//右侧抽屉
+<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
+	<view class="cu-dialog basis-lg" @tap.stop="" >
+		<view class="cu-list menu text-left">
+			<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
+				<view class="content">
+					<view>Item {{index +1}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+

    # 模态框相关class

    class 说明 可选值
    cu-modal 模态框必选值 ——
    cu-dialog 模态框子元素 ——
    bottom-modal 底部弹框 ——
    drawer-modal 侧边弹框 ——
    show 显示弹框 ——
    上次更新: 2023/05/28, 18:15:33
    轮播
    步骤条

    ← 步骤条→

    @@ -38,6 +205,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/nav/index.html b/docs/.vuepress/dist/pages/component/nav/index.html index f2cc954..72e42c6 100644 --- a/docs/.vuepress/dist/pages/component/nav/index.html +++ b/docs/.vuepress/dist/pages/component/nav/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    导航栏

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

    # 默认

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

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
 	<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
 		Tab{{index}}
 	</view>
@@ -72,7 +72,7 @@
 		<text class="cuIcon-clothesfill"></text> 皮肤
 	</view>
 </scroll-view>
-

    # 导航栏相关class

    class 说明 可选值
    nav 导航栏必选值 ——
    cu-item 导航栏子元素 ——
    flex flex布局 ——
    flex-sub flex:1，平分 ——
    text-center 居中 ——
    上次更新: 2023/06/07, 23:32:56
    搜索&按钮组&输入操作条
    列表

    +

    # 导航栏相关class

    class 说明 可选值
    nav 导航栏必选值 ——
    cu-item 导航栏子元素 ——
    flex flex布局 ——
    flex-sub flex:1，平分 ——
    text-center 居中 ——
    上次更新: 2023/06/17, 23:53:47
    搜索&按钮组&输入操作条
    列表

    ← 列表→

    @@ -88,6 +88,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/steps/index.html b/docs/.vuepress/dist/pages/component/steps/index.html index 69d2753..328123c 100644 --- a/docs/.vuepress/dist/pages/component/steps/index.html +++ b/docs/.vuepress/dist/pages/component/steps/index.html @@ -10,7 +10,7 @@ - + @@ -18,13 +18,82 @@ GitHub (opens new window)

    步骤条

    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}}
+		</view>
+	</view>
+</view>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				basicsList: [{cuIcon: 'usefullfill',name: '开始'}, 
+                                    {cuIcon: 'radioboxfill',name: '等待'}, 
+                                    {cuIcon: 'roundclosefill',name: '错误'},
+                                    {cuIcon: 'roundcheckfill',name: '完成'
+				}],
+				basics: 0
+			};
+		},
+		methods: {
+			BasicsSteps() {
+				this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1				
+			}
+		}
+	}
+</script>
+
    1. 步骤条的颜色和图标都可以自定义
    2. 对应右侧基本用法第二个
    <view class="bg-white padding margin-top-xs">
+	<view class="cu-steps">
+		<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
+			<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
+		</view>
+	</view>
+</view>
+
    1. 步骤之间的连接默认是横线，也可以通过类名 steps-arrow 换成箭头
    2. 对应右侧基本用法第三个
    <view class="bg-white padding  margin-top-xs">
+	<view class="cu-steps steps-arrow">
+		<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
+			<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
+		</view>
+	</view>
+</view>
+

    # 数字完成

    1. 通过类名 num 可以设置默认图标为数字，已完成且正确的图标为勾，已完成但错误的图标由类名 err 定义
    <view class="bg-white padding">
+	<view class="cu-steps">
+		<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
+			<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
+		</view>
+	</view>
+</view>
+

    # 多级显示

    1. 多级显示需要配合 scroll-view 标签使用 ，并增加类名 steps-bottom
    <scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
+ scroll-with-animation>
+	<view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
+		Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
+	</view>
+</scroll-view>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				scroll: 0
+			};
+		},
+		methods: {
+			ScrollSteps() {
+				this.scroll= this.scroll == 9 ? 0 : this.scroll + 1				
+			}
+		}
+	}
+</script>
+

    # 步骤条相关class

    class 说明 可选值
    cu-steps 步骤条必选值 ——
    cu-item 步骤条子元素 ——
    num 数字步骤条未完成图标 ——
    err 错误图标 ——
    steps-arrow 步骤条连接箭头 ——
    steps-bottom 配合多级步骤条使用（图标在下，文字在上，放在其他步骤条样式会错乱） ——
    上次更新: 2023/05/28, 18:15:33
    模态框
    索引列表

    ← - 索引动画→ + 索引列表→

    Theme by Vdoing @@ -38,6 +107,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/swiper/index.html b/docs/.vuepress/dist/pages/component/swiper/index.html index 5df1294..e818570 100644 --- a/docs/.vuepress/dist/pages/component/swiper/index.html +++ b/docs/.vuepress/dist/pages/component/swiper/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    轮播

    # 全屏限高轮播

    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">
@@ -60,7 +60,7 @@
 		}
 	}
 </script>
-

    # 卡片式轮播

    1. 在 swiper 标签上添加类名 card-swiper
    2. 在 swiper-item 标签内的子元素上添加类名 swiper-item，
    3. 示例中 cardSwiper 函数的主要作用是切换类名 cur，cur 的作用是实现轮播图片中间大，两边小的效果，就是 transform的scale()
    <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+

    # 卡片式轮播

    1. 在 swiper 标签上添加类名 card-swiper

    2. 在 swiper-item 标签内的子元素上添加类名 swiper-item，

    3. 示例中 cardSwiper 函数的主要作用是切换类名 cur，cur 的作用是实现轮播图片中间大，两边小的效果，就是 transform的scale()

    <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
  :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
  indicator-active-color="#0081ff">
 	<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
@@ -188,7 +188,7 @@ cardSwiper(e) {
 		z-index: var(--index);
 	}
 </style>
-
    上次更新: 2023/05/28, 18:15:33
    聊天
    模态框

    +

    # 轮播图相关class

    class 说明 可选值
    screen-swiper 全屏限高轮播 ——
    square-dot 方形指示点 ——
    round-dot 圆形指示点 ——
    card-swiper 卡片式轮播 ——
    swiper-item 滑动切换区域（具体看示例） ——
    tower-swiper 堆叠式轮播 ——
    tower-item 堆叠式轮播子元素 ——
    上次更新: 2023/06/17, 23:53:47
    聊天
    模态框

    ← 模态框→

    @@ -204,6 +204,6 @@ cardSwiper(e) {
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/timeline/index.html b/docs/.vuepress/dist/pages/component/timeline/index.html index 35e2305..a283183 100644 --- a/docs/.vuepress/dist/pages/component/timeline/index.html +++ b/docs/.vuepress/dist/pages/component/timeline/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    时间轴

    # 默认时间轴

    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">
@@ -30,7 +30,7 @@
 		</view>
 	</view>
 </view>
-

    # 彩色时间轴

    1. 与默认的基本格式相同，只是自定义了内容框颜色和图标
    2. 对应右侧彩色时间轴
    <view class="cu-timeline">
+

    # 彩色时间轴

    1. 与默认的基本格式相同，只是自定义了内容框颜色和图标

    2. 对应右侧彩色时间轴

    <view class="cu-timeline">
 	<view class="cu-time">昨天</view>
 	<view class="cu-item cur cuIcon-noticefill">
 		<view class="content bg-green shadow-blur">
@@ -102,7 +102,7 @@
 		</view>
 	</view>
 </view>
-

    # 时间轴相关class

    class 说明 可选值
    cu-timeline 时间轴必选值 ——
    cu-time 时间 ——
    cu-item 子元素 ——
    content 内容信息 ——
    上次更新: 2023/05/28, 18:15:33
    表单
    聊天

    +

    # 时间轴相关class

    class 说明 可选值
    cu-timeline 时间轴必选值 ——
    cu-time 时间 ——
    cu-item 子元素 ——
    content 内容信息 ——
    上次更新: 2023/06/17, 23:53:47
    表单
    聊天

    ← 聊天→

    @@ -118,6 +118,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/animation/index.html b/docs/.vuepress/dist/pages/plugin/animation/index.html index 4815b25..1a6acb3 100644 --- a/docs/.vuepress/dist/pages/plugin/animation/index.html +++ b/docs/.vuepress/dist/pages/plugin/animation/index.html @@ -10,7 +10,7 @@ - + @@ -18,13 +18,48 @@ GitHub (opens new window)

    微动画

    # 微动画

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

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

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

    .animation-fade         /* 淡入  */
+.animation-scale-up     /* 放大  */
+.animation-scale-down   /* 缩小  */
+.animation-slide-top    /* 从上向下滑动  */
+.animation-slide-bottom /* 从下向上滑动  */
+.animation-slide-left   /* 从左向右滑动  */
+.animation-slide-right  /* 从右向左滑动  */
+.animation-shake        /* 摇动  */
+

    # gif动画

    1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来
    <view class="margin radius bg-gradual-green shadow-blur">
+	<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></image>
+</view>
+<view class="margin flex">
+	<view class="bg-black flex-sub margin-right radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
+	</view>
+	<view class="bg-white flex-sub radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
+	</view>
+</view>
+<view class="margin flex">
+	<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
+	</view>
+	<view class="bg-white flex-sub radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
+	</view>
+</view>
+<view class="margin flex">
+	<view class="bg-white flex-sub margin-right radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
+	</view>
+	<view class="bg-black flex-sub radius shadow-lg">
+		<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
+	</view>
+</view>
+
    上次更新: 2023/05/28, 18:15:33
    索引列表
    全屏抽屉

    ← - 全屏抽屉→ + 全屏抽屉→

    Theme by Vdoing @@ -38,6 +73,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/drawer/index.html b/docs/.vuepress/dist/pages/plugin/drawer/index.html index 61fb22f..7abad3c 100644 --- a/docs/.vuepress/dist/pages/plugin/drawer/index.html +++ b/docs/.vuepress/dist/pages/plugin/drawer/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,185 @@ GitHub (opens new window)

    全屏抽屉

    # 全屏抽屉

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

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

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

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

    <template>
+	<view class="bg-gradual-blue">
+        // 全屏主体页面
+		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
+			<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
+				<block slot="content">全屏抽屉</block>
+			</cu-custom>			
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
+					打开抽屉
+				</view>
+			</view>
+			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
+				<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
+					<view class="content">
+						<text class="cuIcon-github text-grey"></text>
+						<text class="text-grey">{{index +1}}</text>
+					</view>
+				</view>
+			</view>
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
+					打开抽屉
+				</view>
+			</view>
+		</scroll-view>
+        // 关闭部分		
+		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
+			<text class="cuIcon-pullright"></text>
+		</view>
+        // 抽屉部分		
+		<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
+			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
+				<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
+					<view class="content">
+						<text class="cuIcon-github text-grey"></text>
+						<text class="text-grey">{{index +1}}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				modalName:null
+			};
+		},
+		methods: {
+			showModal(e) {
+				console.log(e)
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+            // 这个函数没用到，我也不知道为什么源码作者写了
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		},
+	}
+</script>
+ 
+<style>
+	page {
+		background-image: var(--gradualBlue);
+		width: 100vw;
+		overflow: hidden;
+	}
+ 
+	.DrawerPage {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		left: 0vw;
+		background-color: #f1f1f1;
+		transition: all 0.4s;
+	}
+ 
+	.DrawerPage.show {
+		transform: scale(0.9, 0.9);
+		left: 85vw;
+		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+		transform-origin: 0;
+	}
+ 
+	.DrawerWindow {
+		position: absolute;
+		width: 85vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		transform: scale(0.9, 0.9) translateX(-100%);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+		padding: 100upx 0;
+	}
+ 
+	.DrawerWindow.show {
+		transform: scale(1, 1) translateX(0%);
+		opacity: 1;
+		pointer-events: all;
+	}
+ 
+	.DrawerClose {
+		position: absolute;
+		width: 40vw;
+		height: 100vh;
+		right: 0;
+		top: 0;
+		color: transparent;
+		padding-bottom: 30upx;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+		letter-spacing: 5px;
+		font-size: 50upx;
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+	}
+ 
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
+	}
+ 
+	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+		width: 64upx;
+		height: 64upx;
+		line-height: 64upx;
+		margin: 0;
+		display: inline-block;
+	}
+ 
+	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+		margin: 0;
+	}
+ 
+	.DrawerPage .nav {
+		flex: 1;
+	}
+ 
+	.DrawerPage .nav .cu-item.cur {
+		border-bottom: 0;
+		position: relative;
+	}
+ 
+	.DrawerPage .nav .cu-item.cur::after {
+		content: "";
+		width: 10upx;
+		height: 10upx;
+		background-color: currentColor;
+		position: absolute;
+		bottom: 10upx;
+		border-radius: 10upx;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+ 
+	.DrawerPage .cu-bar.tabbar .action {
+		flex: initial;
+	}
+</style>
+
    上次更新: 2023/05/28, 18:15:33
    微动画
    垂直导航

    ← 垂直导航→

    @@ -38,6 +212,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/indexes/index.html b/docs/.vuepress/dist/pages/plugin/indexes/index.html index a7511e7..344c708 100644 --- a/docs/.vuepress/dist/pages/plugin/indexes/index.html +++ b/docs/.vuepress/dist/pages/plugin/indexes/index.html @@ -3,14 +3,14 @@ - 索引动画 | ColorUI 使用文档 + 索引列表 | ColorUI 使用文档 - + @@ -18,11 +18,211 @@ GitHub (opens new window)

    索引列表

    # 使用

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

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

    <template>
+	<view>
+		<view class="cu-bar bg-white search fixed">
+			<view class="search-form round">
+				<text class="cuIcon-search"></text>
+				<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
+			</view>
+		</view>
+		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - 50px)'}]"
+		 :scroll-with-animation="true" :enable-back-to-top="true">
+			<block v-for="(item,index) in list" :key="index">
+<!-- 这个'indexItem-' + item.name类名，整个colorUI，我也没找到它的作用，删了也没发现什么影响-->
+				<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
+					<view class="padding">{{item.name}}</view>
+					<view class="cu-list menu-avatar no-padding">
+						<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
+							<view class="cu-avatar round lg">{{item.name}}</view>
+							<view class="content">
+								<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
+								<view class="text-gray text-sm">
+									有{{sub+2}}个主子需要伺候
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</scroll-view>
+		<view class="indexBar" :style="[{height:'calc(100vh - 50px)'}]">
+			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
+				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
+					{{item.name}}</view>
+			</view>
+		</view>
+		<!--选择显示-->
+		<view v-show="!hidden" class="indexToast">
+			{{listCur}}
+		</view>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar,
+				hidden: true,
+				listCurID: '',
+				list: [],
+				listCur: '',
+			};
+		},
+		onLoad() {
+			let list = [{}];
+			for (let i = 0; i < 26; i++) {
+				list[i] = {};
+				list[i].name = String.fromCharCode(65 + i);
+			}
+			this.list = list;
+			this.listCur = list[0];
+		},
+		onReady() {
+			let that = this;
+			//这两句大概知道什么意思，但是emmm,这个boxTop和barTop具体是什么数值，不是很理解
+			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
+				that.boxTop = res.top
+			}).exec();
+			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
+				that.barTop = res.top
+			}).exec()
+		},
+		methods: {
+			//获取文字信息
+			getCur(e) {
+				this.hidden = false;
+				this.listCur = this.list[e.target.id].name;
+			},
+			setCur(e) {
+				this.hidden = true;
+				this.listCur = this.listCur
+			},
+			//滑动选择Item
+			tMove(e) {
+				console.log(this.boxTop)
+				let y = e.touches[0].clientY,
+					offsettop = this.boxTop,
+					that = this;
+				//判断选择区域,只有在选择区才会生效
+				if (y > offsettop) {
+// 这个num计算结果怎么就是字母列表的下标呢，我没想明白，望大佬指教
+					let num = parseInt((y - offsettop) / 20);
+					this.listCur = that.list[num].name
+				};
+			},
+ 
+			//触发全部开始选择
+			tStart() {
+				this.hidden = false
+			},
+ 
+			//触发结束选择
+			tEnd() {
+				this.hidden = true;
+				this.listCurID = this.listCur
+			},
+//源码中有这个函数，但是这个页面中根本没有用到，删了没影响，我也不明白作者为什么写这个
+			indexSelect(e) {
+				let that = this;
+				let barHeight = this.barHeight;
+				let list = this.list;
+				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
+				for (let i = 0; i < list.length; i++) {
+					if (scrollY < i + 1) {
+						that.listCur = list[i].name;
+						that.movableY = i * 20
+						return false
+					}
+				}
+			} 
+		}
+	}
+</script>
+ 
+<style>
+	page {
+		padding-top: 100upx;
+	}
+ 
+	.indexes {
+		position: relative;
+	}
+ 
+	.indexBar {
+		position: fixed;
+		right: 0px;
+		bottom: 0px;
+		padding: 20upx 20upx 20upx 60upx;
+		display: flex;
+		align-items: center;
+	}
+ 
+	.indexBar .indexBar-box {
+		width: 40upx;
+		height: auto;
+		background: #fff;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
+		border-radius: 10upx;
+	}
+ 
+	.indexBar-item {
+		flex: 1;
+		width: 40upx;
+		height: 40upx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 24upx;
+		color: #888;
+	}
+ 
+	movable-view.indexBar-item {
+		width: 40upx;
+		height: 40upx;
+		z-index: 9;
+		position: relative;
+	}
+ 
+	movable-view.indexBar-item::before {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 10upx;
+		height: 20upx;
+		width: 4upx;
+		background-color: #f37b1d;
+	}
+ 
+	.indexToast {
+		position: fixed;
+		top: 0;
+		right: 80upx;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		width: 100upx;
+		height: 100upx;
+		border-radius: 10upx;
+		margin: auto;
+		color: #fff;
+		line-height: 100upx;
+		text-align: center;
+		font-size: 48upx;
+	}
+</style>
+
    上次更新: 2023/05/28, 18:15:33
    步骤条
    微动画

    ← 微动画→

    @@ -38,6 +238,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html index baea5c5..19de53a 100644 --- a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html +++ b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,238 @@ GitHub (opens new window)

    垂直导航

    # 操作条

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

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

    <template>
+	<view>
+		<view class="fixed">
+			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
+				<block slot="backText">返回</block>
+				<block slot="content">垂直导航</block>
+			</cu-custom>
+		</view>
+		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
+		 duration="500">
+			<swiper-item v-for="(item,index) in 4" :key="index">
+				<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
+			</swiper-item>
+		</swiper>
+		<view class="VerticalBox">
+			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
+				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
+				 :data-id="index">
+					Tab-{{item.name}}
+				</view>
+			</scroll-view>
+			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
+			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
+				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
+					<view class="cu-bar solid-bottom bg-white">
+						<view class="action">
+							<text class="cuIcon-title text-green"></text> Tab-{{item.name}}</view>
+					</view>
+					<view class="cu-list menu-avatar">
+						<view class="cu-item">
+							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
+							<view class="content">
+								<view class="text-grey">凯尔</view>
+								<view class="text-gray text-sm flex">
+									<text class="text-cut">
+										<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+										我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+									</text> </view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-grey sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item">
+							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
+								<view class="cu-tag badge">99+</view>
+							</view>
+							<view class="content">
+								<view class="text-grey">
+									<text class="text-cut">瓦洛兰之盾-塔里克</text>
+									<view class="cu-tag round bg-orange sm">战士</view>
+								</view>
+								<view class="text-gray text-sm flex">
+									<text class="text-cut">
+										塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
+									</text>
+								</view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cuIcon-notice_forbid_fill text-gray"></view>
+							</view>
+						</view>
+						<view class="cu-item ">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
+							<view class="content">
+								<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
+								<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-red sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item grayscale">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
+							<view class="content">
+								<view><text class="text-cut">伊泽瑞尔</text>
+									<view class="cu-tag round bg-orange sm">断开连接...</view>
+								</view>
+								<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cu-tag round bg-red sm">5</view>
+							</view>
+						</view>
+						<view class="cu-item cur">
+							<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
+								<view class="cu-tag badge"></view>
+							</view>
+							<view class="content">
+								<view>
+									<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
+									<view class="cu-tag round bg-orange sm">6人</view>
+								</view>
+								<view class="text-gray text-sm flex">
+									<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
+							</view>
+							<view class="action">
+								<view class="text-grey text-xs">22:20</view>
+								<view class="cuIcon-notice_forbid_fill text-gray"></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+				tabCur: 0,
+				mainCur: 0,
+				verticalNavTop: 0,
+				load: true
+			};
+		},
+		onLoad() {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
+			});
+			let list = [{}];
+			for (let i = 0; i < 26; i++) {
+				list[i] = {};
+				list[i].name = String.fromCharCode(65 + i);
+				list[i].id = i;
+			}
+			this.list = list;
+			this.listCur = list[0];
+		},
+		onReady() {
+			uni.hideLoading()
+		},
+		methods: {
+			TabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.id;
+				this.mainCur = e.currentTarget.dataset.id;
+				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
+			},
+            // 希望有大佬给我讲解一下这个双向联动函数
+			VerticalMain(e) {
+				// #ifdef MP-ALIPAY
+				   return false  //支付宝小程序暂时不支持双向联动 
+				// #endif
+				let that = this;
+				let tabHeight = 0;
+				if (this.load) {
+					for (let i = 0; i < this.list.length; i++) {
+						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
+						view.fields({
+							size: true
+						}, data => {
+							this.list[i].top = tabHeight;
+							tabHeight = tabHeight + data.height;
+							this.list[i].bottom = tabHeight;
+						}).exec();
+					}
+					this.load = false
+				}
+				let scrollTop = e.detail.scrollTop + 10;
+				for (let i = 0; i < this.list.length; i++) {
+					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
+						this.verticalNavTop = (this.list[i].id - 1) * 50
+						this.tabCur = this.list[i].id
+						console.log(scrollTop)
+						return false
+					}
+				}
+			}
+		},
+	}
+</script>
+ 
+<style>
+	.fixed {
+		position: fixed;
+		z-index: 99;
+	}
+ 
+	.VerticalNav.nav {
+		width: 200upx;
+		white-space: initial;
+	}
+ 
+	.VerticalNav.nav .cu-item {
+		width: 100%;
+		text-align: center;
+		background-color: #fff;
+		margin: 0;
+		border: none;
+		height: 50px;
+		position: relative;
+	}
+ 
+	.VerticalNav.nav .cu-item.cur {
+		background-color: #f1f1f1;
+	}
+ 
+	.VerticalNav.nav .cu-item.cur::after {
+		content: "";
+		width: 8upx;
+		height: 30upx;
+		border-radius: 10upx 0 0 10upx;
+		position: absolute;
+		background-color: currentColor;
+		top: 0;
+		right: 0upx;
+		bottom: 0;
+		margin: auto;
+	}
+ 
+	.VerticalBox {
+		display: flex;
+	}
+ 
+	.VerticalMain {
+		background-color: #f1f1f1;
+		flex: 1;
+	}
+</style>
+
    上次更新: 2023/05/28, 18:15:33
    全屏抽屉

    ←

    Theme by @@ -37,6 +264,6 @@
  • 阅读模式
    • - + diff --git a/docs/10.文档/30.交互组件/30.列表.md b/docs/10.文档/30.交互组件/30.列表.md index 4883091..d1cf51e 100644 --- a/docs/10.文档/30.交互组件/30.列表.md +++ b/docs/10.文档/30.交互组件/30.列表.md @@ -10,8 +10,11 @@ article: false ## 宫格列表 1. 宫格列表就是列表结合 grid 布局设计出的样式 + 2. 通过 `col-1|...` 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 `no-border` 去除边框 + 3. `cu-item` 里就是图标加文字，图标可以设置数字角标 + 4. 可以在通过遍历循环的变量设置对应的图标、名称等 > 演示代码 @@ -42,8 +45,11 @@ return { ## 菜单列表 1. 菜单列表就是列表加上类名 `menu` 设计出的样式 + 2. 加上 class 类名 `sm-border` 设置每一行的短边框 + 3. 加上 class 类名 `card-menu` 将列表设置成卡片样式 + 4. 加上 class 类名 `arrow` 在列表子元素上添加arrow设置箭头 > 演示代码 @@ -172,8 +178,11 @@ SwitchSex(e) { ## 消息列表 1. 菜单列表就是列表加上类名 `menu-avatar` 设计出的样式 + 2. `cu-item` 里其实就 `cu-avatar` 和 `content` 两块内容 + 3. `cu-avatar` 是左侧头像，加上 `round lg` 即可，同时可以是方形、圆形、右上角加上数字标签 + 4. `content` 是右侧内容，基本可以完全自定义 > 演示代码，可直接复制使用 @@ -276,7 +285,9 @@ SwitchSex(e) { ::: 1. 基于消息列表 + 2. 用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 `move-cur`，就是将该项左移 **260upx**，右滑则回到原位不变。 + 3. 除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度 > 演示代码 diff --git a/docs/10.文档/30.交互组件/40.卡片.md b/docs/10.文档/30.交互组件/40.卡片.md index 898161c..179c18e 100644 --- a/docs/10.文档/30.交互组件/40.卡片.md +++ b/docs/10.文档/30.交互组件/40.卡片.md @@ -10,8 +10,11 @@ article: false ## 案例类卡片 1. `cu-card` 和 `case` 结合，在配合子元素的 `cu-item` 类名，写出案例类的样式 + 2. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除 + 3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上 + 4. 卡片下面就是一个消息列表 ```html @@ -46,8 +49,11 @@ article: false ## 动态类卡片 1. 该样式类似于 QQ 动态，由 `cu-card` 和 `dynamic` 结合，再配合子元素 `cu-item` 编写而成 + 2. 动态下方的评论需要添加类名 `comment` + 3. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除 + 4. **动态图片内容**，官网给出两种样式，第一就是等高 `grid` 宫格图片，第二就是一张图片 ```html @@ -110,7 +116,9 @@ article: false ## 文章类卡片 1. 该卡片由 `cu-card` 和 `article` 结合，再配合子元素 `cu-item` + 2. `cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除 + 3. 卡片里面内容分为 `title` 和 `content`，两个内容皆可自定义 diff --git a/docs/10.文档/30.交互组件/50.表单.md b/docs/10.文档/30.交互组件/50.表单.md index f7374dd..c543a41 100644 --- a/docs/10.文档/30.交互组件/50.表单.md +++ b/docs/10.文档/30.交互组件/50.表单.md @@ -5,13 +5,14 @@ permalink: /pages/component/form article: false --- - - ## input输入框 1. `form` 表单最外层是用 `form` 标签包裹 + 2. 每一个子元素添加类名 `cu-form-group`，行内可以自定义，`input` 标签就是输入框 + 3. `title` 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度 + 4. **行内没有 `input` 标签的话，`title` 后面的元素定位在行内右侧，有 `input` 标签的话，标签后的元素也是在行内右侧** ```html @@ -58,6 +59,7 @@ article: false ## picker选择器 1. 对于表单中从底部谈起的选择器，写法与上述简单的input相同，而选择器picker的使用，建议查看官方代码 + 2. 后期会封装一个组件给大家用（暂无） ```html @@ -254,6 +256,7 @@ RegionChange(e) { ## switch开关 1. 对于开关的样式，参考 `switch` 官方文档 + 2. 在微信小程序上，switch的color属性不生效，想要更改开关颜色，可以用颜色类名，直接写颜色就可以 ```html @@ -310,7 +313,9 @@ SwitchD(e) { ## radio单选框 1. 主要还是 `radio` 官方文档为主 + 2. 更改颜色同上，使用提供的颜色类名即可 + 3. 其默认样式是圆形全色中间有个√，可以通过类名radio更改形状为镂空中间一个点 ```html @@ -351,7 +356,9 @@ RadioChange(e) { ## checkbox复选框 1. 官方示例 + 2. 更改颜色同上，使用提供的颜色类名即可 + 3. 其默认样式是方形，可以通过类名 `round` 更改形状为圆形 ```html @@ -409,6 +416,7 @@ CheckboxChange(e) { ## 图片上传 1. 官方示例 + 2. `uniapp` [图片相关操作的API](https://uniapp.dcloud.net.cn/api/media/image.html#) ```vue diff --git a/docs/10.文档/30.交互组件/60.时间轴.md b/docs/10.文档/30.交互组件/60.时间轴.md index ff31a09..a607001 100644 --- a/docs/10.文档/30.交互组件/60.时间轴.md +++ b/docs/10.文档/30.交互组件/60.时间轴.md @@ -8,6 +8,7 @@ article: false ## 默认时间轴 1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式 + 2. 由 `cu-timeline` 包裹 `cu-time` 和 `cu-item`，在 `item` 内编写内容，由 `content` 包裹 ```html @@ -24,6 +25,7 @@ article: false ## 彩色时间轴 1. 与默认的基本格式相同，只是自定义了内容框颜色和图标 + 2. 对应右侧彩色时间轴 ```html diff --git a/docs/10.文档/30.交互组件/70.聊天.md b/docs/10.文档/30.交互组件/70.聊天.md index a1244d6..a19a5cf 100644 --- a/docs/10.文档/30.交互组件/70.聊天.md +++ b/docs/10.文档/30.交互组件/70.聊天.md @@ -10,10 +10,15 @@ article: false ## 基本样式 1. 聊天的外部大框架是 `cu-chat` + 2. `cu-item` 包裹某人的聊天信息 + 3. `self` 表示右侧自己的聊天样式 + 4. `main` 包含聊天内容 + 5. `date` 表示消息时间 + 6. `cu-info` 表示提示词 ```html @@ -50,7 +55,9 @@ article: false ## 其他聊天内容 1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等 + 2. `main` 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等 + 3. 消息框里的内容由 `content` 包裹 ```html diff --git a/docs/10.文档/30.交互组件/80.轮播.md b/docs/10.文档/30.交互组件/80.轮播.md index 71b8f68..3797997 100644 --- a/docs/10.文档/30.交互组件/80.轮播.md +++ b/docs/10.文档/30.交互组件/80.轮播.md @@ -8,6 +8,7 @@ article: false ## 全屏限高轮播 1. 添加类名 `screen-swiper`，宽度为全屏，高度自定义 + 2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#)，可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式 ```vue @@ -54,7 +55,9 @@ article: false ## 卡片式轮播 1. 在 `swiper` 标签上添加类名 `card-swiper` + 2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`， + 3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`，`cur` 的作用是实现轮播图片中间大，两边小的效果，就是 `transform的scale()` ```vue @@ -195,4 +198,16 @@ cardSwiper(e) { z-index: var(--index); } -``` \ No newline at end of file +``` + +## 轮播图相关class + +|class| 说明| 可选值| +|--| --| --| +|screen-swiper| 全屏限高轮播| ——| +|square-dot| 方形指示点| ——| +|round-dot| 圆形指示点| ——| +|card-swiper| 卡片式轮播| ——| +|swiper-item| 滑动切换区域（具体看示例） |——| +|tower-swiper| 堆叠式轮播 |——| +|tower-item| 堆叠式轮播子元素| ——| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/90.模态框.md b/docs/10.文档/30.交互组件/90.模态框.md index 4603788..a69d715 100644 --- a/docs/10.文档/30.交互组件/90.模态框.md +++ b/docs/10.文档/30.交互组件/90.模态框.md @@ -5,10 +5,241 @@ permalink: /pages/component/modal article: false --- -## 操作条 -::: details 点此查看页面源代码 -页面位置：`/pages/component/modal` -```vue +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`，只做信息的展示，没有交互效果 + +```html + + + + Modal标题 + + + + + + Modal 内容。 + + + ``` -::: \ No newline at end of file + + +## 底部窗口 + +1. `cu-modal` 结合 `bottom-modal` 实现底部弹窗 + +```html + + + + 确定 + 取消 + + + Modal 内容。 + + + +``` + + +## 对话窗口 + +1. 对话窗口相较于普通窗口底部多了一些用户交互的操作 + +```html +//示例一 + + + + Modal标题 + + + + + + Modal 内容。 + + + + + + + + + +//示例二 + + + + Modal标题 + + + + + + Modal 内容。 + + + + 微信支付 + 取消 + 确定 + + + +``` + + +## 图片窗口 + +1. `cu-dialog` 里放置图片，也可自定义 + +```html + + + + + + + + + + + 我知道了 + + + +``` + + +## 单选窗口 + +1. 就是普通窗口内部结合 `radio` 标签编写的 + +```html + + + + + + + + + + + +``` + + +## 多选窗口 + +1. 配合 `grid` 布局自定义的 + +```vue + + + + 取消 + 确定 + + + + + + + + + +``` + +## 侧边抽屉 + +1. `cu-modal` 结合 `drawer-modal`，由 `justify-start` 和 `justify-end`决定抽屉方向 + +```html +//左侧抽屉 + + + + + + Item {{index +1}} + + + + + +//右侧抽屉 + + + + + + Item {{index +1}} + + + + + +``` + +## 模态框相关class + +|class |说明 |可选值| +|-- |-- |--| +|cu-modal |模态框必选值 |——| +|cu-dialog| 模态框子元素| ——| +|bottom-modal |底部弹框| ——| +|drawer-modal| 侧边弹框| ——| +|show| 显示弹框| ——| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/91.步骤条.md b/docs/10.文档/30.交互组件/91.步骤条.md index a1e64ab..dae819b 100644 --- a/docs/10.文档/30.交互组件/91.步骤条.md +++ b/docs/10.文档/30.交互组件/91.步骤条.md @@ -5,10 +5,120 @@ permalink: /pages/component/steps article: false --- -## 操作条 +`cu-steps` 步骤条必选值 + +## 基本用法 + +1. `cu-steps` 和 `cu-item` 配合使用 +2. 对应右侧基本用法第一个 -::: details 点此查看页面源代码 -页面位置：`/pages/component/steps` ```vue + + + + {{item.name}} + + + + + ``` -::: \ No newline at end of file + +1. 步骤条的颜色和图标都可以自定义 +2. 对应右侧基本用法第二个 + +```html + + + + {{item.name}} + + + +``` + +1. 步骤之间的连接默认是横线，也可以通过类名 `steps-arrow` 换成箭头 +2. 对应右侧基本用法第三个 + + +```html + + + + {{item.name}} + + + +``` + + +## 数字完成 + +1. 通过类名 `num` 可以设置默认图标为数字，已完成且正确的图标为勾，已完成但错误的图标由类名 `err` 定义 + +```html + + + + {{item.name}} + + + +``` + +## 多级显示 + +1. 多级显示需要配合 `scroll-view` 标签使用 ，并增加类名 `steps-bottom` + +```vue + + + Level {{index + 1}} + + + + +``` + +## 步骤条相关class + +|class |说明| 可选值| +|-- |--| --| +|cu-steps |步骤条必选值| ——| +|cu-item| 步骤条子元素| ——| +|num |数字步骤条未完成图标 |——| +|err| 错误图标| ——| +|steps-arrow |步骤条连接箭头 ——| +|steps-bottom |配合多级步骤条使用（图标在下，文字在上，放在其他步骤条样式会错乱）| ——| \ No newline at end of file diff --git a/docs/10.文档/40.插件扩展/10.索引列表.md b/docs/10.文档/40.插件扩展/10.索引列表.md index 0ff8c74..e5e00c6 100644 --- a/docs/10.文档/40.插件扩展/10.索引列表.md +++ b/docs/10.文档/40.插件扩展/10.索引列表.md @@ -1,14 +1,215 @@ --- -title: 索引动画 +title: 索引列表 date: 2023-05-28 16:17:38 permalink: /pages/plugin/indexes article: false --- -## 操作条 +## 使用 + +1. 索引列表主要由 `scroll-view` 标签实现，类名为 `indexes`，具体js逻辑请看源码 + +2. 我个人没有使用过这个，大家根据源码来看一下，我也有些地方没弄懂 -::: details 点此查看页面源代码 -页面位置：`/pages/plugin/indexes` ```vue -``` -::: \ No newline at end of file + + + + + +``` \ No newline at end of file diff --git a/docs/10.文档/40.插件扩展/20.微动画.md b/docs/10.文档/40.插件扩展/20.微动画.md index 901d4aa..8a0c871 100644 --- a/docs/10.文档/40.插件扩展/20.微动画.md +++ b/docs/10.文档/40.插件扩展/20.微动画.md @@ -5,10 +5,55 @@ permalink: /pages/plugin/animation article: false --- -## 操作条 +## 微动画 -::: details 点此查看页面源代码 -页面位置：`/pages/plugin/animation` -```vue +1. 加上类名 `animation-fade|...` 即可实现动画 + +2. 加上类名 `animation-reverse` 反向动画 + +3. 延迟动画加上 style `animation-delay: 1s` + +```css +.animation-fade /* 淡入 */ +.animation-scale-up /* 放大 */ +.animation-scale-down /* 缩小 */ +.animation-slide-top /* 从上向下滑动 */ +.animation-slide-bottom /* 从下向上滑动 */ +.animation-slide-left /* 从左向右滑动 */ +.animation-slide-right /* 从右向左滑动 */ +.animation-shake /* 摇动 */ ``` -::: \ No newline at end of file + +## gif动画 + +1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来 + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file diff --git a/docs/10.文档/40.插件扩展/30.全屏抽屉.md b/docs/10.文档/40.插件扩展/30.全屏抽屉.md index 5422021..6dd60c0 100644 --- a/docs/10.文档/40.插件扩展/30.全屏抽屉.md +++ b/docs/10.文档/40.插件扩展/30.全屏抽屉.md @@ -5,10 +5,189 @@ permalink: /pages/plugin/drawer article: false --- -## 操作条 +## 全屏抽屉 + +1. 全屏抽屉效果主要分为三个部分，主要有三个类名 + +2. 第一个类名 `DrawerPage`，就是第一张图总体外部包裹的类名 + +3. 第二个类名 `DrawerClose`，用来包裹打开抽屉之后关闭部分 + +4. 第三个类名 `DrawerWindow`，就是打开的抽屉部分了 -::: details 点此查看页面源代码 -页面位置：`/pages/plugin/drawer` ```vue -``` -::: \ No newline at end of file + + + + + +``` \ No newline at end of file diff --git a/docs/10.文档/40.插件扩展/40.垂直导航.md b/docs/10.文档/40.插件扩展/40.垂直导航.md index b0be1f6..6c0d5dc 100644 --- a/docs/10.文档/40.插件扩展/40.垂直导航.md +++ b/docs/10.文档/40.插件扩展/40.垂直导航.md @@ -7,8 +7,236 @@ article: false ## 操作条 -::: details 点此查看页面源代码 -页面位置：`/pages/plugin/verticalnav` +1. 垂直导航主要有两个 `scroll-view` 标签实现 + +2. 分别是左侧的导航栏部分和右侧的内容部分，左侧导航栏部分使用类名 `VerticalBox`，右侧内容部分使用类名 `VerticalMain` + ```vue + + + + + ``` -::: \ No newline at end of file