<template>
  <div class="ship-info-form">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title="{ isActive }">
          <div class="collapse-title">
            发布单位信息
          </div>
        </template>
        <div class="flex mb20 mt20">
          <div class="mr20">发布单位：交通运输部海事局</div>
          <div>发布日期：2025-04-17</div>
        </div>
        <div>
          根据《交通运输部办公厅关于印发〈水上交通安全信息共享共治专项行动方案〉的通知》（交办海涵），现将相关情况向你单位通报，请予以处理。
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
  const activeNames = ref(['1']);
</script>

<style scoped>
.ship-info-form {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
:deep .el-collapse-item__header {
  color: #5070ae;
  size: 24px;
  background: linear-gradient(135deg, #d2e8ff, #fcfeff);
	box-shadow: 0 8px 20px #fcfeff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding-left: 20px;
}
</style>