minnan-tv/src/views/Details/ArtifactDetail.vue

<script setup lang="ts">
import CommonDetail from './CommonDetail.vue';
</script>

<template>
  <CommonDetail v-bind="$attrs">
    <template #afterTitle="{ content }">
      <div class="desc">
        <div>地址: {{ content?.address }}</div>
        <div>年代: {{ content?.age }}</div>
        <div>级别: {{ content?.levelText }}</div>
        <div>所属区域: {{ content?.regionText }}</div>
        <div>文物类型: {{ content?.crTypeText }}</div>
      </div>
    </template>
    <template #beforeContent="{ content }">
      <h3>文物介绍：</h3>
    </template>
    <template #afterContent="{ content }">
      <h3>文物价值：</h3>
      <SimpleRichHtml :contents="[ content?.value as string || '暂无' ]" noScroll />
    </template>
  </CommonDetail>
</template>

<style lang="scss" scoped>
h3 {
  font-size: 0.8rem;
  color: var(--color-text-primary);
  text-align: left;
  width: 100%;
  margin-top: 0.5rem;
}
.desc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    width: 48%;
    color: var(--color-text-primary);
    font-size: 0.8rem;
  }

}
</style>