<template>
|
<div class="bocklogBox">
|
<div class="block">
|
<div class="title">待办事项</div>
|
|
<div class="todo-items">
|
<div
|
v-for="(item, index) in todos"
|
:key="index"
|
class="todo-item"
|
:class="`status-${item.status}`"
|
>
|
<div class="status-indicator"></div>
|
|
<div class="content-wrapper">
|
<div class="main-content">
|
<span class="status-tag">{{ statusMap[item.status] }}</span>
|
<span class="todo-text">{{ item.title }}</span>
|
</div>
|
|
<div class="action-area">
|
<img :src="st7" alt="">
|
<span class="todo-date">{{ item.date }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import st7 from '@/assets/images/workbench/st7.png'
|
// 状态显示映射
|
const statusMap = {
|
pending: '待审核',
|
processing: '处理中',
|
todo: '待处理',
|
};
|
|
// 待办事项数据
|
const todos = ref([
|
{
|
status: 'pending',
|
title: '发现暴露垃圾事件',
|
date: '2025.03.26',
|
},
|
{
|
status: 'todo',
|
title: '发现暴露垃圾事件',
|
date: '2025.03.26',
|
},
|
{
|
status: 'processing',
|
title: '发现暴露垃圾事件',
|
date: '2025.03.26',
|
},
|
{
|
status: 'pending',
|
title: '发现暴露垃圾事件',
|
date: '2025.03.26',
|
},
|
{
|
status: 'todo',
|
title: '发现暴露垃圾事件',
|
date: '2025.03.26',
|
},
|
]);
|
</script>
|
|
<style lang="scss" scoped>
|
.bocklogBox {
|
width: 100%;
|
height: 306px;
|
background: rgba(255, 255, 255, 0.41);
|
box-shadow: 0px 3px 4px -1px rgba(125, 125, 125, 0.25);
|
border-radius: 8px 8px 8px 8px;
|
border: 2px solid #ffffff;
|
.block {
|
margin: 11px 21px 13px 22px;
|
.title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #363636;
|
}
|
|
.todo-items {
|
display: grid;
|
gap: 0.8rem;
|
margin-top: 10px;
|
}
|
|
.todo-item {
|
display: flex;
|
align-items: center;
|
|
background: #FFFFFF;
|
border-radius: 8px;
|
box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
|
transition: all 0.2s ease;
|
border-left: 4px solid transparent;
|
height: 42px;
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.status-indicator {
|
margin-left: 18px;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
flex-shrink: 0;
|
}
|
|
.content-wrapper {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 1rem;
|
}
|
|
.main-content {
|
display: flex;
|
align-items: center;
|
gap: 0.8rem;
|
|
.status-tag {
|
font-weight: 400;
|
font-size: 14px;
|
|
padding: 0.3rem 0.5rem;
|
border-radius: 12px;
|
}
|
|
.todo-text {
|
font-size: 14px;
|
color: #343434;
|
}
|
}
|
|
.action-area {
|
display: flex;
|
align-items: center;
|
margin-right: 42px;
|
|
.todo-date {
|
color: #666;
|
font-size: 0.9rem;
|
}
|
|
|
}
|
}
|
|
// 状态颜色方案
|
.status-pending {
|
border-left-color: #FF6560;
|
color: #FF6560;
|
.status-indicator {
|
background: #FF6560;
|
}
|
}
|
|
.status-todo {
|
border-left-color: #5D77FB;
|
color: #5D77FB;
|
.status-indicator {
|
background: #5D77FB;
|
}
|
}
|
|
.status-processing {
|
border-left-color: #FF8B26;
|
color: #FF8B26;
|
|
.status-indicator {
|
background: #FF8B26;
|
}
|
}
|
}
|
|
// @media (max-width: 768px) {
|
// .todo-list-container {
|
// padding: 1rem;
|
|
// .content-wrapper {
|
// flex-direction: column;
|
// align-items: flex-start !important;
|
// gap: 0.5rem !important;
|
// }
|
|
// .action-area {
|
// width: 100%;
|
// justify-content: space-between;
|
// }
|
// }
|
// }
|
|
// @media (max-width: 480px) {
|
// .main-content {
|
// flex-direction: column;
|
// align-items: flex-start !important;
|
// }
|
|
// .status-tag {
|
// margin-bottom: 0.3rem;
|
// }
|
// }
|
}
|
</style>
|
