pms-app/pages/swh/form.vue

<template>
  <view class="swh-form-page">
    <scroll-view class="swh-form-scroll" scroll-y :show-scrollbar="false">
      <view class="swh-form-content">
    <view class="section">
      <view class="section-title">会议基本信息</view>
      <view class="field">
        <text class="label">会议日期 <text class="required">*</text></text>
        <uni-datetime-picker v-model="form.meetingDate" type="date" return-type="timestamp" :disabled="readonly" />
      </view>
      <view class="field">
        <text class="label">会议期次 <text class="required">*</text></text>
        <uni-easyinput v-model="form.meetingSeries" type="number" :disabled="readonly" placeholder="请输入会议期次（数字）" />
      </view>
      <view class="field">
        <text class="label">其他重点事项及需要集团协调事项 <text class="required">*</text></text>
        <uni-easyinput v-model="form.support" type="textarea" :disabled="readonly" placeholder="请输入相关事项" />
      </view>
    </view>

    <view v-if="readonly" class="section summary-section">
      <view class="summary-title-row">
        <view>
          <view class="section-title">公司整体</view>
          <view class="section-tip">经营数据汇总</view>
        </view>
      </view>
      <view class="summary-grid">
        <view
          v-for="item in businessSummaryCards"
          :key="item.key"
          class="summary-card"
          :class="item.tone"
        >
          <text>{{ item.label }}</text>
          <view class="summary-value">{{ item.value }} <small>万元</small></view>
          <view v-if="item.compare" class="summary-compare" :class="item.compare.tone">
            环比 {{ item.compare.text }}
          </view>
        </view>
      </view>
    </view>

    <view v-if="readonly && workloadProperties.length" class="section workload-section">
      <view class="section-title">公司整体</view>
      <view class="section-tip">工作量完成情况</view>
      <view class="workload-grid">
        <view
          v-for="(item, index) in workloadProperties"
          :key="item.identifier"
          class="workload-card"
          :class="workloadTone(item, index)"
        >
          <text>{{ item.name }}</text>
          <strong>{{ workloadValue(item) }}</strong>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="detail-head">
        <view>
          <view class="section-title">会议明细</view>
          <view class="section-tip">共 {{ details.length }} 个项目</view>
        </view>
        <button v-if="!readonly" class="add-btn" @click="openDetail()">+ 新增明细</button>
      </view>
      <view v-if="!details.length" class="empty">请新增至少一条会议明细</view>
      <view v-for="(item, index) in details" :key="index" class="detail-card">
        <view class="detail-card-head">
          <text class="project-name">{{ item.projectName || "未命名项目" }}</text>
          <text class="detail-link" @click="openDetail(index)">{{ readonly ? "查看" : "编辑" }}</text>
        </view>
        <view class="money-grid">
          <view><text>本期收入</text><strong>{{ numberText(item.currentRevenue) }}</strong></view>
          <view><text>本期挂帐</text><strong>{{ numberText(item.currentOnAccount) }}</strong></view>
          <view><text>本期回款</text><strong>{{ numberText(item.currentPayment) }}</strong></view>
        </view>
        <view v-if="!readonly" class="delete" @click="removeDetail(index)">删除</view>
      </view>
    </view>

        <view class="footer-space"></view>
      </view>
    </scroll-view>

    <view class="footer">
      <button class="cancel-btn" @click="goBack">{{ readonly ? "关闭" : "取消" }}</button>
      <button v-if="!readonly" class="save-btn" :disabled="saving" @click="submit">保存</button>
    </view>

    <uni-popup ref="detailPopup" type="bottom" background-color="#f4f7fb" border-radius="20px 20px 0 0">
      <view class="detail-popup">
        <view class="popup-head">
          <text>{{ readonly ? "查看会议明细" : editingIndex < 0 ? "新增会议明细" : "编辑会议明细" }}</text>
          <uni-icons type="closeempty" size="24" color="#64748b" @click="closeDetail" />
        </view>
        <scroll-view class="popup-scroll" scroll-y>
          <view class="popup-section">
            <view class="field">
              <text class="label">项目名称 <text class="required">*</text></text>
              <uni-easyinput v-model="detailForm.projectName" :disabled="readonly" placeholder="请选择或输入项目名称" />
              <scroll-view v-if="!readonly && projectOptions.length" class="suggestions" scroll-x>
                <text v-for="name in projectOptions" :key="name" @click="detailForm.projectName = name">{{ name }}</text>
              </scroll-view>
            </view>
          </view>

          <view class="popup-section">
            <view class="popup-section-title">经营情况（万元）</view>
            <view class="two-cols">
              <view v-for="field in moneyFields" :key="field.key" class="field">
                <text class="label">{{ field.label }} <text class="required">*</text></text>
                <uni-easyinput v-model="detailForm[field.key]" type="digit" :disabled="readonly" placeholder="请输入" />
              </view>
            </view>
          </view>

          <view v-if="currentExtProperties.length" class="popup-section">
            <view class="popup-section-title">本期生产运行情况</view>
            <view v-for="item in currentExtProperties" :key="item.identifier" class="field">
              <text class="label">{{ extLabel(item) }} <text v-if="isRequired(item)" class="required">*</text></text>
              <uni-easyinput v-model="item.actualValue" :type="item.dataType === 'double' ? 'digit' : 'textarea'" :disabled="readonly" :placeholder="`请输入${item.name}`" />
            </view>
          </view>

          <view v-for="group in textGroups" :key="group.title" class="popup-section">
            <view class="popup-section-title">{{ group.title }}</view>
            <view v-for="field in group.fields" :key="field.key" class="field">
              <text class="label">{{ field.label }} <text class="required">*</text></text>
              <uni-easyinput v-model="detailForm[field.key]" type="textarea" :disabled="readonly" :placeholder="`请输入${field.label}`" />
            </view>
          </view>

          <view v-if="nextExtProperties.length" class="popup-section">
            <view class="popup-section-title">下期扩展工作计划</view>
            <view v-for="item in nextExtProperties" :key="item.identifier" class="field">
              <text class="label">{{ extLabel(item) }} <text v-if="isRequired(item)" class="required">*</text></text>
              <uni-easyinput v-model="item.actualValue" :type="item.dataType === 'double' ? 'digit' : 'textarea'" :disabled="readonly" :placeholder="`请输入${item.name}`" />
            </view>
          </view>
          <view class="popup-bottom"></view>
        </scroll-view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="closeDetail">{{ readonly ? "关闭" : "取消" }}</button>
          <button v-if="!readonly" class="save-btn" @click="saveDetail">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getCurrentCompanyExtProperties,
  getOperationMeeting,
  getOperationMeetingProjects,
  saveOperationMeetingBatch,
} from "@/api/operationMeeting";

