@tplc/business 0.0.25 → 0.0.27

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.27](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.12...v0.0.27) (2024-10-10)
+
+
+### ✨ Features | 新功能
+
+* location ([bbb81cf](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/bbb81cf655d2b4d8ec7d70a7b7cf6fc46e8eb370))
+* search ([ab5bbe7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ab5bbe7eae9980295cd6b9948ff02b25ed115361))
+* updateVersion ([62d5c5e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/62d5c5e485675414085fb9c153473dc1265f5760))
+* 完善过滤组件 ([1b3b69e](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/1b3b69ed67c8203c21b70c99816be9914e1cd025))
+* 新增title更多 ([2ab8a64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/2ab8a64a63f768717dab13c921a8ff0262580176))
+* 新增城市选择 ([0c54f77](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/0c54f77c56721bb79222f5b6cd98bf3a40451900))
+* 日历 ([b3a6c8f](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/b3a6c8fe24dacdb007322d49e08696a6a26f1eaa))
+* 日历search ([c08044b](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c08044bdc2e45923f63faa97ce1a8fc737c61c74))
+* 日历默认9个月 ([28638e7](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/28638e7bb6c16cf77357b167f2bdd104442f0600))
+* 更新地址 ([76998fd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/76998fd84cacc3ec4c8abcb147a08509b1b3dbcb))
+* 调整类型 ([ea64183](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/ea64183b5421158c4580e2200d3abd52201dc728))
+
+### [0.0.26](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.10...v0.0.26) (2024-09-27)
+
+
+### ✨ Features | 新功能
+
+* 处理为esm ([3ac1688](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/3ac168860e3345a015b106c3400b7fcee8a80a6a))
+* 支持翻译 ([87a54ee](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/87a54eebb1dfc0df0a907cafde642fa240fd2439))
+* 新增数据同步 ([c1c8a59](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/c1c8a5960a1898e8e1b2ace64c561a98ee992324))
+* 翻译本地化 ([8e448a2](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/8e448a2aac46191f6064551b90eec64839452614))
+
 ### [0.0.25](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.24...v0.0.25) (2024-09-25)
 
 

package/components/lcb-calendar/api/index.ts

@@ -0,0 +1,17 @@
+export interface LcbHistoryResult {
+  date: string
+  topText: string
+  centerText: string
+  bottomText: string
+  dateName: string
+  price: number
+  status: number
+}
+
+export const queryHolidayInfoList = (data: {
+  startDate: string
+  endDate: string
+  /** 日历数据类型·住宿··hotel..门票·ticket */
+  businessType?: string
+  businessId?: string
+}) => uni.$lcb.http.post<LcbHistoryResult[]>('/holiday/queryHolidayInfoList', data)

package/components/lcb-calendar/lcb-calendar.vue

