web/bulletin-board-style1.git

New file
			@@ -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>