feat(report): 添加报告相关组件和 API
- 新增报告 API 文件,定义了多个后端请求方法 - 实现了多个报告相关组件,包括体型选择、基因风格、面部色彩维度等 - 添加了自定义 Swiper 组件和标签页组件 - 新增了一些工具函数,如数字转中文、获取最大元素等
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user