init

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/hooks.js

@@ -0,0 +1,106 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__utils_common = require("../_utils/common.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__hooks_useTouch = require("../_hooks/useTouch.js");
+function useTabContentTouch(props, tabMethods, uni, useRect) {
+  const tabsContentRef = common_vendor.ref();
+  const tabsContentID = `tabsContentRef-${uni_modules_nutuiUni_components__utils_common.getRandomId()}`;
+  const tabsContentRefRect = common_vendor.ref({ width: 0, height: 0 });
+  const initUniWidth = async () => {
+    var _a, _b;
+    if (uni) {
+      const rect = await useRect(tabsContentID, uni);
+      tabsContentRefRect.value.width = rect.width || 0;
+      tabsContentRefRect.value.height = rect.height || 0;
+    } else {
+      tabsContentRefRect.value.width = ((_a = tabsContentRef.value) == null ? void 0 : _a.clientWidth) || 0;
+      tabsContentRefRect.value.height = ((_b = tabsContentRef.value) == null ? void 0 : _b.clientHeight) || 0;
+    }
+  };
+  common_vendor.onMounted(() => {
+    setTimeout(() => {
+      initUniWidth();
+    }, 100);
+  });
+  const touchState = common_vendor.reactive({
+    offset: 0,
+    moving: false
+  });
+  const touch = uni_modules_nutuiUni_components__hooks_useTouch.useTouch();
+  let position = "";
+  const setoffset = (deltaX, deltaY) => {
+    var _a;
+    let offset = deltaX;
+    if (props.direction === "horizontal") {
+      position = deltaX > 0 ? "right" : "left";
+      offset = Math.abs(offset) / tabsContentRefRect.value.width * 100;
+    } else {
+      position = deltaY > 0 ? "bottom" : "top";
+      offset = deltaY;
+      offset = Math.abs(offset) / ((_a = tabsContentRefRect.value) == null ? void 0 : _a.height) * 100;
+    }
+    if (offset > 85)
+      offset = 85;
+    switch (position) {
+      case "left":
+      case "top":
+        if (tabMethods.isEnd()) {
+          offset = 0;
+          touchState.moving = false;
+        }
+        break;
+      case "right":
+      case "bottom":
+        offset = -offset;
+        if (tabMethods.isBegin()) {
+          offset = 0;
+          touchState.moving = false;
+        }
+        break;
+    }
+    touchState.offset = offset;
+  };
+  const touchMethods = {
+    onTouchStart(event) {
+      if (!props.swipeable)
+        return;
+      touch.start(event);
+    },
+    onTouchMove(event) {
+      if (!props.swipeable)
+        return;
+      touch.move(event);
+      touchState.moving = true;
+      setoffset(touch.deltaX.value, touch.deltaY.value);
+      if (props.direction === "horizontal" && touch.isHorizontal()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (props.direction === "vertical" && touch.isVertical()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    onTouchEnd() {
+      if (touchState.moving) {
+        touchState.moving = false;
+        switch (position) {
+          case "left":
+          case "top":
+            if (touchState.offset > 35)
+              tabMethods.next();
+            break;
+          case "right":
+          case "bottom":
+            if (touchState.offset < -35)
+              tabMethods.prev();
+            break;
+        }
+      }
+    }
+  };
+  return { touchMethods, touchState, tabsContentRef, tabsContentID };
+}
+exports.useTabContentTouch = useTabContentTouch;
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/tabs/hooks.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/index.js

@@ -0,0 +1,79 @@
+"use strict";
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__utils_is = require("../_utils/is.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const TAB_KEY = Symbol("tabs");
+const tabsProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 绑定当前选中标签的标识符
+   */
+  modelValue: uni_modules_nutuiUni_components__utils_props.makeNumericProp(0),
+  /**
+   * @description 标签选中色
+   */
+  customColor: String,
+  /**
+   * @description 使用横纵方向,可选值`horizontal`、`vertical`
+   */
+  direction: uni_modules_nutuiUni_components__utils_props.makeStringProp("horizontal"),
+  /**
+   * @description 标签栏字体尺寸大小,可选值`large` `normal` `small`
+   */
+  size: uni_modules_nutuiUni_components__utils_props.makeStringProp("normal"),
+  /**
+   * @description 选中底部展示样式,可选值 `line`、`smile`
+   */
+  type: uni_modules_nutuiUni_components__utils_props.makeStringProp("line"),
+  /**
+   * @description 标签栏是否可以滚动
+   */
+  titleScroll: Boolean,
+  /**
+   * @description 是否省略过长的标题文字
+   */
+  ellipsis: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 是否开启手势左右滑动切换
+   */
+  swipeable: Boolean,
+  /**
+   * @description 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化,使用此属性时必须设置nut-tabs的`pane-key`
+   */
+  autoHeight: Boolean,
+  /**
+   * @description 标签栏背景颜色
+   */
+  background: String,
+  /**
+   * @description 切换动画时长，单位 ms。0 代表无动画，此时必须设置 pane-key
+   */
+  animatedTime: uni_modules_nutuiUni_components__utils_props.makeNumericProp(300),
+  /**
+   * @description 标签间隙
+   */
+  titleGutter: uni_modules_nutuiUni_components__utils_props.makeNumericProp(0),
+  /**
+   * @description 横轴方向的标题对齐方式，可选值 left、center
+   */
+  align: uni_modules_nutuiUni_components__utils_props.makeStringProp("center")
+};
+const tabsEmits = {
+  [uni_modules_nutuiUni_components__constants_event.CLICK_EVENT]: (val) => val instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (val) => val instanceof Object,
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (val) => uni_modules_nutuiUni_components__utils_is.isString(val)
+};
+class Title {
+  constructor() {
+    this.title = "";
+    this.paneKey = "";
+    this.disabled = false;
+  }
+}
+exports.TAB_KEY = TAB_KEY;
+exports.Title = Title;
+exports.tabsEmits = tabsEmits;
+exports.tabsProps = tabsProps;
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/tabs/index.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/tabs.js

@@ -0,0 +1,322 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+const uni_modules_nutuiUni_components__hooks_useProvide = require("../_hooks/useProvide.js");
+const uni_modules_nutuiUni_components__hooks_useRect = require("../_hooks/useRect.js");
+const uni_modules_nutuiUni_components__hooks_useSelectorQuery = require("../_hooks/useSelectorQuery.js");
+const uni_modules_nutuiUni_components__utils_common = require("../_utils/common.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_pxCheck = require("../_utils/pxCheck.js");
+const uni_modules_nutuiUni_components__utils_raf = require("../_utils/raf.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+const uni_modules_nutuiUni_components_tabs_hooks = require("./hooks.js");
+const uni_modules_nutuiUni_components_tabs_index = require("./index.js");
+if (!Math) {
+  NutIcon();
+}
+const NutIcon = () => "../icon/icon.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-tabs`;
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: uni_modules_nutuiUni_components_tabs_index.tabsProps,
+  emits: uni_modules_nutuiUni_components_tabs_index.tabsEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = common_vendor.getCurrentInstance();
+    const { getSelectorNodeInfo, getSelectorNodeInfos } = uni_modules_nutuiUni_components__hooks_useSelectorQuery.useSelectorQuery(instance);
+    const refRandomId = uni_modules_nutuiUni_components__utils_common.getRandomId();
+    common_vendor.ref(null);
+    const { internalChildren } = uni_modules_nutuiUni_components__hooks_useProvide.useProvide(uni_modules_nutuiUni_components_tabs_index.TAB_KEY, `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-tabs`)({
+      activeKey: common_vendor.computed(() => props.modelValue || 0),
+      autoHeight: common_vendor.computed(() => props.autoHeight),
+      animatedTime: common_vendor.computed(() => props.animatedTime)
+    });
+    const titles = common_vendor.ref([]);
+    function renderTitles(vnodes) {
+      vnodes.forEach((vnode, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        let type = vnode.type;
+        type = type.name || type;
+        if (type === "nut-tab-pane") {
+          const title = new uni_modules_nutuiUni_components_tabs_index.Title();
+          if (((_a = vnode.props) == null ? void 0 : _a.title) || ((_b = vnode.props) == null ? void 0 : _b["pane-key"]) || ((_c = vnode.props) == null ? void 0 : _c.paneKey)) {
+            const paneKeyType = uni_modules_nutuiUni_components__utils_common.TypeOfFun((_d = vnode.props) == null ? void 0 : _d["pane-key"]);
+            const paneIndex = paneKeyType === "number" || paneKeyType === "string" ? String((_e = vnode.props) == null ? void 0 : _e["pane-key"]) : null;
+            const camelPaneKeyType = uni_modules_nutuiUni_components__utils_common.TypeOfFun((_f = vnode.props) == null ? void 0 : _f.paneKey);
+            const camelPaneIndex = camelPaneKeyType === "number" || camelPaneKeyType === "string" ? String((_g = vnode.props) == null ? void 0 : _g.paneKey) : null;
+            title.title = (_h = vnode.props) == null ? void 0 : _h.title;
+            title.paneKey = paneIndex || camelPaneIndex || String(index);
+            title.disabled = (_i = vnode.props) == null ? void 0 : _i.disabled;
+          }
+          titles.value.push(title);
+        } else {
+          if (vnode.children === " ")
+            return;
+          renderTitles(vnode.children);
+        }
+      });
+    }
+    const currentIndex = common_vendor.ref(props.modelValue || 0);
+    function findTabsIndex(value) {
+      const index = titles.value.findIndex((item) => item.paneKey === String(value));
+      currentIndex.value = index;
+    }
+    const getScrollX = common_vendor.computed(() => {
+      return props.titleScroll && props.direction === "horizontal";
+    });
+    const getScrollY = common_vendor.computed(() => {
+      return props.titleScroll && props.direction === "vertical";
+    });
+    const titleRef = common_vendor.ref([]);
+    const scrollLeft = common_vendor.ref(0);
+    const scrollTop = common_vendor.ref(0);
+    const scrollWithAnimation = common_vendor.ref(false);
+    const navRectRef = common_vendor.ref();
+    const titleRectRef = common_vendor.ref([]);
+    const canShowLabel = common_vendor.ref(false);
+    function scrollIntoView() {
+      if (!props.titleScroll)
+        return;
+      uni_modules_nutuiUni_components__utils_raf.requestAniFrame(() => {
+        Promise.all([
+          getSelectorNodeInfo(`#nut-tabs__titles_${refRandomId}`),
+          getSelectorNodeInfos(`#nut-tabs__titles_${refRandomId} .nut-tabs__titles-item`)
+        ]).then(([navRect, titleRects]) => {
+          var _a, _b, _c, _d;
+          navRectRef.value = navRect;
+          titleRectRef.value = titleRects;
+          if (navRectRef.value) {
+            if (props.direction === "vertical") {
+              const titlesTotalHeight = titleRects.reduce((prev, curr) => prev + curr.height, 0);
+              if (titlesTotalHeight > ((_a = navRectRef.value) == null ? void 0 : _a.height))
+                canShowLabel.value = true;
+              else
+                canShowLabel.value = false;
+            } else {
+              const titlesTotalWidth = titleRects.reduce((prev, curr) => prev + curr.width, 0);
+              if (titlesTotalWidth > ((_b = navRectRef.value) == null ? void 0 : _b.width))
+                canShowLabel.value = true;
+              else
+                canShowLabel.value = false;
+            }
+          }
+          const titleRect = titleRectRef.value[currentIndex.value];
+          let to = 0;
+          if (props.direction === "vertical") {
+            const top = titleRects.slice(0, currentIndex.value).reduce((prev, curr) => prev + curr.height, 0);
+            to = top - (((_c = navRectRef.value) == null ? void 0 : _c.height) - titleRect.height) / 2;
+          } else {
+            const left = titleRects.slice(0, currentIndex.value).reduce((prev, curr) => prev + curr.width, 0);
+            to = left - (((_d = navRectRef.value) == null ? void 0 : _d.width) - (titleRect == null ? void 0 : titleRect.width)) / 2;
+          }
+          common_vendor.nextTick$1(() => {
+            scrollWithAnimation.value = true;
+          });
+          scrollDirection(to, props.direction);
+        });
+      });
+    }
+    function scrollDirection(to, direction) {
+      let count = 0;
+      const from = direction === "horizontal" ? scrollLeft.value : scrollTop.value;
+      const frames = 1;
+      function animate() {
+        if (direction === "horizontal")
+          scrollLeft.value += (to - from) / frames;
+        else
+          scrollTop.value += (to - from) / frames;
+        if (++count < frames)
+          uni_modules_nutuiUni_components__utils_raf.requestAniFrame(animate);
+      }
+      animate();
+    }
+    function init(vnodes = internalChildren.map((item) => item.vnode)) {
+      titles.value = [];
+      vnodes = vnodes == null ? void 0 : vnodes.filter((item) => typeof item.children !== "string");
+      if (vnodes && vnodes.length)
+        renderTitles(vnodes);
+      findTabsIndex(props.modelValue);
+      setTimeout(() => {
+        scrollIntoView();
+      }, 500);
+    }
+    common_vendor.watch(
+      () => internalChildren.map((item) => item.props),
+      (vnodes) => {
+        init(internalChildren);
+      },
+      { deep: true, immediate: true }
+    );
+    common_vendor.watch(
+      () => props.modelValue,
+      (value) => {
+        findTabsIndex(value);
+        scrollIntoView();
+      }
+    );
+    common_vendor.onMounted(init);
+    common_vendor.onActivated(init);
+    const tabMethods = {
+      isBegin: () => {
+        return currentIndex.value === 0;
+      },
+      isEnd: () => {
+        return currentIndex.value === titles.value.length - 1;
+      },
+      next: () => {
+        currentIndex.value += 1;
+        const nextDisabled = titles.value[currentIndex.value].disabled;
+        if (tabMethods.isEnd() && nextDisabled) {
+          tabMethods.prev();
+          return;
+        }
+        if (nextDisabled && currentIndex.value < titles.value.length - 1) {
+          tabMethods.next();
+          return;
+        }
+        tabMethods.updateValue(titles.value[currentIndex.value]);
+      },
+      prev: () => {
+        currentIndex.value -= 1;
+        const prevDisabled = titles.value[currentIndex.value].disabled;
+        if (tabMethods.isBegin() && prevDisabled) {
+          tabMethods.next();
+          return;
+        }
+        if (prevDisabled && currentIndex.value > 0) {
+          tabMethods.prev();
+          return;
+        }
+        tabMethods.updateValue(titles.value[currentIndex.value]);
+      },
+      updateValue: (item) => {
+        emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, item.paneKey);
+        emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, item);
+      },
+      tabChange: (item, index) => {
+        emit(uni_modules_nutuiUni_components__constants_event.CLICK_EVENT, item);
+        if (item.disabled || currentIndex.value === index)
+          return;
+        currentIndex.value = index;
+        tabMethods.updateValue(item);
+      },
+      setTabItemRef: (el, index) => {
+        titleRef.value[index] = el;
+      }
+    };
+    const { tabChange } = tabMethods;
+    const { touchState, touchMethods, tabsContentID, tabsContentRef } = uni_modules_nutuiUni_components_tabs_hooks.useTabContentTouch(props, tabMethods, instance, uni_modules_nutuiUni_components__hooks_useRect.useRect);
+    const contentStyle = common_vendor.computed(() => {
+      let offsetPercent = currentIndex.value * 100;
+      if (touchState.moving)
+        offsetPercent += touchState.offset;
+      let style = {
+        transform: props.direction === "horizontal" ? `translate3d(-${offsetPercent}%, 0, 0)` : `translate3d( 0,-${offsetPercent}%, 0)`,
+        transitionDuration: touchState.moving ? void 0 : `${props.animatedTime}ms`
+      };
+      if (props.animatedTime === 0)
+        style = {};
+      return style;
+    });
+    const tabsNavStyle = common_vendor.computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const tabsActiveStyle = common_vendor.computed(() => {
+      return {
+        color: props.type === "smile" ? props.customColor : "",
+        background: props.type === "line" ? props.customColor : ""
+      };
+    });
+    const titleStyle = common_vendor.computed(() => {
+      if (!props.titleGutter)
+        return {};
+      const px = uni_modules_nutuiUni_components__utils_pxCheck.pxCheck(props.titleGutter);
+      if (props.direction === "vertical")
+        return { paddingTop: px, paddingBottom: px };
+      return { paddingLeft: px, paddingRight: px };
+    });
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
+        [props.direction]: true
+      });
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: _ctx.$slots.titles
+      }, _ctx.$slots.titles ? {} : common_vendor.e({
+        b: common_vendor.f(titles.value, (item, index, i0) => {
+          return common_vendor.e(_ctx.type === "line" ? {
+            a: common_vendor.s(tabsActiveStyle.value)
+          } : {}, _ctx.type === "smile" ? {
+            b: "1a46e7cc-0-" + i0,
+            c: common_vendor.p({
+              name: "joy-smile",
+              ["custom-color"]: _ctx.customColor
+            }),
+            d: common_vendor.s(tabsActiveStyle.value)
+          } : {}, {
+            e: common_vendor.t(item.title),
+            f: item.paneKey,
+            g: item.paneKey === String(_ctx.modelValue) ? 1 : "",
+            h: item.disabled ? 1 : "",
+            i: common_vendor.o(($event) => common_vendor.unref(tabChange)(item, index), item.paneKey)
+          });
+        }),
+        c: _ctx.type === "line",
+        d: _ctx.type === "smile",
+        e: _ctx.ellipsis ? 1 : "",
+        f: common_vendor.s(titleStyle.value),
+        g: _ctx.align === "left" ? 1 : "",
+        h: canShowLabel.value && _ctx.titleScroll
+      }, canShowLabel.value && _ctx.titleScroll ? {} : {}), {
+        i: _ctx.align === "left" ? 1 : "",
+        j: `nut-tabs__titles_${common_vendor.unref(refRandomId)}`,
+        k: getScrollX.value,
+        l: getScrollY.value,
+        m: scrollWithAnimation.value,
+        n: scrollLeft.value,
+        o: scrollTop.value,
+        p: _ctx.type,
+        q: _ctx.type ? 1 : "",
+        r: _ctx.titleScroll ? 1 : "",
+        s: _ctx.size,
+        t: _ctx.size ? 1 : "",
+        v: common_vendor.s(tabsNavStyle.value),
+        w: common_vendor.unref(tabsContentID),
+        x: common_vendor.s(contentStyle.value),
+        y: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(touchMethods).onTouchStart && common_vendor.unref(touchMethods).onTouchStart(...args)
+        ),
+        z: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(touchMethods).onTouchMove && common_vendor.unref(touchMethods).onTouchMove(...args)
+        ),
+        A: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(touchMethods).onTouchEnd && common_vendor.unref(touchMethods).onTouchEnd(...args)
+        ),
+        B: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(touchMethods).onTouchEnd && common_vendor.unref(touchMethods).onTouchEnd(...args)
+        ),
+        C: common_vendor.s(_ctx.customStyle),
+        D: common_vendor.n(classes.value)
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/tabs/tabs.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/tabs.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-icon": "../icon/icon"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/tabs.wxml

