liguigong
918d89eeae
- 新增报告 API 文件，定义了多个后端请求方法 - 实现了多个报告相关组件，包括体型选择、基因风格、面部色彩维度等 - 添加了自定义 Swiper 组件和标签页组件 - 新增了一些工具函数，如数字转中文、获取最大元素等
67 lines
1.1 KiB
Vue
67 lines
1.1 KiB
Vue
<template>
|
|
<view class="tabs">
|
|
<view class="tabs-header">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
:class="['tab-item', { active: index === activeTab }]"
|
|
@click="onTabClick(index)"
|
|
>
|
|
{{ tab.name }}
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Tabs",
|
|
props: {
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
activeTab: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
emits: ["update:activeTab"],
|
|
methods: {
|
|
onTabClick(index) {
|
|
this.$emit("update:activeTab", index);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tabs {
|
|
width: 100%;
|
|
padding: 0 0 0 10px;
|
|
background-color: #fff;
|
|
}
|
|
.tabs-header {
|
|
display: flex;
|
|
/* border-bottom: 1px solid #eee; */
|
|
margin-bottom: 16px;
|
|
}
|
|
.tab-item {
|
|
padding: 10px 10px;
|
|
cursor: pointer;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
.tab-item.active {
|
|
color: rgba(3, 28, 36, 1);
|
|
border-bottom: 2px solid rgba(3, 28, 36, 1);
|
|
font-weight: bold;
|
|
}
|
|
/* .tabs-content {
|
|
padding-bottom: 16px;
|
|
} */
|
|
</style>
|