const type = ref("create");
const id = ref();
const saving = ref(false);
const detailPopup = ref(null);
const editingIndex = ref(-1);
const projectOptions = ref([]);
const extProperties = ref([]);
const form = ref({ meetingDate: "", meetingSeries: "", support: "" });
const details = ref([]);
const meetingExtProperties = ref([]);
const previousTotals = ref({
  beforeRevenue: undefined,
  beforeOnAccount: undefined,
  beforePayment: undefined,
});
const readonly = computed(() => type.value === "view");

const moneyFields = [
  { key: "currentRevenue", label: "收入-本期" },
  { key: "cumulativeRevenue", label: "收入-累计" },
  { key: "currentOnAccount", label: "挂帐-本期" },
  { key: "cumulativeOnAccount", label: "挂帐-累计" },
  { key: "currentPayment", label: "回款-本期" },
  { key: "cumulativePayment", label: "回款-累计" },
];
const textGroups = [
  { title: "生产管理情况及重点工作", fields: [
    { key: "keyWorkCompletion", label: "重点工作及完成情况" },
    { key: "problemsAnalysis", label: "存在问题及分析" },
  ] },
  { title: "设备、安全管理工作", fields: [{ key: "qhse", label: "设备、安全管理工作" }] },
  { title: "下期工作计划", fields: [
    { key: "nextPlannedWorkload", label: "计划工作量" },
    { key: "priorityTasks", label: "重点工作事项" },
  ] },
];

