huimv-baqing/ruoyi-ui-app/package-a/yak-market/index.vue

<template>
  <!-- 牦牛行情：顶卡主价；中段走势/预测；底虚拟列表每日行情（见 doc/耗牛行情.md） -->
  <view :class="pageRootClass" class="tab-page ym-page" :style="pageStyle">
    <scroll-view scroll-y class="ym-scroll" enable-back-to-top :show-scrollbar="false" @scrolltolower="onScrollToLower">
      <!-- 1. 主行情卡 -->
      <up-card :show-head="false" :show-foot="false" :border="true" :border-radius="16" margin="24rpx 24rpx 0" :body-style="{ padding: '24rpx' }">
        <template #body>
          <view class="ym-hero">
            <up-avatar shape="square" text="市" size="56" font-size="22" bg-color="#22c55e" color="#ffffff" />
            <view class="ym-hero__right">
              <text class="ym-hero__price">{{ heroPriceLine }}</text>
              <text class="ym-hero__sub text-body">{{ heroMarketLine }}</text>
            </view>
          </view>
        </template>
      </up-card>

      <!-- 2. 走势 / 预测 -->
      <up-card :show-head="false" :show-foot="false" :border="true" :border-radius="16" margin="20rpx 24rpx 0" :body-style="{ padding: '20rpx' }">
        <template #body>
          <up-subsection
            :list="subsectionList"
            :current="mainSectionIdx"
            active-color="#22c55e"
            inactive-color="#000000"
            :bold="true"
            @update:current="onMainSectionUpdate"
          />
          <view class="ym-panel-inner">
             <view class="ym-stats3">
                <view class="ym-stat-col">
                  <text class="ym-stat-label text-body">{{ $t('yakMarketPage.statAvg7') }}</text>
                  <text class="ym-stat-val text-body">{{ stats7.avg }}</text>
                  <text class="ym-stat-ph text-body">—</text>
                </view>
                <view class="ym-stat-col">
                  <text class="ym-stat-label text-body">{{ $t('yakMarketPage.statLow7') }}</text>
                  <text class="ym-stat-val ym-stat-val--red text-body">{{ stats7.low }}</text>
                  <text class="ym-stat-date text-body">{{ stats7.lowDate }}</text>
                </view>
                <view class="ym-stat-col">
                  <text class="ym-stat-label text-body">{{ $t('yakMarketPage.statHigh7') }}</text>
                  <text class="ym-stat-val ym-stat-val--red text-body">{{ stats7.high }}</text>
                  <text class="ym-stat-date text-body">{{ stats7.highDate }}</text>
                </view>
              </view>
              <view class="ym-meta-row">
                <text class="ym-meta text-body">{{ $t('yakMarketPage.metaUpdated', { d: stats7.updateYmd }) }}</text>
                <text class="ym-meta text-body">{{ metaUnitLine }}</text>
              </view>
            <!-- 价格走势 -->
            <template v-if="mainSectionIdx === 0">
              <view class="ym-chart-host">
                <mpvueEcharts
                  ref="yakPriceEcharts"
                  :onInit="onYakPriceChartInit"
                  canvasId="yakMkPriceLine"
                  :disableTouch="true"
                />
              </view>
              <view class="ym-range-chips">
                <view
                  class="ym-chip"
                  :class="{ 'ym-chip--on': chartRange === '7' }"
                  role="button"
                  @tap="chartRange = '7'"
                >
                  <text class="ym-chip__txt text-body">{{ $t('yakMarketPage.range7') }}</text>
                </view>
                <view
                  class="ym-chip"
                  :class="{ 'ym-chip--on': chartRange === '30' }"
                  role="button"
                  @tap="chartRange = '30'"
                >
                  <text class="ym-chip__txt text-body">{{ $t('yakMarketPage.range30') }}</text>
                </view>
              </view>
            </template>
            <!-- 价格预测 -->
            <template v-else>
              <text class="ym-forecast-title text-body">{{ $t('yakMarketPage.forecastBlockTitle') }}</text>
              <view class="ym-donuts">
                <view v-for="ring in forecastRings" :key="ring.key" class="ym-donut-col">
                  <view class="ym-donut" :style="donutStyle(ring)">
                    <view class="ym-donut-hole">
                      <text class="ym-donut-pct">{{ ring.pct }}%</text>
                    </view>
                  </view>
                  <text class="ym-donut-cap text-body">{{ ring.label }}</text>
                </view>
              </view>
            </template>
          </view>
        </template>
      </up-card>

      <!-- 3. 每日行情 -->
      <text class="ym-section-title text-title">{{ $t('yakMarketPage.dailyTitle') }}</text>
      <view class="ym-list-wrap">
        <view v-if="listLoading && !dailyRows.length" class="ym-empty">
          <text class="text-body ym-empty__txt">{{ $t('yakMarketPage.loading') }}</text>
        </view>
        <view v-else-if="!dailyRows.length" class="ym-empty">
          <text class="text-body ym-empty__txt">{{ $t('yakMarketPage.emptyDaily') }}</text>
        </view>
        <up-virtual-list
          v-else
          ref="ymVList"
          class="ym-vlist"
          :list-data="dailyRows"
          :item-height="slotHeightPx"
          :height="listHeightPx"
          :buffer="4"
          key-field="id"
          :scroll-top="vScrollTop"
          @update:scrollTop="vScrollTop = $event"
        >
          <template #default="{ item }">
            <view class="ym-vcell">
              <up-card :show-head="false" :show-foot="false" :border="true" :border-radius="12" margin="0 24rpx 16rpx" :body-style="{ padding: '20rpx' }">
                <template #body>
                  <view class="ym-row1">
                    <up-avatar shape="square" :text="item.avatarText" size="48" font-size="18" bg-color="#9ca3af" color="#ffffff" />
                    <view class="ym-row1__right">
                      <text class="ym-daily-title text-body">{{ item.marketTitle }}</text>
                      <text class="ym-daily-sub text-body">{{ item.subLine }}</text>
                    </view>
                  </view>
                  <up-divider :hairline="true" line-color="#e5e7eb" text="" />
                  <view class="ym-row2">
                    <text class="ym-daily-range-label text-body">{{ item.rangeLabel }}</text>
                    <text class="ym-daily-range-val text-body">{{ item.rangePrice }}</text>
                  </view>
                  <up-divider :hairline="true" line-color="#e5e7eb" text="" />
                  <text class="ym-daily-detail text-body">{{ $t('yakMarketPage.lineSlaughter') }}{{ item.slaughter }}</text>
                  <text class="ym-daily-detail text-body">{{ $t('yakMarketPage.lineFactors') }}{{ item.factors }}</text>
                  <text class="ym-daily-detail text-body">{{ $t('yakMarketPage.lineTrendPred') }}{{ item.trendPred }}</text>
                  <text class="ym-daily-detail text-body">{{ $t('yakMarketPage.lineSuggest') }}{{ item.suggest }}</text>
                </template>
              </up-card>
            </view>
          </template>
        </up-virtual-list>
        <view v-if="dailyRows.length && (listLoadingMore || listNoMore)" class="ym-list-foot">
          <text class="text-body ym-list-foot__txt">{{
            listLoadingMore ? $t('yakMarketPage.loadMore') : $t('yakMarketPage.noMore')
          }}</text>
        </view>
      </view>
      <view class="ym-footer-spacer" />
    </scroll-view>
  </view>
