aegon-lv82 1.0.0

package/src/views/greenMortgage.vue

@@ -0,0 +1,1834 @@
+<template>
+  <div class="green-mortgage-page">
+    <div class="green-mortgage">
+      <header class="green-mortgage__header">
+        <h1 class="green-mortgage__title">
+          Residential Properties that hold valid Gold/Platinum ratings under BEAM Plus New Buildings
+          (NB) / Existing Buildings (EB)
+        </h1>
+        <p class="green-mortgage__subtitle">
+          持有有效的綠建環評新建建築 (NB) / 既有建築 (EB) 金級/鉑金級的住宅物業
+        </p>
+        <p class="green-mortgage__meta">
+          Data Update Date
+          <span class="green-mortgage__meta-value">{{ dataUpdateDate || 'YYYY-MM-DD' }}</span>
+        </p>
+        <p class="green-mortgage__meta">
+          Data Download Status
+          <span class="green-mortgage__meta-value">{{
+            dataDownloadStatus || 'Automatically Downloaded'
+          }}</span>
+        </p>
+      </header>
+
+      <section class="green-mortgage__filters">
+        <div class="green-mortgage__filter-row">
+          <div class="green-mortgage__filter-group">
+            <label class="green-mortgage__filter-label" for="gm-rating-select"
+              >Select Rating(s)</label
+            >
+            <el-select
+              id="gm-rating-select"
+              v-model="selectedRatings"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder=""
+              class="green-mortgage__rating-select"
+              clearable
+            >
+              <el-option v-for="item in ratingOptions" :key="item" :label="item" :value="item" />
+            </el-select>
+          </div>
+
+          <div class="green-mortgage__filter-group green-mortgage__filter-group--period">
+            <span class="green-mortgage__filter-label">Certification period</span>
+            <div class="green-mortgage__period-controls">
+              <el-date-picker
+                v-model="yearRange"
+                type="yearrange"
+                format="YYYY"
+                value-format="YYYY"
+                range-separator="to"
+                start-placeholder=""
+                end-placeholder=""
+                class="green-mortgage__date-input"
+                style="width: 320px; --el-date-editor-width: 320px"
+                clearable
+              />
+              <el-button class="green-mortgage__refresh-btn" @click="handleRefresh">
+                Refresh
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="green-mortgage__action-row">
+          <el-button class="green-mortgage__export-btn" @click="handleExportExcel">
+            Export to Excel
+          </el-button>
+
+          <div class="green-mortgage__search">
+            <label class="green-mortgage__search-label" for="gm-search">Search:</label>
+            <el-input
+              id="gm-search"
+              v-model="searchKeyword"
+              class="green-mortgage__search-input"
+              clearable
+            />
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="green-mortgage__table-wrap"
+        @mouseenter="onTableShellEnter"
+        @mouseleave="onTableShellLeave"
+      >
+        <div class="green-mortgage__table-main">
+          <div class="green-mortgage__table-row">
+            <div
+              ref="tableRootRef"
+              class="green-mortgage__table-shell"
+              :class="{ 'is-scrollbar-visible': showScrollbars }"
+            >
+              <el-table
+                ref="tableRef"
+                v-loading="tableLoading"
+                :data="filteredRows"
+                border
+                stripe
+                class="green-mortgage__table"
+                empty-text=" "
+                height="100%"
+                :default-sort="{ prop: 'propertyNameEng', order: 'ascending' }"
+                @header-dragend="onHeaderDragEnd"
+              >
+                <el-table-column
+                  prop="propertyNameEng"
+                  :width="columnWidths.propertyNameEng"
+                  sortable
+                  :sort-method="sortByPropertyName"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--single">
+                      <span>Property Name</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="propertyNameChi"
+                  :width="columnWidths.propertyNameChi"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--single">
+                      <span>物業名稱</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="propertyAddress"
+                  :width="columnWidths.propertyAddress"
+                  sortable
+                  :sort-method="sortByPropertyAddress"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--inline">
+                      <span>Property Address</span>
+                      <span>物業地址</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="owner"
+                  :width="columnWidths.owner"
+                  sortable
+                  :sort-method="sortByOwner"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th">
+                      <span>Owner/Developer Co. Name</span>
+                      <span>項目持有人/發展商名稱</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="district"
+                  :width="columnWidths.district"
+                  sortable
+                  :sort-method="sortByDistrict"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--inline">
+                      <span>District</span>
+                      <span>地區</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="tool"
+                  :width="columnWidths.tool"
+                  sortable
+                  :sort-method="sortByTool"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--inline">
+                      <span>Tool</span>
+                      <span>評估工具</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="projectType"
+                  :width="columnWidths.projectType"
+                  sortable
+                  :sort-method="sortByProjectType"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th">
+                      <span>Project Type</span>
+                      <span>項目類型</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="achievedRating"
+                  :width="columnWidths.achievedRating"
+                  sortable
+                  :sort-method="sortByAchievedRating"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th">
+                      <span>Achieved Rating</span>
+                      <span>獲得評級</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="year"
+                  :width="columnWidths.year"
+                  align="center"
+                  sortable
+                  :sort-method="sortByYear"
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--single">
+                      <span>Year</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="month"
+                  :width="columnWidths.month"
+                  align="center"
+                  sortable
+                  :sort-method="sortByMonth"
+                >
+                  <template #header>
+                    <div class="green-mortgage__th green-mortgage__th--single">
+                      <span>Month</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  prop="gbCertLabelNo"
+                  :min-width="columnWidths.gbCertLabelNo"
+                  sortable
+                  :sort-method="sortByGbCertLabelNo"
+                  show-overflow-tooltip
+                >
+                  <template #header>
+                    <div class="green-mortgage__th">
+                      <span>GB Cert Label No</span>
+                      <span>售樓書上的標籤號碼</span>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+
+          <!-- 外側橫向滑塊：表格底邊外側，不佔表高 -->
+          <div class="green-mortgage__hbar-row">
+            <div
+              v-show="hScrollCan"
+              ref="hbarRef"
+              class="green-mortgage__hbar"
+              aria-hidden="true"
+              @mousedown.prevent="onHTrackMouseDown"
+            >
+              <div
+                class="green-mortgage__hthumb"
+                :class="{ 'is-visible': showScrollbars }"
+                :style="hbarThumbStyle"
+                @mousedown.stop.prevent="onHThumbMouseDown"
+              />
+            </div>
+          </div>
+
+          <!-- 外側豎向滑塊：表格右邊外側（落在 card 右 padding），不佔列寬 -->
+          <div
+            v-show="scrollCan"
+            class="green-mortgage__vbar"
+            :style="vbarTrackStyle"
+            @mousedown.prevent="onTrackMouseDown"
+          >
+            <div
+              class="green-mortgage__vthumb"
+              :class="{ 'is-visible': showScrollbars }"
+              :style="vbarThumbStyle"
+              @mousedown.stop.prevent="onThumbMouseDown"
+            />
+          </div>
+        </div>
+
+        <div class="green-mortgage__table-footer">
+          <span class="green-mortgage__table-footer-left">
+            {{ filteredRows.length }} result{{ filteredRows.length === 1 ? '' : 's' }} 搜索結果
+          </span>
+          <span class="green-mortgage__table-footer-right">
+            excluding student hostels and staff quarters 不包括職員/學生宿舍
+          </span>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import greenMortgageApi from '@/api/modules/industry/green_mortgage'
+import { industryExportToExcel } from '@/utils/function'
+import { useHiddenLayoutScroll } from '@/utils/gen-ai-scroll'
+import type { TableInstance } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface GreenMortgageRow {
+  propertyNameEng: string
+  propertyNameChi: string
+  propertyAddress: string
+  owner: string
+  district: string
+  tool: string
+  projectType: string
+  achievedRating: string
+  year: string
+  month: string
+  gbCertLabelNo: string
+}
+
+const EXPORT_TABLE_HEADERS = [
+  'Property Name',
+  '物業名稱',
+  'Property Address',
+  'Owner/Developer Co. Name',
+  'District',
+  'Tool',
+  'Project Type',
+  'Achieved Rating',
+  'Year',
+  'Month',
+  'GB Cert Label No',
+] as const
+
+const COLUMN_WIDTH_STORAGE_KEY = 'green-mortgage-table-column-widths'
+
+const DEFAULT_COLUMN_WIDTHS: Record<string, number> = {
+  propertyNameEng: 120,
+  propertyNameChi: 120,
+  propertyAddress: 170,
+  owner: 210,
+  district: 90,
+  tool: 90,
+  projectType: 110,
+  achievedRating: 120,
+  year: 72,
+  month: 72,
+  gbCertLabelNo: 150,
+}
+
+function loadColumnWidths(): Record<string, number> {
+  try {
+    const raw = localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY)
+    if (!raw) return { ...DEFAULT_COLUMN_WIDTHS }
+    const parsed = JSON.parse(raw) as Record<string, unknown>
+    const next = { ...DEFAULT_COLUMN_WIDTHS }
+    for (const key of Object.keys(DEFAULT_COLUMN_WIDTHS)) {
+      const value = Number(parsed[key])
+      if (Number.isFinite(value) && value >= 48) next[key] = Math.round(value)
+    }
+    return next
+  } catch {
+    return { ...DEFAULT_COLUMN_WIDTHS }
+  }
+}
+
+const columnWidths = ref<Record<string, number>>(loadColumnWidths())
+
+function persistColumnWidths() {
+  localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidths.value))
+}
+
+function onHeaderDragEnd(newWidth: number, _oldWidth: number, column: { property?: string }) {
+  const prop = column?.property
+  if (!prop || !(prop in DEFAULT_COLUMN_WIDTHS)) return
+  columnWidths.value = {
+    ...columnWidths.value,
+    [prop]: Math.max(48, Math.round(newWidth)),
+  }
+  persistColumnWidths()
+  void nextTick(() => refreshTableScrollUi())
+}
+
+const tableLoading = ref(false)
+const dataUpdateDate = ref('')
+const dataDownloadStatus = ref('')
+const ratingOptions = ref<string[]>([])
+/** 下拉選單當前選值（改動不立刻刷表，需點 Refresh） */
+const selectedRatings = ref<string[]>([])
+/** Year Range：[startYear, endYear]，元件保證 end >= start（改動不立刻刷表，需點 Refresh） */
+const yearRange = ref<string[] | null>(null)
+/** 已套用到列表的 Rating / Year（僅進頁預設與 Refresh 時寫入） */
+const appliedRatings = ref<string[]>([])
+const appliedYearRange = ref<string[] | null>(null)
+const searchKeyword = ref('')
+const tableRows = ref<GreenMortgageRow[]>([])
+const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
+
+const startYear = computed(() => {
+  const start = yearRange.value?.[0]
+  return start != null ? String(start) : ''
+})
+const endYear = computed(() => {
+  const end = yearRange.value?.[1]
+  return end != null ? String(end) : ''
+})
+
+const tableRootRef = ref<HTMLElement | null>(null)
+const tableRef = ref<TableInstance>()
+const hbarRef = ref<HTMLElement | null>(null)
+
+/** 表體內側自繪滾動條 */
+const THUMB_PX = 50
+const H_THUMB_PX = 50
+const SCROLL_THUMB_COLOR = '#c1c1c1'
+/** 判定可豎滾的溢出閾值（避免 10 條內仍誤顯滾動條） */
+const V_OVERFLOW_THRESHOLD = 8
+const H_OVERFLOW_THRESHOLD = 8
+/** 豎軌道底部預留，避免與橫軌道打架 */
+const V_BAR_BOTTOM_RESERVE = 4
+const scrollCan = ref(false)
+const hScrollCan = ref(false)
+const thumbHeight = ref(THUMB_PX)
+const thumbOffset = ref(0)
+const trackTop = ref(0)
+const trackHeight = ref(0)
+const hThumbWidth = ref(H_THUMB_PX)
+const hThumbOffset = ref(0)
+const hTrackWidth = ref(0)
+const tableHovered = ref(false)
+const thumbDragging = ref(false)
+const hThumbDragging = ref(false)
+
+const showScrollbars = computed(
+  () => tableHovered.value || thumbDragging.value || hThumbDragging.value
+)
+
+const vbarTrackStyle = computed(() => ({
+  top: `${trackTop.value}px`,
+  height: `${trackHeight.value}px`,
+}))
+
+const vbarThumbStyle = computed(() => ({
+  transform: `translateY(${thumbOffset.value}px)`,
+  backgroundColor: SCROLL_THUMB_COLOR,
+}))
+
+const hbarThumbStyle = computed(() => ({
+  transform: `translateX(${hThumbOffset.value}px)`,
+  backgroundColor: SCROLL_THUMB_COLOR,
+}))
+
+function onTableShellEnter() {
+  tableHovered.value = true
+  void nextTick(() => refreshOuterBar())
+}
+
+function onTableShellLeave() {
+  if (thumbDragging.value || hThumbDragging.value) return
+  tableHovered.value = false
+}
+
+/** 真正可滾的 wrap（優先 el-scrollbar__wrap） */
+function getScrollWrap(): HTMLElement | null {
+  const root = tableRootRef.value
+  if (!root) return null
+
+  const wrap =
+    (root.querySelector('.el-table__body-wrapper .el-scrollbar__wrap') as HTMLElement | null) ||
+    (root.querySelector('.el-scrollbar__wrap') as HTMLElement | null) ||
+    (root.querySelector('.el-table__body-wrapper') as HTMLElement | null)
+
+  return wrap
+}
+
+/** 橫滾時同步表頭，避免表體動、表頭不動 */
+function syncHeaderScrollLeft(left: number) {
+  const root = tableRootRef.value
+  if (!root) return
+  const headerWrap = root.querySelector('.el-table__header-wrapper') as HTMLElement | null
+  if (headerWrap && headerWrap.scrollLeft !== left) headerWrap.scrollLeft = left
+}
+
+function refreshOuterBar() {
+  const root = tableRootRef.value
+  const wrap = getScrollWrap()
+  if (!root || !wrap) {
+    scrollCan.value = false
+    hScrollCan.value = false
+    return
+  }
+
+  const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = wrap
+
+  // —— 豎向（無資料時不顯示） ——
+  const vOverflow = scrollHeight - clientHeight
+  const canV = filteredRows.value.length > 0 && vOverflow > V_OVERFLOW_THRESHOLD
+  scrollCan.value = canV
+  if (canV) {
+    const header = root.querySelector('.el-table__header-wrapper') as HTMLElement | null
+    const headerH = header?.offsetHeight ?? 0
+    trackTop.value = headerH + 2
+    trackHeight.value = Math.max(0, clientHeight - V_BAR_BOTTOM_RESERVE)
+    const trackH = trackHeight.value
+    if (trackH <= 0) {
+      scrollCan.value = false
+    } else {
+      thumbHeight.value = THUMB_PX
+      const maxTravel = Math.max(0, trackH - THUMB_PX)
+      thumbOffset.value =
+        vOverflow > 0 && maxTravel > 0 ? Math.round((scrollTop / vOverflow) * maxTravel) : 0
+    }
+  }
+
+  // —— 橫向（列寬溢出） ——
+  const hOverflow = scrollWidth - clientWidth
+  const canH = hOverflow > H_OVERFLOW_THRESHOLD
+  hScrollCan.value = canH
+  if (canH) {
+    // 軌道寬以可見 hbar / 表體為準
+    const trackW = Math.max(0, hbarRef.value?.clientWidth || root.clientWidth || clientWidth)
+    hTrackWidth.value = trackW
+    hThumbWidth.value = H_THUMB_PX
+    const maxTravel = Math.max(0, trackW - H_THUMB_PX)
+    hThumbOffset.value =
+      hOverflow > 0 && maxTravel > 0 ? Math.round((scrollLeft / hOverflow) * maxTravel) : 0
+    syncHeaderScrollLeft(scrollLeft)
+  }
+}
+
+function onWrapScroll() {
+  if (thumbDragging.value || hThumbDragging.value) return
+  const wrap = getScrollWrap()
+  if (wrap) syncHeaderScrollLeft(wrap.scrollLeft)
+  refreshOuterBar()
+}
+
+let dragCleanup: (() => void) | undefined
+let boundWrap: HTMLElement | null = null
+let tableResizeObserver: ResizeObserver | undefined
+
+function applyThumbScroll(
+  scrollEl: HTMLElement,
+  nextOffset: number,
+  maxTravel: number,
+  scrollMax: number
+) {
+  const offset = Math.min(maxTravel, Math.max(0, nextOffset))
+  thumbOffset.value = offset
+  if (maxTravel <= 0 || scrollMax <= 0) return
+  scrollEl.scrollTop = (offset / maxTravel) * scrollMax
+}
+
+function applyHThumbScroll(
+  scrollEl: HTMLElement,
+  nextOffset: number,
+  maxTravel: number,
+  scrollMax: number
+) {
+  const offset = Math.min(maxTravel, Math.max(0, nextOffset))
+  hThumbOffset.value = offset
+  if (maxTravel <= 0 || scrollMax <= 0) return
+  const left = (offset / maxTravel) * scrollMax
+  scrollEl.scrollLeft = left
+  syncHeaderScrollLeft(left)
+}
+
+function onThumbMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !scrollCan.value) return
+  const scrollEl: HTMLElement = wrapEl
+
+  thumbDragging.value = true
+  tableHovered.value = true
+
+  const startY = event.clientY
+  const startTop = thumbOffset.value
+  const startScrollTop = scrollEl.scrollTop
+  const trackH = trackHeight.value
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = Math.max(0, scrollEl.scrollHeight - scrollEl.clientHeight)
+
+  function onMove(e: MouseEvent) {
+    if (scrollMax <= 0 || trackH <= 0) return
+    const delta = e.clientY - startY
+    if (maxTravel <= 0) {
+      scrollEl.scrollTop = Math.min(
+        scrollMax,
+        Math.max(0, startScrollTop + (delta / trackH) * scrollMax)
+      )
+      return
+    }
+    applyThumbScroll(scrollEl, startTop + delta, maxTravel, scrollMax)
+  }
+
+  function onUp() {
+    thumbDragging.value = false
+    const root = tableRootRef.value?.closest('.green-mortgage__table-wrap')
+    if (!root?.matches(':hover')) tableHovered.value = false
+    dragCleanup?.()
+    dragCleanup = undefined
+    refreshOuterBar()
+  }
+
+  window.addEventListener('mousemove', onMove, { passive: true })
+  window.addEventListener('mouseup', onUp, { once: true })
+  dragCleanup = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+}
+
+/** 點擊豎軌道空白處跳轉 */
+function onTrackMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !scrollCan.value) return
+  const trackH = trackHeight.value
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = Math.max(0, wrapEl.scrollHeight - wrapEl.clientHeight)
+  if (trackH <= 0 || scrollMax <= 0) return
+
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  const y = event.clientY - rect.top - thumbHeight.value / 2
+  if (maxTravel <= 0) {
+    wrapEl.scrollTop = Math.min(scrollMax, Math.max(0, (y / trackH) * scrollMax))
+  } else {
+    applyThumbScroll(wrapEl, y, maxTravel, scrollMax)
+  }
+  onThumbMouseDown(event)
+}
+
+function onHThumbMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !hScrollCan.value) return
+  const scrollEl: HTMLElement = wrapEl
+
+  hThumbDragging.value = true
+  tableHovered.value = true
+
+  const startX = event.clientX
+  const startLeft = hThumbOffset.value
+  const startScrollLeft = scrollEl.scrollLeft
+  const trackW = Math.max(
+    0,
+    hTrackWidth.value || hbarRef.value?.clientWidth || scrollEl.clientWidth
+  )
+  const maxTravel = Math.max(0, trackW - hThumbWidth.value)
+  const scrollMax = Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth)
+
+  function onMove(e: MouseEvent) {
+    if (scrollMax <= 0 || trackW <= 0) return
+    const delta = e.clientX - startX
+    if (maxTravel <= 0) {
+      const left = Math.min(scrollMax, Math.max(0, startScrollLeft + (delta / trackW) * scrollMax))
+      scrollEl.scrollLeft = left
+      syncHeaderScrollLeft(left)
+      return
+    }
+    applyHThumbScroll(scrollEl, startLeft + delta, maxTravel, scrollMax)
+  }
+
+  function onUp() {
+    hThumbDragging.value = false
+    const root = tableRootRef.value?.closest('.green-mortgage__table-wrap')
+    if (!root?.matches(':hover')) tableHovered.value = false
+    dragCleanup?.()
+    dragCleanup = undefined
+    refreshOuterBar()
+  }
+
+  window.addEventListener('mousemove', onMove, { passive: true })
+  window.addEventListener('mouseup', onUp, { once: true })
+  dragCleanup = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+}
+
+function onHTrackMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !hScrollCan.value) return
+  const trackW = Math.max(0, hTrackWidth.value || hbarRef.value?.clientWidth || wrapEl.clientWidth)
+  const maxTravel = Math.max(0, trackW - hThumbWidth.value)
+  const scrollMax = Math.max(0, wrapEl.scrollWidth - wrapEl.clientWidth)
+  if (trackW <= 0 || scrollMax <= 0) return
+
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  const x = event.clientX - rect.left - hThumbWidth.value / 2
+  if (maxTravel <= 0) {
+    const left = Math.min(scrollMax, Math.max(0, (x / trackW) * scrollMax))
+    wrapEl.scrollLeft = left
+    syncHeaderScrollLeft(left)
+  } else {
+    applyHThumbScroll(wrapEl, x, maxTravel, scrollMax)
+  }
+  onHThumbMouseDown(event)
+}
+
+function bindWrapScroll() {
+  unbindWrapScroll()
+  const wrap = getScrollWrap()
+  if (!wrap) return
+  wrap.addEventListener('scroll', onWrapScroll, { passive: true })
+  boundWrap = wrap
+}
+
+function unbindWrapScroll() {
+  boundWrap?.removeEventListener('scroll', onWrapScroll)
+  boundWrap = null
+}
+
+function refreshTableScrollUi() {
+  tableRef.value?.doLayout()
+  void nextTick(() => {
+    bindWrapScroll()
+    refreshOuterBar()
+  })
+}
+
+function syncViewportWidth() {
+  viewportWidth.value = window.innerWidth
+  refreshTableScrollUi()
+}
+
+const filteredRows = computed(() => filterRowsByCurrentCriteria(tableRows.value))
+
+watch(filteredRows, () => {
+  void nextTick(() => refreshTableScrollUi())
+})
+
+function pickString(record: Record<string, unknown>, keys: string[]) {
+  for (const key of keys) {
+    const value = record[key]
+    if (value != null && value !== '') return String(value)
+  }
+  return ''
+}
+
+function normalizeRow(item: unknown): GreenMortgageRow {
+  const record = item && typeof item === 'object' ? (item as Record<string, unknown>) : {}
+  return {
+    propertyNameEng: pickString(record, ['propertyNameEng', 'PROPERTY_NAME_ENG']),
+    propertyNameChi: pickString(record, ['propertyNameChi', 'PROPERTY_NAME_CHI']),
+    propertyAddress: pickString(record, ['propertyAddress', 'PROPERTY_ADDRESS']),
+    owner: pickString(record, ['owner', 'OWNER']),
+    district: pickString(record, ['district', 'DISTRICT']),
+    tool: pickString(record, ['tool', 'TOOL']),
+    projectType: pickString(record, ['projectType', 'PROJECT_TYPE']),
+    achievedRating: pickString(record, ['achievedRating', 'ACHIEVED_RATING']),
+    year: pickString(record, ['year', 'YEAR', 'Year']),
+    month: pickString(record, ['month', 'MONTH']),
+    gbCertLabelNo: pickString(record, ['gbCertLabelNo', 'GB_CERT_LABEL_NO']),
+  }
+}
+
+function parseQueryResponse(data: unknown) {
+  if (!data || typeof data !== 'object') {
+    return { rows: [] as GreenMortgageRow[], dataUpdateDate: '', dataDownloadStatus: '' }
+  }
+
+  const record = data as Record<string, unknown>
+  // 兼容 data 再包一層
+  const inner =
+    record.data && typeof record.data === 'object' && !Array.isArray(record.data)
+      ? (record.data as Record<string, unknown>)
+      : record
+
+  const statusVO =
+    (inner.riskModelDataStatusVO && typeof inner.riskModelDataStatusVO === 'object'
+      ? (inner.riskModelDataStatusVO as Record<string, unknown>)
+      : null) ||
+    (record.riskModelDataStatusVO && typeof record.riskModelDataStatusVO === 'object'
+      ? (record.riskModelDataStatusVO as Record<string, unknown>)
+      : {})
+
+  const list = inner.riskModelDataVOList ?? record.riskModelDataVOList
+  const rows = Array.isArray(list) ? list.map(normalizeRow) : []
+
+  return {
+    rows,
+    dataUpdateDate: pickString(statusVO, ['dataUpdateDate', 'DataUpdateDate']),
+    dataDownloadStatus: pickString(statusVO, ['dataDownloadStatus', 'DataDownloadStatus']),
+  }
+}
+
+function parseRatingsResponse(data: unknown): string[] {
+  if (!Array.isArray(data)) return []
+  return data.map((item) => String(item).trim()).filter(Boolean)
+}
+
+function compareLexicographic(a: unknown, b: unknown) {
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+    sensitivity: 'base',
+  })
+}
+
+function compareText(a: unknown, b: unknown) {
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  })
+}
+
+function compareAlphabeticalEmptyFirst(a: unknown, b: unknown) {
+  const strA = String(a ?? '').trim()
+  const strB = String(b ?? '').trim()
+  const emptyA = strA === ''
+  const emptyB = strB === ''
+
+  if (emptyA && emptyB) return 0
+  if (emptyA) return -1
+  if (emptyB) return 1
+
+  return strA.localeCompare(strB, undefined, { sensitivity: 'base' })
+}
+
+function createAlphabeticalEmptyFirstSorter(key: keyof GreenMortgageRow) {
+  return (a: GreenMortgageRow, b: GreenMortgageRow) => compareAlphabeticalEmptyFirst(a[key], b[key])
+}
+
+/** 首字元：數字 0 → 字母 1 → 其他 2 */
+function getFirstCharSortCategory(text: string) {
+  const trimmed = text.trim()
+  if (!trimmed) return 2
+  const first = trimmed.charAt(0)
+  if (/\d/.test(first)) return 0
+  if (/[a-zA-Z]/.test(first)) return 1
+  return 2
+}
+
+function getPropertyNameSortKey(row: GreenMortgageRow) {
+  return (row.propertyNameEng || '').trim()
+}
+
+function getPropertyNameLeadingNumber(name: string) {
+  const matched = name.trim().match(/^(\d+)/)
+  return matched ? Number(matched[1]) : Number.NaN
+}
+
+const sortByPropertyName = (a: GreenMortgageRow, b: GreenMortgageRow) => {
+  const nameA = getPropertyNameSortKey(a)
+  const nameB = getPropertyNameSortKey(b)
+  const categoryA = getFirstCharSortCategory(nameA)
+  const categoryB = getFirstCharSortCategory(nameB)
+
+  if (categoryA !== categoryB) return categoryA - categoryB
+
+  if (categoryA === 0) {
+    const leadingA = getPropertyNameLeadingNumber(nameA)
+    const leadingB = getPropertyNameLeadingNumber(nameB)
+    if (!Number.isNaN(leadingA) && !Number.isNaN(leadingB) && leadingA !== leadingB) {
+      return leadingA - leadingB
+    }
+  }
+
+  return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' })
+}
+
+const sortByPropertyAddress = (a: GreenMortgageRow, b: GreenMortgageRow) => {
+  const addressA = (a.propertyAddress || '').trim()
+  const addressB = (b.propertyAddress || '').trim()
+  const categoryA = getFirstCharSortCategory(addressA)
+  const categoryB = getFirstCharSortCategory(addressB)
+
+  if (categoryA !== categoryB) return categoryA - categoryB
+
+  return compareLexicographic(addressA, addressB)
+}
+const sortByOwner = (a: GreenMortgageRow, b: GreenMortgageRow) => compareText(a.owner, b.owner)
+const sortByDistrict = createAlphabeticalEmptyFirstSorter('district')
+const sortByTool = createAlphabeticalEmptyFirstSorter('tool')
+const sortByProjectType = createAlphabeticalEmptyFirstSorter('projectType')
+const sortByAchievedRating = createAlphabeticalEmptyFirstSorter('achievedRating')
+const sortByYear = createAlphabeticalEmptyFirstSorter('year')
+/** Month：按 1–12 月份數值排序（空值靠前），非字母序 */
+const sortByMonth = (a: GreenMortgageRow, b: GreenMortgageRow) => {
+  const monthA = parseMonthNumber(a.month)
+  const monthB = parseMonthNumber(b.month)
+  const emptyA = monthA == null
+  const emptyB = monthB == null
+  if (emptyA && emptyB) return 0
+  if (emptyA) return -1
+  if (emptyB) return 1
+  return monthA - monthB
+}
+const sortByGbCertLabelNo = createAlphabeticalEmptyFirstSorter('gbCertLabelNo')
+
+function parseMonthNumber(value: unknown): number | null {
+  const raw = String(value ?? '').trim()
+  if (!raw) return null
+  const direct = Number(raw)
+  if (Number.isFinite(direct) && direct >= 1 && direct <= 12) return Math.trunc(direct)
+  const matched = raw.match(/(\d{1,2})/)
+  if (matched?.[1]) {
+    const n = Number(matched[1])
+    if (Number.isFinite(n) && n >= 1 && n <= 12) return Math.trunc(n)
+  }
+  const key = raw.toLowerCase().slice(0, 3)
+  const nameMap: Record<string, number> = {
+    jan: 1,
+    feb: 2,
+    mar: 3,
+    apr: 4,
+    may: 5,
+    jun: 6,
+    jul: 7,
+    aug: 8,
+    sep: 9,
+    oct: 10,
+    nov: 11,
+    dec: 12,
+  }
+  return nameMap[key] ?? null
+}
+
+async function fetchGreenMortgageRatings() {
+  try {
+    const res = await greenMortgageApi.getGreenMortgageRatings()
+    ratingOptions.value = parseRatingsResponse(res?.data)
+    selectedRatings.value = [...ratingOptions.value]
+  } catch (error) {
+    console.error('getGreenMortgageRatings failed', error)
+    ratingOptions.value = []
+    selectedRatings.value = []
+  }
+}
+
+function asTrimmedText(value: string | null | undefined) {
+  return String(value ?? '').trim()
+}
+
+function filterRowsByKeyword(rows: GreenMortgageRow[]) {
+  const keyword = asTrimmedText(searchKeyword.value).toLowerCase()
+  if (!keyword) return rows
+
+  return rows.filter((row) =>
+    Object.values(row).some((value) => String(value).toLowerCase().includes(keyword))
+  )
+}
+
+/** 從 Certification period / Year 欄取值中提取年份（相容 YYYY、YYYY-MM-DD、夾雜文字） */
+function getYearFromPeriod(value: string | null | undefined): number | null {
+  const trimmed = asTrimmedText(value)
+  if (!trimmed) return null
+  const matched = trimmed.match(/(\d{4})/)
+  if (!matched?.[1]) return null
+  const year = Number(matched[1])
+  if (Number.isNaN(year) || year < 1900 || year > 2100) return null
+  return year
+}
+
+/** 接口返回後：遍歷列表 Year 欄，寫入最小 / 最大年份到 yearRange（進頁可見預設值） */
+function applyYearRangeFromTableYearColumn(rows: GreenMortgageRow[]) {
+  let min = Infinity
+  let max = -Infinity
+  for (const row of rows) {
+    const year = getYearFromPeriod(row.year)
+    if (year == null) continue
+    if (year < min) min = year
+    if (year > max) max = year
+  }
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    yearRange.value = null
+    return
+  }
+  // 新建陣列，確保 yearrange 能偵測到變更並顯示
+  yearRange.value = [String(min), String(max)]
+}
+
+/**
+ * 列表篩選：已套用的 Select Rating(s) + Certification period + 即時 Search
+ * Rating / Year 僅在進頁預設與點 Refresh 後生效
+ */
+function filterRowsByCurrentCriteria(rows: GreenMortgageRow[]) {
+  let result = rows
+
+  if (appliedRatings.value.length > 0) {
+    const ratingSet = new Set(appliedRatings.value)
+    result = result.filter((row) => ratingSet.has(row.achievedRating))
+  }
+
+  const start = getYearFromPeriod(appliedYearRange.value?.[0])
+  const end = getYearFromPeriod(appliedYearRange.value?.[1])
+  if (start != null || end != null) {
+    result = result.filter((row) => {
+      const raw = row.year
+      if (raw == null || String(raw).trim() === '') return true
+      const year = Number(raw)
+      if (Number.isNaN(year)) return true
+      if (start != null && year < start) return false
+      if (end != null && year > end) return false
+      return true
+    })
+  }
+
+  return filterRowsByKeyword(result)
+}
+
+/** 將當前下拉 / 日期選值套用到列表篩選 */
+function commitFilterCriteria() {
+  appliedRatings.value = [...selectedRatings.value]
+  appliedYearRange.value = yearRange.value?.length ? [...yearRange.value] : null
+}
+
+function buildWorksheetData(rows: GreenMortgageRow[]) {
+  return [
+    [...EXPORT_TABLE_HEADERS],
+    ...rows.map((row) => [
+      row.propertyNameEng,
+      row.propertyNameChi,
+      row.propertyAddress,
+      row.owner,
+      row.district,
+      row.tool,
+      row.projectType,
+      row.achievedRating,
+      row.year,
+      row.month,
+      row.gbCertLabelNo,
+    ]),
+  ]
+}
+
+/** 進頁預設空條件 = 查詢全部；Refresh 用當前下拉選值；匯出用已套用條件 */
+function getGreenMortgageQueryParams(source: 'draft' | 'applied' = 'draft') {
+  if (source === 'applied') {
+    return {
+      endYear: asTrimmedText(appliedYearRange.value?.[1]),
+      ratingList: [...appliedRatings.value],
+      startYear: asTrimmedText(appliedYearRange.value?.[0]),
+    }
+  }
+  return {
+    endYear: asTrimmedText(endYear.value),
+    ratingList: [...selectedRatings.value],
+    startYear: asTrimmedText(startYear.value),
+  }
+}
+
+async function fetchGreenMortgageQuery(options?: { applyYearDefaults?: boolean }) {
+  tableLoading.value = true
+  try {
+    const res = await greenMortgageApi.getGreenMortgageQuery(getGreenMortgageQueryParams())
+    // 兼容 { data: {...} } / 直接 {...}
+    const payload =
+      res && typeof res === 'object' && 'data' in res && (res as { data?: unknown }).data != null
+        ? (res as { data: unknown }).data
+        : res
+
+    if (payload) {
+      const parsed = parseQueryResponse(payload)
+      tableRows.value = parsed.rows
+      if (parsed.dataUpdateDate) dataUpdateDate.value = parsed.dataUpdateDate
+      if (parsed.dataDownloadStatus) dataDownloadStatus.value = parsed.dataDownloadStatus
+      // 進頁：列表 Year 回來後立刻寫入 Certification period，刷新頁面可見預設區間
+      if (options?.applyYearDefaults) {
+        applyYearRangeFromTableYearColumn(parsed.rows)
+        await nextTick()
+      }
+    } else {
+      tableRows.value = []
+      if (options?.applyYearDefaults) yearRange.value = null
+    }
+  } catch (error) {
+    console.error('getGreenMortgageQuery failed', error)
+  } finally {
+    tableLoading.value = false
+  }
+}
+
+function handleRefresh() {
+  commitFilterCriteria()
+  fetchGreenMortgageQuery()
+}
+
+/** 匯出已套用的 Select Rating(s) + Certification period + Search 篩選後的資料（格式不變） */
+async function handleExportExcel() {
+  try {
+    const res = await greenMortgageApi.getGreenMortgageQuery(getGreenMortgageQueryParams('applied'))
+    if (!res?.data) return
+
+    const parsed = parseQueryResponse(res.data)
+    const rows = filterRowsByCurrentCriteria(parsed.rows)
+    if (!rows.length) return
+
+    const worksheetData = buildWorksheetData(rows)
+    await industryExportToExcel(worksheetData, 'Green Mortgage', 'Green_Mortgage')
+  } catch (error) {
+    console.error('handleExportExcel failed', error)
+  }
+}
+
+/** 匯出當前頁已篩選資料（Select Rating / Certification period / Search 過濾後的結果） */
+async function handleExportExcel2() {
+  try {
+    const rows = filteredRows.value
+    if (!rows.length) return
+
+    const worksheetData = buildWorksheetData(rows)
+    await industryExportToExcel(worksheetData, 'Green Mortgage', 'Green_Mortgage')
+  } catch (error) {
+    console.error('handleExportExcel2 failed', error)
+  }
+}
+
+/** 備用導出入口：與 handleExportExcel 二選一替換按鈕 @click 即可 */
+defineExpose({ handleExportExcel2 })
+
+// 鎖定 .layout 外層滾動（進/離頁自動處理）
+useHiddenLayoutScroll()
+
+onMounted(async () => {
+  // 以下僅本頁自繪表內滾動條：resize / 軌道同步（與 layout 鎖定無關）
+  syncViewportWidth()
+  window.addEventListener('resize', syncViewportWidth)
+  void nextTick(() => {
+    refreshTableScrollUi()
+    const root = tableRootRef.value
+    if (root) {
+      tableResizeObserver = new ResizeObserver(() => {
+        void nextTick(() => refreshTableScrollUi())
+      })
+      tableResizeObserver.observe(root)
+    }
+  })
+  await fetchGreenMortgageRatings()
+  await fetchGreenMortgageQuery({ applyYearDefaults: true })
+  // 保險：若首次寫入未生效，再依 tableRows.Year 補一次
+  if (!yearRange.value?.length && tableRows.value.length) {
+    applyYearRangeFromTableYearColumn(tableRows.value)
+  }
+  // 進頁預設值寫入後立刻套用，之後改下拉/日期需點 Refresh 才更新列表
+  commitFilterCriteria()
+  await nextTick()
+  tableRef.value?.sort('propertyNameEng', 'ascending')
+  void nextTick(() => refreshTableScrollUi())
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewportWidth)
+  tableResizeObserver?.disconnect()
+  unbindWrapScroll()
+  dragCleanup?.()
+})
+</script>
+
+<style lang="scss" scoped>
+.green-mortgage-page {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+  /* 允許豎條伸入 el-card__body 右 padding */
+  overflow: visible;
+}
+
+.green-mortgage {
+  /* 與 el-card__body 的 --gm-card-padding 對齊，供豎條外側定位 */
+  --gm-card-padding: 20px;
+  --gm-h-scroll-gutter: 14px;
+  /* 豎條在右 padding 內居中：不改動其他邊距 */
+  --gm-v-scroll-thumb: 8px;
+  /* 篩選區控件高度與 el-button 默認 32px 對齊 */
+  --gm-control-height: 32px;
+  --el-component-size: var(--gm-control-height);
+  --el-color-primary: #c53355;
+  --el-color-primary-light-3: #d66b82;
+  --el-color-primary-light-5: #e299a9;
+  --el-color-primary-light-7: #efc6cf;
+  --el-color-primary-light-9: #fce8ec;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  /* 勿裁切伸入 card 右 padding 的豎條 */
+  overflow: visible;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+}
+
+.green-mortgage__header {
+  flex-shrink: 0;
+  margin-bottom: 14px;
+}
+
+.green-mortgage__title,
+.green-mortgage__subtitle {
+  margin: 0;
+  color: #c0504d;
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.green-mortgage__meta {
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--el-text-color-primary);
+  word-break: break-word;
+}
+
+.green-mortgage__meta-value {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.green-mortgage__filters {
+  flex-shrink: 0;
+  margin-bottom: 10px;
+}
+
+.green-mortgage__filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 16px;
+  margin-bottom: 10px;
+}
+
+.green-mortgage__filter-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  min-width: 0;
+}
+
+.green-mortgage__filter-group--period {
+  flex: 1 1 auto;
+}
+
+.green-mortgage__period-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  min-width: 0;
+}
+
+.green-mortgage__filter-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.green-mortgage__rating-select {
+  width: 220px;
+  max-width: 100%;
+  height: var(--gm-control-height);
+}
+
+.green-mortgage__rating-select :deep(.el-select__wrapper) {
+  min-height: var(--gm-control-height);
+  height: var(--gm-control-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  box-sizing: border-box;
+}
+
+.green-mortgage__rating-select :deep(.el-select__selection) {
+  gap: 4px;
+}
+
+.green-mortgage__date-input {
+  width: 320px !important;
+  max-width: 320px;
+  height: var(--gm-control-height);
+  --el-input-height: var(--gm-control-height);
+}
+
+.green-mortgage__date-input.el-date-editor {
+  --el-date-editor-width: 320px;
+  width: 320px !important;
+  height: var(--gm-control-height);
+}
+
+.green-mortgage__date-input :deep(.el-input__wrapper),
+.green-mortgage__date-input.el-input__wrapper {
+  min-height: var(--gm-control-height);
+  height: var(--gm-control-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  box-sizing: border-box;
+}
+
+.green-mortgage__refresh-btn,
+.green-mortgage__export-btn {
+  height: var(--gm-control-height);
+  min-height: var(--gm-control-height);
+  padding: 0 15px;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+/* Refresh：默認主色底 */
+.green-mortgage__refresh-btn {
+  --el-button-bg-color: #c53355;
+  --el-button-border-color: #c53355;
+  --el-button-text-color: #fff;
+  --el-button-hover-bg-color: #d14a68;
+  --el-button-hover-border-color: #d14a68;
+  --el-button-hover-text-color: #fff;
+  --el-button-active-bg-color: #a82b48;
+  --el-button-active-border-color: #a82b48;
+  --el-button-active-text-color: #fff;
+}
+
+/* Export to Excel：移入主色描邊/文字 */
+.green-mortgage__export-btn {
+  --el-button-hover-text-color: #c53355;
+  --el-button-hover-bg-color: var(--el-color-primary-light-9, #fce8ec);
+  --el-button-hover-border-color: #c53355;
+  --el-button-active-text-color: #c53355;
+  --el-button-active-border-color: #c53355;
+  --el-button-active-bg-color: var(--el-color-primary-light-9, #fce8ec);
+}
+
+.green-mortgage__action-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px 16px;
+}
+
+.green-mortgage__search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.green-mortgage__search-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.green-mortgage__search-input {
+  width: 220px;
+  max-width: 100%;
+  height: var(--gm-control-height);
+  --el-input-height: var(--gm-control-height);
+}
+
+.green-mortgage__search-input :deep(.el-input__wrapper) {
+  min-height: var(--gm-control-height);
+  height: var(--gm-control-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  box-sizing: border-box;
+}
+
+/* 有值時滑鼠移入顯示清空 x */
+.green-mortgage__rating-select :deep(.el-select__clear),
+.green-mortgage__date-input :deep(.el-input__clear),
+.green-mortgage__search-input :deep(.el-input__clear) {
+  display: inline-flex !important;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+}
+
+.green-mortgage__rating-select:hover :deep(.el-select__clear),
+.green-mortgage__rating-select :deep(.el-select__wrapper.is-focused .el-select__clear),
+.green-mortgage__date-input:hover :deep(.el-input__clear),
+.green-mortgage__date-input :deep(.el-input__wrapper.is-focus .el-input__clear),
+.green-mortgage__search-input:hover :deep(.el-input__clear),
+.green-mortgage__search-input :deep(.el-input__wrapper.is-focus .el-input__clear) {
+  opacity: 1;
+}
+
+.green-mortgage__table-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+  /* 伸入 el-card__body 既有右 padding，表寬不變；豎條放在這段 padding 裡 */
+  margin-right: calc(-1 * var(--gm-card-padding));
+  padding-right: var(--gm-card-padding);
+  overflow: visible;
+}
+
+/* 列表底部：左側結果數、右側排除說明 */
+.green-mortgage__table-footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 16px;
+  margin-top: 10px;
+  padding: 0 2px;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+  font-family: 'Times New Roman', Times, serif;
+  box-sizing: border-box;
+}
+
+.green-mortgage__table-footer-left,
+.green-mortgage__table-footer-right {
+  min-width: 0;
+}
+
+.green-mortgage__table-footer-right {
+  text-align: right;
+}
+
+/* 上：table；下：橫條（底邊外側）；豎條絕對定位在右邊外側 */
+.green-mortgage__table-main {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.green-mortgage__table-row {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.green-mortgage__table-shell {
+  --gm-scroll-thumb: #c1c1c1;
+  position: relative;
+  flex: 1;
+  min-height: 240px;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.green-mortgage__table-shell :deep(.el-table) {
+  overflow: hidden;
+}
+
+.green-mortgage__table-shell :deep(.el-table__inner-wrapper) {
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.green-mortgage__table-shell :deep(.el-table__body-wrapper),
+.green-mortgage__table-shell :deep(.el-scrollbar__wrap) {
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+}
+
+.green-mortgage__th {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  font-size: 13px;
+  line-height: 1.25;
+  text-align: center;
+  white-space: normal;
+}
+
+.green-mortgage__th--single {
+  min-height: 34px;
+}
+
+.green-mortgage__th--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.green-mortgage__table {
+  width: 100%;
+  height: 100%;
+}
+
+/* 勿強制表體 width:100%，否則列寬總和無法溢出，橫向滾動條永久失效 */
+.green-mortgage__table :deep(.el-table) {
+  width: 100%;
+  --el-table-row-hover-bg-color: #edf2fa;
+}
+
+.green-mortgage__table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: #edf2fa;
+}
+
+.green-mortgage__table :deep(.el-table__body tr.el-table__row--striped td.el-table__cell) {
+  background-color: #f2f2f2;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper),
+.green-mortgage__table :deep(.el-table__header) {
+  background: #556b7d;
+}
+
+/* 去掉 EP 內建 gutter 空白列（豎條已疊加在表內，避免表頭多一截空白） */
+.green-mortgage__table :deep(.el-table__header th.gutter),
+.green-mortgage__table :deep(.el-table__body td.gutter),
+.green-mortgage__table :deep(col[name='gutter']) {
+  display: none !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  overflow: hidden !important;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell) {
+  position: relative;
+  padding: 6px 0;
+  background: #556b7d;
+  color: #fff;
+  border-color: #f5f7fa;
+}
+
+/* 列寬拖拽縫：懸停 / 拖動指示條用系統主色 */
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell::after) {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -2px;
+  width: 4px;
+  height: 100%;
+  background: transparent;
+  z-index: 3;
+  pointer-events: none;
+  transition: background-color 0.12s ease;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell:hover::after) {
+  background: var(--el-color-primary, #c53355);
+}
+
+.green-mortgage__table :deep(.el-table__column-resize-proxy) {
+  border-left: 2px solid var(--el-color-primary, #c53355) !important;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell .cell) {
+  padding: 0 8px;
+  color: #fff;
+}
+
+.green-mortgage__table :deep(.el-table__body td.el-table__cell) {
+  border-color: #f5f7fa;
+}
+
+.green-mortgage__table :deep(.el-table--border::before),
+.green-mortgage__table :deep(.el-table--border::after),
+.green-mortgage__table :deep(.el-table__inner-wrapper::after),
+.green-mortgage__table :deep(.el-table__border-left-patch) {
+  background-color: #f5f7fa;
+}
+
+/* 隱藏 table 內建橫/豎滑塊（改外側自繪） */
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-vertical),
+.green-mortgage__table-shell :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__wrap) {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.green-mortgage__table-shell :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+/* 橫向滑塊：表格底邊外側（不擠壓表體） */
+.green-mortgage__hbar-row {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.green-mortgage__hbar {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  height: var(--gm-h-scroll-gutter);
+  z-index: 12;
+  pointer-events: auto;
+}
+
+.green-mortgage__hthumb {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--gm-scroll-thumb, #c1c1c1);
+  cursor: grab;
+  pointer-events: auto;
+  will-change: transform;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+}
+
+.green-mortgage__hthumb.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.green-mortgage__hthumb:active {
+  cursor: grabbing;
+  background-color: #a8a8a8;
+}
+
+/* 豎向滑塊：只移到表格右外側（card 既有 padding 內），其他邊距不變 */
+.green-mortgage__vbar {
+  position: absolute;
+  top: 0;
+  right: calc((var(--gm-card-padding) - var(--gm-v-scroll-thumb)) / 2);
+  left: auto;
+  transform: none;
+  width: var(--gm-v-scroll-thumb);
+  z-index: 12;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.green-mortgage__vthumb {
+  width: 8px;
+  min-width: 8px;
+  max-width: 8px;
+  height: 50px;
+  min-height: 50px;
+  max-height: 50px;
+  border-radius: 9999px;
+  background-color: var(--gm-scroll-thumb, #c1c1c1);
+  cursor: grab;
+  pointer-events: auto;
+  will-change: transform;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+}
+
+.green-mortgage__vthumb.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.green-mortgage__vthumb:active {
+  cursor: grabbing;
+  background-color: #a8a8a8;
+}
+
+.green-mortgage__table :deep(.caret-wrapper) {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  opacity: 1;
+  visibility: visible;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.ascending .caret-wrapper),
+.green-mortgage__table
+  :deep(.el-table__header-wrapper th.el-table__cell.descending .caret-wrapper) {
+  right: 2px;
+}
+
+.green-mortgage__table :deep(.sort-caret.ascending) {
+  border-bottom-color: #c0c4cc;
+}
+
+.green-mortgage__table :deep(.sort-caret.descending) {
+  border-top-color: #c0c4cc;
+}
+
+.green-mortgage__table
+  :deep(.el-table__header-wrapper th.el-table__cell.ascending .sort-caret.ascending) {
+  border-bottom-color: #c53355;
+}
+
+.green-mortgage__table
+  :deep(.el-table__header-wrapper th.el-table__cell.descending .sort-caret.descending) {
+  border-top-color: #c53355;
+}
+
+.green-mortgage__table :deep(.el-table__header-wrapper th.el-table__cell.is-sortable .cell) {
+  position: relative;
+  padding-right: 24px;
+}
+
+/* 大屏 */
+@media (min-width: 1200px) {
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 18px;
+  }
+
+  .green-mortgage__table {
+    min-width: 100%;
+  }
+}
+
+/* 平板 */
+@media (max-width: 1199px) {
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 16px;
+  }
+
+  .green-mortgage__rating-select,
+  .green-mortgage__search-input {
+    width: 200px;
+  }
+
+  .green-mortgage__date-input {
+    width: 320px;
+  }
+
+  .green-mortgage__date-input.el-date-editor {
+    --el-date-editor-width: 320px;
+  }
+
+  .green-mortgage__th {
+    font-size: 12px;
+  }
+}
+
+/* 手機 */
+@media (max-width: 767px) {
+  .green-mortgage {
+    overflow: auto;
+  }
+
+  .green-mortgage__header {
+    margin-bottom: 10px;
+  }
+
+  .green-mortgage__title,
+  .green-mortgage__subtitle {
+    font-size: 14px;
+  }
+
+  .green-mortgage__meta {
+    font-size: 12px;
+  }
+
+  .green-mortgage__filter-row,
+  .green-mortgage__action-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .green-mortgage__filter-group,
+  .green-mortgage__filter-group--period,
+  .green-mortgage__period-controls,
+  .green-mortgage__search {
+    width: 100%;
+  }
+
+  .green-mortgage__filter-label,
+  .green-mortgage__search-label {
+    white-space: normal;
+  }
+
+  .green-mortgage__rating-select,
+  .green-mortgage__search-input {
+    width: 100%;
+  }
+
+  .green-mortgage__date-input,
+  .green-mortgage__date-input.el-date-editor {
+    width: 320px !important;
+    max-width: 100%;
+    --el-date-editor-width: 320px;
+  }
+
+  .green-mortgage__period-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .green-mortgage__period-controls .green-mortgage__refresh-btn {
+    width: 100%;
+  }
+
+  .green-mortgage__export-btn {
+    width: 100%;
+  }
+
+  .green-mortgage__table-shell {
+    min-height: 280px;
+  }
+}
+</style>