From ba8a936772e4e2c58dd515d64d7cb7d7817bbe88 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期六, 28 十月 2023 18:50:42 +0800
Subject: [PATCH] Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn
---
src/views/dashboard/components/TaskTabs.vue | 80 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 80 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue
new file mode 100644
index 0000000..d2e3311
--- /dev/null
+++ b/src/views/dashboard/components/TaskTabs.vue
@@ -0,0 +1,80 @@
+<template>
+ <div class="task-tabs">
+ <div
+ v-for="tabName in list"
+ :key="tabName"
+ class="task-tab-item triangle-tip"
+ :class="{ active: props.modelValue === tabName }"
+ @click="selectTab(tabName)"
+ >
+ {{ tabName }}
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+ /** tab 鍒楄〃*/
+ list: string[]
+ /** 褰撳墠閫変腑鐨� tab*/
+ modelValue?: string
+}>()
+const emit = defineEmits<{
+ 'update:modelValue': [tabName: string]
+}>()
+const data = useVModel(props, 'modelValue', emit)
+
+function selectTab(tabName: string) {
+ data.value = tabName
+}
+</script>
+<style scoped lang="scss">
+$active-bg: #6b83ff;
+$tab-bg: #0b4694;
+$tab-height: 50px;
+.task-tabs {
+ background-color: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: $tab-height;
+ font-size: 20px;
+
+ .task-tab-item {
+ background-color: $tab-bg;
+ margin-right: 10px;
+ flex: 1;
+ height: $tab-height;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border-radius: 4px;
+ cursor: pointer;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ .active {
+ background-color: $active-bg;
+ font-weight: 600;
+ }
+ .triangle-tip:before {
+ content: '';
+ width: 0;
+ height: 0;
+ border-width: 10px 10px 0;
+ border-style: solid;
+ border-color: $active-bg transparent transparent;
+ position: absolute;
+ left: 50%;
+ margin-left: -10px;
+ bottom: -10px;
+ display: none;
+ }
+ .active.triangle-tip:before {
+ display: block;
+ }
+}
+</style>
--
Gitblit v1.8.0