From 1016c334ed66e3a88a2172506408fcfc10f71aa0 Mon Sep 17 00:00:00 2001 From: WindowBird <13870814+windows-bird@user.noreply.gitee.com> Date: Mon, 24 Nov 2025 14:03:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E7=AE=A1=E7=90=86gemini?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/task/manage/index.vue | 199 ++++++++++++++++++++++++++++-------- 1 file changed, 155 insertions(+), 44 deletions(-) diff --git a/pages/task/manage/index.vue b/pages/task/manage/index.vue index 59446d8..7380181 100644 --- a/pages/task/manage/index.vue +++ b/pages/task/manage/index.vue @@ -34,21 +34,21 @@ 项目 - + {{ filterForm.projectName }} 请选择项目 类型 - + {{ filterForm.typeName }} 请选择类型 优先级 - + {{ filterForm.levelName }} 请选择优先级 @@ -58,14 +58,14 @@ 创建人 - + {{ filterForm.createUserName }} 请选择用户 负责人 - + {{ filterForm.ownerUserName }} 请选择用户 @@ -84,14 +84,14 @@ 全部 逾期 @@ -104,21 +104,21 @@ 完成日期 - + {{ filterForm.passDateRangeText }} 请选择日期 开始日期 - + {{ filterForm.expireTimeStart }} 请选择日期 结束日期 - + {{ filterForm.expireTimeEnd }} 请选择日期 @@ -948,24 +948,42 @@ onMounted(() => { .filter-panel { background-color: #fff; - padding: 16px; + padding: 20px 16px; border-bottom: 1px solid #e4e7ed; position: fixed; top: 48px; right: 0; left: 0; z-index: 99; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); animation: slideDown 0.3s ease; - max-height: 70vh; + max-height: 75vh; overflow-y: auto; margin-top: 0; + + // 优化滚动条样式 + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: #d0d0d0; + border-radius: 2px; + + &:hover { + background: #b0b0b0; + } + } } @keyframes slideDown { from { opacity: 0; - transform: translateY(-10px); + transform: translateY(-20px); } to { opacity: 1; @@ -976,7 +994,7 @@ onMounted(() => { .filter-row { display: flex; gap: 12px; - margin-bottom: 12px; + margin-bottom: 16px; &:last-child { margin-bottom: 0; @@ -987,7 +1005,7 @@ onMounted(() => { flex: 1; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; &.full-width { flex: 1 1 100%; @@ -995,36 +1013,72 @@ onMounted(() => { } .filter-label { - font-size: 14px; + font-size: 13px; color: #606266; font-weight: 500; + margin-bottom: 2px; + letter-spacing: 0.3px; } .filter-value { display: flex; align-items: center; justify-content: space-between; - background: #f5f5f5; - border-radius: 8px; - padding: 8px 12px; - min-height: 36px; + background: #f8f9fa; + border: 1px solid #e4e7ed; + border-radius: 10px; + padding: 10px 14px; + min-height: 40px; + transition: all 0.2s; + position: relative; + + &:active { + background: #f0f2f5; + border-color: #2885ff; + transform: scale(0.98); + } + + // 当有选中值时，改变背景色 + &.has-value { + background: #f0f7ff; + border-color: #c6e2ff; + + &::after { + border-color: #2885ff; + } + } + + // 添加右侧箭头图标 + &::after { + content: ''; + width: 6px; + height: 6px; + border-right: 2px solid #909399; + border-bottom: 2px solid #909399; + transform: rotate(-45deg); + margin-left: 8px; + flex-shrink: 0; + transition: all 0.2s; + } } .value-text { font-size: 14px; - color: #333; + color: #2885ff; flex: 1; + font-weight: 500; } .placeholder { font-size: 14px; - color: #999; + color: #909399; flex: 1; } .overdue-options { display: flex; - gap: 12px; + gap: 10px; + margin-top: 4px; } .overdue-option { @@ -1032,25 +1086,72 @@ onMounted(() => { display: flex; align-items: center; justify-content: center; - background: #f5f5f5; - border-radius: 8px; - padding: 8px; - border: 2px solid transparent; - transition: all 0.2s; + background: #f8f9fa; + border: 1.5px solid #e4e7ed; + border-radius: 10px; + padding: 10px 12px; + font-size: 14px; + color: #606266; + transition: all 0.25s; + cursor: pointer; + + &:active { + transform: scale(0.98); + } &.active { - background: #e3f2fd; + background: linear-gradient(135deg, #e3f2fd 0%, #e8f4fd 100%); border-color: #2885ff; color: #2885ff; - font-weight: 500; + font-weight: 600; + box-shadow: 0 2px 8px rgba(40, 133, 255, 0.15); + } + + // 逾期选项特殊样式 + &.overdue-danger { + &.active { + background: linear-gradient(135deg, #fef0f0 0%, #fef5f5 100%); + border-color: #f56c6c; + color: #f56c6c; + box-shadow: 0 2px 8px rgba(245, 108, 108, 0.15); + } + } + + // 正常选项特殊样式 + &.overdue-success { + &.active { + background: linear-gradient(135deg, #f0f9ff 0%, #f5fbfd 100%); + border-color: #67c23a; + color: #67c23a; + box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15); + } } } .filter-actions { display: flex; gap: 12px; - margin-top: 16px; + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid #f0f2f5; justify-content: flex-end; + position: sticky; + bottom: 0; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #fff 100%); + backdrop-filter: blur(10px); + z-index: 10; + + // 优化按钮样式 + :deep(.uv-button) { + min-width: 80px; + border-radius: 8px; + font-weight: 500; + transition: all 0.2s; + + &:active { + transform: scale(0.98); + } + } } .btn-icon { @@ -1117,33 +1218,43 @@ onMounted(() => { .sort-options-filter { display: flex; - gap: 12px; - margin-top: 8px; + gap: 10px; + margin-top: 4px; + flex-wrap: wrap; } .sort-option-filter { flex: 1; + min-width: 80px; display: flex; align-items: center; justify-content: center; - gap: 4px; - background: #f5f5f5; - border-radius: 8px; - padding: 8px; - border: 2px solid transparent; + gap: 6px; + background: #f8f9fa; + border: 1.5px solid #e4e7ed; + border-radius: 10px; + padding: 10px 12px; font-size: 14px; - color: #666; - transition: all 0.2s; + color: #606266; + transition: all 0.25s; + cursor: pointer; + + &:active { + transform: scale(0.98); + } &.active { - background: #e3f2fd; + background: linear-gradient(135deg, #e3f2fd 0%, #e8f4fd 100%); border-color: #2885ff; color: #2885ff; - font-weight: 500; + font-weight: 600; + box-shadow: 0 2px 8px rgba(40, 133, 255, 0.15); } .sort-arrow { - font-size: 12px; + font-size: 13px; + font-weight: 600; + margin-left: 2px; } }