业务线小程序不用写死，从后端接口获取

王彪总
1 parent 3da5bb94
Showing 4 changed files with 246 additions and 143 deletions
pages-sub/daily/maintain-manage/finish-plan-detail.vue
pages-sub/daily/maintain-manage/index.vue
pages-sub/daily/maintain-manage/type-list-page.vue
pages-sub/daily/maintain-manage/type-list.vue
@@ -14,6 +14,10 @@
         <!-- 1. 计划名称：独立标题卡（设计稿顶部白卡） -->
         <view class="record-head">
           <view class="record-title">{{i.planName || '--'}}</view>
+          <!-- 按批次查看时一期次一条，用「第X次 + 上报状态」区分多次提交记录 -->
+          <view class="record-sub" v-if="i.sortNum">
+            第 {{ i.sortNum }} 次 · {{ commitStateText(i.commitState) }}
+          </view>
         </view>
         <!-- 工单详情内容 -->
         <view class="form-card">
@@ -95,56 +99,66 @@
             <view class="u-body-item-title">提交时间：</view>
             <view class="u-line-1 u-body-value">{{ i.createTime==null?'--':timeFormat(i.createTime,'yyyy-mm-dd hh:MM:ss') }}</view>
           </view>
+
+          <!-- 本次养护被置为失效时，把原因一并展示 -->
+          <view class="u-body-item u-flex" v-if="i.commitState === 3">
+            <view class="u-body-item-title">失效原因：</view>
+            <view class="u-line-1 u-body-value">{{ i.invalidReason || '--' }}</view>
+          </view>
         </view>
