gold-vue/src/assets/css/btn.css

/*各个页面的按钮激活*/

/*使用示例
import '@/css/btn.css';

<el-button
class="no-active-btn"
:class="{ 'active-btn': activeTab === 'rechargeAudit' }"
@click="navigateTo('rechargeAudit')"
v-if="hasRecharge"
>
充值审核
</el-button>
*/


/* 默认按钮样式 */
.no-active-btn {
    background-color: #E5EBFE; /* 未激活背景色 */
    color: #666; /* 未激活文字色 */
    /* 确保激活状态下 hover 也不变化 */
    &:hover {
        background-color: #668BFF !important; /* 保持默认背景色 */
        color: #fff !important; /* 保持默认文字色 */
        border-color: transparent; /* 若有边框，保持默认 */
    }
}

/* 激活状态样式 */
.active-btn {
    background-color: #2741DE; /* 激活背景色 */
    color: white; /* 激活文字色 */
    /* 确保激活状态下 hover 也不变化 */
    &:hover {
        background-color: #2741DE !important;
        color: white !important;
        border-color: transparent;
    }
}
/** ----------------------------------**/
/** 通过驳回按钮 使用的是el-link **/
.pass-btn {
    color: #2741DE;
    margin-right: 5px;
}
.reject-btn {
    color: #2741DE;
    margin-left: 5px;
}

/* 清除hover状态的样式变化 */
.pass-btn:hover,
.reject-btn:hover {
    color: #2741DE; /* 保持与默认状态相同的颜色 */
}
/** ----------------------------------**/

/** ----------------------------------**/
/** 编辑 按钮 使用的是el-link **/
.edit-btn {
    color: #2741DE;
}
.edit-btn:hover{
    color: #2741DE; /* 保持与默认状态相同的颜色 */
}
/** ----------------------------------**/


/** ----------------------------------**/
.el-pagination .el-pager li.is-active {
    background-color: #2741DE !important;
    color: #FFFFFF !important;
}