const normalizeExtList = (value) => {
  if (Array.isArray(value)) return value;
  if (typeof value === "string") {
    try { return normalizeExtList(JSON.parse(value)); } catch (_) { return []; }
  }
  if (value && typeof value === "object") {
    const values = Object.values(value);
    if (values.every((item) => item && typeof item === "object")) return values;
    return Object.entries(value).map(([identifier, actualValue]) => ({
      name: identifier,
      identifier,
      actualValue,
      dataType: typeof actualValue === "number" ? "double" : "",
      required: 0,
    }));
  }
  return [];
};
const amountNumber = (value) => {
  const number = Number(value);
  return Number.isFinite(number) ? number : 0;
};
const amountText = (value) => {
  const number = Math.round((amountNumber(value) + Math.sign(amountNumber(value)) * Number.EPSILON) * 100) / 100;
  return number.toFixed(2);
};
const summaryDefinitions = [
  { key: "currentRevenue", label: "收入-本期", tone: "revenue", beforeKey: "beforeRevenue" },
  { key: "cumulativeRevenue", label: "收入-累计", tone: "revenue" },
  { key: "currentOnAccount", label: "挂帐-本期", tone: "account", beforeKey: "beforeOnAccount" },
  { key: "cumulativeOnAccount", label: "挂帐-累计", tone: "account" },
  { key: "currentPayment", label: "回款-本期", tone: "payment", beforeKey: "beforePayment" },
  { key: "cumulativePayment", label: "回款-累计", tone: "payment" },
];
const getDetailTotal = (key) =>
  details.value.reduce(
    (sum, item) => sum + Math.round(amountNumber(item[key]) * 100),
    0,
  ) / 100;
const getSummaryCompare = (definition, value) => {
  if (!definition.beforeKey) return null;
  const before = amountNumber(previousTotals.value[definition.beforeKey]);
  if (!before) return null;
  const compare = ((value - before) / Math.abs(before)) * 100;
  return {
    text: `${compare > 0 ? "+" : ""}${amountText(compare)}%`,
    tone: compare > 0 ? "up" : compare < 0 ? "down" : "flat",
  };
};
const businessSummaryCards = computed(() =>
  summaryDefinitions.map((definition) => {
    const value = getDetailTotal(definition.key);
    return {
      ...definition,
      value: amountText(value),
      compare: getSummaryCompare(definition, value),
    };
  }),
);
const isRequiredWorkload = (item) => [true, 1, "1"].includes(item.required);
const workloadProperties = computed(() =>
  normalizeExtList(meetingExtProperties.value)
    .filter(
      (item) =>
        item.identifier &&
        item.defaultValue !== "next" &&
        isRequiredWorkload(item),
    )
    .sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0)),
);
const workloadMetricText = (item) =>
  `${item.identifier || ""}${item.name || ""}`.toLowerCase().replace(/[\s%]/g, "");
const workloadTone = (item, index) => {
  const text = workloadMetricText(item);
  if (text.includes("设备利用率") || text.includes("utilization")) return "cyan";
  if (text.includes("环比") || text.includes("monthonmonth") || text.includes("mom")) return "rose";
  if (text.includes("计划") || text.includes("plan")) return "blue";
  if (text.includes("实际") || text.includes("actual")) return "green";
  if (text.includes("完成") || text.includes("complete")) return "orange";
  if (text.includes("累计") || text.includes("cumulative")) return "purple";
  return ["blue", "green", "orange", "purple"][index % 4];
};
const workloadValue = (item) => {
  if (item.actualValue === undefined || item.actualValue === null || item.actualValue === "") return "-";
  return `${item.dataType === "double" ? amountText(item.actualValue) : item.actualValue}${item.unit || ""}`;
};
const cloneExt = (value = extProperties.value) => normalizeExtList(value).map((item) => ({ ...item }));
const createDetail = () => ({
  projectName: "", currentRevenue: "", cumulativeRevenue: "", beforeRevenue: undefined,
  currentOnAccount: "", cumulativeOnAccount: "", beforeOnAccount: undefined,
  currentPayment: "", cumulativePayment: "", beforePayment: undefined,
  plannedWorkload: "", actualCompletion: "", equipmentUtilizationRate: undefined,
  keyWorkCompletion: "", problemsAnalysis: "", qhse: "", nextPlannedWorkload: "",
  priorityTasks: "", extProperty: cloneExt(),
});
const detailForm = ref(createDetail());
const currentExtProperties = computed(() => detailForm.value.extProperty.filter((item) => item.defaultValue !== "next"));
const nextExtProperties = computed(() => detailForm.value.extProperty.filter((item) => item.defaultValue === "next"));
const isRequired = (item) => [true, 1, "1"].includes(item.required);
const extLabel = (item) => `${item.name || item.identifier}${item.unit ? `（${item.unit}）` : ""}`;