</template>

<script>
import * as echarts from '../../uni_modules/mpvue-echarts/components/echarts.esm.min.js'
import mpvueEcharts from '../../uni_modules/mpvue-echarts/components/echarts.vue'
import UCard from 'uview-plus/components/u-card/u-card.vue'
import UAvatar from 'uview-plus/components/u-avatar/u-avatar.vue'
import USubsection from 'uview-plus/components/u-subsection/u-subsection.vue'
import UDivider from 'uview-plus/components/u-divider/u-divider.vue'
import UVirtualList from 'uview-plus/components/u-virtual-list/u-virtual-list.vue'
import tabPage from '@/mixins/tabPage'
import pageViewport from '@/mixins/pageViewport'
import {
  getYakMarketYesterday,
  getYakMarketStats7,
  getYakMarketTrend,
  getYakMarketForecast,
  listYakMarketDaily
} from '@/api/yakMarket'

const ROW_SLOT_RPX = 480
const DASH = '—'

function formatPrice(val) {
  if (val == null || val === '') return DASH
  const n = Number(val)
  if (Number.isNaN(n)) return String(val)
  return n % 1 === 0 ? String(n) : n.toFixed(2)
}

function formatShortDate(ymd) {
  if (!ymd) return ''
  const s = String(ymd).slice(0, 10)
  const parts = s.split('-')
  if (parts.length >= 3) {
    return `${parts[1]}-${parts[2]}`.toLowerCase()
  }
  return s
}

