@10yun/cv-mobile-ui 0.5.50 → 0.5.52

package/ui-fireui/{fireui.css → index.css}

@@ -1,9 +1,73 @@
+/* Thor UI 基础组件 样式*/
+
+/*!
+ * =====================================================
+ * Thor UI v1.0.0 (https://www.thorui.cn/)
+ * =====================================================
+ */
+
+.up-center {
+  text-align: center;
+}
+
+.up-right {
+  text-align: right;
+}
+
+.up-col-12 {
+  width: 100%;
+}
+
+.up-col-11 {
+  width: 91.66666667%;
+}
+
+.up-col-10 {
+  width: 83.33333333%;
+}
+
+.up-col-9 {
+  width: 75%;
+}
+
+.up-col-8 {
+  width: 66.66666667%;
+}
+
+.up-col-7 {
+  width: 58.33333333%;
+}
+
+.up-col-6 {
+  width: 50%;
+}
+
+.up-col-5 {
+  width: 41.66666667%;
+}
+
+.up-col-4 {
+  width: 33.33333333%;
+}
+
+.up-col-3 {
+  width: 25%;
+}
+
+.up-col-2 {
+  width: 16.66666667%;
+}
+
+.up-col-1 {
+  width: 8.33333333%;
+}
+
 /*列表统一样式
-.fui-list-item {
+.up-list-item {
 	position: relative;
 }
 
-.fui-list-item::after {
+.up-list-item::after {
 	content: '';
 	position: absolute;
 	border-bottom: 1rpx solid #eaeef1;
@@ -14,12 +78,12 @@
 	left: 30rpx;
 }
 
-.fui-last::after {
+.up-last::after {
 	border-bottom: 0 !important;
 }
 
 /*按钮样式*/
