任务管理gemini样式优化
This commit is contained in:
WindowBird
parent
5f426400b6
commit
1016c334ed
|
|
@ -34,21 +34,21 @@
|
|||
<view class="filter-row">
|
||||
<view class="filter-item" @click="openProjectPicker">
|
||||
<text class="filter-label">项目</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.projectName }">
|
||||
<text v-if="filterForm.projectName" class="value-text">{{ filterForm.projectName }}</text>
|
||||
<text v-else class="placeholder">请选择项目</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item" @click="openTypePicker">
|
||||
<text class="filter-label">类型</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.typeName }">
|
||||
<text v-if="filterForm.typeName" class="value-text">{{ filterForm.typeName }}</text>
|
||||
<text v-else class="placeholder">请选择类型</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item" @click="openLevelPicker">
|
||||
<text class="filter-label">优先级</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.levelName }">
|
||||
<text v-if="filterForm.levelName" class="value-text">{{ filterForm.levelName }}</text>
|
||||
<text v-else class="placeholder">请选择优先级</text>
|
||||
</view>
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
<view class="filter-row">
|
||||
<view class="filter-item" @click="openCreateUserPicker">
|
||||
<text class="filter-label">创建人</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.createUserName }">
|
||||
<text v-if="filterForm.createUserName" class="value-text">{{ filterForm.createUserName }}</text>
|
||||
<text v-else class="placeholder">请选择用户</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item" @click="openOwnerPicker">
|
||||
<text class="filter-label">负责人</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.ownerUserName }">
|
||||
<text v-if="filterForm.ownerUserName" class="value-text">{{ filterForm.ownerUserName }}</text>
|
||||
<text v-else class="placeholder">请选择用户</text>
|
||||
</view>
|
||||
|
|
@ -84,14 +84,14 @@
|
|||
全部
|
||||
</view>
|
||||
<view
|
||||
class="overdue-option"
|
||||
class="overdue-option overdue-danger"
|
||||
:class="{ active: filterForm.overdue === true }"
|
||||
@click="selectOverdue(true)"
|
||||
>
|
||||
逾期
|
||||
</view>
|
||||
<view
|
||||
class="overdue-option"
|
||||
class="overdue-option overdue-success"
|
||||
:class="{ active: filterForm.overdue === false }"
|
||||
@click="selectOverdue(false)"
|
||||
>
|
||||
|
|
@ -104,21 +104,21 @@
|
|||
<view class="filter-row">
|
||||
<view class="filter-item" @click="openPassDatePicker">
|
||||
<text class="filter-label">完成日期</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.passDateRangeText }">
|
||||
<text v-if="filterForm.passDateRangeText" class="value-text">{{ filterForm.passDateRangeText }}</text>
|
||||
<text v-else class="placeholder">请选择日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item" @click="openExpireDatePicker">
|
||||
<text class="filter-label">开始日期</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.expireTimeStart }">
|
||||
<text v-if="filterForm.expireTimeStart" class="value-text">{{ filterForm.expireTimeStart }}</text>
|
||||
<text v-else class="placeholder">请选择日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item" @click="openExpireEndDatePicker">
|
||||
<text class="filter-label">结束日期</text>
|
||||
<view class="filter-value">
|
||||
<view class="filter-value" :class="{ 'has-value': filterForm.expireTimeEnd }">
|
||||
<text v-if="filterForm.expireTimeEnd" class="value-text">{{ filterForm.expireTimeEnd }}</text>
|
||||
<text v-else class="placeholder">请选择日期</text>
|
||||
</view>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user