完成手機版本

src/App.vue

@@ -40,7 +40,7 @@ export default defineComponent({
 @font-face
     // 加粗数字字体
     font-family: 'din'
-    src: url('../assets/fonts/DIN-Bold.otf') format('opentype')
+    src: url('./assets/fonts/DIN-Bold.otf') format('opentype')
     font-weight: normal
     font-style: normal
 @font-face

src/components/hotel/list/HotelPriceList.vue

+<template>
+  <q-card flat class="light-shadow rounded-border window-width q-pa-none">
+    <q-card-section class="q-pa-sm">
+      <div class="text-h6">{{ h.HotelName }}</div>
+      <div class="f12 text-grey-5">{{ `${search.StartDate} 至 ${search.EndDate}` }} {{ $t('hotel.pricetips') }}</div>
+    </q-card-section>
+    <div style="max-height: 60vh; overflow-y: auto" class="q-pa-sm">
+      <template v-for="x in h.subList">
+        <div class="rounded-borders q-pa-sm q-mt-md" v-if="x.PriceList && x.PriceList.length > 0" :class="[x.PriceList[0].ins.bg, x.PriceList[0].ins.color]">
+          <div class="row items-center">
+            <div class="text-subtitle2 col">
+              {{ x.FormatDate }}
+            </div>
+            <div class="f12" style="opacity: 0.5" :class="[x.PriceList[0].ins.color]">{{ x.PriceList[0].ins.text }}</div>
+          </div>
+          <!-- <q-separator color="white" style="opacity: .3;"/> -->
+          <div class="row justify-between q-pb-sm" style="border-bottom: 1px dashed rgba(255, 255, 255, 0.2)">
+            <div class="price-item">
+              <div class="label">{{ $t('hotel.col.ins') }}</div>
+              <div class="din">{{ x.Inventory }}</div>
+            </div>
+            <div class="price-item">
+              <div class="label">{{ $t('hotel.col.sins') }}</div>
+              <div class="din">{{ x.RemainingInventory }}</div>
+            </div>
+            <div class="price-item">
+              <div class="label">{{ $t('hotel.col.uins') }}</div>
+              <div class="din">{{ x.UseInventory }}</div>
+            </div>
+          </div>
+          <div class="row justify-between items-center">
+            <div class="price-item">
+              <div class="label">{{ $t('hotel.col.five') }}</div>
+              <div class="row items-center">
+                <div class="din">{{ x.PriceList[0].CostPrice.toFixed(2) }}円</div>
+                <!-- <div class="q-ml-md" style="font-size: 12px; opacity: 0.5">{{ $t('hotel.col.more') }}</div> -->
+              </div>
+            </div>
+            <q-btn color="color" :label="$t('hotel.buy')" class="q-pa-none q-px-md" dense outline style="opacity: 0.5" />
+          </div>
+          <div class="row justify-between q-mt-md q-pa-sm rounded-borders" style="background:rgba(255,255,255,.3)"  v-if="x.PriceList[0].room.length>0">
+            <div class="price-item q-ma-none" v-for="y in x.PriceList[0].room">
+              <div class="label">{{ y.name }}</div>
+              <div class="f12">{{ y.price.toFixed(2) }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { DirtionmaryHelper } from '../../../config/dictionary'
+import { defineComponent, toRefs, watch, reactive, inject } from 'vue'
+import useScrollModule from '../../../module/scrollbar/scrollModule'
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+  props: {
+    hotel: {
+      type: Object,
+      default: {},
+      require: true
+    }
+  },
+  setup(props) {
+    const { t } = useI18n()
+
+    const data = reactive({
+      h: {} as any,
+      scrollStyle: {} as any
+    })
+    watch(
+      () => props.hotel,
+      (o, n) => {
+        methods.setCurrentHotel(n)
+      }
+    )
+    
+    data.scrollStyle = useScrollModule().scrollStyle
+
+    const methods = {
+      setCurrentHotel(hotel:any) {
+        hotel.subList.forEach((x: any) => {
+          x.ShowMorePrice = false
+          if (x.PriceList && x.PriceList.length > 0) {
+            x.PriceList.forEach((y: any) => {
+              y.room = []
+              if (y.BidroomPrice > 0) {
+                y.room.push({
+                  name: t('hotel.rooms.big'),
+                  price: y.BidroomPrice
+                })
+              }
+              if (y.SingleroomPrice > 0) {
+                y.room.push({
+                  name: t('hotel.rooms.sing'),
+                  price: y.SingleroomPrice
+                })
+              }
+              if (y.AddBedPrice > 0) {
+                y.room.push({
+                  name: t('hotel.rooms.three'),
+                  price: y.GuideRoomPrice
+                })
+              }
+              if (y.GuideRoomPrice > 0) {
+                y.room.push({
+                  name: t('hotel.rooms.driver'),
+                  price: y.GuideRoomPrice
+                })
+              }
+            })
+          }
+        })
+        data.h = hotel
+      }
+    }
+
+    methods.setCurrentHotel(props.hotel)
+    const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
+
+    return { ...toRefs(data), ...methods, search }
+  }
+})
+</script>
+
+<style scoped>
+.price-item {
+  margin-top: 8px;
+}
+.price-item .label {
+  opacity: 0.5;
+  font-size: 12px;
+  font-weight: 400;
+}
+</style>

src/i18n/zh-TW/index.ts

@@ -38,6 +38,7 @@ export default {
     hotelRate: '酒店星級',
     minPrice: '最低價格',
     maxPrice: '最高價格',
+
     car:{
       shoppingTitle: '購物車',
       addShopping: '加入購物車',
@@ -50,21 +51,37 @@ export default {
       small: '數量不能小於',
       big: '大於剩餘數嘚',
     },
+    pricetips: '酒店報價表',
+    buy:'預定',
     table: {
       price: '價格',
       ins: '總/用/剩',
       limit: '超定'
     },
+    rooms:{
+      big:'大床房',
+      sing:'自然單間',
+      three:'三人間',
+      driver:'司導間'
+    },
     col: {
       first: '酒店名稱',
-      second: '價格&庫存'
+      second: '價格&庫存',
+      three: '總庫存',
+      four:'價格',
+      five:'標準間價格',
+      low:'起',
+      ins:'庫存',
+      sins:'剩餘庫存',
+      uins:'已預訂',
+      more:'更多房型報價'
     },
     datetype: {
       red: '紅日',
       pink: '旺季',
       avg: '平日',
       dan: '淡日',
-      spe: '特別',
+      spe: '特別日',
       xing: '行前日'
     },
     rates: {

src/pages/hotel/HotelList.vue

 <template>
   <div class="fix-height-subpage column no-wrap q-pa-md">
     <list-header></list-header>
-    <div class="light-shadow col q-mt-md q-pa-md bg-white rounded-border">
+    <div class="col q-mt-md" :class="{'light-shadow q-pa-md bg-white rounded-border':$q.platform.is.desktop}">
       <list-table></list-table>
     </div>
   </div>
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import useMetaModule from '../../module/meta/metaModule'
-import { DateTimeFormatResult, useI18n } from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import svgIcon from '../../components/global/svg-icon.vue'
 import { inject, provide, reactive, ref, toRefs } from 'vue'
 import { DirtionmaryHelper } from '../../config/dictionary'
@@ -19,7 +19,7 @@ export default {
   components: { svgIcon, ListHeader, ListTable },
   setup() {
     const data = reactive({})
-
+    console.log(' in ')
     let { setTitle } = useMetaModule()
     const { locale, t } = useI18n()
     const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any

src/router/routes.ts

@@ -4,7 +4,9 @@ const routes: RouteRecordRaw[] = [
 	{
 		path: '/index',
 		component: () => import('../layouts/MainLayout.vue'),
-		children: [{ path: '', component: () => import('../pages/Index.vue') },{ path: '/hotel', component: () => import('../pages/hotel/HotelList.vue') }]
+		children: [
+			{ path: '', component: () => import('../pages/Index.vue') },
+		{ path: '/hotel', component: () => import('../pages/hotel/HotelList.vue') }]
 	},
 	{
 		path:'/auth/login',

src/utils/tools.ts

@@ -69,7 +69,7 @@ export function getDateType(){
     id:4,
     text:t('hotel.datetype.dan'),
     color:'text-dark',
-    bg:'bg-grey-5'
+    bg:'bg-grey-3'
   })
   types.push({
     id:5,