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

样式微调

Browse Source
This commit is contained in:
砂糖
2025-07-12 13:46:29 +08:00
parent ee8f63e965
commit 80688b3239
3 changed files with 83 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/workbench/task/components/TaskList.vue
View File

@@ -51,7 +51,7 @@
<!-- 置顶标识 -->
<view v-if="task.ownRank === 1" class="top-badge">
<uni-icons type="arrow-up" size="12" color="#ff9500"></uni-icons>
<uni-icons type="arrow-up" size="12" color="#007aff"></uni-icons>
</view>
</view>
</uni-swipe-action-item>
@@ -130,7 +130,7 @@ export default {
options.push({
text: '置顶',
style: {
backgroundColor: '#ff9500',
backgroundColor: '#007aff',
color: '#fff'
}
})
@@ -300,8 +300,8 @@ export default {
transition: all 0.2s ease;
&.checked {
background-color: #ff9500;
border-color: #ff9500;
background-color: $im-primary;
border-color: $im-primary;
}
&.disabled {
@@ -372,15 +372,15 @@ export default {
position: absolute;
top: 8rpx;
right: 8rpx;
background-color: #fff8e6;
border: 1rpx solid #ff9500;
background-color: rgba($im-primary, 0.1);
border: 1rpx solid $im-primary;
border-radius: 50%;
width: 28rpx;
height: 28rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.2);
box-shadow: 0 2rpx 6rpx rgba($im-primary, 0.2);
}
.empty-state {

171
pages/workbench/task/task.vue
View File

@@ -3,8 +3,21 @@
<!-- 搜索栏 -->
<view class="search-bar">
<view class="search-container">
<view class="filter-button" @click="toggleFilterPanel">
<uni-icons type="gear" size="20" color="#666"></uni-icons>
<view class="task-type-button-container">
<view class="task-type-button" @click="toggleTaskTypePanel">
<u-icon name="list" :color="$im-primary" size="18"></u-icon>
</view>
<!-- 悬浮任务类型面板 -->
<view v-if="showTaskTypePanel" class="task-type-panel">
<view class="task-type-option" @click="switchTaskType('received')">
<uni-icons type="checkmarkempty" v-if="taskType === 'received'" size="16" :color="$im-primary"></uni-icons>
<text>发布给我的任务</text>
</view>
<view class="task-type-option" @click="switchTaskType('published')">
<uni-icons type="checkmarkempty" v-if="taskType === 'published'" size="16" :color="$im-primary"></uni-icons>
<text>我发布的任务</text>
</view>
</view>
</view>
<view class="search-input">
<u-search
@@ -15,28 +28,8 @@
@clear="handleClear"
></u-search>
</view>
</view>
<!-- 筛选面板 -->
<view v-if="showFilterPanel" class="filter-panel">
<view class="filter-title">任务类型</view>
<view class="filter-options">
<view
class="filter-option"
:class="{ 'active': taskType === 'received' }"
@click="switchTaskType('received')"
>
<uni-icons type="checkmarkempty" v-if="taskType === 'received'" size="16" color="#ff9500"></uni-icons>
<text>发布给我的任务</text>
</view>
<view
class="filter-option"
:class="{ 'active': taskType === 'published' }"
@click="switchTaskType('published')"
>
<uni-icons type="checkmarkempty" v-if="taskType === 'published'" size="16" color="#ff9500"></uni-icons>
<text>我发布的任务</text>
</view>
<view class="add-button" @click="createTask">
<u-icon name="plus" :color="$im-primary" size="18"></u-icon>
</view>
</view>
</view>
@@ -54,11 +47,6 @@
@loadMore="handleLoadMore"
/>
<!-- 悬浮按钮 -->
<view class="fab-button" @click="createTask">
<u-icon name="plus" color="#fff" size="24"></u-icon>
</view>
</view>
</template>
@@ -74,7 +62,7 @@ export default {
data() {
return {
searchKeyword: '',
showFilterPanel: false, // 是否显示筛选面板
showTaskTypePanel: false, // 是否显示任务类型面板
taskType: 'received', // 任务类型：received-发布给我的任务, published-我发布的任务
taskList: [], // 任务列表数据
loading: false, // 加载状态
@@ -191,9 +179,9 @@ export default {
this.loadTaskList()
},
// 切换筛选面板
toggleFilterPanel() {
this.showFilterPanel = !this.showFilterPanel
// 切换任务类型面板
toggleTaskTypePanel() {
this.showTaskTypePanel = !this.showTaskTypePanel
},
// 切换任务类型
@@ -201,7 +189,7 @@ export default {
if (this.taskType === type) return
this.taskType = type
this.showFilterPanel = false // 选择后关闭面板
this.showTaskTypePanel = false // 选择后关闭面板
// 重置搜索和分页
this.searchKeyword = ''
@@ -359,6 +347,7 @@ export default {
position: sticky;
top: 0;
z-index: 100;
position: relative;
}
.search-container {
@@ -367,62 +356,23 @@ export default {
gap: 20rpx;
}
.filter-button {
width: 60rpx;
height: 60rpx;
background-color: #f8f9fa;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid #e9ecef;
.task-type-button-container {
position: relative;
}
.search-input {
flex: 1;
}
.filter-panel {
margin-top: 20rpx;
background-color: #fff;
border-radius: 12rpx;
padding: 24rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
border: 1rpx solid #e9ecef;
}
.filter-title {
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.filter-options {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.filter-option {
.task-type-button,
.add-button {
width: 60rpx;
height: 60rpx;
background-color: transparent;
border-radius: 50%;
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx;
border-radius: 8rpx;
background-color: #f8f9fa;
border: 1rpx solid #e9ecef;
transition: all 0.2s ease;
&.active {
background-color: #fff8e6;
border-color: #ff9500;
}
text {
font-size: 28rpx;
color: #333;
}
justify-content: center;
}
.task-list {
@@ -464,8 +414,8 @@ export default {
transition: all 0.2s ease;
&.checked {
background-color: #ff9500;
border-color: #ff9500;
background-color: $im-primary;
border-color: $im-primary;
}
}
@@ -524,33 +474,58 @@ export default {
text-align: center;
}
.fab-button {
position: fixed;
right: 40rpx;
bottom: 40rpx;
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
.task-type-panel {
position: absolute;
left: 0;
top: 80rpx;
background-color: #fff;
border-radius: 12rpx;
padding: 16rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
border: 1rpx solid #e9ecef;
z-index: 998;
min-width: 300rpx;
}
.task-type-option {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
z-index: 999;
gap: 16rpx;
padding: 20rpx;
border-radius: 8rpx;
background-color: #f8f9fa;
border: 1rpx solid #e9ecef;
transition: all 0.2s ease;
margin-bottom: 12rpx;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: rgba($im-primary, 0.05);
}
text {
font-size: 28rpx;
color: #333;
}
}
.top-badge {
position: absolute;
top: 8rpx;
right: 8rpx;
background-color: #fff8e6;
border: 1rpx solid #ff9500;
background-color: rgba($im-primary, 0.1);
border: 1rpx solid $im-primary;
border-radius: 50%;
width: 28rpx;
height: 28rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.2);
box-shadow: 0 2rpx 6rpx rgba($im-primary, 0.2);
}
</style>

3
uni.scss
View File

@@ -80,3 +80,6 @@ $uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 26px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
/* im部分配色 */
$im-primary: #007aff;