bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单卡片之间的阴影和光效增加

This commit is contained in:
syruan 2025-10-30 11:19:08 +08:00
parent 27dacd1834
commit 5540c4db91
2 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/EquipmentSharedLease/order/index.vue
View File

@ -80,7 +80,7 @@
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index"> <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-row class="order-title-info"> <el-row class="order-title-info">
<el-col :span="8"> <el-col :span="8">
<span> 订单编号： </span> <span> <i class="el-icon-document-copy"></i>订单编号： </span>
<span> <span>
{{ item.code }} {{ item.code }}
</span> </span>
@ -834,13 +834,38 @@ export default {
} }
} */ } */
.card-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #169bd5, #0d7aa8);
color: #fff;
border-radius: 4px;
margin-right: 12px;
margin-bottom: 12px;
font-size: 16px;
box-shadow: 0 2px 6px rgba(22, 155, 213, 0.25);
}
.cart-tbody { .cart-tbody {
background: #fff; background: #fff;
padding: 16px; padding: 16px;
margin-bottom: 14px; margin-bottom: 14px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ddd; border: 1px solid #169bd5;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); box-shadow:
0 0 0 1px rgba(22, 155, 213, 0.2),
0 0 8px rgba(22, 155, 213, 0.3);
transition: all 0.3s ease;
&:hover {
border-color: #0d7aa8;
box-shadow:
0 0 0 2px rgba(22, 155, 213, 0.3),
0 0 12px rgba(22, 155, 213, 0.4);
}
.cart-user-info { .cart-user-info {
display: flex; display: flex;
@ -1011,6 +1036,8 @@ export default {
} }
.app-container-content { .app-container-content {
// background-color: #f5f5f5;
:deep(.el-dialog) { :deep(.el-dialog) {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;

20
src/views/EquipmentSharedOrder/order/index.vue
View File

@ -72,7 +72,7 @@
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index"> <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-row class="order-title-info"> <el-row class="order-title-info">
<el-col :span="8"> <el-col :span="8">
<span> 订单编号： </span> <span> <i class="el-icon-document-copy"></i>订单编号： </span>
<span>{{ item.code }}</span> <span>{{ item.code }}</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
@ -615,8 +615,20 @@ export default {
padding: 16px; padding: 16px;
margin-bottom: 14px; margin-bottom: 14px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ddd; border: 1px solid #169bd5;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); box-shadow:
0 0 0 1px rgba(22, 155, 213, 0.2),
0 0 8px rgba(22, 155, 213, 0.3);
// 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.cart-tbody:hover {
border-color: #0d7aa8;
box-shadow:
0 0 0 2px rgba(22, 155, 213, 0.3),
0 0 12px rgba(22, 155, 213, 0.4),
0 6px 16px rgba(0, 0, 0, 0.12);
} }
:deep .el-form--inline .el-form-item { :deep .el-form--inline .el-form-item {
@ -689,6 +701,8 @@ export default {
} }
.app-container-content { .app-container-content {
// background-color: #f5f5f5;
:deep(.el-dialog) { :deep(.el-dialog) {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;