{"version":3,"sources":["webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue?7ec7","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue?d436","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue?2b1b","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue?58f9","uni-app:///tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue?1305"],"names":["renderjs","component","options","__file","components","tnBadge","e","message","indexOf","console","error","render","_vm","this","_h","$createElement","g0","_self","_c","$t","string","getLengthUnitValue","top","l0","__map","list","item","index","$orig","__get_orig","s0","__get_style","tabItemStyle","s1","showBar","tabBarStyle","$mp","data","Object","assign","$root","recyclableRender","staticRenderFns","_withStripped","windowWidth","mixins","name","props","type","default","count","current","isScroll","height","itemWidth","swiperWidth","activeColor","inactiveColor","activeItemStyle","barWidth","barHeight","barStyle","gutter","badgeOffset","bold","autoCenterMode","zIndex","computed","currentIndex","scrollBarLeft","barWidthPx","swiperWidthPx","lineHeight","fontSize","color","padding","flex","style","width","borderRadius","backgroundColor","left","scrollLeft","tabsInfo","animationFinishCurrent","componentsWidth","tabLineAddDx","tabLineDx","colorGradientArr","colorStep","watch","mounted","methods","init","emit","change","getTabsInfo","view","res","arr","resolve","getQuery","size","countLine3Dx","setScrollViewToCenter","parentWidth","setDx","nextTabIndex","setTabColor","dx","colorIndex","setFinishCurrent"],"mappings":"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","file":"tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-tabs-swiper.vue?vue&type=template&id=1b37d63c&scoped=true&\"\nvar renderjs\nimport script from \"./tn-tabs-swiper.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-tabs-swiper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-tabs-swiper.vue?vue&type=style&index=0&id=1b37d63c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"1b37d63c\",\n  null,\n  false,\n  components,\n  renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue\"\nexport default component.exports","export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-tabs-swiper.vue?vue&type=template&id=1b37d63c&scoped=true&\"","var components\ntry {\n  components = {\n    tnBadge: function () {\n      return import(\n        /* webpackChunkName: \"tuniao-ui/components/tn-badge/tn-badge\" */ \"@/tuniao-ui/components/tn-badge/tn-badge.vue\"\n      )\n    },\n  }\n} catch (e) {\n  if (\n    e.message.indexOf(\"Cannot find module\") !== -1 &&\n    e.message.indexOf(\".vue\") !== -1\n  ) {\n    console.error(e.message)\n    console.error(\"1. 排查组件名称拼写是否正确\")\n    console.error(\n      \"2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom\"\n    )\n    console.error(\n      \"3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件\"\n    )\n  } else {\n    throw e\n  }\n}\nvar render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  var g0 = _vm.$t.string.getLengthUnitValue(_vm.top, \"px\")\n  var l0 = _vm.__map(_vm.list, function (item, index) {\n    var $orig = _vm.__get_orig(item)\n    var s0 = _vm.__get_style([_vm.tabItemStyle(index)])\n    return {\n      $orig: $orig,\n      s0: s0,\n    }\n  })\n  var s1 = _vm.showBar ? _vm.__get_style([_vm.tabBarStyle]) : null\n  _vm.$mp.data = Object.assign(\n    {},\n    {\n      $root: {\n        g0: g0,\n        l0: l0,\n        s1: s1,\n      },\n    }\n  )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-tabs-swiper.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-tabs-swiper.vue?vue&type=script&lang=js&\"","<template>\r\n  <view class=\"tn-tabs-swiper-class tn-tabs-swiper\" :class=\"[backgroundColorClass]\" :style=\"{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px'), zIndex: zIndex}\">\r\n    \r\n    <scroll-view scroll-x class=\"tn-tabs-swiper__scroll-view\" :scroll-left=\"scrollLeft\" scroll-with-animation :style=\"{zIndex: zIndex + 1}\">\r\n      <view class=\"tn-tabs-swiper__scroll-view__box\" :class=\"{'tn-tabs-swiper__scroll-view--flex': !isScroll}\">\r\n        \r\n        <!-- item -->\r\n        <view\r\n          v-for=\"(item, index) in list\"\r\n          :key=\"index\"\r\n          :id=\"'tn-tabs-swiper__scroll-view__item-' + index\"\r\n          class=\"tn-tabs-swiper__scroll-view__item tn-text-ellipsis\"\r\n          :style=\"[tabItemStyle(index)]\"\r\n          @tap=\"emit(index)\"\r\n        >\r\n          <tn-badge v-if=\"item[count] || item['count']\" backgroundColor=\"tn-bg-red\" fontColor=\"#FFFFFF\" :absolute=\"true\" :top=\"badgeOffset[0] || 0\" :right=\"badgeOffset[1] || 0\">{{ item[count] || item['count']}}</tn-badge>\r\n          {{ item[name] || item['name'] }}\r\n        </view>\r\n        \r\n        <!-- 底部滑块 -->\r\n        <view v-if=\"showBar\" class=\"tn-tabs-swiper__bar\" :style=\"[tabBarStyle]\"></view>\r\n      </view>\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  import componentsColor from '../../libs/mixin/components_color.js'\r\n  const { windowWidth } = uni.getSystemInfoSync()\r\n  \r\n  export default {\r\n    mixins: [componentsColor],\r\n    name: 'tn-tabs-swiper',\r\n    props: {\r\n      // 标签列表\r\n      list: {\r\n        type: Array,\r\n        default() {\r\n          return []\r\n        }\r\n      },\r\n      // 列表数据tab名称的属性\r\n      name: {\r\n        type: String,\r\n        default: 'name'\r\n      },\r\n      // 列表数据微标数量的属性\r\n      count: {\r\n        type: String,\r\n        default: 'count'\r\n      },\r\n      // 当前活动的tab索引\r\n      current: {\r\n        type: Number,\r\n        default: 0\r\n      },\r\n      // 菜单是否可以滑动\r\n      isScroll: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 高度\r\n      height: {\r\n        type: Number,\r\n        default: 80\r\n      },\r\n      // 距离顶部的距离(px)\r\n      top: {\r\n        type: Number,\r\n        default: 0\r\n      },\r\n      // item的高度\r\n      itemWidth: {\r\n        type: [String, Number],\r\n        default: 'auto'\r\n      },\r\n      // swiper的宽度\r\n      swiperWidth: {\r\n        type: Number,\r\n        default: 750\r\n      },\r\n      // 选中时的颜色\r\n      activeColor: {\r\n        type: String,\r\n        default: '#01BEFF'\r\n      },\r\n      // 未被选中时的颜色\r\n      inactiveColor: {\r\n        type: String,\r\n        default: '#080808'\r\n      },\r\n      // 选中的item样式\r\n      activeItemStyle: {\r\n        type: Object,\r\n        default() {\r\n          return {}\r\n        }\r\n      },\r\n      // 是否显示底部滑块\r\n      showBar: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 底部滑块的宽度\r\n      barWidth: {\r\n        type: Number,\r\n        default: 40\r\n      },\r\n      // 底部滑块的高度\r\n      barHeight: {\r\n        type: Number,\r\n        default: 6\r\n      },\r\n      // 自定义底部滑块的样式\r\n      barStyle: {\r\n        type: Object,\r\n        default() {\r\n          return {}\r\n        }\r\n      },\r\n      // 单个tab的左右内边距\r\n      gutter: {\r\n        type: Number,\r\n        default: 30\r\n      },\r\n      // 微标的偏移数[top, right]\r\n      badgeOffset: {\r\n        type: Array,\r\n        default() {\r\n          return [20, 22]\r\n        }\r\n      },\r\n      // 是否加粗字体\r\n      bold: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 滚动至中心目标类型\r\n      autoCenterMode: {\r\n        type: String,\r\n        default: 'window'\r\n      },\r\n      zIndex: {\r\n        type: Number,\r\n        default: 1\r\n      }\r\n    },\r\n    computed: {\r\n      currentIndex() {\r\n        const current = Number(this.current)\r\n        // 判断是否超出\r\n        if (current > this.list.length - 1) {\r\n          return this.list.length - 1\r\n        }\r\n        if (current < 0) return 0\r\n        return current\r\n      },\r\n      // 滑块需要移动的距离\r\n      scrollBarLeft() {\r\n        return Number(this.tabLineDx) + Number(this.tabLineAddDx)\r\n      },\r\n      // 滑块宽度转换为px\r\n      barWidthPx() {\r\n        return uni.upx2px(this.barWidth)\r\n      },\r\n      // 将swiper宽度转换为px\r\n      swiperWidthPx() {\r\n        return uni.upx2px(this.swiperWidth)\r\n      },\r\n      // tab样式\r\n      tabItemStyle() {\r\n        return index => {\r\n          let style = {\r\n            height: this.$t.string.getLengthUnitValue(this.height),\r\n            lineHeight: this.$t.string.getLengthUnitValue(this.height),\r\n            fontSize: this.fontSizeStyle || '28rpx',\r\n            color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,\r\n            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',\r\n            flex: this.isScroll ? 'auto' : '1',\r\n            zIndex: this.zIndex + 2\r\n          }\r\n          if (index === this.currentIndex) {\r\n            if (this.bold) {\r\n              style.fontWeight = 'bold'\r\n            }\r\n            Object.assign(style, this.activeItemStyle)\r\n          }\r\n          return style\r\n        }\r\n      },\r\n      // 底部滑块样式\r\n      tabBarStyle() {\r\n        let style = {\r\n          width: this.$t.string.getLengthUnitValue(this.barWidth),\r\n          height: this.$t.string.getLengthUnitValue(this.barHeight),\r\n          borderRadius: `${this.barHeight / 2}rpx`,\r\n          backgroundColor: this.activeColor,\r\n          left: this.scrollBarLeft + 'px'\r\n        }\r\n        Object.assign(style, this.barStyle)\r\n        return style\r\n      },\r\n    },\r\n    data() {\r\n      return {\r\n        // 滚动scroll-view的左边滚动距离\r\n        scrollLeft: 0,\r\n        // 存放tab菜单节点信息\r\n        tabsInfo: [],\r\n        // 屏幕宽度\r\n        windowWidth: 0,\r\n        // 滑动动画结束后对应的标签Index\r\n        animationFinishCurrent: this.current,\r\n        // 组件的宽度\r\n        componentsWidth: 0,\r\n        // 移动距离\r\n        tabLineAddDx: 0,\r\n        tabLineDx: 0,\r\n        // 颜色渐变数组\r\n        colorGradientArr: [],\r\n        // 两个颜色之间的渐变等分\r\n        colorStep: 100,\r\n      }\r\n    },\r\n    watch: {\r\n      current(value) {\r\n        this.change(value)\r\n        this.setFinishCurrent(value)\r\n      },\r\n      list() {\r\n        this.$nextTick(() => {\r\n          this.init()\r\n        })\r\n      }\r\n    },\r\n    mounted() {\r\n      this.init()\r\n    },\r\n    methods: {\r\n      // 初始化\r\n      async init() {\r\n        await this.getTabsInfo()\r\n        this.countLine3Dx()\r\n        this.getQuery(() => {\r\n          this.setScrollViewToCenter()\r\n        })\r\n        // 获取渐变颜色数组\r\n        this.colorGradientArr = this.$t.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)\r\n      },\r\n      // 发送事件\r\n      emit(index) {\r\n        this.$emit('change', index)\r\n      },\r\n      // tabs发生变化\r\n      change() {\r\n        this.setScrollViewToCenter()\r\n      },\r\n      // 获取各个tab的节点信息\r\n      getTabsInfo() {\r\n        return new Promise((resolve, reject) => {\r\n          let view = uni.createSelectorQuery().in(this)\r\n          for (let i = 0; i < this.list.length; i++) {\r\n            view.select('#tn-tabs-swiper__scroll-view__item-'+i).boundingClientRect()\r\n          }\r\n          view.exec(res => {\r\n            const arr = []\r\n            for (let i = 0; i < res.length; i++) {\r\n              // 添加颜色属性\r\n              res[i].color = this.inactiveColor\r\n              if (i === this.currentIndex) res[i].color = this.activeColor\r\n              arr.push(res[i])\r\n            }\r\n            this.tabsInfo = arr\r\n            resolve()\r\n          })\r\n        })\r\n      },\r\n      // 查询components信息\r\n      getQuery(cb) {\r\n        try {\r\n          let view = uni.createSelectorQuery().in(this).select('.tn-tabs-swiper')\r\n          view.fields({\r\n              size: true\r\n            },\r\n            data => {\r\n              if (data) {\r\n                this.componentsWidth = data.width\r\n                if (cb && typeof cb === 'function') cb(data)\r\n              } else {\r\n                this.getQuery(cb)\r\n              }\r\n            }\r\n          ).exec()\r\n        } catch (e) {\r\n          this.componentsWidth = windowWidth\r\n        }\r\n      },\r\n      // 当swiper滑动结束的时候，计算滑块最终停留的位置\r\n      countLine3Dx() {\r\n        const tab = this.tabsInfo[this.animationFinishCurrent]\r\n        // 让滑块中心点和当前tab中心重合\r\n        if (tab) this.tabLineDx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left\r\n      },\r\n      // 把活动的tab移动到屏幕中心\r\n      setScrollViewToCenter() {\r\n        let tab = this.tabsInfo[this.animationFinishCurrent]\r\n        if (tab) {\r\n          let tabCenter = tab.left + tab.width / 2\r\n          let parentWidth\r\n          // 活动tab移动到中心时，以屏幕还是tab组件宽度为基准\r\n          if (this.autoCenterMode === 'window') {\r\n            parentWidth = windowWidth\r\n          } else {\r\n            parentWidth = this.componentsWidth\r\n          }\r\n          this.scrollLeft = tabCenter - parentWidth / 2\r\n        }\r\n      },\r\n      // 设置偏移位置\r\n      setDx(dx) {\r\n        \r\n        // 计算下一个标签的步进值\r\n        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))\r\n        let nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1\r\n        // 处理索引超出边界问题\r\n        nextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex\r\n        nextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex\r\n        \r\n        // 当前tab中心点x轴坐标\r\n        let currentTab = this.tabsInfo[this.animationFinishCurrent]\r\n        let currentTabX = currentTab.left + currentTab.width / 2\r\n        \r\n        // 下一个tab中心点x轴坐标\r\n        let nextTab = this.tabsInfo[nextTabIndex]\r\n        let nextTabX = nextTab.left + nextTab.width / 2\r\n        \r\n        // 两个tab之间的距离\r\n        let distanceX = Math.abs(nextTabX - currentTabX)\r\n        this.tabLineAddDx = (dx / this.swiperWidthPx) * distanceX\r\n        this.setTabColor(this.animationFinishCurrent, nextTabIndex, dx)\r\n      },\r\n      // 设置tab的颜色\r\n      setTabColor(currentTabIndex, nextTabIndex, dx) {\r\n        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))\r\n        if (Math.abs(dx) > this.swiperWidthPx) {\r\n          dx = dx > 0 ? dx - (this.swiperWidthPx * (nextIndexStep - 1)) : dx + (this.swiperWidthPx * (nextIndexStep - 1))\r\n        }\r\n        let colorIndex = Math.abs(Math.ceil((dx / this.swiperWidthPx) * 100))\r\n        let colorLength = this.colorGradientArr.length\r\n        // 处理超出索引边界\r\n        colorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex\r\n        if (nextIndexStep > 1) {\r\n          // 设置下一个tab的颜色\r\n          // 设置之前tab的颜色为默认颜色\r\n          if (dx > 0) {\r\n            this.tabsInfo[nextTabIndex + (nextIndexStep - 1) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]\r\n            this.tabsInfo[nextTabIndex + (nextIndexStep - 2) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]\r\n          } else {\r\n            this.tabsInfo[nextTabIndex - (nextIndexStep - 1) < 0 ? 0 : nextTabIndex - (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]\r\n            this.tabsInfo[nextTabIndex - (nextIndexStep - 2) < 0 ? 0 : nextTabIndex - (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]\r\n          }\r\n        } else {\r\n          // 设置下一个tab的颜色\r\n          this.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex]\r\n          // 设置当前tab的颜色\r\n          this.tabsInfo[currentTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex]\r\n        }\r\n        \r\n      },\r\n      // swiper滑动结束\r\n      setFinishCurrent(current) {\r\n        // 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况\r\n        this.tabsInfo.map((item, index) => {\r\n          if (current == index) item.color = this.activeColor\r\n          else item.color = this.inactiveColor\r\n          return item\r\n        })\r\n        this.tabLineAddDx = 0\r\n        this.animationFinishCurrent = current\r\n        this.countLine3Dx()\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  \r\n  /* #ifndef APP-NVUE */\r\n  ::-webkit-scrollbar {\r\n    display: none;\r\n    width: 0 !important;\r\n    height: 0 !important;\r\n    -webkit-appearance: none;\r\n    background: transparent;\r\n  }\r\n  /* #endif */\r\n  \r\n  /* #ifdef H5 */\r\n  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条\r\n  scroll-view ::v-deep ::-webkit-scrollbar {\r\n  \tdisplay: none;\r\n  \twidth: 0 !important;\r\n  \theight: 0 !important;\r\n  \t-webkit-appearance: none;\r\n  \tbackground: transparent;\r\n  }\r\n  /* #endif */\r\n  \r\n  .tn-tabs-swiper {\r\n    &__scroll-view {\r\n      position: relative;\r\n      width: 100%;\r\n      white-space: nowrap;\r\n      \r\n      &__box {\r\n        position: relative;\r\n        /* #ifdef MP-TOUTIAO */\r\n        white-space: nowrap;\r\n        /* #endif */\r\n      }\r\n      \r\n      &__item {\r\n        position: relative;\r\n        /* #ifndef APP-NVUE */\r\n        display: inline-block;\r\n        /* #endif */\r\n        text-align: center;\r\n        transition-property: background-color, color;\r\n      }\r\n      \r\n      &--flex {\r\n        display: flex;\r\n        flex-direction: row;\r\n        justify-content: space-between;\r\n      }\r\n    }\r\n    \r\n    &__bar {\r\n      position: absolute;\r\n      bottom: 0;\r\n    }\r\n  }\r\n  \r\n</style>\r\n","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-tabs-swiper.vue?vue&type=style&index=0&id=1b37d63c&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-tabs-swiper.vue?vue&type=style&index=0&id=1b37d63c&lang=scss&scoped=true&\""],"sourceRoot":""}