feat(delivery): 新增普通订单详情查看功能

- 添加获取快递订单详情接口 `fetchGetNomalOrderInfo`
- 在订单列表页增加“查看订单”按钮，点击弹出订单详情模态框
- 新建组件 `normal-moadl.vue` 展示订单详情，包括：
  - 订单状态流程展示（步骤条）
  - 收货人、配送、付款、买家等信息描述列表
  - 商品明细表格与费用信息表格
  - 倒计时自动关闭未支付订单功能
- 扩展类型定义文件：
  - `api.d.ts` 中新增字段 `offsetPoints`
  - `components.d.ts` 中引入多个 Naive UI 表格相关组件类型
- 更新首页内容，替换为欢迎页面并引用新图片资源 `index.png`
- 优化订单搜索表单及逻辑，支持更多筛选条件和时间范围选择

src/service/api/delivery/normal-orde/index.ts

@@ -23,3 +23,15 @@ export function fetchGetDeliveryStatusNum() {
     method: 'get'
   });
 }
+
+/**
+ * 获取快递订单详情
+ * @param orderNumber
+ * @returns
+ */
+export function fetchGetNomalOrderInfo(orderNumber: string) {
+  return request<Api.delivery.deliveryOrder>({
+    url: `/platform/order/orderInfo/${orderNumber}`,
+    method: 'get'
+  });
+}

src/typings/api.d.ts

