优化网格导航和二维码卡片的代码

This commit is contained in:
2023-04-17 14:29:09 +08:00
parent f25936eadc
commit 6afae57896
4 changed files with 15 additions and 11 deletions

View File

@@ -989,7 +989,7 @@
position: relative; position: relative;
min-height: 100px; min-height: 100px;
display: inline-block; display: inline-block;
background-color: #E2DFDF; background-color: #eee;
padding: 10px; padding: 10px;
} }
.ul-card-qrcode .header { .ul-card-qrcode .header {
@@ -1014,7 +1014,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 20px; border-radius: 20px;
background-color: #E2DFDF; background-color: #eee;
left: -10px; left: -10px;
top: 0; top: 0;
} }
@@ -1023,7 +1023,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 20px; border-radius: 20px;
background-color: #E2DFDF; background-color: #eee;
right: -10px; right: -10px;
top: 0; top: 0;
} }
@@ -1031,7 +1031,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0; height: 0;
border-bottom: 2px dashed #E2DFDF; border-bottom: 2px dashed #eee;
top: 8px; top: 8px;
left: 0; left: 0;
} }

File diff suppressed because one or more lines are too long

View File

@@ -1,9 +1,11 @@
.ul-card-qrcode { .ul-card-qrcode {
$borderColor: #eee;
position: relative; position: relative;
min-height: 100px; min-height: 100px;
display: inline-block; display: inline-block;
background-color: #E2DFDF; background-color: $borderColor;
padding: 10px; padding: 10px;
.header { .header {
@@ -35,7 +37,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 20px; border-radius: 20px;
background-color: #E2DFDF; background-color: $borderColor;
left: -10px; left: -10px;
top: 0; top: 0;
} }
@@ -45,7 +47,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 20px; border-radius: 20px;
background-color: #E2DFDF; background-color: $borderColor;
right: -10px; right: -10px;
top: 0; top: 0;
} }
@@ -54,7 +56,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0; height: 0;
border-bottom: 2px dashed #E2DFDF; border-bottom: 2px dashed $borderColor;
top: 8px; top: 8px;
left: 0; left: 0;
} }

View File

@@ -4,8 +4,10 @@
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
$gridCount: 3;
.item { .item {
flex: 0 0 calc(100% / 3); flex: 0 0 calc(100% / $gridCount);
text-align: center; text-align: center;
margin-bottom: 12px; margin-bottom: 12px;
@@ -72,7 +74,7 @@
padding: 0.5px; padding: 0.5px;
.item { .item {
flex: 0 0 calc(100% / 3 - 1px - 24px); flex: 0 0 calc(100% / $gridCount - 1px - 24px);
margin: 0.5px; margin: 0.5px;
background-color: #fff; background-color: #fff;
padding: 12px; padding: 12px;