no message

src/App.vue

@@ -69,6 +69,14 @@ export default defineComponent({
 .f12
     font-family: 'msl' !important
     font-size: 13px
+.fz12
+    font-size: 12px
+.fz10
+    font-size: 10px
+.fz16
+    font-size: 16px
+.fz18
+    font-size: 18px
 .mycard
     box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important
     border-radius: 0.475rem !important

src/components/hotel/list/ListHeader.vue

@@ -9,6 +9,9 @@
     </q-field>
     <n-select v-if="$q.platform.is.desktop" filterable @update:value="changeHotel" class="q-ml-lg col-2" style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
     <div class="col"></div>
+    <q-btn unelevated class="bg-grey-3 hover q-mr-md" icon="shopping_cart" :title="$t('hotel.car.shoppingTitle')" @click="rightCarOpen=true">
+      <q-badge color="red" rounded floating>4</q-badge>
+    </q-btn>
     <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
       <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
       <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
@@ -41,7 +44,12 @@
       </q-popup-proxy>
     </q-btn>
     <q-btn color="primary" unelevated :label="$t('query')" />
+    
   </div>
+  <q-dialog v-model="rightCarOpen" maximized full-height position="right">
+    <ListCar @close="rightCarOpen=false"></ListCar>
+  </q-dialog>
+  
 </template>
 
 <script lang="ts">
@@ -55,13 +63,17 @@ import { CascaderOption } from 'naive-ui'
 import { date } from 'quasar'
 import { HotelRate, useHotel } from '../../../utils/hotelRate'
 import { useQuasar } from 'quasar'
+import useScrollModule from '../../../module/scrollbar/scrollModule'
+import ListCar from "../ListCar.vue"
 export default defineComponent({
-  components: { svgIcon },
+  components: { svgIcon, ListCar },
   setup() {
     const $q = useQuasar()
     const qDateProxy = ref(null) as any
     const qNameProxy = ref(null) as any
     const data = reactive({
+      rightCarOpen: false,
+      scrollStyle: {} as any,
       addressParams: {
         Id: '651'
       },
@@ -75,8 +87,9 @@ export default defineComponent({
       loading: false,
       cacheHotels: [] as Array<any>,
       hotelsRates: [] as Array<HotelRate>,
-      canHide: false
+      canHide: false,
     })
+    data.scrollStyle = useScrollModule().scrollStyle
     const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
 
     data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 37 }), 'YYYY/MM/DD')
@@ -191,4 +204,6 @@ export default defineComponent({
 })
 </script>
 
-<style></style>
+<style>
+
+</style>

src/components/layout/Notifications.vue

 <template>
     <q-card flat class="bg-white q-pa-none" 
-    style="width: 375px; shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)"
+    style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)"
     :style="{'width':$q.platform.is.desktop?'375px':'350px'}">
         <div class="Notifications-bg">
             <div class="q-pa-lg row items-center">
                 <span class="text-white text-weight-bold text-h6 q-mr-sm  q-pl-sm">{{$t('Notifications.title')}}</span>
-                <div class="f12 text-grey-1 f12 q-pl-sm">24 {{$t('Notifications.subtitle')}}</div>
+                <div class="text-grey-1 f12 q-pl-sm">24 {{$t('Notifications.subtitle')}}</div>
             </div>
         </div>
         <div class="Notifications-height q-py-md">
@@ -20,10 +20,10 @@
                                     <svg-icon :icon="item.icon" :size="16" color="nav"></svg-icon>
                                 </div>
                                 <div class="col column">
-                                    <span class="Notifications-overflow Notifications-title cursor-pointer q-mr-md text-grey-8">Project AlicePhase 1 developmentPhase 1 developmentPhase 1 development</span>
-                                    <div class="Notifications-overflow Notifications-text text-grey-6">Phase 1 developmentPhase 1 developmentPhase 1 developmentPhase 1 development</div>
+                                    <span class="Notifications-overflow Notifications-title text-weight-bold f12 cursor-pointer q-mr-md text-grey-8">Project AlicePhase 1 developmentPhase 1 developmentPhase 1 development</span>
+                                    <div class="Notifications-overflow Notifications-text text-grey-6 fz12">Phase 1 developmentPhase 1 developmentPhase 1 developmentPhase 1 development</div>
                                 </div>
-                                <div class="bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 Notifications-time">1 {{$t('Notifications.time')}}</div>
+                                <div class="bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 Notifications-time fz10">1 {{$t('Notifications.time')}}</div>
                             </div>
                         </q-item-section>
                     </q-item>
@@ -130,10 +130,6 @@
     }
     .Notifications-title{
         font-weight: 600;
-        font-size: 13px;
-    }
-    .Notifications-text{
-        font-size: 12px;
     }
     .Notifications-title,.Notifications-text{
         width: 100%;
@@ -143,7 +139,6 @@
     }
     .Notifications-time{
         color: var(--kt-light-inverse);
-        font-size: 10px;
         line-height: 18px;
         border-radius: 6px;
     }

src/i18n/zh-TW/index.ts

@@ -38,6 +38,17 @@ export default {
     hotelRate: '酒店星級',
     minPrice: '最低價格',
     maxPrice: '最高價格',
+    car:{
+      shoppingTitle: '購物車',
+      orderTitle: '訂單',
+      people: '人',
+      between: '间',
+    },
+    shopping:{
+      labelNum: '加入數量',
+      small: '數量不能小於',
+      big: '大於剩餘數嘚',
+    },
     table: {
       price: '價格',
       ins: '總/用/剩',