chore: 自定义success按钮样式

This commit is contained in:
dap 2024-10-30 15:27:39 +08:00
parent b9edb5d493
commit 2400e8f729
5 changed files with 31 additions and 27 deletions

View File

@ -159,7 +159,7 @@ function setExpandOrCollapse(expand: boolean) {
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
class="btn-add"
class="btn-success"
v-access:code="['system:dept:add']"
@click="handleSubAdd(row)"
>
@ -185,15 +185,3 @@ function setExpandOrCollapse(expand: boolean) {
<DeptDrawer @reload="tableApi.query()" />
</Page>
</template>
<style lang="scss" scoped>
.btn-add {
color: hsl(var(--success)) !important;
border-color: hsl(var(--success)) !important;
&:hover {
color: hsl(var(--success) / 50%) !important;
border-color: hsl(var(--success) / 50%) !important;
}
}
</style>

View File

@ -167,7 +167,7 @@ const isAdmin = computed(() => {
<!-- '按钮类型'无法再添加子菜单 -->
<ghost-button
v-if="row.menuType !== 'F'"
class="btn-add"
class="btn-success"
v-access:code="['system:menu:add']"
@click="handleSubAdd(row)"
>
@ -194,15 +194,3 @@ const isAdmin = computed(() => {
</Page>
<Fallback v-else description="您没有菜单管理的访问权限" status="403" />
</template>
<style lang="scss" scoped>
.btn-add {
color: hsl(var(--success)) !important;
border-color: hsl(var(--success)) !important;
&:hover {
color: hsl(var(--success) / 50%) !important;
border-color: hsl(var(--success) / 50%) !important;
}
}
</style>

View File

@ -210,7 +210,10 @@ const isSuperAdmin = computed(() => {
placement="left"
@confirm="handleSync(row)"
>
<ghost-button v-access:code="['system:tenant:edit']">
<ghost-button
class="btn-success"
v-access:code="['system:tenant:edit']"
>
{{ $t('pages.common.sync') }}
</ghost-button>
</Popconfirm>

View File

@ -123,6 +123,7 @@ function collapseAll() {
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
class="btn-success"
v-access:code="['workflow:category:edit']"
@click.stop="handleAdd(row)"
>

View File

@ -100,3 +100,27 @@ vxe表格loading 只加载表格 不加载上面的表单
.vxe-grid.is--loading::before {
content: none !important;
}
/**
自定义success按钮样式
ghost按钮专用!
*/
.btn-success {
color: hsl(var(--success)) !important;
border-color: hsl(var(--success)) !important;
}
.btn-success:hover {
color: hsl(var(--success) / 50%) !important;
border-color: hsl(var(--success) / 50%) !important;
}
html.dark button[disabled].btn-success {
color: rgb(242 242 242 / 25%) !important;
border-color: hsl(240deg 3.7% 22%) !important;
}
button[disabled].btn-success {
color: rgb(50 54 57 / 25%) !important;
border-color: hsl(240deg 5.9% 90%) !important;
}