auseft.platform.datav/src/app/routes/data-v/lj-card/lj-card.component.less

.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;
        }
    }
}