样式调整

src/components/trip/calendarproduct.vue

@@ -23,28 +23,35 @@
           </div>
         </div>
         <div class="row wrap">
-          <div class="rounded-borders text-center text-weight-bold" :class="{
+          <div class="text-center text-weight-bold q-mb-sm" 
+           style="padding: 0 4px; width: 14.285%" v-for="(x, i) in dayList" :key="i"
+            @click="chosenDateHandler(x)">
+            <div
+            style="padding: 4px 0px; "
+            :class="{
               'cursor-pointer hover-date': x.value != '' && x.price,
               'cursor-not-allowed': (!x.price || x.price.remainNum==0) && x.value != '',
-              'bg-primary': x.value != '' && x.value == currentDate,
-            }" style="padding: 8px 4px; width: 14.285%" v-for="(x, i) in dayList" :key="i"
-            @click="chosenDateHandler(x)">
-            <div class="text-dark" :class="{ 'text-white': x.value == currentDate }" v-if="x.price">
-              {{ x.display }}
+              'bg-primary rounded-borders': x.value != '' && x.value == currentDate,
+              'remainBorder': x.value!= '' && x.value != currentDate&&x.price && x.price.remainNum>0,
+            }">
+                <div class="text-dark" :class="{ 'text-white': x.value == currentDate }" v-if="x.price">
+                {{ x.display }}
+              </div>
+              <div class="text-grey-6" v-else>{{ x.display }}</div>
+              <div class="f12" :class="{
+                  'text-grey-1': x.value == currentDate,
+                  ' text-grey-7': x.value != currentDate,
+                  'q-mt-sm': x.price && x.price.remainNum==0
+                }">
+                <!-- {{
+                  x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
+                }} -->
+                <p v-if="x.price && x.price.remainNum>0">{{ x.price && x.price.remainNum>0 ? '可售:'+x.price.remainNum:'' }}  </p>
+                {{
+                  x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
+                }}
             </div>
-            <div class="text-grey-6" v-else>{{ x.display }}</div>
-            <div class="f12" :class="{
-                'text-grey-1': x.value == currentDate,
-                ' text-grey-7': x.value != currentDate,
-                'q-mt-sm': x.price && x.price.remainNum==0
-              }">
-              <!-- {{
-                x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
-              }} -->
-              <p v-if="x.price && x.price.remainNum>0">{{ x.price && x.price.remainNum>0 ? '可售:'+x.price.remainNum:'' }}  </p>
-              {{
-                x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
-              }}
+            
             </div>
           </div>
         </div>
@@ -217,9 +224,13 @@
 
 </script>
 
-<style>
+<style  lang="scss">
   .hover-date:hover {
     background: #eee;
   }
+  .remainBorder{
+    border-top: 2px solid #000;
+    background: $primary-1;
+  }
 
 </style>

src/css/quasar.variables.scss

@@ -11,6 +11,7 @@
 // $primary   : #1976D2;
 //$primary   : #31C3E0;
 $primary: rgb(5,32,50);//#1976D2
+$primary-1: rgba(5,32,50,.1);
 $secondary: rgb(137, 118, 88);
 $accent: #9C27B0;
 $dark: #1D1D1D;