|
|
@@ -36,9 +36,7 @@
|
|
|
|
|
|
active: !manageMode && Number(selectedValue) === Number(item.value),
|
|
|
|
|
|
- dragging: draggingIndex === index,
|
|
|
-
|
|
|
- 'discount-item--last-alone': isLastRowSingleNoDiscount(index)
|
|
|
+ dragging: draggingIndex === index
|
|
|
|
|
|
}"
|
|
|
|
|
|
@@ -240,18 +238,6 @@ export default {
|
|
|
|
|
|
},
|
|
|
|
|
|
- isLastRowSingleNoDiscount(index) {
|
|
|
-
|
|
|
- const item = this.innerList[index]
|
|
|
-
|
|
|
- if (!this.isNoDiscount(item)) return false
|
|
|
-
|
|
|
- const len = this.innerList.length
|
|
|
-
|
|
|
- return len > 0 && index === len - 1 && len % 3 === 1
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
initDiscountList() {
|
|
|
|
|
|
let cacheList = []
|
|
|
@@ -718,11 +704,13 @@ export default {
|
|
|
|
|
|
.discount-list {
|
|
|
|
|
|
- display: grid;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ flex-direction: row;
|
|
|
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- justify-items: center;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
@@ -734,17 +722,23 @@ export default {
|
|
|
|
|
|
.discount-item {
|
|
|
|
|
|
- width: 64upx;
|
|
|
+ flex: 0 0 auto;
|
|
|
|
|
|
- height: 64upx;
|
|
|
+ min-width: 88upx;
|
|
|
|
|
|
- margin-left: 0;
|
|
|
+ max-width: 150upx;
|
|
|
|
|
|
- margin-bottom: 11upx;
|
|
|
+ height: 52upx;
|
|
|
|
|
|
- border: 1upx solid #999999;
|
|
|
+ padding: 0 16upx;
|
|
|
|
|
|
- border-radius: 32upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ margin: 0 8upx 14upx;
|
|
|
+
|
|
|
+ border-radius: 26upx;
|
|
|
+
|
|
|
+ border: 1upx solid #dee3e0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
@@ -754,35 +748,69 @@ export default {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
- background-color: #ffffff;
|
|
|
+ background-color: #f4f7f5;
|
|
|
+
|
|
|
+ box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
}
|
|
|
|
|
|
-.discount-item--last-alone {
|
|
|
+.discount-item.active {
|
|
|
|
|
|
- grid-column: 2;
|
|
|
+ background: #09C567;
|
|
|
|
|
|
-}
|
|
|
+ background-image: none;
|
|
|
|
|
|
-.discount-item.active {
|
|
|
+ border-color: #08b35d;
|
|
|
|
|
|
- border-color: #09C567;
|
|
|
+ color: #ffffff;
|
|
|
|
|
|
- color: #09C567;
|
|
|
+ box-shadow: 0 4upx 14upx rgba(9, 197, 103, 0.35);
|
|
|
|
|
|
}
|
|
|
|
|
|
.discount-item.dragging {
|
|
|
|
|
|
- opacity: 0.7;
|
|
|
+ opacity: 0.88;
|
|
|
+
|
|
|
+ background: #e8f8ef;
|
|
|
|
|
|
- background-color: #f0fff8;
|
|
|
+ background-image: none;
|
|
|
+
|
|
|
+ border-color: #09C567;
|
|
|
+
|
|
|
+ color: #047c40;
|
|
|
+
|
|
|
+ box-shadow: 0 2upx 10upx rgba(9, 197, 103, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
.discount-name {
|
|
|
|
|
|
- font-size: 13upx;
|
|
|
+ font-size: 16upx;
|
|
|
+
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ max-width: 100%;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.discount-item.active .discount-name {
|
|
|
+
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.discount-item.dragging .discount-name {
|
|
|
+
|
|
|
+ color: #047c40;
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -790,9 +818,9 @@ export default {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
- top: -5upx;
|
|
|
+ top: -8upx;
|
|
|
|
|
|
- right: -16upx;
|
|
|
+ right: -10upx;
|
|
|
|
|
|
display: flex;
|
|
|
|
