<template>
<div style="height: 100%;">
<div class="flex-wrap">
<div class="card-container flex-item flex1">
<a-tabs v-model:activeKey="activeKey" type="card" class="tabs">
<a-tab-pane v-for="item in tabList" :key="item.value" :tab="item.title" force-render>{{
item.value }}</a-tab-pane>
</a-tabs>
</div>
<div class="card-container flex-item">
<a-tabs v-model:activeKey="infoKey" type="card" class="tabs tabs-r">
<a-tab-pane v-for="item in infoList" :key="item.value" :tab="item.title" force-render>{{
item.value }}</a-tab-pane>
</a-tabs>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
const activeKey = ref("value1");
const tabList = reactive([
{ title: "活动", value: "value1" },
{ title: "详细资料", value: "value2" }
]);
const infoKey = ref("value1");
const infoList = reactive([
{ title: "重要信息", value: "value1" }
]);
</script>
<style lang="less" scoped>
.flex-wrap {
display: flex;
height: calc(100% - 142px); // 减去页面上方内容高度
.flex1 {
flex: 1
}
.flex-item {
padding-top: 15px;
background-color: #f5f6f9;
.tabs {
border: 1px solid #e6e6e6;
height: 100%;
}
.tabs-r {
width: 300px;
height: 100%;
margin-left: 15px;
}
}
}
</style>
页面预览: