v2.0.3

1.修复一些单位错误（带输入框的操作条）
2.纠正一些单词拼写...
3.抛弃icon标签，改回text标签的写法
4.抛弃px单位的样式文件
5.优化一些组件的字体大小
6.新增两种加载样式

demo/app.wxss

@@ -1,5 +1,5 @@
 @import "icon.wxss";
-@import "colorui-rpx.wxss";
+@import "colorui.wxss";
 @import "/pages/plugin/animation/animation.wxss";
 
 .nav-list {
@@ -89,7 +89,7 @@
   margin-right: 1px;
 }
 
-.nav-li icon {
+.nav-li text {
   position: absolute;
   right: 30rpx;
   top: 30rpx;

demo/colorui-px.wxss

@@ -1,2955 +0,0 @@
-/*
-  Color UI v2.0.2 | by 文晓港 
-  单位为多种混合(px,rpx,vw,vh,em)
-  仅供学习交流，如作它用所承受的法律责任一概与作者无关   
-  （QQ交流群：240787041）
-  文档：http://www.color-ui.com/
-*/
-
-/* ==================
-        初始化
- ==================== */
-
-page {
-  background: #f1f1f1;
-  font-size: 14px;
-  color: #333;
-  line-height: 1;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form,
-form-group, info, bar, progress-bar, input, textarea, label, navigator, list,
-item, chat, image {
-  box-sizing: border-box;
-}
-
-/* ==================
-          布局
- ==================== */
-
-/*  -- flex弹性布局 -- */
-
-.flex {
-  display: flex;
-}
-
-.basis-xs {
-  flex-basis: 20%;
-}
-
-.basis-sm {
-  flex-basis: 40%;
-}
-
-.basis-df {
-  flex-basis: 50%;
-}
-
-.basis-lg {
-  flex-basis: 60%;
-}
-
-.basis-xl {
-  flex-basis: 80%;
-}
-
-.flex-sub {
-  flex: 1;
-}
-
-.flex-twice {
-  flex: 2;
-}
-
-.flex-treble {
-  flex: 3;
-}
-
-.flex-direction {
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.align-start {
-  align-items: flex-start;
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-center {
-  align-self: flex-center;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-/* grid布局 */
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid.grid-square {
-  margin-bottom: -10px;
-  overflow: hidden;
-}
-
-.grid.grid-square tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-bottom-left-radius: 3px;
-}
-
-.grid.grid-square view> icon, .grid.grid-square item> icon {
-  font-size: 26px;
-  position: absolute;
-  color: #aaa;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.grid.grid-square view, .grid.grid-square item {
-  margin-right: 10px;
-  margin-bottom: 10px;
-  border-radius: 3px;
-  position: relative;
-  overflow: hidden;
-}
-
-.grid.col-1.grid-square view, .grid.col-1.grid-square item {
-  padding-bottom: 100%;
-  height: 0;
-  margin-right: 0;
-}
-
-.grid.col-2.grid-square view, .grid.col-2.grid-square item {
-  padding-bottom: calc((100% - 10px)/2);
-  height: 0;
-  width: calc((100% - 10px)/2);
-}
-
-.grid.col-2.grid-square view:nth-child(2n),
-.grid.col-2.grid-square item:nth-child(2n) {
-  margin-right: 0;
-}
-
-.grid.col-3.grid-square view, .grid.col-3.grid-square item {
-  padding-bottom: calc((100% - 20px)/3);
-  height: 0;
-  width: calc((100% - 20px)/3);
-}
-
-.grid.col-3.grid-square view:nth-child(3n),
-.grid.col-3.grid-square item:nth-child(3n) {
-  margin-right: 0;
-}
-
-.grid.col-4.grid-square view, .grid.col-4.grid-square item {
-  padding-bottom: calc((100% - 30px)/4);
-  height: 0;
-  width: calc((100% - 30px)/4);
-}
-
-.grid.col-4.grid-square view:nth-child(4n),
-.grid.col-4.grid-square item:nth-child(4n) {
-  margin-right: 0;
-}
-
-.grid.col-5.grid-square view, .grid.col-5.grid-square item {
-  padding-bottom: calc((100% - 40px)/5);
-  height: 0;
-  width: calc((100% - 40px)/5);
-}
-
-.grid.col-1>item, .grid.col-1>view {
-  width: 100%;
-}
-
-.grid.col-2>item, .grid.col-2>view {
-  width: 50%;
-}
-
-.grid.col-3>item, .grid.col-3>view {
-  width: 33.33%;
-}
-
-.grid.col-4>item, .grid.col-4>view {
-  width: 25%;
-}
-
-.grid.col-5>item, .grid.col-5>view {
-  width: 20%;
-}
-
-/*  -- 内外边距 -- */
-
-.margin-0 {
-  margin: 0 !important;
-}
-
-.margin-xs {
-  margin: 5px;
-}
-
-.margin-sm {
-  margin: 10px;
-}
-
-.margin {
-  margin: 15px;
-}
-
-.margin-lg {
-  margin: 20px;
-}
-
-.margin-xl {
-  margin: 25px;
-}
-
-.margin-top-xs {
-  margin-top: 5px;
-}
-
-.margin-top-sm {
-  margin-top: 10px;
-}
-
-.margin-top {
-  margin-top: 15px;
-}
-
-.margin-top-lg {
-  margin-top: 20px;
-}
-
-.margin-top-xl {
-  margin-top: 25px;
-}
-
-.margin-right-xs {
-  margin-right: 5px;
-}
-
-.margin-right-sm {
-  margin-right: 10px;
-}
-
-.margin-right {
-  margin-right: 15px;
-}
-
-.margin-right-lg {
-  margin-right: 20px;
-}
-
-.margin-right-xl {
-  margin-right: 25px;
-}
-
-.margin-bottom-xs {
-  margin-bottom: 5px;
-}
-
-.margin-bottom-sm {
-  margin-bottom: 10px;
-}
-
-.margin-bottom {
-  margin-bottom: 15px;
-}
-
-.margin-bottom-lg {
-  margin-bottom: 20px;
-}
-
-.margin-bottom-xl {
-  margin-bottom: 25px;
-}
-
-.margin-left-xs {
-  margin-left: 5px;
-}
-
-.margin-left-sm {
-  margin-left: 10px;
-}
-
-.margin-left {
-  margin-left: 15px;
-}
-
-.margin-left-lg {
-  margin-left: 20px;
-}
-
-.margin-left-xl {
-  margin-left: 25px;
-}
-
-.margin-lr-xs {
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-.margin-lr-sm {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.margin-lr {
-  margin-left: 15px;
-  margin-right: 15px;
-}
-
-.margin-lr-lg {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.margin-lr-xl {
-  margin-left: 25px;
-  margin-right: 25px;
-}
-
-.margin-tb-xs {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.margin-tb-sm {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.margin-tb {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
-.margin-tb-lg {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.margin-tb-xl {
-  margin-top: 25px;
-  margin-bottom: 25px;
-}
-
-.padding-0 {
-  padding: 0 !important;
-}
-
-.padding-xs {
-  padding: 5px;
-}
-
-.padding-sm {
-  padding: 10px;
-}
-
-.padding {
-  padding: 15px;
-}
-
-.padding-lg {
-  padding: 20px;
-}
-
-.padding-xl {
-  padding: 25px;
-}
-
-.padding-top-xs {
-  padding-top: 5px;
-}
-
-.padding-top-sm {
-  padding-top: 10px;
-}
-
-.padding-top {
-  padding-top: 15px;
-}
-
-.padding-top-lg {
-  padding-top: 20px;
-}
-
-.padding-top-xl {
-  padding-top: 25px;
-}
-
-.padding-right-xs {
-  padding-right: 5px;
-}
-
-.padding-right-sm {
-  padding-right: 10px;
-}
-
-.padding-right {
-  padding-right: 15px;
-}
-
-.padding-right-lg {
-  padding-right: 20px;
-}
-
-.padding-right-xl {
-  padding-right: 25px;
-}
-
-.padding-bottom-xs {
-  padding-bottom: 5px;
-}
-
-.padding-bottom-sm {
-  padding-bottom: 10px;
-}
-
-.padding-bottom {
-  padding-bottom: 15px;
-}
-
-.padding-bottom-lg {
-  padding-bottom: 20px;
-}
-
-.padding-bottom-xl {
-  padding-bottom: 25px;
-}
-
-.padding-left-xs {
-  padding-left: 5px;
-}
-
-.padding-left-sm {
-  padding-left: 10px;
-}
-
-.padding-left {
-  padding-left: 15px;
-}
-
-.padding-left-lg {
-  padding-left: 20px;
-}
-
-.padding-left-xl {
-  padding-left: 25px;
-}
-
-.padding-lr-xs {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.padding-lr-sm {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.padding-lr {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.padding-lr-lg {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.padding-lr-xl {
-  padding-left: 25px;
-  padding-right: 25px;
-}
-
-.padding-tb-xs {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.padding-tb-sm {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.padding-tb {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.padding-tb-lg {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.padding-tb-xl {
-  padding-top: 25px;
-  padding-bottom: 25px;
-}
-
-/* -- 浮动 --  */
-
-.cf::after, .cf::before {
-  content: " ";
-  display: table;
-}
-
-.cf::after {
-  clear: both;
-}
-
-.fl {
-  float: left;
-}
-
-.fr {
-  float: right;
-}
-
-/* ==================
-          图片
- ==================== */
-
-image {
-  max-width: 100%;
-  display: inline-block;
-  position: relative;
-  z-index: 0;
-}
-
-image.loading::before {
-  content: "";
-  background: #f5f5f5;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: -2;
-}
-
-image.loading::after {
-  content: "\e7f1";
-  font-family: "iconfont";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  font-size: 16px;
-  margin: auto;
-  color: #ccc;
-  -webkit-animation: icon-spin 2s infinite linear;
-  animation: icon-spin 2s infinite linear;
-  display: block;
-}
-
-image.response {
-  width: 100%;
-}
-
-/* ==================
-         开关
- ==================== */
-
-switch, checkbox, radio {
-  position: relative;
-}
-
-switch::after {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  left: 10px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(0, 0);
-  transition: all 0.3s ease-in-out 0s;
-}
-
-switch[checked]::after {
-  transform: scale(1, 1);
-}
-
-switch::before {
-  font-family: "iconfont" !important;
-  content: "\e646";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  right: 10px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(1, 1);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-radio::before, checkbox::before {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  right: 5px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(1, 1);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-switch[checked]::before {
-  transform: scale(0, 0);
-}
-
-switch .wx-switch-input {
-  background: #aaa !important;
-  border-color: #aaa;
-  padding: 0 30px;
-  margin: 0;
-}
-
-radio-group {
-  display: inline-block;
-}
-
-radio .wx-radio-input, checkbox .wx-checkbox-input {
-  margin: 0;
-  width: 24px;
-  height: 24px;
-}
-
-checkbox.round .wx-checkbox-input {
-  border-radius: 50px;
-}
-
-switch .wx-switch-input-checked::after {
-  margin-left: 10px;
-  box-shadow: none;
-}
-
-switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
-switch.radius .wx-switch-input::before {
-  border-radius: 5px;
-}
-
-switch .wx-switch-input::before, radio.radio::before,
-checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
-  display: none;
-}
-
-radio.radio[checked]::after {
-  content: "";
-  background: transparent;
-  display: block;
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  z-index: 999;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  border-radius: 100px;
-  border: 8px solid #fff;
-}
-
-switch.sm, checkbox.sm, radio.sm {
-  transform: scale(0.8);
-}
-
-.switch-sex::after {
-  content: "\e71c";
-}
-
-.switch-sex::before {
-  content: "\e71a";
-}
-
-.switch-sex .wx-switch-input {
-  background: #e54d42 !important;
-  border-color: #e54d42;
-}
-
-.switch-sex[checked] .wx-switch-input {
-  background: #0081ff !important;
-  border-color: #0081ff !important;
-}
-
-/* ==================
-          背景
- ==================== */
-
-.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  border-color: #e54d42 !important;
-}
-
-.line-orange::after, .lines-orange::after,
-switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  border-color: #f37b1d !important;
-}
-
-.line-yellow::after, .lines-yellow::after,
-switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  border-color: #fbbd08 !important;
-}
-
-.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  border-color: #8dc63f !important;
-}
-
-.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
-checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
-radio.green[checked] .wx-radio-input {
-  border-color: #39b54a !important;
-}
-
-.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  border-color: #1cbbb4 !important;
-}
-
-.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  border-color: #0081ff !important;
-}
-
-.line-purple::after, .lines-purple::after,
-switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  border-color: #6739b6 !important;
-}
-
-.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  border-color: #9c26b0 !important;
-}
-
-.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  border-color: #e03997 !important;
-}
-
-.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  border-color: #a5673f !important;
-}
-
-.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  border-color: #8799a3 !important;
-}
-
-.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  border-color: #aaa !important;
-}
-
-.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  border-color: #333 !important;
-}
-
-.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  border-color: #fff !important;
-}
-
-.bg-red, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  background-color: #e54d42 !important;
-  color: #fff !important;
-}
-
-.bg-orange, switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  background-color: #f37b1d !important;
-  color: #fff !important;
-}
-
-.bg-yellow, switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  background-color: #fbbd08 !important;
-  color: #333 !important;
-}
-
-.bg-olive, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  background-color: #8dc63f !important;
-  color: #fff !important;
-}
-
-.bg-green, switch.green[checked] .wx-switch-input,
-switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
-checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
-radio[checked] .wx-radio-input {
-  background-color: #39b54a !important;
-  color: #fff !important;
-}
-
-.bg-cyan, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  background-color: #1cbbb4 !important;
-  color: #fff !important;
-}
-
-.bg-blue, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  background-color: #0081ff !important;
-  color: #fff !important;
-}
-
-.bg-purple, switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  background-color: #6739b6 !important;
-  color: #fff !important;
-}
-
-.bg-mauve, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  background-color: #9c26b0 !important;
-  color: #fff !important;
-}
-
-.bg-pink, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  background-color: #e03997 !important;
-  color: #fff !important;
-}
-
-.bg-brown, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  background-color: #a5673f !important;
-  color: #fff !important;
-}
-
-.bg-grey, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  background-color: #8799a3 !important;
-  color: #fff !important;
-}
-
-.bg-gray, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  background-color: #f0f0f0 !important;
-  color: #666 !important;
-}
-
-.bg-black, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  background-color: #333 !important;
-  color: #fff !important;
-}
-
-.bg-white, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  background-color: #fff !important;
-  color: #666;
-}
-
-.bg-shadeTop {
-  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
-  color: #fff;
-}
-
-.bg-shadeBottom {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
-  color: #fff;
-}
-
-.none-bg, .line-white, .lines-white {
-  background-color: transparent !important;
-}
-
-.bg-red.light {
-  color: #e54d42 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-orange.light {
-  color: #f37b1d !important;
-  background: #fde6d2 !important;
-}
-
-.bg-yellow.light {
-  color: #fbbd08 !important;
-  background: #fef2ce !important;
-}
-
-.bg-olive.light {
-  color: #8dc63f !important;
-  background: #e8f4d9 !important;
-}
-
-.bg-green.light {
-  color: #39b54a !important;
-  background: #d7f0db !important;
-}
-
-.bg-cyan.light {
-  color: #1cbbb4 !important;
-  background: #d2f1f0 !important;
-}
-
-.bg-blue.light {
-  color: #0081ff !important;
-  background: #cce6ff !important;
-}
-
-.bg-purple.light {
-  color: #6739b6 !important;
-  background: #e1d7f0 !important;
-}
-
-.bg-mauve.light {
-  color: #9c26b0 !important;
-  background: #ebd4ef !important;
-}
-
-.bg-pink.light {
-  color: #e03997 !important;
-  background: #f9d7ea !important;
-}
-
-.bg-brown.light {
-  color: #a5673f !important;
-  background: #ede1d9 !important;
-}
-
-.bg-grey.light {
-  color: #8799a3 !important;
-  background: #e7ebed !important;
-}
-
-.bg-gray.light {
-  color: #666 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-gray.light {
-  color: #888 !important;
-  background: #f1f1f1 !important;
-}
-
-.gradual-red {
-  background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;
-  color: #fff !important;
-}
-
-.gradual-orange {
-  background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
-  color: #fff !important;
-}
-
-.gradual-green {
-  background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;
-  color: #fff !important;
-}
-
-.gradual-purple {
-  background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;
-  color: #fff !important;
-}
-
-.gradual-pink {
-  background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;
-  color: #fff !important;
-}
-
-.gradual-blue {
-  background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
-  color: #fff !important;
-}
-
-button.shadow[class*="-red"] {
-  box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important;
-}
-
-button.shadow[class*="-orange"] {
-  box-shadow: 3px 3px 4px rgba(217, 109, 26, 0.2) !important;
-}
-
-button.shadow[class*="-yellow"] {
-  box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important;
-}
-
-button.shadow[class*="-olive"] {
-  box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important;
-}
-
-button.shadow[class*="-green"] {
-  box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important;
-}
-
-button.shadow[class*="-cyan"] {
-  box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important;
-}
-
-button.shadow[class*="-blue"] {
-  box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important;
-}
-
-button.shadow[class*="-purple"] {
-  box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important;
-}
-
-button.shadow[class*="-mauve"] {
-  box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important;
-}
-
-button.shadow[class*="-pink"] {
-  box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important;
-}
-
-button.shadow[class*="-brown"] {
-  box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important;
-}
-
-button.shadow[class*="-grey"] {
-  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-gray"] {
-  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-black"] {
-  box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important;
-}
-
-.bg-img {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.bg-mask {
-  background-color: #333;
-  position: relative;
-}
-
-.bg-mask::after {
-  content: "";
-  border-radius: inherit;
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-color: rgba(0, 0, 0, 0.5);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-
-.bg-mask view, .bg-mask cover-view {
-  z-index: 5;
-  position: relative;
-}
-
-.bg-mask>cover-view {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.bg-video {
-  position: relative;
-}
-
-.bg-video video {
-  display: block;
-  height: 100%;
-  width: 100%;
-  -o-object-fit: cover;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* ==================
-          文本
- ==================== */
-
-.text-xs {
-  font-size: 10px;
-}
-
-.text-sm {
-  font-size: 12px;
-}
-
-.text-df {
-  font-size: 14px;
-}
-
-.text-lg {
-  font-size: 16px;
-}
-
-.text-xl {
-  font-size: 18px;
-}
-
-.text-xxl {
-  font-size: 22px;
-}
-
-.text-sl {
-  font-size: 40px;
-}
-
-.text-xsl {
-  font-size: 60px;
-}
-
-.text-Abc {
-  text-transform: Capitalize;
-}
-
-.text-ABC {
-  text-transform: Uppercase;
-}
-
-.text-abc {
-  text-transform: Lowercase;
-}
-
-.text-price::before {
-  content: "¥";
-  font-size: 80%;
-  margin-right: 2px;
-}
-
-.text-cut {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-content {
-  line-height: 1.6;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-red, .line-red, .lines-red {
-  color: #e54d42 !important;
-}
-
-.text-orange, .line-orange, .lines-orange {
-  color: #f37b1d !important;
-}
-
-.text-yellow, .line-yellow, .lines-yellow {
-  color: #fbbd08 !important;
-}
-
-.text-olive, .line-olive, .lines-olive {
-  color: #8dc63f !important;
-}
-
-.text-green, .line-green, .lines-green {
-  color: #39b54a !important;
-}
-
-.text-cyan, .line-cyan, .lines-cyan {
-  color: #1cbbb4 !important;
-}
-
-.text-blue, .line-blue, .lines-blue {
-  color: #0081ff !important;
-}
-
-.text-purple, .line-purple, .lines-purple {
-  color: #6739b6 !important;
-}
-
-.text-mauve, .line-mauve, .lines-mauve {
-  color: #9c26b0 !important;
-}
-
-.text-pink, .line-pink, .lines-pink {
-  color: #e03997 !important;
-}
-
-.text-brown, .line-brown, .lines-brown {
-  color: #a5673f !important;
-}
-
-.text-grey, .line-grey, .lines-grey {
-  color: #8799a3 !important;
-}
-
-.text-gray, .line-gray, .lines-gray {
-  color: #aaa !important;
-}
-
-.text-black, .line-black, .lines-black {
-  color: #333 !important;
-}
-
-.text-white, .line-white, .lines-white {
-  color: #fff !important;
-}
-
-/* ==================
-          边框
- ==================== */
-
-/* -- 实线 -- */
-
-.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
-.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
-.dashed-right, .dashed-bottom, .dashed-left {
-  position: relative;
-}
-
-.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
-.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
-.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
-.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: inherit;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.solid::after {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-top::after {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-right::after {
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-bottom::after {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-left::after {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solids::after {
-  border: 4rpx solid #eee;
-}
-
-.solids-top::after {
-  border-top: 4rpx solid #eee;
-}
-
-.solids-right::after {
-  border-right: 4rpx solid #eee;
-}
-
-.solids-bottom::after {
-  border-bottom: 4rpx solid #eee;
-}
-
-.solids-left::after {
-  border-left: 4rpx solid #eee;
-}
-
-/* -- 虚线 -- */
-
-.dashed::after {
-  border: 1px dashed #ddd;
-}
-
-.dashed-top::after {
-  border-top: 1px dashed #ddd;
-}
-
-.dashed-right::after {
-  border-right: 1px dashed #ddd;
-}
-
-.dashed-bottom::after {
-  border-bottom: 1px dashed #ddd;
-}
-
-.dashed-left::after {
-  border-left: 1px dashed #ddd;
-}
-
-/* -- 阴影 -- */
-
-.shadow {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-lg {
-  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);
-}
-
-.shadow-warp {
-  position: relative;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-warp:before, .shadow-warp:after {
-  position: absolute;
-  content: "";
-  top: 10px;
-  bottom: 15px;
-  left: 10px;
-  width: 50%;
-  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
-  transform: rotate(-3deg);
-  z-index: -1;
-}
-
-.shadow-warp:after {
-  right: 10px;
-  left: auto;
-  transform: rotate(3deg);
-}
-
-.shadow-blur {
-  position: relative;
-}
-
-.shadow-blur::before {
-  content: "";
-  display: block;
-  background: inherit;
-  filter: blur(5px);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 5px;
-  left: 5px;
-  z-index: -1;
-  opacity: 0.4;
-  transform-origin: 0 0;
-  border-radius: inherit;
-  transform: scale(1, 1);
-}
-
-/* ==================
-          按钮
- ==================== */
-
-.round, button.icon {
-  border-radius: 5000px !important;
-}
-
-.radius {
-  border-radius: 3px !important;
-}
-
-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 10px 15px 8px;
-  font-size: 14px;
-  line-height: 1;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 3px;
-  overflow: visible;
-  color: #666;
-  background-color: #fff !important;
-  margin-left: initial;
-  transform: translate(0px, 0px);
-  margin-right: initial;
-}
-
-button::after, tag[class*="line-"]::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1rpx solid rgba(0, 0, 0, 0.2);
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: inherit;
-  z-index: 1;
-  pointer-events: none;
-}
-
-button[class*="line"]::after, tag.radius[class*="line"]::after {
-  border-radius: 6px;
-}
-
-button.round[class*="line"]::after, tag.round[class*="line"]::after {
-  border-radius: 500px;
-}
-
-button[class*="lines"]::after {
-  border: 3px solid rgba(0, 0, 0, 0.2);
-}
-
-button[class*="bg-"]::after {
-  display: none;
-}
-
-button.sm {
-  padding: 7px 10px 5px;
-  font-size: 12px;
-}
-
-button.lg {
-  padding: 16px 20px 14px;
-  font-size: 16px;
-}
-
-button.icon.sm {
-  width: 28px;
-  height: 28px;
-}
-
-button.icon {
-  width: 35px;
-  height: 35px;
-  padding: 0;
-}
-
-button.icon.lg {
-  width: 41px;
-  height: 41px;
-}
-
-button.shadow-blur::before {
-  top: 2px;
-  left: 2px;
-  filter: blur(3px);
-  opacity: 0.6;
-}
-
-button.button-hover {
-  transform: translate(1px, 1px);
-}
-
-.block {
-  display: block;
-}
-
-button.block {
-  display: flex;
-}
-
-button[disabled] {
-  opacity: 0.6;
-  color: #fff;
-}
-
-/* ==================
-          徽章
- ==================== */
-
-tag {
-  font-size: 12px;
-  color: #666;
-  vertical-align: middle;
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 6px 7px 5px;
-  line-height: 1;
-  background: #fff;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-tag[class*="line-"]::after {
-  border-radius: 0;
-}
-
-tag+tag {
-  margin-left: 5px;
-}
-
-tag.sm {
-  font-size: 10px;
-  padding: 5px 6px 3px;
-}
-
-capsule {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-capsule + capsule {
-  margin-left: 5px;
-}
-
-capsule tag {
-  margin: 0;
-}
-
-capsule tag[class*="line-"]:last-child::after {
-  border-left: 0px solid transparent !important;
-}
-
-capsule tag[class*="line-"]:first-child::after {
-  border-right: 0px solid transparent !important;
-}
-
-capsule.radius tag:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-capsule.round tag:first-child {
-  border-top-left-radius: 100px;
-  border-bottom-left-radius: 100px;
-  text-indent: 2px;
-}
-
-capsule.round tag:last-child::after, capsule.round tag:last-child {
-  border-top-right-radius: 100px;
-  border-bottom-right-radius: 100px;
-  text-indent: -2px;
-}
-
-tag.badge {
-  background: #dd514c;
-  border-radius: 100px;
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  font-size: 10px;
-  padding: 3px 5px 2px;
-  color: #fff;
-}
-
-tag:empty {
-  padding: 4px;
-  top: -2px;
-  right: -2px;
-}
-
-/* ==================
-          头像
- ==================== */
-
-avatar {
-  font-variant: small-caps;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  text-align: center;
-  background: #ccc;
-  color: #fff;
-  white-space: nowrap;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  background-size: cover;
-  background-position: center;
-  vertical-align: middle;
-}
-
-avatar text {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  transform-origin: 0 center;
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.sm {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-}
-
-avatar > icon {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  transform-origin: 0 center;
-  transform: scale(1.2) translateX(-50%);
-}
-
-avatar.sm > icon {
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.lg > icon {
-  transform: scale(1.75) translateX(-50%);
-}
-
-avatar.xl > icon {
-  transform: scale(2.2) translateX(-50%);
-}
-
-avatar.lg {
-  width: 45px;
-  height: 45px;
-  line-height: 45px;
-}
-
-avatar.xl {
-  width: 64px;
-  height: 64px;
-  line-height: 64px;
-}
-
-avatar-group {
-  direction: rtl;
-  unicode-bidi: bidi-override;
-  padding: 0 5px 0 20px;
-  display: inline-block;
-}
-
-avatar-group avatar {
-  margin-left: -15px;
-  border: 2px solid #f1f1f1;
-  vertical-align: middle;
-}
-
-avatar-group avatar.sm {
-  margin-left: -10px;
-  border: 1px solid #f1f1f1;
-}
-
-/* ==================
-         进度条
- ==================== */
-
-progress-bar {
-  overflow: hidden;
-  height: 14px;
-  background-color: #ebeef5;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-}
-
-progress-bar+view, progress-bar+text {
-  line-height: 1;
-}
-
-progress-bar.xs {
-  height: 5px;
-}
-
-progress-bar.sm {
-  height: 10px;
-}
-
-progress-bar view {
-  width: 0;
-  height: 100%;
-  align-items: center;
-  display: flex;
-  justify-items: flex-end;
-  justify-content: space-around;
-  font-size: 10px;
-  color: #fff;
-  background: #0081ff;
-  transition: width 0.6s ease;
-}
-
-progress-bar text {
-  align-items: center;
-  display: flex;
-  font-size: 10px;
-  color: #666;
-  text-indent: 5px;
-}
-
-progress-bar.text-progress {
-  padding-right: 30px;
-}
-
-progress-bar.striped view {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: 36px 36px;
-}
-
-progress-bar.active view {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 36px 0;
-  }
-
-  to {
-    background-position: 0 0;
-  }
-}
-
-/* ==================
-          加载
- ==================== */
-
-load {
-  display: block;
-  line-height: 3em;
-  text-align: center;
-}
-
-load::before {
-  font-family: "iconfont" !important;
-  display: inline-block;
-  margin-right: 3px;
-}
-
-load.loading::before {
-  content: "\e67a";
-  animation: icon-spin 2s infinite linear;
-}
-
-load.loading::after {
-  content: "加载中...";
-}
-
-load.over::before {
-  content: "\e64a";
-}
-
-load.over::after {
-  content: "没有更多了";
-}
-
-load.erro::before {
-  content: "\e658";
-}
-
-load.erro::after {
-  content: "加载失败";
-}
-
-load.load-icon::before {
-  font-size: 16px;
-}
-
-load.load-icon::after {
-  display: none;
-}
-
-load.load-icon.over {
-  display: none;
-}
-
-/* ==================
-          列表
- ==================== */
-
-.grayscale {
-  filter: grayscale(1);
-}
-
-list.menu {
-  padding: 0 15px;
-  background: #fff;
-  display: block;
-}
-
-list.menu.no-padding {
-  padding: 0;
-}
-
-list.menu+list.menu {
-  margin-top: 15px;
-}
-
-list+list {
-  margin-top: 15px;
-}
-
-list.menu>item {
-  position: relative;
-  line-height: 18px;
-  font-size: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eee;
-  min-height: 50px;
-}
-
-list.menu>item.cur {
-  background-color: #fcf7e9;
-}
-
-list.menu>item:last-child {
-  border: none;
-}
-
-list.menu.no-padding>item {
-  padding: 15px;
-}
-
-list.menu-avatar.no-padding>item {
-  padding-left: 70px;
-}
-
-list.menu-avatar.no-padding>item avatar {
-  left: 15px;
-}
-
-list.menu.no-padding>item.arrow {
-  padding-right: 33px;
-}
-
-list.menu>item .content {
-  line-height: 1.6em;
-  flex: 1;
-}
-
-list.menu>item button.content {
-  padding: 0;
-  justify-content: flex-start;
-  font-size: 16px;
-}
-
-list.menu>item button.content::after {
-  display: none;
-}
-
-list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
-list.menu>item .content>icon {
-  margin-right: 5px;
-  display: inline-block;
-  width: 1.4em;
-  height: 1.6em;
-  vertical-align: middle;
-  text-align: center;
-}
-
-list.menu>item .action {
-  text-align: right;
-}
-
-list>item.grayscale {
-  background-color: #f5f5f5;
-}
-
-list.menu>item .action tag:empty {
-  right: 5px;
-}
-
-list.menu>item.arrow {
-  padding-right: 18px;
-}
-
-list.menu>item.arrow::after {
-  font-family: "iconfont" !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 17px;
-  color: #aaa;
-  line-height: 15px;
-  height: 15px;
-  width: 15px;
-  text-align: center;
-  top: 1px;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-
-list.menu.no-padding>item.arrow::after {
-  right: 15px;
-}
-
-list.menu>item avatar-group avatar {
-  border-color: #fff;
-}
-
-list.card-menu {
-  margin-left: 15px;
-  margin-right: 15px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-list.menu-avatar>item>avatar {
-  position: absolute;
-  left: 0;
-}
-
-list.menu-avatar>item {
-  padding-left: 55px;
-  height: 70px;
-}
-
-list.menu>item .content tag.sm {
-  font-size: 8px;
-  line-height: 80%;
-  padding: 4px 3px 2px;
-  margin-top: -3px;
-}
-
-list.grid {
-  text-align: center;
-  background: #fff;
-}
-
-list.grid>item {
-  display: flex;
-  flex-direction: column;
-  border-right: 1rpx solid #eee;
-  border-bottom: 1rpx solid #eee;
-  padding: 10px;
-}
-
-list.grid>item icon {
-  display: block;
-  width: 100%;
-  position: relative;
-  font-size: 24px;
-  margin-top: 10px;
-}
-
-list.grid>item text {
-  display: block;
-  color: #888;
-  margin-top: 5px;
-  line-height: 20px;
-  font-size: 13px;
-}
-
-list.grid>item tag {
-  left: 50%;
-  right: auto;
-  margin-left: 10px;
-}
-
-list.grid.col-3>item:nth-child(3n) {
-  border-right: 0px;
-}
-
-list.grid.col-4>item:nth-child(4n) {
-  border-right: 0px;
-}
-
-list.grid.col-5>item:nth-child(5n) {
-  border-right: 0px;
-}
-
-list.grid.no-border {
-  padding: 10px 5px;
-}
-
-list.grid.no-border>item {
-  border: none !important;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-list.menu-avatar.comment > item {
-  height: auto;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  padding-left: 45px;
-}
-
-list.menu-avatar.comment  avatar {
-  align-self: flex-start;
-}
-
-/* ==================
-          操作条
- ==================== */
-
-bar {
-  display: flex;
-  position: relative;
-  align-items: center;
-  background: #fff;
-  height: 50px;
-  justify-content: space-between;
-  font-size: 16px;
-}
-
-bar .action {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  justify-content: center;
-  max-width: 100%;
-}
-
-bar .action:first-child {
-  margin-left: 15px;
-  font-size: 15px;
-}
-
-bar .action:first-child text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
-}
-
-bar avatar:first-child {
-  margin-left: 10px;
-}
-
-bar .action:first-child >icon[class*="icon"] {
-  margin-left: -0.5em;
-}
-
-bar .action:last-child {
-  margin-right: 15px;
-}
-
-bar .action>icon[class*="icon"] {
-  font-size: 18px;
-  height: 100%;
-  width: 1.4em;
-}
-
-bar .action>icon[class*="icon"]+icon[class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .content {
-  position: absolute;
-  text-align: center;
-  width: 400rpx;
-  left: 0;
-  right: 0;
-  bottom: 8px;
-  margin: auto;
-  height: 30px;
-  font-size: 18px;
-  line-height: 30px;
-  cursor: none;
-  pointer-events: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-bar.btn-group {
-  justify-content: space-around;
-}
-
-bar.btn-group button {
-  padding: 10px 16px;
-}
-
-bar.btn-group button {
-  flex: 1;
-  margin: 0 10px;
-  max-width: 50%;
-}
-
-bar .serach-form {
-  background: #f5f5f5;
-  line-height: 32px;
-  height: 32px;
-  font-size: 12px;
-  color: #666;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  margin: 0 10px;
-}
-
-bar .serach-form +.action {
-  margin-right: 10px;
-}
-
-bar .serach-form +.action text+icon {
-  margin-right: -0.5em;
-}
-
-bar .serach-form input {
-  flex: 1;
-  padding-right: 10px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 13px;
-}
-
-bar .serach-form [class*="icon"] {
-  width: 2em;
-  height: auto;
-}
-
-bar .serach-form.round [class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .serach-form [class*="icon"]::before {
-  top: 0px;
-}
-
-bar.fixed, .nav.fixed {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 1024;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-bar.foot {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  z-index: 1024;
-  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
-}
-
-bar.shop {
-  padding: 0;
-}
-
-bar.shop .action {
-  font-size: 12px;
-  position: relative;
-  flex: 1;
-  text-align: center;
-  padding: 0 10px;
-  display: block;
-  height: auto !important;
-  line-height: 1;
-  margin: 0 !important;
-}
-
-bar.shop [class*="icon"] {
-  width: 50px !important;
-  position: relative;
-  display: block;
-  height: auto !important;
-  margin: 0 auto 5px !important;
-}
-
-bar.shop .submit {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  flex: 2;
-  height: 100%;
-}
-
-bar.shop .submit:last-child {
-  flex: 2.6;
-}
-
-bar.shop .submit+.submit {
-  flex: 2;
-}
-
-bar.shop .submit button {
-  margin-left: 10px;
-}
-
-bar.shop .submit:last-child button {
-  margin-left: 0px;
-}
-
-bar.shop .submit+.submit button {
-  margin-left: 0px;
-  margin-right: 10px;
-}
-
-bar.shop .action::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-bar.input {
-  padding-right: 10px;
-}
-
-bar.input input {
-  overflow: initial;
-  line-height: 32px;
-  height: 32px;
-  min-height: 32px;
-  flex: 1;
-  font-size: 15px;
-  margin: 0 10px;
-}
-
-bar.input .action {
-  margin-left: 10px;
-}
-
-bar.input .action [class*="icon"] {
-  font-size: 24px;
-}
-
-bar.input input+.action {
-  margin-right: 10px;
-  margin-left: 0px;
-}
-
-bar.input .action:first-child [class*="icon"] {
-  margin-left: 0px;
-}
-
-custom {
-  display: block;
-  position: relative;
-}
-
-custom bar {
-  padding-right: 110px;
-  box-shadow: 0px 0px 0px !important;
-}
-
-/* ==================
-         导航栏
- ==================== */
-
-.nav {
-  white-space: nowrap;
-}
-
-::-webkit-scrollbar {
-  display: none;
-}
-
-.nav item {
-  height: 45px;
-  display: inline-block;
-  line-height: 45px;
-  margin: 0 5px;
-  padding: 0 10px;
-}
-
-.nav item.cur {
-  border-bottom: 2px solid;
-}
-
-/* ==================
-         时间轴
- ==================== */
-
-timeline {
-  display: block;
-  background: #fff;
-}
-
-timeline time {
-  width: 60px;
-  text-align: center;
-  padding: 10px 0;
-  font-size: 13px;
-  color: #888;
-  display: block;
-}
-
-timeline>item {
-  padding: 15px 15px 15px 60px;
-  position: relative;
-  display: block;
-  color: #ccc;
-  z-index: 0;
-}
-
-timeline>item::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 1rpx;
-  background: #ddd;
-  left: 30px;
-  height: 100%;
-  top: 0;
-  z-index: 8;
-}
-
-timeline>item::before {
-  font-family: "iconfont";
-  content: "\e763";
-  display: block;
-  position: absolute;
-  top: 18px;
-  z-index: 9;
-  background: #fff;
-  width: 25px;
-  height: 25px;
-  text-align: center;
-  border: none;
-  line-height: 25px;
-  left: 18px;
-}
-
-timeline>item[class*="icon"]::before {
-  background: #fff;
-  width: 25px;
-  height: 25px;
-  text-align: center;
-  border: none;
-  line-height: 25px;
-  left: 18px;
-}
-
-timeline>item>.content {
-  background: #f1f1f1;
-  padding: 15px;
-  border-radius: 3px;
-  display: block;
-  color: #666;
-  line-height: 1.6;
-}
-
-timeline>item>.content+.content {
-  margin-top: 10px;
-}
-
-/* ==================
-         聊天
- ==================== */
-
-chat {
-  display: flex;
-  flex-direction: column;
-}
-
-chat item {
-  display: flex;
-  padding: 15px 15px 35px;
-  position: relative;
-}
-
-chat item>avatar {
-  width: 40px;
-  height: 40px;
-}
-
-chat item>.main {
-  max-width: calc(100% - 130px);
-  margin: 0 20px;
-  display: flex;
-  align-items: center;
-}
-
-chat item>image {
-  height: 160px;
-}
-
-chat item>.main .content {
-  background: #fff;
-  padding: 10px;
-  border-radius: 3px;
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  color: #666;
-  font-size: 15px;
-  position: relative;
-  min-height: 40px;
-  line-height: 20px;
-  text-align: left;
-}
-
-chat item .date {
-  position: absolute;
-  font-size: 12px;
-  color: #aaa;
-  width: calc(100% - 160px);
-  bottom: 10px;
-  left: 80px;
-}
-
-chat item .action {
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-}
-
-chat item>.main .content::after {
-  content: "";
-  top: 12px;
-  transform: rotate(180deg);
-  position: absolute;
-  z-index: 100;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  border-bottom: 8px solid transparent;
-  border-top: 8px solid transparent;
-  overflow: hidden;
-  border-right-color: #fff;
-  border-left: 8px solid #333;
-  border-right: 0 dotted;
-  border-left-color: #fff;
-  left: -7px;
-  right: initial;
-}
-
-chat item.self {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-chat item.self>.main .content::after {
-  left: auto;
-  right: -7px;
-  border-right: 8px solid #fff;
-  border-left: 0 dotted;
-}
-
-chat item.self>.main .bg-green.content::after {
-  border-right-color: #39b50a;
-}
-
-chat info {
-  display: inline-block;
-  margin: 10px auto;
-  font-size: 12px;
-  padding: 4px 6px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  color: #fff;
-  max-width: 400rpx;
-  line-height: 1.4;
-}
-
-/* ==================
-         卡片
- ==================== */
-
-card {
-  display: block;
-  overflow: hidden;
-}
-
-card > item {
-  display: block;
-  background: #fff;
-  overflow: hidden;
-  border-radius: 5px;
-  margin: 15px;
-}
-
-card > item.shadow-blur {
-  overflow: initial;
-}
-
-card.no-card > item {
-  margin: 0px;
-  border-radius: 0px;
-}
-
-card.case .image {
-  position: relative;
-}
-
-card.case .image image {
-  width: 100%;
-}
-
-card.case .image tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-card.case .image bar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: transparent;
-  padding: 0px 15px;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-card.case.no-card .image {
-  margin: 15px 15px 0;
-  overflow: hidden;
-  border-radius: 5px;
-}
-
-card.dynamic {
-  display: block;
-}
-
-card.dynamic>item {
-  display: block;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-card.dynamic>item > .text-content {
-  padding: 0 15px 0;
-  max-height: 6.4em;
-  overflow: hidden;
-  font-size: 15px;
-  margin-bottom: 10px;
-}
-
-card.dynamic>item .square-img {
-  width: 100%;
-  height: 100px;
-  border-radius: 3px;
-}
-
-card.dynamic>item .only-img {
-  width: 100%;
-  height: 160px;
-  border-radius: 3px;
-}
-
-/* card.dynamic>item .comment {
-  padding: 10px;
-  background: #f1f1f1;
-  margin: 0 15px 15px;
-  border-radius: 3px;
-} */
-
-card.article {
-  display: block;
-}
-
-card.article>item {
-  padding-bottom: 15px;
-}
-
-card.article>item .title {
-  font-size: 15px;
-  font-weight: 900;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #333;
-  line-height: 50px;
-  padding: 0 15px;
-}
-
-card.article>item .content {
-  display: flex;
-  padding: 0 15px;
-}
-
-card.article>item .content > image {
-  width: 120px;
-  height: 6.4em;
-  margin-right: 10px;
-  border-radius: 3px;
-}
-
-card.article>item .content .desc {
-  flex: 1;
-  width: 500rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-card.article>item .content .text-content {
-  font-size: 14px;
-  color: #888;
-  height: 4.8em;
-  overflow: hidden;
-}
-
-/* ==================
-         表单
- ==================== */
-
-form-group {
-  background: #fff;
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-  min-height: 100rpx;
-  justify-content: space-between;
-}
-
-form-group + form-group {
-  border-top: 1rpx solid #eee;
-}
-
-form-group .title {
-  text-align: justify;
-  padding-right: 15px;
-  font-size: 15px;
-  position: relative;
-  height: 30px;
-  line-height: 30px;
-}
-
-form-group.top {
-  align-items: baseline;
-}
-
-form-group input {
-  flex: 1;
-  font-size: 15px;
-  color: #555;
-  padding-right: 10px;
-}
-
-form-group > icon[class*="icon-"] {
-  font-size: 18px;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-form-group textarea, form-group textarea textarea {
-  margin: 16px 0 15px;
-  height: 4.8em;
-  width: 100%;
-  line-height: 1.2em;
-  flex: 1;
-  font-size: 14px;
-  padding: 0;
-  box-sizing: content-box;
-  display: inline-block;
-  vertical-align: top;
-}
-
-form-group textarea::after {
-  content: "测试文字";
-  opacity: 0;
-}
-
-form-group .grid-square {
-  margin: 15px 0 0 !important;
-}
-
-form-group picker {
-  flex: 1;
-  padding-right: 20px;
-  overflow: hidden;
-  position: relative;
-}
-
-form-group picker .picker {
-  line-height: 50px;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-  text-align: right;
-}
-
-form-group picker::after {
-  font-family: iconfont !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 17px;
-  color: #aaa;
-  line-height: 50px;
-  width: 30px;
-  text-align: center;
-  top: 0;
-  bottom: 0;
-  right: -10px;
-  margin: auto;
-}
-
-form-group textarea[disabled], form-group textarea[disabled] .placeholder {
-  color: transparent;
-}
-
-/* ==================
-         模态窗口
- ==================== */
-
-modal-box {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1110;
-  opacity: 0;
-  outline: 0;
-  text-align: center;
-  -ms-transform: scale(1.185);
-  transform: scale(1.185);
-  backface-visibility: hidden;
-  perspective: 1000px;
-  background: rgba(0, 0, 0, 0.6);
-  transition: all 0.6s ease-in-out 0;
-  pointer-events: none;
-}
-
-modal-box::before {
-  content: "\200B";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-modal-box.show {
-  opacity: 1;
-  transition-duration: 0.3s;
-  -ms-transform: scale(1);
-  transform: scale(1);
-  overflow-x: hidden;
-  overflow-y: auto;
-  pointer-events: auto;
-}
-
-dialog {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: auto;
-  margin-right: auto;
-  width: 680rpx;
-  max-width: 100%;
-  background: #f8f8f8;
-  border-radius: 10rpx;
-  overflow: hidden;
-}
-
-modal-box.bottom-modal::before {
-  vertical-align: bottom;
-}
-
-modal-box.bottom-modal dialog {
-  width: 100%;
-  border-radius: 0;
-}
-
-modal-box.bottom-modal {
-  margin-bottom: -500px;
-}
-
-modal-box.bottom-modal.show {
-  margin-bottom: 0;
-}
-
-/* ==================
-         轮播
- ==================== */
-
-swiper.square-dot .wx-swiper-dot {
-  background: #fff;
-  opacity: 0.4;
-  width: 5px !important;
-  height: 5px !important;
-  border-radius: 10px !important;
-  transition: all 0.3s ease-in-out 0s !important;
-}
-
-swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
-  opacity: 1;
-  width: 15px !important;
-}
-
-swiper.round-dot .wx-swiper-dot {
-  /* background: #39b54a; */
-  width: 5px !important;
-  height: 5px !important;
-  top: -2px !important;
-  transition: all 0.3s ease-in-out 0s !important;
-  position: relative;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
-  content: "";
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background: #fff;
-  border-radius: 10px;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
-  width: 9px !important;
-  height: 9px !important;
-  top: 0px !important;
-}
-
-.screen-swiper {
-  min-height: 375rpx;
-}
-
-.screen-swiper image {
-  width: 100%;
-  display: block;
-  height: 100%;
-  margin: 0;
-}
-
-.card-swiper {
-  height: 420rpx;
-}
-
-.card-swiper swiper-item {
-  width: 610rpx !important;
-  left: 70rpx !important;
-  box-sizing: border-box;
-  padding: 20px 0px 35px;
-  overflow: initial !important;
-}
-
-.card-swiper swiper-item .bg-img {
-  width: 100%;
-  display: block;
-  height: 100%;
-  border-radius: 5px;
-  transform: scale(0.9);
-  transition: all 0.2s ease-in 0s;
-}
-
-.card-swiper swiper-item.cur .bg-img {
-  transform: none;
-  transition: all 0.2s ease-in 0s;
-}
-
-.tower-swiper {
-  height: 420rpx;
-  position: relative;
-}
-
-.tower-swiper .tower-item {
-  position: absolute;
-  width: 300rpx;
-  height: 380rpx;
-  top: 0;
-  bottom: 0;
-  left:50%;
-  margin: auto;
-  transition: all 0.3s ease-in 0s;
-  opacity: 1;
-}
-.tower-swiper .tower-item.none {
-  opacity: 0;
-}
-
-.tower-swiper .tower-item .bg-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 3px;
-}

demo/colorui-rpx.wxss → demo/colorui.wxss

@@ -1,6 +1,5 @@
 /*
-  Color UI v2.0.2 | by 文晓港 
-  单位为多种混合(rpx,vw,vh,em)
+  Color UI v2.0.3 | by 文晓港 
   仅供学习交流，如作它用所承受的法律责任一概与作者无关   
   （QQ交流群：240787041）
   文档：http://www.color-ui.com/
@@ -149,7 +148,7 @@ item, chat, image {
   border-bottom-left-radius: 6rpx;
 }
 
-.grid.grid-square view> icon, .grid.grid-square item> icon {
+.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
   font-size: 52rpx;
   position: absolute;
   color: #aaa;
@@ -691,7 +690,7 @@ switch .wx-switch-input::after {
 
 switch .wx-switch-input-checked::after {
   margin: auto !important;
-  left: 54rpx !important;
+  left: 57rpx !important;
   box-shadow: none !important;
 }
 
@@ -1448,7 +1447,7 @@ button.shadow[class*="-black"] {
           按钮
  ==================== */
 
-.round, button.icon {
+.round, button.text {
   border-radius: 5000rpx !important;
 }
 
@@ -1523,7 +1522,7 @@ button.icon.sm {
   height: 56rpx;
 }
 
-button.icon {
+button.text {
   width: 70rpx;
   height: 70rpx;
   padding: 0;
@@ -1686,7 +1685,7 @@ avatar.sm {
   line-height: 48rpx;
 }
 
-avatar > icon {
+avatar > text {
   position: absolute;
   left: 50%;
   top: 0;
@@ -1696,15 +1695,15 @@ avatar > icon {
   transform: scale(1.2) translateX(-50%);
 }
 
-avatar.sm > icon {
+avatar.sm > text {
   transform: scale(0.75) translateX(-50%);
 }
 
-avatar.lg > icon {
+avatar.lg > text {
   transform: scale(1.75) translateX(-50%);
 }
 
-avatar.xl > icon {
+avatar.xl > text {
   transform: scale(2.2) translateX(-50%);
 }
 
@@ -1860,6 +1859,119 @@ load.load-icon.over {
   display: none;
 }
 
+load.load-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 140rpx;
+  left: 0;
+  margin: auto;
+  width: 260rpx;
+  height: 260rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 28rpx;
+  z-index: 9999;
+  line-height: 2.4em;
+}
+
+load.load-modal [class*="icon"]{
+  font-size: 60rpx;
+}
+load.load-modal image{
+  width: 70rpx;
+  height: 70rpx;
+}
+
+load.load-modal::after {
+  content: "";
+  position: absolute;
+  background: #fff;
+  border-radius: 50%;
+  width: 200rpx;
+  height: 200rpx;
+  font-size: 10px;
+  border-top: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-right: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-left: 6rpx solid #f37b1d;
+  animation: icon-spin 1s infinite linear;
+  z-index: -1;
+}
+
+.load-progress {
+  pointer-events: none;
+  top: 0;
+  position: fixed;
+  width: 100%;
+  left: 0;  
+  z-index: 2000;
+}
+.load-progress.hide {
+  display: none;
+}
+
+.load-progress .load-progress-bar {
+  position: relative;
+  width: 100%;
+  height: 4rpx;
+  overflow: hidden;
+  transition: all 200ms ease 0s;
+}
+
+
+.load-progress .load-progress-spinner {
+  position: absolute;
+  top: 10rpx;
+  right: 10rpx;
+  z-index: 2000;
+  display: block;
+}
+
+.load-progress .load-progress-spinner::after {
+  content: "";
+  display: block;
+  width: 24rpx;
+  height: 24rpx;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: solid 4rpx transparent;
+  border-top-color: inherit;
+  border-left-color: inherit;
+  border-radius: 50%;
+  -webkit-animation: load-progress-spinner 0.4s linear infinite;
+  animation: load-progress-spinner 0.4s linear infinite;
+}
+
+@-webkit-keyframes load-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 /* ==================
           列表
  ==================== */
@@ -1888,8 +2000,6 @@ list+list {
 
 list.menu>item {
   position: relative;
-  line-height: 36rpx;
-  font-size: 32rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1923,27 +2033,31 @@ list.menu.no-padding>item.arrow {
 
 list.menu>item .content {
   line-height: 1.6em;
-  flex: 1;
+  flex: 1;  
+  font-size: 30rpx;
 }
 
 list.menu>item button.content {
   padding: 0;
   justify-content: flex-start;
-  font-size: 32rpx;
 }
 
 list.menu>item button.content::after {
   display: none;
 }
 
-list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
-list.menu>item .content>icon {
+list.menu>item .content>text[class*="icon"]{
   margin-right: 10rpx;
   display: inline-block;
-  width: 1.4em;
+  width: 1.6em;
+  text-align: center
+}
+ list.menu>item .content>image {
+  margin-right: 10rpx;
+  display: inline-block;
+  width: 1.6em;
   height: 1.6em;
   vertical-align: middle;
-  text-align: center;
 }
 
 list.menu>item .action {
@@ -2024,7 +2138,7 @@ list.grid>item {
   padding: 20rpx;
 }
 
-list.grid>item icon {
+list.grid>item text[class*="icon"] {
   display: block;
   width: 100%;
   position: relative;
@@ -2090,7 +2204,6 @@ bar {
   background: #fff;
   height: 100rpx;
   justify-content: space-between;
-  font-size: 32rpx;
 }
 
 bar .action {
@@ -2106,11 +2219,7 @@ bar .action:first-child {
   font-size: 30rpx;
 }
 
-bar .action:first-child text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+bar .action text.text-cut {
   text-align: left;
   width: 100%;
 }
@@ -2119,21 +2228,20 @@ bar avatar:first-child {
   margin-left: 20rpx;
 }
 
-bar .action:first-child >icon[class*="icon"] {
-  margin-left: -0.5em;
+bar .action:first-child >text[class*="icon"] {
+  margin-left: -0.3em;
+  margin-right: 0.3em;
 }
 
 bar .action:last-child {
   margin-right: 30rpx;
 }
 
-bar .action>icon[class*="icon"] {
+bar .action>text[class*="icon"] {
   font-size: 36rpx;
-  height: 100%;
-  width: 1.4em;
 }
 
-bar .action>icon[class*="icon"]+icon[class*="icon"] {
+bar .action>text[class*="icon"]+text[class*="icon"] {
   margin-left: 0.5em;
 }
 
@@ -2169,7 +2277,7 @@ bar.btn-group button {
   max-width: 50%;
 }
 
-bar .serach-form {
+bar .search-form {
   background: #f5f5f5;
   line-height: 64rpx;
   height: 64rpx;
@@ -2181,15 +2289,11 @@ bar .serach-form {
   margin: 0 20rpx;
 }
 
-bar .serach-form +.action {
+bar .search-form +.action {
   margin-right: 20rpx;
 }
 
-bar .serach-form +.action text+icon {
-  margin-right: -0.5em;
-}
-
-bar .serach-form input {
+bar .search-form input {
   flex: 1;
   padding-right: 20rpx;
   height: 128rpx;
@@ -2197,16 +2301,15 @@ bar .serach-form input {
   font-size: 26rpx;
 }
 
-bar .serach-form [class*="icon"] {
-  width: 2em;
-  height: auto;
+bar .search-form [class*="icon"] {
+  margin: 0 0.5em;
 }
 
-bar .serach-form.round [class*="icon"] {
+bar .search-form.round [class*="icon"] {
   margin-left: 0.5em;
 }
 
-bar .serach-form [class*="icon"]::before {
+bar .search-form [class*="icon"]::before {
   top: 0rpx;
 }
 
@@ -2242,12 +2345,17 @@ bar.shop .action {
   margin: 0 !important;
 }
 
+bar.shop button.action::after {
+  border: 0;
+}
+
 bar.shop [class*="icon"] {
   width: 100rpx !important;
   position: relative;
   display: block;
   height: auto !important;
   margin: 0 auto 10rpx !important;
+  text-align: center;
 }
 
 bar.shop .submit {
@@ -2290,7 +2398,7 @@ bar.shop .action::after {
   left: 0;
   transform: scale(0.5);
   transform-origin: 0 0;
-  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-right: 1rpx solid rgba(0, 0, 0, 0.1) !important;
 }
 
 bar.input {
@@ -2299,9 +2407,9 @@ bar.input {
 
 bar.input input {
   overflow: initial;
-  line-height: 128rpx;
-  height: 128rpx;
-  min-height: 128rpx;
+  line-height: 64rpx;
+  height: 64rpx;
+  min-height: 64rpx;
   flex: 1;
   font-size: 30rpx;
   margin: 0 20rpx;
@@ -2721,7 +2829,7 @@ form-group input {
   padding-right: 20rpx;
 }
 
-form-group > icon[class*="icon-"] {
+form-group > text[class*="icon"] {
   font-size: 36rpx;
   padding: 0;
   box-sizing: border-box;

demo/icon.wxss

@@ -27,31 +27,6 @@
     font-style: normal;
 }
 
-icon {
-    height: 1em;
-    width: 1.4em;
-    vertical-align: middle;
-    position: relative;
-}
-
-icon[class*="icon-"]::after {
-    content: "正";
-    opacity: 0;
-}
-
-icon[class*="icon-"]::before {
-    position: absolute;
-    display: block;
-    text-align: center;
-    top: 0px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1em;
-    margin: auto;
-    line-height: 1em;
-}
-
 @font-face {font-family: "iconfont";
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */

demo/pages/basics/avatar/avatar.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 头像
+      <text class='icon-back'></text> 头像
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />头像形状
+    <text class='icon-title text-blue'></text>头像形状
   </view>
 </bar>
 <view class="padding">
@@ -16,7 +16,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像尺寸
+    <text class='icon-title text-blue'></text>头像尺寸
   </view>
 </bar>
 <view class="padding">
@@ -27,12 +27,12 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />内嵌文字(图标)
+    <text class='icon-title text-blue'></text>内嵌文字(图标)
   </view>
 </bar>
 <view class="padding">
   <avatar class="radius">
-    <icon class='icon-people' />
+    <text class='icon-people'></text>
   </avatar>
   <avatar class="radius  margin-left">
     <text>港</text>
@@ -41,7 +41,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像颜色
+    <text class='icon-title text-blue'></text>头像颜色
   </view>
 </bar>
 <view class="padding-sm">
@@ -51,7 +51,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像组
+    <text class='icon-title text-blue'></text>头像组
   </view>
 </bar>
 <view class='padding'>
@@ -62,7 +62,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像标签
+    <text class='icon-title text-blue'></text>头像标签
   </view>
 </bar>
 <view class='padding'>

demo/pages/basics/background/background.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 背景颜色
+      <text class='icon-back'></text> 背景颜色
     </navigator>
   </bar>
 </custom>
 
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />深色背景
+    <text class='icon-title text-blue'></text>深色背景
   </view>
 </bar>
 <view class='grid col-3 padding-sm'>
@@ -22,7 +22,7 @@
 
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />淡色背景
+    <text class='icon-title text-blue'></text>淡色背景
   </view>
 </bar>
 <view class='grid col-3 bg-white padding-sm'>
@@ -35,7 +35,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />渐变背景
+    <text class='icon-title text-blue'></text>渐变背景
   </view>
 </bar>
 <view class='grid col-2 padding-sm'>
@@ -78,7 +78,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />图片背景
+    <text class='icon-title text-blue'></text>图片背景
   </view>
 </bar>
 <view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
@@ -93,7 +93,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />视频背景
+    <text class='icon-title text-blue'></text>视频背景
   </view>
 </bar>
 <view class="bg-video bg-mask">
@@ -109,7 +109,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />透明背景(文字层)
+    <text class='icon-title text-blue'></text>透明背景(文字层)
   </view>
 </bar>
 <view class='grid col-2 padding-sm'>

demo/pages/basics/button/button.wxml

@@ -1,29 +1,29 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 按钮
+      <text class='icon-back'></text> 按钮
     </navigator>
     <navigator class='action' url='design' hover-class="none">
-      <icon class='icon-skinfill' />
+      <text class='icon-skinfill'></text>
       <text class="text-df">设计</text>
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮形状
+    <text class='icon-title text-blue'></text>按钮形状
   </view>
 </bar>
 <view class="padding flex flex-wrap justify-between align-center">
   <button>默认</button>
   <button class='round'>圆角</button>
   <button class='icon'>
-    <icon class='icon-emojifill' />
+    <text class='icon-emojifill'></text>
   </button>
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮尺寸
+    <text class='icon-title text-blue'></text>按钮尺寸
   </view>
 </bar>
 <view class="padding flex flex-wrap justify-between align-center">
@@ -33,7 +33,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮颜色
+    <text class='icon-title text-blue'></text>按钮颜色
   </view>
   <view class='action'>
     <text class='text-df'>阴影</text>
@@ -47,16 +47,16 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />镂空按钮
+    <text class='icon-title text-blue'></text>镂空按钮
   </view>
   <view class='action'>
     <radio-group bindchange='SetBorderSize'>
       <label class='margin-left-sm'>
-        <radio class='blue sm radio' value='' checked/>
+        <radio class='blue sm radio' value='' checked></radio>
         <text> 小</text>
       </label>
       <label class='margin-left-sm'>
-        <radio class='blue sm radio' value='s' />
+        <radio class='blue sm radio' value='s'></radio>
         <text> 大</text>
       </label>
     </radio-group>
@@ -69,7 +69,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />块状按钮
+    <text class='icon-title text-blue'></text>块状按钮
   </view>
 </bar>
 <view class="padding flex flex-direction">
@@ -78,7 +78,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />无效状态
+    <text class='icon-title text-blue'></text>无效状态
   </view>
 </bar>
 <view class="padding">
@@ -87,13 +87,13 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮加图标
+    <text class='icon-title text-blue'></text>按钮加图标
   </view>
 </bar>
 <view class="padding-xl">
   <button class='block line-orange lg'>
-    <icon class='icon-upload' /> 图标</button>
+    <text class='icon-upload'></text> 图标</button>
   <button class='block bg-blue margin-tb-sm lg'>
-    <icon class='icon-loading2 iconfont-spin' /> 加载</button>
+    <text class='icon-loading2 iconfont-spin'></text> 加载</button>
   <button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
 </view>

demo/pages/basics/button/design.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 按钮 / 设计
+      <text class='icon-back'></text> 按钮 / 设计
     </navigator>
   </bar>
 </custom>
@@ -24,15 +24,15 @@
   <view class='title'>选择尺寸</view>
   <radio-group bindchange='SetSize'>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='sm' />
+      <radio class='blue sm radio' value='sm'></radio>
       <text> 小</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='' checked/>
+      <radio class='blue sm radio' value='' checked></radio>
       <text> 中</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='lg' />
+      <radio class='blue sm radio' value='lg'></radio>
       <text> 大</text>
     </label>
   </radio-group>
@@ -49,11 +49,11 @@
   <view class='title'>边框大小</view>
    <radio-group bindchange='SetBorderSize'>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='' checked/>
+      <radio class='blue sm radio' value='' checked></radio>
       <text> 小</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='s' />
+      <radio class='blue sm radio' value='s'></radio>
       <text> 大</text>
     </label>
   </radio-group>
@@ -69,7 +69,7 @@
     <bar class="justify-end">
       <view class='content'>选择颜色</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='grid col-5 padding'>

demo/pages/basics/form/form.wxml

@@ -1,61 +1,58 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       表单控件
     </navigator>
-    <view class='action'>
-
-    </view>
   </bar>
 </custom>
 <view class='text-center'>
   <view class="padding-xl ">
     <checkbox class=''></checkbox>
     <radio-group>
-      <radio class='' checked name="sex" />
-      <radio class='blue sm' name="sex" />
+      <radio class='' checked name="sex"></radio>
+      <radio class='blue sm' name="sex"></radio>
     </radio-group>
   </view>
   <view class="padding-xl ">
-    <switch class='' />
+    <switch class=''></switch>
     <radio-group>
-      <radio class='red radio' checked name="sex" />
-      <radio class='blue radio' name="sex" />
+      <radio class='red radio' checked name="sex"></radio>
+      <radio class='blue radio' name="sex"></radio>
     </radio-group>
     <checkbox class='blue'></checkbox>
     <checkbox class='cyan round'></checkbox>
   </view>
   <view class="padding-xl ">
-    <switch class=' sm' />
+    <switch class=' sm'></switch>
     <radio-group>
-      <radio class='red radio sm' checked name="sex" />
-      <radio class='blue radio sm' name="sex" />
+      <radio class='red radio sm' checked name="sex"></radio>
+      <radio class='blue radio sm' name="sex"></radio>
     </radio-group>
     <checkbox class='red sm'></checkbox>    
     <checkbox class='cyan round sm'></checkbox>
   </view>
   <view class="padding-xl ">
-    <switch class='switch-sex' checked/>
-    <switch class='switch-sex sm' />
+    <switch class='switch-sex' checked></switch>
+    <switch class='switch-sex sm'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='red' checked/>
-    <switch class='blue sm' checked/>
+    <switch class='red' checked></switch>
+    <switch class='blue sm' checked></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='' checked/>
-    <switch class=' sm' checked/>
+    <switch class='' checked></switch>
+    <switch class=' sm' checked></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='' />
-    <switch class=' sm' />
+    <switch class=''></switch>
+    <switch class=' sm'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='orange sm radius' />
-    <switch class='yellow radius' />
+    <switch class='orange sm radius'></switch>
+    <switch class='yellow radius'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='blue radius' />
+    <switch class='blue radius'></switch>
   </view>
 </view>

demo/pages/basics/home/home.wxml

@@ -3,6 +3,6 @@
   <navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
     <view class="nav-title">{{item.title}}</view>
     <view class="nav-name">{{item.name}}</view>
-    <icon class='icon-{{item.icon}}'/>
+    <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>

demo/pages/basics/home/home.wxss

@@ -0,0 +1,3 @@
+.weui-tabbar{
+  left: 0px !important;
+}

demo/pages/basics/icon/icon.wxml

@@ -1,22 +1,19 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 图标
+      <text class='icon-back'></text> 图标
     </navigator>
-    <view class='action'>
-
-    </view>
   </bar>
 </custom>
 <bar class="search fixed" style="top:{{CustomBar}}px">
-  <view class='serach-form round'>
-    <icon class="icon-search"/>
-    <input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'/>
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
   </view>
 </bar>
 <list class="grid col-3">
   <item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
-    <icon class='icon-{{item.name}} lg text-gray'/>
+    <text class='icon-{{item.name}} lg text-gray'></text>
     <text>{{item.name}}</text>
   </item>
 </list>

demo/pages/basics/image/image.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
     <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
         <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-            <icon class='icon-back'/>
+            <text class='icon-back'></text>
             图片
         </navigator>
         <view class='action'>

demo/pages/basics/layout/layout.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 布局
+      <text class='icon-back'></text> 布局
     </navigator>
   </bar>
 </custom>
@@ -13,7 +13,7 @@
 <block wx:if="{{TabCur==0}}">
   <bar class="solid-bottom margin-top">
     <view class='action'>
-      <icon class='icon-title text-blue' />固定尺寸
+      <text class='icon-title text-blue'></text>固定尺寸
     </view>
   </bar>
   <view class="padding bg-white">
@@ -29,7 +29,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />比例布局
+      <text class='icon-title text-blue'></text>比例布局
     </view>
   </bar>
   <view class="padding bg-white">
@@ -49,7 +49,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />水平对齐(justify)
+      <text class='icon-title text-blue'></text>水平对齐(justify)
     </view>
   </bar>
   <view class="bg-white">
@@ -76,7 +76,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />垂直对齐(align)
+      <text class='icon-title text-blue'></text>垂直对齐(align)
     </view>
   </bar>
   <view class="bg-white">
@@ -97,7 +97,7 @@
 <block wx:if="{{TabCur==1}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />等分列
+      <text class='icon-title text-blue'></text>等分列
     </view>
     <view class='action'></view>
   </bar>
@@ -108,7 +108,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />等高
+      <text class='icon-title text-blue'></text>等高
     </view>
     <view class='action'></view>
   </bar>
@@ -121,7 +121,7 @@
 <block wx:if="{{TabCur==2}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />浮动
+      <text class='icon-title text-blue'></text>浮动
     </view>
   </bar>
   <view class="bg-white padding">
@@ -134,7 +134,7 @@
 <block wx:if="{{TabCur==3}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />内外边距
+      <text class='icon-title text-blue'></text>内外边距
     </view>
   </bar>
   <view class="bg-white">

demo/pages/basics/layout/layout.wxss

@@ -1,3 +1,3 @@
 page{
   padding-top: 45px;
-}
+}

demo/pages/basics/loading/loading.js

@@ -2,11 +2,36 @@ const app = getApp();
 Page({
   data: {
     StatusBar: app.globalData.StatusBar,
-    CustomBar: app.globalData.CustomBar
+    CustomBar: app.globalData.CustomBar,
+    loadProgress:0
   },
   isLoading (e) {
     this.setData({
       isLoad: e.detail.value
     })
   },
+  loadModal () {
+    this.setData({
+      loadModal: true
+    })
+    setTimeout(()=> {
+      this.setData({
+        loadModal: false
+      })
+    }, 2000)
+  },
+  loadProgress(){
+    this.setData({
+      loadProgress: this.data.loadProgress+3
+    })
+    if (this.data.loadProgress<100){
+      setTimeout(() => {
+        this.loadProgress();
+      }, 100)
+    }else{
+      this.setData({
+        loadProgress: 0
+      })
+    }
+  }
 });

demo/pages/basics/loading/loading.wxml

@@ -1,31 +1,61 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 加载
+      <text class='icon-back'></text> 加载
     </navigator>
     <view class='action'>
-      <load class="load-icon {{!isLoad?'loading':'over'}}"></load>
+      <load class="load-text {{!isLoad?'loading':'over'}}"></load>
     </view>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue'/>背景
+    <text class='icon-title text-blue'></text>背景
   </view>
 </bar>
 <load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>加载状态
+    <text class='icon-title text-blue'></text>加载状态
   </view>
   <view class='action'>
-  <switch class='sm' bindchange='isLoading'></switch>
+    <switch class='sm' bindchange='isLoading'></switch>
   </view>
 </bar>
 <load class="bg-grey {{!isLoad?'loading':'over'}}"></load>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>加载错误
+    <text class='icon-title text-blue'></text>加载错误
   </view>
 </bar>
-<load class="bg-red erro"></load>
+<load class="bg-red erro"></load>
+
+<bar class="margin-top">
+  <view class='action'>
+    <text class='icon-title text-blue'></text>弹框加载
+  </view>
+  <view class='action'>
+    <button class='bg-green shadow' bindtap='loadModal'>
+      点我
+    </button>
+  </view>
+</bar>
+<load class='load-modal' wx:if="{{loadModal}}"> 
+    <!-- <view class='icon-emojifill text-orange'></view> -->
+    <image src='/images/logo.png' class='png' mode='aspectFit'></image>
+    <view class='gray-text'>加载中...</view>
+</load>
+<bar class="margin-top">
+  <view class='action'>
+    <text class='icon-title text-blue'></text>进度条加载
+  </view>
+  <view class='action'>
+    <button class='bg-green shadow' bindtap='loadProgress'>
+      点我
+    </button>
+  </view>
+</bar>
+<view class='load-progress {{loadProgress!=0?"show":"hide"}}' style="top:{{CustomBar}}px;">
+  <view class='load-progress-bar bg-green' style="transform: translate3d(-{{100-loadProgress}}%, 0px, 0px);"></view>
+  <view class='load-progress-spinner text-green'></view>
+</view>

demo/pages/basics/loading/loading.wxss

@@ -1 +1 @@
-/* pages/basics/load/load.wxss */
+/* pages/basics/load/load.wxss */

demo/pages/basics/progress/progress.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 进度条
+      <text class='icon-back'></text> 进度条
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条形状
+    <text class='icon-title text-blue'></text>进度条形状
   </view>
 </bar>
 <view class="padding bg-white">
@@ -23,7 +23,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条尺寸
+    <text class='icon-title text-blue'></text>进度条尺寸
   </view>
 </bar>
 <view class="padding bg-white">
@@ -40,7 +40,7 @@
 
 <bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条颜色
+    <text class='icon-title text-blue'></text>进度条颜色
   </view>
   <view class='action'>
     <view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
@@ -55,7 +55,7 @@
 
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条条纹
+    <text class='icon-title text-blue'></text>进度条条纹
   </view>
   <switch class='sm margin-right-sm' bindchange='SetActive'></switch>
 </bar>
@@ -69,7 +69,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条比例
+    <text class='icon-title text-blue'></text>进度条比例
   </view>
 </bar>
 <view class="padding bg-white">
@@ -81,7 +81,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条布局
+    <text class='icon-title text-blue'></text>进度条布局
   </view>
 </bar>
 <view class="padding bg-white ">
@@ -89,7 +89,7 @@
     <progress-bar class="round">
       <view class='bg-green' style="width:{{loading?'100%':''}};"></view>
     </progress-bar>
-    <icon class='icon-roundcheckfill text-green margin-left-sm' />
+    <text class='icon-roundcheckfill text-green margin-left-sm'></text>
   </view>
   <view class='flex margin-top'>
     <progress-bar class="round">
@@ -104,7 +104,7 @@
     <bar class="justify-end">
       <view class='content'>选择颜色</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='grid col-5 padding'>

demo/pages/basics/shadow/shadow.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 边框阴影
+      <text class='icon-back'></text> 边框阴影
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />边框
+    <text class='icon-title text-blue'></text>边框
   </view>  
   <view class='action'>
    <switch class='sm' bindchange='SetSize'></switch>
@@ -22,7 +22,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />阴影
+    <text class='icon-title text-blue'></text>阴影
   </view>
 </bar>
 <view class="padding text-center">

demo/pages/basics/tag/tag.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 标签
+      <text class='icon-back'></text> 标签
     </navigator>
   </bar>
 </custom>
 
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />标签形状
+    <text class='icon-title text-blue'></text>标签形状
   </view>
 </bar>
 <view class="padding">
@@ -19,7 +19,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />标签尺寸
+    <text class='icon-title text-blue'></text>标签尺寸
   </view>
 </bar>
 <view class="padding">
@@ -28,7 +28,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />标签颜色
+    <text class='icon-title text-blue'></text>标签颜色
   </view>
 </bar>
 <view class='padding-sm flex flex-wrap'>
@@ -41,7 +41,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />镂空标签
+    <text class='icon-title text-blue'></text>镂空标签
   </view>
 </bar>
 <view class='padding-sm flex flex-wrap'>
@@ -51,13 +51,13 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />胶囊样式
+    <text class='icon-title text-blue'></text>胶囊样式
   </view>
 </bar>
 <view class="padding">
   <capsule>
     <tag class='bg-red'>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-red">
       12
@@ -65,7 +65,7 @@
   </capsule>
   <capsule class="round">
     <tag class='bg-blue '>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-blue">
       23
@@ -81,7 +81,7 @@
   </capsule>
   <capsule class="radius">
     <tag class='bg-grey '>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-grey">
       23
@@ -89,7 +89,7 @@
   </capsule>
   <capsule class="radius">
     <tag class='bg-brown sm'>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-brown sm">
       23
@@ -98,7 +98,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />数字标签
+    <text class='icon-title text-blue'></text>数字标签
   </view>
 </bar>
 <view class="padding flex justify-between align-center">
@@ -111,7 +111,7 @@
   </avatar>
   <avatar class='xl radius'>
     <tag class='badge'>99</tag>
-    <icon class='icon-people' />
+    <text class='icon-people'></text>
   </avatar>
   <avatar class='xl radius'>
     <tag class='badge'>99+</tag>

demo/pages/basics/text/text.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 文本
+      <text class='icon-back'></text> 文本
     </navigator>
     <view class='action'>
 
@@ -10,7 +10,7 @@
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字大小
+    <text class='icon-title text-blue'></text>文字大小
   </view>
 </bar>
 <view class='bg-white padding-lr'>
@@ -18,7 +18,7 @@
     <view class='padding'>60</view>
     <view class='flex-sub text-center'>
       <view class='solid-bottom text-xsl padding'>
-        <icon class=' icon-roundcheckfill text-green'/>
+        <text class=' icon-roundcheckfill text-green'></text>
       </view>
       <view class='padding'>用于图标、数字等特大显示</view>
     </view>
@@ -27,7 +27,7 @@
     <view class='padding'>40</view>
     <view class='flex-sub text-center'>
       <view class='solid-bottom text-sl padding'>
-        <icon class=' icon-roundcheckfill text-green'/>
+        <text class=' icon-roundcheckfill text-green'></text>
       </view>
       <view class='padding'>用于图标、数字等较大显示</view>
     </view>
@@ -87,7 +87,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字颜色
+    <text class='icon-title text-blue'></text>文字颜色
   </view>
 </bar>
 <view class='grid col-5 padding-sm'>
@@ -99,7 +99,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字截断
+    <text class='icon-title text-blue'></text>文字截断
   </view>
 </bar>
 <view class='padding bg-white'>
@@ -107,7 +107,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字对齐
+    <text class='icon-title text-blue'></text>文字对齐
   </view>
 </bar>
 <view class='padding bg-white'>
@@ -117,7 +117,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>特殊文字
+    <text class='icon-title text-blue'></text>特殊文字
   </view>
 </bar>
 <view class='padding text-center'>

demo/pages/component/bar/bar.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' />
+      <text class='icon-back'></text>
       <text>操作条</text>
     </navigator>
   </bar>
@@ -9,31 +9,31 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-back text-gray' />
+    <text class='icon-back text-gray'></text>
     <text>返回</text>
   </view>
 </bar>
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-green ' />
+    <text class='icon-title text-green'></text>
     <text>案例</text>
   </view>
   <view class='action'>
     <button class='bg-green shadow-blur sm'>添加
-      <icon class='icon-add' /> </button>
+      <text class='icon-add'></text> </button>
   </view>
 </bar>
 
 <bar class="margin-top justify-end">
   <view class='action'>
-    <icon class='icon-close text-red'></icon>
+    <text class='icon-close text-red'></text>
   </view>
 </bar>
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-back text-gray' /> 返回
+    <text class='icon-back text-gray'></text> 返回
   </view>
   <view class='content'>
     操作条
@@ -42,20 +42,20 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-homefill text-gray' /> 首页
+    <text class='icon-homefill text-gray'></text> 首页
   </view>
   <view class='content'>
     鲜亮的高饱和色彩，专注视觉的小程序组件库
   </view>
   <view class='action'>
-    <icon class='icon-cardboardfill text-grey' />
-    <icon class='icon-recordfill text-red' />
+    <text class='icon-cardboardfill text-grey'></text>
+    <text class='icon-recordfill text-red'></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-blue">
   <view class='action'>
-    <icon class='icon-close' /> 关闭
+    <text class='icon-close'></text> 关闭
   </view>
   <view class='content'>
     海蓝
@@ -63,7 +63,7 @@
 </bar>
 <bar class="margin-top bg-orange">
   <view class='action'>
-    <icon class='icon-back' /> 返回
+    <text class='icon-back'></text> 返回
   </view>
   <view class='content'>
     操作条
@@ -76,49 +76,49 @@
     ColorUI
   </view>
   <view class='action'>
-    <icon class="icon-more" />
+    <text class="icon-more"></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-red search">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
-  <view class='serach-form radius'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form radius'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <text>广州</text>
-    <icon class="icon-triangledownfill" />
+    <text class="icon-triangledownfill"></text>
   </view>
 </bar>
 
 <bar class="margin-top search">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <text>广州</text>
-    <icon class="icon-triangledownfill" />
+    <text class="icon-triangledownfill"></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-cyan search">
-  <view class='serach-form radius'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form radius'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
-    <icon class='icon-close' />
+    <text class='icon-close'></text>
     <text>取消</text>
   </view>
 </bar>
 
 <bar class="margin-top search">
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <button class='bg-green shadow-blur round'>搜索</button>
@@ -144,35 +144,35 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action text-orange">
-    <icon class='icon-favorfill' /> 已收藏
+    <text class='icon-favorfill'></text> 已收藏
   </view>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='bg-red submit'>立即订购</view>
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='bg-orange submit'>加入购物车</view>
@@ -180,19 +180,19 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action">
-    <icon class=' icon-shop' /> 店铺
+    <text class=' icon-shop'></text> 店铺
   </view>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='submit'>
@@ -201,16 +201,16 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='submit'>
@@ -223,11 +223,11 @@
 
 <bar class="margin-top input">
   <view class='action'>
-    <icon class='icon-sound text-grey' />
+    <text class='icon-sound text-grey'></text>
   </view>
   <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey' />
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>
@@ -235,11 +235,11 @@
 <bar class="margin-top input">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
   <view class='action'>
-    <icon class='icon-roundaddfill text-grey' />
+    <text class='icon-roundaddfill text-grey'></text>
   </view>
   <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey' />
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>

demo/pages/component/card/card.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 卡片
+      <text class='icon-back'></text> 卡片
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 案例类卡片
+    <text class='icon-titles text-orange '></text> 案例类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -28,9 +28,9 @@
           <view class='text-gray text-sm flex justify-between'>
             十天前
             <view class="text-gray text-sm">
-              <icon class="icon-attentionfill" /> 10
-              <icon class="icon-appreciatefill" /> 20
-              <icon class="icon-messagefill" /> 30
+              <text class="icon-attentionfill"></text> 10
+              <text class="icon-appreciatefill"></text> 20
+              <text class="icon-messagefill"></text> 30
             </view>
           </view>
         </view>
@@ -40,7 +40,7 @@
 </card>
 <bar class="solid-bottom {{isCard?'margin-top':''}}">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 动态类卡片
+    <text class='icon-titles text-orange '></text> 动态类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -67,9 +67,9 @@
       </view>
     </view>
     <view class='text-gray text-sm text-right padding'>
-      <icon class="icon-attentionfill" /> 10
-      <icon class="icon-appreciatefill" /> 20
-      <icon class="icon-messagefill" /> 30
+      <text class="icon-attentionfill"></text> 10
+      <text class="icon-appreciatefill"></text> 20
+      <text class="icon-messagefill"></text> 30
     </view>
     <list class="menu menu-avatar comment solids-top">
       <item wx:for="{{2}}" wx:key>
@@ -88,8 +88,8 @@
           <view class='margin-top-sm flex justify-between'>
             <view class='text-gray text-df'>2018年12月4日</view>
             <view>
-              <icon class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}" />
-              <icon class="icon-messagefill text-gray margin-left-sm" />
+              <text class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}"></text>
+              <text class="icon-messagefill text-gray margin-left-sm"></text>
             </view>
           </view>
         </view>
@@ -100,7 +100,7 @@
 
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 文章类卡片
+    <text class='icon-titles text-orange '></text> 文章类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>

demo/pages/component/chat/chat.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       聊天
     </navigator>
   </bar>
@@ -28,7 +28,7 @@
     <view class='date '> 13:23</view>
   </item>
   <info>
-    <icon class='icon-roundclosefill text-red '/> 对方拒绝了你的消息
+    <text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
   </info>
   <info>
     对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
@@ -47,7 +47,7 @@
         3"
       </view>
       <view class='content shadow'>
-        <icon class='icon-sound text-xxl padding-right-xl'> </icon>
+        <text class='icon-sound text-xxl padding-right-xl'> </text>
       </view>
     </view>
     <avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
@@ -56,7 +56,7 @@
   <item class="self">
     <view class="main">
       <view class='action'>
-        <icon class='icon-locationfill text-orange text-xxl'/>
+        <text class='icon-locationfill text-orange text-xxl'></text>
       </view>
       <view class='content shadow'>
         喵星球，喵喵市
@@ -72,7 +72,7 @@
        @#$^&**
       </view>      
       <view class='action text-grey'>
-        <icon class='icon-warnfill text-red text-xxl'/> <text class='text-sm margin-left-sm'>翻译错误</text> 
+        <text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text> 
       </view>
     </view>
     <view class='date'>13:23</view>
@@ -81,11 +81,11 @@
 
 <bar class="foot input">
   <view class='action'>
-    <icon class='icon-sound text-grey'/>
+    <text class='icon-sound text-grey'></text>
   </view>
   <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey'/>
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>

demo/pages/component/form/form.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 表单
+      <text class='icon-back'></text> 表单
     </navigator>
   </bar>
 </custom>
@@ -22,7 +22,7 @@
   <form-group>
     <view class='title'>收货地址</view>
     <input placeholder="输入框带个图标" class='radius' name='input'></input>
-    <icon class='icon-locationfill text-orange' />
+    <text class='icon-locationfill text-orange'></text>
   </form-group>
   <form-group>
     <view class='title'>验证码</view>
@@ -94,34 +94,34 @@
   </form-group>
   <form-group>
     <view class='title'>定义颜色</view>
-    <switch class='red sm' checked/>
+    <switch class='red sm' checked></switch>
   </form-group>
   <form-group>
-    <switch class='switch-sex' checked/>
+    <switch class='switch-sex' checked></switch>
     <view class='title'>定义图标</view>
   </form-group>
   <form-group>
     <view class='title'>方形开关</view>
-    <switch class='orange radius sm' checked/>
+    <switch class='orange radius sm' checked></switch>
   </form-group>
   <radio-group class="block">
     <form-group class="margin-top">
       <view class='title'>单选操作(radio)</view>
-      <radio checked />
+      <radio checked></radio>
     </form-group>
     <form-group>
       <view class='title'>定义尺寸</view>
-      <radio class='sm' />
+      <radio class='sm'></radio>
     </form-group>
     <form-group>
       <view class='title'>定义样式</view>
-      <radio class='radio' />
+      <radio class='radio'></radio>
     </form-group>
     <form-group>
       <view class='title'>定义颜色</view>
       <view>
-        <radio class='blue radio' />
-        <radio class='red margin-left-sm' />
+        <radio class='blue radio'></radio>
+        <radio class='red margin-left-sm'></radio>
       </view>
     </form-group>
   </radio-group>
@@ -148,11 +148,11 @@
       </view>
       <view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
         <tag class="bg-red">
-          <icon class='icon-close'></icon>
+          <text class='icon-close'></text>
         </tag>
       </view>
       <view class="padding-xs solids">
-        <icon class='icon-cameraadd'></icon>
+        <text class='icon-cameraadd'></text>
       </view>
     </view>
   </form-group>

demo/pages/component/home/home.wxml

@@ -3,6 +3,6 @@
   <navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
     <view class="nav-title">{{item.title}}</view>
     <view class="nav-name">{{item.name}}</view>
-    <icon class='icon-{{item.icon}}'/>
+    <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>

demo/pages/component/list/list.wxml

@@ -1,173 +1,173 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 列表
+      <text class='icon-back'></text> 列表
     </navigator>
   </bar>
 </custom>
 <view class="page {{skin?' invert ':' '}}">
   <list class="grid col-3">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
     <item>
-      <icon class='icon-servicefill text-pink'/>
+      <text class='icon-servicefill text-pink'></text>
       <text>反馈</text>
     </item>
   </list>
   <list class="grid col-4">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
   </list>
   <list class="grid no-border col-4">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
   </list>
   <list class="grid col-5 no-border">
     <item>
-      <icon class='icon-cardboardfill text-red'>
+      <text class='icon-cardboardfill text-red'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
-      </icon>
+      <text class='icon-noticefill text-olive'>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
     <item>
-      <icon class='icon-commandfill text-purple'/>
+      <text class='icon-commandfill text-purple'></text>
       <text>问答</text>
     </item>
     <item>
-      <icon class='icon-brandfill text-mauve'/>
+      <text class='icon-brandfill text-mauve'></text>
       <text>版权</text>
     </item>
   </list>
@@ -175,23 +175,23 @@
     <item>
       <view class='content'>
         <view>
-          <icon class='icon-clothesfill text-blue'/> 皮肤设置</view>
+          <text class='icon-clothesfill text-blue'></text> 皮肤设置</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill'/> 皮肤需要付费购买</view>
+          <text class='icon-infofill'></text> 皮肤需要付费购买</view>
       </view>
       <view class='action'>
-        <switch class='switch-sex sm' bindchange="switchSex" />
+        <switch class='switch-sex sm' bindchange="switchSex"></switch>
       </view>
     </item>
     <item>
       <view class='content'>
         <view>
-          <icon class='icon-musicfill text-red'/> 声音控制</view>
+          <text class='icon-musicfill text-red'></text> 声音控制</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill'/> 需要获得系统权限</view>
+          <text class='icon-infofill'></text> 需要获得系统权限</view>
       </view>
       <view class='action'>
-        <switch class='switch-music' />
+        <switch class='switch-music'></switch>
       </view>
     </item>
   </list>
@@ -201,7 +201,7 @@
       <view class='content'>
         <view class='text-grey'>文晓港</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill text-red'/> 消息未送达</view>
+          <text class='icon-infofill text-red'></text> 消息未送达</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
@@ -217,11 +217,11 @@
           <tag class="round bg-orange sm">SVIP</tag>
         </view>
         <view class='text-gray text-sm'>
-          <icon class='icon-redpacket_fill text-red'/> 收到红包</view>
+          <text class='icon-redpacket_fill text-red'></text> 收到红包</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
-        <icon class='icon-notice_forbid_fill text-gray'/>
+        <text class='icon-notice_forbid_fill text-gray'></text>
       </view>
     </item>
   </list>
@@ -260,35 +260,53 @@
         </view>
         <view class='text-gray text-sm'>
           喵星酱：
-          <icon class='icon-picfill text-orange'/> 图片传输中...</view>
+          <text class='icon-picfill text-orange'></text> 图片传输中...</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
-        <icon class='icon-notice_forbid_fill text-gray'/>
+        <text class='icon-notice_forbid_fill text-gray'></text>
       </view>
     </item>
   </list>
   <list class="menu">
     <item>
       <view class='content'>
-        <icon class='icon-circlefill text-grey'/>
-        <text class='text-grey'>默认</text>
+        <text class='icon-circlefill text-grey'></text>
+        <text class='text-grey'>图标 + 标题</text>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-emojifill text-red'/>
+        <image src='/images/logo.png' class='png' mode='aspectFit'></image>
+        <text class='text-grey'>图片 + 标题</text>
+      </view>
+    </item>
+    <item>
+      <button class='content' open-type='contact'>
+        <text class='icon-btn text-olive'></text>
+        <text class='text-grey'>Open-type 按钮</text>
+      </button>
+    </item>
+    <item>
+      <navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
+        <text class='icon-discoverfill text-orange'></text>
+        <text class='text-grey'>Navigator 跳转</text>
+      </navigator>
+    </item>
+    <item>
+      <view class='content'>
+        <text class='icon-emojifill text-red'></text>
         <text class='text-grey'>头像</text>
       </view>
       <view class='action'>
         <avatar class="sm round">
-          <icon class='icon-people'/>
+          <text class='icon-people'></text>
         </avatar>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-emojiflashfill text-pink'/>
+        <text class='icon-emojiflashfill text-pink'></text>
         <text class='text-grey'>头像组</text>
       </view>
       <view class='action'>
@@ -303,35 +321,35 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-crown text-green'/>
+        <text class='icon-crown text-green'></text>
         <text class='text-grey'>按钮</text>
       </view>
       <view class='action'>
         <button class='round bg-green sm'>
-          <icon class='icon-upload'/> 上传</button>
+          <text class='icon-upload'></text> 上传</button>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-crownfill text-green'/>
+        <text class='icon-crownfill text-green'></text>
         <text class='text-grey'>按钮</text>
       </view>
       <view class='action'>
         <button class='round bg-blue'>
-          <icon class='icon-down'/> 下载</button>
+          <text class='icon-down'></text> 下载</button>
       </view>
     </item>
   </list>
   <list class="menu">
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-roundrightfill text-grey'/>
+        <text class='icon-roundrightfill text-grey'></text>
         <text class='text-grey'>箭头</text>
       </view>
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-tagfill text-red'/>
+        <text class='icon-tagfill text-red'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -342,7 +360,7 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-warn text-green'/>
+        <text class='icon-warn text-green'></text>
         <text class='text-grey'>文本</text>
       </view>
       <view class='action'>
@@ -351,7 +369,7 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-warnfill text-green'/>
+        <text class='icon-warnfill text-green'></text>
         <text class='text-grey'>文本</text>
         <text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
       </view>
@@ -360,7 +378,7 @@
   <list class="menu no-padding">
     <item>
       <view class='content'>
-        <icon class='icon-radiobox text-orange'/>
+        <text class='icon-radiobox text-orange'></text>
         <text class='text-grey'>徽章</text>
       </view>
       <view class='action'>
@@ -369,7 +387,7 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-tagfill text-olive'/>
+        <text class='icon-tagfill text-olive'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -378,13 +396,13 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-radioboxfill text-blue'/>
+        <text class='icon-radioboxfill text-blue'></text>
         <text class='text-grey'>胶囊</text>
       </view>
       <view class='action'>
         <capsule class="round">
           <tag class='bg-blue'>
-            <icon class='icon-locationfill'/>
+            <text class='icon-locationfill'></text>
           </tag>
           <tag class="line-blue">
             广州
@@ -396,7 +414,7 @@
   <list class="menu no-padding card-menu margin-bottom-xl">
     <item>
       <view class='content'>
-        <icon class='icon-radiobox text-orange'/>
+        <text class='icon-radiobox text-orange'></text>
         <text class='text-grey'>徽章</text>
       </view>
       <view class='action'>
@@ -405,7 +423,7 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-tagfill text-olive'/>
+        <text class='icon-tagfill text-olive'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -414,13 +432,13 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-radioboxfill text-blue'/>
+        <text class='icon-radioboxfill text-blue'></text>
         <text class='text-grey'>胶囊</text>
       </view>
       <view class='action'>
         <capsule class="round">
           <tag class='bg-blue'>
-            <icon class='icon-locationfill'/>
+            <text class='icon-locationfill'></text>
           </tag>
           <tag class="line-blue">
             广州

demo/pages/component/modal/modal.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 模态窗口
+      <text class='icon-back'></text> 模态窗口
     </navigator>
   </bar>
 </custom>
 
 <bar class="">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 模态窗口
+    <text class='icon-titles text-orange '></text> 模态窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
@@ -19,7 +19,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -30,7 +30,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 底部窗口
+    <text class='icon-titles text-orange '></text> 底部窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -50,7 +50,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 对话窗口
+    <text class='icon-titles text-orange '></text> 对话窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -62,7 +62,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -83,7 +83,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -91,7 +91,7 @@
     </view>
     <bar>
       <view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
-        <icon class='icon-moneybag'></icon>微信支付</view>
+        <text class='icon-moneybag'></text>微信支付</view>
       <view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
       <view class='action margin-0 flex-sub  solid-left' bindtap='hideModal'>确定</view>
     </bar>
@@ -100,7 +100,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 图片窗口
+    <text class='icon-titles text-orange '></text> 图片窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
@@ -112,7 +112,7 @@
     <view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
       <bar class="justify-end none-bg text-white">
         <view class='action' bindtap='hideModal'>
-          <icon class='icon-close '></icon>
+          <text class='icon-close '></text>
         </view>
       </bar>
     </view>

demo/pages/component/nav/nav.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 导航栏
+      <text class='icon-back'></text> 导航栏
     </navigator>
   </bar>
 </custom>
@@ -10,7 +10,7 @@
 </view>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 默认
+    <text class='icon-titles text-orange '></text> 默认
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
@@ -21,7 +21,7 @@
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 居中
+    <text class='icon-title text-orange'></text> 居中
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav text-center">
@@ -32,7 +32,7 @@
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 平分
+    <text class='icon-title text-orange'></text> 平分
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav">
@@ -44,7 +44,7 @@
 </scroll-view>
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 背景
+    <text class='icon-title text-orange'></text> 背景
   </view>
 </bar>
 <scroll-view scroll-x class="bg-red nav text-center">
@@ -54,34 +54,34 @@
 </scroll-view>
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 图标
+    <text class='icon-title text-orange'></text> 图标
   </view>
 </bar>
 <scroll-view scroll-x class="bg-green nav text-center">
   <item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
-    <icon class='icon-camerafill'></icon> 数码
+    <text class='icon-camerafill'></text> 数码
   </item>
   <item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
-    <icon class='icon-upstagefill'></icon> 排行榜
+    <text class='icon-upstagefill'></text> 排行榜
   </item>
   <item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
-    <icon class='icon-clothesfill'></icon> 皮肤
+    <text class='icon-clothesfill'></text> 皮肤
   </item>
 </scroll-view>
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 定位
+    <text class='icon-title text-orange'></text> 定位
   </view>
 </bar>
 <scroll-view scroll-x class="bg-green nav text-center">
   <item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
-    <icon class='icon-camerafill'></icon> 数码
+    <text class='icon-camerafill'></text> 数码
   </item>
   <item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
-    <icon class='icon-upstagefill'></icon> 排行榜
+    <text class='icon-upstagefill'></text> 排行榜
   </item>
   <item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
-    <icon class='icon-clothesfill'></icon> 皮肤
+    <text class='icon-clothesfill'></text> 皮肤
   </item>
 </scroll-view>

demo/pages/component/swiper/swiper.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 轮播图
+      <text class='icon-back'></text> 轮播图
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-pink' /> 全屏限高轮播
+    <text class='icon-title text-pink'></text> 全屏限高轮播
   </view>
   <view class='action'>
     <switch class='sm' bindchange='DotStyle'></switch>
@@ -15,12 +15,12 @@
 </bar>
 <swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
   <swiper-item wx:for="{{4}}" wx:key>
-    <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
+    <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
   </swiper-item>
 </swiper>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-pink' /> 卡片式轮播
+    <text class='icon-title text-pink'></text> 卡片式轮播
   </view>
 </bar>
 <swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
@@ -31,7 +31,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-pink' /> 堆叠式轮播
+    <text class='icon-title text-pink'></text> 堆叠式轮播
   </view>
 </bar>
 <view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">

demo/pages/component/timeline/timeline.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       时间轴
     </navigator>
   </bar>
@@ -61,7 +61,7 @@
           <view class='content'>
             <view class='text-grey'>文晓港</view>
             <view class='text-gray text-sm'>
-              <icon class='icon-infofill text-red'/> 消息未送达</view>
+              <text class='icon-infofill text-red'></text> 消息未送达</view>
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
@@ -77,11 +77,11 @@
               <tag class="round orange sm">SVIP</tag>
             </view>
             <view class='text-gray text-sm'>
-              <icon class='icon-redpacket_fill text-red'/> 收到红包</view>
+              <text class='icon-redpacket_fill text-red'></text> 收到红包</view>
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
-            <icon class='icon-notice_forbid_fill text-gray'/>
+            <text class='icon-notice_forbid_fill text-gray'></text>
           </view>
         </item>
       </list>

demo/pages/plugin/animation/animation.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 微动画
+      <text class='icon-back'></text> 微动画
     </navigator>
   </bar>
 </custom>

demo/pages/plugin/gradual/gradual.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 渐变
+      <text class='icon-back'></text> 渐变
     </navigator>
   </bar>
 </custom>

demo/pages/plugin/indexes/indexes.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 索引
+      <text class='icon-back'></text> 索引
     </navigator>
   </bar>
 </custom>
 <bar class="search fixed" style="top:{{CustomBar}}px;">
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="输入搜索的关键词" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
   </view>
   <view class='action'>
     <button class='gradual-green shadow-blur round'>搜索</button>

template/app.wxss

@@ -1,2 +1,2 @@
 @import "icon.wxss";
-@import "colorui-rpx.wxss";
+@import "colorui.wxss";

template/colorui-px.wxss

@@ -1,2955 +0,0 @@
-/*
-  Color UI v2.0.2 | by 文晓港 
-  单位为多种混合(px,rpx,vw,vh,em)
-  仅供学习交流，如作它用所承受的法律责任一概与作者无关   
-  （QQ交流群：240787041）
-  文档：http://www.color-ui.com/
-*/
-
-/* ==================
-        初始化
- ==================== */
-
-page {
-  background: #f1f1f1;
-  font-size: 14px;
-  color: #333;
-  line-height: 1;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form,
-form-group, info, bar, progress-bar, input, textarea, label, navigator, list,
-item, chat, image {
-  box-sizing: border-box;
-}
-
-/* ==================
-          布局
- ==================== */
-
-/*  -- flex弹性布局 -- */
-
-.flex {
-  display: flex;
-}
-
-.basis-xs {
-  flex-basis: 20%;
-}
-
-.basis-sm {
-  flex-basis: 40%;
-}
-
-.basis-df {
-  flex-basis: 50%;
-}
-
-.basis-lg {
-  flex-basis: 60%;
-}
-
-.basis-xl {
-  flex-basis: 80%;
-}
-
-.flex-sub {
-  flex: 1;
-}
-
-.flex-twice {
-  flex: 2;
-}
-
-.flex-treble {
-  flex: 3;
-}
-
-.flex-direction {
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.align-start {
-  align-items: flex-start;
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-center {
-  align-self: flex-center;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-/* grid布局 */
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid.grid-square {
-  margin-bottom: -10px;
-  overflow: hidden;
-}
-
-.grid.grid-square tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-bottom-left-radius: 3px;
-}
-
-.grid.grid-square view> icon, .grid.grid-square item> icon {
-  font-size: 26px;
-  position: absolute;
-  color: #aaa;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.grid.grid-square view, .grid.grid-square item {
-  margin-right: 10px;
-  margin-bottom: 10px;
-  border-radius: 3px;
-  position: relative;
-  overflow: hidden;
-}
-
-.grid.col-1.grid-square view, .grid.col-1.grid-square item {
-  padding-bottom: 100%;
-  height: 0;
-  margin-right: 0;
-}
-
-.grid.col-2.grid-square view, .grid.col-2.grid-square item {
-  padding-bottom: calc((100% - 10px)/2);
-  height: 0;
-  width: calc((100% - 10px)/2);
-}
-
-.grid.col-2.grid-square view:nth-child(2n),
-.grid.col-2.grid-square item:nth-child(2n) {
-  margin-right: 0;
-}
-
-.grid.col-3.grid-square view, .grid.col-3.grid-square item {
-  padding-bottom: calc((100% - 20px)/3);
-  height: 0;
-  width: calc((100% - 20px)/3);
-}
-
-.grid.col-3.grid-square view:nth-child(3n),
-.grid.col-3.grid-square item:nth-child(3n) {
-  margin-right: 0;
-}
-
-.grid.col-4.grid-square view, .grid.col-4.grid-square item {
-  padding-bottom: calc((100% - 30px)/4);
-  height: 0;
-  width: calc((100% - 30px)/4);
-}
-
-.grid.col-4.grid-square view:nth-child(4n),
-.grid.col-4.grid-square item:nth-child(4n) {
-  margin-right: 0;
-}
-
-.grid.col-5.grid-square view, .grid.col-5.grid-square item {
-  padding-bottom: calc((100% - 40px)/5);
-  height: 0;
-  width: calc((100% - 40px)/5);
-}
-
-.grid.col-1>item, .grid.col-1>view {
-  width: 100%;
-}
-
-.grid.col-2>item, .grid.col-2>view {
-  width: 50%;
-}
-
-.grid.col-3>item, .grid.col-3>view {
-  width: 33.33%;
-}
-
-.grid.col-4>item, .grid.col-4>view {
-  width: 25%;
-}
-
-.grid.col-5>item, .grid.col-5>view {
-  width: 20%;
-}
-
-/*  -- 内外边距 -- */
-
-.margin-0 {
-  margin: 0 !important;
-}
-
-.margin-xs {
-  margin: 5px;
-}
-
-.margin-sm {
-  margin: 10px;
-}
-
-.margin {
-  margin: 15px;
-}
-
-.margin-lg {
-  margin: 20px;
-}
-
-.margin-xl {
-  margin: 25px;
-}
-
-.margin-top-xs {
-  margin-top: 5px;
-}
-
-.margin-top-sm {
-  margin-top: 10px;
-}
-
-.margin-top {
-  margin-top: 15px;
-}
-
-.margin-top-lg {
-  margin-top: 20px;
-}
-
-.margin-top-xl {
-  margin-top: 25px;
-}
-
-.margin-right-xs {
-  margin-right: 5px;
-}
-
-.margin-right-sm {
-  margin-right: 10px;
-}
-
-.margin-right {
-  margin-right: 15px;
-}
-
-.margin-right-lg {
-  margin-right: 20px;
-}
-
-.margin-right-xl {
-  margin-right: 25px;
-}
-
-.margin-bottom-xs {
-  margin-bottom: 5px;
-}
-
-.margin-bottom-sm {
-  margin-bottom: 10px;
-}
-
-.margin-bottom {
-  margin-bottom: 15px;
-}
-
-.margin-bottom-lg {
-  margin-bottom: 20px;
-}
-
-.margin-bottom-xl {
-  margin-bottom: 25px;
-}
-
-.margin-left-xs {
-  margin-left: 5px;
-}
-
-.margin-left-sm {
-  margin-left: 10px;
-}
-
-.margin-left {
-  margin-left: 15px;
-}
-
-.margin-left-lg {
-  margin-left: 20px;
-}
-
-.margin-left-xl {
-  margin-left: 25px;
-}
-
-.margin-lr-xs {
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-.margin-lr-sm {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.margin-lr {
-  margin-left: 15px;
-  margin-right: 15px;
-}
-
-.margin-lr-lg {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.margin-lr-xl {
-  margin-left: 25px;
-  margin-right: 25px;
-}
-
-.margin-tb-xs {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.margin-tb-sm {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.margin-tb {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
-.margin-tb-lg {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.margin-tb-xl {
-  margin-top: 25px;
-  margin-bottom: 25px;
-}
-
-.padding-0 {
-  padding: 0 !important;
-}
-
-.padding-xs {
-  padding: 5px;
-}
-
-.padding-sm {
-  padding: 10px;
-}
-
-.padding {
-  padding: 15px;
-}
-
-.padding-lg {
-  padding: 20px;
-}
-
-.padding-xl {
-  padding: 25px;
-}
-
-.padding-top-xs {
-  padding-top: 5px;
-}
-
-.padding-top-sm {
-  padding-top: 10px;
-}
-
-.padding-top {
-  padding-top: 15px;
-}
-
-.padding-top-lg {
-  padding-top: 20px;
-}
-
-.padding-top-xl {
-  padding-top: 25px;
-}
-
-.padding-right-xs {
-  padding-right: 5px;
-}
-
-.padding-right-sm {
-  padding-right: 10px;
-}
-
-.padding-right {
-  padding-right: 15px;
-}
-
-.padding-right-lg {
-  padding-right: 20px;
-}
-
-.padding-right-xl {
-  padding-right: 25px;
-}
-
-.padding-bottom-xs {
-  padding-bottom: 5px;
-}
-
-.padding-bottom-sm {
-  padding-bottom: 10px;
-}
-
-.padding-bottom {
-  padding-bottom: 15px;
-}
-
-.padding-bottom-lg {
-  padding-bottom: 20px;
-}
-
-.padding-bottom-xl {
-  padding-bottom: 25px;
-}
-
-.padding-left-xs {
-  padding-left: 5px;
-}
-
-.padding-left-sm {
-  padding-left: 10px;
-}
-
-.padding-left {
-  padding-left: 15px;
-}
-
-.padding-left-lg {
-  padding-left: 20px;
-}
-
-.padding-left-xl {
-  padding-left: 25px;
-}
-
-.padding-lr-xs {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.padding-lr-sm {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.padding-lr {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.padding-lr-lg {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.padding-lr-xl {
-  padding-left: 25px;
-  padding-right: 25px;
-}
-
-.padding-tb-xs {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.padding-tb-sm {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.padding-tb {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.padding-tb-lg {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.padding-tb-xl {
-  padding-top: 25px;
-  padding-bottom: 25px;
-}
-
-/* -- 浮动 --  */
-
-.cf::after, .cf::before {
-  content: " ";
-  display: table;
-}
-
-.cf::after {
-  clear: both;
-}
-
-.fl {
-  float: left;
-}
-
-.fr {
-  float: right;
-}
-
-/* ==================
-          图片
- ==================== */
-
-image {
-  max-width: 100%;
-  display: inline-block;
-  position: relative;
-  z-index: 0;
-}
-
-image.loading::before {
-  content: "";
-  background: #f5f5f5;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: -2;
-}
-
-image.loading::after {
-  content: "\e7f1";
-  font-family: "iconfont";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  font-size: 16px;
-  margin: auto;
-  color: #ccc;
-  -webkit-animation: icon-spin 2s infinite linear;
-  animation: icon-spin 2s infinite linear;
-  display: block;
-}
-
-image.response {
-  width: 100%;
-}
-
-/* ==================
-         开关
- ==================== */
-
-switch, checkbox, radio {
-  position: relative;
-}
-
-switch::after {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  left: 10px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(0, 0);
-  transition: all 0.3s ease-in-out 0s;
-}
-
-switch[checked]::after {
-  transform: scale(1, 1);
-}
-
-switch::before {
-  font-family: "iconfont" !important;
-  content: "\e646";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  right: 10px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(1, 1);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-radio::before, checkbox::before {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -8px;
-  right: 5px;
-  font-size: 16px;
-  line-height: 16px;
-  pointer-events: none;
-  transform: scale(1, 1);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-switch[checked]::before {
-  transform: scale(0, 0);
-}
-
-switch .wx-switch-input {
-  background: #aaa !important;
-  border-color: #aaa;
-  padding: 0 30px;
-  margin: 0;
-}
-
-radio-group {
-  display: inline-block;
-}
-
-radio .wx-radio-input, checkbox .wx-checkbox-input {
-  margin: 0;
-  width: 24px;
-  height: 24px;
-}
-
-checkbox.round .wx-checkbox-input {
-  border-radius: 50px;
-}
-
-switch .wx-switch-input-checked::after {
-  margin-left: 10px;
-  box-shadow: none;
-}
-
-switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
-switch.radius .wx-switch-input::before {
-  border-radius: 5px;
-}
-
-switch .wx-switch-input::before, radio.radio::before,
-checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
-  display: none;
-}
-
-radio.radio[checked]::after {
-  content: "";
-  background: transparent;
-  display: block;
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  z-index: 999;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  border-radius: 100px;
-  border: 8px solid #fff;
-}
-
-switch.sm, checkbox.sm, radio.sm {
-  transform: scale(0.8);
-}
-
-.switch-sex::after {
-  content: "\e71c";
-}
-
-.switch-sex::before {
-  content: "\e71a";
-}
-
-.switch-sex .wx-switch-input {
-  background: #e54d42 !important;
-  border-color: #e54d42;
-}
-
-.switch-sex[checked] .wx-switch-input {
-  background: #0081ff !important;
-  border-color: #0081ff !important;
-}
-
-/* ==================
-          背景
- ==================== */
-
-.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  border-color: #e54d42 !important;
-}
-
-.line-orange::after, .lines-orange::after,
-switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  border-color: #f37b1d !important;
-}
-
-.line-yellow::after, .lines-yellow::after,
-switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  border-color: #fbbd08 !important;
-}
-
-.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  border-color: #8dc63f !important;
-}
-
-.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
-checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
-radio.green[checked] .wx-radio-input {
-  border-color: #39b54a !important;
-}
-
-.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  border-color: #1cbbb4 !important;
-}
-
-.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  border-color: #0081ff !important;
-}
-
-.line-purple::after, .lines-purple::after,
-switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  border-color: #6739b6 !important;
-}
-
-.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  border-color: #9c26b0 !important;
-}
-
-.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  border-color: #e03997 !important;
-}
-
-.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  border-color: #a5673f !important;
-}
-
-.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  border-color: #8799a3 !important;
-}
-
-.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  border-color: #aaa !important;
-}
-
-.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  border-color: #333 !important;
-}
-
-.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  border-color: #fff !important;
-}
-
-.bg-red, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  background-color: #e54d42 !important;
-  color: #fff !important;
-}
-
-.bg-orange, switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  background-color: #f37b1d !important;
-  color: #fff !important;
-}
-
-.bg-yellow, switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  background-color: #fbbd08 !important;
-  color: #333 !important;
-}
-
-.bg-olive, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  background-color: #8dc63f !important;
-  color: #fff !important;
-}
-
-.bg-green, switch.green[checked] .wx-switch-input,
-switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
-checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
-radio[checked] .wx-radio-input {
-  background-color: #39b54a !important;
-  color: #fff !important;
-}
-
-.bg-cyan, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  background-color: #1cbbb4 !important;
-  color: #fff !important;
-}
-
-.bg-blue, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  background-color: #0081ff !important;
-  color: #fff !important;
-}
-
-.bg-purple, switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  background-color: #6739b6 !important;
-  color: #fff !important;
-}
-
-.bg-mauve, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  background-color: #9c26b0 !important;
-  color: #fff !important;
-}
-
-.bg-pink, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  background-color: #e03997 !important;
-  color: #fff !important;
-}
-
-.bg-brown, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  background-color: #a5673f !important;
-  color: #fff !important;
-}
-
-.bg-grey, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  background-color: #8799a3 !important;
-  color: #fff !important;
-}
-
-.bg-gray, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  background-color: #f0f0f0 !important;
-  color: #666 !important;
-}
-
-.bg-black, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  background-color: #333 !important;
-  color: #fff !important;
-}
-
-.bg-white, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  background-color: #fff !important;
-  color: #666;
-}
-
-.bg-shadeTop {
-  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
-  color: #fff;
-}
-
-.bg-shadeBottom {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
-  color: #fff;
-}
-
-.none-bg, .line-white, .lines-white {
-  background-color: transparent !important;
-}
-
-.bg-red.light {
-  color: #e54d42 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-orange.light {
-  color: #f37b1d !important;
-  background: #fde6d2 !important;
-}
-
-.bg-yellow.light {
-  color: #fbbd08 !important;
-  background: #fef2ce !important;
-}
-
-.bg-olive.light {
-  color: #8dc63f !important;
-  background: #e8f4d9 !important;
-}
-
-.bg-green.light {
-  color: #39b54a !important;
-  background: #d7f0db !important;
-}
-
-.bg-cyan.light {
-  color: #1cbbb4 !important;
-  background: #d2f1f0 !important;
-}
-
-.bg-blue.light {
-  color: #0081ff !important;
-  background: #cce6ff !important;
-}
-
-.bg-purple.light {
-  color: #6739b6 !important;
-  background: #e1d7f0 !important;
-}
-
-.bg-mauve.light {
-  color: #9c26b0 !important;
-  background: #ebd4ef !important;
-}
-
-.bg-pink.light {
-  color: #e03997 !important;
-  background: #f9d7ea !important;
-}
-
-.bg-brown.light {
-  color: #a5673f !important;
-  background: #ede1d9 !important;
-}
-
-.bg-grey.light {
-  color: #8799a3 !important;
-  background: #e7ebed !important;
-}
-
-.bg-gray.light {
-  color: #666 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-gray.light {
-  color: #888 !important;
-  background: #f1f1f1 !important;
-}
-
-.gradual-red {
-  background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;
-  color: #fff !important;
-}
-
-.gradual-orange {
-  background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
-  color: #fff !important;
-}
-
-.gradual-green {
-  background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;
-  color: #fff !important;
-}
-
-.gradual-purple {
-  background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;
-  color: #fff !important;
-}
-
-.gradual-pink {
-  background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;
-  color: #fff !important;
-}
-
-.gradual-blue {
-  background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
-  color: #fff !important;
-}
-
-button.shadow[class*="-red"] {
-  box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important;
-}
-
-button.shadow[class*="-orange"] {
-  box-shadow: 3px 3px 4px rgba(217, 109, 26, 0.2) !important;
-}
-
-button.shadow[class*="-yellow"] {
-  box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important;
-}
-
-button.shadow[class*="-olive"] {
-  box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important;
-}
-
-button.shadow[class*="-green"] {
-  box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important;
-}
-
-button.shadow[class*="-cyan"] {
-  box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important;
-}
-
-button.shadow[class*="-blue"] {
-  box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important;
-}
-
-button.shadow[class*="-purple"] {
-  box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important;
-}
-
-button.shadow[class*="-mauve"] {
-  box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important;
-}
-
-button.shadow[class*="-pink"] {
-  box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important;
-}
-
-button.shadow[class*="-brown"] {
-  box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important;
-}
-
-button.shadow[class*="-grey"] {
-  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-gray"] {
-  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-black"] {
-  box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important;
-}
-
-.bg-img {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.bg-mask {
-  background-color: #333;
-  position: relative;
-}
-
-.bg-mask::after {
-  content: "";
-  border-radius: inherit;
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-color: rgba(0, 0, 0, 0.5);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-
-.bg-mask view, .bg-mask cover-view {
-  z-index: 5;
-  position: relative;
-}
-
-.bg-mask>cover-view {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.bg-video {
-  position: relative;
-}
-
-.bg-video video {
-  display: block;
-  height: 100%;
-  width: 100%;
-  -o-object-fit: cover;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* ==================
-          文本
- ==================== */
-
-.text-xs {
-  font-size: 10px;
-}
-
-.text-sm {
-  font-size: 12px;
-}
-
-.text-df {
-  font-size: 14px;
-}
-
-.text-lg {
-  font-size: 16px;
-}
-
-.text-xl {
-  font-size: 18px;
-}
-
-.text-xxl {
-  font-size: 22px;
-}
-
-.text-sl {
-  font-size: 40px;
-}
-
-.text-xsl {
-  font-size: 60px;
-}
-
-.text-Abc {
-  text-transform: Capitalize;
-}
-
-.text-ABC {
-  text-transform: Uppercase;
-}
-
-.text-abc {
-  text-transform: Lowercase;
-}
-
-.text-price::before {
-  content: "¥";
-  font-size: 80%;
-  margin-right: 2px;
-}
-
-.text-cut {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-content {
-  line-height: 1.6;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-red, .line-red, .lines-red {
-  color: #e54d42 !important;
-}
-
-.text-orange, .line-orange, .lines-orange {
-  color: #f37b1d !important;
-}
-
-.text-yellow, .line-yellow, .lines-yellow {
-  color: #fbbd08 !important;
-}
-
-.text-olive, .line-olive, .lines-olive {
-  color: #8dc63f !important;
-}
-
-.text-green, .line-green, .lines-green {
-  color: #39b54a !important;
-}
-
-.text-cyan, .line-cyan, .lines-cyan {
-  color: #1cbbb4 !important;
-}
-
-.text-blue, .line-blue, .lines-blue {
-  color: #0081ff !important;
-}
-
-.text-purple, .line-purple, .lines-purple {
-  color: #6739b6 !important;
-}
-
-.text-mauve, .line-mauve, .lines-mauve {
-  color: #9c26b0 !important;
-}
-
-.text-pink, .line-pink, .lines-pink {
-  color: #e03997 !important;
-}
-
-.text-brown, .line-brown, .lines-brown {
-  color: #a5673f !important;
-}
-
-.text-grey, .line-grey, .lines-grey {
-  color: #8799a3 !important;
-}
-
-.text-gray, .line-gray, .lines-gray {
-  color: #aaa !important;
-}
-
-.text-black, .line-black, .lines-black {
-  color: #333 !important;
-}
-
-.text-white, .line-white, .lines-white {
-  color: #fff !important;
-}
-
-/* ==================
-          边框
- ==================== */
-
-/* -- 实线 -- */
-
-.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
-.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
-.dashed-right, .dashed-bottom, .dashed-left {
-  position: relative;
-}
-
-.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
-.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
-.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
-.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: inherit;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.solid::after {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-top::after {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-right::after {
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-bottom::after {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-left::after {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.solids::after {
-  border: 4rpx solid #eee;
-}
-
-.solids-top::after {
-  border-top: 4rpx solid #eee;
-}
-
-.solids-right::after {
-  border-right: 4rpx solid #eee;
-}
-
-.solids-bottom::after {
-  border-bottom: 4rpx solid #eee;
-}
-
-.solids-left::after {
-  border-left: 4rpx solid #eee;
-}
-
-/* -- 虚线 -- */
-
-.dashed::after {
-  border: 1px dashed #ddd;
-}
-
-.dashed-top::after {
-  border-top: 1px dashed #ddd;
-}
-
-.dashed-right::after {
-  border-right: 1px dashed #ddd;
-}
-
-.dashed-bottom::after {
-  border-bottom: 1px dashed #ddd;
-}
-
-.dashed-left::after {
-  border-left: 1px dashed #ddd;
-}
-
-/* -- 阴影 -- */
-
-.shadow {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-lg {
-  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);
-}
-
-.shadow-warp {
-  position: relative;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-warp:before, .shadow-warp:after {
-  position: absolute;
-  content: "";
-  top: 10px;
-  bottom: 15px;
-  left: 10px;
-  width: 50%;
-  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
-  transform: rotate(-3deg);
-  z-index: -1;
-}
-
-.shadow-warp:after {
-  right: 10px;
-  left: auto;
-  transform: rotate(3deg);
-}
-
-.shadow-blur {
-  position: relative;
-}
-
-.shadow-blur::before {
-  content: "";
-  display: block;
-  background: inherit;
-  filter: blur(5px);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 5px;
-  left: 5px;
-  z-index: -1;
-  opacity: 0.4;
-  transform-origin: 0 0;
-  border-radius: inherit;
-  transform: scale(1, 1);
-}
-
-/* ==================
-          按钮
- ==================== */
-
-.round, button.icon {
-  border-radius: 5000px !important;
-}
-
-.radius {
-  border-radius: 3px !important;
-}
-
-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 10px 15px 8px;
-  font-size: 14px;
-  line-height: 1;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 3px;
-  overflow: visible;
-  color: #666;
-  background-color: #fff !important;
-  margin-left: initial;
-  transform: translate(0px, 0px);
-  margin-right: initial;
-}
-
-button::after, tag[class*="line-"]::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1rpx solid rgba(0, 0, 0, 0.2);
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: inherit;
-  z-index: 1;
-  pointer-events: none;
-}
-
-button[class*="line"]::after, tag.radius[class*="line"]::after {
-  border-radius: 6px;
-}
-
-button.round[class*="line"]::after, tag.round[class*="line"]::after {
-  border-radius: 500px;
-}
-
-button[class*="lines"]::after {
-  border: 3px solid rgba(0, 0, 0, 0.2);
-}
-
-button[class*="bg-"]::after {
-  display: none;
-}
-
-button.sm {
-  padding: 7px 10px 5px;
-  font-size: 12px;
-}
-
-button.lg {
-  padding: 16px 20px 14px;
-  font-size: 16px;
-}
-
-button.icon.sm {
-  width: 28px;
-  height: 28px;
-}
-
-button.icon {
-  width: 35px;
-  height: 35px;
-  padding: 0;
-}
-
-button.icon.lg {
-  width: 41px;
-  height: 41px;
-}
-
-button.shadow-blur::before {
-  top: 2px;
-  left: 2px;
-  filter: blur(3px);
-  opacity: 0.6;
-}
-
-button.button-hover {
-  transform: translate(1px, 1px);
-}
-
-.block {
-  display: block;
-}
-
-button.block {
-  display: flex;
-}
-
-button[disabled] {
-  opacity: 0.6;
-  color: #fff;
-}
-
-/* ==================
-          徽章
- ==================== */
-
-tag {
-  font-size: 12px;
-  color: #666;
-  vertical-align: middle;
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 6px 7px 5px;
-  line-height: 1;
-  background: #fff;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-tag[class*="line-"]::after {
-  border-radius: 0;
-}
-
-tag+tag {
-  margin-left: 5px;
-}
-
-tag.sm {
-  font-size: 10px;
-  padding: 5px 6px 3px;
-}
-
-capsule {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-capsule + capsule {
-  margin-left: 5px;
-}
-
-capsule tag {
-  margin: 0;
-}
-
-capsule tag[class*="line-"]:last-child::after {
-  border-left: 0px solid transparent !important;
-}
-
-capsule tag[class*="line-"]:first-child::after {
-  border-right: 0px solid transparent !important;
-}
-
-capsule.radius tag:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-capsule.round tag:first-child {
-  border-top-left-radius: 100px;
-  border-bottom-left-radius: 100px;
-  text-indent: 2px;
-}
-
-capsule.round tag:last-child::after, capsule.round tag:last-child {
-  border-top-right-radius: 100px;
-  border-bottom-right-radius: 100px;
-  text-indent: -2px;
-}
-
-tag.badge {
-  background: #dd514c;
-  border-radius: 100px;
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  font-size: 10px;
-  padding: 3px 5px 2px;
-  color: #fff;
-}
-
-tag:empty {
-  padding: 4px;
-  top: -2px;
-  right: -2px;
-}
-
-/* ==================
-          头像
- ==================== */
-
-avatar {
-  font-variant: small-caps;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  text-align: center;
-  background: #ccc;
-  color: #fff;
-  white-space: nowrap;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  background-size: cover;
-  background-position: center;
-  vertical-align: middle;
-}
-
-avatar text {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  transform-origin: 0 center;
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.sm {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-}
-
-avatar > icon {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  transform-origin: 0 center;
-  transform: scale(1.2) translateX(-50%);
-}
-
-avatar.sm > icon {
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.lg > icon {
-  transform: scale(1.75) translateX(-50%);
-}
-
-avatar.xl > icon {
-  transform: scale(2.2) translateX(-50%);
-}
-
-avatar.lg {
-  width: 45px;
-  height: 45px;
-  line-height: 45px;
-}
-
-avatar.xl {
-  width: 64px;
-  height: 64px;
-  line-height: 64px;
-}
-
-avatar-group {
-  direction: rtl;
-  unicode-bidi: bidi-override;
-  padding: 0 5px 0 20px;
-  display: inline-block;
-}
-
-avatar-group avatar {
-  margin-left: -15px;
-  border: 2px solid #f1f1f1;
-  vertical-align: middle;
-}
-
-avatar-group avatar.sm {
-  margin-left: -10px;
-  border: 1px solid #f1f1f1;
-}
-
-/* ==================
-         进度条
- ==================== */
-
-progress-bar {
-  overflow: hidden;
-  height: 14px;
-  background-color: #ebeef5;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-}
-
-progress-bar+view, progress-bar+text {
-  line-height: 1;
-}
-
-progress-bar.xs {
-  height: 5px;
-}
-
-progress-bar.sm {
-  height: 10px;
-}
-
-progress-bar view {
-  width: 0;
-  height: 100%;
-  align-items: center;
-  display: flex;
-  justify-items: flex-end;
-  justify-content: space-around;
-  font-size: 10px;
-  color: #fff;
-  background: #0081ff;
-  transition: width 0.6s ease;
-}
-
-progress-bar text {
-  align-items: center;
-  display: flex;
-  font-size: 10px;
-  color: #666;
-  text-indent: 5px;
-}
-
-progress-bar.text-progress {
-  padding-right: 30px;
-}
-
-progress-bar.striped view {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: 36px 36px;
-}
-
-progress-bar.active view {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 36px 0;
-  }
-
-  to {
-    background-position: 0 0;
-  }
-}
-
-/* ==================
-          加载
- ==================== */
-
-load {
-  display: block;
-  line-height: 3em;
-  text-align: center;
-}
-
-load::before {
-  font-family: "iconfont" !important;
-  display: inline-block;
-  margin-right: 3px;
-}
-
-load.loading::before {
-  content: "\e67a";
-  animation: icon-spin 2s infinite linear;
-}
-
-load.loading::after {
-  content: "加载中...";
-}
-
-load.over::before {
-  content: "\e64a";
-}
-
-load.over::after {
-  content: "没有更多了";
-}
-
-load.erro::before {
-  content: "\e658";
-}
-
-load.erro::after {
-  content: "加载失败";
-}
-
-load.load-icon::before {
-  font-size: 16px;
-}
-
-load.load-icon::after {
-  display: none;
-}
-
-load.load-icon.over {
-  display: none;
-}
-
-/* ==================
-          列表
- ==================== */
-
-.grayscale {
-  filter: grayscale(1);
-}
-
-list.menu {
-  padding: 0 15px;
-  background: #fff;
-  display: block;
-}
-
-list.menu.no-padding {
-  padding: 0;
-}
-
-list.menu+list.menu {
-  margin-top: 15px;
-}
-
-list+list {
-  margin-top: 15px;
-}
-
-list.menu>item {
-  position: relative;
-  line-height: 18px;
-  font-size: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eee;
-  min-height: 50px;
-}
-
-list.menu>item.cur {
-  background-color: #fcf7e9;
-}
-
-list.menu>item:last-child {
-  border: none;
-}
-
-list.menu.no-padding>item {
-  padding: 15px;
-}
-
-list.menu-avatar.no-padding>item {
-  padding-left: 70px;
-}
-
-list.menu-avatar.no-padding>item avatar {
-  left: 15px;
-}
-
-list.menu.no-padding>item.arrow {
-  padding-right: 33px;
-}
-
-list.menu>item .content {
-  line-height: 1.6em;
-  flex: 1;
-}
-
-list.menu>item button.content {
-  padding: 0;
-  justify-content: flex-start;
-  font-size: 16px;
-}
-
-list.menu>item button.content::after {
-  display: none;
-}
-
-list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
-list.menu>item .content>icon {
-  margin-right: 5px;
-  display: inline-block;
-  width: 1.4em;
-  height: 1.6em;
-  vertical-align: middle;
-  text-align: center;
-}
-
-list.menu>item .action {
-  text-align: right;
-}
-
-list>item.grayscale {
-  background-color: #f5f5f5;
-}
-
-list.menu>item .action tag:empty {
-  right: 5px;
-}
-
-list.menu>item.arrow {
-  padding-right: 18px;
-}
-
-list.menu>item.arrow::after {
-  font-family: "iconfont" !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 17px;
-  color: #aaa;
-  line-height: 15px;
-  height: 15px;
-  width: 15px;
-  text-align: center;
-  top: 1px;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-
-list.menu.no-padding>item.arrow::after {
-  right: 15px;
-}
-
-list.menu>item avatar-group avatar {
-  border-color: #fff;
-}
-
-list.card-menu {
-  margin-left: 15px;
-  margin-right: 15px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-list.menu-avatar>item>avatar {
-  position: absolute;
-  left: 0;
-}
-
-list.menu-avatar>item {
-  padding-left: 55px;
-  height: 70px;
-}
-
-list.menu>item .content tag.sm {
-  font-size: 8px;
-  line-height: 80%;
-  padding: 4px 3px 2px;
-  margin-top: -3px;
-}
-
-list.grid {
-  text-align: center;
-  background: #fff;
-}
-
-list.grid>item {
-  display: flex;
-  flex-direction: column;
-  border-right: 1rpx solid #eee;
-  border-bottom: 1rpx solid #eee;
-  padding: 10px;
-}
-
-list.grid>item icon {
-  display: block;
-  width: 100%;
-  position: relative;
-  font-size: 24px;
-  margin-top: 10px;
-}
-
-list.grid>item text {
-  display: block;
-  color: #888;
-  margin-top: 5px;
-  line-height: 20px;
-  font-size: 13px;
-}
-
-list.grid>item tag {
-  left: 50%;
-  right: auto;
-  margin-left: 10px;
-}
-
-list.grid.col-3>item:nth-child(3n) {
-  border-right: 0px;
-}
-
-list.grid.col-4>item:nth-child(4n) {
-  border-right: 0px;
-}
-
-list.grid.col-5>item:nth-child(5n) {
-  border-right: 0px;
-}
-
-list.grid.no-border {
-  padding: 10px 5px;
-}
-
-list.grid.no-border>item {
-  border: none !important;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-list.menu-avatar.comment > item {
-  height: auto;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  padding-left: 45px;
-}
-
-list.menu-avatar.comment  avatar {
-  align-self: flex-start;
-}
-
-/* ==================
-          操作条
- ==================== */
-
-bar {
-  display: flex;
-  position: relative;
-  align-items: center;
-  background: #fff;
-  height: 50px;
-  justify-content: space-between;
-  font-size: 16px;
-}
-
-bar .action {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  justify-content: center;
-  max-width: 100%;
-}
-
-bar .action:first-child {
-  margin-left: 15px;
-  font-size: 15px;
-}
-
-bar .action:first-child text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
-}
-
-bar avatar:first-child {
-  margin-left: 10px;
-}
-
-bar .action:first-child >icon[class*="icon"] {
-  margin-left: -0.5em;
-}
-
-bar .action:last-child {
-  margin-right: 15px;
-}
-
-bar .action>icon[class*="icon"] {
-  font-size: 18px;
-  height: 100%;
-  width: 1.4em;
-}
-
-bar .action>icon[class*="icon"]+icon[class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .content {
-  position: absolute;
-  text-align: center;
-  width: 400rpx;
-  left: 0;
-  right: 0;
-  bottom: 8px;
-  margin: auto;
-  height: 30px;
-  font-size: 18px;
-  line-height: 30px;
-  cursor: none;
-  pointer-events: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-bar.btn-group {
-  justify-content: space-around;
-}
-
-bar.btn-group button {
-  padding: 10px 16px;
-}
-
-bar.btn-group button {
-  flex: 1;
-  margin: 0 10px;
-  max-width: 50%;
-}
-
-bar .serach-form {
-  background: #f5f5f5;
-  line-height: 32px;
-  height: 32px;
-  font-size: 12px;
-  color: #666;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  margin: 0 10px;
-}
-
-bar .serach-form +.action {
-  margin-right: 10px;
-}
-
-bar .serach-form +.action text+icon {
-  margin-right: -0.5em;
-}
-
-bar .serach-form input {
-  flex: 1;
-  padding-right: 10px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 13px;
-}
-
-bar .serach-form [class*="icon"] {
-  width: 2em;
-  height: auto;
-}
-
-bar .serach-form.round [class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .serach-form [class*="icon"]::before {
-  top: 0px;
-}
-
-bar.fixed, .nav.fixed {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 1024;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-bar.foot {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  z-index: 1024;
-  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
-}
-
-bar.shop {
-  padding: 0;
-}
-
-bar.shop .action {
-  font-size: 12px;
-  position: relative;
-  flex: 1;
-  text-align: center;
-  padding: 0 10px;
-  display: block;
-  height: auto !important;
-  line-height: 1;
-  margin: 0 !important;
-}
-
-bar.shop [class*="icon"] {
-  width: 50px !important;
-  position: relative;
-  display: block;
-  height: auto !important;
-  margin: 0 auto 5px !important;
-}
-
-bar.shop .submit {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  flex: 2;
-  height: 100%;
-}
-
-bar.shop .submit:last-child {
-  flex: 2.6;
-}
-
-bar.shop .submit+.submit {
-  flex: 2;
-}
-
-bar.shop .submit button {
-  margin-left: 10px;
-}
-
-bar.shop .submit:last-child button {
-  margin-left: 0px;
-}
-
-bar.shop .submit+.submit button {
-  margin-left: 0px;
-  margin-right: 10px;
-}
-
-bar.shop .action::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-bar.input {
-  padding-right: 10px;
-}
-
-bar.input input {
-  overflow: initial;
-  line-height: 32px;
-  height: 32px;
-  min-height: 32px;
-  flex: 1;
-  font-size: 15px;
-  margin: 0 10px;
-}
-
-bar.input .action {
-  margin-left: 10px;
-}
-
-bar.input .action [class*="icon"] {
-  font-size: 24px;
-}
-
-bar.input input+.action {
-  margin-right: 10px;
-  margin-left: 0px;
-}
-
-bar.input .action:first-child [class*="icon"] {
-  margin-left: 0px;
-}
-
-custom {
-  display: block;
-  position: relative;
-}
-
-custom bar {
-  padding-right: 110px;
-  box-shadow: 0px 0px 0px !important;
-}
-
-/* ==================
-         导航栏
- ==================== */
-
-.nav {
-  white-space: nowrap;
-}
-
-::-webkit-scrollbar {
-  display: none;
-}
-
-.nav item {
-  height: 45px;
-  display: inline-block;
-  line-height: 45px;
-  margin: 0 5px;
-  padding: 0 10px;
-}
-
-.nav item.cur {
-  border-bottom: 2px solid;
-}
-
-/* ==================
-         时间轴
- ==================== */
-
-timeline {
-  display: block;
-  background: #fff;
-}
-
-timeline time {
-  width: 60px;
-  text-align: center;
-  padding: 10px 0;
-  font-size: 13px;
-  color: #888;
-  display: block;
-}
-
-timeline>item {
-  padding: 15px 15px 15px 60px;
-  position: relative;
-  display: block;
-  color: #ccc;
-  z-index: 0;
-}
-
-timeline>item::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 1rpx;
-  background: #ddd;
-  left: 30px;
-  height: 100%;
-  top: 0;
-  z-index: 8;
-}
-
-timeline>item::before {
-  font-family: "iconfont";
-  content: "\e763";
-  display: block;
-  position: absolute;
-  top: 18px;
-  z-index: 9;
-  background: #fff;
-  width: 25px;
-  height: 25px;
-  text-align: center;
-  border: none;
-  line-height: 25px;
-  left: 18px;
-}
-
-timeline>item[class*="icon"]::before {
-  background: #fff;
-  width: 25px;
-  height: 25px;
-  text-align: center;
-  border: none;
-  line-height: 25px;
-  left: 18px;
-}
-
-timeline>item>.content {
-  background: #f1f1f1;
-  padding: 15px;
-  border-radius: 3px;
-  display: block;
-  color: #666;
-  line-height: 1.6;
-}
-
-timeline>item>.content+.content {
-  margin-top: 10px;
-}
-
-/* ==================
-         聊天
- ==================== */
-
-chat {
-  display: flex;
-  flex-direction: column;
-}
-
-chat item {
-  display: flex;
-  padding: 15px 15px 35px;
-  position: relative;
-}
-
-chat item>avatar {
-  width: 40px;
-  height: 40px;
-}
-
-chat item>.main {
-  max-width: calc(100% - 130px);
-  margin: 0 20px;
-  display: flex;
-  align-items: center;
-}
-
-chat item>image {
-  height: 160px;
-}
-
-chat item>.main .content {
-  background: #fff;
-  padding: 10px;
-  border-radius: 3px;
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  color: #666;
-  font-size: 15px;
-  position: relative;
-  min-height: 40px;
-  line-height: 20px;
-  text-align: left;
-}
-
-chat item .date {
-  position: absolute;
-  font-size: 12px;
-  color: #aaa;
-  width: calc(100% - 160px);
-  bottom: 10px;
-  left: 80px;
-}
-
-chat item .action {
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-}
-
-chat item>.main .content::after {
-  content: "";
-  top: 12px;
-  transform: rotate(180deg);
-  position: absolute;
-  z-index: 100;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  border-bottom: 8px solid transparent;
-  border-top: 8px solid transparent;
-  overflow: hidden;
-  border-right-color: #fff;
-  border-left: 8px solid #333;
-  border-right: 0 dotted;
-  border-left-color: #fff;
-  left: -7px;
-  right: initial;
-}
-
-chat item.self {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-chat item.self>.main .content::after {
-  left: auto;
-  right: -7px;
-  border-right: 8px solid #fff;
-  border-left: 0 dotted;
-}
-
-chat item.self>.main .bg-green.content::after {
-  border-right-color: #39b50a;
-}
-
-chat info {
-  display: inline-block;
-  margin: 10px auto;
-  font-size: 12px;
-  padding: 4px 6px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  color: #fff;
-  max-width: 400rpx;
-  line-height: 1.4;
-}
-
-/* ==================
-         卡片
- ==================== */
-
-card {
-  display: block;
-  overflow: hidden;
-}
-
-card > item {
-  display: block;
-  background: #fff;
-  overflow: hidden;
-  border-radius: 5px;
-  margin: 15px;
-}
-
-card > item.shadow-blur {
-  overflow: initial;
-}
-
-card.no-card > item {
-  margin: 0px;
-  border-radius: 0px;
-}
-
-card.case .image {
-  position: relative;
-}
-
-card.case .image image {
-  width: 100%;
-}
-
-card.case .image tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-card.case .image bar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: transparent;
-  padding: 0px 15px;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-card.case.no-card .image {
-  margin: 15px 15px 0;
-  overflow: hidden;
-  border-radius: 5px;
-}
-
-card.dynamic {
-  display: block;
-}
-
-card.dynamic>item {
-  display: block;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-card.dynamic>item > .text-content {
-  padding: 0 15px 0;
-  max-height: 6.4em;
-  overflow: hidden;
-  font-size: 15px;
-  margin-bottom: 10px;
-}
-
-card.dynamic>item .square-img {
-  width: 100%;
-  height: 100px;
-  border-radius: 3px;
-}
-
-card.dynamic>item .only-img {
-  width: 100%;
-  height: 160px;
-  border-radius: 3px;
-}
-
-/* card.dynamic>item .comment {
-  padding: 10px;
-  background: #f1f1f1;
-  margin: 0 15px 15px;
-  border-radius: 3px;
-} */
-
-card.article {
-  display: block;
-}
-
-card.article>item {
-  padding-bottom: 15px;
-}
-
-card.article>item .title {
-  font-size: 15px;
-  font-weight: 900;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #333;
-  line-height: 50px;
-  padding: 0 15px;
-}
-
-card.article>item .content {
-  display: flex;
-  padding: 0 15px;
-}
-
-card.article>item .content > image {
-  width: 120px;
-  height: 6.4em;
-  margin-right: 10px;
-  border-radius: 3px;
-}
-
-card.article>item .content .desc {
-  flex: 1;
-  width: 500rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-card.article>item .content .text-content {
-  font-size: 14px;
-  color: #888;
-  height: 4.8em;
-  overflow: hidden;
-}
-
-/* ==================
-         表单
- ==================== */
-
-form-group {
-  background: #fff;
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-  min-height: 100rpx;
-  justify-content: space-between;
-}
-
-form-group + form-group {
-  border-top: 1rpx solid #eee;
-}
-
-form-group .title {
-  text-align: justify;
-  padding-right: 15px;
-  font-size: 15px;
-  position: relative;
-  height: 30px;
-  line-height: 30px;
-}
-
-form-group.top {
-  align-items: baseline;
-}
-
-form-group input {
-  flex: 1;
-  font-size: 15px;
-  color: #555;
-  padding-right: 10px;
-}
-
-form-group > icon[class*="icon-"] {
-  font-size: 18px;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-form-group textarea, form-group textarea textarea {
-  margin: 16px 0 15px;
-  height: 4.8em;
-  width: 100%;
-  line-height: 1.2em;
-  flex: 1;
-  font-size: 14px;
-  padding: 0;
-  box-sizing: content-box;
-  display: inline-block;
-  vertical-align: top;
-}
-
-form-group textarea::after {
-  content: "测试文字";
-  opacity: 0;
-}
-
-form-group .grid-square {
-  margin: 15px 0 0 !important;
-}
-
-form-group picker {
-  flex: 1;
-  padding-right: 20px;
-  overflow: hidden;
-  position: relative;
-}
-
-form-group picker .picker {
-  line-height: 50px;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-  text-align: right;
-}
-
-form-group picker::after {
-  font-family: iconfont !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 17px;
-  color: #aaa;
-  line-height: 50px;
-  width: 30px;
-  text-align: center;
-  top: 0;
-  bottom: 0;
-  right: -10px;
-  margin: auto;
-}
-
-form-group textarea[disabled], form-group textarea[disabled] .placeholder {
-  color: transparent;
-}
-
-/* ==================
-         模态窗口
- ==================== */
-
-modal-box {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1110;
-  opacity: 0;
-  outline: 0;
-  text-align: center;
-  -ms-transform: scale(1.185);
-  transform: scale(1.185);
-  backface-visibility: hidden;
-  perspective: 1000px;
-  background: rgba(0, 0, 0, 0.6);
-  transition: all 0.6s ease-in-out 0;
-  pointer-events: none;
-}
-
-modal-box::before {
-  content: "\200B";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-modal-box.show {
-  opacity: 1;
-  transition-duration: 0.3s;
-  -ms-transform: scale(1);
-  transform: scale(1);
-  overflow-x: hidden;
-  overflow-y: auto;
-  pointer-events: auto;
-}
-
-dialog {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: auto;
-  margin-right: auto;
-  width: 680rpx;
-  max-width: 100%;
-  background: #f8f8f8;
-  border-radius: 10rpx;
-  overflow: hidden;
-}
-
-modal-box.bottom-modal::before {
-  vertical-align: bottom;
-}
-
-modal-box.bottom-modal dialog {
-  width: 100%;
-  border-radius: 0;
-}
-
-modal-box.bottom-modal {
-  margin-bottom: -500px;
-}
-
-modal-box.bottom-modal.show {
-  margin-bottom: 0;
-}
-
-/* ==================
-         轮播
- ==================== */
-
-swiper.square-dot .wx-swiper-dot {
-  background: #fff;
-  opacity: 0.4;
-  width: 5px !important;
-  height: 5px !important;
-  border-radius: 10px !important;
-  transition: all 0.3s ease-in-out 0s !important;
-}
-
-swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
-  opacity: 1;
-  width: 15px !important;
-}
-
-swiper.round-dot .wx-swiper-dot {
-  /* background: #39b54a; */
-  width: 5px !important;
-  height: 5px !important;
-  top: -2px !important;
-  transition: all 0.3s ease-in-out 0s !important;
-  position: relative;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
-  content: "";
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background: #fff;
-  border-radius: 10px;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
-  width: 9px !important;
-  height: 9px !important;
-  top: 0px !important;
-}
-
-.screen-swiper {
-  min-height: 375rpx;
-}
-
-.screen-swiper image {
-  width: 100%;
-  display: block;
-  height: 100%;
-  margin: 0;
-}
-
-.card-swiper {
-  height: 420rpx;
-}
-
-.card-swiper swiper-item {
-  width: 610rpx !important;
-  left: 70rpx !important;
-  box-sizing: border-box;
-  padding: 20px 0px 35px;
-  overflow: initial !important;
-}
-
-.card-swiper swiper-item .bg-img {
-  width: 100%;
-  display: block;
-  height: 100%;
-  border-radius: 5px;
-  transform: scale(0.9);
-  transition: all 0.2s ease-in 0s;
-}
-
-.card-swiper swiper-item.cur .bg-img {
-  transform: none;
-  transition: all 0.2s ease-in 0s;
-}
-
-.tower-swiper {
-  height: 420rpx;
-  position: relative;
-}
-
-.tower-swiper .tower-item {
-  position: absolute;
-  width: 300rpx;
-  height: 380rpx;
-  top: 0;
-  bottom: 0;
-  left:50%;
-  margin: auto;
-  transition: all 0.3s ease-in 0s;
-  opacity: 1;
-}
-.tower-swiper .tower-item.none {
-  opacity: 0;
-}
-
-.tower-swiper .tower-item .bg-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 3px;
-}

template/colorui-rpx.wxss

@@ -1,2968 +0,0 @@
-/*
-  Color UI v2.0.2 | by 文晓港 
-  单位为多种混合(rpx,vw,vh,em)
-  仅供学习交流，如作它用所承受的法律责任一概与作者无关   
-  （QQ交流群：240787041）
-  文档：http://www.color-ui.com/
-*/
-
-/* ==================
-        初始化
- ==================== */
-
-page {
-  background: #f1f1f1;
-  font-size: 28rpx;
-  color: #333;
-  line-height: 1;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form,
-form-group, info, bar, progress-bar, input, textarea, label, navigator, list,
-item, chat, image {
-  box-sizing: border-box;
-}
-
-/* ==================
-          布局
- ==================== */
-
-/*  -- flex弹性布局 -- */
-
-.flex {
-  display: flex;
-}
-
-.basis-xs {
-  flex-basis: 20%;
-}
-
-.basis-sm {
-  flex-basis: 40%;
-}
-
-.basis-df {
-  flex-basis: 50%;
-}
-
-.basis-lg {
-  flex-basis: 60%;
-}
-
-.basis-xl {
-  flex-basis: 80%;
-}
-
-.flex-sub {
-  flex: 1;
-}
-
-.flex-twice {
-  flex: 2;
-}
-
-.flex-treble {
-  flex: 3;
-}
-
-.flex-direction {
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.align-start {
-  align-items: flex-start;
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-center {
-  align-self: flex-center;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-/* grid布局 */
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid.grid-square {
-  margin-bottom: -20rpx;
-  overflow: hidden;
-}
-
-.grid.grid-square tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-bottom-left-radius: 6rpx;
-}
-
-.grid.grid-square view> icon, .grid.grid-square item> icon {
-  font-size: 52rpx;
-  position: absolute;
-  color: #aaa;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.grid.grid-square view, .grid.grid-square item {
-  margin-right: 20rpx;
-  margin-bottom: 20rpx;
-  border-radius: 6rpx;
-  position: relative;
-  overflow: hidden;
-}
-
-.grid.col-1.grid-square view, .grid.col-1.grid-square item {
-  padding-bottom: 100%;
-  height: 0;
-  margin-right: 0;
-}
-
-.grid.col-2.grid-square view, .grid.col-2.grid-square item {
-  padding-bottom: calc((100% - 20rpx)/2);
-  height: 0;
-  width: calc((100% - 20rpx)/2);
-}
-
-.grid.col-2.grid-square view:nth-child(2n),
-.grid.col-2.grid-square item:nth-child(2n) {
-  margin-right: 0;
-}
-
-.grid.col-3.grid-square view, .grid.col-3.grid-square item {
-  padding-bottom: calc((100% - 40rpx)/3);
-  height: 0;
-  width: calc((100% - 40rpx)/3);
-}
-
-.grid.col-3.grid-square view:nth-child(3n),
-.grid.col-3.grid-square item:nth-child(3n) {
-  margin-right: 0;
-}
-
-.grid.col-4.grid-square view, .grid.col-4.grid-square item {
-  padding-bottom: calc((100% - 60rpx)/4);
-  height: 0;
-  width: calc((100% - 60rpx)/4);
-}
-
-.grid.col-4.grid-square view:nth-child(4n),
-.grid.col-4.grid-square item:nth-child(4n) {
-  margin-right: 0;
-}
-
-.grid.col-5.grid-square view, .grid.col-5.grid-square item {
-  padding-bottom: calc((100% - 80rpx)/5);
-  height: 0;
-  width: calc((100% - 80rpx)/5);
-}
-
-.grid.col-1>item, .grid.col-1>view {
-  width: 100%;
-}
-
-.grid.col-2>item, .grid.col-2>view {
-  width: 50%;
-}
-
-.grid.col-3>item, .grid.col-3>view {
-  width: 33.33%;
-}
-
-.grid.col-4>item, .grid.col-4>view {
-  width: 25%;
-}
-
-.grid.col-5>item, .grid.col-5>view {
-  width: 20%;
-}
-
-/*  -- 内外边距 -- */
-
-.margin-0 {
-  margin: 0 !important;
-}
-
-.margin-xs {
-  margin: 10rpx;
-}
-
-.margin-sm {
-  margin: 20rpx;
-}
-
-.margin {
-  margin: 30rpx;
-}
-
-.margin-lg {
-  margin: 40rpx;
-}
-
-.margin-xl {
-  margin: 50rpx;
-}
-
-.margin-top-xs {
-  margin-top: 10rpx;
-}
-
-.margin-top-sm {
-  margin-top: 20rpx;
-}
-
-.margin-top {
-  margin-top: 30rpx;
-}
-
-.margin-top-lg {
-  margin-top: 40rpx;
-}
-
-.margin-top-xl {
-  margin-top: 50rpx;
-}
-
-.margin-right-xs {
-  margin-right: 10rpx;
-}
-
-.margin-right-sm {
-  margin-right: 20rpx;
-}
-
-.margin-right {
-  margin-right: 30rpx;
-}
-
-.margin-right-lg {
-  margin-right: 40rpx;
-}
-
-.margin-right-xl {
-  margin-right: 50rpx;
-}
-
-.margin-bottom-xs {
-  margin-bottom: 10rpx;
-}
-
-.margin-bottom-sm {
-  margin-bottom: 20rpx;
-}
-
-.margin-bottom {
-  margin-bottom: 30rpx;
-}
-
-.margin-bottom-lg {
-  margin-bottom: 40rpx;
-}
-
-.margin-bottom-xl {
-  margin-bottom: 50rpx;
-}
-
-.margin-left-xs {
-  margin-left: 10rpx;
-}
-
-.margin-left-sm {
-  margin-left: 20rpx;
-}
-
-.margin-left {
-  margin-left: 30rpx;
-}
-
-.margin-left-lg {
-  margin-left: 40rpx;
-}
-
-.margin-left-xl {
-  margin-left: 50rpx;
-}
-
-.margin-lr-xs {
-  margin-left: 10rpx;
-  margin-right: 10rpx;
-}
-
-.margin-lr-sm {
-  margin-left: 20rpx;
-  margin-right: 20rpx;
-}
-
-.margin-lr {
-  margin-left: 30rpx;
-  margin-right: 30rpx;
-}
-
-.margin-lr-lg {
-  margin-left: 40rpx;
-  margin-right: 40rpx;
-}
-
-.margin-lr-xl {
-  margin-left: 50rpx;
-  margin-right: 50rpx;
-}
-
-.margin-tb-xs {
-  margin-top: 10rpx;
-  margin-bottom: 10rpx;
-}
-
-.margin-tb-sm {
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
-}
-
-.margin-tb {
-  margin-top: 30rpx;
-  margin-bottom: 30rpx;
-}
-
-.margin-tb-lg {
-  margin-top: 40rpx;
-  margin-bottom: 40rpx;
-}
-
-.margin-tb-xl {
-  margin-top: 50rpx;
-  margin-bottom: 50rpx;
-}
-
-.padding-0 {
-  padding: 0 !important;
-}
-
-.padding-xs {
-  padding: 10rpx;
-}
-
-.padding-sm {
-  padding: 20rpx;
-}
-
-.padding {
-  padding: 30rpx;
-}
-
-.padding-lg {
-  padding: 40rpx;
-}
-
-.padding-xl {
-  padding: 50rpx;
-}
-
-.padding-top-xs {
-  padding-top: 10rpx;
-}
-
-.padding-top-sm {
-  padding-top: 20rpx;
-}
-
-.padding-top {
-  padding-top: 30rpx;
-}
-
-.padding-top-lg {
-  padding-top: 40rpx;
-}
-
-.padding-top-xl {
-  padding-top: 50rpx;
-}
-
-.padding-right-xs {
-  padding-right: 10rpx;
-}
-
-.padding-right-sm {
-  padding-right: 20rpx;
-}
-
-.padding-right {
-  padding-right: 30rpx;
-}
-
-.padding-right-lg {
-  padding-right: 40rpx;
-}
-
-.padding-right-xl {
-  padding-right: 50rpx;
-}
-
-.padding-bottom-xs {
-  padding-bottom: 10rpx;
-}
-
-.padding-bottom-sm {
-  padding-bottom: 20rpx;
-}
-
-.padding-bottom {
-  padding-bottom: 30rpx;
-}
-
-.padding-bottom-lg {
-  padding-bottom: 40rpx;
-}
-
-.padding-bottom-xl {
-  padding-bottom: 50rpx;
-}
-
-.padding-left-xs {
-  padding-left: 10rpx;
-}
-
-.padding-left-sm {
-  padding-left: 20rpx;
-}
-
-.padding-left {
-  padding-left: 30rpx;
-}
-
-.padding-left-lg {
-  padding-left: 40rpx;
-}
-
-.padding-left-xl {
-  padding-left: 50rpx;
-}
-
-.padding-lr-xs {
-  padding-left: 10rpx;
-  padding-right: 10rpx;
-}
-
-.padding-lr-sm {
-  padding-left: 20rpx;
-  padding-right: 20rpx;
-}
-
-.padding-lr {
-  padding-left: 30rpx;
-  padding-right: 30rpx;
-}
-
-.padding-lr-lg {
-  padding-left: 40rpx;
-  padding-right: 40rpx;
-}
-
-.padding-lr-xl {
-  padding-left: 50rpx;
-  padding-right: 50rpx;
-}
-
-.padding-tb-xs {
-  padding-top: 10rpx;
-  padding-bottom: 10rpx;
-}
-
-.padding-tb-sm {
-  padding-top: 20rpx;
-  padding-bottom: 20rpx;
-}
-
-.padding-tb {
-  padding-top: 30rpx;
-  padding-bottom: 30rpx;
-}
-
-.padding-tb-lg {
-  padding-top: 40rpx;
-  padding-bottom: 40rpx;
-}
-
-.padding-tb-xl {
-  padding-top: 50rpx;
-  padding-bottom: 50rpx;
-}
-
-/* -- 浮动 --  */
-
-.cf::after, .cf::before {
-  content: " ";
-  display: table;
-}
-
-.cf::after {
-  clear: both;
-}
-
-.fl {
-  float: left;
-}
-
-.fr {
-  float: right;
-}
-
-/* ==================
-          图片
- ==================== */
-
-image {
-  max-width: 100%;
-  display: inline-block;
-  position: relative;
-  z-index: 0;
-}
-
-image.loading::before {
-  content: "";
-  background: #f5f5f5;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: -2;
-}
-
-image.loading::after {
-  content: "\e7f1";
-  font-family: "iconfont";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 32rpx;
-  height: 32rpx;
-  line-height: 32rpx;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  font-size: 32rpx;
-  margin: auto;
-  color: #ccc;
-  -webkit-animation: icon-spin 2s infinite linear;
-  animation: icon-spin 2s infinite linear;
-  display: block;
-}
-
-image.response {
-  width: 100%;
-}
-
-/* ==================
-         开关
- ==================== */
-
-switch, checkbox, radio {
-  position: relative;
-}
-
-switch::after, switch::before {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 0%;
-  left: 0rpx;
-  font-size: 32rpx;
-  line-height: 64rpx;
-  width: 64rpx;
-  text-align: center;
-  pointer-events: none;
-  transform: scale(0, 0);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-switch::before {
-  content: "\e646";
-  right: 0;
-  transform: scale(1, 1);
-  left: auto;
-}
-
-switch[checked]::after {
-  transform: scale(1, 1);
-}
-
-switch[checked]::before {
-  transform: scale(0, 0);
-}
-
-radio::before, checkbox::before {
-  font-family: "iconfont" !important;
-  content: "\e645";
-  position: absolute;
-  color: #fff;
-  top: 50%;
-  margin-top: -16rpx;
-  right: 10rpx;
-  font-size: 32rpx;
-  line-height: 32rpx;
-  pointer-events: none;
-  transform: scale(1, 1);
-  transition: all 0.3s ease-in-out 0s;
-  z-index: 9;
-}
-
-switch[checked]::before {
-  transform: scale(0, 0);
-}
-
-switch .wx-switch-input {
-  background: #aaa !important;
-  border: none;
-  padding: 0 60rpx;
-  height: 64rpx;
-  margin: 0;
-  border-radius: 100rpx;
-}
-
-switch .wx-switch-input::after {
-  margin: auto !important;
-  width: 64rpx !important;
-  height: 64rpx !important;
-  border-radius: 100rpx;
-  left: 0rpx !important;
-  top: 0rpx !important;
-  bottom: 0rpx !important;
-  position: absolute;
-  transform: scale(0.9, 0.9) !important;
-  transition: all 0.1s ease-in-out 0s;
-}
-
-switch .wx-switch-input-checked::after {
-  margin: auto !important;
-  left: 54rpx !important;
-  box-shadow: none !important;
-}
-
-radio-group {
-  display: inline-block;
-}
-
-radio .wx-radio-input, checkbox .wx-checkbox-input {
-  margin: 0;
-  width: 48rpx;
-  height: 48rpx;
-}
-
-checkbox.round .wx-checkbox-input {
-  border-radius: 100rpx;
-}
-
-switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
-switch.radius .wx-switch-input::before {
-  border-radius: 10rpx;
-}
-
-switch .wx-switch-input::before, radio.radio::before,
-checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
-  display: none;
-}
-
-radio.radio[checked]::after {
-  content: "";
-  background: transparent;
-  display: block;
-  position: absolute;
-  width: 16rpx;
-  height: 16rpx;
-  z-index: 999;
-  top: 0rpx;
-  left: 0rpx;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  border-radius: 200rpx;
-  border: 16rpx solid #fff;
-}
-
-switch.sm, checkbox.sm, radio.sm {
-  transform: scale(0.8);
-}
-
-.switch-sex::after {
-  content: "\e71c";
-}
-
-.switch-sex::before {
-  content: "\e71a";
-}
-
-.switch-sex .wx-switch-input {
-  background: #e54d42 !important;
-  border-color: #e54d42;
-}
-
-.switch-sex[checked] .wx-switch-input {
-  background: #0081ff !important;
-  border-color: #0081ff !important;
-}
-
-/* ==================
-          背景
- ==================== */
-
-.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  border-color: #e54d42 !important;
-}
-
-.line-orange::after, .lines-orange::after,
-switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  border-color: #f37b1d !important;
-}
-
-.line-yellow::after, .lines-yellow::after,
-switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  border-color: #fbbd08 !important;
-}
-
-.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  border-color: #8dc63f !important;
-}
-
-.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
-checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
-radio.green[checked] .wx-radio-input {
-  border-color: #39b54a !important;
-}
-
-.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  border-color: #1cbbb4 !important;
-}
-
-.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  border-color: #0081ff !important;
-}
-
-.line-purple::after, .lines-purple::after,
-switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  border-color: #6739b6 !important;
-}
-
-.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  border-color: #9c26b0 !important;
-}
-
-.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  border-color: #e03997 !important;
-}
-
-.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  border-color: #a5673f !important;
-}
-
-.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  border-color: #8799a3 !important;
-}
-
-.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  border-color: #aaa !important;
-}
-
-.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  border-color: #333 !important;
-}
-
-.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  border-color: #fff !important;
-}
-
-.bg-red, switch.red[checked] .wx-switch-input,
-checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
-  background-color: #e54d42 !important;
-  color: #fff !important;
-}
-
-.bg-orange, switch.orange[checked] .wx-switch-input,
-checkbox.orange[checked] .wx-checkbox-input,
-radio.orange[checked] .wx-radio-input {
-  background-color: #f37b1d !important;
-  color: #fff !important;
-}
-
-.bg-yellow, switch.yellow[checked] .wx-switch-input,
-checkbox.yellow[checked] .wx-checkbox-input,
-radio.yellow[checked] .wx-radio-input {
-  background-color: #fbbd08 !important;
-  color: #333 !important;
-}
-
-.bg-olive, switch.olive[checked] .wx-switch-input,
-checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
-  background-color: #8dc63f !important;
-  color: #fff !important;
-}
-
-.bg-green, switch.green[checked] .wx-switch-input,
-switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
-checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
-radio[checked] .wx-radio-input {
-  background-color: #39b54a !important;
-  color: #fff !important;
-}
-
-.bg-cyan, switch.cyan[checked] .wx-switch-input,
-checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
-  background-color: #1cbbb4 !important;
-  color: #fff !important;
-}
-
-.bg-blue, switch.blue[checked] .wx-switch-input,
-checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
-  background-color: #0081ff !important;
-  color: #fff !important;
-}
-
-.bg-purple, switch.purple[checked] .wx-switch-input,
-checkbox.purple[checked] .wx-checkbox-input,
-radio.purple[checked] .wx-radio-input {
-  background-color: #6739b6 !important;
-  color: #fff !important;
-}
-
-.bg-mauve, switch.mauve[checked] .wx-switch-input,
-checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
-  background-color: #9c26b0 !important;
-  color: #fff !important;
-}
-
-.bg-pink, switch.pink[checked] .wx-switch-input,
-checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
-  background-color: #e03997 !important;
-  color: #fff !important;
-}
-
-.bg-brown, switch.brown[checked] .wx-switch-input,
-checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
-  background-color: #a5673f !important;
-  color: #fff !important;
-}
-
-.bg-grey, switch.grey[checked] .wx-switch-input,
-checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
-  background-color: #8799a3 !important;
-  color: #fff !important;
-}
-
-.bg-gray, switch.gray[checked] .wx-switch-input,
-checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
-  background-color: #f0f0f0 !important;
-  color: #666 !important;
-}
-
-.bg-black, switch.black[checked] .wx-switch-input,
-checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
-  background-color: #333 !important;
-  color: #fff !important;
-}
-
-.bg-white, switch.white[checked] .wx-switch-input,
-checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
-  background-color: #fff !important;
-  color: #666;
-}
-
-.bg-shadeTop {
-  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
-  color: #fff;
-}
-
-.bg-shadeBottom {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
-  color: #fff;
-}
-
-.none-bg, .line-white, .lines-white {
-  background-color: transparent !important;
-}
-
-.bg-red.light {
-  color: #e54d42 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-orange.light {
-  color: #f37b1d !important;
-  background: #fde6d2 !important;
-}
-
-.bg-yellow.light {
-  color: #fbbd08 !important;
-  background: #fef2ce !important;
-}
-
-.bg-olive.light {
-  color: #8dc63f !important;
-  background: #e8f4d9 !important;
-}
-
-.bg-green.light {
-  color: #39b54a !important;
-  background: #d7f0db !important;
-}
-
-.bg-cyan.light {
-  color: #1cbbb4 !important;
-  background: #d2f1f0 !important;
-}
-
-.bg-blue.light {
-  color: #0081ff !important;
-  background: #cce6ff !important;
-}
-
-.bg-purple.light {
-  color: #6739b6 !important;
-  background: #e1d7f0 !important;
-}
-
-.bg-mauve.light {
-  color: #9c26b0 !important;
-  background: #ebd4ef !important;
-}
-
-.bg-pink.light {
-  color: #e03997 !important;
-  background: #f9d7ea !important;
-}
-
-.bg-brown.light {
-  color: #a5673f !important;
-  background: #ede1d9 !important;
-}
-
-.bg-grey.light {
-  color: #8799a3 !important;
-  background: #e7ebed !important;
-}
-
-.bg-gray.light {
-  color: #666 !important;
-  background: #fadbd9 !important;
-}
-
-.bg-gray.light {
-  color: #888 !important;
-  background: #f1f1f1 !important;
-}
-
-.gradual-red {
-  background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important;
-  color: #fff !important;
-}
-
-.gradual-orange {
-  background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
-  color: #fff !important;
-}
-
-.gradual-green {
-  background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important;
-  color: #fff !important;
-}
-
-.gradual-purple {
-  background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important;
-  color: #fff !important;
-}
-
-.gradual-pink {
-  background-image: linear-gradient(45deg, #ec008c, #6739b6) !important;
-  color: #fff !important;
-}
-
-.gradual-blue {
-  background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
-  color: #fff !important;
-}
-
-button.shadow[class*="-red"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2) !important;
-}
-
-button.shadow[class*="-orange"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2) !important;
-}
-
-button.shadow[class*="-yellow"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2) !important;
-}
-
-button.shadow[class*="-olive"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2) !important;
-}
-
-button.shadow[class*="-green"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2) !important;
-}
-
-button.shadow[class*="-cyan"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2) !important;
-}
-
-button.shadow[class*="-blue"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2) !important;
-}
-
-button.shadow[class*="-purple"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2) !important;
-}
-
-button.shadow[class*="-mauve"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2) !important;
-}
-
-button.shadow[class*="-pink"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2) !important;
-}
-
-button.shadow[class*="-brown"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2) !important;
-}
-
-button.shadow[class*="-grey"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-gray"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important;
-}
-
-button.shadow[class*="-black"] {
-  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2) !important;
-}
-
-.bg-img {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.bg-mask {
-  background-color: #333;
-  position: relative;
-}
-
-.bg-mask::after {
-  content: "";
-  border-radius: inherit;
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-color: rgba(0, 0, 0, 0.5);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-
-.bg-mask view, .bg-mask cover-view {
-  z-index: 5;
-  position: relative;
-}
-
-.bg-mask>cover-view {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.bg-video {
-  position: relative;
-}
-
-.bg-video video {
-  display: block;
-  height: 100%;
-  width: 100%;
-  -o-object-fit: cover;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* ==================
-          文本
- ==================== */
-
-.text-xs {
-  font-size: 20rpx;
-}
-
-.text-sm {
-  font-size: 24rpx;
-}
-
-.text-df {
-  font-size: 28rpx;
-}
-
-.text-lg {
-  font-size: 32rpx;
-}
-
-.text-xl {
-  font-size: 36rpx;
-}
-
-.text-xxl {
-  font-size: 44rpx;
-}
-
-.text-sl {
-  font-size: 80rpx;
-}
-
-.text-xsl {
-  font-size: 120rpx;
-}
-
-.text-Abc {
-  text-transform: Capitalize;
-}
-
-.text-ABC {
-  text-transform: Uppercase;
-}
-
-.text-abc {
-  text-transform: Lowercase;
-}
-
-.text-price::before {
-  content: "¥";
-  font-size: 80%;
-  margin-right: 4rpx;
-}
-
-.text-cut {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-content {
-  line-height: 1.6;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-red, .line-red, .lines-red {
-  color: #e54d42 !important;
-}
-
-.text-orange, .line-orange, .lines-orange {
-  color: #f37b1d !important;
-}
-
-.text-yellow, .line-yellow, .lines-yellow {
-  color: #fbbd08 !important;
-}
-
-.text-olive, .line-olive, .lines-olive {
-  color: #8dc63f !important;
-}
-
-.text-green, .line-green, .lines-green {
-  color: #39b54a !important;
-}
-
-.text-cyan, .line-cyan, .lines-cyan {
-  color: #1cbbb4 !important;
-}
-
-.text-blue, .line-blue, .lines-blue {
-  color: #0081ff !important;
-}
-
-.text-purple, .line-purple, .lines-purple {
-  color: #6739b6 !important;
-}
-
-.text-mauve, .line-mauve, .lines-mauve {
-  color: #9c26b0 !important;
-}
-
-.text-pink, .line-pink, .lines-pink {
-  color: #e03997 !important;
-}
-
-.text-brown, .line-brown, .lines-brown {
-  color: #a5673f !important;
-}
-
-.text-grey, .line-grey, .lines-grey {
-  color: #8799a3 !important;
-}
-
-.text-gray, .line-gray, .lines-gray {
-  color: #aaa !important;
-}
-
-.text-black, .line-black, .lines-black {
-  color: #333 !important;
-}
-
-.text-white, .line-white, .lines-white {
-  color: #fff !important;
-}
-
-/* ==================
-          边框
- ==================== */
-
-/* -- 实线 -- */
-
-.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
-.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
-.dashed-right, .dashed-bottom, .dashed-left {
-  position: relative;
-}
-
-.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
-.solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
-.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
-.dashed-right::after, .dashed-bottom::after, .dashed-left::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: inherit;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.solid::after {
-  border: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-top::after {
-  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-right::after {
-  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-bottom::after {
-  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-.solid-left::after {
-  border-left: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-.solids::after {
-  border: 4rpx solid #eee;
-}
-
-.solids-top::after {
-  border-top: 4rpx solid #eee;
-}
-
-.solids-right::after {
-  border-right: 4rpx solid #eee;
-}
-
-.solids-bottom::after {
-  border-bottom: 4rpx solid #eee;
-}
-
-.solids-left::after {
-  border-left: 4rpx solid #eee;
-}
-
-/* -- 虚线 -- */
-
-.dashed::after {
-  border: 1rpx dashed #ddd;
-}
-
-.dashed-top::after {
-  border-top: 1rpx dashed #ddd;
-}
-
-.dashed-right::after {
-  border-right: 1rpx dashed #ddd;
-}
-
-.dashed-bottom::after {
-  border-bottom: 1rpx dashed #ddd;
-}
-
-.dashed-left::after {
-  border-left: 1rpx dashed #ddd;
-}
-
-/* -- 阴影 -- */
-
-.shadow {
-  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
-}
-
-.shadow-lg {
-  box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.07);
-}
-
-.shadow-warp {
-  position: relative;
-  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
-}
-
-.shadow-warp:before, .shadow-warp:after {
-  position: absolute;
-  content: "";
-  top: 20rpx;
-  bottom: 30rpx;
-  left: 20rpx;
-  width: 50%;
-  box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
-  transform: rotate(-3deg);
-  z-index: -1;
-}
-
-.shadow-warp:after {
-  right: 20rpx;
-  left: auto;
-  transform: rotate(3deg);
-}
-
-.shadow-blur {
-  position: relative;
-}
-
-.shadow-blur::before {
-  content: "";
-  display: block;
-  background: inherit;
-  filter: blur(10rpx);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 10rpx;
-  left: 10rpx;
-  z-index: -1;
-  opacity: 0.4;
-  transform-origin: 0 0;
-  border-radius: inherit;
-  transform: scale(1, 1);
-}
-
-/* ==================
-          按钮
- ==================== */
-
-.round, button.icon {
-  border-radius: 5000rpx !important;
-}
-
-.radius {
-  border-radius: 6rpx !important;
-}
-
-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 20rpx 30rpx 16rpx;
-  font-size: 28rpx;
-  line-height: 1;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 6rpx;
-  overflow: visible;
-  color: #666;
-  background-color: #fff !important;
-  margin-left: initial;
-  transform: translate(0rpx, 0rpx);
-  margin-right: initial;
-}
-
-button::after, tag[class*="line-"]::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 1rpx solid rgba(0, 0, 0, 0.2);
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: inherit;
-  z-index: 1;
-  pointer-events: none;
-}
-
-button[class*="line"]::after, tag.radius[class*="line"]::after {
-  border-radius: 12rpx;
-}
-
-button.round[class*="line"]::after, tag.round[class*="line"]::after {
-  border-radius: 1000rpx;
-}
-
-button[class*="lines"]::after {
-  border: 6rpx solid rgba(0, 0, 0, 0.2);
-}
-
-button[class*="bg-"]::after {
-  display: none;
-}
-
-button.sm {
-  padding: 14rpx 20rpx 10rpx;
-  font-size: 24rpx;
-}
-
-button.lg {
-  padding: 32rpx 40rpx 28rpx;
-  font-size: 32rpx;
-}
-
-button.icon.sm {
-  width: 56rpx;
-  height: 56rpx;
-}
-
-button.icon {
-  width: 70rpx;
-  height: 70rpx;
-  padding: 0;
-}
-
-button.icon.lg {
-  width: 80rpx;
-  height: 80rpx;
-}
-
-button.shadow-blur::before {
-  top: 4rpx;
-  left: 4rpx;
-  filter: blur(6rpx);
-  opacity: 0.6;
-}
-
-button.button-hover {
-  transform: translate(1rpx, 1rpx);
-}
-
-.block {
-  display: block;
-}
-
-button.block {
-  display: flex;
-}
-
-button[disabled] {
-  opacity: 0.6;
-  color: #fff;
-}
-
-/* ==================
-          徽章
- ==================== */
-
-tag {
-  font-size: 24rpx;
-  color: #666;
-  vertical-align: middle;
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 12rpx 14rpx 10rpx;
-  line-height: 1;
-  background: #fff;
-  font-family: Helvetica Neue, Helvetica, sans-serif;
-}
-
-tag[class*="line-"]::after {
-  border-radius: 0;
-}
-
-tag+tag {
-  margin-left: 10rpx;
-}
-
-tag.sm {
-  font-size: 20rpx;
-  padding: 10rpx 12rpx 6rpx;
-}
-
-capsule {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-capsule + capsule {
-  margin-left: 10rpx;
-}
-
-capsule tag {
-  margin: 0;
-}
-
-capsule tag[class*="line-"]:last-child::after {
-  border-left: 0rpx solid transparent !important;
-}
-
-capsule tag[class*="line-"]:first-child::after {
-  border-right: 0rpx solid transparent !important;
-}
-
-capsule.radius tag:first-child {
-  border-top-left-radius: 6rpx;
-  border-bottom-left-radius: 6rpx;
-}
-
-capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {
-  border-top-right-radius: 12rpx;
-  border-bottom-right-radius: 12rpx;
-}
-
-capsule.round tag:first-child {
-  border-top-left-radius: 200rpx;
-  border-bottom-left-radius: 200rpx;
-  text-indent: 4rpx;
-}
-
-capsule.round tag:last-child::after, capsule.round tag:last-child {
-  border-top-right-radius: 200rpx;
-  border-bottom-right-radius: 200rpx;
-  text-indent: -4rpx;
-}
-
-tag.badge {
-  background: #dd514c;
-  border-radius: 200rpx;
-  position: absolute;
-  top: -10rpx;
-  right: -10rpx;
-  font-size: 20rpx;
-  padding: 6rpx 10rpx 4rpx;
-  color: #fff;
-}
-
-tag:empty {
-  padding: 8rpx;
-  top: -4rpx;
-  right: -4rpx;
-}
-
-/* ==================
-          头像
- ==================== */
-
-avatar {
-  font-variant: small-caps;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  text-align: center;
-  background: #ccc;
-  color: #fff;
-  white-space: nowrap;
-  position: relative;
-  width: 64rpx;
-  height: 64rpx;
-  line-height: 64rpx;
-  background-size: cover;
-  background-position: center;
-  vertical-align: middle;
-}
-
-avatar text {
-  position: absolute;
-  left: 50%;
-  display: inline-block;
-  transform-origin: 0 center;
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.sm {
-  width: 48rpx;
-  height: 48rpx;
-  line-height: 48rpx;
-}
-
-avatar > icon {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  transform-origin: 0 center;
-  transform: scale(1.2) translateX(-50%);
-}
-
-avatar.sm > icon {
-  transform: scale(0.75) translateX(-50%);
-}
-
-avatar.lg > icon {
-  transform: scale(1.75) translateX(-50%);
-}
-
-avatar.xl > icon {
-  transform: scale(2.2) translateX(-50%);
-}
-
-avatar.lg {
-  width: 90rpx;
-  height: 90rpx;
-  line-height: 90rpx;
-}
-
-avatar.xl {
-  width: 128rpx;
-  height: 128rpx;
-  line-height: 128rpx;
-}
-
-avatar-group {
-  direction: rtl;
-  unicode-bidi: bidi-override;
-  padding: 0 10rpx 0 40rpx;
-  display: inline-block;
-}
-
-avatar-group avatar {
-  margin-left: -30rpx;
-  border: 4rpx solid #f1f1f1;
-  vertical-align: middle;
-}
-
-avatar-group avatar.sm {
-  margin-left: -20rpx;
-  border: 1rpx solid #f1f1f1;
-}
-
-/* ==================
-         进度条
- ==================== */
-
-progress-bar {
-  overflow: hidden;
-  height: 28rpx;
-  background-color: #ebeef5;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-}
-
-progress-bar+view, progress-bar+text {
-  line-height: 1;
-}
-
-progress-bar.xs {
-  height: 10rpx;
-}
-
-progress-bar.sm {
-  height: 20rpx;
-}
-
-progress-bar view {
-  width: 0;
-  height: 100%;
-  align-items: center;
-  display: flex;
-  justify-items: flex-end;
-  justify-content: space-around;
-  font-size: 20rpx;
-  color: #fff;
-  background: #0081ff;
-  transition: width 0.6s ease;
-}
-
-progress-bar text {
-  align-items: center;
-  display: flex;
-  font-size: 20rpx;
-  color: #666;
-  text-indent: 10rpx;
-}
-
-progress-bar.text-progress {
-  padding-right: 60rpx;
-}
-
-progress-bar.striped view {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: 72rpx 72rpx;
-}
-
-progress-bar.active view {
-  animation: progress-bar-stripes 2s linear infinite;
-}
-
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 72rpx 0;
-  }
-
-  to {
-    background-position: 0 0;
-  }
-}
-
-/* ==================
-          加载
- ==================== */
-
-load {
-  display: block;
-  line-height: 3em;
-  text-align: center;
-}
-
-load::before {
-  font-family: "iconfont" !important;
-  display: inline-block;
-  margin-right: 6rpx;
-}
-
-load.loading::before {
-  content: "\e67a";
-  animation: icon-spin 2s infinite linear;
-}
-
-load.loading::after {
-  content: "加载中...";
-}
-
-load.over::before {
-  content: "\e64a";
-}
-
-load.over::after {
-  content: "没有更多了";
-}
-
-load.erro::before {
-  content: "\e658";
-}
-
-load.erro::after {
-  content: "加载失败";
-}
-
-load.load-icon::before {
-  font-size: 32rpx;
-}
-
-load.load-icon::after {
-  display: none;
-}
-
-load.load-icon.over {
-  display: none;
-}
-
-/* ==================
-          列表
- ==================== */
-
-.grayscale {
-  filter: grayscale(1);
-}
-
-list.menu {
-  padding: 0 30rpx;
-  background: #fff;
-  display: block;
-}
-
-list.menu.no-padding {
-  padding: 0;
-}
-
-list.menu+list.menu {
-  margin-top: 30rpx;
-}
-
-list+list {
-  margin-top: 30rpx;
-}
-
-list.menu>item {
-  position: relative;
-  line-height: 36rpx;
-  font-size: 32rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1rpx solid #eee;
-  min-height: 100rpx;
-}
-
-list.menu>item.cur {
-  background-color: #fcf7e9;
-}
-
-list.menu>item:last-child {
-  border: none;
-}
-
-list.menu.no-padding>item {
-  padding: 30rpx;
-}
-
-list.menu-avatar.no-padding>item {
-  padding-left: 140rpx;
-}
-
-list.menu-avatar.no-padding>item avatar {
-  left: 30rpx;
-}
-
-list.menu.no-padding>item.arrow {
-  padding-right: 66rpx;
-}
-
-list.menu>item .content {
-  line-height: 1.6em;
-  flex: 1;
-}
-
-list.menu>item button.content {
-  padding: 0;
-  justify-content: flex-start;
-  font-size: 32rpx;
-}
-
-list.menu>item button.content::after {
-  display: none;
-}
-
-list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
-list.menu>item .content>icon {
-  margin-right: 10rpx;
-  display: inline-block;
-  width: 1.4em;
-  height: 1.6em;
-  vertical-align: middle;
-  text-align: center;
-}
-
-list.menu>item .action {
-  text-align: right;
-}
-
-list>item.grayscale {
-  background-color: #f5f5f5;
-}
-
-list.menu>item .action tag:empty {
-  right: 10rpx;
-}
-
-list.menu>item.arrow {
-  padding-right: 36rpx;
-}
-
-list.menu>item.arrow::after {
-  font-family: "iconfont" !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 34rpx;
-  color: #aaa;
-  line-height: 30rpx;
-  height: 30rpx;
-  width: 30rpx;
-  text-align: center;
-  top: 1rpx;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}
-
-list.menu.no-padding>item.arrow::after {
-  right: 30rpx;
-}
-
-list.menu>item avatar-group avatar {
-  border-color: #fff;
-}
-
-list.card-menu {
-  margin-left: 30rpx;
-  margin-right: 30rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-}
-
-list.menu-avatar>item>avatar {
-  position: absolute;
-  left: 0;
-}
-
-list.menu-avatar>item {
-  padding-left: 110rpx;
-  height: 140rpx;
-}
-
-list.menu>item .content tag.sm {
-  font-size: 16rpx;
-  line-height: 80%;
-  padding: 8rpx 6rpx 4rpx;
-  margin-top: -6rpx;
-}
-
-list.grid {
-  text-align: center;
-  background: #fff;
-}
-
-list.grid>item {
-  display: flex;
-  flex-direction: column;
-  border-right: 1rpx solid #eee;
-  border-bottom: 1rpx solid #eee;
-  padding: 20rpx;
-}
-
-list.grid>item icon {
-  display: block;
-  width: 100%;
-  position: relative;
-  font-size: 48rpx;
-  margin-top: 20rpx;
-}
-
-list.grid>item text {
-  display: block;
-  color: #888;
-  margin-top: 10rpx;
-  line-height: 40rpx;
-  font-size: 26rpx;
-}
-
-list.grid>item tag {
-  left: 50%;
-  right: auto;
-  margin-left: 20rpx;
-}
-
-list.grid.col-3>item:nth-child(3n) {
-  border-right: 0rpx;
-}
-
-list.grid.col-4>item:nth-child(4n) {
-  border-right: 0rpx;
-}
-
-list.grid.col-5>item:nth-child(5n) {
-  border-right: 0rpx;
-}
-
-list.grid.no-border {
-  padding: 20rpx 10rpx;
-}
-
-list.grid.no-border>item {
-  border: none !important;
-  padding-top: 10rpx;
-  padding-bottom: 10rpx;
-}
-
-list.menu-avatar.comment > item {
-  height: auto;
-  padding-top: 30rpx;
-  padding-bottom: 30rpx;
-  padding-left: 90rpx;
-}
-
-list.menu-avatar.comment  avatar {
-  align-self: flex-start;
-}
-
-/* ==================
-          操作条
- ==================== */
-
-bar {
-  display: flex;
-  position: relative;
-  align-items: center;
-  background: #fff;
-  height: 100rpx;
-  justify-content: space-between;
-  font-size: 32rpx;
-}
-
-bar .action {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  justify-content: center;
-  max-width: 100%;
-}
-
-bar .action:first-child {
-  margin-left: 30rpx;
-  font-size: 30rpx;
-}
-
-bar .action:first-child text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
-}
-
-bar avatar:first-child {
-  margin-left: 20rpx;
-}
-
-bar .action:first-child >icon[class*="icon"] {
-  margin-left: -0.5em;
-}
-
-bar .action:last-child {
-  margin-right: 30rpx;
-}
-
-bar .action>icon[class*="icon"] {
-  font-size: 36rpx;
-  height: 100%;
-  width: 1.4em;
-}
-
-bar .action>icon[class*="icon"]+icon[class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .content {
-  position: absolute;
-  text-align: center;
-  width: 400rpx;
-  left: 0;
-  right: 0;
-  bottom: 16rpx;
-  margin: auto;
-  height: 60rpx;
-  font-size: 36rpx;
-  line-height: 60rpx;
-  cursor: none;
-  pointer-events: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-bar.btn-group {
-  justify-content: space-around;
-}
-
-bar.btn-group button {
-  padding: 20rpx 32rpx;
-}
-
-bar.btn-group button {
-  flex: 1;
-  margin: 0 20rpx;
-  max-width: 50%;
-}
-
-bar .serach-form {
-  background: #f5f5f5;
-  line-height: 64rpx;
-  height: 64rpx;
-  font-size: 24rpx;
-  color: #666;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  margin: 0 20rpx;
-}
-
-bar .serach-form +.action {
-  margin-right: 20rpx;
-}
-
-bar .serach-form +.action text+icon {
-  margin-right: -0.5em;
-}
-
-bar .serach-form input {
-  flex: 1;
-  padding-right: 20rpx;
-  height: 128rpx;
-  line-height: 128rpx;
-  font-size: 26rpx;
-}
-
-bar .serach-form [class*="icon"] {
-  width: 2em;
-  height: auto;
-}
-
-bar .serach-form.round [class*="icon"] {
-  margin-left: 0.5em;
-}
-
-bar .serach-form [class*="icon"]::before {
-  top: 0rpx;
-}
-
-bar.fixed, .nav.fixed {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 1024;
-  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
-}
-
-bar.foot {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  z-index: 1024;
-  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
-}
-
-bar.shop {
-  padding: 0;
-}
-
-bar.shop .action {
-  font-size: 24rpx;
-  position: relative;
-  flex: 1;
-  text-align: center;
-  padding: 0 20rpx;
-  display: block;
-  height: auto !important;
-  line-height: 1;
-  margin: 0 !important;
-}
-
-bar.shop [class*="icon"] {
-  width: 100rpx !important;
-  position: relative;
-  display: block;
-  height: auto !important;
-  margin: 0 auto 10rpx !important;
-}
-
-bar.shop .submit {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  flex: 2;
-  height: 100%;
-}
-
-bar.shop .submit:last-child {
-  flex: 2.6;
-}
-
-bar.shop .submit+.submit {
-  flex: 2;
-}
-
-bar.shop .submit button {
-  margin-left: 20rpx;
-}
-
-bar.shop .submit:last-child button {
-  margin-left: 0rpx;
-}
-
-bar.shop .submit+.submit button {
-  margin-left: 0rpx;
-  margin-right: 20rpx;
-}
-
-bar.shop .action::after {
-  content: " ";
-  width: 200%;
-  height: 200%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-
-bar.input {
-  padding-right: 20rpx;
-}
-
-bar.input input {
-  overflow: initial;
-  line-height: 128rpx;
-  height: 128rpx;
-  min-height: 128rpx;
-  flex: 1;
-  font-size: 30rpx;
-  margin: 0 20rpx;
-}
-
-bar.input .action {
-  margin-left: 20rpx;
-}
-
-bar.input .action [class*="icon"] {
-  font-size: 48rpx;
-}
-
-bar.input input+.action {
-  margin-right: 20rpx;
-  margin-left: 0rpx;
-}
-
-bar.input .action:first-child [class*="icon"] {
-  margin-left: 0rpx;
-}
-
-custom {
-  display: block;
-  position: relative;
-}
-
-custom bar {
-  padding-right: 220rpx;
-  box-shadow: 0rpx 0rpx 0rpx !important;
-}
-
-/* ==================
-         导航栏
- ==================== */
-
-.nav {
-  white-space: nowrap;
-}
-
-::-webkit-scrollbar {
-  display: none;
-}
-
-.nav item {
-  height: 90rpx;
-  display: inline-block;
-  line-height: 90rpx;
-  margin: 0 10rpx;
-  padding: 0 20rpx;
-}
-
-.nav item.cur {
-  border-bottom: 4rpx solid;
-}
-
-/* ==================
-         时间轴
- ==================== */
-
-timeline {
-  display: block;
-  background: #fff;
-}
-
-timeline time {
-  width: 120rpx;
-  text-align: center;
-  padding: 20rpx 0;
-  font-size: 26rpx;
-  color: #888;
-  display: block;
-}
-
-timeline>item {
-  padding: 30rpx 30rpx 30rpx 120rpx;
-  position: relative;
-  display: block;
-  color: #ccc;
-  z-index: 0;
-}
-
-timeline>item::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 1rpx;
-  background: #ddd;
-  left: 60rpx;
-  height: 100%;
-  top: 0;
-  z-index: 8;
-}
-
-timeline>item::before {
-  font-family: "iconfont";
-  content: "\e763";
-  display: block;
-  position: absolute;
-  top: 36rpx;
-  z-index: 9;
-  background: #fff;
-  width: 50rpx;
-  height: 50rpx;
-  text-align: center;
-  border: none;
-  line-height: 50rpx;
-  left: 36rpx;
-}
-
-timeline>item[class*="icon"]::before {
-  background: #fff;
-  width: 50rpx;
-  height: 50rpx;
-  text-align: center;
-  border: none;
-  line-height: 50rpx;
-  left: 36rpx;
-}
-
-timeline>item>.content {
-  background: #f1f1f1;
-  padding: 30rpx;
-  border-radius: 6rpx;
-  display: block;
-  color: #666;
-  line-height: 1.6;
-}
-
-timeline>item>.content+.content {
-  margin-top: 20rpx;
-}
-
-/* ==================
-         聊天
- ==================== */
-
-chat {
-  display: flex;
-  flex-direction: column;
-}
-
-chat item {
-  display: flex;
-  padding: 30rpx 30rpx 70rpx;
-  position: relative;
-}
-
-chat item>avatar {
-  width: 80rpx;
-  height: 80rpx;
-}
-
-chat item>.main {
-  max-width: calc(100% - 260rpx);
-  margin: 0 40rpx;
-  display: flex;
-  align-items: center;
-}
-
-chat item>image {
-  height: 320rpx;
-}
-
-chat item>.main .content {
-  background: #fff;
-  padding: 20rpx;
-  border-radius: 6rpx;
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  color: #666;
-  font-size: 30rpx;
-  position: relative;
-  min-height: 80rpx;
-  line-height: 40rpx;
-  text-align: left;
-}
-
-chat item .date {
-  position: absolute;
-  font-size: 24rpx;
-  color: #aaa;
-  width: calc(100% - 320rpx);
-  bottom: 20rpx;
-  left: 160rpx;
-}
-
-chat item .action {
-  padding: 0 30rpx;
-  display: flex;
-  align-items: center;
-}
-
-chat item>.main .content::after {
-  content: "";
-  top: 24rpx;
-  transform: rotate(180deg);
-  position: absolute;
-  z-index: 100;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: middle;
-  border-bottom: 16rpx solid transparent;
-  border-top: 16rpx solid transparent;
-  overflow: hidden;
-  border-right-color: #fff;
-  border-left: 16rpx solid #333;
-  border-right: 0 dotted;
-  border-left-color: #fff;
-  left: -14rpx;
-  right: initial;
-}
-
-chat item.self {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-chat item.self>.main .content::after {
-  left: auto;
-  right: -14rpx;
-  border-right: 16rpx solid #fff;
-  border-left: 0 dotted;
-}
-
-chat item.self>.main .bg-green.content::after {
-  border-right-color: #39b50a;
-}
-
-chat info {
-  display: inline-block;
-  margin: 20rpx auto;
-  font-size: 24rpx;
-  padding: 8rpx 12rpx;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 6rpx;
-  color: #fff;
-  max-width: 400rpx;
-  line-height: 1.4;
-}
-
-/* ==================
-         卡片
- ==================== */
-
-card {
-  display: block;
-  overflow: hidden;
-}
-
-card > item {
-  display: block;
-  background: #fff;
-  overflow: hidden;
-  border-radius: 10rpx;
-  margin: 30rpx;
-}
-
-card > item.shadow-blur {
-  overflow: initial;
-}
-
-card.no-card > item {
-  margin: 0rpx;
-  border-radius: 0rpx;
-}
-
-card.case .image {
-  position: relative;
-}
-
-card.case .image image {
-  width: 100%;
-}
-
-card.case .image tag {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-card.case .image bar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: transparent;
-  padding: 0rpx 30rpx;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-card.case.no-card .image {
-  margin: 30rpx 30rpx 0;
-  overflow: hidden;
-  border-radius: 10rpx;
-}
-
-card.dynamic {
-  display: block;
-}
-
-card.dynamic>item {
-  display: block;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-card.dynamic>item > .text-content {
-  padding: 0 30rpx 0;
-  max-height: 6.4em;
-  overflow: hidden;
-  font-size: 30rpx;
-  margin-bottom: 20rpx;
-}
-
-card.dynamic>item .square-img {
-  width: 100%;
-  height: 200rpx;
-  border-radius: 6rpx;
-}
-
-card.dynamic>item .only-img {
-  width: 100%;
-  height: 320rpx;
-  border-radius: 6rpx;
-}
-
-/* card.dynamic>item .comment {
-  padding: 20rpx;
-  background: #f1f1f1;
-  margin: 0 30rpx 30rpx;
-  border-radius: 6rpx;
-} */
-
-card.article {
-  display: block;
-}
-
-card.article>item {
-  padding-bottom: 30rpx;
-}
-
-card.article>item .title {
-  font-size: 30rpx;
-  font-weight: 900;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #333;
-  line-height: 100rpx;
-  padding: 0 30rpx;
-}
-
-card.article>item .content {
-  display: flex;
-  padding: 0 30rpx;
-}
-
-card.article>item .content > image {
-  width: 240rpx;
-  height: 6.4em;
-  margin-right: 20rpx;
-  border-radius: 6rpx;
-}
-
-card.article>item .content .desc {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-card.article>item .content .text-content {
-  font-size: 28rpx;
-  color: #888;
-  height: 4.8em;
-  overflow: hidden;
-}
-
-/* ==================
-         表单
- ==================== */
-
-form-group {
-  background: #fff;
-  padding: 0 30rpx;
-  display: flex;
-  align-items: center;
-  min-height: 100rpx;
-  justify-content: space-between;
-}
-
-form-group + form-group {
-  border-top: 1rpx solid #eee;
-}
-
-form-group .title {
-  text-align: justify;
-  padding-right: 30rpx;
-  font-size: 30rpx;
-  position: relative;
-  height: 60rpx;
-  line-height: 60rpx;
-}
-
-form-group.top {
-  align-items: baseline;
-}
-
-form-group input {
-  flex: 1;
-  font-size: 30rpx;
-  color: #555;
-  padding-right: 20rpx;
-}
-
-form-group > icon[class*="icon-"] {
-  font-size: 36rpx;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-form-group textarea, form-group textarea textarea {
-  margin: 32rpx 0 30rpx;
-  height: 4.8em;
-  width: 100%;
-  line-height: 1.2em;
-  flex: 1;
-  font-size: 28rpx;
-  padding: 0;
-  box-sizing: content-box;
-  display: inline-block;
-  vertical-align: top;
-}
-
-form-group textarea::after {
-  content: "测试文字";
-  opacity: 0;
-}
-
-form-group .grid-square {
-  margin: 30rpx 0 0 !important;
-}
-
-form-group picker {
-  flex: 1;
-  padding-right: 40rpx;
-  overflow: hidden;
-  position: relative;
-}
-
-form-group picker .picker {
-  line-height: 100rpx;
-  font-size: 28rpx;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-  text-align: right;
-}
-
-form-group picker::after {
-  font-family: iconfont !important;
-  display: block;
-  content: "\e6a3";
-  position: absolute;
-  font-size: 34rpx;
-  color: #aaa;
-  line-height: 100rpx;
-  width: 60rpx;
-  text-align: center;
-  top: 0;
-  bottom: 0;
-  right: -20rpx;
-  margin: auto;
-}
-
-form-group textarea[disabled], form-group textarea[disabled] .placeholder {
-  color: transparent;
-}
-
-/* ==================
-         模态窗口
- ==================== */
-
-modal-box {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1110;
-  opacity: 0;
-  outline: 0;
-  text-align: center;
-  -ms-transform: scale(1.185);
-  transform: scale(1.185);
-  backface-visibility: hidden;
-  perspective: 2000rpx;
-  background: rgba(0, 0, 0, 0.6);
-  transition: all 0.6s ease-in-out 0;
-  pointer-events: none;
-}
-
-modal-box::before {
-  content: "\200B";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-modal-box.show {
-  opacity: 1;
-  transition-duration: 0.3s;
-  -ms-transform: scale(1);
-  transform: scale(1);
-  overflow-x: hidden;
-  overflow-y: auto;
-  pointer-events: auto;
-}
-
-dialog {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: auto;
-  margin-right: auto;
-  width: 680rpx;
-  max-width: 100%;
-  background: #f8f8f8;
-  border-radius: 10rpx;
-  overflow: hidden;
-}
-
-modal-box.bottom-modal::before {
-  vertical-align: bottom;
-}
-
-modal-box.bottom-modal dialog {
-  width: 100%;
-  border-radius: 0;
-}
-
-modal-box.bottom-modal {
-  margin-bottom: -1000rpx;
-}
-
-modal-box.bottom-modal.show {
-  margin-bottom: 0;
-}
-
-/* ==================
-         轮播
- ==================== */
-
-swiper.square-dot .wx-swiper-dot {
-  background: #fff;
-  opacity: 0.4;
-  width: 10rpx !important;
-  height: 10rpx !important;
-  border-radius: 20rpx !important;
-  transition: all 0.3s ease-in-out 0s !important;
-}
-
-swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
-  opacity: 1;
-  width: 30rpx !important;
-}
-
-swiper.round-dot .wx-swiper-dot {
-  /* background: #39b54a; */
-  width: 10rpx !important;
-  height: 10rpx !important;
-  top: -4rpx !important;
-  transition: all 0.3s ease-in-out 0s !important;
-  position: relative;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
-  content: "";
-  position: absolute;
-  width: 10rpx;
-  height: 10rpx;
-  top: 0rpx;
-  left: 0rpx;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background: #fff;
-  border-radius: 20rpx;
-}
-
-swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
-  width: 18rpx !important;
-  height: 18rpx !important;
-  top: 0rpx !important;
-}
-
-.screen-swiper {
-  min-height: 375rpx;
-}
-
-.screen-swiper image {
-  width: 100%;
-  display: block;
-  height: 100%;
-  margin: 0;
-}
-
-.card-swiper {
-  height: 420rpx;
-}
-
-.card-swiper swiper-item {
-  width: 610rpx !important;
-  left: 70rpx !important;
-  box-sizing: border-box;
-  padding: 40rpx 0rpx 70rpx;
-  overflow: initial !important;
-}
-
-.card-swiper swiper-item .bg-img {
-  width: 100%;
-  display: block;
-  height: 100%;
-  border-radius: 10rpx;
-  transform: scale(0.9);
-  transition: all 0.2s ease-in 0s;
-}
-
-.card-swiper swiper-item.cur .bg-img {
-  transform: none;
-  transition: all 0.2s ease-in 0s;
-}
-
-.tower-swiper {
-  height: 420rpx;
-  position: relative;
-}
-
-.tower-swiper .tower-item {
-  position: absolute;
-  width: 300rpx;
-  height: 380rpx;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  margin: auto;
-  transition: all 0.3s ease-in 0s;
-  opacity: 1;
-}
-
-.tower-swiper .tower-item.none {
-  opacity: 0;
-}
-
-.tower-swiper .tower-item .bg-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 6rpx;
-}

template/icon.wxss

@@ -27,31 +27,6 @@
     font-style: normal;
 }
 
-icon {
-    height: 1em;
-    width: 1.4em;
-    vertical-align: middle;
-    position: relative;
-}
-
-icon[class*="icon-"]::after {
-    content: "正";
-    opacity: 0;
-}
-
-icon[class*="icon-"]::before {
-    position: absolute;
-    display: block;
-    text-align: center;
-    top: 0px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1em;
-    margin: auto;
-    line-height: 1em;
-}
-
 @font-face {font-family: "iconfont";
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */