feat: 调整盲盒卡片配色为绿色主题，增大图标尺寸
This commit is contained in:
Your Name
parent
6164ff322d
commit
ad296d8512
@ -128,7 +128,7 @@
|
||||
<!-- 可接单部门信息 -->
|
||||
<div v-if="getTaskAllowedDeptNames(task).length > 0" class="blind-box-depts">
|
||||
<span class="depts-label">
|
||||
<Icon name="building" size="sm" color="#52c41a" style="margin-right: 4px;" />
|
||||
<Icon name="building" size="sm" color="#31f08b" style="margin-right: 4px;" />
|
||||
可接单部门
|
||||
</span>
|
||||
<div class="depts-tags">
|
||||
@ -6947,9 +6947,9 @@ onUnmounted(() => {
|
||||
// 盲盒模式卡片样式
|
||||
&.blind-box-card {
|
||||
background: linear-gradient(135deg, #1f1f1f 0%, #141414 100%) !important;
|
||||
border: 1px solid rgba(250, 140, 22, 0.2) !important;
|
||||
border: 1px solid rgba(49, 240, 139, 0.2) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
min-height: 280px;
|
||||
min-height: 320px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -6960,14 +6960,14 @@ onUnmounted(() => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #fa8c16, #faad14);
|
||||
background: linear-gradient(90deg, #31f08b, #52c41a);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(250, 140, 22, 0.5) !important;
|
||||
box-shadow: 0 12px 24px rgba(250, 140, 22, 0.15);
|
||||
border-color: rgba(49, 240, 139, 0.5) !important;
|
||||
box-shadow: 0 12px 24px rgba(49, 240, 139, 0.15);
|
||||
|
||||
.box-icon-wrapper {
|
||||
transform: scale(1.05) rotate(5deg);
|
||||
@ -7000,23 +7000,23 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
|
||||
.box-icon-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
.main-box-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: #fa8c16;
|
||||
filter: drop-shadow(0 8px 16px rgba(250, 140, 22, 0.3));
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
color: #31f08b;
|
||||
filter: drop-shadow(0 8px 16px rgba(49, 240, 139, 0.3));
|
||||
}
|
||||
|
||||
.question-mark {
|
||||
@ -7024,7 +7024,7 @@ onUnmounted(() => {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 42px;
|
||||
font-size: 60px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
@ -7035,9 +7035,9 @@ onUnmounted(() => {
|
||||
|
||||
.blind-box-glow {
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: radial-gradient(circle, rgba(250, 140, 22, 0.25) 0%, rgba(250, 140, 22, 0) 70%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: radial-gradient(circle, rgba(49, 240, 139, 0.25) 0%, rgba(49, 240, 139, 0) 70%);
|
||||
opacity: 0.2;
|
||||
transition: all 0.4s ease;
|
||||
z-index: -1;
|
||||
@ -7069,11 +7069,11 @@ onUnmounted(() => {
|
||||
.queue-number {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #fff 0%, #fa8c16 100%);
|
||||
background: linear-gradient(135deg, #fff 0%, #31f08b 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 2px 4px rgba(250, 140, 22, 0.2));
|
||||
filter: drop-shadow(0 2px 4px rgba(49, 240, 139, 0.2));
|
||||
}
|
||||
}
|
||||
|
||||
@ -7099,17 +7099,17 @@ onUnmounted(() => {
|
||||
|
||||
.dept-tag {
|
||||
padding: 4px 12px;
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
border: 1px solid rgba(82, 196, 26, 0.3);
|
||||
background: rgba(49, 240, 139, 0.1);
|
||||
border: 1px solid rgba(49, 240, 139, 0.3);
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: #73d13d;
|
||||
color: #31f08b;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(82, 196, 26, 0.2);
|
||||
color: #95de64;
|
||||
border-color: rgba(82, 196, 26, 0.5);
|
||||
background: rgba(49, 240, 139, 0.2);
|
||||
color: #52c41a;
|
||||
border-color: rgba(49, 240, 139, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7127,11 +7127,11 @@ onUnmounted(() => {
|
||||
width: 80%;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(90deg, #fa8c16 0%, #fa541c 100%);
|
||||
background: linear-gradient(90deg, #31f08b 0%, #52c41a 100%);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 4px 12px rgba(250, 140, 22, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(49, 240, 139, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -7139,13 +7139,13 @@ onUnmounted(() => {
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(250, 140, 22, 0.5);
|
||||
background: linear-gradient(90deg, #ff9c38 0%, #ff7a45 100%);
|
||||
box-shadow: 0 8px 20px rgba(49, 240, 139, 0.5);
|
||||
background: linear-gradient(90deg, #52c41a 0%, #31f08b 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 8px rgba(250, 140, 22, 0.4);
|
||||
box-shadow: 0 2px 8px rgba(49, 240, 139, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user