minitest2.0 0.0.0

package/src/views/rmb-position/index.vue

@@ -0,0 +1,1013 @@
+<script setup lang="ts">
+import {
+  buildRmbForecastQueryPayload,
+  queryRmbForecastPage,
+  type RmbForecastQueryForm,
+  type RmbForecastRecord,
+} from '@/api/rmb-position'
+import { useAppStore } from '@/stores/app'
+import {
+  forecastStatusMap,
+  formatForecastAmount,
+  formatRmbForecastDate,
+  resolveBusinessType,
+  resolveClientType,
+  resolveForecastStatus,
+  toBillionYuan,
+} from '@/utils/rmb-forecast'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'RmbPositionPage' })
+
+type Forecast = {
+  id: number
+  institution: string
+  date: string
+  customerType: string
+  business: string
+  amount: number
+  predRefNo: string
+  status: string
+  statusClass: string
+}
+
+type PendingForecast = {
+  institution: string
+  date: string
+  customerType: string
+  business: string
+  amount: number
+}
+
+const router = useRouter()
+const appStore = useAppStore()
+const defaultTranDate = appStore.systemWorkDate
+const heroImage = `${import.meta.env.BASE_URL}images/5798d7aa-ba8b-4605-8079-58b35495ac55.png`
+const pageSize = 10
+const backTopThreshold = 520
+const pendingForecastKey = 'rmb-position:pending-create'
+
+const queryForm = reactive({
+  institution: '',
+  minAmount: '',
+  maxAmount: '',
+})
+
+const selectedDate = ref(defaultTranDate)
+const showDatePicker = ref(false)
+const datePickerValue = ref(selectedDate.value.split('-'))
+const minDate = new Date(2020, 0, 1)
+const maxDate = new Date(2030, 11, 31)
+const isFilterExpanded = ref(true)
+
+const forecastList = ref<Forecast[]>([])
+const forecastTotal = ref(0)
+const currentPage = ref(1)
+const listLoading = ref(false)
+const listFinished = ref(false)
+const listError = ref(false)
+const requesting = ref(false)
+const showBackTop = ref(false)
+const filterSummary = computed(() => {
+  const institution = queryForm.institution.trim() || '全部机构'
+  const amount =
+    queryForm.minAmount || queryForm.maxAmount
+      ? `${queryForm.minAmount || '不限'}-${queryForm.maxAmount || '不限'}亿元`
+      : '全部金额'
+
+  return `${selectedDate.value} · ${institution} · ${amount}`
+})
+
+onMounted(async () => {
+  updateBackTopVisibility()
+  window.addEventListener('scroll', updateBackTopVisibility, { passive: true })
+  await resetAndLoad()
+  consumePendingForecast()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateBackTopVisibility)
+})
+
+function mapRmbRecordToForecast(record: RmbForecastRecord, index: number): Forecast {
+  const busiType = record.busiType || ''
+  const clientType = record.clientType || ''
+  const status = resolveForecastStatus(record.predStatus)
+
+  return {
+    id: index + 1,
+    institution: record.groundBranch || '未填写机构',
+    date: formatRmbForecastDate(record.tranDate),
+    customerType: resolveClientType(clientType),
+    business: resolveBusinessType(busiType),
+    amount: toBillionYuan(record.predAmt),
+    predRefNo: record.predRefNo || '',
+    status: status.label,
+    statusClass: status.className,
+  }
+}
+
+function buildQueryForm(): RmbForecastQueryForm {
+  return {
+    tranDate: selectedDate.value,
+    groundBranch: queryForm.institution.trim(),
+    startTranAmt: queryForm.minAmount,
+    endTranAmt: queryForm.maxAmount,
+  }
+}
+
+function parseAmount(value: string) {
+  if (!value.trim()) return undefined
+
+  const amount = Number(value)
+  return Number.isFinite(amount) ? amount : undefined
+}
+
+function updateBackTopVisibility() {
+  showBackTop.value = window.scrollY > backTopThreshold
+}
+
+function scrollToTop() {
+  showBackTop.value = false
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+
+function openCreatePage() {
+  router.push({
+    name: 'RmbPositionCreate',
+    query: { tranDate: selectedDate.value },
+  })
+}
+
+async function handleSearch() {
+  const minAmount = parseAmount(queryForm.minAmount)
+  const maxAmount = parseAmount(queryForm.maxAmount)
+
+  if (
+    (queryForm.minAmount && minAmount === undefined) ||
+    (queryForm.maxAmount && maxAmount === undefined)
+  ) {
+    showAppToast('请输入正确的金额')
+    return
+  }
+
+  if (minAmount !== undefined && maxAmount !== undefined && minAmount > maxAmount) {
+    showAppToast('下限金额不能大于上限金额')
+    return
+  }
+
+  await resetAndLoad()
+
+  if (!listError.value) {
+    showAppToast(`查询到 ${forecastTotal.value} 笔预报`)
+  }
+}
+
+async function handleReset() {
+  selectedDate.value = defaultTranDate
+  datePickerValue.value = selectedDate.value.split('-')
+  queryForm.institution = ''
+  queryForm.minAmount = ''
+  queryForm.maxAmount = ''
+
+  await resetAndLoad()
+
+  if (!listError.value) {
+    showAppToast('已重置筛选条件')
+  }
+}
+
+async function resetAndLoad() {
+  currentPage.value = 1
+  forecastList.value = []
+  forecastTotal.value = 0
+  listFinished.value = false
+  listError.value = false
+
+  await loadNextPage()
+}
+
+async function loadNextPage() {
+  if (requesting.value || listFinished.value) {
+    listLoading.value = false
+    return
+  }
+
+  requesting.value = true
+  listLoading.value = true
+  listError.value = false
+
+  const payload = buildRmbForecastQueryPayload({
+    form: buildQueryForm(),
+    pageIndex: currentPage.value,
+    pageSize,
+  })
+
+  console.log('[人民币预报查询入参]', payload)
+
+  try {
+    const response = await queryRmbForecastPage(payload)
+    const nextList = response.body.resultList.map((item, index) =>
+      mapRmbRecordToForecast(item, forecastList.value.length + index),
+    )
+
+    forecastList.value.push(...nextList)
+    forecastTotal.value = Number(response.body.totalCount) || forecastList.value.length
+    currentPage.value += 1
+    listFinished.value =
+      forecastList.value.length >= forecastTotal.value || nextList.length < pageSize
+  } catch (error) {
+    console.error('[人民币预报查询失败]', error)
+    listError.value = true
+    showAppToast('数据加载失败，请重试')
+  } finally {
+    requesting.value = false
+    listLoading.value = false
+  }
+}
+
+function confirmDate() {
+  selectedDate.value = datePickerValue.value.join('-')
+  showDatePicker.value = false
+}
+
+function openDetail(item: Forecast) {
+  if (!item.predRefNo) {
+    showAppToast('暂无预报流水号')
+    return
+  }
+
+  router.push({
+    name: 'RmbPositionDetail',
+    params: { predRefNo: item.predRefNo },
+  })
+}
+
+function consumePendingForecast() {
+  const payload = sessionStorage.getItem(pendingForecastKey)
+
+  if (!payload) return
+
+  sessionStorage.removeItem(pendingForecastKey)
+
+  try {
+    const forecast = JSON.parse(payload) as Partial<PendingForecast>
+
+    if (!isPendingForecast(forecast)) return
+
+    forecastList.value.unshift({
+      id: Date.now(),
+      institution: forecast.institution,
+      date: forecast.date,
+      customerType: forecast.customerType,
+      business: forecast.business,
+      amount: forecast.amount,
+      predRefNo: '',
+      status: forecastStatusMap['1'].label,
+      statusClass: forecastStatusMap['1'].className,
+    })
+    forecastTotal.value += 1
+  } catch (error) {
+    console.error('[人民币预报新增结果解析失败]', error)
+  }
+}
+
+function isPendingForecast(value: Partial<PendingForecast> | null): value is PendingForecast {
+  return Boolean(
+    value &&
+    typeof value.institution === 'string' &&
+    typeof value.date === 'string' &&
+    typeof value.customerType === 'string' &&
+    typeof value.business === 'string' &&
+    typeof value.amount === 'number' &&
+    Number.isFinite(value.amount),
+  )
+}
+</script>
+
+<template>
+  <main class="rmb-page">
+    <section class="query-card">
+      <div class="hero-panel">
+        <div class="hero-copy">
+          <h2>本币预报信息查询</h2>
+          <p>查询本币预报及交易明细</p>
+        </div>
+        <img class="hero-image" :src="heroImage" alt="本币预报信息查询" />
+      </div>
+    </section>
+
+    <section class="filter-sticky">
+      <div class="filter-panel" :class="{ 'is-collapsed': !isFilterExpanded }">
+        <div class="filter-toolbar">
+          <div class="filter-heading">
+            <strong>筛选条件</strong>
+            <span>{{ filterSummary }}</span>
+          </div>
+          <button
+            class="filter-toggle"
+            type="button"
+            :aria-expanded="isFilterExpanded"
+            @click="isFilterExpanded = !isFilterExpanded"
+          >
+            <van-icon :name="isFilterExpanded ? 'arrow-up' : 'arrow-down'" />
+            <span>{{ isFilterExpanded ? '收起' : '展开' }}</span>
+          </button>
+        </div>
+
+        <Transition name="filter-body">
+          <div v-show="isFilterExpanded" class="filter-body">
+            <button class="filter-row" type="button" @click="showDatePicker = true">
+              <span class="row-icon row-icon-calendar"><van-icon name="calendar-o" /></span>
+              <span class="row-label">交易日期</span>
+              <span class="row-value">{{ selectedDate }}</span>
+              <van-icon class="row-calendar" name="calendar-o" />
+              <van-icon class="row-arrow" name="arrow" />
+            </button>
+
+            <label class="filter-row">
+              <span class="row-icon row-icon-bank"><van-icon name="hotel-o" /></span>
+              <span class="row-label">落地机构</span>
+              <input
+                v-model.trim="queryForm.institution"
+                class="row-input"
+                type="text"
+                inputmode="text"
+                placeholder="请输入落地机构关键字"
+              />
+              <van-icon class="row-arrow" name="arrow" />
+            </label>
+
+            <div class="filter-row amount-row">
+              <span class="row-icon row-icon-money"><van-icon name="gold-coin-o" /></span>
+              <span class="row-label">金额区间</span>
+              <input
+                v-model.trim="queryForm.minAmount"
+                class="amount-input"
+                type="number"
+                inputmode="decimal"
+                placeholder="请输入下限金额"
+              />
+              <span class="amount-divider">-</span>
+              <input
+                v-model.trim="queryForm.maxAmount"
+                class="amount-input"
+                type="number"
+                inputmode="decimal"
+                placeholder="请输入上限金额"
+              />
+            </div>
+
+            <div class="filter-actions">
+              <button class="reset-btn" type="button" @click="handleReset">
+                <van-icon name="replay" />
+                <span>重置</span>
+              </button>
+              <button class="search-btn" type="button" @click="handleSearch">
+                <van-icon name="search" />
+                <span>查询</span>
+              </button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </section>
+
+    <section class="forecast-card" aria-label="预报列表">
+      <van-list
+        v-model:loading="listLoading"
+        v-model:error="listError"
+        :finished="listFinished"
+        :immediate-check="false"
+        error-text="加载失败，点击重试"
+        finished-text="没有更多了"
+        loading-text="加载中..."
+        @load="loadNextPage"
+      >
+        <button
+          v-for="item in forecastList"
+          :key="item.id"
+          class="forecast-item"
+          type="button"
+          @click="openDetail(item)"
+        >
+          <span class="forecast-avatar"><van-icon name="hotel-o" /></span>
+          <span class="forecast-main">
+            <strong>{{ item.institution }}</strong>
+            <span class="forecast-date">{{ item.date }}</span>
+            <span class="forecast-business">{{ item.customerType }} | {{ item.business }}</span>
+          </span>
+          <span class="forecast-side">
+            <span class="forecast-amount">
+              {{ formatForecastAmount(item.amount) }} <em>亿元</em>
+            </span>
+            <span class="status-tag" :class="item.statusClass">{{ item.status }}</span>
+          </span>
+          <van-icon class="forecast-arrow" name="arrow" />
+        </button>
+
+        <van-empty
+          v-if="!listLoading && forecastList.length === 0"
+          image-size="72"
+          description="暂无预报信息"
+        />
+      </van-list>
+    </section>
+
+    <button class="fab" type="button" aria-label="新增预报" @click="openCreatePage">
+      <van-icon name="plus" />
+    </button>
+
+    <Transition name="back-top">
+      <button
+        v-show="showBackTop"
+        class="back-top-btn"
+        type="button"
+        aria-label="返回顶部"
+        @click="scrollToTop"
+      >
+        <van-icon name="arrow-up" />
+      </button>
+    </Transition>
+
+    <van-popup v-model:show="showDatePicker" position="bottom" round safe-area-inset-bottom>
+      <van-date-picker
+        v-model="datePickerValue"
+        title="选择交易日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @cancel="showDatePicker = false"
+        @confirm="confirmDate"
+      />
+    </van-popup>
+  </main>
+</template>
+
+<style scoped>
+.rmb-page {
+  position: relative;
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 118px);
+  color: #080d1f;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(255, 242, 243, 0.92), transparent 118px),
+    linear-gradient(180deg, #ffffff 0%, #fbfcfd 54%, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  appearance: none;
+}
+
+.query-card {
+  overflow: hidden;
+  border-radius: 13px;
+  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.06);
+}
+
+.hero-panel {
+  position: relative;
+  height: 143px;
+  overflow: hidden;
+  border-radius: 13px 13px 0 0;
+  background:
+    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, 0.16), transparent 74px),
+    radial-gradient(circle at 92% 14%, rgba(255, 255, 255, 0.13), transparent 58px),
+    linear-gradient(135deg, #ff2736 0%, #ff3a42 42%, #ff454b 100%);
+}
+
+.hero-panel::after {
+  position: absolute;
+  right: 15px;
+  bottom: 14px;
+  width: 26px;
+  height: 64px;
+  border-radius: 3px;
+  background: rgba(255, 137, 137, 0.34);
+  box-shadow: -21px 14px 0 rgba(255, 137, 137, 0.28);
+  content: '';
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 2;
+  padding: 32px 0 0 15px;
+  color: #ffffff;
+}
+
+.hero-copy h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 18px 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.hero-image {
+  position: absolute;
+  right: 17px;
+  bottom: 3px;
+  z-index: 1;
+  width: 118px;
+  height: 118px;
+  object-fit: contain;
+  filter: drop-shadow(0 12px 20px rgba(165, 0, 18, 0.16));
+}
+
+.filter-sticky {
+  position: sticky;
+  top: calc(50px + env(safe-area-inset-top, 0px));
+  z-index: 15;
+  margin-top: -18px;
+}
+
+.filter-panel {
+  position: relative;
+  z-index: 1;
+  padding: 12px 13px 14px;
+  border-radius: 13px;
+  background: #ffffff;
+  box-shadow: 0 -4px 18px rgba(255, 66, 76, 0.06);
+}
+
+.filter-panel.is-collapsed {
+  padding-bottom: 12px;
+}
+
+.filter-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px;
+  column-gap: 10px;
+  align-items: center;
+}
+
+.filter-heading {
+  min-width: 0;
+}
+
+.filter-heading strong,
+.filter-heading span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-heading strong {
+  color: #101525;
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.25;
+}
+
+.filter-heading span {
+  margin-top: 3px;
+  color: #818899;
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 30px;
+  border: 1px solid #ffd5da;
+  border-radius: 15px;
+  color: #f42b3a;
+  font-size: 12px;
+  font-weight: 650;
+  background: #fff7f8;
+}
+
+.filter-toggle .van-icon {
+  font-size: 14px;
+}
+
+.filter-body {
+  overflow: hidden;
+  margin-top: 8px;
+  border-top: 1px solid #eef0f4;
+}
+
+.filter-body-enter-active,
+.filter-body-leave-active {
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+}
+
+.filter-body-enter-from,
+.filter-body-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  color: #080d1f;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.filter-row + .filter-row {
+  border-top: 1px solid #eef0f4;
+}
+
+.row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  border-radius: 6px;
+  color: #f42b3a;
+  font-size: 16px;
+  background: linear-gradient(135deg, #fff2f3 0%, #ffe4e6 100%);
+}
+
+.row-label {
+  width: 70px;
+  flex: 0 0 70px;
+  margin-left: 11px;
+  color: #151827;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.row-value {
+  margin-left: auto;
+  color: #202638;
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.row-input {
+  width: 0;
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  color: #202638;
+  font-size: 13px;
+  background: transparent;
+}
+
+.row-input::placeholder,
+.amount-input::placeholder {
+  color: #a6adbd;
+}
+
+.amount-input::placeholder {
+  font-size: 10px;
+}
+
+.row-calendar {
+  margin-left: 12px;
+  color: #a7adba;
+  font-size: 16px;
+}
+
+.row-arrow {
+  margin-left: 12px;
+  color: #9fa6b5;
+  font-size: 15px;
+}
+
+.amount-row {
+  gap: 0;
+  min-height: 52px;
+}
+
+.amount-row .row-label {
+  width: 58px;
+  flex-basis: 58px;
+  margin-right: 8px;
+}
+
+.amount-input {
+  width: 0;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 28px;
+  border: 1px solid #e5e8ef;
+  border-radius: 6px;
+  padding: 0 4px;
+  color: #202638;
+  font-size: 11px;
+  text-align: center;
+  outline: 0;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.amount-divider {
+  flex: 0 0 18px;
+  text-align: center;
+}
+
+.amount-divider {
+  color: #8c94a5;
+  font-size: 13px;
+}
+
+.filter-actions {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.reset-btn,
+.search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 34px;
+  border-radius: 18px;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.reset-btn {
+  border: 1px solid #ffd5da;
+  color: #f42b3a;
+  background: #fff7f8;
+}
+
+.search-btn {
+  color: #ffffff;
+  background: linear-gradient(135deg, #ff3340 0%, #ff1d34 100%);
+  box-shadow: 0 8px 16px rgba(255, 36, 52, 0.18);
+}
+
+.reset-btn .van-icon,
+.search-btn .van-icon {
+  font-size: 17px;
+}
+
+.forecast-card {
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 7px 22px rgba(21, 28, 45, 0.055);
+}
+
+.forecast-card {
+  margin-top: 9px;
+  overflow: hidden;
+}
+
+.forecast-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto 14px;
+  column-gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 91px;
+  padding: 14px 17px;
+  color: #080d1f;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.forecast-item + .forecast-item {
+  border-top: 1px solid #edf0f3;
+}
+
+.forecast-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  color: #111728;
+  font-size: 24px;
+  background: #fff0f1;
+}
+
+.forecast-avatar .van-icon {
+  transform: translateY(1px);
+}
+
+.forecast-main {
+  min-width: 0;
+}
+
+.forecast-main strong {
+  display: block;
+  overflow: hidden;
+  color: #080d1f;
+  font-size: 14px;
+  font-weight: 760;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.forecast-date,
+.forecast-business {
+  display: block;
+  overflow: hidden;
+  margin-top: 7px;
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.forecast-date {
+  color: #8a92a3;
+}
+
+.forecast-business {
+  color: #111728;
+}
+
+.forecast-side {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  min-width: 92px;
+}
+
+.forecast-amount {
+  color: #080d1f;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.forecast-amount em {
+  color: #7f8798;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  max-width: 128px;
+  margin-top: 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.25;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.status-tag-normal {
+  border-color: #b7ebc9;
+  color: #0b8f3a;
+  background: #e4f8eb;
+}
+
+.status-tag-delayed {
+  border-color: #ffd99a;
+  color: #a05a00;
+  background: #fff4d8;
+}
+
+.status-tag-normal-delete {
+  border-color: #b7d7ff;
+  color: #1d5fbf;
+  background: #e6f0ff;
+}
+
+.status-tag-normal-delay-delete {
+  border-color: #d5c2ff;
+  color: #6e43c4;
+  background: #f0eaff;
+}
+
+.status-tag-delayed-late-delete {
+  border-color: #ffc0cb;
+  color: #bf2549;
+  background: #ffe8ed;
+}
+
+.status-tag-late-delay-delete {
+  border-color: #a7dced;
+  color: #08768f;
+  background: #dff6fb;
+}
+
+.status-tag-unknown {
+  border-color: #d6dbe3;
+  color: #687083;
+  background: #f3f5f8;
+}
+
+.forecast-arrow {
+  color: #9da4b3;
+  font-size: 15px;
+}
+
+.fab {
+  position: fixed;
+  right: max(25px, calc((100vw - 750px) / 2 + 25px));
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 35px);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  color: #ffffff;
+  font-size: 31px;
+  background: linear-gradient(145deg, #ff4050 0%, #f50f2d 100%);
+  box-shadow: 0 13px 28px rgba(244, 29, 48, 0.34);
+}
+
+.back-top-btn {
+  position: fixed;
+  right: max(31px, calc((100vw - 750px) / 2 + 31px));
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 99px);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 50%;
+  color: #f22f3d;
+  font-size: 20px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 10px 24px rgba(21, 28, 45, 0.13);
+  backdrop-filter: blur(12px);
+}
+
+.back-top-enter-active,
+.back-top-leave-active {
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+.back-top-enter-from,
+.back-top-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.92);
+}
+
+@media (max-width: 340px) {
+  .amount-row {
+    gap: 5px;
+  }
+
+  .amount-input {
+    width: 0;
+    padding: 0 5px;
+    font-size: 11px;
+  }
+
+  .row-label {
+    width: 64px;
+    flex-basis: 64px;
+    margin-left: 9px;
+  }
+
+  .amount-row .row-label {
+    width: 52px;
+    flex-basis: 52px;
+  }
+}
+</style>