|
|
@@ -14,7 +14,7 @@
|
|
|
class="category-tab"
|
|
|
:class="{
|
|
|
active: activeCategoryId === tab.id,
|
|
|
- first: index === 0,
|
|
|
+ first: index % 3 === 0,
|
|
|
last: index === categoryTabs.length - 1,
|
|
|
}"
|
|
|
@click="activeCategoryId = tab.id"
|
|
|
@@ -801,12 +801,14 @@ const handleConfirm = async () => {
|
|
|
|
|
|
.category-tabs {
|
|
|
display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ row-gap: 8px;
|
|
|
margin-bottom: 10px;
|
|
|
- height: 30px;
|
|
|
|
|
|
.category-tab {
|
|
|
--arrow: 20px;
|
|
|
- flex: 1;
|
|
|
+ flex: 0 0 calc((100% + 16px) / 3);
|
|
|
+ height: 30px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
@@ -833,9 +835,8 @@ const handleConfirm = async () => {
|
|
|
|
|
|
&.last {
|
|
|
clip-path: polygon(0 0,
|
|
|
- calc(100% - var(--arrow)) 0,
|
|
|
- 100% 50%,
|
|
|
- calc(100% - var(--arrow)) 100%,
|
|
|
+ 100% 0,
|
|
|
+ 100% 100%,
|
|
|
0 100%,
|
|
|
var(--arrow) 50%);
|
|
|
}
|
wangsisi