AntDesign中card卡片动态添加bodystyle样式，实现body切换

业务效果

核心代码

<template>
  <a-layout class="layout">
    <a-layout-header class="header" style="height: 50px">
      <div class="wrapper content">
        <span class="info">非标数据</span>
        <span class="backBtn">
          <img src="@/assets/data/u279.svg"/>
          返回
        </span>
      </div>
    </a-layout-header>
    <a-layout-content class="main" style="margin-top: 25px;">
      <div class="wrapper content">
        <a-card title="查询条件" headStyle="background: #f3f3f3"
                :bodyStyle='bodyStyle'>
          <template #extra>
            <a-button type="link" @click="formVisible = !formVisible" style="font-size: 13px;border: none">收起筛选</a-button>
            <a-button>查询结果</a-button>
          </template>
          <p>card content</p>
          <p>card content</p>
          <p>card content</p>
        </a-card>
      </div>
    </a-layout-content>
 
  </a-layout>
</template>
 
<script setup lang='ts'>
import {ref, reactive, watch, computed} from "vue"
 
const formVisible = ref(true);
 
const bodyStyle = computed(() => {
  console.log('formVisible', formVisible)
  return formVisible.value ? {"display": "block"} : {"display": "none"}
})
</script>