app/pages/goods/components/detail/detail-content-card.vue

<!-- 产品详情：描述卡片 -->
<template>
  <view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
    <view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
      <view class="line"></view>
      <view class="title ss-m-l-20 ss-m-r-20">详情</view>
    </view>
    <view class="card-content">
      <template v-if="goodsInfo.userHtml">
        <rich-text style="padding: 10px;" :nodes="goodsInfo.userHtml" :preview-img="true" :selectable="true"
          :use-anchor="true"></rich-text>
      </template>
      <template v-else>
        <view style="padding: 10px;" v-html="content"></view>
      </template>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';

const { safeAreaInsets } = sheep.$platform.device;

const props = defineProps({
  content: {
    type: String,
    default: '',
  },
  goodsInfo: {
    type: Object,
    default: {},
  },
});
const htmlContent = `
        <div class="article">
          <h2>焰小厨餐厅介绍</h2>
          <p>位于苏州平江路...</p>
          <img src="https://example.com/logo.png" alt="餐厅Logo">
        </div>
      `

</script>

<style lang="scss" scoped>
.detail-content-card {
  .card-header {
    .line {
      width: 6rpx;
      height: 30rpx;
      background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
      border-radius: 3rpx;
    }

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }

    .des {
      font-size: 24rpx;
      color: $dark-9;
    }

    .more-btn {
      font-size: 24rpx;
      color: var(--ui-BG-Main);
    }
  }
}
</style>