From 80321b0c7e200b2fa11d69f062d53e507174397f Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Thu, 27 Jan 2022 18:01:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=B8=80=E6=B3=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiTabPanes.vue | 66 +++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/AiTabPanes.vue

diff --git a/src/components/AiTabPanes.vue b/src/components/AiTabPanes.vue
new file mode 100644
index 00000000..a45a967a
--- /dev/null
+++ b/src/components/AiTabPanes.vue
@@ -0,0 +1,66 @@
+<template>
+  <section class="AiTabPanes">
+    <div class="item" :class="{active:value==i}" v-for="(item, i) in tabs" :key="i"
+         @click="handleClick(item,i)">{{ item }}
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiTabPanes",
+  data() {
+    return {}
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    tabs: {default: () => []}
+  },
+  methods: {
+    handleClick(item, index) {
+      this.$emit("change", index)
+      this.$emit("click", item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTabPanes {
+  width: 100vw;
+  height: 96px;
+  line-height: 96px;
+  background: #3975C6;
+  display: flex;
+
+  .item {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #CDDCF0;
+
+    &.active {
+      color: #fff;
+      font-weight: 500;
+      position: relative;
+
+      &:after {
+        content: " ";
+        width: 48px;
+        height: 4px;
+        background: #FFF;
+        position: absolute;
+        bottom: 14px;
+        left: 50%;
+        margin-left: -24px;
+      }
+    }
+  }
+}
+</style>