<template>
  <div class=" bg-gray-50 dark:bg-gray-900">
    <!-- 顶部背景和标题 -->
    <header
        class="relative bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-900 text-white py-20 overflow-hidden">
      <!-- 共享单车背景图案 -->
      <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 left-10 w-16 h-8 bg-white rounded-full"/>
        <div class="absolute top-20 right-20 w-16 h-8 bg-white rounded-full"/>
        <div class="absolute bottom-10 left-1/4 w-16 h-8 bg-white rounded-full"/>
        <div class="absolute bottom-20 right-1/3 w-16 h-8 bg-white rounded-full"/>
        <div class="absolute top-1/3 left-1/2 w-16 h-8 bg-white rounded-full"/>
      </div>

      <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-4xl lg:text-5xl font-bold mb-4">
          运营管理平台
        </h1>
        <p class="text-xl opacity-90">
          共享出行车辆智能运营管理系统
        </p>
      </div>
    </header>

    <!-- 笔记本电脑展示区域 -->
    <section class="py-16 bg-white dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <!-- 笔记本电脑容器 -->
          <div class="relative">
            <!-- 笔记本电脑底座 -->
            <div class="w-full max-w-2xl mx-auto bg-gray-300 dark:bg-gray-600 h-6 rounded-b-lg"/>

            <!-- 笔记本电脑屏幕 -->
            <div class="w-full max-w-3xl mx-auto bg-gray-800 rounded-t-lg p-1">
              <div class="bg-blue-100 dark:bg-blue-900 rounded-t-lg h-64 lg:h-80 relative overflow-hidden">
                <!-- 地图界面 -->
                <div
                    class="absolute inset-0 bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-700">
                  <!-- 地图网格线 -->
                  <div class="absolute inset-0 opacity-20">
                    <div class="grid grid-cols-8 gap-4 h-full">
                      <div v-for="i in 8" :key="i" class="border-r border-blue-400 dark:border-blue-600"/>
                    </div>
                    <div class="grid grid-rows-6 gap-4 h-full">
                      <div v-for="i in 6" :key="i" class="border-b border-blue-400 dark:border-blue-600"/>
                    </div>
                  </div>

                  <!-- 车辆标记点 -->
                  <div class="absolute top-1/4 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
                  <div class="absolute top-1/3 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
                  <div class="absolute top-1/2 left-1/3 w-3 h-3 bg-yellow-500 rounded-full"/>
                  <div class="absolute top-2/3 left-2/3 w-3 h-3 bg-blue-500 rounded-full"/>

                  <!-- 道路线条 -->
                  <div class="absolute top-1/2 left-1/4 w-1/2 h-1 bg-gray-600 transform -translate-y-1/2"/>
                  <div class="absolute top-1/3 left-1/4 w-1 h-16 bg-gray-600 transform -translate-x-1/2"/>
                </div>

                <!-- 界面控件 -->
                <div class="absolute top-4 left-4 bg-white dark:bg-gray-800 rounded-lg px-3 py-1 text-sm font-medium">
                  实时监控地图
                </div>
                <div class="absolute bottom-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm">
                  在线车辆: 613
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能模块网格 -->
    <section class="py-20 bg-white dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 实时车辆监控 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <!-- 红色图标 -->
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">实时车辆监控</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                运营平台大屏幕展示车辆的分布及状态
              </p>
            </div>
          </div>

          <!-- 智能异常报警 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">智能异常报警</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                车辆发生异常问题，运营平台发生警报
              </p>
            </div>
          </div>

          <!-- 规范骑行、停车区域 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">规范骑行、停车区域</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                设置规范骑行和停车区域，提升管理效率
              </p>
            </div>
          </div>

          <!-- 运维数据 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运维数据</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                运维数据实时上报，绩效考核有依据
              </p>
            </div>
          </div>

          <!-- 快速签署代理 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">快速签署代理</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                加盟商、代理商快速进入系统
              </p>
            </div>
          </div>

          <!-- 财务管理 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">财务管理</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                财务报表实时统计咨询，财务清单有记录
              </p>
            </div>
          </div>

          <!-- 运营数据 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运营数据</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                运营数据云保存，百万量级数据实时查询
              </p>
            </div>
          </div>

          <!-- 权限管理 -->
          <div
              class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
            <div class="text-center">
              <div
                  class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg
                    class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                  <path
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                      stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2"/>
                </svg>
              </div>

              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">权限管理</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                根据公司员工岗位职责，自定义设置系统权限
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 可以添加交互逻辑
</script>

<style scoped>
/* 自定义动画效果 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid {
    gap: 1rem;
  }
}
</style>