@@ -963,6 +963,9 @@ declare namespace Api {
        * 买家名称
        */
       nickName?: string;
+      /**
+       * 积分
+       */
       offsetPoints?: number;
       /**
        * 订单ID

src/typings/components.d.ts

@@ -67,6 +67,7 @@ declare module 'vue' {
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NCountdown: typeof import('naive-ui')['NCountdown']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
@@ -83,7 +84,6 @@ declare module 'vue' {
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -103,17 +103,21 @@ declare module 'vue' {
     NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
-    NStatistic: typeof import('naive-ui')['NStatistic']
     NStep: typeof import('naive-ui')['NStep']
     NSteps: typeof import('naive-ui')['NSteps']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
-    NTabpane: typeof import('naive-ui')['NTabpane']
+    NTable: typeof import('naive-ui')['NTable']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NTbody: typeof import('naive-ui')['NTbody']
+    NTd: typeof import('naive-ui')['NTd']
     NText: typeof import('naive-ui')['NText']
+    NTh: typeof import('naive-ui')['NTh']
+    NThead: typeof import('naive-ui')['NThead']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NTr: typeof import('naive-ui')['NTr']
     NTree: typeof import('naive-ui')['NTree']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     NUpload: typeof import('naive-ui')['NUpload']

src/views/delivery/normal-order/component/normal-moadl.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import dayjs from 'dayjs';
+import { fetchGetNomalOrderInfo } from '@/service/api/delivery/normal-orde';
+import { useAppStore } from '@/store/modules/app';
+import { useModal } from '@/components/zt/Modal/hooks/useModal';
+import { closeStatus, dvyStatus, orderColumns, orderStatusEnum } from '../normal-order';
+const [registerModal, { openModal, setModalLoading }] = useModal({
+  title: '订单详情',
+  isShowHeaderText: false,
+  showFooter: false,
+  width: 1200,
+  height: 800
+});
+const orderInfo = ref<Api.delivery.deliveryOrder>();
+const appStore = useAppStore();
+const TimeDown = ref<number>(0);
+const emit = defineEmits<{
+  (e: 'finish'): void;
+}>();
+async function open(orderNumber: string) {
+  openModal();
+  setModalLoading(true);
+  const { data, error } = await fetchGetNomalOrderInfo(orderNumber);
+  if (!error) {
+    orderInfo.value = data;
+    if (orderInfo.value.hbLogisticStatus == orderStatusEnum.WAIT_PAY) {
+      const createTime = dayjs(orderInfo.value.createTime);
+      const currentTime = dayjs();
+      const elapsed = currentTime.diff(createTime);
+      const fifteenMinutesInMillis = 15 * 60 * 1000;
+      TimeDown.value = fifteenMinutesInMillis - elapsed;
+    }
+  }
+  setModalLoading(false);
+}
+defineExpose({ open });
+function handleFinish() {
+  open(String(orderInfo.value?.orderNumber));
+  emit('finish');
+}
+
+const currentSteps = computed(() => {
+  switch (orderInfo.value?.hbOrderStatus) {
+    case orderStatusEnum.WAIT_PAY:
+      return 1;
+    case orderStatusEnum.ORDER_ACCEPT:
+      return 2;
+    case orderStatusEnum.ORDER_WAIT_DELIVERY:
+      return 2;
+    case orderStatusEnum.WAIT_DELIVERY:
+      return 2;
+    case orderStatusEnum.ORDER_ARRIVE:
+      return 3;
+    case orderStatusEnum.ORDER_COMPLETE:
+      return 4;
+
+    default:
+      return 1;
+  }
+});
+</script>
+
+<template>
+  <BasicModal @register="registerModal">
+    <div v-if="orderInfo">
+      <NFlex justify="space-between" align="center">
+        <NFlex>
+          <NTag>订单编号: {{ orderInfo?.orderNumber }}</NTag>
+          <NTag>下单时间: {{ orderInfo?.createTime }}</NTag>
+        </NFlex>
+        <NFlex vertical>
+          <template v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY">
+            <div class="text-16px font-semibold">商品已拍下,等待买家付款</div>
+            <div class="text-gray">
+              如买家未在
+              <NTag :type="TimeDown > 300094 ? 'success' : 'error'">
+                <NCountdown :duration="TimeDown" @finish="handleFinish" />
+              </NTag>
+              内付款，订单将 自动关闭。
+            </div>
+          </template>
+          <template v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_DELIVERY">
+            <div class="text-16px font-semibold">等待商家发货</div>
+            <NButton>发货</NButton>
+          </template>
+          <template v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_ARRIVE">
+            <div class="text-16px font-semibold">等待买家收货</div>
+            <div>商家已发货，等待确认收货</div>
+          </template>
+          <template v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL">
+            <div class="text-16px font-semibold">已取消</div>
+            <div>取消原因：{{ closeStatus[orderInfo.closeType as keyof typeof closeStatus] || '未知取消原因' }}</div>
+          </template>
+          <template v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_COMPLETE">
+            <div class="text-16px font-semibold">交易成功</div>
+            <div>买家已收货</div>
+          </template>
+        </NFlex>
+      </NFlex>
+      <NDivider />
+      <template v-if="orderInfo.hbOrderStatus != orderStatusEnum.ORDER_CANCEL">
+        <NScrollbar x-scrollable>
+          <div class="p3">
+            <NSteps :current="currentSteps">
+              <NStep title="用户下单" :description="orderInfo.createTime" />
+              <NStep title="买家已付款" :description="orderInfo.payTime" />
+              <NStep title="卖家已发货" :description="orderInfo.dvyTime" />
+              <NStep title="买家已收货" :description="orderInfo.finallyTime" />
+            </NSteps>
+          </div>
+        </NScrollbar>
+        <NDivider />
+      </template>
+      <NDescriptions bordered :column="appStore.isMobile ? 1 : 4">
+        <NDescriptionsItem label="收货人信息">
+          <div>收货人姓名：{{ orderInfo?.userAddrOrder?.receiver || '---' }}</div>
+          <div>收货人手机号：{{ orderInfo?.userAddrOrder?.mobile || '---' }}</div>
+          <div>收货地址：{{ orderInfo?.userAddrOrder?.address || '---' }}</div>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="配送信息">
+          <div>配送方式: {{ dvyStatus[orderInfo.dvyType as keyof typeof dvyStatus] || '暂无' }}</div>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="付款信息">
+          <div>实付金额：{{ orderInfo.actualTotal }}元</div>
+          <div>
+            付款方式：{{
+              orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY ||
+              orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL
+                ? '暂无'
+                : '微信'
+            }}
+          </div>
+          <div>付款时间：{{ orderInfo.payTime || '暂无' }}</div>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="买家信息">
+          <div>买家昵称：{{ orderInfo?.userInfo?.nickName || '---' }}</div>
+          <div>买家电话：{{ orderInfo?.userInfo?.mobile || '---' }}</div>
+          <div>买家留言：{{ orderInfo?.userInfo?.message || '暂无' }}</div>
+        </NDescriptionsItem>
+      </NDescriptions>
+      <NDivider />
+      <NCard title="订单信息" :bordered="false">
+        <NDataTable :columns="orderColumns" :data="orderInfo.orderItems" :bordered="false" />
+      </NCard>
+      <NCard title="费用信息" :bordered="false">
+        <NTable :single-line="false">
+          <NThead>
+            <NTr>
+              <NTh>费用类型</NTh>
+              <NTh>金额/元</NTh>
+            </NTr>
+          </NThead>
+          <NTbody>
+            <NTr>
+              <NTd>商品总额</NTd>
+              <NTd>{{ orderInfo.actualTotal }}</NTd>
+            </NTr>
+            <NTr>
+              <NTd>配送费（快递）</NTd>
+              <NTd>{{ orderInfo.freightAmount }}</NTd>
+            </NTr>
+            <NTr>
+              <NTd>积分</NTd>
+              <NTd>{{ orderInfo.offsetPoints }}</NTd>
+            </NTr>
+            <NTr>
+              <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY">需付款</NTd>
+              <NTd
+                v-if="
+                  orderInfo.hbOrderStatus != orderStatusEnum.WAIT_PAY &&
+                  orderInfo.hbOrderStatus != orderStatusEnum.ORDER_CANCEL
+                "
+              >
+                实际付款
+              </NTd>
+              <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL">应付款</NTd>
+              <NTd>{{ orderInfo.actualTotal }}</NTd>
+            </NTr>
+          </NTbody>
+        </NTable>
+      </NCard>
+    </div>
+  </BasicModal>
+</template>
+
+<style scoped></style>

src/views/delivery/normal-order/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { nextTick, onMounted, reactive, ref, unref, useTemplateRef, watch } from 'vue';
 import type { TabsInst } from 'naive-ui';
 import { NImage, NTag } from 'naive-ui';
 import { fetchGetDeliveryOrderList, fetchGetDeliveryStatusNum } from '@/service/api/delivery/normal-orde';
@@ -8,12 +8,13 @@ import { defaultTransform, useNaivePaginatedTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import { useForm } from '@/components/zt/Form/hooks/useForm';
 import { SearchForm, orderStatus, refundStatus } from './normal-order';
+import NormalMoadl from './component/normal-moadl.vue';
 const appStore = useAppStore();
 const checkedRowKeys = ref([]);
 const activeTab = ref('all');
 const statusList = ref<{ label: string; value: string; num?: number }[]>([]);
-const wrapperRef = ref<HTMLElement | null>(null);
 const tabsInstRef = ref<TabsInst | null>(null);
+const orderMoadl = useTemplateRef('orderMoadl');
 onMounted(() => {
   nextTick(() => {
     tabsInstRef.value?.syncBarPosition();
@@ -31,12 +32,13 @@ const [registerSearchForm, { getFieldsValue }] = useForm({
   },
   collapsedRows: 1
 });
+const searchForm = ref();
 const searchParams = reactive({
   current: 1,
   size: 10
 });
 const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedTable({
-  api: () => fetchGetDeliveryOrderList({ ...searchParams, orderStatus: activeTab.value, ...getFieldsValue() }),
+  api: () => fetchGetDeliveryOrderList({ ...searchParams, orderStatus: activeTab.value, ...unref(searchForm) }),
   transform: response => defaultTransform(response),
   onPaginationParamsChange: params => {
     searchParams.current = Number(params.page);
@@ -151,11 +153,26 @@ const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedT
       title: $t('common.operate'),
       align: 'center',
       width: 130,
-      fixed: 'right'
+      fixed: 'right',
+      render: row => {
+        return (
+          <div class={'mt7'}>
+            <n-button size="small" type="primary" quaternary onClick={() => handleOpenMoadl(row)}>
+              查看订单
+            </n-button>
+          </div>
+        );
+      }
     }
   ]
 });
-
+function handleOpenMoadl(row: Api.delivery.deliveryOrder) {
+  if (!row.orderNumber) {
+    window.$message?.error('订单异常');
+    return;
+  }
+  orderMoadl.value?.open(String(row.orderNumber));
+}
 async function getNums() {
   const { data: keyData } = await fetchGetDeliveryStatusNum();
   if (!keyData) return;
@@ -202,17 +219,32 @@ getNums();
 watch(
   () => [activeTab.value],
   () => {
+    searchParams.current = 1;
     getData();
   }
 );
+function handleSearch() {
+  const form = getFieldsValue();
+  if (form.createTime) {
+    form.startTime = form.createTime[0];
+    form.endTime = form.createTime[1];
+    delete form.createTime;
+  }
+  searchForm.value = form;
+  getData();
+}
+function handleReset() {
+  searchForm.value = getFieldsValue();
+  getData();
+}
 </script>
 
 <template>
-  <div ref="wrapperRef" class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <NCard :bordered="false" size="small">
-      <NCollapse display-directive="show" :default-expanded-names="['dept-search']">
-        <NCollapseItem title="搜索" name="dept-search">
-          <BasicForm @register-form="registerSearchForm" />
+      <NCollapse display-directive="show">
+        <NCollapseItem title="搜索">
+          <BasicForm @register-form="registerSearchForm" @submit="handleSearch" @reset="handleReset" />
         </NCollapseItem>
       </NCollapse>
     </NCard>
@@ -240,8 +272,7 @@ watch(
           />
         </NTabPane>
       </NTabs>
-
-      <!-- <BasicModal @register="registerModal" @ok="handleSubmit"></BasicModal> -->
+      <NormalMoadl ref="orderMoadl" @finish="(getData, getNums)"></NormalMoadl>
     </NCard>
   </div>
 </template>

src/views/delivery/normal-order/normal-order.ts

@@ -1,3 +1,5 @@
+import { h } from 'vue';
+import { NFlex, NImage, NTag } from 'naive-ui';
 import { fetchGetAllStoreList } from '@/service/api/goods/desk-category';
 import type { FormSchema } from '@/components/zt/Form/types/form';
 
@@ -11,23 +13,111 @@ export const SearchForm: FormSchema[] = [
       labelFeild: 'shopName',
       valueFeild: 'shopId'
     }
+  },
+  {
+    label: '订单编号',
+    component: 'NInput',
+    field: 'orderNumber'
+  },
+  {
+    label: '收货人姓名',
+    component: 'NInput',
+    field: 'receiver'
+  },
+  {
+    label: '收货人手机号',
+    component: 'NInput',
+    field: 'userMobile'
+  },
+  {
+    label: '售后状态',
+    component: 'NSelect',
+    field: 'refundStatus',
+    componentProps: {
+      options: [
+        {
+          label: '申请退款',
+          value: 1
+        },
+        {
+          label: '退款成功',
+          value: 2
+        },
+        {
+          label: '部分退款成功',
+          value: 3
+        },
+        {
+          label: '退款失败',
+          value: 4
+        }
+      ]
+    }
+  },
+  {
+    label: '下单时间',
+    component: 'NDatePicker',
+    field: 'createTime',
+    componentProps: {
+      type: 'datetimerange'
+    }
   }
 ];
 
+export enum orderStatusEnum {
+  /**
+   *
+   *  待支付
+   */
+  WAIT_PAY = 0,
+  /**
+   * 待发货
+   */
+  WAIT_DELIVERY = 1,
+  /**
+   * 订单已接单(待拣货)
+   */
+  ORDER_ACCEPT = 20,
+  /**
+   * 订单待配送（拣货完成/自提类订单为待自提）
+   */
+  ORDER_WAIT_DELIVERY = 30,
+  /**
+   * 订单配送中
+   */
+  ORDER_DELIVERY = 40,
+  /**
+   * 订单取消待审核
+   */
+  ORDER_CANCEL_WAIT_AUDIT = 50,
+  /**
+   * 订单已取消
+   */
+  ORDER_CANCEL = 60,
+  /**
+   * 订单已送达
+   */
+  ORDER_ARRIVE = 70,
+  /**
+   * 订单已完成
+   */
+  ORDER_COMPLETE = 80
+}
+
 /**
  *  // 0-待支付 1-待发货，20-订单已接单(待拣货),30-订单待配送（拣货完成/自提类订单为待自提）,40-订单配送中
         // ,50-订单取消待审核,60-订单已取消,70-订单已送达,80-订单已完成
  */
 export const orderStatus = {
-  0: '待支付',
-  1: '待发货',
-  20: '订单已接单(待拣货)',
-  30: '订单待配送（拣货完成/自提类订单为待自提）',
-  40: '订单配送中',
-  50: '订单取消待审核',
-  60: '订单已取消',
-  70: '订单已送达',
-  80: '订单已完成'
+  [orderStatusEnum.WAIT_PAY]: '待支付',
+  [orderStatusEnum.WAIT_DELIVERY]: '待发货',
+  [orderStatusEnum.ORDER_ACCEPT]: '订单已接单(待拣货)',
+  [orderStatusEnum.ORDER_WAIT_DELIVERY]: '订单待配送（拣货完成/自提类订单为待自提）',
+  [orderStatusEnum.ORDER_DELIVERY]: '订单配送中',
+  [orderStatusEnum.ORDER_CANCEL_WAIT_AUDIT]: '订单取消待审核',
+  [orderStatusEnum.ORDER_CANCEL]: '订单已取消',
+  [orderStatusEnum.ORDER_ARRIVE]: '订单已送达',
+  [orderStatusEnum.ORDER_COMPLETE]: '订单已完成'
 };
 
 /**
@@ -41,3 +131,63 @@ export const refundStatus = {
   3: '部分退款成功',
   4: '退款失败'
 };
+/**
+ *
+ * 配送方式
+ */
+
+export const dvyStatus = {
+  1: '快递',
+  2: '自提',
+  3: '及时配送'
+};
+
+export const closeStatus = {
+  1: '超时未支付',
+  2: '退款关闭',
+  3: '买家取消',
+  4: '已通过货到付款交易'
+};
+
+export const orderColumns: NaiveUI.TableColumn<Api.delivery.OrderItemElement>[] = [
+  {
+    title: '商品',
+    key: 'goods',
+    width: 200,
+    render: row => {
+      const goodsNodes = [
+        h(NImage, { src: row.pic, width: 80, height: 80 }),
+        h('div', { class: 'ml-2 ' }, [
+          h('div', { class: 'text-15px font-semibold' }, row.skuName),
+          h('div', { class: 'text-gray' }, `规格：${'--'}`)
+        ])
+      ];
+      return h('div', { class: 'flex items-center' }, goodsNodes);
+    }
+  },
+  {
+    title: '单价（元）',
+    key: 'price',
+    width: 100
+  },
+  {
+    title: '数量',
+    key: 'prodCount',
+    width: 100,
+    render: row => {
+      const nodes = [h('div', { class: 'mr-2' }, row.prodCount)];
+      if (row.refundIngCount) {
+        nodes.push(h(NTag, { class: 'ml2' }, `售后处理：${row.refundIngCount}`));
+      }
+      if (row.refundSuccessCount) {
+        nodes.push(h(NTag, { class: 'ml2', type: 'success' }, `退款成功：${row.refundSuccessCount}`));
+      }
+      return h(NFlex, { align: 'center' }, nodes);
+    }
+  },
+  {
+    title: '小计/元',
+    key: 'productTotalAmount',
+    width: 100
+  }
+];

