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"> <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>
</view> </view>
</uni-swipe-action-item> </uni-swipe-action-item>
@@ -130,7 +130,7 @@ export default {
options.push({ options.push({
text: '置顶', text: '置顶',
style: { style: {
backgroundColor: '#ff9500', backgroundColor: '#007aff',
color: '#fff' color: '#fff'
} }
}) })
@@ -300,8 +300,8 @@ export default {
transition: all 0.2s ease; transition: all 0.2s ease;
&.checked { &.checked {
background-color: #ff9500; background-color: $im-primary;
border-color: #ff9500; border-color: $im-primary;
} }
&.disabled { &.disabled {
@@ -372,15 +372,15 @@ export default {
position: absolute; position: absolute;
top: 8rpx; top: 8rpx;
right: 8rpx; right: 8rpx;
background-color: #fff8e6; background-color: rgba($im-primary, 0.1);
border: 1rpx solid #ff9500; border: 1rpx solid $im-primary;
border-radius: 50%; border-radius: 50%;
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .empty-state {

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

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

3
uni.scss
View File

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