vue2-client 1.15.87 → 1.15.88

package/src/base-client/components/his/XHDescriptions/XHDescriptions.vue

@@ -1,430 +1,430 @@
-<template>
-  <div class="patient-info-descriptions">
-    <div class="descriptions-container">
-      <!-- 详情/收起按钮 -->
-      <div v-if="hasMoreItems" class="detail-button-wrapper">
-        <a-button
-          :type="config?.detailsConfig?.buttonType || 'link'"
-          @click="toggleDetails"
-        >
-          <a-icon :type="showAllItems ? 'up' : 'down'" />
-          {{ showAllItems ? '收起' : (config?.detailsConfig?.buttonText || '详情') }}
-        </a-button>
-      </div>
-
-      <!-- 当有 layout 配置时使用 a-descriptions -->
-      <template v-if="config?.layout">
-        <a-descriptions
-          :column="config.layout"
-          :size="config?.style?.size"
-          :bordered="config?.style?.bordered"
-          layout="horizontal">
-          <template v-if="data">
-            <!-- 显示前N个标签 -->
-            <a-descriptions-item
-              v-for="(item) in visibleItems"
-              :key="item.field"
-              :colon="item.colon !== false"
-              :class="{ 'with-divider': item.isLine }"
-              v-if="data[item.field] !== null && data[item.field] !== undefined && (!showAllItems || showAllItems && !hiddenItems.some(i => i.field === item.field))">
-              <template #label>
-                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                  <a-avatar
-                    v-if="item.showAvatar"
-                    :size="item.avatar.size"
-                    :icon="item.avatar.icon"
-                    :style="{ background: item.avatar.background }"
-                  />
-                  <span class="label-text">{{ item.label }}</span>
-                </div>
-              </template>
-              <div class="content-wrapper">
-                {{ data[item.field] }}
-              </div>
-            </a-descriptions-item>
-
-            <!-- 展开后显示剩余标签 -->
-            <template v-if="showAllItems">
-              <a-descriptions-item
-                v-for="item in hiddenItems"
-                :key="item.field"
-                :colon="item.colon !== false"
-                v-if="data[item.field] !== null && data[item.field] !== undefined">
-                <template #label>
-                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                    <a-avatar
-                      v-if="item.showAvatar"
-                      :size="item.avatar.size"
-                      :icon="item.avatar.icon"
-                      :style="{ background: item.avatar.background }"
-                    />
-                    <span class="label-text">{{ item.label }}</span>
-                  </div>
-                </template>
-                <div class="content-wrapper">
-                  {{ data[item.field] }}
-                </div>
-              </a-descriptions-item>
-            </template>
-          </template>
-        </a-descriptions>
-      </template>
-
-      <!-- 当没有 layout 配置时使用自适应布局 -->
-      <template v-else>
-        <div class="flex-descriptions">
-          <template v-if="data">
-            <!-- 显示可见的标签 -->
-            <div
-              v-for="(item) in visibleItems"
-              :key="item.field"
-              :class="['description-item', { 'with-divider': item.isLine }]"
-              v-if="data[item.field] !== null && data[item.field] !== undefined"
-            >
-              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                <a-avatar
-                  v-if="item.showAvatar"
-                  :size="item.avatar.size"
-                  :icon="item.avatar.icon"
-                  :style="{ background: item.avatar.background }"
-                />
-                <span class="label-text">{{ item.label }}：</span>
-              </div>
-              <div class="content-wrapper">
-                {{ data[item.field] }}
-              </div>
-            </div>
-
-            <!-- 展开后显示的内容 -->
-            <template v-if="showAllItems">
-              <div
-                v-for="item in hiddenItems"
-                :key="item.field"
-                class="description-item"
-                v-if="data[item.field] !== null && data[item.field] !== undefined"
-              >
-                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                  <a-avatar
-                    v-if="item.showAvatar"
-                    :size="item.avatar.size"
-                    :icon="item.avatar.icon"
-                    :style="{ background: item.avatar.background }"
-                  />
-                  <span class="label-text">{{ item.label }}：</span>
-                </div>
-                <div class="content-wrapper">
-                  {{ data[item.field] }}
-                </div>
-              </div>
-            </template>
-          </template>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XHDescriptions',
-  data () {
-    return {
-      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
-      hiddenConfig: '-1^',
-      data: null,
-      config: null,
-      showAllItems: false // 控制是否显示所有标签
-    }
-  },
-  props: {
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    parameter: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  computed: {
-    // 获取详情按钮应该显示在第几个标签后
-    detailsAfterIndex () {
-      return this.config?.detailsConfig?.showAfterIndex || 999
-    },
-    // 判断是否有更多标签需要显示
-    hasMoreItems () {
-      if (!this.config?.detailsConfig) return false
-      if (!this.data || !this.config?.items || !Array.isArray(this.config.items)) return false
-      const hiddenStartIndex = this.detailsAfterIndex || 0
-      if (hiddenStartIndex >= this.config.items.length) return false
-      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
-        const item = this.config.items[i]
-        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
-          return true
-        }
-      }
-      return false
-    },
-    // 获取应该显示的标签
-    visibleItems () {
-      if (!this.config?.items) return []
-      if (!this.config?.detailsConfig) return this.config.items
-      if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
-      return this.config.items.slice(0, this.detailsAfterIndex)
-    },
-    // 获取隐藏的标签（保持原有逻辑）
-    hiddenItems () {
-      if (!this.config?.items) return []
-      if (!this.config?.detailsConfig) return []
-      return this.config.items.slice(this.detailsAfterIndex)
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName, {})
-  },
-  methods: {
-    async getData (data, parameterData) {
-      this.data = null
-      this.showAllItems = false
-      getConfigByName(data, 'af-his', res => {
-        this.config = res
-        const hiddenConfig = this.config?.hiddenConfig ?? 0 === 1
-        console.log(this.config)
-        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
-        runLogic(res.logicName, parameter, 'af-his').then(result => {
-          if (hiddenConfig) {
-            for (const key in result) {
-              if (Object.prototype.hasOwnProperty.call(result, key) && result[key] === this.hiddenConfig) {
-                delete result[key]
-              }
-            }
-          }
-          this.data = result
-        })
-      })
-    },
-    toggleDetails () {
-      this.showAllItems = !this.showAllItems
-    }
-  },
-  watch: {
-    queryParamsName: {
-      handler (newValue) {
-        console.log(newValue)
-        this.getData(newValue, {})
-      },
-      deep: true
-    },
-    parameter: {
-      handler (newValue, oldValue) {
-        console.log('监听事件触发:', { old: oldValue, new: newValue })
-        // 当 parameter 变化时重新获取数据
-        this.getData(this.queryParamsName, {})
-      },
-      deep: true // 深度监听对象内部变化
-    }
-  }
-}
-</script>
-
-<style scoped>
-.patient-info-descriptions {
-  background: #fff;
-  padding: 12px;
-  border-radius: 4px;
-  width: 100%;
-}
-
-.descriptions-container {
-  position: relative;
-  width: 100%;
-  padding-right: 80px; /* 为按钮预留空间 */
-}
-
-/* 自适应布局样式 */
-.flex-descriptions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 24px;
-  width: 100%;
-}
-
-.description-item {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
-  white-space: nowrap;
-  flex: 0 1 auto;
-}
-
-.description-item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-/* 共用样式 */
-.label-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: v-bind('config?.style?.fontSize');
-  white-space: nowrap;
-}
-
-.label-wrapper.with-avatar {
-  gap: 8px;
-}
-
-.label-text {
-  white-space: nowrap;
-}
-
-.content-wrapper {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 4px;
-  font-size: v-bind('config?.style?.fontSize');
-  color: rgba(0, 0, 0, 0.85);
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-button-wrapper {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 10;
-  padding: 4px 8px;
-  white-space: nowrap;
-  background-color: #fff;
-}
-
-/* Ant Design 描述列表样式覆盖 */
-:deep(.ant-descriptions-row) {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-:deep(.ant-descriptions-item) {
-  padding: 0 !important;
-  display: flex !important;
-  align-items: flex-start !important;
-  flex-direction: row !important;
-  margin-right: 24px;
-  width: fit-content !important;
-  margin-bottom: 16px;
-}
-
-:deep(.ant-descriptions-item-container) {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: flex-start !important;
-  position: relative;
-  gap: 0 !important;
-  width: 100% !important;
-}
-
-:deep(.ant-descriptions-item-label) {
-  color: rgba(0, 0, 0, 0.65);
-  padding: 0 !important;
-  margin: 0 !important;
-  font-size: v-bind('config?.style?.fontSize || "14px"');
-  display: inline-flex !important;
-  align-items: center !important;
-  white-space: nowrap !important;
-  min-width: v-bind('config?.style?.labelWidth || "80px"');
-  justify-content: flex-start;
-  padding-right: 2px !important;
-}
-
-:deep(.ant-descriptions-item-content) {
-  font-size: v-bind('config?.style?.fontSize || "14px"');
-  display: inline-flex !important;
-  align-items: center !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  margin-left: 0px !important;
-}
-
-:deep(.ant-descriptions-item-colon) {
-  position: static !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  margin-right: 2px !important;
-}
-
-:deep(.ant-descriptions-item-container:hover) {
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-:deep(.ant-btn-link) {
-  padding: 0;
-  height: auto;
-  line-height: 1;
-}
-
-:deep(.ant-btn-link:hover) {
-  color: #1890ff;
-  background: transparent;
-}
-
-/* 响应式调整 */
-@media screen and (max-width: 768px) {
-  .content-wrapper {
-    max-width: 200px;
-  }
-}
-
-@media screen and (max-width: 576px) {
-  .content-wrapper {
-    max-width: 150px;
-  }
-  .flex-descriptions {
-    gap: 4px 12px;
-  }
-}
-
-/* 添加虚线样式 */
-.with-divider {
-  position: relative;
-  margin-bottom: 16px !important;
-}
-
-.with-divider::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -8px;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-}
-
-/* 对于 Ant Design 描述列表的特殊处理 */
-:deep(.ant-descriptions-item.with-divider) {
-  position: relative;
-  margin-bottom: 16px !important;
-}
-
-:deep(.ant-descriptions-item.with-divider::after) {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -8px;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-}
-</style>
+<template>
+  <div class="patient-info-descriptions">
+    <div class="descriptions-container">
+      <!-- 详情/收起按钮 -->
+      <div v-if="hasMoreItems" class="detail-button-wrapper">
+        <a-button
+          :type="config?.detailsConfig?.buttonType || 'link'"
+          @click="toggleDetails"
+        >
+          <a-icon :type="showAllItems ? 'up' : 'down'" />
+          {{ showAllItems ? '收起' : (config?.detailsConfig?.buttonText || '详情') }}
+        </a-button>
+      </div>
+
+      <!-- 当有 layout 配置时使用 a-descriptions -->
+      <template v-if="config?.layout">
+        <a-descriptions
+          :column="config.layout"
+          :size="config?.style?.size"
+          :bordered="config?.style?.bordered"
+          layout="horizontal">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <a-descriptions-item
+              v-for="(item) in visibleItems"
+              :key="item.field"
+              :colon="item.colon !== false"
+              :class="{ 'with-divider': item.isLine }"
+              v-if="data[item.field] !== null && data[item.field] !== undefined && (!showAllItems || showAllItems && !hiddenItems.some(i => i.field === item.field))">
+              <template #label>
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <a-avatar
+                    v-if="item.showAvatar"
+                    :size="item.avatar.size"
+                    :icon="item.avatar.icon"
+                    :style="{ background: item.avatar.background }"
+                  />
+                  <span class="label-text">{{ item.label }}</span>
+                </div>
+              </template>
+              <div class="content-wrapper">
+                {{ data[item.field] }}
+              </div>
+            </a-descriptions-item>
+
+            <!-- 展开后显示剩余标签 -->
+            <template v-if="showAllItems">
+              <a-descriptions-item
+                v-for="item in hiddenItems"
+                :key="item.field"
+                :colon="item.colon !== false"
+                v-if="data[item.field] !== null && data[item.field] !== undefined">
+                <template #label>
+                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                    <a-avatar
+                      v-if="item.showAvatar"
+                      :size="item.avatar.size"
+                      :icon="item.avatar.icon"
+                      :style="{ background: item.avatar.background }"
+                    />
+                    <span class="label-text">{{ item.label }}</span>
+                  </div>
+                </template>
+                <div class="content-wrapper">
+                  {{ data[item.field] }}
+                </div>
+              </a-descriptions-item>
+            </template>
+          </template>
+        </a-descriptions>
+      </template>
+
+      <!-- 当没有 layout 配置时使用自适应布局 -->
+      <template v-else>
+        <div class="flex-descriptions">
+          <template v-if="data">
+            <!-- 显示可见的标签 -->
+            <div
+              v-for="(item) in visibleItems"
+              :key="item.field"
+              :class="['description-item', { 'with-divider': item.isLine }]"
+              v-if="data[item.field] !== null && data[item.field] !== undefined"
+            >
+              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                <a-avatar
+                  v-if="item.showAvatar"
+                  :size="item.avatar.size"
+                  :icon="item.avatar.icon"
+                  :style="{ background: item.avatar.background }"
+                />
+                <span class="label-text">{{ item.label }}：</span>
+              </div>
+              <div class="content-wrapper">
+                {{ data[item.field] }}
+              </div>
+            </div>
+
+            <!-- 展开后显示的内容 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItems"
+                :key="item.field"
+                class="description-item"
+                v-if="data[item.field] !== null && data[item.field] !== undefined"
+              >
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <a-avatar
+                    v-if="item.showAvatar"
+                    :size="item.avatar.size"
+                    :icon="item.avatar.icon"
+                    :style="{ background: item.avatar.background }"
+                  />
+                  <span class="label-text">{{ item.label }}：</span>
+                </div>
+                <div class="content-wrapper">
+                  {{ data[item.field] }}
+                </div>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XHDescriptions',
+  data () {
+    return {
+      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
+      hiddenConfig: '-1^',
+      data: null,
+      config: null,
+      showAllItems: false // 控制是否显示所有标签
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    // 获取详情按钮应该显示在第几个标签后
+    detailsAfterIndex () {
+      return this.config?.detailsConfig?.showAfterIndex || 999
+    },
+    // 判断是否有更多标签需要显示
+    hasMoreItems () {
+      if (!this.config?.detailsConfig) return false
+      if (!this.data || !this.config?.items || !Array.isArray(this.config.items)) return false
+      const hiddenStartIndex = this.detailsAfterIndex || 0
+      if (hiddenStartIndex >= this.config.items.length) return false
+      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
+        const item = this.config.items[i]
+        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
+          return true
+        }
+      }
+      return false
+    },
+    // 获取应该显示的标签
+    visibleItems () {
+      if (!this.config?.items) return []
+      if (!this.config?.detailsConfig) return this.config.items
+      if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
+      return this.config.items.slice(0, this.detailsAfterIndex)
+    },
+    // 获取隐藏的标签（保持原有逻辑）
+    hiddenItems () {
+      if (!this.config?.items) return []
+      if (!this.config?.detailsConfig) return []
+      return this.config.items.slice(this.detailsAfterIndex)
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, {})
+  },
+  methods: {
+    async getData (data, parameterData) {
+      this.data = null
+      this.showAllItems = false
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        const hiddenConfig = this.config?.hiddenConfig ?? 0 === 1
+        console.log(this.config)
+        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
+        runLogic(res.logicName, parameter, 'af-his').then(result => {
+          if (hiddenConfig) {
+            for (const key in result) {
+              if (Object.prototype.hasOwnProperty.call(result, key) && result[key] === this.hiddenConfig) {
+                delete result[key]
+              }
+            }
+          }
+          this.data = result
+        })
+      })
+    },
+    toggleDetails () {
+      this.showAllItems = !this.showAllItems
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        // 当 parameter 变化时重新获取数据
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true // 深度监听对象内部变化
+    }
+  }
+}
+</script>
+
+<style scoped>
+.patient-info-descriptions {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.descriptions-container {
+  position: relative;
+  width: 100%;
+  padding-right: 80px; /* 为按钮预留空间 */
+}
+
+/* 自适应布局样式 */
+.flex-descriptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  width: 100%;
+}
+
+.description-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex: 0 1 auto;
+}
+
+.description-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 共用样式 */
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: v-bind('config?.style?.fontSize');
+  white-space: nowrap;
+}
+
+.label-wrapper.with-avatar {
+  gap: 8px;
+}
+
+.label-text {
+  white-space: nowrap;
+}
+
+.content-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  font-size: v-bind('config?.style?.fontSize');
+  color: rgba(0, 0, 0, 0.85);
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-button-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  padding: 4px 8px;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+/* Ant Design 描述列表样式覆盖 */
+:deep(.ant-descriptions-row) {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+:deep(.ant-descriptions-item) {
+  padding: 0 !important;
+  display: flex !important;
+  align-items: flex-start !important;
+  flex-direction: row !important;
+  margin-right: 24px;
+  width: fit-content !important;
+  margin-bottom: 16px;
+}
+
+:deep(.ant-descriptions-item-container) {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  position: relative;
+  gap: 0 !important;
+  width: 100% !important;
+}
+
+:deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: v-bind('config?.style?.fontSize || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  white-space: nowrap !important;
+  min-width: v-bind('config?.style?.labelWidth || "80px"');
+  justify-content: flex-start;
+  padding-right: 2px !important;
+}
+
+:deep(.ant-descriptions-item-content) {
+  font-size: v-bind('config?.style?.fontSize || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-left: 0px !important;
+}
+
+:deep(.ant-descriptions-item-colon) {
+  position: static !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  margin-right: 2px !important;
+}
+
+:deep(.ant-descriptions-item-container:hover) {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+:deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  line-height: 1;
+}
+
+:deep(.ant-btn-link:hover) {
+  color: #1890ff;
+  background: transparent;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .content-wrapper {
+    max-width: 200px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .content-wrapper {
+    max-width: 150px;
+  }
+  .flex-descriptions {
+    gap: 4px 12px;
+  }
+}
+
+/* 添加虚线样式 */
+.with-divider {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 对于 Ant Design 描述列表的特殊处理 */
+:deep(.ant-descriptions-item.with-divider) {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+:deep(.ant-descriptions-item.with-divider::after) {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+</style>