.card-top-content { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; margin-bottom: 10px; } /* 对于按钮和图标的容器 */ .buttons-container { display: flex; align-items: center; justify-content: flex-end; /* 使按钮组靠右对齐 */ } .card-button, span[nz-icon] { margin-left: 0.5rem; /* 为按钮和图标添加一些间隔 */ } .card-button { cursor: pointer; /* 更好的用户体验,表明这是一个可点击的按钮 */ width: 82px; height: 40px; font-size: 26px; line-height: 20px; color: rgb(0 239 248 / 100%); text-align: center; background-color: rgb(33 48 105 / 100%); border: none; /* 假设你不想要边框 */ border-radius: 3px; } .card-content { overflow: hidden; margin-bottom: 0.5rem; //height: 18rem; padding: 1rem 1.5rem; padding: 1rem; /* 调整内边距以适应内容 */ //position: relative; background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); background-repeat: no-repeat; /* 防止背景图片重复 */ background-position: center; // background-position: top; background-size: 100% 100%; .card-content-title { display: flex; flex-grow: 1; /* 允许标题占据多余空间 */ align-items: center; /* 确保子元素垂直居中 */ justify-content: space-between; width: fit-content; height: fit-content; margin-bottom: 0.5rem; padding: 5px 20px 0; /* 文本的内边距 */ /* 根据需要调整字体大小 font-weight: bold; /* 字体加粗 */ padding: 5px 20px; /* 根据实际情况调整这里的内边距 */ font-size: 28px; font-weight: 600; line-height: 22px; /* 字体颜色 */ color: #74FAFB; color: rgb(0 239 248 / 100%); text-align: center; /* 文本居中对齐 */ background-color: #19426E; /* 设置背景颜色为深蓝色 */ border: 1px solid #1f6f97; /* 设置边框颜色 */ border-radius: 10px 10px 0 0; /* 上面是圆角,下面是直角 */ box-shadow: inset 0 0 10px #1f6f97; /* 内阴影效果 */ .card-content-l { flex: 1; align-self: flex-start; /* 占据剩余空间 */ } .card-content-r { align-self: flex-end; } } }