huimv-baqing/ruoyi-ui-app/package-a/breeding-news/index.vue

<template>
  <!-- 养殖资讯：顶区固定（搜索 + 横向标签 + 分类入口），下区 up-virtual-list；文案走 i18n，根节点随语言 class 以适配藏文 -->
  <view :class="pageRootClass" class="tab-page breed-page" :style="pageStyle">
    <view class="breed-top">
      <up-search
        v-model="searchKeyword"
        shape="round"
        :placeholder="$t('breedingNewsPage.searchPlaceholder')"
        :show-action="false"
        :clearabled="true"
        bg-color="#f5f2ef"
        border-color="#e5ded6"
      />
      <view class="breed-tabs-row">
        <up-tabs
          :current="tabCurrentIndex"
          class="breed-tabs"
          :list="tabsList"
          key-name="name"
          :scrollable="true"
          line-color="#22C55E"
          :active-style="{ color: '#15803d', fontWeight: '600' }"
          :inactive-style="{ color: '#78716c' }"
          @update:current="tabCurrentIndex = $event"
          @change="onTabsChange"
        />
        <view class="breed-tabs-extra" role="button" @click="popupVisible = true">
          <up-icon name="grid-fill" color="#22C55E" :size="22" />
        </view>
      </view>
    </view>

    <view class="breed-body">
      <view v-if="listLoading && !articles.length" class="breed-empty">
        <text class="text-body breed-empty__txt">{{ $t('breedingNewsPage.loading') }}</text>
      </view>
      <view v-else-if="!articles.length" class="breed-empty">
        <text class="text-body breed-empty__txt">{{ $t('breedingNewsPage.empty') }}</text>
      </view>
      <view v-else class="breed-list-wrap">
        <up-virtual-list
          ref="breedVList"
          class="breed-vlist"
          :list-data="articles"
          :item-height="slotHeightPx"
          :height="listHeightPx"
          :buffer="6"
          key-field="id"
          :scroll-top="vScrollTop"
          @update:scrollTop="vScrollTop = $event"
          @scroll="onVirtualListScroll"
        >
          <template #default="{ item }">
            <view class="breed-row-cell">
              <view class="breed-row" :style="{ height: rowBodyPx + 'px' }">
                <view class="breed-row__left" role="button" @click="openNewsDetail(item)">
                  <text class="breed-row__title">{{ item.title }}</text>
                  <text class="text-body breed-row__summary">{{ item.introduction || $t('breedingNewsPage.noIntro') }}</text>
                  <view class="breed-row__meta">
                    <text class="breed-row__meta-tag text-body">{{ tabTitle(item.type) }}</text>
                    <text class="breed-row__meta-date text-body">{{ item.publishTime || $t('breedingNewsPage.noDate') }}</text>
                  </view>
                </view>
                <view class="breed-row__right">
                  <!-- up-lazy-load：进入视区再加载；点击用 uni.previewImage 放大 -->
                  <up-lazy-load
                    class="breed-lazy-cover"
                    role="button"
                    :image="articleCover(item)"
                    height="120"
                    :border-radius="12"
                    img-mode="aspectFill"
                    :threshold="200"
                    :index="item.id"
                    @click="() => onPreviewCover(item)"
                  />
                </view>
              </view>
            </view>
          </template>
        </up-virtual-list>
        <view v-if="listLoadingMore || listNoMore" class="breed-list-foot">
          <text class="text-body breed-list-foot__txt">
            {{ listLoadingMore ? $t('breedingNewsPage.loadingMore') : $t('breedingNewsPage.noMore') }}
          </text>
        </view>
      </view>
    </view>

    <up-popup
      :show="popupVisible"
      mode="bottom"
      :round="20"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="true"
      @update:show="popupVisible = $event"
    >
      <view class="breed-popup">
        <view class="breed-popup__handle" />
        <scroll-view scroll-y class="breed-popup__scroll" :show-scrollbar="false">
          <view v-for="grp in popupGroups" :key="grp.key" class="breed-popup__block">
            <text class="breed-popup__group-title text-title">{{ grp.title || $t(grp.titleKey) }}</text>
            <view class="breed-popup__chips">
              <view
                v-for="tid in grp.tabIds"
                :key="tid"
                class="breed-chip"
                :class="{ 'breed-chip--on': selectedTabId === tid }"
                role="button"
                @click="onPickChip(tid)"
              >
                <text class="breed-chip__txt text-body">{{ tabTitle(tid) }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script>
import USearch from 'uview-plus/components/u-search/u-search.vue'
import UTabs from 'uview-plus/components/u-tabs/u-tabs.vue'
import UPopup from 'uview-plus/components/u-popup/u-popup.vue'
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import ULazyLoad from 'uview-plus/components/u-lazy-load/u-lazy-load.vue'
import UVirtualList from 'uview-plus/components/u-virtual-list/u-virtual-list.vue'
import tabPage from '@/mixins/tabPage'
import { resolveResourceUrl } from '@/utils/resourceUrl'
import { putNewsDetailPayload } from '@/utils/newsDetailCache'
import { listInformationCategoryTree } from '@/api/category/informationCategory'
import { listFarmingNews } from '@/api/farmingNews'

/** 列表分页（接口默认 10，上限 50） */
const LIST_PAGE_SIZE = 20

/** 养殖资讯模块（与资讯类别接口 moduleId 一致） */
const FARMING_NEWS_MODULE_ID = '01'

/** 接口不可用时的静态兜底（visible=1 叶子 code，不含 001013） */
const FALLBACK_TABS = [
  { id: '001001', name: '繁育作业' },
  { id: '001002', name: '饲养工作' },
  { id: '001003', name: '免疫程序' },
  { id: '001004', name: '环境调控' },
  { id: '001005', name: '饲料配方' },
  { id: '001006', name: '牦牛投喂' },
  { id: '001007', name: '设备操作' },
  { id: '001008', name: '设备保养' },
  { id: '001009', name: '设备排障' },
  { id: '001010', name: '设备维修' },
  { id: '001011', name: '牦牛生长' },
  { id: '001012', name: '牦牛出栏' },
  { id: '002001', name: '高新技术' },
  { id: '002002', name: '农业科技' },
  { id: '002003', name: '社会发展' },
  { id: '002004', name: '基础研究' },
  { id: '003001', name: '涉农政策' },
  { id: '003002', name: '产业项目' },
  { id: '003003', name: '惠农补贴' },
  { id: '003004', name: '共富项目' }
]

const FALLBACK_POPUP_GROUPS = [
  { key: '001', titleKey: 'breedingNewsPage.groupStandard', tabIds: FALLBACK_TABS.slice(0, 12).map((t) => t.id) },
  { key: '002', titleKey: 'breedingNewsPage.groupTech', tabIds: FALLBACK_TABS.slice(12, 16).map((t) => t.id) },
  { key: '003', titleKey: 'breedingNewsPage.groupPolicy', tabIds: FALLBACK_TABS.slice(16, 20).map((t) => t.id) }
]

/** 列表行内容区（rpx），不含与下一行的间距；虚拟列表单项高度 = 内容 + 间隔 */
const ROW_BODY_RPX = 260
const ROW_GAP_RPX = 20
const BREED_BODY_PAD_RPX = 40

const COVER = '/static/ai/hero.png'
/** 资讯详情分包路径（英文目录名） */
const NEWS_DETAIL_PATH = '/package-a/news-detail/index'

export default {
  components: {
    'up-search': USearch,
    'up-tabs': UTabs,
    'up-popup': UPopup,
    'up-icon': UIcon,
    'up-lazy-load': ULazyLoad,
    'up-virtual-list': UVirtualList
  },
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'breedingNewsPage.navTitle',
      searchKeyword: '',
      tabCurrentIndex: 0,
      popupVisible: false,
      categoryTabs: [],
      popupGroupsData: [],
      articles: [],
      listLoading: false,
      listLoadingMore: false,
      listTotal: 0,
      pageNum: 1,
      pageSize: LIST_PAGE_SIZE,
      _searchTimer: null,
      loadMoreTimer: null,
      rowBodyPx: 120,
      marginPx: 10,
      slotHeightPx: 130,
      listHeightPx: 400,
      pageHeightPx: 0,
      vScrollTop: 0,
      coverSrc: COVER
    }
  },
  computed: {
    /** u-tabs：id 为资讯类别叶子 code，name 为接口 name */
    tabsList() {
      return this.categoryTabs.length ? this.categoryTabs : FALLBACK_TABS
    },
    selectedTabId() {
      const row = this.tabsList[this.tabCurrentIndex]
      return row ? row.id : ''
    },
    popupGroups() {
      return this.popupGroupsData.length ? this.popupGroupsData : FALLBACK_POPUP_GROUPS
    },
    /** 已加载条数 ≥ total 时无更多 */
    listNoMore() {
      return this.listTotal > 0 && this.articles.length >= this.listTotal
    },
    pageStyle() {
      if (this.pageHeightPx > 0) {
        return { height: `${this.pageHeightPx}px` }
      }
      return {}
    }
  },
  watch: {
    searchKeyword() {
      this.vScrollTop = 0
      clearTimeout(this._searchTimer)
      this._searchTimer = setTimeout(() => {
        this.loadNewsList(true)
      }, 300)
    },
    tabCurrentIndex() {
      this.vScrollTop = 0
      this.loadNewsList(true)
    },
    listLoadingMore() {
      this.$nextTick(() => this.calcLayoutHeights())
    },
    listNoMore() {
      this.$nextTick(() => this.calcLayoutHeights())
    }
  },
  created() {
    this.loadCategoryTabs().finally(() => {
      this.loadNewsList(true)
    })
  },
  onReady() {
    try {
      this.marginPx = Math.ceil(uni.upx2px(ROW_GAP_RPX))
      this.rowBodyPx = Math.max(100, Math.ceil(uni.upx2px(ROW_BODY_RPX)))
      this.slotHeightPx = this.rowBodyPx + this.marginPx
    } catch (e) {
      this.marginPx = 10
      this.rowBodyPx = 120
      this.slotHeightPx = 130
    }
    this.applyListHeightFallback()
    this.$nextTick(() => {
      this.calcLayoutHeights()
    })
  },
  onShow() {
    this.$nextTick(() => this.calcLayoutHeights())
  },
  onUnload() {
    if (this.loadMoreTimer) clearTimeout(this.loadMoreTimer)
    if (this._searchTimer) clearTimeout(this._searchTimer)
  },
  methods: {
    loadCategoryTabs() {
      return listInformationCategoryTree({ moduleId: FARMING_NEWS_MODULE_ID })
        .then((res) => {
          const tree = res.data || []
          const tabs = []
          const groups = []
          tree.forEach((root) => {
            const children = root.children || []
            groups.push({
              key: root.code,
              title: root.name,
              tabIds: children.map((c) => c.code)
            })
            children.forEach((child) => {
              tabs.push({ id: child.code, name: child.name })
            })
          })
          this.categoryTabs = tabs
          this.popupGroupsData = groups
          if (this.tabCurrentIndex >= tabs.length) {
            this.tabCurrentIndex = 0
          }
        })
        .catch(() => {
          this.categoryTabs = []
          this.popupGroupsData = []
        })
        .finally(() => {
          this.$nextTick(() => this.calcLayoutHeights())
        })
    },
    mapNewsRow(row, index) {
      const type = row.type || ''
      const publishTime = row.publishTime || ''
      const title = row.title || ''
      return {
        id: `${type}-${publishTime}-${index}-${title}`,
        title,
        introduction: row.introduction || '',
        type,
        coverFileUrl: row.coverFileUrl || '',
        contentFileUrl: row.contentFileUrl || '',
        publishTime
      }
    },
    loadNewsList(reset = false) {
      const type = this.selectedTabId
      if (!type) {
        this.articles = []
        this.listTotal = 0
        return Promise.resolve()
      }
      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
      }
      const params = {
        type,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      const titleKw = (this.searchKeyword || '').trim()
      if (titleKw) {
        params.title = titleKw
      }
      const baseIndex = reset ? 0 : this.articles.length
      return listFarmingNews(params)
        .then((res) => {
          const rows = res.rows || []
          this.listTotal = res.total != null ? Number(res.total) : 0
          const mapped = rows.map((row, i) => this.mapNewsRow(row, baseIndex + i))
          this.articles = reset ? mapped : this.articles.concat(mapped)
          this.$nextTick(() => {
            this.calcLayoutHeights()
          })
        })
        .catch(() => {
          if (reset) {
            this.articles = []
            this.listTotal = 0
          } else {
            this.pageNum -= 1
          }
        })
        .finally(() => {
          if (reset) {
            this.listLoading = false
          } else {
            this.listLoadingMore = false
          }
        })
    },
    /** 首屏内容未填满可视区时自动补页 */
    tryAutoLoadMore() {
      if (this.listLoading || this.listLoadingMore || this.listNoMore) return
      const totalH = this.articles.length * this.slotHeightPx
      const viewH = this.listHeightPx
      if (totalH > 0 && totalH <= viewH) {
        this.loadNewsList(false)
      }
    },
    /**
     * up-virtual-list scroll：接近底部时 pageNum++ 加载下一页
     * 回调为 scrollTop 数值（非原生 event）
     */
    onVirtualListScroll(scrollTop) {
      if (this.loadMoreTimer) clearTimeout(this.loadMoreTimer)
      this.loadMoreTimer = setTimeout(() => {
        this.loadMoreTimer = null
        this.tryLoadMoreOnScroll(typeof scrollTop === 'number' ? scrollTop : 0)
      }, 180)
    },
    tryLoadMoreOnScroll(scrollTop) {
      if (this.listLoading || this.listLoadingMore || this.listNoMore) return
      const totalH = this.articles.length * this.slotHeightPx
      const viewH = this.listHeightPx
      const threshold = Math.max(this.slotHeightPx * 2, 120)
      if (totalH <= viewH) {
        this.loadNewsList(false)
        return
      }
      if (scrollTop + viewH >= totalH - threshold) {
        this.loadNewsList(false)
      }
    },
    applyListHeightFallback() {
      const contentH = this.getViewportContentHeight()
      const topFallback = Math.ceil(uni.upx2px(220))
      const bodyPad = Math.ceil(uni.upx2px(BREED_BODY_PAD_RPX))
      this.pageHeightPx = contentH
      this.listHeightPx = Math.max(240, contentH - topFallback - bodyPad)
    },
    getNavigationBarHeight() {
      const sys = uni.getSystemInfoSync()
      const statusBar = sys.statusBarHeight || 0
      // #ifdef MP-WEIXIN
      try {
        const menu = uni.getMenuButtonBoundingClientRect()
        if (menu && menu.height) {
          return statusBar + (menu.top - statusBar) * 2 + menu.height
        }
      } catch (e) {
        /* noop */
      }
      // #endif
      return statusBar + 44
    },
    getViewportContentHeight() {
      const sys = uni.getSystemInfoSync()
      const navH = this.getNavigationBarHeight()
      // #ifdef H5
      if (typeof window !== 'undefined' && window.innerHeight) {
        return Math.max(320, window.innerHeight - navH)
      }
      // #endif
      const screenH = sys.screenHeight || sys.windowHeight || 600
      return Math.max(320, screenH - navH)
    },
    calcLayoutHeights() {
      const contentH = this.getViewportContentHeight()
      this.pageHeightPx = contentH

      const applyListHeight = (bodyH) => {
        let listH = Math.max(240, Math.floor(bodyH))
        if (!this.articles.length) {
          this.listHeightPx = listH
          return
        }
        uni.createSelectorQuery()
          .in(this)
          .select('.breed-list-foot')
          .boundingClientRect((footRect) => {
            if (footRect && footRect.height > 0) {
              listH -= Math.ceil(footRect.height)
            }
            this.listHeightPx = Math.max(240, listH)
            this.$nextTick(() => {
              this.$refs.breedVList?.measureContainerHeight?.()
              this.tryAutoLoadMore()
            })
          })
          .exec()
      }

      uni.createSelectorQuery()
        .in(this)
        .select('.breed-body')
        .boundingClientRect((bodyRect) => {
          if (bodyRect && bodyRect.height > 0) {
            applyListHeight(bodyRect.height)
            return
          }
          uni.createSelectorQuery()
            .in(this)
            .select('.breed-top')
            .boundingClientRect((topRect) => {
              const topH =
                topRect && topRect.height > 0 ? Math.ceil(topRect.height) : Math.ceil(uni.upx2px(220))
              const bodyPad = Math.ceil(uni.upx2px(BREED_BODY_PAD_RPX))
              applyListHeight(Math.max(240, contentH - topH - bodyPad))
            })
            .exec()
        })
        .exec()
    },
    tabTitle(tabId) {
      const row = this.tabsList.find((t) => t.id === tabId)
      return row ? row.name : String(tabId || '')
    },
    /** 列表项封面 */
    articleCover(item) {
      if (item.coverFileUrl) {
        return resolveResourceUrl(item.coverFileUrl)
      }
      return this.coverSrc
    },
    /** 点击缩略图：系统预览放大 */
    onPreviewCover(item) {
      const url = this.articleCover(item)
      if (!url) return
      uni.previewImage({
        urls: [url],
        current: 0
      })
    },
    /** 进入资讯详情（英文路径页），携带 id / 日期 / 序号供详情展示 */
    openNewsDetail(item) {
      const payload = {
        title: item.title || '',
        introduction: item.introduction || '',
        type: item.type || '',
        typeLabel: this.tabTitle(item.type),
        coverFileUrl: item.coverFileUrl || '',
        contentFileUrl: item.contentFileUrl || '',
        publishTime: item.publishTime || '',
        listKind: 'breeding'
      }
      const cacheKey = putNewsDetailPayload(payload)
      let url = `${NEWS_DETAIL_PATH}?kind=breeding`
      if (cacheKey) {
        url += `&cacheKey=${encodeURIComponent(cacheKey)}`
      } else {
        url += [
          `&title=${encodeURIComponent(payload.title)}`,
          `&date=${encodeURIComponent(payload.publishTime)}`,
          `&type=${encodeURIComponent(payload.type)}`,
          `&typeLabel=${encodeURIComponent(payload.typeLabel)}`,
          `&introduction=${encodeURIComponent(payload.introduction)}`,
          `&coverFileUrl=${encodeURIComponent(payload.coverFileUrl)}`,
          `&contentFileUrl=${encodeURIComponent(payload.contentFileUrl)}`
        ].join('')
      }
      uni.navigateTo({ url })
    },
    onTabsChange(_item, index) {
      this.tabCurrentIndex = typeof index === 'number' ? index : this.tabCurrentIndex
    },
    /** 弹层中点选子类：与顶部 tabs 同一套 id */
    onPickChip(tabId) {
      const idx = this.tabsList.findIndex((t) => t.id === tabId)
      if (idx >= 0) this.tabCurrentIndex = idx
      this.popupVisible = false
      this.vScrollTop = 0
    }
  }
}
</script>

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

