修改整体框架样式
This commit is contained in:
parent
867573285f
commit
beb8d79eaa
@ -46,6 +46,10 @@
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
.el-button-gry{
|
||||
background-color: #25bf82;
|
||||
border:none
|
||||
}
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
@ -70,6 +74,9 @@
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 400;
|
||||
}
|
||||
.custom-form-inline .el-input {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
.table-cont {
|
||||
min-height: 300px;
|
||||
@ -80,6 +87,16 @@
|
||||
.el-table__empty-text {
|
||||
width: 200px;
|
||||
}
|
||||
.el-button-custom{
|
||||
font-size: 14px !important;
|
||||
color: #25bf82;
|
||||
padding: 0;
|
||||
}
|
||||
.el-button-delete{
|
||||
font-size: 14px !important;
|
||||
color: #ff4d4f;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义弹窗样式 */
|
||||
@ -212,12 +229,13 @@
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 3px 0;
|
||||
|
||||
}
|
||||
.el-icon-custom {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
// color: #fff;
|
||||
}
|
||||
.table-cell-img-box {
|
||||
width: 60px;
|
||||
|
||||
@ -9,9 +9,9 @@ $yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// 默认主题变量
|
||||
$menuText: #bfcbd9;
|
||||
$menuText: #000;
|
||||
$menuActiveText: #409eff;
|
||||
$menuBg: #304156;
|
||||
$menuBg: #fff;
|
||||
$menuHover: #263445;
|
||||
|
||||
// 浅色主题theme-light
|
||||
@ -25,11 +25,11 @@ $base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-menu-color: #000;
|
||||
$base-menu-color-active: #25bf82;
|
||||
$base-menu-background: #fff;
|
||||
$base-sub-menu-background: #fff;
|
||||
$base-sub-menu-hover: rgba(64, 158, 255, 0.1);
|
||||
|
||||
// 组件变量
|
||||
$--color-primary: #409EFF;
|
||||
|
||||
@ -36,10 +36,11 @@
|
||||
<el-table-column
|
||||
v-if="showSelection"
|
||||
type="selection"
|
||||
width="55"
|
||||
width="30"
|
||||
align="center"
|
||||
fixed
|
||||
/>
|
||||
<el-table-column label="排序" width="60" v-if="showSort">
|
||||
<el-table-column label="排序" width="50" v-if="showSort" fixed>
|
||||
<template #default="{ $index }">
|
||||
{{ (currentPage - 1) * pageSize + $index + 1 }}
|
||||
</template>
|
||||
@ -50,7 +51,7 @@
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
:width="column.width"
|
||||
:align="column.align || 'left'"
|
||||
:align="column.align || 'center'"
|
||||
:sortable="column.sortable"
|
||||
:header-class-name="column.headerClassName"
|
||||
>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
:background-color="getMenuBackground"
|
||||
:text-color="getMenuTextColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="theme"
|
||||
active-text-color="#25bf82"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
:class="sideTheme"
|
||||
|
||||
@ -291,7 +291,7 @@ function handleScroll() {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
background-color: #42b983 !important;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" class="el-button-gry" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,27 +85,9 @@
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<More />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-button text class="el-button-custom" :dark="isDark" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||
<el-button text class="el-button-custom" :dark="isDark" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button text class="el-button-delete" :dark="isDark" @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
@ -179,7 +161,7 @@ const columns = ref([
|
||||
{ prop: "userCategory", label: "用户分类" },
|
||||
{ prop: "unitPrice", label: "客单价" },
|
||||
{ prop: "ordersNums", label: "订单数目" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
{ prop: "action", label: "操作", slotName: "action",width: "140",align: "center" },
|
||||
]);
|
||||
|
||||
// 生成食物主题昵称
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user