const normalizeDetail = (item = {}) => {
  const normalized = {
    ...createDetail(),
    ...item,
    extProperty: cloneExt(
      item.extProperty?.length ? item.extProperty : extProperties.value,
    ),
  };
  moneyFields.forEach(({ key }) => {
    if (normalized[key] !== "" && normalized[key] != null) {
      normalized[key] = amountText(normalized[key]);
    }
  });
  normalized.extProperty = normalized.extProperty.map((property) => ({
    ...property,
    actualValue:
      property.dataType === "double" &&
      property.actualValue !== "" &&
      property.actualValue != null
        ? amountText(property.actualValue)
        : property.actualValue,
  }));
  return normalized;
};
const parseSeries = (value) => String(value || "").match(/\d+/)?.[0] || "";
const numberText = (value) =>
  value === "" || value == null || !Number.isFinite(Number(value))
    ? "-"
    : `${Number(value).toFixed(2)} 万元`;

const openDetail = (index = -1) => {
  editingIndex.value = index;
  detailForm.value = index < 0 ? createDetail() : normalizeDetail(details.value[index]);
  detailPopup.value?.open();
};
const closeDetail = () => detailPopup.value?.close();
const removeDetail = (index) => details.value.splice(index, 1);
const toast = (title) => uni.showToast({ title, icon: "none" });
const hasValue = (value) => value !== undefined && value !== null && String(value).trim() !== "";
const extScope = (item) => (item.defaultValue === "next" ? "next" : "current");
const extGroupKey = (item) => {
  const value = String(item.maxValue ?? "").trim();
  return value && Number.isNaN(Number(value)) ? value : "";
};
const alternativeGroups = (scope) => {
  const groups = new Map();
  detailForm.value.extProperty.forEach((item) => {
    const key = extGroupKey(item);
    if (!isRequired(item) || extScope(item) !== scope || !key) return;
    groups.set(key, [...(groups.get(key) || []), item]);
  });
  return groups;
};
const isAlternative = (item) =>
  Boolean(extGroupKey(item)) && alternativeGroups(extScope(item)).size > 1;
const hasCompleteAlternative = (scope) =>
  [...alternativeGroups(scope).values()].some((items) =>
    items.every((item) => hasValue(item.actualValue)),
  );
const extSearchText = (item) =>
  `${item.identifier || ""}${item.name || ""}`.toLowerCase().replace(/[\s%()（）]/g, "");
const matchesExt = (item, words) => words.some((word) => extSearchText(item).includes(word));
const updateEquipmentUtilization = () => {
  const current = currentExtProperties.value;
  const utilization = current.find((item) =>
    matchesExt(item, ["设备利用率", "equipmentutilization", "utilizationrate"]),
  );
  const construction = current.find((item) =>
    matchesExt(item, ["施工设备", "constructiondevicenum"]),
  );
  const operating = current.find((item) =>
    matchesExt(item, ["投运设备", "inservicedevicenum"]),
  );
  if (!utilization || !construction || !operating) return;
  const constructionValue = Number(construction.actualValue);
  const operatingValue = Number(operating.actualValue);
  if (!hasValue(construction.actualValue) || !hasValue(operating.actualValue)) return;
  utilization.actualValue = operatingValue === 0 ? 0 : Number(((constructionValue / operatingValue) * 100).toFixed(2));
};

