@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/ui-fireui/fui-tabs2/fui-tabs2.vue

@@ -0,0 +1,284 @@
+<template>
+  <view
+    class="fui-tabs-view"
+    :class="[isFixed ? 'fui-tabs-fixed' : 'fui-tabs-relative', unlined ? 'fui-unlined' : '']"
+    :style="{
+      height: height + 'rpx',
+      padding: `0 ${padding}rpx`,
+      background: backgroundColor,
+      top: isFixed ? top + 'px' : 'auto'
+    }"
+  >
+    <view
+      v-for="(item, index) in tabs"
+      :key="index"
+      class="fui-tabs-item"
+      :style="{ width: itemWidth, borderRight: index < tabs.length - 1 ? borderRight : '' }"
+      @tap.stop="swichTabs(index)"
+    >
+      <view
+        class="fui-tabs-title"
+        :class="{ 'fui-tabs-active': currentTab == index, 'fui-tabs-disabled': item.disabled }"
+        :style="{
+          color: currentTab == index ? selectedColor : color,
+          fontSize: size + 'rpx',
+          lineHeight: lineHeight + 'rpx',
+          fontWeight: bold && currentTab == index ? 'bold' : 'normal'
+        }"
+      >
+        {{ item.name }}
+      </view>
+    </view>
+    <view
+      class="fui-tabs-slider"
+      :style="{
+        transform: 'translateX(' + scrollLeft + 'px)',
+        width: sliderWidth + 'rpx',
+        height: sliderHeight + 'rpx',
+        borderRadius: sliderRadius,
+        bottom: bottom,
+        background: sliderBgColor,
+        marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
+      }"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTabs',
+  props: {
+    //标签页
+    tabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //rpx
+    height: {
+      type: Number,
+      default: 88
+    },
+    //rpx 只对左右padding起作用，上下为0
+    padding: {
+      type: Number,
+      default: 30
+    },
+    //背景色
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    //是否固定
+    isFixed: {
+      type: Boolean,
+      default: false
+    },
+    //px
+    top: {
+      type: Number,
+      // #ifdef APP-PLUS
+      default: 70,
+      // #endif
+      // #ifdef H5
+      default: 44,
+      // #endif
+
+      // #ifdef MP
+      default: 54
+      // #endif
+    },
+    //是否去掉底部线条
+    unlined: {
+      type: Boolean,
+      default: false
+    },
+    //当前选项卡
+    currentTab: {
+      type: Number,
+      default: 0
+    },
+    //滑块宽度
+    sliderWidth: {
+      type: Number,
+      default: 68
+    },
+    //滑块高度
+    sliderHeight: {
+      type: Number,
+      default: 6
+    },
+    //滑块背景颜色
+    sliderBgColor: {
+      type: String,
+      default: '#6468D5'
+    },
+    sliderRadius: {
+      type: String,
+      default: '50rpx'
+    },
+    //滑块bottom
+    bottom: {
+      type: String,
+      default: '0'
+    },
+    borderRight: {
+      type: String,
+      default: '0'
+    },
+    //标签页宽度
+    itemWidth: {
+      type: String,
+      default: '25%'
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    //选中后字体颜色
+    selectedColor: {
+      type: String,
+      default: '#6468D5'
+    },
+    //字体大小
+    size: {
+      type: Number,
+      default: 32
+    },
+    lineHeight: {
+      type: Number,
+      default: 32
+    },
+    //选中后 是否加粗 ，未选中则无效
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    // 滑块向左偏移位置
+    scrollRight: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    currentTab() {
+      this.checkCor();
+    },
+    tabs() {
+      this.checkCor();
+    }
+  },
+  created() {
+    setTimeout(() => {
+      // 高度自适应
+      uni.getSystemInfo({
+        success: (res) => {
+          this.winWidth = res.windowWidth;
+          this.checkCor();
+        }
+      });
+    }, 50);
+  },
+  data() {
+    return {
+      winWidth: 0,
+      scrollLeft: 0
+    };
+  },
+  methods: {
+    checkCor() {
+      let tabsNum = this.tabs.length;
+      let padding = (this.winWidth / 750) * this.padding;
+      let width = this.winWidth - padding * 2;
+      // console.log('checkCor',width,tabsNum,this.winWidth,this.sliderWidth,padding)
+      let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
+      let scrollLeft = left;
+      if (this.currentTab > 0) {
+        scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
+      }
+      this.scrollLeft = scrollLeft;
+    },
+    // 点击标题切换当前页时改变样式
+    swichTabs(index) {
+      let item = this.tabs[index];
+      if (item && item.disabled) return;
+      if (this.currentTab == index) {
+        return false;
+      } else {
+        this.$emit('change', {
+          index: Number(index)
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-tabs-view {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 995;
+}
+
+.fui-tabs-relative {
+  position: relative;
+}
+
+.fui-tabs-fixed {
+  position: fixed;
+  left: 0;
+}
+
+.fui-tabs-fixed::before,
+.fui-tabs-relative::before {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.fui-unlined::before {
+  border-bottom: 0 !important;
+}
+
+.fui-tabs-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-tabs-disabled {
+  opacity: 0.6;
+}
+
+.fui-tabs-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+
+.fui-tabs-active {
+  transition: all 0.15s ease-in-out;
+}
+
+.fui-tabs-slider {
+  position: absolute;
+  left: 0;
+  transition: all 0.15s ease-in-out;
+  z-index: 0;
+  transform: translateZ(0);
+}
+</style>

package/ui-fireui/fui-tag/fui-tag.vue

@@ -0,0 +1,374 @@
+<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>

package/ui-fireui/fui-time-axis/fui-time-axis.vue

@@ -0,0 +1,36 @@
+<template>
+  <view class="fui-timeaxis-class fui-time-axis">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTimeAxis',
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.fui-time-axis {
+  padding-left: 20px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.fui-time-axis::before {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  bottom: 0;
+  border-left: 1px solid #ddd;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+</style>