fiee-official-website/src/views/financialinformation/secfilingsdetail/size1920/index.vue

<template>
  <div class="page-container">
    <div class="sec-filing-detail-container">
      <!-- 标题 -->
      <div class="page-title">SEC Filing Details</div>

      <!-- Document Details 部分 -->
      <div class="section">
        <h2 class="section-title">Document Details</h2>
        <div class="details-grid">
          <div class="detail-item">
            <span class="detail-label">Form:</span>
            <a :href="filingData.htmlLink" class="detail-value link">{{
              filingData.form
            }}</a>
          </div>
          <div class="detail-item">
            <span class="detail-label">Filing Date:</span>
            <span class="detail-value">{{ filingData.filingDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Form Description:</span>
            <span class="detail-value">{{ filingData.formDescription }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Company:</span>
            <span class="detail-value">{{ filingData.company }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Issuer:</span>
            <span class="detail-value">{{ filingData.issuer }}</span>
          </div>
        </div>
      </div>

      <!-- Filing Formats 部分 -->
      <div class="section">
        <h2 class="section-title">Filing Formats</h2>
        <div class="formats-list">
          <div class="format-item">
            <img :src="iconLink" alt="link" class="format-icon" />
            <a :href="filingData.htmlLink" class="format-link" target="_blank"
              >View HTML</a
            >
          </div>
        </div>
      </div>

      <!-- XBRL 部分 -->
      <div
        v-if="
          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
        "
        class="section"
      >
        <h2 class="section-title">XBRL</h2>
        <div class="formats-list">
          <div
            class="format-item"
            v-for="(item, idx) in filingData.dataFiles"
            :key="idx"
          >
            <img :src="iconLink" alt="link" class="format-icon" />
            <a :href="item.fileUrl" class="format-link" target="_blank">{{
              item.description
            }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import iconLink from "@/assets/image/icon/icon-link.png";
import { fileList } from "@/dict/secTestData.js";
import { useRoute } from "vue-router";

// 这里可以根据路由参数或props获取具体的文件详情
const filingData = ref({
  form: "",
  filingDate: "",
  formDescription: "",
  company: "",
  issuer: "",
  htmlLink: "#",
});

const route = useRoute();

onMounted(() => {
  const { filingDate } = route.query;
  const file = fileList.find((item) => item.filingDate === filingDate);
  if (file) {
    filingData.value = {
      form: file.form,
      filingDate: file.filingDate,
      formDescription: file.description,
      company: file.company,
      issuer: file.issuer,
      htmlLink: file.link || "#",
      dataFiles: file.dataFiles || [],
    };
  }
  console.log(filingData.value);
});
</script>

<style scoped lang="scss">
.page-container {
  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 20px;
}

.sec-filing-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

.section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.details-grid {
  display: grid;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.detail-label {
  font-weight: bold;
  color: #333;
  min-width: 150px;
  flex-shrink: 0;
}

.detail-value {
  color: #333;
  line-height: 1.5;
}

.link {
  color: #0078d7;
  text-decoration: underline;
  cursor: pointer;
  &:hover {
    text-decoration: none;
  }
}
.formats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.format-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.format-icon {
  width: 24px;
  height: 24px;
}

.format-link {
  color: #0078d7;
  text-decoration: underline;
  font-size: 14px;

  &:hover {
    text-decoration: none;
  }
}
</style>