<template>
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" mode="horizontal" router>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/about">简介</el-menu-item>
        <el-menu-item index="/products">商品展示</el-menu-item>
        <el-menu-item index="/news">新闻列表</el-menu-item>
        <el-menu-item index="/community">社区</el-menu-item>
        <el-menu-item index="/login">登录</el-menu-item>
        <el-menu-item index="/register">注册</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
    <el-button class="emergency-btn" type="danger" circle size="large" @click="emergencyDialog=true">
      <el-icon><i class="el-icon-phone"></i></el-icon>
    </el-button>
    <el-dialog v-model="emergencyDialog" title="紧急呼叫" width="320px">
      <div style="text-align:center;">
        <el-icon style="font-size:40px;color:#f56c6c;"><i class="el-icon-phone"></i></el-icon>
        <p style="margin:16px 0 8px 0;font-size:18px;">紧急联系电话：<b>120</b></p>
        <p style="color:#888;">如遇突发状况，请立即拨打急救电话并告知您的位置。</p>
      </div>
      <template #footer>
        <el-button @click="emergencyDialog=false">关闭</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
const emergencyDialog = ref(false)
</script>

<style>
:root {
  --el-color-primary: #67C23A;
}
body {
  background: #f6f8fa;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  color: #222;
}
h1, h2, h3 {
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  font-weight: bold;
  color: #333;
}
.el-button {
  font-size: 1.1rem;
  letter-spacing: 1px;
  border-radius: 8px;
  transition: background 0.3s, box-shadow 0.3s;
}
.el-button:hover {
  background: #85ce61;
  box-shadow: 0 4px 16px #b0c4de80;
}
.product-card, .el-card, .news-card, .community-card, .detail-card {
  transition: box-shadow 0.3s, transform 0.3s;
}
.product-card:hover, .el-card:hover, .news-card:hover, .community-card:hover, .detail-card:hover {
  box-shadow: 0 12px 36px #b0c4de80;
  transform: translateY(-8px) scale(1.04);
}
img, .carousel-img, .community-img, .home-img {
  transition: box-shadow 0.3s, transform 0.3s;
}
img:hover, .carousel-img:hover, .community-img:hover, .home-img:hover {
  box-shadow: 0 8px 32px #b0c4de80;
  transform: scale(1.03);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.emergency-btn {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 9999;
  box-shadow: 0 4px 16px #f56c6c40;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 