const validateDetail = () => {
  updateEquipmentUtilization();
  if (!hasValue(detailForm.value.projectName)) return "请输入项目名称";
  for (const field of moneyFields) {
    const value = detailForm.value[field.key];
    if (!hasValue(value)) return `请输入${field.label}`;
    if (Number(value) < 0) return `${field.label}不能小于0`;
  }
  for (const group of textGroups) {
    for (const field of group.fields) if (!hasValue(detailForm.value[field.key])) return `请输入${field.label}`;
  }
  const emptyExt = detailForm.value.extProperty.find(
    (item) =>
      isRequired(item) &&
      !isAlternative(item) &&
      !hasValue(item.actualValue),
  );
  const incompleteAlternative = ["current", "next"].some(
    (scope) => alternativeGroups(scope).size > 1 && !hasCompleteAlternative(scope),
  );
  if (incompleteAlternative) return "请至少完整填写一种工作量";
  return emptyExt ? `请输入${emptyExt.name}` : "";
};

const saveDetail = () => {
  const message = validateDetail();
  if (message) return toast(message);
  const item = normalizeDetail(detailForm.value);
  if (editingIndex.value < 0) details.value.push(item);
  else details.value.splice(editingIndex.value, 1, item);
  closeDetail();
};

const toNumber = (value) => (hasValue(value) ? Number(value) : undefined);
const serializeDetail = (item) => ({
  ...item,
  ...Object.fromEntries(
    [...moneyFields.map((field) => field.key), "equipmentUtilizationRate"].map(
      (key) => [key, toNumber(item[key])],
    ),
  ),
  extProperty: cloneExt(item.extProperty).map((property) => ({
    ...property,
    actualValue:
      property.dataType === "double"
        ? toNumber(property.actualValue)
        : property.actualValue,
  })),
});

const meetingDateTimestamp = (value) => {
  if (typeof value === "number") return value;
  const timestamp = new Date(value).getTime();
  return Number.isNaN(timestamp) ? undefined : timestamp;
};

const submit = async () => {
  if (!form.value.meetingDate) return toast("请选择会议日期");
  if (!form.value.meetingSeries || Number(form.value.meetingSeries) < 1) return toast("请输入正确的会议期次");
  if (!String(form.value.support || "").trim()) return toast("请输入其他重点事项及需要集团协调事项");
  if (!details.value.length) return toast("请先新增至少一条会议明细");
  saving.value = true;
  try {
    const operationMeeting = {
      meetingDate: meetingDateTimestamp(form.value.meetingDate),
      meetingSeries: `第${Number(form.value.meetingSeries)}期`,
      support: form.value.support,
    };
    if (id.value) operationMeeting.id = Number(id.value);
    const res = await saveOperationMeetingBatch({
      operationMeeting,
      details: details.value.map(serializeDetail),
    });
    if (res?.code === 0) {
      uni.showToast({ title: "保存成功", icon: "success" });
      setTimeout(() => uni.navigateBack(), 500);
    }
  } finally { saving.value = false; }
};

const goBack = () => uni.navigateBack();

onLoad(async (options) => {
  type.value = options.type || "create";
  id.value = options.id;
  uni.setNavigationBarTitle({
    title:
      type.value === "create"
        ? "新建生产运营双周会"
        : type.value === "edit"
          ? "编辑生产运营双周会"
          : "查看生产运营双周会",
  });
  const [extRes, projectRes] = await Promise.all([
    getCurrentCompanyExtProperties().catch(() => ({ data: [] })),
    getOperationMeetingProjects().catch(() => ({ data: [] })),
  ]);
  extProperties.value = cloneExt(extRes?.data);
  projectOptions.value = Array.isArray(projectRes?.data) ? projectRes.data.filter(Boolean).map(String) : [];
  if (!id.value) return;
  const res = await getOperationMeeting(id.value);
  const data = res?.data || {};
  form.value = {
    meetingDate: data.meetingDate || "",
    meetingSeries: parseSeries(data.meetingSeries),
    support: data.support || "",
  };
  details.value = (data.details || []).map(normalizeDetail);
  meetingExtProperties.value = normalizeExtList(data.extProperty);
  previousTotals.value = {
    beforeRevenue: data.beforeRevenue,
    beforeOnAccount: data.beforeOnAccount,
    beforePayment: data.beforePayment,
  };
});
</script>