.breed-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;
}

.breed-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  min-width: 0;
  padding: 20rpx 24rpx 16rpx;
  box-sizing: border-box;
  background: $morandi-bg-page;
  border-bottom: 1rpx solid $morandi-border-soft;
}

.breed-tabs-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  gap: 12rpx;
}

.breed-tabs {
  flex: 1;
  min-width: 0;
}

.breed-tabs-extra {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
  padding: 8rpx 12rpx;
  border-radius: 16rpx;
  background: $morandi-bg-card-inner;
  border: 1rpx solid $morandi-border;
  box-sizing: border-box;
}

.breed-tabs-extra__txt {
  font-size: 20rpx;
  color: $morandi-text-muted;
  text-align: center;
  max-width: 88rpx;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.breed-body {
  // flex: 1;
  min-height: 0;
  height: calc(100vh - 100px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16rpx 24rpx 24rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.breed-list-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.breed-vlist {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.breed-list-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 0 8rpx;
  box-sizing: border-box;
}

.breed-list-foot__txt {
  font-size: 24rpx;
  color: $morandi-text-muted;
  text-align: center;
}

.breed-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 48rpx 24rpx;
  box-sizing: border-box;
}

.breed-empty__txt {
  color: $morandi-text-muted;
  text-align: center;
}

.breed-row-cell {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.breed-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20rpx;
  min-width: 0;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  background: $morandi-bg-card;
  border: 1rpx solid $morandi-border;
  flex-shrink: 0;
}

.breed-row__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.breed-row__title {
  font-size: 32rpx;
  font-weight: 600;
  line-height: 1.45;
  color: $morandi-text;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.breed-row__summary {
  font-size: 24rpx;
  line-height: 1.55;
  color: $morandi-text-secondary;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.breed-row__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rpx 20rpx;
  min-width: 0;
}

.breed-row__meta-tag {
  font-size: 22rpx;
  color: $morandi-accent-soft;
}

.breed-row__meta-date {
  font-size: 22rpx;
  color: $morandi-text-soft;
}

.breed-row__right {
  flex-shrink: 0;
  align-self: center;
  width: 160rpx;
  min-width: 0;
}

.breed-lazy-cover {
  width: 100%;
  display: block;
}

/* 藏文：标题/摘要略小字号、行高与字间距（与全站 app-lang 协调） */
.breed-page.lang-bo {
  .breed-row__title {
    font-size: 30rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .breed-row__summary {
    font-size: 22rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .breed-row__meta-tag,
  .breed-row__meta-date {
    font-size: 20rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  .breed-tabs-extra__txt {
    font-size: 18rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
  }

  .breed-chip__txt {
    font-size: 20rpx;
    line-height: 1.75;
    letter-spacing: 2rpx;
    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
}

.breed-popup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 72vh;
  padding: 12rpx 24rpx 24rpx;
  box-sizing: border-box;
}

.breed-popup__handle {
  align-self: center;
  width: 72rpx;
  height: 8rpx;
  border-radius: 999rpx;
  background: $morandi-border-strong;
  margin-bottom: 16rpx;
}

.breed-popup__scroll {
  flex: 1;
  min-height: 0;
  max-height: 68vh;
}

.breed-popup__block {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 28rpx;
  min-width: 0;
}

.breed-popup__group-title {
  color: $morandi-text;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.breed-popup__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12rpx;
  min-width: 0;
}

.breed-chip {
  min-width: 0;
  padding: 14rpx 8rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  border: 1rpx solid $morandi-border-strong;
  background: $morandi-bg-card-inner;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.breed-chip__txt {
  font-size: 22rpx;
  color: $morandi-text-secondary;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.breed-chip--on .breed-chip__txt {
  color: #15803d;
  font-weight: 600;
}
</style>