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