<template>
  <el-scrollbar class="analysis_detail">
    <div class="title" v-text="raw.title || ''"></div>
    <div class="subtitle">
      <el-icon><Clock /></el-icon>
      {{ raw.publishTime }}
      <span style="vertical-align: middle;">来源:</span>
      <span style="color: #22ac38;vertical-align: middle;" v-text="raw.sourceWebsite"> </span>
    </div>
    <div v-html="detail"></div>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const detail = ref('');
const raw = ref({});
const D = JSON.parse(route.query.detail || '{}');
detail.value = D.content || '';
raw.value = D || {};
</script>

<style>
.analysis_detail {
  padding: 2em 50px;
  font-size: 16px;
}
.analysis_detail * {
  line-height: 1.5em;
  text-indent: 2em;
}
.analysis_detail img {
  width: 80%;
  display: block;
  margin: 3px auto;
}
.analysis_detail .title {
  font-size: 16px;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  padding-left: 8px;
  text-align: center;
}

.analysis_detail .subtitle {
  border-bottom: 1px solid #f5f5f5;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  margin-bottom: 2em;
  text-align: center;
}
</style>
