| 1 |
- {"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":""}
|