-        <!-- 动态配置的养护字段填报值（garden_work_record/garden_work_field_value），未填报过则整段不显示 -->
-       <!-- 动态配置的养护字段填报值（garden_work_record/garden_work_field_value），未填报过则整段不显示 -->
-<view
-    class="form-card"
-    v-if="i.fieldRows && i.fieldRows.length"
->
-  <!-- 区块标题：蓝色竖条 + 标题 -->
-  <view class="sec-head">
-    <view class="sec-bar"></view>
-    <view class="sec-title">养护填报内容</view>
-  </view>
-  <view class="u-body-item u-flex field-row" v-for="(f, fi) in i.fieldRows" :key="fi">
-    <view class="u-body-item-title field-cell-title-multi">{{ f.name }}</view>
-    <view class="field-value">
-      <!-- 7 图片：复用本页照片的相册组件（预览/尺寸一致） -->
-      <up-album
-          v-if="f.kind === 'image'"
-          :urls="f.images"
-          singleSize="60"
-          multipleSize="60"
-          :preview-full-image="true"
-      ></up-album>
-      <!-- 6 多选 / 3 历史多选 / 9 关联记录：标签平铺（自绘，避免引入未使用的组件） -->
-      <view v-else-if="f.kind === 'multi'" class="field-tags">
-        <view v-for="(t, ti) in f.tags" :key="ti" class="field-tag">{{ t.text }}</view>
-      </view>
-      <!-- 8 附件：点击下载后用系统应用打开 -->
-      <view v-else-if="f.kind === 'file'" class="field-tags">
-        <text
-            v-for="(file, ui) in f.files"
-            :key="ui"
-            class="field-file"
-            @click="openFile(file)"
-        >{{ file.name }}</text>
-      </view>
-      <!-- 10 链接：小程序不能直接打开外部 URL，点击复制 -->
-      <text v-else-if="f.kind === 'link'" class="field-link" @click="copyLink(f.text)">{{ f.text }}</text>
-      <!-- 11 地理位置：点击调微信原生地图（无需地图 AK） -->
-      <text v-else-if="f.kind === 'geo' && f.geo" class="field-link" @click="openGeo(f.geo)">{{ f.text }}</text>
-      <!-- 其余（1数值/2文本/3单选枚举/4日期/5布尔等）文本直出 -->
-      <text v-else class="common-text-color field-text">{{ f.text }}</text>
-    </view>
-  </view>
-</view>
-<!-- 当没有填报字段，提示暂无提交记录 -->
-<view v-else class="no-record-tip">
-  直接结束了本次任务
-</view>
+        <!-- 动态配置的养护字段填报值：每条子上报（garden_work_record）单独一张卡，不把多次提交的数据混在一起 -->
+        <template v-if="i.recordRows && i.recordRows.length">
+          <view class="form-card" v-for="(r, ri) in i.recordRows" :key="ri">
+            <!-- 区块标题：蓝色竖条 + 标题；多条时右侧标注第几条与上报时间 -->
+            <view class="sec-head">
+              <view class="sec-bar"></view>
+              <view class="sec-title">养护填报内容</view>
+              <!-- 按批次查看时每个期次都标「第几条 + 上报时间」，单条记录也标，避免和上一期次的卡片混读 -->
+              <text class="sec-count" v-if="i.recordRows.length > 1 || i.sortNum">
+                第 {{ ri + 1 }} 条 · {{ r.workTime == null ? '--' : timeFormat(r.workTime, 'yyyy-mm-dd hh:MM:ss') }}
+              </text>
+            </view>
+            <view class="u-body-item u-flex field-row" v-for="(f, fi) in r.fieldRows" :key="fi">
+              <view class="u-body-item-title field-cell-title-multi">{{ f.name }}</view>
+              <view class="field-value">
+                <!-- 7 图片：复用本页照片的相册组件（预览/尺寸一致） -->
+                <up-album
+                    v-if="f.kind === 'image'"
+                    :urls="f.images"
+                    singleSize="60"
+                    multipleSize="60"
+                    :preview-full-image="true"
+                ></up-album>
+                <!-- 6 多选 / 3 历史多选 / 9 关联记录：标签平铺（自绘，避免引入未使用的组件） -->
+                <view v-else-if="f.kind === 'multi'" class="field-tags">
+                  <view v-for="(t, ti) in f.tags" :key="ti" class="field-tag">{{ t.text }}</view>
+                </view>
+                <!-- 8 附件：点击下载后用系统应用打开 -->
+                <view v-else-if="f.kind === 'file'" class="field-tags">
+                  <text
+                      v-for="(file, ui) in f.files"
+                      :key="ui"
+                      class="field-file"
+                      @click="openFile(file)"
+                  >{{ file.name }}</text>
+                </view>
+                <!-- 10 链接：小程序不能直接打开外部 URL，点击复制 -->
+                <text v-else-if="f.kind === 'link'" class="field-link" @click="copyLink(f.text)">{{ f.text }}</text>
+                <!-- 11 地理位置：点击调微信原生地图（无需地图 AK） -->
+                <text v-else-if="f.kind === 'geo' && f.geo" class="field-link" @click="openGeo(f.geo)">{{ f.text }}</text>
+                <!-- 其余（1数值/2文本/3单选枚举/4日期/5布尔等）文本直出 -->
+                <text v-else class="common-text-color field-text">{{ f.text }}</text>
+              </view>
+            </view>
+            <!-- 该条上报没填字段时给个占位，避免出现一张空白卡 -->
+            <view class="no-field-tip" v-if="!r.fieldRows.length">本条未填写养护内容</view>
+          </view>
+        </template>
+        <!-- 当没有填报字段，提示暂无提交记录 -->
+        <view v-else class="no-record-tip">
+          {{ i.commitState === 3 ? '本次养护已置为失效，未填写养护内容' : '直接结束了本次任务' }}
+        </view>
       </view>
     </template>
@@ -195,18 +209,34 @@ const previewImage = (currentUrl, allUrls) =&gt; {
   });
 };
+/** 上报状态文案：1进行中/2已完成/3已失效 */
+const commitStateText = (state) => {
+  if (state === 1) return '进行中'
+  if (state === 2) return '已完成'
+  if (state === 3) return '已失效'
+  return '--'
+};
+
 /**
  * 获取工单详情
+ * 传 batchNo 时返回该批次下所有期次的上报记录（一次一条期次，多次提交要全部列出）；
+ * 只传 planNo 时仍按计划编码查单条，兼容原入口。
  */
