update 重构 将scss文件拆解 按具体功能细分文件 便于后续维护
This commit is contained in:
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="p-2 page-shell demo-demo-page">
|
||||
<div class="search-wrap">
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="table-panel">
|
||||
<template #header>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="p-2 page-shell demo-tree-page">
|
||||
<div class="search-wrap">
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="table-panel">
|
||||
<template #header>
|
||||
|
||||
@@ -215,23 +215,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -135,17 +135,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -269,23 +269,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -265,23 +265,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -330,23 +330,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -562,10 +562,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
@include pageShell.table-crud-page;
|
||||
|
||||
.data-table {
|
||||
.menu-name-cell {
|
||||
@@ -578,19 +577,6 @@ onMounted(() => {
|
||||
.menu-name-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -253,23 +253,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -349,23 +349,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -336,23 +336,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -374,33 +374,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dept-tree {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.tree-table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -508,23 +508,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -143,15 +143,12 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-user-shell {
|
||||
gap: 12px;
|
||||
}
|
||||
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
|
||||
|
||||
@include selectorDialog.shell-gap('.select-user-shell');
|
||||
@include selectorDialog.dialog-body-padding('select-user-dialog');
|
||||
|
||||
.select-user-card :deep(.el-card__body) {
|
||||
padding: 14px 16px !important;
|
||||
}
|
||||
|
||||
.select-user-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -703,33 +703,7 @@ async function handleDeptChange(value: number | string) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dept-tree {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.tree-table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -255,19 +255,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
|
||||
.el-tab-pane {
|
||||
background-color: #282c34;
|
||||
@@ -275,10 +265,4 @@ onMounted(() => {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user