根据uniapp调整工程结构

components/AiTabs.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="AiTabs" :class="{wrap}">
+    <div class="tabItem" v-for="(op,i) in ops" :key="i"
+         :class="{active:value==op.value,plain}"
+         :style="{width:itemWidth}"
+         @tap="$emit('change',op.value)">
+      {{ op.name }}
+    </div>
+    <div class="end">
+      <slot name="end"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiTabs",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    ops: {default: () => []},
+    wrap: Boolean,
+    plain: Boolean,
+    itemWidth: String
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  max-height: 240px;
+  overflow-y: auto;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  .tabItem {
+    flex-shrink: 0;
+    min-width: 144px;
+    max-width: 100%;
+    min-height: 64px;
+    font-size: 28px;
+    font-weight: 400;
+    color: #666;
+    background: #FFFFFF;
+    border-radius: 4px;
+    border: 1px solid #CCC;
+    text-align: center;
+    line-height: 64px;
+    margin-bottom: 16px;
+    margin-right: 16px;
+    padding: 0 16px;
+    box-sizing: border-box;
+
+    &.active {
+      border-color: $uni-color-primary;
+      color: $uni-color-primary;
+
+      &.plain {
+        color: #fff;
+        border-color: transparent;
+        background: $uni-color-primary;
+      }
+    }
+  }
+
+  .end {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>