| 1 |
- {"version":3,"sources":["webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?e102","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?38b5","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?6c7b","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?08d7","uni-app:///tuniao-ui/components/tn-tabbar/tn-tabbar.vue","webpack:///D:/Code2024/sulibao-mini/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?055a"],"names":["renderjs","component","options","__file","components","tnBadge","e","message","indexOf","console","error","render","_vm","this","_h","$createElement","l0","_self","_c","show","__map","list","item","index","$orig","__get_orig","s0","__get_style","itemButtonStyle","m0","itemButtonClass","m1","isImage","m2","elIcon","m3","m4","elIconColor","m5","g0","out","count","dot","$t","number","formatNumberString","m6","elColor","m7","_isMounted","e0","$event","stopPropagation","preventDefault","$mp","data","Object","assign","$root","recyclableRender","staticRenderFns","_withStripped","name","props","value","type","default","height","outHeight","bgColor","iconSize","fontSize","activeColor","inactiveColor","activeIconColor","inactiveIconColor","activeStyle","shadow","animation","animationMode","fixed","safeAreaInsetBottom","beforeSwitch","computed","color","clazz","style","outItemLeft","outItemIndex","tabbatItemInfo","watch","created","mounted","methods","getTabbarItem","query","size","rect","left","width","setTimeout","getOutItemIndex","clickItemHandler","switchTab","updateOutItemLeft"],"mappings":"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","file":"tuniao-ui/components/tn-tabbar/tn-tabbar.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-tabbar.vue?vue&type=template&id=3972e4a0&scoped=true&\"\nvar renderjs\nimport script from \"./tn-tabbar.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-tabbar.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-tabbar.vue?vue&type=style&index=0&id=3972e4a0&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 \"3972e4a0\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-tabbar/tn-tabbar.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-tabbar.vue?vue&type=template&id=3972e4a0&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 l0 = _vm.show\n ? _vm.__map(_vm.list, function (item, index) {\n var $orig = _vm.__get_orig(item)\n var s0 = _vm.__get_style([_vm.itemButtonStyle(index)])\n var m0 = _vm.itemButtonClass(index)\n var m1 = _vm.isImage(index)\n var m2 = m1 ? _vm.elIcon(index) : null\n var m3 = !m1 ? _vm.elIcon(index) : null\n var m4 = !m1 ? _vm.elIconColor(index, false) : null\n var m5 = !m1 ? _vm.elIconColor(index) : null\n var g0 =\n !item.out && (item.count || item.dot)\n ? _vm.$t.number.formatNumberString(item.count)\n : null\n var m6 = _vm.elColor(index, false)\n var m7 = _vm.elColor(index)\n return {\n $orig: $orig,\n s0: s0,\n m0: m0,\n m1: m1,\n m2: m2,\n m3: m3,\n m4: m4,\n m5: m5,\n g0: g0,\n m6: m6,\n m7: m7,\n }\n })\n : null\n if (!_vm._isMounted) {\n _vm.e0 = function ($event) {\n $event.stopPropagation()\n $event.preventDefault()\n return (function () {})($event)\n }\n }\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n l0: l0,\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-tabbar.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-tabbar.vue?vue&type=script&lang=js&\"","<template>\r\n <view v-if=\"show\" class=\"tn-tabbar-class tn-tabbar\" @touchmove.stop.prevent=\"() => {}\">\r\n <!-- tabbar 内容-->\r\n <view\r\n class=\"tn-tabbar__content\"\r\n :class=\"{\r\n 'tn-tabbar--fixed': fixed,\r\n 'tn-safe-area-inset-bottom': safeAreaInsetBottom,\r\n 'tn-tabbar--shadow': shadow\r\n }\"\r\n :style=\"{\r\n height: height + 'rpx',\r\n backgroundColor: bgColor\r\n }\"\r\n >\r\n <!-- tabbar item -->\r\n <view\r\n v-for=\"(item, index) in list\"\r\n :key=\"index\"\r\n class=\"tn-tabbar__content__item\"\r\n :id=\"`tabbar_item_${index}`\"\r\n :class=\"{'tn-tabbar__content__item--out': item.out}\"\r\n :style=\"{\r\n backgroundColor: bgColor\r\n }\"\r\n @tap.stop=\"clickItemHandler(index)\"\r\n >\r\n <!-- tabbar item的图片或者icon-->\r\n <view :class=\"[itemButtonClass(index)]\"\r\n :style=\"[itemButtonStyle(index)]\"\r\n >\r\n <image\r\n v-if=\"isImage(index)\"\r\n :src=\"elIcon(index)\"\r\n mode=\"scaleToFill\"\r\n class=\"tn-tabbar__content__item__image\"\r\n :style=\"{\r\n width: `${item.iconSize || iconSize}rpx`,\r\n height: `${item.iconSize || iconSize}rpx`\r\n }\"\r\n ></image>\r\n <view\r\n v-else\r\n class=\"tn-tabbar__content__item__icon\"\r\n :class=\"[`tn-icon-${elIcon(index)}`,elIconColor(index, false)]\"\r\n :style=\"{\r\n fontSize: `${item.iconSize || iconSize}rpx`,\r\n color: elIconColor(index)\r\n }\"\r\n ></view>\r\n \r\n <!-- 角标-->\r\n <tn-badge\r\n v-if=\"!item.out && (item.count || item.dot)\"\r\n :dot=\"item.dot || false\"\r\n backgroundColor=\"tn-bg-red\"\r\n fontColor=\"#FFFFFF\"\r\n :radius=\"item.dot ? 14 : 0\"\r\n :fontSize=\"14\"\r\n padding=\"2rpx 4rpx\"\r\n :absolute=\"true\"\r\n :top=\"2\"\r\n >\r\n {{ $t.number.formatNumberString(item.count) }}\r\n </tn-badge>\r\n </view>\r\n \r\n <!-- tabbar item的文字-->\r\n <view\r\n class=\"tn-tabbar__content__item__text\"\r\n :class=\"[elColor(index, false)]\"\r\n :style=\"{\r\n color: elColor(index),\r\n fontSize: `${fontSize}rpx`\r\n }\"\r\n >\r\n <text class=\"tn-text-ellipsis\">{{ item.title }}</text>\r\n </view>\r\n </view>\r\n \r\n <!-- item 突起部分 -->\r\n <view\r\n v-if=\"outItemIndex !== -1\"\r\n class=\"tn-tabbar__content__out\"\r\n :class=\"[{\r\n 'tn-tabbar__content__out--shadow': shadow\r\n }, animation && value === outItemIndex ? `tn-tabbar__content__out--animation--${animationMode}` : '']\"\r\n :style=\"{\r\n backgroundColor: bgColor,\r\n left: outItemLeft,\r\n width: `${outHeight}rpx`,\r\n height: `${outHeight}rpx`,\r\n top: `-${outHeight * 0.3}rpx`\r\n }\"\r\n @tap.stop=\"clickItemHandler(outItemIndex)\"\r\n ></view>\r\n </view>\r\n \r\n <!-- 防止tabbar塌陷 -->\r\n <view class=\"tn-tabbar__placeholder\" :class=\"{'tn-safe-area-inset-bottom': safeAreaInsetBottom}\" :style=\"{\r\n height: `calc(${height}rpx)`\r\n }\"></view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n name: 'tn-tabbar',\r\n props: {\r\n // 绑定当前被选中的current值\r\n value: {\r\n type: [String, Number],\r\n default: 0\r\n },\r\n // 是否显示\r\n show: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 图标列表\r\n list: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n // 高度，单位rpx\r\n height: {\r\n type: Number,\r\n default: 100\r\n },\r\n // 突起的高度\r\n outHeight: {\r\n type: Number,\r\n default: 100\r\n },\r\n // 背景颜色\r\n bgColor: {\r\n type: String,\r\n default: '#FFFFFF'\r\n },\r\n // 图标大小\r\n iconSize: {\r\n type: Number,\r\n default: 40\r\n },\r\n // 字体大小\r\n fontSize: {\r\n type: Number,\r\n default: 24\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: '#AAAAAA'\r\n },\r\n // 激活时图标的颜色\r\n activeIconColor: {\r\n type: String,\r\n default: '#01BEFF'\r\n },\r\n // 非激活时图标的颜色\r\n inactiveIconColor: {\r\n type: String,\r\n default: '#AAAAAA'\r\n },\r\n // 激活时的自定义样式\r\n activeStyle: {\r\n type: Object,\r\n default() {\r\n return {}\r\n }\r\n },\r\n // 是否显示阴影\r\n shadow: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 点击时是否有动画\r\n animation: {\r\n type: Boolean,\r\n default: false\r\n },\r\n // 点击时的动画模式\r\n animationMode: {\r\n type: String,\r\n default: 'scale'\r\n },\r\n // 是否固定在底部\r\n fixed: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距\r\n safeAreaInsetBottom: {\r\n \ttype: Boolean,\r\n \tdefault: false\r\n },\r\n // 切换前回调\r\n beforeSwitch: {\r\n type: Function,\r\n default: null\r\n }\r\n },\r\n computed: {\r\n // 当前字体的颜色\r\n elColor() {\r\n return (index, style = true) => {\r\n let currentItem = this.list[index]\r\n let color = ''\r\n if (index === this.value) {\r\n color = currentItem['activeColor'] || this.activeColor\r\n } else {\r\n color = currentItem['inactiveColor'] || this.inactiveColor\r\n }\r\n // 判断是否获取内部样式\r\n if (style) {\r\n if (this.$t.color.getFontColorStyle(color) !== '') {\r\n return color\r\n } else {\r\n return ''\r\n }\r\n } else {\r\n if (this.$t.color.getFontColorStyle(color) === '') {\r\n return color\r\n } else {\r\n return ''\r\n }\r\n }\r\n }\r\n },\r\n // 当前图标的颜色\r\n elIconColor() {\r\n return (index, style = true) => {\r\n let currentItem = this.list[index]\r\n let color = ''\r\n if (index === this.value) {\r\n color = currentItem['activeIconColor'] || this.activeIconColor\r\n } else {\r\n color = currentItem['inactiveIconColor'] || this.inactiveIconColor\r\n }\r\n // 判断是否获取内部样式\r\n if (style) {\r\n if (this.$t.color.getFontColorStyle(color) !== '') {\r\n return color\r\n } else {\r\n return ''\r\n }\r\n } else {\r\n if (this.$t.color.getFontColorStyle(color) === '') {\r\n return color + ' tn-tabbar__content__item__icon--clip'\r\n } else {\r\n return ''\r\n }\r\n }\r\n }\r\n },\r\n // 当前的图标\r\n elIcon() {\r\n return (index) => {\r\n let currentItem = this.list[index]\r\n if (index === this.value) {\r\n return currentItem['activeIcon']\r\n } else {\r\n return currentItem['inactiveIcon']\r\n }\r\n }\r\n },\r\n // 突起部分item button对应的类\r\n itemButtonClass() {\r\n return (index) => {\r\n let clazz = ''\r\n if (this.list[index]['out']) {\r\n clazz += 'tn-tabbar__content__item__button--out'\r\n if (this.$t.color.getFontColorStyle(this.activeIconColor) === '') {\r\n clazz += ` ${this.activeIconColor}`\r\n }\r\n if (this.value === index) {\r\n clazz += ` tn-tabbar__content__item__button--out--animation--${this.animationMode}`\r\n }\r\n } else {\r\n clazz += 'tn-tabbar__content__item__button'\r\n if (this.value === index) {\r\n clazz += ` tn-tabbar__content__item__button--animation--${this.animationMode}`\r\n }\r\n }\r\n return clazz\r\n }\r\n },\r\n // 突起部分item button样式\r\n itemButtonStyle() {\r\n return (index) => {\r\n let style = {}\r\n if (this.list[index]['out']) {\r\n if (this.$t.color.getFontColorStyle(this.activeIconColor) !== '') {\r\n style.backgroundColor = this.activeIconColor\r\n }\r\n style.width = `${this.outHeight - 35}rpx`\r\n style.height = `${this.outHeight - 35}rpx`\r\n style.top = `-${this.outHeight * 0.15}rpx`\r\n \r\n return style\r\n }\r\n return style\r\n }\r\n },\r\n // 判断图标是否为图片\r\n isImage() {\r\n return (index) => {\r\n const icon = this.list[index]['activeIcon']\r\n // 只有包含了'/'就认为是图片\r\n return icon.indexOf('/') !== -1\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n // 当前突起的位置\r\n outItemLeft: '50%',\r\n // 当前设置了突起按钮的index\r\n outItemIndex: -1,\r\n // 每一个item的信息\r\n tabbatItemInfo: []\r\n }\r\n },\r\n watch: {\r\n \r\n },\r\n created() {\r\n this.getOutItemIndex()\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.getTabbarItem()\r\n })\r\n },\r\n methods: {\r\n // 获取每一个item的信息\r\n getTabbarItem() {\r\n let query = uni.createSelectorQuery().in(this)\r\n // 遍历获取信息\r\n for (let i = 0; i < this.list.length; i++) {\r\n query.select(`#tabbar_item_${i}`).fields({\r\n size: true,\r\n rect: true\r\n })\r\n }\r\n query.exec(res => {\r\n if (!res) {\r\n setTimeout(() => {\r\n this.getTabbarItem()\r\n }, 10)\r\n return\r\n }\r\n this.tabbatItemInfo = res.map((item) => {\r\n return {\r\n left: item.left,\r\n width: item.width\r\n }\r\n })\r\n this.updateOutItemLeft()\r\n })\r\n },\r\n // 获取突起Item所在的index(如果存在)\r\n getOutItemIndex() {\r\n this.outItemIndex = this.list.findIndex((item) => {\r\n return item.hasOwnProperty('out') && item.out\r\n })\r\n },\r\n // 点击底部菜单时触发\r\n async clickItemHandler(index) {\r\n if (this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {\r\n // 执行回调，同时传入索引当作参数\r\n // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this\r\n // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文\r\n let beforeSwitch = this.beforeSwitch.bind(this.$t.$parent.call(this))(index)\r\n // 判断是否返回了Promise\r\n if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {\r\n await beforeSwitch.then(res => {\r\n // Promise返回成功\r\n this.switchTab(index)\r\n }).catch(err => {\r\n \r\n })\r\n } else if (beforeSwitch === true) {\r\n this.switchTab(index)\r\n }\r\n } else {\r\n this.switchTab(index)\r\n }\r\n },\r\n // 切换tab\r\n switchTab(index) {\r\n // 发出事件和修改v-model绑定的值\r\n this.$emit('change', index)\r\n this.$emit('input', index)\r\n },\r\n // 设置突起的位置\r\n updateOutItemLeft() {\r\n // 查找出需要突起的元素\r\n const index = this.list.findIndex((item) => {\r\n return item.out\r\n })\r\n if (index !== -1) {\r\n this.outItemLeft = this.tabbatItemInfo[index].left + (this.tabbatItemInfo[index].width / 2) + 'px'\r\n }\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n .tn-tabbar {\r\n \r\n &__content {\r\n box-sizing: content-box;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n z-index: 1024;\r\n \r\n &__out {\r\n position: absolute;\r\n z-index: 4;\r\n border-radius: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n \r\n &--shadow {\r\n box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);\r\n \r\n &::before {\r\n content: \" \";\r\n position: absolute;\r\n width: 100%;\r\n height: 50rpx;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n margin: auto;\r\n background-color: inherit;\r\n }\r\n }\r\n \r\n &--animation {\r\n &--scale {\r\n transform-origin: 50% 100%;\r\n animation:tabbar-content-out-click 0.2s forwards 1 ease-in-out;\r\n }\r\n }\r\n }\r\n \r\n &__item {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 100%;\r\n position: relative;\r\n \r\n &__button {\r\n margin-bottom: 10rpx;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n \r\n &--out {\r\n margin-bottom: 10rpx;\r\n border-radius: 50%;\r\n position: absolute;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 6;\r\n \r\n &--animation {\r\n &--scale {\r\n transform-origin: 50% 100%;\r\n animation:tabbar-item-button-out-click 0.2s forwards 1;\r\n }\r\n }\r\n }\r\n \r\n &--animation {\r\n &--scale {\r\n .tn-tabbar__content__item__icon, .tn-tabbar__content__item__image {\r\n transform-origin: 50% 100%;\r\n animation:tabbar-item-button-click 0.2s forwards 1;\r\n }\r\n }\r\n }\r\n }\r\n \r\n &__icon {\r\n \r\n &--clip {\r\n -webkit-background-clip: text;\r\n color: transparent !important;\r\n }\r\n }\r\n \r\n &__text {\r\n width: 100%;\r\n font-size: 26rpx;\r\n line-height: 28rpx;\r\n text-align: center;\r\n margin-bottom: 10rpx;\r\n z-index: 10;\r\n transition: all 0.2s ease-in-out;\r\n }\r\n \r\n &--out {\r\n height: calc(100% - 1px);\r\n }\r\n }\r\n }\r\n \r\n &--fixed {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n }\r\n \r\n &--shadow {\r\n box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);\r\n }\r\n }\r\n \r\n /* 点击动画 start */\r\n \r\n @keyframes tabbar-item-button-click{\r\n from{\r\n transform: scale(0.8);\r\n }\r\n to{\r\n transform: scale(1);\r\n }\r\n }\r\n \r\n @keyframes tabbar-item-button-out-click {\r\n 0%{\r\n transform: translateY(0) scale(1);\r\n }\r\n 50%{\r\n transform: translateY(-10rpx) scale(1.2);\r\n }\r\n 100%{\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes tabbar-content-out-click {\r\n 0%{\r\n transform: translateX(-50%) translateY(0) scale(1);\r\n }\r\n 50% {\r\n transform: translateX(-50%) translateY(-10rpx) scale(1.1);\r\n }\r\n 100% {\r\n transform: translateX(-50%) translateY(0) scale(1);\r\n }\r\n }\r\n \r\n /* 点击动画 end */\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-tabbar.vue?vue&type=style&index=0&id=3972e4a0&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-tabbar.vue?vue&type=style&index=0&id=3972e4a0&lang=scss&scoped=true&\""],"sourceRoot":""}
|