-.fui-button-primary {
+.up-button-primary {
   width: 100%;
   height: 90rpx;
   line-height: 90rpx;
@@ -29,34 +93,34 @@
   font-size: 36rpx;
 }
 
-.fui-button-hover {
+.up-button-hover {
   color: #d5d4d9;
   background: linear-gradient(-90deg, #4a67d6, #4e77d9);
 }
 
-.fui-button-gray {
+.up-button-gray {
   background: #ededed;
   color: #999 !important;
 }
 
-.fui-button-gray_hover {
+.up-button-gray_hover {
   background: #d5d5d5 !important;
   color: #898989;
 }
 
-.fui-button-white {
+.up-button-white {
   background: #fff;
   color: #333 !important;
 }
 
-.fui-button-white_hover {
+.up-button-white_hover {
   background: #e5e5e5 !important;
   color: #2e2e2e !important;
 }
 
 /* #endif */
 
-.fui-mask {
+.up-mask {
   width: 100%;
   height: 100%;
   position: fixed;
@@ -66,13 +130,13 @@
   z-index: 999;
 }
 
-.fui-ellipsis {
+.up-ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.fui-ellipsis-2 {
+.up-ellipsis-2 {
   display: -webkit-box;
   overflow: hidden;
   white-space: normal !important;
@@ -82,142 +146,142 @@
   -webkit-box-orient: vertical;
 }
 
-.fui-opcity {
+.up-opcity {
   opacity: 0.5;
 }
 
-.fui-scale-small {
+.up-scale-small {
   transform: scale(0.9);
   transform-origin: center center;
 }
 
-.fui-height-full {
+.up-height-full {
   height: 100%;
 }
 
-.fui-width-full {
+.up-width-full {
   width: 100%;
 }
 
-.fui-ptop-zero {
+.up-ptop-zero {
   padding-top: 0;
 }
 
-.fui-pbottom-zero {
+.up-pbottom-zero {
   padding-bottom: 0;
 }
 
-.fui-pleft-zero {
+.up-pleft-zero {
   padding-left: 0;
 }
 
-.fui-pright-zero {
+.up-pright-zero {
   padding-right: 0;
 }
 
-.fui-primary {
+.up-primary {
   background-color: #5677fc !important;
   color: #fff;
 }
 
-.fui-light-primary {
+.up-light-primary {
   background-color: #5c8dff !important;
   color: #fff;
 }
 
-.fui-dark-primary {
+.up-dark-primary {
   background-color: #4a67d6 !important;
   color: #fff;
 }
 
-.fui-dLight-primary {
+.up-dLight-primary {
   background-color: #4e77d9 !important;
   color: #fff;
 }
 
-.fui-danger {
+.up-danger {
   background-color: #ed3f14 !important;
   color: #fff;
 }
 
-.fui-warning {
+.up-warning {
   background-color: #ff7900 !important;
   color: #fff;
 }
 
-.fui-blue {
+.up-blue {
   background-color: #007aff !important;
   color: #fff;
 }
 
-.fui-green {
+.up-green {
   background-color: #19be6b !important;
   color: #fff;
 }
 
-.fui-black {
+.up-black {
   background-color: #000 !important;
   color: #fff;
 }
 
-.fui-white {
+.up-white {
   background-color: #fff !important;
   color: #333 !important;
 }
 
-.fui-translucent {
+.up-translucent {
   background-color: rgba(0, 0, 0, 0.7);
 }
 
-.fui-light-black {
+.up-light-black {
   background-color: #333 !important;
 }
 
-.fui-gray {
+.up-gray {
   background-color: #80848f;
 }
 
-.fui-phcolor-gray {
+.up-phcolor-gray {
   background-color: #ccc !important;
 }
 
-.fui-divider-gray {
+.up-divider-gray {
   background-color: #eaeef1 !important;
 }
 
-.fui-btn-gray {
+.up-btn-gray {
   background-color: #ededed !important;
   color: #999 !important;
 }
 
-.fui-hover {
+.up-hover {
   background-color: #f7f7f9 !important;
 }
 
-.fui-hover-gray {
+.up-hover-gray {
   background-color: #f7f7f9 !important;
 }
 
-.fui-bg-gray {
+.up-bg-gray {
   background-color: #fafafa !important;
 }
 
-.fui-light-blue {
+.up-light-blue {
   background-color: #ecf6fd;
   color: #4dabeb !important;
 }
 
-.fui-light-brownish {
+.up-light-brownish {
   background-color: #fcebef;
   color: #8a5966 !important;
 }
 
-.fui-light-orange {
+.up-light-orange {
   background-color: #fef5eb;
   color: #faa851 !important;
 }
 
-.fui-light-green {
+.up-light-green {
   background-color: #e8f6e8;
   color: #44cf85 !important;
 }
@@ -225,75 +289,75 @@
 /* color end*/
 
 /*Button start*/
-.fui-btn-primary {
+.up-btn-primary {
   background: #5677fc !important;
   color: #fff;
 }
 
-.fui-shadow-primary {
+.up-shadow-primary {
   box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
 }
 
-.fui-btn-danger {
+.up-btn-danger {
   background: #eb0909 !important;
   color: #fff;
 }
 
-.fui-shadow-danger {
+.up-shadow-danger {
   box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
 }
 
-.fui-btn-warning {
+.up-btn-warning {
   background: #fc872d !important;
   color: #fff;
 }
 
-.fui-shadow-warning {
+.up-shadow-warning {
   box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
 }
 
-.fui-btn-green {
+.up-btn-green {
   background: #35b06a !important;
   color: #fff;
 }
 
-.fui-shadow-green {
+.up-shadow-green {
   box-shadow: 0 10rpx 14rpx 0 rgba(53, 176, 106, 0.2);
 }
 
-.fui-btn-blue {
+.up-btn-blue {
   background: #007aff !important;
   color: #fff;
 }
 
-.fui-shadow-blue {
+.up-shadow-blue {
   box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
 }
 
-.fui-btn-white {
+.up-btn-white {
   background: #fff !important;
   color: #333 !important;
 }
 
-.fui-btn-gray {
+.up-btn-gray {
   background: #bfbfbf !important;
   color: #fff !important;
 }
 
-.fui-btn-black {
+.up-btn-black {
   background: #333 !important;
   color: #fff !important;
 }
 
-.fui-shadow-gray {
+.up-shadow-gray {
   box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
 }
 
-.fui-hover-gray {
+.up-hover-gray {
   background: #f7f7f9 !important;
 }
 
-.fui-black-hover {
+.up-black-hover {
   background: #555 !important;
   color: #e5e5e5 !important;
 }
@@ -302,7 +366,7 @@
  * 宽高通过覆盖样式改变
 **/
 
-.fui-btn {
+.up-btn {
   width: 100%;
   height: 96rpx;
   line-height: 96rpx;
@@ -315,7 +379,7 @@
   overflow: visible;
 }
 
-.fui-btn-base {
+.up-btn-base {
   width: auto;
   /* #ifdef MP-ALIPAY */
   min-width: 200rpx;
@@ -325,7 +389,7 @@
   line-height: 70rpx;
 }
 
-.fui-btn-small {
+.up-btn-small {
   width: auto;
   /* #ifdef MP-ALIPAY */
   min-width: 140rpx;
@@ -335,7 +399,7 @@
   line-height: 60rpx;
 }
 
-.fui-btn::after {
+.up-btn::after {
   content: '';
   position: absolute;
   width: 200%;
@@ -349,256 +413,193 @@
   border: 0;
 }
 
-.fui-btn-white::after {
+.up-btn-white::after {
   border: 1rpx solid #bfbfbf;
 }
 
-.fui-white-hover {
+.up-white-hover {
   background: #e5e5e5 !important;
   color: #2e2e2e !important;
 }
 
-.fui-dark-disabled {
+.up-dark-disabled {
   opacity: 0.6 !important;
   color: #fafbfc !important;
 }
 
-.fui-dark-disabled-outline {
+.up-dark-disabled-outline {
   opacity: 0.5 !important;
 }
 
-.fui-gray-disabled {
+.up-gray-disabled {
   background: #f3f3f3 !important;
   color: #919191 !important;
   box-shadow: none;
 }
 
-.fui-outline-hover {
+.up-outline-hover {
   opacity: 0.5;
 }
 
-.fui-primary-hover {
+.up-primary-hover {
   background: #4a67d6 !important;
   color: #e5e5e5 !important;
 }
 
-.fui-primary-outline::after {
+.up-primary-outline::after {
   border: 1rpx solid #5677fc !important;
 }
 
-.fui-primary-outline {
+.up-primary-outline {
   color: #5677fc !important;
   background: transparent;
 }
 
-.fui-danger-hover {
+.up-danger-hover {
   background: #c80808 !important;
   color: #e5e5e5 !important;
 }
 
-.fui-danger-outline {
+.up-danger-outline {
   color: #eb0909 !important;
   background: transparent;
 }
 
-.fui-danger-outline::after {
+.up-danger-outline::after {
   border: 1rpx solid #eb0909 !important;
 }
 
-.fui-warning-hover {
+.up-warning-hover {
   background: #d67326 !important;
   color: #e5e5e5 !important;
 }
 
-.fui-warning-outline {
+.up-warning-outline {
   color: #fc872d !important;
   background: transparent;
 }
 
-.fui-warning-outline::after {
+.up-warning-outline::after {
   border: 1px solid #fc872d !important;
 }
 
-.fui-green-hover {
+.up-green-hover {
   background: #2d965a !important;
   color: #e5e5e5 !important;
 }
 
-.fui-green-outline {
+.up-green-outline {
   color: #35b06a !important;
   background: transparent;
 }
 
-.fui-green-outline::after {
+.up-green-outline::after {
   border: 1rpx solid #35b06a !important;
 }
 
-.fui-blue-hover {
+.up-blue-hover {
   background: #0062cc !important;
   color: #e5e5e5 !important;
 }
 
-.fui-blue-outline {
+.up-blue-outline {
   color: #007aff !important;
   background: transparent;
 }
 
-.fui-blue-outline::after {
+.up-blue-outline::after {
   border: 1rpx solid #007aff !important;
 }
 
 /* #ifndef APP-NVUE */
-.fui-btn-gradual {
+.up-btn-gradual {
   background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
   color: #fff !important;
 }
 
-.fui-shadow-gradual {
+.up-shadow-gradual {
   box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
 }
 
 /* #endif */
 
-.fui-gray-hover {
+.up-gray-hover {
   background: #a3a3a3 !important;
   color: #898989;
 }
 
 /* #ifndef APP-NVUE */
-.fui-gradual-hover {
+.up-gradual-hover {
   background: linear-gradient(90deg, #d74620, #cd1225) !important;
   color: #fff !important;
 }
 
 /* #endif */
 
-.fui-gray-outline {
+.up-gray-outline {
   color: #999 !important;
   background: transparent !important;
 }
 
-.fui-white-outline {
+.up-white-outline {
   color: #fff !important;
   background: transparent !important;
 }
 
-.fui-black-outline {
+.up-black-outline {
   background: transparent !important;
   color: #333 !important;
 }
 
-.fui-gray-outline::after {
+.up-gray-outline::after {
   border: 1rpx solid #ccc !important;
 }
 
-.fui-white-outline::after {
+.up-white-outline::after {
   border: 1px solid #fff !important;
 }
 
-.fui-black-outline::after {
+.up-black-outline::after {
   border: 1px solid #333 !important;
 }
 
 /*圆角 */
 
-.fui-fillet {
+.up-fillet {
   border-radius: 50rpx;
 }
 
-.fui-btn-white.fui-fillet::after {
+.up-btn-white.up-fillet::after {
   border-radius: 98rpx;
 }
 
-.fui-outline-fillet::after {
+.up-outline-fillet::after {
   border-radius: 98rpx;
 }
 
 /*平角*/
-.fui-rightAngle {
+.up-rightAngle {
   border-radius: 0;
 }
 
-.fui-btn-white.fui-rightAngle::after {
+.up-btn-white.up-rightAngle::after {
   border-radius: 0;
 }
 
-.fui-outline-rightAngle::after {
+.up-outline-rightAngle::after {
   border-radius: 0;
 }
 
 /*Button end*/
 
-/*Tag start*/
-
-.fui-tag {
-  padding: 16rpx 26rpx;
-  font-size: 28rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6rpx;
-}
-
-.fui-tag-outline {
-  position: relative;
-  background-color: none;
-  color: #5677fc;
-}
-
-.fui-tag-outline::after {
-  content: '';
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-  -webkit-transform: scale(0.5, 0.5);
-  transform: scale(0.5, 0.5);
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  left: 0;
-  top: 0;
-  border-radius: 12rpx;
-}
-
-.fui-tag-fillet {
-  border-radius: 50rpx;
-}
-
-.fui-white.fui-tag-fillet::after {
-  border-radius: 80rpx;
-}
-
-.fui-tag-outline-fillet::after {
-  border-radius: 80rpx;
-}
-
-.fui-tag-fillet-left {
-  border-radius: 50rpx 0 0 50rpx;
-}
-
-.fui-tag-fillet-right {
-  border-radius: 0 50rpx 50rpx 0;
-}
-
-.fui-tag-fillet-left.fui-tag-outline::after {
-  border-radius: 100rpx 0 0 100rpx;
-}
-
-.fui-tag-fillet-right.fui-tag-outline::after {
-  border-radius: 0 100rpx 100rpx 0;
-}
-
-/*Tag end*/
-
 /*Badge start*/
-.fui-badge-dot {
+.up-badge-dot {
   height: 16rpx;
   width: 16rpx;
   border-radius: 50%;
 }
 
-.fui-badge {
+.up-badge {
   font-size: 24rpx;
   height: 36rpx;
   min-width: 12rpx;
@@ -610,14 +611,14 @@
   z-index: 10;
 }
 
-.fui-badge-scale {
+.up-badge-scale {
   transform-origin: center center;
 }
 
 /*Badge end*/
 
 /*List start*/
-.fui-list-cell {
+.up-list-cell {
   position: relative;
   width: 100%;
   padding: 26rpx 30rpx;
@@ -625,16 +626,16 @@
   box-sizing: border-box;
 }
 
-.fui-list-radius {
+.up-list-radius {
   border-radius: 6rpx;
   overflow: hidden;
 }
 
-.fui-cell-hover {
+.up-cell-hover {
   background-color: #f1f1f1 !important;
 }
 
-.fui-list-cell::after {
+.up-list-cell::after {
   content: '';
   position: absolute;
   border-bottom: 1rpx solid #eaeef1;
@@ -646,19 +647,19 @@
   left: 0;
 }
 
-.fui-line-left::after {
+.up-line-left::after {
   left: 30rpx !important;
 }
 
-.fui-line-right::after {
+.up-line-right::after {
   right: 30rpx !important;
 }
 
-.fui-cell-unlined::after {
+.up-cell-unlined::after {
   border-bottom: 0 !important;
 }
 
-.fui-cell-arrow::before {
+.up-cell-arrow::before {
   content: ' ';
   height: 10px;
   width: 10px;
@@ -673,34 +674,34 @@
   right: 30rpx;
 }
 
-.fui-arrow-right::before {
+.up-arrow-right::before {
   right: 0 !important;
 }
 
-.fui-arrow-gray::before {
+.up-arrow-gray::before {
   border-color: #666666 !important;
 }
 
-.fui-arrow-white::before {
+.up-arrow-white::before {
   border-color: #ffffff !important;
 }
 
-.fui-arrow-warning::before {
+.up-arrow-warning::before {
   border-color: #ff7900 !important;
 }
 
-.fui-arrow-success::before {
+.up-arrow-success::before {
   border-color: #19be6b !important;
 }
 
-.fui-arrow-danger::before {
+.up-arrow-danger::before {
   border-color: #eb0909 !important;
 }
 
 /*List end*/
 
 /*Card start*/
-.fui-card {
+.up-card {
   margin: 0 30rpx;
   font-size: 28rpx;
   background-color: #fff;
@@ -710,21 +711,21 @@
   overflow: hidden;
 }
 
-.fui-card-full {
+.up-card-full {
   margin: 0 !important;
   border-radius: 0 !important;
 }
 
-.fui-card-full::after {
+.up-card-full::after {
   border-radius: 0 !important;
 }
 
-.fui-card-border {
+.up-card-border {
   position: relative;
   box-shadow: none !important;
 }
 
-.fui-card-border::after {
+.up-card-border::after {
   content: ' ';
   position: absolute;
   height: 200%;
@@ -741,7 +742,7 @@
   pointer-events: none;
 }
 
-.fui-card-header {
+.up-card-header {
   width: 100%;
   padding: 20rpx;
   display: flex;
@@ -754,7 +755,7 @@
   border-top-right-radius: 10rpx;
 }
 
-.fui-card-header::after {
+.up-card-header::after {
   content: '';
   position: absolute;
   border-bottom: 1rpx solid #eaeef1;
@@ -766,11 +767,11 @@
   pointer-events: none;
 }
 
-.fui-header-line::after {
+.up-header-line::after {
   border-bottom: 0 !important;
 }
 
-.fui-header-thumb {
+.up-header-thumb {
   height: 60rpx;
   width: 60rpx;
   vertical-align: middle;
@@ -778,11 +779,11 @@
   border-radius: 6rpx;
 }
 
-.fui-thumb-circle {
+.up-thumb-circle {
   border-radius: 50% !important;
 }
 
-.fui-header-title {
+.up-header-title {
   display: inline-block;
   font-size: 30rpx;
   color: #7a7a7a;
@@ -793,18 +794,18 @@
   text-overflow: ellipsis;
 }
 
-.fui-header-right {
+.up-header-right {
   font-size: 24rpx;
   color: #b2b2b2;
 }
 
-.fui-card-body {
+.up-card-body {
   font-size: 32rpx;
   color: #262b3a;
   box-sizing: border-box;
 }
 
-.fui-card-footer {
+.up-card-footer {
   font-size: 28rpx;
   color: #596d96;
   border-bottom-left-radius: 10rpx;
@@ -815,13 +816,13 @@
 /*Card end*/
 
 /*Grid start*/
-.fui-grids {
+.up-grids {
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.fui-grids::after {
+.up-grids::after {
   content: ' ';
   position: absolute;
   left: 0;
@@ -835,57 +836,56 @@
   transform: scaleY(0.5);
 }
 
-.fui-border-top::after {
+.up-border-top::after {
   border-top: 0 !important;
 }
 
-.fui-grid {
+.up-grid {
   position: relative;
-  padding: 12.5rpx 6.25rpx;
+  padding: 40rpx 20rpx;
   box-sizing: border-box;
   background: #fff;
-  float: left;
 }
 
-.fui-grid-2 {
+.up-grid-2 {
   width: 50%;
 }
 
-.fui-grid-3 {
+.up-grid-3 {
   width: 33.333333333%;
 }
 
-.fui-grid-4 {
+.up-grid-4 {
   width: 25%;
   padding: 30rpx 20rpx !important;
 }
 
-.fui-grid-5 {
+.up-grid-5 {
   width: 20%;
   padding: 20rpx !important;
 }
 
-.fui-grid-2:nth-of-type(2n)::before {
+.up-grid-2:nth-of-type(2n)::before {
   width: 0;
   border-right: 0;
 }
 
-.fui-grid-3:nth-of-type(3n)::before {
+.up-grid-3:nth-of-type(3n)::before {
   width: 0;
   border-right: 0;
 }
 
-.fui-grid-4:nth-of-type(4n)::before {
+.up-grid-4:nth-of-type(4n)::before {
   width: 0;
   border-right: 0;
 }
 
-.fui-grid-5:nth-of-type(5n)::before {
+.up-grid-5:nth-of-type(5n)::before {
   width: 0;
   border-right: 0;
 }
 
-.fui-grid::before {
+.up-grid::before {
   content: ' ';
   position: absolute;
   right: 0;
@@ -899,7 +899,7 @@
   transform: scaleX(0.5);
 }
 
-.fui-grid::after {
+.up-grid::after {
   content: ' ';
   position: absolute;
   left: 0;
@@ -913,26 +913,53 @@
   transform: scaleY(0.5);
 }
 
-.fui-grid-bottom::after {
+.up-grid-bottom::after {
   height: 0 !important;
   border-bottom: 0 !important;
 }
 
-.fui-grid-bg {
+.up-grid-bg {
   position: relative;
   padding: 0;
   width: 100%;
   box-sizing: border-box;
 }
 
-.fui-item-hover {
+.up-grid-icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin: 0 auto;
+}
+
+.up-grid-icon image {
+  display: block;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.up-grid-icon + .up-grid-label {
+  margin-top: 10rpx;
+}
+
+.up-grid-label {
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  color: #333;
+  font-size: 28rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.up-item-hover {
   background-color: #f7f7f9 !important;
 }
 
 /*Grid end*/
 
 /*Loading start*/
-.fui-loading-init {
+.up-loading-init {
   min-width: 200rpx;
   min-height: 200rpx;
   max-width: 500rpx;
@@ -951,7 +978,7 @@
   border-radius: 10rpx;
 }
 
-.fui-loading-center {
+.up-loading-center {
   width: 50rpx;
   height: 50rpx;
   border: 3px solid #fff;
@@ -964,7 +991,7 @@
   margin-bottom: 36rpx;
 }
 
-.fui-loadmore-tips {
+.up-loadmore-tips {
   text-align: center;
   padding: 0 20rpx;
   box-sizing: border-box;
@@ -990,7 +1017,7 @@
   }
 }
 
-.fui-loadmore {
+.up-loadmore {
   width: 48%;
   margin: 1.5em auto;
   line-height: 1.5em;
@@ -998,7 +1025,7 @@
   text-align: center;
 }
 
-.fui-loading-1 {
+.up-loading-1 {
   margin: 0 5px;
   width: 20px;
   height: 20px;
@@ -1036,12 +1063,12 @@
   }
 }
 
-.fui-loadmore-tips {
+.up-loadmore-tips {
   display: inline-block;
   vertical-align: middle;
 }
 
-.fui-loading-2 {
+.up-loading-2 {
   width: 28rpx;
   height: 28rpx;
   border: 1px solid #8f8d8e;
@@ -1073,7 +1100,7 @@
   }
 }
 
-.fui-loading-3 {
+.up-loading-3 {
   display: inline-block;
   margin: 0 6px;
   vertical-align: middle;
@@ -1083,26 +1110,26 @@
   border-radius: 50%;
   border: 2px solid;
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
-  animation: fui-rotate 0.7s linear infinite;
+  animation: up-rotate 0.7s linear infinite;
 }
 
-.fui-loading-3.fui-loading-primary {
+.up-loading-3.up-loading-primary {
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
 }
 
-.fui-loading-3.fui-loading-green {
+.up-loading-3.up-loading-green {
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
 }
 
-.fui-loading-3.fui-loading-orange {
+.up-loading-3.up-loading-orange {
   border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
 }
 
-.fui-loading-3.fui-loading-red {
+.up-loading-3.up-loading-red {
   border-color: #ededed #ededed #ededed #ed3f14;
 }
 
-@-webkit-keyframes fui-rotate {
+@-webkit-keyframes up-rotate {
   0% {
     transform: rotate(0);
   }
@@ -1112,7 +1139,7 @@
   }
 }
 
-@keyframes fui-rotate {
+@keyframes up-rotate {
   0% {
     transform: rotate(0);
   }
@@ -1122,7 +1149,7 @@
   }
 }
 
-.fui-loadmore-none {
+.up-loadmore-none {
   width: 50%;
   margin: 1.5em auto;
   line-height: 1.5em;
@@ -1131,7 +1158,7 @@
   justify-content: center;
 }
 
-.fui-nomore {
+.up-nomore {
   width: 100%;
   height: 100%;
   position: relative;
@@ -1141,7 +1168,7 @@
   padding-bottom: 6rpx;
 }
 
-.fui-nomore::before {
+.up-nomore::before {
   content: ' ';
   position: absolute;
   border-bottom: 1rpx solid #e5e5e5;
@@ -1152,7 +1179,7 @@
   left: 0;
 }
 
-.fui-nomore-text {
+.up-nomore-text {
   color: #999;
   font-size: 24rpx;
   text-align: center;
@@ -1163,7 +1190,7 @@
   z-index: 1;
 }
 
-.fui-nomore-dot {
+.up-nomore-dot {
   position: relative;
   text-align: center;
   -webkit-display: flex;
@@ -1174,7 +1201,7 @@
   padding-bottom: 6rpx;
 }
 
-.fui-nomore-dot::before {
+.up-nomore-dot::before {
   content: '';
   position: absolute;
   border-bottom: 1rpx solid #e5e5e5;
@@ -1184,7 +1211,7 @@
   top: 18rpx;
 }
 
-.fui-dot-text {
+.up-dot-text {
   position: relative;
   color: #e5e5e5;
   font-size: 10px;
@@ -1202,7 +1229,7 @@
 /*Loading end*/
 
 /*Footer start*/
-.fui-footer {
+.up-footer {
   width: 100%;
   overflow: hidden;
   padding: 30rpx 24rpx;
@@ -1211,7 +1238,7 @@
   color: #a7a7a7;
 }
 
-.fui-fixed {
+.up-fixed {
   position: fixed;
   z-index: 9999;
   /* #ifdef H5 */
@@ -1222,7 +1249,7 @@
   /* #endif */
 }
 
-.fui-footer-link {
+.up-footer-link {
   color: #596d96;
   display: flex;
   align-items: center;
@@ -1230,13 +1257,13 @@
   font-size: 28rpx;
 }
 
-.fui-link {
+.up-link {
   position: relative;
   padding: 0 18rpx;
   line-height: 1;
 }
 
-.fui-link::before {
+.up-link::before {
   content: ' ';
   position: absolute;
   right: 0;
@@ -1250,15 +1277,15 @@
   transform: scaleX(0.5);
 }
 
-.fui-link:last-child::before {
+.up-link:last-child::before {
   border-right: 0 !important;
 }
 
-.fui-link-hover {
+.up-link-hover {
   opacity: 0.5;
 }
 
-.fui-footer-copyright {
+.up-footer-copyright {
   font-size: 24rpx;
   color: #a7a7a7;
   line-height: 1;
@@ -1271,29 +1298,29 @@
 /*layout start*/
 
 /*形状*/
-.fui-triangle {
+.up-triangle {
   border: 16rpx solid;
   width: 0;
   height: 0;
 }
 
-.fui-triangle-left {
+.up-triangle-left {
   border-color: transparent #5c8dff transparent transparent;
 }
 
-.fui-triangle-right {
+.up-triangle-right {
   border-color: transparent transparent transparent #5c8dff;
 }
 
-.fui-triangle-top {
+.up-triangle-top {
   border-color: transparent transparent #5c8dff transparent;
 }
 
-.fui-triangle-bottom {
+.up-triangle-bottom {
   border-color: #5c8dff transparent transparent transparent;
 }
 
-.fui-parallelogram {
+.up-parallelogram {
   width: 100rpx;
   height: 50rpx;
   transform: skew(-10deg);
@@ -1301,41 +1328,41 @@
   margin-left: 10rpx;
 }
 
-.fui-crescent {
+.up-crescent {
   width: 60rpx;
   height: 60rpx;
   border-radius: 50%;
   box-shadow: 12rpx 12rpx 0 0 yellowgreen;
 }
 
-.fui-input {
+.up-input {
   flex: 1;
   font-size: 32rpx;
   overflow: visible;
 }
 
-.fui-phcolor {
+.up-phcolor {
   color: #ccc;
   font-size: 32rpx;
   overflow: visible;
 }
 
-.fui-text-left {
+.up-text-left {
   text-align: left;
 }
 
-.fui-text-right {
+.up-text-right {
   text-align: right;
 }
 
 /*上传*/
-.fui-upload-box {
+.up-upload-box {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
 
-.fui-upload-item {
+.up-upload-item {
   width: 220rpx;
   height: 220rpx;
   position: relative;
@@ -1343,17 +1370,17 @@
   margin-bottom: 20rpx;
 }
 
-.fui-upload-item:nth-of-type(3n) {
+.up-upload-item:nth-of-type(3n) {
   margin-right: 0;
 }
 
-.fui-upload-img {
+.up-upload-img {
   width: 220rpx;
   height: 220rpx;
   display: block;
 }
 
-.fui-upload-del {
+.up-upload-del {
   position: absolute;
   right: -18rpx;
   top: -18rpx;
@@ -1362,7 +1389,7 @@
   justify-content: center;
 }
 
-.fui-upload-add {
+.up-upload-add {
   width: 220rpx;
   height: 220rpx;
   font-size: 68rpx;
@@ -1376,7 +1403,7 @@
 }
 
 /* 操作条*/
-.fui-operation {
+.up-operation {
   width: 100%;
   height: 100rpx;
   box-sizing: border-box;
@@ -1388,7 +1415,7 @@
   justify-content: space-between;
 }
 
-.fui-operation::before {
+.up-operation::before {
   content: '';
   position: absolute;
   top: 0px;
@@ -1399,12 +1426,12 @@
   transform: scaleY(0.5);
 }
 
-.fui-operation-left {
+.up-operation-left {
   display: flex;
   align-items: center;
 }
 
-.fui-operation-item {
+.up-operation-item {
   flex: 1;
   display: flex;
   align-items: center;
@@ -1413,23 +1440,23 @@
   position: relative;
 }
 
-.fui-operation-text {
+.up-operation-text {
   font-size: 22rpx;
   color: #333;
 }
 
-.fui-operation-right {
+.up-operation-right {
   flex: 1;
   height: 100rpx;
   box-sizing: border-box;
   padding-top: 0;
 }
 
-.fui-relative {
+.up-relative {
   position: relative;
 }
 
-.fui-btn-comment {
+.up-btn-comment {
   height: 64rpx;
   width: 84%;
   background: #ededed;
@@ -1443,3 +1470,14 @@
   padding-top: 0;
   margin-left: 30rpx;
 }
+
+.up-input-box {
+  width: 78%;
+  justify-content: flex-start;
+}
+
+.up-voice-icon {
+  margin-left: 12rpx;
+  margin-right: 12rpx;
+}
+/* custom end*/