function formatDateTime(val) {
  if (!val) return DASH
  const s = String(val)
  return s.length >= 19 ? s.slice(0, 19) : s.slice(0, 10)
}

function mapTrendPoints(list) {
  return (list || []).map((p) => ({
    label: p.quoteDateLabel || formatShortDate(p.quoteDate),
    price: p.avgPrice != null ? Number(p.avgPrice) : null
  }))
}

export default {
  components: {
    'up-card': UCard,
    'up-avatar': UAvatar,
    'up-subsection': USubsection,
    'up-divider': UDivider,
    'up-virtual-list': UVirtualList,
    mpvueEcharts
  },
  mixins: [tabPage, pageViewport],
  data() {
    return {
      navTitleKey: 'yakMarketPage.navTitle',
      pageLoading: false,
      heroPrice: DASH,
      heroUnit: '',
      heroMarketName: '',
      heroDate: '',
      mainSectionIdx: 0,
      chartRange: '7',
      stats7: {
        avg: DASH,
        low: DASH,
        lowDate: DASH,
        high: DASH,
        highDate: DASH,
        updateYmd: DASH,
        priceUnitName: ''
      },
      forecast: { probRise: 0, probFlat: 0, probFall: 0 },
      series7: [],
      series30: [],
      dailyRows: [],
      pageNum: 1,
      pageSize: 10,
      listTotal: 0,
      listLoading: false,
      listLoadingMore: false,
      slotHeightPx: 220,
      listHeightPx: 400,
      vScrollTop: 0
    }
  },
  computed: {
    subsectionList() {
      return [
        { name: this.$t('yakMarketPage.tabTrend') },
        { name: this.$t('yakMarketPage.tabForecast') }
      ]
    },
    heroPriceLine() {
      if (this.heroPrice === DASH) {
        return this.$t('yakMarketPage.speciesPriceTpl', {
          price: DASH,
          unit: this.heroUnit || ''
        })
      }
      return this.$t('yakMarketPage.speciesPriceTpl', {
        price: this.heroPrice,
        unit: this.heroUnit || ''
      })
    },
    heroMarketLine() {
      const name = this.heroMarketName || this.$t('yakMarketPage.defaultMarketName')
      return this.$t('yakMarketPage.heroSubTpl', {
        name,
        date: this.heroDate
      })
    },
    metaUnitLine() {
      const unit = this.stats7.priceUnitName || this.heroUnit || DASH
      return this.$t('yakMarketPage.metaUnitTpl', { unit })
    },
    forecastRings() {
      const f = this.forecast || {}
      return [
        { key: 'bull', pct: Math.round(Number(f.probRise) || 0), color: '#ef4444', label: this.$t('yakMarketPage.predBull') },
        { key: 'flat', pct: Math.round(Number(f.probFlat) || 0), color: '#3b82f6', label: this.$t('yakMarketPage.predFlat') },
        { key: 'bear', pct: Math.round(Number(f.probFall) || 0), color: '#22c55e', label: this.$t('yakMarketPage.predBear') }
      ]
    },
    chartSeries() {
      return this.chartRange === '7' ? this.series7 : this.series30
    },
    listNoMore() {
      return this.dailyRows.length > 0 && this.dailyRows.length >= this.listTotal
    }
  },
  watch: {
    chartRange() {
      if (this.mainSectionIdx !== 0) return
      this.refreshChart()
    }
  },
  onShow() {
    this.loadPageData()
  },
  onReady() {
    this.applyListHeightFallback()
    this.$nextTick(() => {
      this.$refs.ymVList?.measureContainerHeight?.()
    })
  },
  methods: {
    loadPageData() {
      this.pageLoading = true
      Promise.all([
        this.loadYesterday(),
        this.loadStats7(),
        this.loadTrend(7),
        this.loadTrend(30),
        this.loadForecast(),
        this.loadDailyList(true)
      ]).finally(() => {
        this.pageLoading = false
      })
    },
    loadYesterday() {
      return getYakMarketYesterday()
        .then((res) => {
          const d = res.data
          if (!d) {
            this.heroPrice = DASH
            this.heroUnit = ''
            this.heroDate = ''
            return
          }
          this.heroPrice = formatPrice(d.avgPrice)
          this.heroUnit = d.priceUnitName || ''
          this.heroDate = formatShortDate(d.quoteDate)
        })
        .catch(() => {
          this.heroPrice = DASH
          this.heroUnit = ''
          this.heroDate = ''
        })
    },
    loadStats7() {
      return getYakMarketStats7()
        .then((res) => {
          const d = res.data
          if (!d) {
            this.stats7 = {
              avg: DASH,
              low: DASH,
              lowDate: DASH,
              high: DASH,
              highDate: DASH,
              updateYmd: DASH,
              priceUnitName: ''
            }
            return
          }
          this.stats7 = {
            avg: formatPrice(d.avgPrice7),
            low: formatPrice(d.minPrice7),
            lowDate: d.minQuoteDateLabel || formatShortDate(d.minQuoteDate) || DASH,
            high: formatPrice(d.maxPrice7),
            highDate: d.maxQuoteDateLabel || formatShortDate(d.maxQuoteDate) || DASH,
            updateYmd: formatDateTime(d.createTime),
            priceUnitName: d.priceUnitName || ''
          }
        })
        .catch(() => {})
    },
    loadTrend(days) {
      return getYakMarketTrend({ days })
        .then((res) => {
          const points = mapTrendPoints(res.data)
          if (days === 7) {
            this.series7 = points
          } else {
            this.series30 = points
          }
          if (this.mainSectionIdx === 0 && String(this.chartRange) === String(days)) {
            this.refreshChart()
          }
        })
        .catch(() => {
          if (days === 7) {
            this.series7 = []
          } else {
            this.series30 = []
          }
        })
    },
    loadForecast() {
      return getYakMarketForecast()
        .then((res) => {
          const d = res.data || {}
          this.forecast = {
            probRise: d.probRise,
            probFlat: d.probFlat,
            probFall: d.probFall
          }
        })
        .catch(() => {
          this.forecast = { probRise: 0, probFlat: 0, probFall: 0 }
        })
    },
    loadDailyList(reset = false) {
      if (!reset) {
        if (this.listLoading || this.listLoadingMore || this.listNoMore) {
          return Promise.resolve()
        }
        this.pageNum += 1
        this.listLoadingMore = true
      } else {
        this.pageNum = 1
        this.listLoading = true
      }
      return listYakMarketDaily({ pageNum: this.pageNum, pageSize: this.pageSize })
        .then((res) => {
          const rows = (res.rows || []).map((row) => this.mapDailyRow(row))
          this.listTotal = res.total != null ? Number(res.total) : 0
          this.dailyRows = reset ? rows : this.dailyRows.concat(rows)
        })
        .catch(() => {
          if (reset) {
            this.dailyRows = []
            this.listTotal = 0
          } else {
            this.pageNum -= 1
          }
        })
        .finally(() => {
          if (reset) {
            this.listLoading = false
          } else {
            this.listLoadingMore = false
          }
        })
    },
    mapDailyRow(row) {
      const unit = row.priceUnitName || ''
      const min = formatPrice(row.priceMin)
      const max = formatPrice(row.priceMax)
      const dateStr = formatShortDate(row.quoteDate)
      const marketName = row.tradeMarketName || this.$t('yakMarketPage.defaultMarketName')
      const location = row.marketLocation || ''
      const subParts = [location, dateStr].filter(Boolean)
      const avatarText = marketName.slice(0, 1) || '市'
      return {
        id: row.id,
        avatarText,
        marketTitle: marketName,
        subLine: subParts.join(' · ') || DASH,
        rangeLabel: this.$t('yakMarketPage.dailyRangeLabel'),
        rangePrice: min === DASH || max === DASH ? DASH : `[${min}-${max}]${unit}`,
        slaughter: row.supplyStatusName || DASH,
        factors: row.changeFactorsText || DASH,
        trendPred: row.trendPrediction || DASH,
        suggest: row.outboundAdvice || DASH
      }
    },
    onScrollToLower() {
      this.loadDailyList(false)
    },
    refreshChart() {
      this.$nextTick(() => {
        const inst = this.$refs.yakPriceEcharts
        if (inst && inst.chart) {
          inst.chart.setOption(this.buildMpvueLineOption(), true)
        }
      })
    },
    onMainSectionUpdate(idx) {
      this.mainSectionIdx = typeof idx === 'number' ? idx : 0
    },
    donutStyle(ring) {
      const p = Math.min(100, Math.max(0, ring.pct))
      const rest = 100 - p
      return {
        background: `conic-gradient(${ring.color} 0% ${p}%, #e8ecf0 ${p}% 100%)`
      }
    },
    onYakPriceChartInit(canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width,
        height
      })
      canvas.setChart(chart)
      chart.setOption(this.buildMpvueLineOption())
      return chart
    },
    buildMpvueLineOption() {
      const data = this.chartSeries
      const dates = data.map((d) => d.label)
      const prices = data.map((d) => (d.price != null && !Number.isNaN(d.price) ? d.price : null))
      const rotate = dates.length > 10 ? 30 : 0
      return {
        animation: false,
        backgroundColor: '#f0f6fb',
        color: ['#22c55e'],
        grid: {
          left: 10,
          right: 14,
          top: 28,
          bottom: 10,
          containLabel: true
        },
        tooltip: { trigger: 'axis' },
        xAxis: [
          {
            type: 'category',
            data: dates,
            boundaryGap: false,
            axisLine: { lineStyle: { color: '#cbd5e1' } },
            axisLabel: { color: '#64748b', fontSize: 10, rotate }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: { lineStyle: { color: '#e2e8f0' } },
            axisLabel: { color: '#64748b', fontSize: 10 }
          }
        ],
        series: [
          {
            type: 'line',
            data: prices,
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            lineStyle: { width: 2, color: '#22c55e' },
            itemStyle: { color: '#22c55e' }
          }
        ]
      }
    },
    applyListHeightFallback() {
      const sys = uni.getSystemInfoSync()
      const winH = sys.windowHeight || 600
      this.listHeightPx = Math.max(280, Math.floor(winH * 0.42))
      this.slotHeightPx = Math.ceil(uni.upx2px(ROW_SLOT_RPX))
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';
@import '@/styles/tab-page.scss';

.ym-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: $morandi-bg-page;
}

