mingnan/src/pages/home/introduction.vue

<template>
  <view class="home-container page-home-introduction d-flex flex-col bg-base">
    <u-navbar :autoBack="true" bgColor="transparent" />
    <image 
      class="w-100 position-absolute"
      src="/static/images/home/BackgroundBanner2.jpg"
      mode="widthFix"
    />
    <view class="content d-flex flex-col wing-l">

      <!-- 标题 -->
      <view class="font-songti color-title-text d-flex flex-col align-center justify-center p-3">
        <text class="size-lll">闽南文化(厦门)生态保护区</text>
        <text class="size-base mt-2">世界闽南文化交流中心</text>
      </view>

      <!-- 分栏 -->
      <view class="shadow-l radius-l bg-base p-3">
        <SimplePageContentLoader :loader="introdData">
          <u-parse :content="introdData.content.value" :tag-style="commonParserStyle"></u-parse>
        </SimplePageContentLoader>
      </view>
    </view>
  </view>
  <tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
import { GetContentListParams } from '@/api/CommonContent';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import Tabbar from '@/common/components/tabs/tabbar.vue';
import commonParserStyle from '@/common/style/commonParserStyle';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';

const introdData = useSimpleDataLoader(async () => {
  return (await NewsIndexContent.getColumList(new GetContentListParams().setSelfValues({
    modelId: 3,
    mainBodyColumnId: 234,
  }))).list[0]?.overview || '无内容！请添加内容！！';
}, true);

</script>

<style lang="scss">
.page-home-introduction {
  .content {
    margin-top: 15vh;
  }
}
</style>