DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页普适优化

Browse Source
This commit is contained in:
朱昊天
2026-07-09 14:17:20 +08:00
parent d630920c06
commit 3a8d2cfa9a
2 changed files with 425 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
klp-ui/src/components/HomeModules/QuickAccessGroup.vue
View File

@@ -24,8 +24,8 @@
<span class="debug-value">{{ mergedItemsText }}</span>
</div>
</div> -->
<el-row :gutter="10" class="panel-group">
<el-col :xs="24" :sm="12" :md="12" :lg="12" class="card-panel-col" v-for="item in homeItems" :key="item.key">
<el-row :gutter="8" class="panel-group">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="card-panel-col" v-for="item in homeItems" :key="item.key">
<div class="card-panel" :class="{ 'is-add': item.isAdd }" @click="handleCardClick(item)">
<template v-if="item.isAdd">
<div class="card-panel-add">
@@ -52,7 +52,7 @@
</el-col>
</el-row>
<el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog">
<el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog" append-to-body>
<div class="quick-access-config-bar">
<el-form inline size="mini">
<el-form-item label="用户">
@@ -1185,7 +1185,7 @@ export default {
<style lang="scss" scoped>
.quick-access {
margin-top: 18px;
margin-top: 0;
}
.quick-access-debug-bar {
@@ -1395,11 +1395,11 @@ export default {
.panel-group {
.card-panel-col {
margin-bottom: 32px;
margin-bottom: 8px;
}
.card-panel {
height: 108px;
height: 72px;
cursor: pointer;
font-size: 12px;
position: relative;
@@ -1408,75 +1408,78 @@ export default {
align-items: center;
color: #666;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border: 1px solid #ebeef5;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
&:hover {
transform: translateY(-3px);
border-color: rgba(64, 158, 255, 0.35);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
border-color: rgba(64, 158, 255, 0.28);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
.card-panel-icon-wrapper {
color: #fff;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
border-color: rgba(64, 158, 255, 0.18);
background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
}
}
&.is-add {
border-style: dashed;
background: #fafafa;
background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
justify-content: center;
}
&.is-add:hover {
border-color: rgba(64, 158, 255, 0.5);
background: rgba(64, 158, 255, 0.04);
background: rgba(64, 158, 255, 0.03);
.card-panel-add-icon {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
color: #fff;
box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
border-color: rgba(64, 158, 255, 0.18);
background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
}
}
.card-panel-icon-wrapper {
flex: 0 0 auto;
margin: 0 14px 0 14px;
padding: 16px;
width: 34px;
height: 34px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s ease;
border-radius: 10px;
border-radius: 8px;
color: #409eff;
background: linear-gradient(135deg, rgba(64, 158, 255, 0.18) 0%, rgba(64, 158, 255, 0.08) 100%);
box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
border: 1px solid rgba(64, 158, 255, 0.12);
background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
}
.card-panel-icon {
font-size: 34px;
font-size: 16px;
}
.card-panel-description {
flex: 1;
min-width: 0;
font-weight: 600;
margin: 0 18px 0 0;
font-weight: 500;
margin: 0 10px 0 0;
.card-panel-text {
line-height: 20px;
line-height: 17px;
color: rgba(0, 0, 0, 0.75);
font-size: 16px;
margin-bottom: 6px;
font-size: 13px;
margin-bottom: 1px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-panel-subtext {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
line-height: 16px;
font-size: 10px;
color: #909399;
line-height: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1492,40 +1495,41 @@ export default {
.card-panel-add-icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
margin: 0 14px 0 14px;
border-radius: 12px;
width: 34px;
height: 34px;
margin: 0 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-size: 16px;
color: #409eff;
background: rgba(64, 158, 255, 0.12);
border: 1px solid rgba(64, 158, 255, 0.12);
background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
transition: all 0.18s ease;
box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
}
.card-panel-add-text {
flex: 1;
min-width: 0;
margin: 0 18px 0 0;
font-weight: 600;
margin: 0 10px 0 0;
font-weight: 500;
.card-panel-text {
line-height: 20px;
line-height: 17px;
color: rgba(0, 0, 0, 0.75);
font-size: 16px;
margin-bottom: 6px;
font-size: 13px;
margin-bottom: 1px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-panel-subtext {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
line-height: 16px;
font-size: 10px;
color: #909399;
line-height: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1555,25 +1559,32 @@ export default {
.panel-group {
.card-panel {
.card-panel-icon-wrapper {
margin-right: 10px;
padding: 14px;
width: 32px;
height: 32px;
}
.card-panel-icon {
font-size: 30px;
font-size: 15px;
}
.card-panel-description {
margin-right: 12px;
.card-panel-text {
font-size: 15px;
font-size: 12px;
}
}
}
}
}
@media screen and (min-width: 1200px) {
.panel-group {
.card-panel-col {
flex: 0 0 20%;
max-width: 20%;
}
}
}
@media screen and (max-width: 768px) {
.quick-access-config-body {
flex-direction: column;
@@ -1587,26 +1598,48 @@ export default {
.panel-group {
.card-panel {
height: 92px;
height: 68px;
.card-panel-icon-wrapper {
padding: 12px;
margin: 0 8px;
width: 30px;
height: 30px;
}
.card-panel-icon {
font-size: 24px;
font-size: 14px;
}
.card-panel-description {
margin-right: 10px;
margin-right: 8px;
.card-panel-text {
font-size: 14px;
margin-bottom: 6px;
font-size: 12px;
margin-bottom: 1px;
}
.card-panel-subtext {
font-size: 10px;
}
}
.card-panel-add-icon {
width: 30px;
height: 30px;
margin: 0 8px;
font-size: 14px;
}
.card-panel-add-text {
margin-right: 8px;
.card-panel-text {
font-size: 12px;
margin-bottom: 1px;
}
.card-panel-subtext {
font-size: 10px;
}
}
}