.ym-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  height: 0;
  box-sizing: border-box;
}

.ym-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
  min-width: 0;
}

.ym-hero__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.ym-hero__price {
  font-size: 34rpx;
  font-weight: 700;
  color: #ef4444;
  line-height: 1.35;
  word-break: break-word;
}

.ym-hero__sub {
  font-size: 24rpx;
  color: $morandi-text-secondary;
  text-transform: lowercase;
  line-height: 1.45;
}

.ym-panel-inner {
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  background: #f0f6fb;
  box-sizing: border-box;
}

.ym-stats3 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

.ym-stat-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6rpx;
}

.ym-stat-label {
  font-size: 24rpx;
  color: $morandi-text-secondary;
}

.ym-stat-val {
  font-size: 30rpx;
  font-weight: 600;
  color: $morandi-text;
}

.ym-stat-val--red {
  color: #ef4444;
}

.ym-stat-date,
.ym-stat-ph {
  font-size: 22rpx;
  color: $morandi-text-muted;
}

.ym-meta-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  min-width: 0;
}

.ym-meta {
  font-size: 22rpx;
  color: $morandi-text-muted;
}

.ym-chart-host {
  width: 100%;
  height: 360rpx;
  margin-top: 12rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  overflow: hidden;
  background: #f0f6fb;
  position: relative;
}