-const getOrderDetail = async (planNo: string, commitId?: string) => {
+const getOrderDetail = async (planNo: string, commitId?: string, batchNo?: string) => {
   console.log('getOrderDetail')
   try {
     loading.value = true;
     let queryData: any = {
-      planNo: planNo,
       pageSize: commitId ? 1 : 100,
       pageNo: 1,
     };
+    // 计划编码 + 批次号同时带上：只查当前这一期次（planNo）的提交记录，批次号用于限定范围
+    if (planNo) {
+      queryData.planNo = planNo;
+    }
+    if (batchNo) {
+      queryData.batchNo = batchNo;
+    }
     if (commitId) {
       queryData.commitId = commitId;
     }
@@ -214,12 +244,25 @@ const getOrderDetail = async (planNo: string, commitId?: string) =&gt; {
     console.log('接口返回：', res);
     const list = res.data?.list || res.list || [];
+    // 按批次查看时按「第几次」正序，读起来和 App 列表一致
+    if (batchNo) {
+      list.sort((a, b) => Number(a.sortNum || 0) - Number(b.sortNum || 0));
+    }
+
     orderDetail.value = list.map(item => {
-      // ✅直接使用接口返回的 item.fields，不再读取 workRecords
+      // 一次养护可能有多次子上报（workRecords），每次上报有自己的字段值，逐条展示；
+      // 历史数据（双写上线前）没有 workRecords，退回用 item.fields 当唯一一条记录。
       const useValues = Array.isArray(item.fields) ? item.fields : []
+      const workRecords = Array.isArray(item.workRecords) && item.workRecords.length
+          ? item.workRecords
+          : [{ workTime: item.createTime, values: useValues }]
       return {
         ...item,
-        fieldRows: useValues.map(buildFieldRow)
+        // 每条子上报一行自己的字段渲染结果，模板里一条记录一张卡
+        recordRows: workRecords.map(record => ({
+          workTime: record?.workTime ?? item.createTime,
+          fieldRows: (Array.isArray(record?.values) ? record.values : []).map(buildFieldRow)
+        }))
       }
     })
   } catch (error) {
@@ -532,9 +575,9 @@ const openGeo = (geo) =&gt; {
   // const workRecordIndex = ref(0)
 // 页面加载
 onLoad((options) => {
-  const {planNo, commitId } = options;
-  if (planNo) {
-    getOrderDetail(planNo, commitId);
+  const {planNo, commitId, batchNo } = options;
+  if (planNo || batchNo) {
+    getOrderDetail(planNo, commitId, batchNo);
   } else {
     loading.value = false;
     uni.showToast({title: '缺少工单ID', icon: 'none'});
@@ -582,7 +625,9 @@ onLoad((options) =&gt; {
 // 计划名称标题卡：白底 / 8px 圆角 / 卡片阴影 / 32rpx 500（设计稿顶部卡）
 .record-head {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8rpx;
   margin: 0 24rpx 24rpx;
   padding: 24rpx;
   background: #ffffff;
@@ -590,6 +635,13 @@ onLoad((options) =&gt; {
   box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
 }
+// 标题卡副标题：第X次 + 上报状态
+.record-sub {
+  font-size: 26rpx;
+  color: #6B7280;
+  line-height: 1.4;
+}
+
 .record-title {
   flex: 1;
   min-width: 0;
@@ -625,6 +677,21 @@ onLoad((options) =&gt; {
   line-height: 1.4;
 }
+/* 区块标题右侧：多条上报时标注第几条 + 上报时间 */
+.sec-count {
+  margin-left: auto;
+  font-size: 24rpx;
+  color: #9CA3AF;
+  white-space: nowrap;
+}
+
+/* 某条子上报没填字段时的占位文案 */
+.no-field-tip {
+  font-size: 26rpx;
+  color: #9CA3AF;
+  padding: 8rpx 0;
+}
+
 // 图片容器样式
 .cell-content-wrap {
   //padding: 10rpx 0;
@@ -91,9 +91,6 @@
 <!--                </up-button>-->
 <!--              </view>-->
-              <view class="common-custom-btn" style="--btn-top: 48px;"  @click="goToDetail(item)">
-                养护任务
-              </view>
 <!--              <view class="u-body-item u-flex">-->
 <!--                <view class="u-body-item-title">批次号：</view>-->
 <!--                <view class="u-line-1 u-body-value">{{ item.batchNo || '-' }}</view>-->
@@ -14,14 +14,11 @@
         <view class="task-card" v-for="(item, index) in currentList" :key="`${item.planNo}_${index}`">
           <!-- 计划名称 -->
           <view class="card-head">
-            <view class="plan-name u-line-1">{{ item.planName || '无计划名称' }}</view>
-          </view>
-          <!-- 任务次数 -->
-          <view class="info-row">
-            <view class="info-label">任务次数</view>
-            <view class="info-value" v-if="activeStatus === '2'">完成 {{ item.planFinishNum }} 次</view>
-            <!-- 一次一条期次（planNum=1）时「第几次」取期次序号，历史多条次数的期次仍按完成次数递增 -->
-            <view class="info-value" v-else>第 {{ item.planNum === 1 ? (item.sortNum || 1) : (item.planFinishNum + 1) }} 次</view>
+            <view class="plan-name-wrap">
+              <view class="plan-name u-line-1">{{ item.planName || '无计划名称' }}</view>
+              <!-- 同一批次下多个期次的计划名称相同，必须显示计划编码才能区分 -->
+              <view class="plan-no u-line-1" v-if="item.planNo">计划编码：{{ item.planNo }}</view>
+            </view>
           </view>
           <!-- 有效期 -->
           <view class="info-row">
@@ -31,6 +28,16 @@
                 timeFormat(item.endTime, 'yyyy-mm-dd') }}
             </view>
           </view>
+          <!-- 任务次数 -->
+          <view class="info-row">
+            <view class="info-label">任务次数</view>
+            <!-- 已完成：一次一条期次时每个期次只完成 1 次，必须带上期次序号才能区分多次提交记录 -->
+            <view class="info-value" v-if="activeStatus === '2'">
+              有效期内第 {{ item.sortNum || 1 }} 个任务，共提交 {{ item.submitCount || 0 }} 次
+            </view>
+            <!-- 一次一条期次（planNum=1）时「第几次」取期次序号，历史多条次数的期次仍按完成次数递增 -->
+            <view class="info-value" v-else>第 {{ item.planNum === 1 ? (item.sortNum || 1) : (item.planFinishNum + 1) }} 次</view>
+          </view>
           <!-- 操作区：统一收底，与信息区用分隔线隔开 -->
           <view class="action-row">
             <!-- 待完成且一次都没上报过才允许置为失效；已有养护记录（进行中/已完成过）不再显示 -->
@@ -326,8 +333,11 @@ const handleGoWork = (item) =&gt; {
 }
 const handleGoWorkLook = (item) => {
   const isView = activeStatus.value
+  // 已完成：一次一条期次，传批次号让详情页把该批次所有期次的上报记录一起列出来；
+  // 已失效：只看向被置为失效的那一次，仍按计划编码查单条。
+  const batchParam = activeStatus.value === '2' && item.batchNo ? `&batchNo=${item.batchNo}` : ''
   uni.navigateTo({
-    url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${item.planNo}&planTypeId=${planTypeId.value}&businessType=${item.busiLine}&isView=${isView}`
+    url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${item.planNo}&planTypeId=${planTypeId.value}&businessType=${item.busiLine}&isView=${isView}${batchParam}`
   })
 }
 const handleEndTask = async (item) => {
@@ -408,22 +418,31 @@ onUnload(() =&gt; {
   display: flex;
   align-items: center;
   gap: 16rpx;
-  margin-bottom: 16rpx;
+  /* 与 .plan-no / .info-row 的间距保持一致，卡内文字行上下距离统一 */
+  margin-bottom: 8rpx;
 }
-.plan-name {
+.plan-name-wrap {
   flex: 1;
   min-width: 0;
+}
+.plan-name {
   font-size: 32rpx;
   color: #1F2937;
   font-weight: 500;
   line-height: 1.4;
 }
+.plan-no {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #9CA3AF;
+  line-height: 1.4;
+}
 .info-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16rpx;
-  margin-bottom: 6rpx;
+  margin-bottom: 8rpx;
 }
 .info-label {
   font-size: 26rpx;
 <template>
     <view class="type-grid">
-        <!-- 动态渲染养护类型卡片 -->
-        <template v-if="tagList.length > 0">
-            <view class="type-card" v-for="(item, idx) in tagList" :key="idx" hover-class="type-card--hover"
+        <!-- 按养护类型渲染计划卡片：同一类型下多个批次合并成一张卡，批次号/计划名称等每项一行，多批次时逐行列出 -->
+        <template v-if="cardList.length > 0">
+            <view class="type-card" v-for="item in cardList" :key="item.key" hover-class="type-card--hover"
                 @click="toNextPage(item)">
-                <!-- 类型图标：取类型名称首字，底色淡蓝 -->
-                <view class="type-icon">{{ (item.planTypeName || '养护').charAt(0) }}</view>
-                <view class="type-name">{{ item.planTypeName }}</view>
-                <view class="type-foot">
-                    <text class="type-foot-label">待完成任务</text>
-                    <text class="type-count">{{ item.todayPendingCount }}</text>
+                <view class="info-row" v-for="row in item.rows" :key="row.label">
+                    <text class="info-label">{{ row.label }}：</text>
+                    <view class="info-value">
+                        <view class="info-line" v-for="(value, idx) in row.values" :key="idx"
+                            :class="{ 'info-line--count': row.label === '待完成任务' }">{{ value }}</view>
+                    </view>
                 </view>
             </view>
         </template>
@@ -20,15 +20,32 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
+import { onShow, onUnload } from '@dcloudio/uni-app';
-const tagList = ref<Array<{
+const cardList = ref<Array<{
+    key: string
     planTypeId: string | number
-    planTypeName: string
     batchNos: string[]
-    todayPendingCount: number
+    rows: Array<{ label: string; values: string[] }>
 }>>([])
+/** 日期字段可能是 'yyyy-MM-dd' 字符串（LocalDate）或时间戳，统一转成 yyyy-MM-dd */
+const formatDate = (value: any) => {
+    if (value === null || value === undefined || value === '') return '--'
+    if (Array.isArray(value)) {
+        return `${value[0]}-${String(value[1]).padStart(2, '0')}-${String(value[2]).padStart(2, '0')}`
+    }
+    if (typeof value === 'number') {
+        const d = new Date(value)
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+    }
+    // 'yyyy-MM-dd HH:mm:ss' 之类的字符串只取日期部分
+    return String(value).slice(0, 10)
+}
+
+/** 去重并保持原顺序，合并卡片时避免同一个值重复占一行 */
+const uniq = (list: any[]) => Array.from(new Set(list.filter(v => v !== null && v !== undefined && v !== '')))
+
 onShow(() => {
     // 从storage拿上一页传过来完整对象
     const item = uni.getStorageSync('temp_maintain_item')
@@ -37,15 +54,43 @@ onShow(() =&gt; {
             title: '数据异常，请返回重试',
             icon: 'none'
         });
-        return;
+        return
     }
-    // 直接取planTypes
-    tagList.value = item.planTypes || []
+    const roadName = item.roadName || '--'
+    // 接口已按养护类型分组，同一类型下的多个批次在这里合并成一张卡
+    cardList.value = (item.planTypes || []).map((type: any) => {
+        const batches = Array.isArray(type.batches) && type.batches.length
+            ? type.batches
+            : (type.batchNos || []).map((batchNo: string) => ({
+                batchNo,
+                planName: '',
+                beginTime: null,
+                endTime: null,
+                todayPendingCount: type.todayPendingCount
+            }))
+        const batchNos = batches.map((batch: any) => batch.batchNo).filter(Boolean)
+        const pendingCount = batches.reduce((sum: number, batch: any) => sum + Number(batch.todayPendingCount || 0), 0)
+        return {
+            key: String(type.planTypeId),
+            planTypeId: type.planTypeId,
+            batchNos,
+            rows: [
+                { label: '批次号', values: batchNos.length ? batchNos : ['--'] },
+                { label: '计划名称', values: uniq(batches.map((batch: any) => batch.planName)).length
+                        ? uniq(batches.map((batch: any) => batch.planName)) : ['--'] },
+                { label: '道路名称', values: [roadName] },
+                { label: '计划类型', values: [type.planTypeName || '--'] },
+                { label: '执行时间', values: uniq(batches.map((batch: any) =>
+                        `${formatDate(batch.beginTime)} - ${formatDate(batch.endTime)}`)) },
+                { label: '待完成任务', values: [`${pendingCount}次`] }
+            ]
+        }
+    })
 });
-// 标签点击跳转，batchNos存入storage，并且把planTypeId拼到url传给下一页
+// 点击卡片跳到期次列表，把该类型下所有批次号一起带过去
 const toNextPage = (item: any) => {
-    uni.setStorageSync('temp_maintain_rawList', item.batchNos)
+    uni.setStorageSync('temp_maintain_rawList', item.batchNos || [])
     uni.navigateTo({
         url: `/pages-sub/daily/maintain-manage/type-list-page?planTypeId=${item.planTypeId}`
     })
@@ -57,15 +102,15 @@ onUnload(()=&gt;{
 })
 </script>
 <style scoped lang="scss">
-/* 两列卡片栅格：页面 24rpx 内边距，卡片间距 16rpx（设计稿 .type-grid） */
+/* 卡片列表：页面 24rpx 内边距，卡片间距 16rpx */
 .type-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
     gap: 16rpx;
     padding: 24rpx;
 }
-/* 卡片：12px 内边距 / 8px 圆角 / 8rpx 内部行距（设计稿 .type-card） */
+/* 卡片：一张卡对应一个养护类型（多批次合并），撑满一行 */
 .type-card {
     display: flex;
     flex-direction: column;
@@ -82,69 +127,44 @@ onUnload(()=&gt;{
     }
 }
-/* 类型图标位：68rpx 方块 + 淡蓝底（设计稿 .type-ico） */
-.type-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 68rpx;
-    height: 68rpx;
-    background: #EBF3FF;
-    border-radius: 8rpx;
-    font-size: 30rpx;
-    font-weight: 600;
-    color: #2563EB;
-    line-height: 1;
-}
-
-/* 类型名称：14px / 500（设计稿 .type-card 标题） */
-.type-name {
-    font-size: 28rpx;
-    font-weight: 500;
-    color: #1F2937;
-    line-height: 1.4;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-/* 底部统计行：左侧说明 11px 浅灰，右侧数量标签（设计稿 .type-meta） */
-.type-foot {
+/* 信息行：左侧字段名浅灰，右侧值右对齐；多个批次时值逐行显示 */
+.info-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
-    margin-top: auto;
-    font-size: 22rpx;
-    color: #9CA3AF;
+    gap: 16rpx;
 }
-.type-foot-label {
-    font-size: 22rpx;
+.info-label {
+    flex-shrink: 0;
+    font-size: 26rpx;
     color: #9CA3AF;
     line-height: 1.5;
 }
-/* 数量标签：灰底胶囊（设计稿 .tag.gray） */
-.type-count {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    height: 40rpx;
-    padding: 0 16rpx;
-    background: #F4F6FA;
-    border-radius: 8rpx;
-    font-size: 22rpx;
-    font-weight: 500;
+.info-value {
+    flex: 1;
+    min-width: 0;
+    text-align: right;
+}
+
+.info-line {
+    font-size: 26rpx;
     color: #4B5563;
-    line-height: 1;
+    line-height: 1.5;
+    word-break: break-all;
+
+    /* 待完成次数加重，便于一眼看到 */
+    &--count {
+        color: #2563EB;
+        font-weight: 500;
+    }
 }
-/* 空状态 */
 .type-empty {
-    grid-column: 1 / -1;
-    padding-top: 60rpx;
+    padding: 120rpx 0;
+    text-align: center;
     font-size: 26rpx;
     color: #9CA3AF;
-    text-align: center;
 }
 </style>