Просмотр исходного кода

refactor: improve card styling across PageOne and PageThree components for better layout consistency

Yannay месяцев назад: 2
Родитель
Сommit
c7d75352cd

+ 3 - 0
pages/orderDetailRefactored/components/PageOne.vue

@@ -492,6 +492,9 @@ export default {
492
   @extend .card-wrap;
492
   @extend .card-wrap;
493
   padding: 20rpx;
493
   padding: 20rpx;
494
   margin-top: 20rpx;
494
   margin-top: 20rpx;
495
+  box-sizing: border-box;
496
+  width: 100%;
497
+  max-width: 100%;
495
 }
498
 }
496
 
499
 
497
 .info-card-title {
500
 .info-card-title {

+ 3 - 0
pages/orderDetailRefactored/components/PageThree.vue

@@ -659,6 +659,9 @@ export default {
659
   @extend .card-wrap;
659
   @extend .card-wrap;
660
   padding: 20rpx;
660
   padding: 20rpx;
661
   margin-top: 20rpx;
661
   margin-top: 20rpx;
662
+  box-sizing: border-box;
663
+  width: 100%;
664
+  max-width: 100%;
662
 }
665
 }
663
 
666
 
664
 .info-card-title {
667
 .info-card-title {

+ 5 - 0
pages/orderDetailRefactored/styles/common.scss

@@ -87,9 +87,11 @@ $text-colors: (
87
 
87
 
88
 @mixin card {
88
 @mixin card {
89
   width: 100%;
89
   width: 100%;
90
+  max-width: 100%;
90
   margin: 0;
91
   margin: 0;
91
   background-color: map-get($colors, card);
92
   background-color: map-get($colors, card);
92
   border-radius: map-get($sizes, radius);
93
   border-radius: map-get($sizes, radius);
94
+  box-sizing: border-box;
93
   @include shadow;
95
   @include shadow;
94
 }
96
 }
95
 
97
 
@@ -123,6 +125,9 @@ $text-colors: (
123
 .card-wrap {
125
 .card-wrap {
124
   @include card;
126
   @include card;
125
   margin-bottom: 20rpx;
127
   margin-bottom: 20rpx;
128
+  box-sizing: border-box;
129
+  max-width: 100%;
130
+  overflow: hidden;
126
 
131
 
127
   &:hover {
132
   &:hover {
128
     @include shadow(2);
133
     @include shadow(2);