<template> <div> <a-card title=""> <div class="box"> <div class="box_son"> <a-card-grid style="width: 50%; text-align: center"> 名称 </a-card-grid> <a-card-grid style="width: 50%; text-align: center"> 价格（元/Nm³） </a-card-grid> <a-card-grid style="width: 50%; text-align: center" :hoverable="false"> 氩气 </a-card-grid> <a-card-grid style="width: 50%; text-align: center" :hoverable="false"> <a-input v-model="queryParam.YangThree" allow-clear placeholder="请输入氩气价格" type="number" /> </a-card-grid> </div> </div> </a-card> </div> </template> <script> export default { data() { return { queryParam: { YangOne: '', YangTwo: '', YangThree: '', }, } }, methods: {}, } </script> <style lang="less" scoped> .box { width: 100%; } .box_son { width: 60%; } </style>

根据你提供的代码，我猜测可能是 input 元素的高度和行高问题导致了卡片高度变高。你可以尝试在样式表中添加以下代码：

/* 设置 input 元素的高度和行高 */
input {
  height: auto;
  line-height: normal;
}

/* 设置卡片组件的高度为 auto */
a-card {
  height: auto;
}

这样应该可以解决卡片高度变高的问题。同时，你也可以根据实际情况调整样式表中的具体数值。