xyy-mp/src/pages/travel/detail.vue

<template>
  <div>
    <div v-if="detailData.travelNotesBannerAfterConvert">
      <img
        :src="
          detailData.travelNotesBannerAfterConvert?.length
            ? detailData.travelNotesBannerAfterConvert[0]
            : ''
        "
      />
      <div class="project-detail">
        <div class="project-title">
          {{ detailData.projectTitle }}
        </div>
        <div>
          <div class="project-label" v-for="item in lableList" :key="item">
            {{ item }}
          </div>
        </div>
        <div class="project-concat">
          <div>出行天数 {{ detailData.countTimes }}</div>
          <div v-if="detailData.contactDescription">
            专业一站式导游服务请联系{{ detailData.contactDescription }}
          </div>
        </div>
        <div class="richtext" v-html="detailData.tourismContent.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getTravelDetail } from '@/api/travel';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
const router = useRoute();
const lableList = computed(() => {
  return detailData.value?.projectLabel?.split('&') ?? [];
});
onLoad(() => {
  requestTravelDetail();
});

const detailData = ref({});
async function requestTravelDetail() {
  const { data } = await getTravelDetail(router.query.id);
  detailData.value = data;
}
</script>

<style lang="scss" scoped>
.project-detail {
  padding: 10px 10px 30px 10px;
}
.project-title {
  font-size: 20px;
  line-height: 30px;
  color: #333;
  font-weight: bold;
}
.project-label {
  border: 1px solid #fd9a00;
  color: #fd9a00;
  padding: 0 8px;
  display: inline-block;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  margin-top: 15px;
  & + .project-label {
    margin-left: 10px;
  }
}
.project-concat {
  margin-top: 10px;
  color: #666666b2;
  div + div {
    margin-top: 10px;
  }
}
.richtext {
  margin-top: 15px;
}
::v-deep p img {
  width: 100%;
  max-width: 100%;
}
img {
  width: 100%;
}
</style>