<template>
  <div class="portal-wrap">
    <!-- 背景装饰 -->
    <div class="bg-circle bg-circle--1" />
    <div class="bg-circle bg-circle--2" />
    <div class="bg-circle bg-circle--3" />

    <div class="portal-content">
      <!-- 顶部标题 -->
      <div class="portal-header">
        <div class="portal-logo">
          <v-icon icon="mdi-shield-crown-outline" size="48" color="white" />
        </div>
        <h1 class="portal-title">数智残联综合管理平台</h1>
        <p class="portal-subtitle">Intelligent Disabled Persons' Federation Management Platform</p>
      </div>

      <!-- 入口卡片 -->
      <div class="portal-cards">
        <RouterLink to="/mis/home" class="portal-card portal-card--mis">
          <div class="card-icon-wrap">
            <v-icon icon="mdi-chart-box-outline" size="40" />
          </div>
          <div class="card-body">
            <div class="card-title">治理端</div>
            <div class="card-desc">数据分析 · 决策支持 · 综合管理</div>
          </div>
          <v-icon icon="mdi-arrow-right" size="20" class="card-arrow" />
        </RouterLink>

        <RouterLink to="/wit/home" class="portal-card portal-card--wit">
          <div class="card-icon-wrap">
            <v-icon icon="mdi-account-group-outline" size="40" />
          </div>
          <div class="card-body">
            <div class="card-title">协同端</div>
            <div class="card-desc">业务协同 · 流程管理 · 工作台</div>
          </div>
          <v-icon icon="mdi-arrow-right" size="20" class="card-arrow" />
        </RouterLink>

        <RouterLink to="/aid/home" class="portal-card portal-card--aid">
          <div class="card-icon-wrap">
            <v-icon icon="mdi-hand-heart-outline" size="40" />
          </div>
          <div class="card-body">
            <div class="card-title">服务端</div>
            <div class="card-desc">公共服务 · 事项办理 · 残障帮扶</div>
          </div>
          <v-icon icon="mdi-arrow-right" size="20" class="card-arrow" />
        </RouterLink>
      </div>

      <!-- 底部信息 -->
      <p class="portal-footer">杭州数智残联 &copy; {{ new Date().getFullYear() }}</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

onMounted(() => {})
</script>

<style scoped>
.portal-wrap {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a237e 0%, #1565c0 40%, #0288d1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景装饰圆 */
.bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  background: #fff;
  pointer-events: none;
}
.bg-circle--1 { width: 600px; height: 600px; top: -200px; right: -150px; }
.bg-circle--2 { width: 400px; height: 400px; bottom: -120px; left: -100px; }
.bg-circle--3 { width: 200px; height: 200px; top: 60%; left: 55%; }

/* 主内容 */
.portal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部标题区 */
.portal-header {
  text-align: center;
  margin-bottom: 56px;
}
.portal-logo {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.portal-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.portal-subtitle {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* 入口卡片列表 */
.portal-cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.portal-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
}
.portal-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.card-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.portal-card--mis .card-icon-wrap { background: rgba(233, 30, 99, 0.25); color: #f48fb1; }
.portal-card--wit .card-icon-wrap { background: rgba(0, 188, 212, 0.25); color: #80deea; }
.portal-card--aid .card-icon-wrap { background: rgba(76, 175, 80, 0.25); color: #a5d6a7; }

.card-body {
  flex: 1;
}
.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.card-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.card-arrow {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}
.portal-card:hover .card-arrow {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

/* 底部 */
.portal-footer {
  margin-top: 48px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* 响应式 */
@media (max-width: 640px) {
  .portal-cards { flex-direction: column; }
  .portal-title { font-size: 1.4rem; }
}
</style>
