XW-AIOT/aiot-platform-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(@vben/web-antd): P0 紧急工单卡片改为右上角渐变光晕标识

Browse Source 
- 移除左侧红色竖条（border-left），改为右上角径向渐变
- 渐变色与 P0 标签色系协调（#C01D1D 14% 不透明度）
- 暗色模式适配渐变加深至 18%
- 移除 overflow:hidden 避免裁切子元素阴影
- 状态标签改为 span + inline style 双色渲染
- 同步更新 cleaning/work-order 卡片视图

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
lzh
2026-03-25 11:36:56 +08:00
parent 0772a12074
commit 9d2e7d9e13
2 changed files with 86 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
View File

@@ -300,7 +300,10 @@ onMounted(() => {
<div class="card-header">
<div
class="status-info"
:style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
:style="{
'--status-color': STATUS_COLOR_MAP[item.status]?.text,
'--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
}"
>
<IconifyIcon
:icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -389,12 +392,15 @@ onMounted(() => {
<div class="card-footer">
<!-- 左侧：类型 + 时间 -->
<div class="card-meta">
<Tag
:color="ORDER_TYPE_COLOR_MAP[item.orderType]"
<span
class="type-tag"
:style="{
backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
}"
>
{{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
</Tag>
</span>
<span class="create-time">{{
formatTime(item.createTime)
}}</span>
@@ -536,7 +542,22 @@ onMounted(() => {
}
&--urgent {
border-left: 3px solid #ff4d4f;
&::before {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
pointer-events: none;
content: '';
background: radial-gradient(
circle at 100% 0%,
rgb(192 29 29 / 14%) 0%,
rgb(192 29 29 / 6%) 40%,
transparent 70%
);
border-radius: 0 8px 0 0;
}
}
&--terminal {
@@ -557,14 +578,18 @@ onMounted(() => {
}
.status-info {
--status-color: #8c8c8c;
--status-color: #6b5e52;
--status-bg: #f0ede8;
display: flex;
gap: 4px;
align-items: center;
padding: 2px 8px;
font-size: 12px;
font-weight: 500;
color: var(--status-color);
background: var(--status-bg);
border-radius: 4px;
.status-icon {
font-size: 14px;
@@ -693,10 +718,12 @@ onMounted(() => {
.type-tag {
flex-shrink: 0;
padding: 1px 6px;
margin: 0;
font-size: 11px;
font-weight: 500;
line-height: 16px;
border: none;
border-radius: 4px;
}
.order-code {
@@ -784,6 +811,15 @@ html.dark {
&:hover {
border-color: #434343;
}
&--urgent::before {
background: radial-gradient(
circle at 100% 0%,
rgb(192 29 29 / 18%) 0%,
rgb(192 29 29 / 7%) 40%,
transparent 70%
);
}
}
.card-title {

50
apps/web-antd/src/views/ops/work-order/modules/card-view.vue
View File

@@ -298,7 +298,10 @@ defineExpose({
<div class="card-header">
<div
class="status-info"
:style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
:style="{
'--status-color': STATUS_COLOR_MAP[item.status]?.text,
'--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
}"
>
<IconifyIcon
:icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -387,12 +390,15 @@ defineExpose({
<div class="card-footer">
<!-- 左侧：类型 + 时间 -->
<div class="card-meta">
<Tag
:color="ORDER_TYPE_COLOR_MAP[item.orderType]"
<span
class="type-tag"
:style="{
backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
}"
>
{{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
</Tag>
</span>
<span class="create-time">{{
formatTime(item.createTime)
}}</span>
@@ -534,7 +540,22 @@ defineExpose({
}
&--urgent {
border-left: 3px solid #ff4d4f;
&::before {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
pointer-events: none;
content: '';
background: radial-gradient(
circle at 100% 0%,
rgb(192 29 29 / 14%) 0%,
rgb(192 29 29 / 6%) 40%,
transparent 70%
);
border-radius: 0 8px 0 0;
}
}
&--terminal {
@@ -555,14 +576,18 @@ defineExpose({
}
.status-info {
--status-color: #8c8c8c;
--status-color: #6b5e52;
--status-bg: #f0ede8;
display: flex;
gap: 4px;
align-items: center;
padding: 2px 8px;
font-size: 12px;
font-weight: 500;
color: var(--status-color);
background: var(--status-bg);
border-radius: 4px;
.status-icon {
font-size: 14px;
@@ -691,10 +716,12 @@ defineExpose({
.type-tag {
flex-shrink: 0;
padding: 1px 6px;
margin: 0;
font-size: 11px;
font-weight: 500;
line-height: 16px;
border: none;
border-radius: 4px;
}
.order-code {
@@ -782,6 +809,15 @@ html.dark {
&:hover {
border-color: #434343;
}
&--urgent::before {
background: radial-gradient(
circle at 100% 0%,
rgb(192 29 29 / 18%) 0%,
rgb(192 29 29 / 7%) 40%,
transparent 70%
);
}
}
.card-title {