调整自动引入

components/AiTabbar/AiTabbar.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="AiTabbar">
+    <div class="tabPane" v-for="(op,i) in tabbars" :key="i"
+         @click="$emit('update:active',i)">
+      <img :src="op.icon" alt=""/>
+      <span :class="{active:i==active}">{{ op.text }}</span>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiTabbar",
+  props: {
+    active: {default: 0},
+    list: {default: () => []},
+  },
+  computed: {
+    tabbars() {
+      return this.list.map((e, i) => ({
+        ...e,
+        icon: i == this.active ? e.selectedIconPath : e.iconPath
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTabbar {
+  height: 98px;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  background: #FFFFFF;
+  border-top: 1px solid #ddd;
+  display: flex;
+  z-index: 9;
+
+  .tabPane {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    cursor: pointer;
+
+    & > img {
+      height: 44px;
+    }
+
+    & > span {
+      color: #C4CAD4;
+
+      &.active {
+        color: #3267F0;
+      }
+    }
+  }
+}
+</style>