.ym-chart-host :deep(.ec-canvas) {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

.ym-range-chips {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20rpx;
  margin-top: 16rpx;
}

.ym-chip {
  padding: 8rpx 28rpx;
  border-radius: 999rpx;
  border: 1rpx solid #cbd5e1;
  background: #ffffff;
}

.ym-chip--on {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.ym-chip__txt {
  font-size: 24rpx;
  color: $morandi-text-secondary;
}

.ym-chip--on .ym-chip__txt {
  color: #15803d;
  font-weight: 600;
}

.ym-forecast-title {
  display: block;
  font-size: 24rpx;
  color: $morandi-text-muted;
  margin-bottom: 16rpx;
}

.ym-donuts {
  display: flex;
  flex-direction: row;
  gap: 10rpx;
  justify-content: space-between;
  min-width: 0;
}

.ym-donut-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.ym-donut {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

.ym-donut-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ym-donut-pct {
  font-size: 22rpx;
  font-weight: 600;
  color: #334155;
}

.ym-donut-cap {
  font-size: 24rpx;
  color: $morandi-text-secondary;
  text-align: center;
}

.ym-section-title {
  display: block;
  margin: 28rpx 24rpx 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: $morandi-text;
}

.ym-list-wrap {
  min-width: 0;
  padding-bottom: 8rpx;
}

.ym-empty {
  padding: 48rpx 24rpx;
  text-align: center;
}

.ym-empty__txt {
  color: $morandi-text-secondary;
}

.ym-list-foot {
  padding: 24rpx 0 8rpx;
  text-align: center;
}

.ym-list-foot__txt {
  color: $morandi-text-secondary;
  font-size: 24rpx;
}

.ym-vlist {
  width: 100%;
}

.ym-vcell {
  height: 100%;
  box-sizing: border-box;
}

.ym-row1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
}

.ym-row1__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.ym-daily-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $morandi-text;
}

.ym-daily-sub {
  font-size: 24rpx;
  color: $morandi-text-secondary;
  text-transform: lowercase;
}

.ym-row2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 4rpx 0;
}

.ym-daily-range-label {
  font-size: 26rpx;
  color: $morandi-text-secondary;
}

.ym-daily-range-val {
  font-size: 28rpx;
  font-weight: 600;
  color: #ef4444;
}

.ym-daily-detail {
  display: block;
  font-size: 24rpx;
  line-height: 1.55;
  color: $morandi-text-muted;
  margin-top: 8rpx;
}

.ym-footer-spacer {
  height: 40rpx;
}

.ym-page.lang-bo {
  .ym-hero__price {
    font-size: 30rpx;
    line-height: 1.75;
  }

  .ym-daily-title {
    font-size: 26rpx;
    line-height: 1.75;
  }
}
</style>