提交代码

src/components/aboutTable/PageTitle.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="pageTitle" :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
+    <div class="title">
+      <ul class="flex" v-if="Array.isArray(title)">
+        <li :class=" idx == active ? 'hedBtn':''" @click="handleBtn(it,idx)" class="pointer ml10 mr10" v-for="(it,idx) in title" :key="it">{{ it }}</li>
+      </ul>
+      <div class="font" v-else>{{ title }}</div>
+    </div>
+    <div class="cnetr">
+      <slot name="center"></slot>
+    </div>
+    <div class="right">
+      <slot> </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+defineProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  marginBottom: {
+    type: Number,
+    default: 0
+  },
+  active: {
+    type: Number,
+    default: 0
+  },
+  backgroundColor: {
+    type: String,
+    default: "rgb(255, 255, 255, 0)"
+  }
+});
+
+const emit = defineEmits(["update:active","change"]);
+
+const handleBtn = (it, idx) => {
+  emit("update:active", idx);
+  emit("change", idx);
+};
+
+</script>
+ 
+<style lang = "scss" scoped>
+.pageTitle {
+  width: 100%;
+  border-radius: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 52px;
+  .title {
+    display: flex;
+    margin: auto 0;
+    .icon {
+      margin: auto 0;
+    }
+    .font {
+      vertical-align: middle;
+      font-size: 18px;
+    }
+  }
+  .hedBtn{
+    color: #0072ff;
+  }
+}
+</style>