uni-app修改uni-table样式

uni-app修改uni-table样式

::v-deep .uni-table {
    background-color: #fff7f8;  // 修改背景色
    border-radius: 15px; // 改圆角

    // 改表头字体样式
    .uni-table-th,
    .uni-table-th-content {
        color: #d12110;
        font-size: 26rpx;
        font-weight: normal;
    }

    // 改表内容字体样式
    .uni-table-td {
        color: #60394c;
        font-size: 24rpx;
    }

    // 去掉分割线
    .uni-table-th,
    .uni-table-td {
        border-bottom: none;
    }

    // 表头改分割线
    // #ifdef MP-WEIXIN
    .uni-table-th {
        border-bottom: 0.5px solid rgba(96, 57, 76, 0.1);
    }
    // #endif

    .uni-table-tr {
        &:first-child {
            position: relative;

            &::after {
                width: calc(100% - 20px);
                height: 0.5px;
                display: block;
                content: '';
                position: absolute;
                bottom: 0;
                left: 20rpx;
                background-color: rgba(96, 57, 76, 0.1);
            }
        }
    }

    // 空白文案区域修改
    .uni-table-loading {
        height: 200rpx;

        .uni-table-text {
            line-height: 200rpx !important;
        }
}

效果图如下：

.uni-table-tr {
    &:first-child {
        background-color: #FEE3FB; 

        .uni-table-th {
            &:first-child {
                border-top-left-radius: 20rpx; 
            }

            &:last-child {
                border-top-right-radius: 20rpx;
                // #ifdef MP-WEIXIN
                color: #FB404D;
                font-weight: bold;
                // #endif

                // #ifdef H5
                .uni-table-th-content {
                    color: #FB404D;
                    font-weight: bold;
                }
                // #endif
            }
        }
    }
}

效果图如下：