@@ -0,0 +1 @@
+<view ref="container" style="{{C}}" class="{{D}}"><scroll-view id="{{j}}" scroll-x="{{k}}" scroll-y="{{l}}" scroll-with-animation="{{m}}" scroll-left="{{n}}" scroll-top="{{o}}" enable-flex="{{true}}" class="{{['nut-tabs__titles', q && p, r && 'scrollable', t && s]}}" style="{{v}}"><view class="{{['nut-tabs__list', i && 'nut-tabs__titles-left']}}"><slot wx:if="{{a}}" name="titles"/><block wx:else><view wx:for="{{b}}" wx:for-item="item" wx:key="f" style="{{f}}" class="{{['nut-tabs__titles-item', 'uni', item.g && 'nut-tabs-active', item.h && 'disabled', g && 'nut-tabs__titles-item-left']}}" bindtap="{{item.i}}"><view wx:if="{{c}}" class="nut-tabs__titles-item__line" style="{{item.a}}"/><view wx:if="{{d}}" class="nut-tabs__titles-item__smile" style="{{item.d}}"><nut-icon wx:if="{{item.c}}" u-i="{{item.b}}" bind:__l="__l" u-p="{{item.c}}"/></view><view class="{{['nut-tabs__titles-item__text', e && 'ellipsis']}}">{{item.e}}</view></view><view wx:if="{{h}}" class="nut-tabs__titles-placeholder"/></block></view></scroll-view><view id="{{w}}" ref="tabsContentRef" class="nut-tabs__content" style="{{x}}" bindtouchstart="{{y}}" bindtouchmove="{{z}}" bindtouchend="{{A}}" bindtouchcancel="{{B}}"><slot/></view></view>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/tabs/tabs.wxss

