<script setup lang="ts">
import ExecutiveAccountPanel from './components/ExecutiveAccountPanel.vue'
import ExecutiveReliablePanel from './components/ExecutiveReliablePanel.vue'
import ExecutiveWarningOverview from './components/ExecutiveWarningOverview.vue'
import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.vue'
</script>

<template>
  <main class="executive-page">
    <header class="hero">
      <div class="hero-title">
        <h1>总行管理员首页</h1>
        <p>EXECUTIVE MANAGEMENT HOMEPAGE</p>
      </div>
    </header>

    <section class="dashboard-grid">
      <ExecutiveAccountPanel />
      <ExecutiveWarningOverview />
      <ExecutiveReliablePanel />
      <ExecutiveWarningTablePanel />
    </section>
  </main>
</template>

<style scoped>
.executive-page {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: #05070b;
  background:
    linear-gradient(90deg, #f8f9fb 0 31.4%, transparent 31.4%),
    linear-gradient(142deg, #2688ff 0%, #0063ee 43%, #005ce9 100%);
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
}

.hero {
  width: 100%;
  height: 128px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 23px 31px 0;
}

.hero-title h1 {
  font-size: 36px;
  line-height: 1.16;
  font-weight: 900;
}

.hero-title p {
  margin-top: 16px;
  color: #91959b;
  font-size: 16px;
}

.dashboard-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 31px 39px;
}

@media (max-width: 1200px) {
  .hero {
    height: auto;
    min-height: 128px;
    flex-wrap: wrap;
    gap: 16px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 18px 16px 0;
  }

  .hero-title h1 {
    font-size: 30px;
  }

  .dashboard-grid {
    padding: 0 16px 24px;
  }
}
</style>