src/views/home/index.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
-import HeaderBanner from './modules/header-banner.vue';
-import CardData from './modules/card-data.vue';
-import LineChart from './modules/line-chart.vue';
-import PieChart from './modules/pie-chart.vue';
-// import ProjectNews from './modules/project-news.vue';
-// import CreativityBanner from './modules/creativity-banner.vue';
+// import { computed } from 'vue';
+// import { useAppStore } from '@/store/modules/app';
+// import HeaderBanner from './modules/header-banner.vue';
+// import CardData from './modules/card-data.vue';
+// import LineChart from './modules/line-chart.vue';
+// import PieChart from './modules/pie-chart.vue';
+// // import ProjectNews from './modules/project-news.vue';
+// // import CreativityBanner from './modules/creativity-banner.vue';
 
-const appStore = useAppStore();
+// const appStore = useAppStore();
 
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
+// const gap = computed(() => (appStore.isMobile ? 0 : 16));
 </script>
 
 <template>
-  <NSpace vertical :size="16">
+  <!--
+ <NSpace vertical :size="16">
     <HeaderBanner />
     <CardData />
     <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
@@ -29,7 +30,8 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
         </NCard>
       </NGi>
     </NGrid>
-    <!--
+-->
+  <!--
  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
       <NGi span="24 s:24 m:14">
         <ProjectNews />
@@ -39,7 +41,21 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
       </NGi>
     </NGrid>
 -->
-  </NSpace>
+
+  <!-- </NSpace> -->
+  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <NCard :bordered="false" class="flex-1 card-wrapper bg-white sm:flex-1-hidden" size="small">
+      <div class="h-full w-full flex items-center justify-center">
+        <div class="flex items-center">
+          <img src="@/assets/imgs/index.png" alt="" class="h300px w300px" />
+          <div class="ml3">
+            <div class="text-32px font-semibold">欢迎使用</div>
+            <div class="mt18px">使用过程种，有任何建议和意见请及时反馈！</div>
+          </div>
+        </div>
+      </div>
+    </NCard>
+  </div>
 </template>
 
 <style scoped></style>