@@ -0,0 +1,116 @@
+<template>
+  <wd-calendar
+    v-model="value"
+    @confirm="handleConfirm"
+    type="daterange"
+    use-default-slot
+    allow-same-day
+    :formatter="formatter"
+    :min-date="minDate"
+    :max-date="maxDate"
+  >
+    <slot />
+  </wd-calendar>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@tplc/wot'
+import dayjs from 'dayjs/esm'
+import { ref } from 'vue'
+import { LcbHistoryResult, queryHolidayInfoList } from './api'
+const { translate } = useTranslate()
+
+defineOptions({
+  name: 'LcbCalendar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const holidayInfo = ref<Record<string, LcbHistoryResult>>({})
+
+const props = defineProps({
+  customClass: {
+    type: String,
+    default: '',
+  },
+  minDate: {
+    type: Number,
+    default: dayjs().startOf('day').valueOf(),
+  },
+  maxDate: {
+    type: Number,
+    default: dayjs().add(9, 'month').startOf('day').valueOf(),
+  },
+  defaultValue: {
+    type: Array<number>,
+    /** 最近三个月 number[] */
+    default: () => [
+      dayjs().startOf('day').valueOf(),
+      dayjs().add(1, 'day').startOf('day').valueOf(),
+    ],
+  },
+})
+const value = ref(props.defaultValue)
+const model = defineModel<number[]>()
+const getDayInfo = async () => {
+  const { data } = await queryHolidayInfoList({
+    /** 本月的第一天 */
+    startDate: dayjs(props.minDate).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
+    /** 第三个月最后一天 */
+    endDate: dayjs(props.maxDate).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
+  })
+  holidayInfo.value = data.reduce(
+    (acc, cur) => {
+      acc[cur.date] = cur
+      return acc
+    },
+    {} as Record<string, LcbHistoryResult>,
+  )
+}
+getDayInfo()
+const formatter = (day: any) => {
+  const date = new Date(day.date)
+  const now = new Date()
+
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const da = date.getDate()
+  const nowYear = now.getFullYear()
+  const nowMonth = now.getMonth()
+  const nowDa = now.getDate()
+
+  const info = holidayInfo.value[dayjs(day.date).format('YYYY-MM-DD')]
+  if (info.topText) {
+    day.topInfo = info.topText
+  }
+  if (info.bottomText) {
+    day.bottomInfo = info.bottomText
+  }
+  if (info.centerText) {
+    day.text = info.centerText
+  }
+  if (year === nowYear && month === nowMonth && da === nowDa) {
+    day.topInfo = translate('今天')
+  }
+
+  if (day.type === 'start') {
+    day.topInfo = translate('开始')
+  }
+
+  if (day.type === 'end') {
+    day.topInfo = translate('结束')
+  }
+
+  if (day.type === 'same') {
+    day.bottomInfo = translate('开始/结束')
+  }
+
+  return day
+}
+const handleConfirm = ({ value }: { value: number[] }) => {
+  model.value = value
+}
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-calendar-search/lcb-calendar-search.vue

@@ -0,0 +1,69 @@
+<template>
+  <lcb-block v-bind="$props" customClass="flex items-center">
+    <view
+      class="flex flex-1 text-#333 rounded-16rpx bg-#F5F5F7 h-78rpx flex items-center px-3 text-[28rpx]"
+    >
+      <lcb-city-select :location="userLocation">
+        <text class="font-bold">{{ userLocation?.cityName || '附近' }}</text>
+      </lcb-city-select>
+      <view class="v-line"></view>
+      <lcb-calendar v-model="dayRange">
+        <view class="flex items-center flex-col text-22rpx">
+          <view class="flex">
+            <view class="title">{{ dayjs(dayRange[0]).format('MM-DD') }}</view>
+            <view class="hint ml-2">{{ translate('入住') }}</view>
+          </view>
+          <view class="flex">
+            <view class="title">{{ dayjs(dayRange[1]).format('MM-DD') }}</view>
+            <view class="hint ml-2">{{ translate('离店') }}</view>
+          </view>
+        </view>
+      </lcb-calendar>
+
+      <view class="v-line"></view>
+      <view class="flex-1 flex items-center gap-2">
+        <wd-icon name="search" size="34rpx" color="#999999" />
+        <view class="text-#999999">{{ placeholder }}</view>
+      </view>
+    </view>
+    <wd-icon name="search" size="36rpx" color="#333" custom-class="ml-4" />
+  </lcb-block>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@tplc/wot'
+import dayjs from 'dayjs/esm'
+import useLocation from '../../hooks/useLocation'
+import { ref } from 'vue'
+import { LcbCalendarSearchProps } from './types'
+defineOptions({
+  name: 'LcbCalendarSearch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbCalendarSearchProps>(), {
+  marginHorizontal: 24,
+  radius: 16,
+  placeholder: '城市|地点|品牌',
+})
+const dayRange = ref([dayjs().valueOf(), dayjs().add(1, 'day').valueOf()])
+const { translate } = useTranslate()
+const { getLocation, userLocation } = useLocation()
+getLocation()
+</script>
+
+<style lang="scss" scoped>
+.v-line {
+  width: 1rpx;
+  height: 40rpx;
+  background: #999999;
+  opacity: 0.5;
+  margin: 0 20rpx;
+}
+.hint {
+  color: #999;
+}
+</style>

package/components/lcb-calendar-search/types.ts

@@ -0,0 +1,6 @@
+import { LcbBlockProps } from '../lcb-block/types'
+
+export interface LcbCalendarSearchProps extends LcbBlockProps {
+  // Define the component's prop types here
+  placeholder?: string
+}

package/components/lcb-city-select/api/index.ts

@@ -0,0 +1,20 @@
+export interface HotAddress {
+  categoryName: string
+  hint: string
+  childHotAddress: ChildHotAddress[]
+}
+
+export interface ChildHotAddress {
+  addr: string
+  addrFlag: boolean
+  area: string
+  categoryName: string
+  createDate?: string
+  hotAddressId: string
+  lastModifyDate?: string
+  latitude?: string
+  longitude?: string
+  weightSort: string
+  addressInfo?: string
+}
+export const getHotAddress = () => uni.$lcb.http.post<HotAddress[]>('/hotAddress/categoryList', {})

package/components/lcb-city-select/lcb-city-select.vue

@@ -0,0 +1,168 @@
+<template>
+  <view @click="show = true">
+    <slot />
+  </view>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    custom-style="height: 90vh;border-top-left-radius: 24rpx;border-top-right-radius: 24rpx;"
+    :safe-area-inset-bottom="true"
+  >
+    <view class="flex flex-col h-full">
+      <wd-search hide-cancel :placeholder="placeholder" />
+      <view class="h-0 flex-1" v-if="addressRef.length > 0">
+        <wd-index-bar>
+          <view
+            v-for="item in [...locationAddress, ...historyList, ...addressRef]"
+            :key="item.categoryName"
+          >
+            <wd-index-anchor
+              :index="item.categoryName"
+              :hint="item.hint"
+              customClass="!bg-transparent !pb-0 font-bold !text-28rpx !pl-4"
+            />
+            <view class="grid grid-cols-4 gap-3 py-3 pl-4 pr-10 box-border">
+              <view
+                class="address-tag"
+                :class="{
+                  'current-address':
+                    currentAddress && currentAddress.hotAddressId === city.hotAddressId,
+                }"
+                v-for="city in item.childHotAddress"
+                :key="city.addr"
+                @click="onAddrClick(city)"
+              >
+                {{ city.addr }}
+              </view>
+            </view>
+          </view>
+        </wd-index-bar>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { ChildHotAddress, getHotAddress, HotAddress } from './api'
+import { LcbCitySelectProps } from './types'
+defineOptions({
+  name: 'LcbCitySelect',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+const props = withDefaults(defineProps<LcbCitySelectProps>(), {
+  placeholder: '搜索城市/区域/景点',
+})
+const addressRef = ref<HotAddress[]>([])
+const historyAddress = ref<ChildHotAddress[]>([])
+const currentAddress = ref<ChildHotAddress | undefined>(
+  props.location
+    ? ({
+        addressInfo: props.location.addressInfo,
+        addr: props.location.cityName,
+        hotAddressId: props.location.cityId,
+      } as ChildHotAddress)
+    : undefined,
+)
+const show = ref(false)
+onMounted(async () => {
+  const { data } = await getHotAddress()
+  addressRef.value = data
+})
+const locationAddress = computed<HotAddress[]>(() => {
+  return props.location
+    ? ([
+        {
+          categoryName: '定位',
+          hint: '当前定位',
+          childHotAddress: [
+            {
+              addressInfo: props.location.addressInfo,
+              addr: props.location.cityName,
+              hotAddressId: props.location.cityId,
+            },
+          ],
+        },
+      ] as HotAddress[])
+    : []
+})
+
+const historyList = computed<HotAddress[]>(() => {
+  return historyAddress.value.length
+    ? [
+        {
+          categoryName: '历史',
+          hint: '历史记录',
+          childHotAddress: historyAddress.value,
+        },
+      ]
+    : []
+})
+watch(
+  () => show.value,
+  (val) => {
+    if (val) {
+      historyAddress.value = JSON.parse(uni.getStorageSync('historyAddress') || '[]')
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+watch(
+  () => historyAddress.value,
+  (val) => {
+    if (val.length) {
+      uni.setStorageSync('historyAddress', JSON.stringify(val))
+    }
+  },
+)
+const onAddrClick = (city: ChildHotAddress) => {
+  currentAddress.value = city
+  show.value = false
+  historyAddress.value = historyAddress.value.filter(
+    (item) => item.hotAddressId !== city.hotAddressId,
+  )
+  if (historyAddress.value.length === 8) {
+    historyAddress.value = [city, ...historyAddress.value.slice(0, 7)]
+  } else {
+    historyAddress.value = [city, ...historyAddress.value]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
+.address-tag {
+  background: #f7f7f7;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+  text-align: center;
+  overflow: hidden;
+}
+.current-address {
+  color: $-color-theme;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: $-color-theme;
+    opacity: 0.15;
+  }
+}
+</style>

package/components/lcb-city-select/types.ts

@@ -0,0 +1,7 @@
+import { UserLocation } from '../../hooks/useLocation.api'
+
+export interface LcbCitySelectProps {
+  // Define the component's prop types here
+  location?: UserLocation
+  placeholder?: string
+}

package/components/lcb-filter/components/ComponentGroup/index.vue

@@ -4,6 +4,15 @@
       <view class="lcb-filter__group-title mt2">
         {{ child.fitlerName }}
         <view v-if="child.componentProps.mode === 'multiple'" class="!text-22rpx">可多选</view>
+        <view v-if="child.component === 'slider'" class="!text-26rpx slider-title">
+          {{
+            getSliderTitle(
+              innerFilter[child.valueName],
+              child.componentProps.max,
+              child.componentProps.min,
+            )
+          }}
+        </view>
       </view>
       <view class="grid grid-cols-4 gap-22rpx" v-if="child.component === 'tagSelect'">
         <TagSelect v-bind="child.componentProps" v-model="innerFilter[child.valueName]" />
@@ -24,6 +33,7 @@ import { ComponentGroupProps } from './type'
 import FilterSlider from '../FilterSlider/index.vue'
 import TagSelect from '../TagSelect/index.vue'
 import ActionView from '../ActionView/index.vue'
+import { useTranslate } from '@tplc/wot'
 defineOptions({
   name: 'ComponentGroup',
   options: {
@@ -32,6 +42,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const { translate } = useTranslate()
 
 const props = defineProps<ComponentGroupProps>()
 const emits = defineEmits(['submit'])
@@ -65,8 +76,25 @@ const onCancel = () => {
 const onSubmit = () => {
   emits('submit', innerFilter.value)
 }
+const getSliderTitle = (value?: number[], max = 0, min = 0) => {
+  if (value) {
+    const [start, end] = value
+    if (start === min && end === max) {
+      return translate('不限')
+    } else if (end === max) {
+      return `¥${start}` + translate('以上')
+    } else if (start === min) {
+      return `¥${end}` + translate('以下')
+    } else {
+      return `¥${start}-${end}`
+    }
+  } else {
+    return ''
+  }
+}
 </script>
 <style lang="scss" scoped>
+@import '@tplc/wot/components/common/abstracts/variable';
 .lcb-filter {
   &__group-title {
     font-size: 30rpx;
@@ -75,6 +103,9 @@ const onSubmit = () => {
     margin-bottom: 24rpx;
     display: flex;
     align-items: center;
+    .slider-title {
+      color: $-color-theme !important;
+    }
 
     > view {
       font-size: 24rpx;

package/components/lcb-filter/components/TreeSelect/index.vue

@@ -114,8 +114,9 @@ watch(
         query.select(`#grid_${index}`).boundingClientRect()
       })
       query.exec((res) => {
-        console.log(res)
-        itemTopPositions.value = res.map((rect) => ({ top: rect.top, bottom: rect.bottom }))
+        itemTopPositions.value = res
+          .filter((v) => v)
+          .map((rect) => ({ top: rect.top, bottom: rect.bottom }))
       })
     })
   },

package/components/lcb-filter/lcb-filter.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { inject, Ref, ref, watch } from 'vue'
 import { LcbFilterProps } from './types'
 import { FilterComponent, getFilterDetail, LcbFilterResult } from './api'
 import FilterSelect from './components/FilterSelect/index.vue'
@@ -63,6 +63,7 @@ import TreeSelect from './components/TreeSelect/index.vue'
 import ComponentGroup from './components/ComponentGroup/index.vue'
 import TagSelect from './components/TagSelect/index.vue'
 import './index.scss'
+import { FORM_KEY } from '../../constants'
 defineOptions({
   name: 'LcbFilter',
   options: {
@@ -71,6 +72,7 @@ defineOptions({
     styleIsolation: 'shared',
   },
 })
+const form = inject<Ref<Record<string, any>>>(FORM_KEY)
 const dropMenu = ref()
 const props = withDefaults(defineProps<LcbFilterProps>(), {
   pageFilterType: 'hotelTravelFilter',
@@ -122,6 +124,22 @@ const getSelect = (item: FilterComponent) => {
 const handleOpened = () => {
   uni.$emit('drop-opened')
 }
+
+watch(
+  () => filter.value,
+  async (val) => {
+    if (form && Object.keys(val).length) {
+      form.value = {
+        ...form.value,
+        ...val,
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 </script>
 
 <style lang="scss" scoped>

package/components/lcb-home-search/lcb-home-search.vue

@@ -26,24 +26,31 @@
         <view class="h-42rpx w-1px bg-#F1F1F1"></view>
         <view class="text-#999 text-28rpx">{{ placeholder }}</view>
         <view class="flex-1"></view>
-        <view class="justify-center flex flex-col items-center">
+        <view class="justify-center flex flex-col items-center" @click="getLocation">
+          <wd-loading size="30rpx" v-if="locationIng" />
           <img
             class="w-30rpx h-30rpx"
             mode="aspectFit"
             src="https://ddll-lycs.oss-cn-hangzhou.aliyuncs.com/default/1/20240914164707/%E5%BD%A2%E7%8A%B6%2095%402x.png"
+            v-else
           />
-          <view class="text-26rpx text-#333 mt-12rpx">当前位置</view>
+          <view class="text-26rpx text-#333 mt-12rpx">
+            {{ locationIng ? translate('定位中...') : translate('当前位置') }}
+          </view>
         </view>
       </view>
       <view class="w-full h-1px bg-#F1F1F1 mt-26rpx mb-44rpx"></view>
-      <view class="flex items-center">
-        <view class="title">{{ dayRange[0].format('MM月DD日') }}</view>
-        <view class="hint ml-1">今天入住</view>
-        <view class="title mx-1">——</view>
-        <view class="title">{{ dayRange[1].format('MM月DD日') }}</view>
-        <view class="hint ml-1 flex-1">明天离店</view>
-        <view class="tag">共{{ nightCount }}晚</view>
-      </view>
+      <lcb-calendar v-model="dayRange">
+        <view class="flex items-center">
+          <view class="title">{{ dayjs(dayRange[0]).format('MM月DD日') }}</view>
+          <view class="hint ml-1">{{ getDayName(dayRange[0]) }}{{ translate('入住') }}</view>
+          <view class="title mx-1">——</view>
+          <view class="title">{{ dayjs(dayRange[1]).format('MM月DD日') }}</view>
+
+          <view class="hint ml-1 flex-1">{{ getDayName(dayRange[1]) }}{{ translate('离店') }}</view>
+          <view class="tag">{{ translate('共') }}{{ nightCount }}{{ translate('晚') }}</view>
+        </view>
+      </lcb-calendar>
       <wd-button type="primary" customClass="!w-full my-42rpx" size="large">
         {{ btnText }}
       </wd-button>
@@ -68,10 +75,15 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { LcbHomeSearch } from './types'
-import dayjs from 'dayjs'
-const dayRange = ref([dayjs(), dayjs().add(1, 'day')])
+import dayjs from 'dayjs/esm'
+import useLocation from '../../hooks/useLocation'
+import { useTranslate } from '@tplc/wot'
+const dayRange = ref([dayjs().valueOf(), dayjs().add(1, 'day').valueOf()])
+const { translate } = useTranslate()
+const { getLocation, locationIng } = useLocation()
+getLocation()
 const nightCount = computed(() => {
-  return dayRange.value[1].diff(dayRange.value[0], 'day')
+  return dayjs(dayRange.value[1]).diff(dayRange.value[0], 'day')
 })
 defineOptions({
   name: 'LcbHomeSearch',
@@ -91,6 +103,19 @@ withDefaults(defineProps<LcbHomeSearch>(), {
 })
 const tabs = ['全部', '酒店', '民宿']
 const current = ref(0)
+// 今天 明天 后天  周...
+const getDayName = (time: number) => {
+  const day = dayjs(time).day()
+  if (day === dayjs().day()) {
+    return '今天'
+  } else if (day === dayjs().add(1, 'day').day()) {
+    return '明天'
+  } else if (day === dayjs().add(2, 'day').day()) {
+    return '后天'
+  } else {
+    return `周${'日一二三四五六'[day]}`
+  }
+}
 </script>
 <style lang="scss" scoped>
 .search-view {

package/components/lcb-image/Image/index.vue

@@ -47,7 +47,7 @@
           top: transformValueUnit(getRealSize(each.y)),
         }"
       >
-        <lcb-action-view v-bind="each.urlObj" />
+        <lcb-action-view v-bind="each.urlObj" customClass="link" />
       </view>
     </view>
   </view>
@@ -84,14 +84,12 @@ function getRealSize(size: number = 0) {
 </script>
 <style lang="scss" scoped>
 .link {
-  .lcb-action-btn {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 </style>