<style lang="scss" scoped>
.swh-form-page { height: 100%; overflow: hidden; background: #f4f7fb; }
.swh-form-scroll { height: 100%; }
.swh-form-content { min-height: 100%; padding: 24rpx; box-sizing: border-box; }
.section, .popup-section { margin-bottom: 22rpx; padding: 28rpx 24rpx; border-radius: 20rpx; background: #fff; }
.section-title, .popup-section-title { color: #172033; font-size: 32rpx; font-weight: 700; }
.section-tip { margin-top: 6rpx; color: #94a3b8; font-size: 22rpx; }
.summary-grid, .workload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rpx; margin-top: 22rpx; }
.summary-card, .workload-card { min-width: 0; padding: 20rpx; border-left: 6rpx solid #3b82f6; border-radius: 14rpx; background: #f8fafc; box-sizing: border-box; }
.summary-card.account, .workload-card.orange { border-color: #f59e0b; }.summary-card.payment, .workload-card.green { border-color: #10b981; }
.workload-card.purple { border-color: #8b5cf6; }.workload-card.cyan { border-color: #06b6d4; }.workload-card.rose { border-color: #f43f5e; }
.summary-card > text, .workload-card > text { display: block; overflow: hidden; color: #64748b; font-size: 22rpx; text-overflow: ellipsis; white-space: nowrap; }
.summary-value, .workload-card strong { display: block; margin-top: 10rpx; color: #172033; font-size: 29rpx; font-weight: 700; overflow-wrap: anywhere; }
.summary-value small { color: #94a3b8; font-size: 20rpx; font-weight: 400; }
.summary-compare { margin-top: 8rpx; color: #64748b; font-size: 20rpx; }.summary-compare.up { color: #ef4444; }.summary-compare.down { color: #10b981; }
.field { margin-top: 24rpx; }
.label { display: block; margin-bottom: 12rpx; color: #475569; font-size: 26rpx; }
.required { color: #ef4444; }
.detail-head { display: flex; align-items: center; justify-content: space-between; }
.add-btn { width: 180rpx; height: 66rpx; line-height: 66rpx; margin: 0; color: #fff; font-size: 25rpx; border-radius: 12rpx; background: #2563eb; }
.empty { padding: 70rpx 0 40rpx; color: #94a3b8; text-align: center; }
.detail-card { margin-top: 22rpx; padding: 24rpx; border: 1rpx solid #e5edf8; border-radius: 16rpx; background: #fbfdff; }
.detail-card-head { display: flex; justify-content: space-between; }
.project-name { color: #172033; font-size: 29rpx; font-weight: 700; }
.detail-link { color: #2563eb; font-size: 25rpx; }
.money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; margin-top: 22rpx; }
.money-grid view { min-width: 0; padding: 16rpx 8rpx; border-radius: 10rpx; background: #f1f5f9; text-align: center; }
.money-grid text, .money-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.money-grid text { color: #94a3b8; font-size: 20rpx; }.money-grid strong { margin-top: 8rpx; color: #334155; font-size: 21rpx; }
.delete { margin-top: 18rpx; color: #ef4444; font-size: 24rpx; text-align: right; }
.footer-space { height: 130rpx; }
.footer, .popup-footer { display: flex; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #fff; }
.footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; box-shadow: 0 -6rpx 20rpx rgba(15, 23, 42, .08); }
.footer button, .popup-footer button { flex: 1; height: 76rpx; margin: 0; line-height: 76rpx; font-size: 28rpx; border-radius: 14rpx; }
.cancel-btn { color: #475569; background: #eef2f7; }.save-btn { margin-left: 20rpx !important; color: #fff; background: #2563eb; }
.detail-popup { height: 90vh; display: flex; flex-direction: column; }
.popup-head { display: flex; align-items: center; justify-content: space-between; padding: 30rpx; color: #172033; font-size: 34rpx; font-weight: 700; background: #fff; }
.popup-scroll { flex: 1; height: 0; padding: 20rpx 22rpx 0; box-sizing: border-box; }
.popup-section-title { font-size: 29rpx; }
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18rpx; }
.suggestions { margin-top: 14rpx; white-space: nowrap; }
.suggestions text { display: inline-block; margin-right: 12rpx; padding: 10rpx 18rpx; color: #2563eb; font-size: 22rpx; border-radius: 999rpx; background: #eff6ff; }
.popup-bottom { height: 20rpx; }
button::after { border: 0; }
</style>