@@ -0,0 +1,347 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.nut-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+.nut-theme-dark .nut-cascader .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414) !important;
+}
+.nut-theme-dark .nut-cascader__bar {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-cascader-item__inner {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-cascader .nut-tab-pane {
+  padding: 0;
+}
+.nut-cascader .nut-tabs__titles {
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  background: #fff;
+}
+.nut-cascader-item {
+  width: 100%;
+  font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px));
+  line-height: var(--nut-cascader-line-height, 22px);
+}
+.nut-cascader-item.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item {
+  flex: initial;
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  white-space: nowrap;
+}
+.nut-cascader-item__inner {
+  display: flex;
+  align-items: center;
+  padding: var(--nut-cascader-item-padding, 10px 20px);
+  margin: 0;
+  font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a));
+  cursor: pointer;
+}
+.nut-cascader-item__title {
+  flex: 1;
+}
+.nut-cascader-item__icon-check {
+  margin-left: 10px;
+  visibility: hidden;
+}
+.nut-cascader-item__icon-loading {
+  margin-left: 10px;
+}
+.nut-cascader-item.active:not(.disabled) {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-cascader-item.active .nut-cascader-item__icon-check {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+  visibility: visible;
+}
+.nut-cascader-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.nut-cascader__bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nut-cascader-bar-padding, 24px 20px 17px);
+  font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px));
+  font-weight: bold;
+  line-height: var(--nut-cascader-bar-line-height, 20px);
+  color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a));
+  text-align: center;
+}
+.nut-cascader-pane {
+  display: block;
+  width: 100%;
+  height: 342px;
+  padding: 10px 0 0;
+  margin: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414);
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-theme-dark .nut-tabs.vertical .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-tabs {
+  display: flex;
+  overflow: hidden;
+}
+.nut-tabs .nut-tabs__titles {
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+  -webkit-user-select: none;
+          user-select: none;
+  background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5));
+  border-radius: var(--nut-tabs-titles-border-radius, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__list {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text {
+  text-align: center;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line {
+  position: absolute;
+  bottom: 15%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  content: "";
+  border-radius: var(--nut-tabs-titles-item-line-border-radius, 0);
+  opacity: var(--nut-tabs-titles-item-line-opacity, 1);
+  transition: width 0.3s ease;
+  transform: translate(-50%, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  font-weight: bold;
+  color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px);
+  height: 3px;
+  content: "";
+  background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled {
+  color: var(--nut-disable-color, #ccc);
+}
+.nut-tabs .nut-tabs__titles-left {
+  justify-content: flex-start;
+}
+.nut-tabs.horizontal {
+  flex-direction: column;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles,
+.nut-tabs.horizontal > .nut-tabs__titles {
+  flex-direction: row;
+  height: var(--nut-tabs-horizontal-titles-height, 46px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list {
+  height: 100%;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable,
+.nut-tabs.horizontal > .nut-tabs__titles.scrollable {
+  overflow: auto hidden;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: 1 0 auto;
+  width: 0;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left {
+  flex: 0 0 auto;
+}
+.nut-tabs.vertical {
+  flex-direction: row;
+  width: 100%;
+}
+.nut-tabs.vertical > .nut-tabs__titles {
+  flex-direction: column;
+  width: var(--nut-tabs-vertical-titles-width, 100px);
+  height: auto;
+  padding: 10px 0;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list {
+  flex-direction: column;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable {
+  height: auto;
+  overflow: hidden auto;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder {
+  height: 22px;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: none;
+  width: 100%;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+  height: var(--nut-tabs-vertical-titles-item-height, 40px);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line {
+  bottom: none;
+  width: 0;
+  height: 0;
+  transition: height 0.3s ease;
+  transform: translate(0, -50%);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: #fff;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  left: 10px;
+  width: 3px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  position: absolute;
+  right: -8px;
+  bottom: 2px;
+  left: auto;
+  width: 36px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  transform: rotate(320deg);
+}
+.nut-tabs.vertical .nut-tabs__content {
+  flex: 1;
+  flex-direction: column;
+}
+.nut-tabs.vertical .nut-tabs__content .nut-tab-pane {
+  height: 100%;
+}
+.nut-tabs__titles.large .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16px));
+}
+.nut-tabs__titles.normal .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+}
+.nut-tabs__titles.small .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12px));
+}
+.nut-tabs__titles::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile {
+  display: none;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  display: block;
+  width: 36px;
+  height: 10px;
+}
+.nut-tabs__content {
+  box-sizing: border-box;
+  display: flex;
+}
+.nut-tabs .nut-tabs__titles-item .uni {
+  height: 46px;
+  line-height: 46px;
+}
+.nut-tabs .nut-tabs__titles-placeholder {
+  width: auto;
+  min-width: 10px;
+}
+scroll-view ::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent;
+}