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

package/ui-fireui/components/{fui-tag/fui-tag.vue → u-tag/u-tag.vue}

@@ -1,374 +1,362 @@
-<template>
-  <view
-    class="fui-tag"
-    :hover-class="hover ? 'fui-tag-opcity' : ''"
-    :hover-stay-time="150"
-    :class="[
-      originLeft ? 'fui-origin-left' : '',
-      originRight ? 'fui-origin-right' : '',
-      getClassName(shape, plain),
-      getTypeClass(type, plain)
-    ]"
-    :style="{
-      transform: `scale(${scaleMultiple})`,
-      padding: padding,
-      margin: margin,
-      fontSize: size,
-      lineHeight: size,
-      width: width
-    }"
-    @tap="handleClick"
-  >
-    <slot></slot>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'fuiTag',
-  props: {
-    type: {
-      type: String,
-      default: 'primary'
-    },
-    //padding
-    padding: {
-      type: String,
-      default: '16rpx 26rpx'
-    },
-    margin: {
-      type: String,
-      default: '0'
-    },
-    //文字大小 rpx
-    size: {
-      type: String,
-      default: '28rpx'
-    },
-    width: {
-      type: String,
-      default: 'auto'
-    },
-    // circle, square，circleLeft，circleRight
-    shape: {
-      type: String,
-      default: 'square'
-    },
-    //是否空心
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    //点击效果
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    //缩放倍数
-    scaleMultiple: {
-      type: Number,
-      default: 1
-    },
-    originLeft: {
-      type: Boolean,
-      default: false
-    },
-    originRight: {
-      type: Boolean,
-      default: false
-    },
-    index: {
-      type: Number,
-      default: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.$emit('click', { index: this.index });
-    },
-    getTypeClass(type, plain) {
-      return plain ? 'fui-' + type + '-outline' : 'fui-' + type;
-    },
-    getClassName(shape, plain) {
-      //circle, square，circleLeft，circleRight
-      var className = plain ? 'fui-tag-outline ' : '';
-      if (shape != 'square') {
-        if (shape == 'circle') {
-          className = className + (plain ? 'fui-tag-outline-fillet' : 'fui-tag-fillet');
-        } else if (shape == 'circleLeft') {
-          className = className + 'fui-tag-fillet-left';
-        } else if (shape == 'circleRight') {
-          className = className + 'fui-tag-fillet-right';
-        }
-      }
-      return className;
-    }
-  }
-};
-</script>
-
-<style scoped>
-/* color start*/
-
-.fui-primary {
-  background-color: #5677fc !important;
-  color: #fff;
-}
-
-.fui-light-primary {
-  background-color: #5c8dff !important;
-  color: #fff;
-}
-
-.fui-dark-primary {
-  background-color: #4a67d6 !important;
-  color: #fff;
-}
-
-.fui-dLight-primary {
-  background-color: #4e77d9 !important;
-  color: #fff;
-}
-
-.fui-danger {
-  background-color: #ed3f14 !important;
-  color: #fff;
-}
-
-.fui-red {
-  background-color: #ff201f !important;
-  color: #fff;
-}
-
-.fui-warning {
-  background-color: #ff7900 !important;
-  color: #fff;
-}
-
-.fui-green {
-  background-color: #19be6b !important;
-  color: #fff;
-}
-
-.fui-high-green {
-  background-color: #52dcae !important;
-  color: #52dcae;
-}
-
-.fui-black {
-  background-color: #000 !important;
-  color: #fff;
-}
-
-.fui-white {
-  background-color: #fff !important;
-  color: #333 !important;
-}
-
-.fui-translucent {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.fui-light-black {
-  background-color: #333 !important;
-}
-
-.fui-gray {
-  background-color: #ededed !important;
-}
-
-.fui-phcolor-gray {
-  background-color: #ccc !important;
-}
-
-.fui-divider-gray {
-  background-color: #eaeef1 !important;
-}
-
-.fui-btn-gray {
-  background-color: #ededed !important;
-  color: #999 !important;
-}
-
-.fui-hover-gray {
-  background-color: #f7f7f9 !important;
-}
-
-.fui-bg-gray {
-  background-color: #fafafa !important;
-}
-
-.fui-light-blue {
-  background-color: #ecf6fd;
-  color: #4dabeb !important;
-}
-
-.fui-light-brownish {
-  background-color: rgb(201, 78, 78, 0.2);
-  color: #c94e4e !important;
-}
-
-.fui-light-orange {
-  background-color: #fef5eb;
-  color: #faa851 !important;
-}
-
-.fui-light-green {
-  background-color: rgb(43, 161, 133, 0.1);
-  color: #2ba185 !important;
-}
-
-.fui-primary-outline::after {
-  border: 1px solid #5677fc !important;
-}
-
-.fui-primary-outline {
-  color: #5677fc !important;
-  background-color: none;
-}
-
-.fui-danger-outline {
-  color: #ed3f14 !important;
-  background-color: none;
-}
-
-.fui-danger-outline::after {
-  border: 1px solid #ed3f14 !important;
-}
-
-.fui-red-outline {
-  color: #ff201f !important;
-  background-color: none;
-}
-
-.fui-red-outline::after {
-  border: 1px solid #ff201f !important;
-}
-
-.fui-warning-outline {
-  color: #ff7900 !important;
-  background-color: none;
-}
-
-.fui-warning-outline::after {
-  border: 1px solid #ff7900 !important;
-}
-
-.fui-green-outline {
-  color: #44cf85 !important;
-  background-color: none;
-}
-
-.fui-green-outline::after {
-  border: 1px solid #44cf85 !important;
-}
-
-.fui-high-green-outline {
-  color: #52dcae !important;
-  background-color: none;
-}
-
-.fui-high-green-outline::after {
-  border: 1px solid #52dcae !important;
-}
-
-.fui-gray-outline {
-  color: #999 !important;
-  background-color: none;
-}
-
-.fui-gray-outline::after {
-  border: 1px solid #ccc !important;
-}
-
-.fui-black-outline {
-  color: #333 !important;
-  background-color: none;
-}
-
-.fui-black-outline::after {
-  border: 1px solid #333 !important;
-}
-
-.fui-white-outline {
-  color: #fff !important;
-  background-color: none;
-}
-
-.fui-white-outline::after {
-  border: 1px solid #fff !important;
-}
-
-/* color end*/
-
-/* tag start*/
-
-.fui-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6rpx;
-  flex-shrink: 0;
-}
-
-.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*/
-.fui-origin-left {
-  transform-origin: 0 center;
-}
-.fui-origin-right {
-  transform-origin: 100% center;
-}
-.fui-tag-opcity {
-  opacity: 0.5;
-}
-</style>
+<template>
+  <view
+    class="up-tag"
+    :hover-class="hover ? 'up-tag-opcity' : ''"
+    :hover-stay-time="150"
+    :class="[
+      originLeft ? 'up-origin-left' : '',
+      originRight ? 'up-origin-right' : '',
+      getClassName(shape, plain),
+      getTypeClass(type, plain)
+    ]"
+    :style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTag',
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    //padding
+    padding: {
+      type: String,
+      default: '16rpx 26rpx'
+    },
+    margin: {
+      type: String,
+      default: '0'
+    },
+    //文字大小 rpx
+    size: {
+      type: String,
+      default: '28rpx'
+    },
+    // circle, square，circleLeft，circleRight
+    shape: {
+      type: String,
+      default: 'square'
+    },
+    //是否空心
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    //点击效果
+    hover: {
+      type: Boolean,
+      default: false
+    },
+    //缩放倍数
+    scaleMultiple: {
+      type: Number,
+      default: 1
+    },
+    originLeft: {
+      type: Boolean,
+      default: false
+    },
+    originRight: {
+      type: Boolean,
+      default: false
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', { index: this.index });
+    },
+    getTypeClass(type, plain) {
+      return plain ? 'up-' + type + '-outline' : 'up-' + type;
+    },
+    getClassName(shape, plain) {
+      //circle, square，circleLeft，circleRight
+      var className = plain ? 'up-tag-outline ' : '';
+      if (shape != 'square') {
+        if (shape == 'circle') {
+          className = className + (plain ? 'up-tag-outline-fillet' : 'up-tag-fillet');
+        } else if (shape == 'circleLeft') {
+          className = className + 'up-tag-fillet-left';
+        } else if (shape == 'circleRight') {
+          className = className + 'up-tag-fillet-right';
+        }
+      }
+      return className;
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* color start*/
+
+.up-primary {
+  background-color: #5677fc !important;
+  color: #fff;
+}
+
+.up-light-primary {
+  background-color: #5c8dff !important;
+  color: #fff;
+}
+
+.up-dark-primary {
+  background-color: #4a67d6 !important;
+  color: #fff;
+}
+
+.up-dLight-primary {
+  background-color: #4e77d9 !important;
+  color: #fff;
+}
+
+.up-danger {
+  background-color: #ed3f14 !important;
+  color: #fff;
+}
+
+.up-red {
+  background-color: #ff201f !important;
+  color: #fff;
+}
+
+.up-warning {
+  background-color: #ff7900 !important;
+  color: #fff;
+}
+
+.up-green {
+  background-color: #19be6b !important;
+  color: #fff;
+}
+
+.up-high-green {
+  background-color: #52dcae !important;
+  color: #52dcae;
+}
+
+.up-black {
+  background-color: #000 !important;
+  color: #fff;
+}
+
+.up-white {
+  background-color: #fff !important;
+  color: #333 !important;
+}
+
+.up-translucent {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.up-light-black {
+  background-color: #333 !important;
+}
+
+.up-gray {
+  background-color: #ededed !important;
+}
+
+.up-phcolor-gray {
+  background-color: #ccc !important;
+}
+
+.up-divider-gray {
+  background-color: #eaeef1 !important;
+}
+
+.up-btn-gray {
+  background-color: #ededed !important;
+  color: #999 !important;
+}
+
+.up-hover-gray {
+  background-color: #f7f7f9 !important;
+}
+
+.up-bg-gray {
+  background-color: #fafafa !important;
+}
+
+.up-light-blue {
+  background-color: #ecf6fd;
+  color: #4dabeb !important;
+}
+
+.up-light-brownish {
+  background-color: #fcebef;
+  color: #8a5966 !important;
+}
+
+.up-light-orange {
+  background-color: #fef5eb;
+  color: #faa851 !important;
+}
+
+.up-light-green {
+  background-color: #e8f6e8;
+  color: #44cf85 !important;
+}
+
+.up-primary-outline::after {
+  border: 1px solid #5677fc !important;
+}
+
+.up-primary-outline {
+  color: #5677fc !important;
+  background-color: none;
+}
+
+.up-danger-outline {
+  color: #ed3f14 !important;
+  background-color: none;
+}
+
+.up-danger-outline::after {
+  border: 1px solid #ed3f14 !important;
+}
+
+.up-red-outline {
+  color: #ff201f !important;
+  background-color: none;
+}
+
+.up-red-outline::after {
+  border: 1px solid #ff201f !important;
+}
+
+.up-warning-outline {
+  color: #ff7900 !important;
+  background-color: none;
+}
+
+.up-warning-outline::after {
+  border: 1px solid #ff7900 !important;
+}
+
+.up-green-outline {
+  color: #44cf85 !important;
+  background-color: none;
+}
+
+.up-green-outline::after {
+  border: 1px solid #44cf85 !important;
+}
+
+.up-high-green-outline {
+  color: #52dcae !important;
+  background-color: none;
+}
+
+.up-high-green-outline::after {
+  border: 1px solid #52dcae !important;
+}
+
+.up-gray-outline {
+  color: #999 !important;
+  background-color: none;
+}
+
+.up-gray-outline::after {
+  border: 1px solid #ccc !important;
+}
+
+.up-black-outline {
+  color: #333 !important;
+  background-color: none;
+}
+
+.up-black-outline::after {
+  border: 1px solid #333 !important;
+}
+
+.up-white-outline {
+  color: #fff !important;
+  background-color: none;
+}
+
+.up-white-outline::after {
+  border: 1px solid #fff !important;
+}
+
+/* color end*/
+
+/* tag start*/
+
+.up-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6rpx;
+}
+
+.up-tag-outline {
+  position: relative;
+  background-color: none;
+  color: #5677fc;
+}
+
+.up-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;
+}
+
+.up-tag-fillet {
+  border-radius: 50rpx;
+}
+
+.up-white.up-tag-fillet::after {
+  border-radius: 80rpx;
+}
+
+.up-tag-outline-fillet::after {
+  border-radius: 80rpx;
+}
+
+.up-tag-fillet-left {
+  border-radius: 50rpx 0 0 50rpx;
+}
+
+.up-tag-fillet-right {
+  border-radius: 0 50rpx 50rpx 0;
+}
+
+.up-tag-fillet-left.up-tag-outline::after {
+  border-radius: 100rpx 0 0 100rpx;
+}
+
+.up-tag-fillet-right.up-tag-outline::after {
+  border-radius: 0 100rpx 100rpx 0;
+}
+
+/* tag end*/
+.up-origin-left {
+  transform-origin: 0 center;
+}
+.up-origin-right {
+  transform-origin: 100% center;
+}
+.up-tag-opcity {
+  opacity: 0.5;
+}
+</style>