|
|
@@ -1,338 +1,253 @@
|
|
|
<template>
|
|
|
- <div class="home-container min-h-screen bg-gray-100 p-4 md:p-8">
|
|
|
- <div class="max-w-7xl mx-auto">
|
|
|
- <h1 class="text-4xl font-bold text-gray-900 mb-8">设计风格</h1>
|
|
|
- <p class="text-gray-900 mb-8">请选择您的设计风格偏好来创建您的原型</p>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
|
- <router-link v-for="style in designStyles"
|
|
|
- :key="style.path"
|
|
|
- :to="style.path"
|
|
|
- :class="style.cardClass">
|
|
|
- <div class="card-content">
|
|
|
- <h3 class="text-xl font-semibold" :class="style.titleClass">{{ style.name }}</h3>
|
|
|
- <p class="text-sm" :class="style.descriptionClass">{{ style.description }}</p>
|
|
|
+ <div class="home-container min-h-screen bg-gradient-to-b from-blue-50 to-white">
|
|
|
+ <!-- Header Section -->
|
|
|
+ <header class="bg-white shadow-md">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <!-- Company Logo -->
|
|
|
+ <svg class="h-10 w-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
|
|
+ </svg>
|
|
|
+ <h1 class="ml-3 text-2xl font-bold text-gray-900">医疗智能科技</h1>
|
|
|
+ </div>
|
|
|
+ <nav class="hidden md:flex space-x-8">
|
|
|
+ <a href="#solutions" class="text-gray-700 hover:text-blue-600 font-medium">解决方案</a>
|
|
|
+ <a href="#products" class="text-gray-700 hover:text-blue-600 font-medium">产品服务</a>
|
|
|
+ <a href="#about" class="text-gray-700 hover:text-blue-600 font-medium">关于我们</a>
|
|
|
+ <router-link to="/login" class="text-gray-700 hover:text-blue-600 font-medium">登录</router-link>
|
|
|
+ </nav>
|
|
|
+ <button class="md:hidden">
|
|
|
+ <svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Hero Section -->
|
|
|
+ <section class="py-12 md:py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
|
+ <div>
|
|
|
+ <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
|
|
|
+ 医疗行业的<span class="text-blue-600">智能化</span>解决方案
|
|
|
+ </h2>
|
|
|
+ <p class="mt-6 text-lg text-gray-700 leading-relaxed">
|
|
|
+ 我们提供先进的医疗信息技术解决方案，帮助医疗机构提高效率、降低成本、改善患者体验。通过人工智能和大数据分析，我们的系统能够提供精准的诊断支持和个性化的治疗方案。
|
|
|
+ </p>
|
|
|
+ <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
|
|
+ <router-link to="/login" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
|
|
|
+ 开始使用
|
|
|
+ </router-link>
|
|
|
+ <a href="#solutions" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
|
+ 了解更多
|
|
|
+ </a>
|
|
|
</div>
|
|
|
- </router-link>
|
|
|
+ </div>
|
|
|
+ <div class="hidden md:block">
|
|
|
+ <img src="https://source.unsplash.com/random/600x400/?medical,technology" alt="Medical Technology" class="rounded-lg shadow-xl">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-const designStyles = [
|
|
|
- { path: '/fluent', name: 'Fluent Design', description: '微软流畅设计系统', cardClass: 'fluent-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
|
|
|
- { path: '/ios', name: 'iOS Design', description: '苹果设计风格', cardClass: 'ios-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
|
|
|
- { path: '/element', name: 'Element UI', description: '饿了么设计系统', cardClass: 'element-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
|
|
|
- { path: '/ant', name: 'Ant Design', description: '蚂蚁设计系统', cardClass: 'ant-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
|
|
|
- { path: '/morphism', name: 'Morphism', description: '变形设计风格', cardClass: 'morphism-card', titleClass: 'text-purple-900', descriptionClass: 'text-purple-700' },
|
|
|
- { path: '/holographic', name: 'Holographic', description: '全息设计风格', cardClass: 'holographic-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
|
|
|
- { path: '/gradient', name: 'Gradient', description: '渐变设计风格', cardClass: 'gradient-card', titleClass: 'text-white', descriptionClass: 'text-pink-100' },
|
|
|
- { path: '/neon', name: 'Neon', description: '霓虹设计风格', cardClass: 'neon-card', titleClass: 'text-pink-400', descriptionClass: 'text-pink-300' },
|
|
|
- { path: '/organic', name: 'Organic', description: '有机设计风格', cardClass: 'organic-card', titleClass: 'text-green-900', descriptionClass: 'text-green-700' },
|
|
|
- { path: '/pixel', name: 'Pixel Art', description: '像素艺术风格', cardClass: 'pixel-card', titleClass: 'text-yellow-900', descriptionClass: 'text-yellow-700' },
|
|
|
- { path: '/brutalism', name: 'Brutalism', description: '粗野主义风格', cardClass: 'brutalism-card', titleClass: 'text-black', descriptionClass: 'text-gray-800' },
|
|
|
- { path: '/3d', name: '3D Design', description: '3D设计风格', cardClass: 'three-d-card', titleClass: 'text-white', descriptionClass: 'text-blue-200' },
|
|
|
- { path: '/skeuomorphic', name: 'Skeuomorphic', description: '拟物设计风格', cardClass: 'skeuomorphic-card', titleClass: 'text-amber-900', descriptionClass: 'text-amber-700' },
|
|
|
- { path: '/neumorphism', name: 'Neumorphism', description: '新拟物设计风格', cardClass: 'neumorphism-card', titleClass: 'text-gray-800', descriptionClass: 'text-gray-600' },
|
|
|
- { path: '/flat', name: 'Flat', description: '扁平设计风格', cardClass: 'flat-card', titleClass: 'text-white', descriptionClass: 'text-red-100' },
|
|
|
- { path: '/material', name: 'Material', description: '材料设计风格', cardClass: 'material-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
|
|
|
- { path: '/nordic', name: 'Nordic', description: '北欧设计风格', cardClass: 'nordic-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
|
|
|
- { path: '/futuristic', name: 'Futuristic', description: '未来主义风格', cardClass: 'futuristic-card', titleClass: 'text-white', descriptionClass: 'text-cyan-100' },
|
|
|
- { path: '/retro', name: 'Retro', description: '复古设计风格', cardClass: 'retro-card', titleClass: 'text-orange-900', descriptionClass: 'text-orange-700' },
|
|
|
- { path: '/cyberpunk', name: 'Cyberpunk', description: '赛博朋克风格', cardClass: 'cyberpunk-card', titleClass: 'text-pink-400', descriptionClass: 'text-purple-300' },
|
|
|
- { path: '/steampunk', name: 'Steampunk', description: '蒸汽朋克风格', cardClass: 'steampunk-card', titleClass: 'text-amber-100', descriptionClass: 'text-amber-200' },
|
|
|
- { path: '/aurora', name: 'Aurora', description: '极光设计风格', cardClass: 'aurora-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
|
|
|
- { path: '/minimalist', name: 'Minimalist', description: '极简设计风格', cardClass: 'minimalist-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
|
|
|
- { path: '/dark-mode', name: 'Dark Mode', description: '暗黑模式风格', cardClass: 'dark-mode-card', titleClass: 'text-white', descriptionClass: 'text-gray-300' },
|
|
|
- { path: '/glassmorphism', name: 'Glassmorphism', description: '玻璃态设计风格', cardClass: 'glassmorphism-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-700' }
|
|
|
-]
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.home-container {
|
|
|
- font-family: 'Inter', sans-serif;
|
|
|
-}
|
|
|
-
|
|
|
-.card-content {
|
|
|
- @apply p-6 rounded-lg h-full flex flex-col justify-center;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-/* Fluent Design Card */
|
|
|
-.fluent-card {
|
|
|
- @apply bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-.fluent-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* iOS Design Card */
|
|
|
-.ios-card {
|
|
|
- @apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-.ios-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Element UI Card */
|
|
|
-.element-card {
|
|
|
- @apply bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.element-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Ant Design Card */
|
|
|
-.ant-card {
|
|
|
- @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.ant-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Morphism Card */
|
|
|
-.morphism-card {
|
|
|
- @apply bg-gradient-to-br from-purple-100 to-pink-100 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
-
|
|
|
-.morphism-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Holographic Card */
|
|
|
-.holographic-card {
|
|
|
- @apply bg-gradient-to-br from-blue-600/30 via-purple-600/30 to-pink-600/30 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
- backdrop-filter: blur(8px);
|
|
|
-}
|
|
|
-
|
|
|
-.holographic-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Gradient Card */
|
|
|
-.gradient-card {
|
|
|
- @apply bg-gradient-to-br from-pink-600 via-purple-600 to-indigo-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.gradient-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Neon Card */
|
|
|
-.neon-card {
|
|
|
- @apply bg-black rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid #ff00ff;
|
|
|
- box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
|
-}
|
|
|
-
|
|
|
-.neon-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Organic Card */
|
|
|
-.organic-card {
|
|
|
- @apply bg-gradient-to-br from-green-200 to-green-300 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-.organic-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Pixel Art Card */
|
|
|
-.pixel-card {
|
|
|
- @apply bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid #000;
|
|
|
-}
|
|
|
-
|
|
|
-.pixel-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Brutalism Card */
|
|
|
-.brutalism-card {
|
|
|
- @apply bg-yellow-200 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 3px solid #000;
|
|
|
- box-shadow: 8px 8px 0 #000;
|
|
|
-}
|
|
|
-
|
|
|
-.brutalism-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* 3D Design Card */
|
|
|
-.three-d-card {
|
|
|
- @apply bg-gradient-to-br from-blue-900 to-purple-900 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- transform-style: preserve-3d;
|
|
|
- perspective: 1000px;
|
|
|
-}
|
|
|
-
|
|
|
-.three-d-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px) rotateX(5deg) rotateY(5deg);
|
|
|
-}
|
|
|
-
|
|
|
-/* Skeuomorphic Card */
|
|
|
-.skeuomorphic-card {
|
|
|
- @apply bg-gradient-to-br from-amber-200 to-amber-300 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-/* Neumorphism Card */
|
|
|
-.neumorphism-card {
|
|
|
- @apply bg-gray-100 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-/* Flat Card */
|
|
|
-.flat-card {
|
|
|
- @apply bg-gradient-to-br from-red-500 to-red-600 rounded-lg shadow-md overflow-hidden cursor-pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.flat-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
-
|
|
|
-/* Material Card */
|
|
|
-.material-card {
|
|
|
- @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-/* Nordic Card */
|
|
|
-.nordic-card {
|
|
|
- @apply bg-gradient-to-br from-white to-gray-100 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-/* Futuristic Card */
|
|
|
-.futuristic-card {
|
|
|
- @apply bg-gradient-to-br from-cyan-600 to-blue-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
-
|
|
|
-/* Retro Card */
|
|
|
-.retro-card {
|
|
|
- @apply bg-gradient-to-br from-orange-400 to-pink-400 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid #000;
|
|
|
-}
|
|
|
-
|
|
|
-/* Cyberpunk Card */
|
|
|
-.cyberpunk-card {
|
|
|
- @apply bg-gradient-to-r from-pink-600 via-purple-600 to-cyan-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid #ff00ff;
|
|
|
- box-shadow: 0 0 10px #ff00ff;
|
|
|
-}
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Solutions Section -->
|
|
|
+ <section id="solutions" class="py-12 bg-gray-50">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
+ <div class="text-center">
|
|
|
+ <h2 class="text-3xl font-bold text-gray-900">我们的解决方案</h2>
|
|
|
+ <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
|
|
|
+ 针对医疗行业的各种需求，我们提供全面的信息技术解决方案
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
+ <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
|
|
|
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
|
|
|
+ <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">电子病历系统</h3>
|
|
|
+ <p class="text-gray-700">
|
|
|
+ 全面的电子病历管理系统，支持患者信息的安全存储、快速检索和智能分析，提高医疗记录的准确性和可访问性。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
-/* Steampunk Card */
|
|
|
-.steampunk-card {
|
|
|
- @apply bg-gradient-to-r from-amber-800 to-amber-900 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid #8B4513;
|
|
|
-}
|
|
|
+ <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
|
|
|
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
|
|
|
+ <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">医疗数据分析</h3>
|
|
|
+ <p class="text-gray-700">
|
|
|
+ 利用人工智能和机器学习技术，对医疗数据进行深度分析，帮助医生做出更准确的诊断和治疗决策。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
-/* Aurora Card */
|
|
|
-.aurora-card {
|
|
|
- @apply bg-gradient-to-r from-green-500 via-blue-600 to-purple-600 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
+ <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
|
|
|
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
|
|
|
+ <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">远程医疗平台</h3>
|
|
|
+ <p class="text-gray-700">
|
|
|
+ 安全、稳定的远程医疗平台，支持视频问诊、在线咨询和远程监护，让患者随时随地获得专业医疗服务。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Products Section -->
|
|
|
+ <section id="products" class="py-12">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
+ <div class="text-center">
|
|
|
+ <h2 class="text-3xl font-bold text-gray-900">产品服务</h2>
|
|
|
+ <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
|
|
|
+ 我们提供多种医疗IT产品和服务，满足不同规模医疗机构的需求
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
|
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
|
+ <div class="p-6">
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">智能医疗助手</h3>
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 基于人工智能的医疗助手系统，能够理解自然语言，回答医疗问题，提供诊断建议，协助医生进行临床决策。
|
|
|
+ </p>
|
|
|
+ <router-link to="/chatbot" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
|
+ 了解更多 →
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
-/* Minimalist Card */
|
|
|
-.minimalist-card {
|
|
|
- @apply bg-white rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
-}
|
|
|
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
|
+ <div class="p-6">
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">医院管理系统</h3>
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 全面的医院管理系统，包括患者管理、预约挂号、药品管理、财务管理等模块，提高医院运营效率。
|
|
|
+ </p>
|
|
|
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
|
+ 了解更多 →
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
-/* Dark Mode Card */
|
|
|
-.dark-mode-card {
|
|
|
- @apply bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
-}
|
|
|
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
|
+ <div class="p-6">
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">医学影像分析</h3>
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 利用深度学习技术，对X光、CT、MRI等医学影像进行智能分析，辅助医生快速准确地发现病变。
|
|
|
+ </p>
|
|
|
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
|
+ 了解更多 →
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
-.dark-mode-card .text-gray-600 {
|
|
|
- @apply text-gray-400;
|
|
|
-}
|
|
|
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
|
+ <div class="p-6">
|
|
|
+ <h3 class="text-xl font-medium text-gray-900 mb-2">医疗物联网平台</h3>
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 连接各种医疗设备和传感器，实时监测患者生命体征，自动记录健康数据，提供智能预警。
|
|
|
+ </p>
|
|
|
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
|
|
|
+ 了解更多 →
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- About Section -->
|
|
|
+ <section id="about" class="py-12 bg-gray-50">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
+ <div class="text-center">
|
|
|
+ <h2 class="text-3xl font-bold text-gray-900">关于我们</h2>
|
|
|
+ <p class="mt-4 text-lg text-gray-700 max-w-3xl mx-auto">
|
|
|
+ 我们是一家专注于医疗信息技术的创新企业，致力于通过技术提升医疗服务质量
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-12 bg-white rounded-lg shadow-md p-8">
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 医疗智能科技成立于2020年，是一家专注于医疗信息技术的高科技企业。我们的团队由医疗专家、软件工程师和数据科学家组成，拥有丰富的行业经验和技术实力。
|
|
|
+ </p>
|
|
|
+ <p class="text-gray-700 mb-4">
|
|
|
+ 我们的使命是通过创新的技术解决方案，提高医疗服务的效率和质量，让更多人获得更好的医疗服务。我们相信，技术的进步将为医疗行业带来革命性的变化，而我们正在这场变革中扮演着重要的角色。
|
|
|
+ </p>
|
|
|
+ <p class="text-gray-700">
|
|
|
+ 目前，我们的产品和服务已经在全国多家医院和医疗机构得到应用，帮助他们提高了工作效率，改善了患者体验，取得了显著的成效。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- CTA Section -->
|
|
|
+ <section class="py-12 bg-blue-600">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
|
+ <h2 class="text-3xl font-bold text-white">准备好开始使用我们的服务了吗？</h2>
|
|
|
+ <p class="mt-4 text-lg text-blue-100 max-w-3xl mx-auto">
|
|
|
+ 立即登录体验我们的智能医疗助手，或联系我们了解更多产品和服务
|
|
|
+ </p>
|
|
|
+ <div class="mt-8 flex justify-center">
|
|
|
+ <router-link to="/login" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
|
|
|
+ 立即登录
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-gray-800 text-white py-8">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-4">医疗智能科技</h3>
|
|
|
+ <p class="text-gray-400">
|
|
|
+ 提供先进的医疗信息技术解决方案
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-4">解决方案</h3>
|
|
|
+ <ul class="space-y-2 text-gray-400">
|
|
|
+ <li><a href="#" class="hover:text-white">电子病历系统</a></li>
|
|
|
+ <li><a href="#" class="hover:text-white">医疗数据分析</a></li>
|
|
|
+ <li><a href="#" class="hover:text-white">远程医疗平台</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-4">产品服务</h3>
|
|
|
+ <ul class="space-y-2 text-gray-400">
|
|
|
+ <li><a href="#" class="hover:text-white">智能医疗助手</a></li>
|
|
|
+ <li><a href="#" class="hover:text-white">医院管理系统</a></li>
|
|
|
+ <li><a href="#" class="hover:text-white">医学影像分析</a></li>
|
|
|
+ <li><a href="#" class="hover:text-white">医疗物联网平台</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-4">联系我们</h3>
|
|
|
+ <ul class="space-y-2 text-gray-400">
|
|
|
+ <li>地址：北京市海淀区中关村</li>
|
|
|
+ <li>电话：010-12345678</li>
|
|
|
+ <li>邮箱：contact@medtech.com</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
|
|
|
+ <p>© 2025 医疗智能科技 版权所有</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
-/* Glassmorphism Card */
|
|
|
-.glassmorphism-card {
|
|
|
- @apply bg-white/30 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
+<script setup>
|
|
|
+// No additional script needed for this static page
|
|
|
+</script>
|
|
|
|
|
|
-/* 统一悬停效果 */
|
|
|
-.fluent-card:hover,
|
|
|
-.ios-card:hover,
|
|
|
-.element-card:hover,
|
|
|
-.ant-card:hover,
|
|
|
-.morphism-card:hover,
|
|
|
-.holographic-card:hover,
|
|
|
-.gradient-card:hover,
|
|
|
-.neon-card:hover,
|
|
|
-.organic-card:hover,
|
|
|
-.pixel-card:hover,
|
|
|
-.brutalism-card:hover,
|
|
|
-.three-d-card:hover,
|
|
|
-.skeuomorphic-card:hover,
|
|
|
-.neumorphism-card:hover,
|
|
|
-.flat-card:hover,
|
|
|
-.material-card:hover,
|
|
|
-.nordic-card:hover,
|
|
|
-.futuristic-card:hover,
|
|
|
-.retro-card:hover,
|
|
|
-.cyberpunk-card:hover,
|
|
|
-.steampunk-card:hover,
|
|
|
-.aurora-card:hover,
|
|
|
-.minimalist-card:hover,
|
|
|
-.dark-mode-card:hover,
|
|
|
-.glassmorphism-card:hover {
|
|
|
- @apply shadow-lg;
|
|
|
- transform: translateY(-4px);
|
|
|
-}
|
|
|
+<style scoped>
|
|
|
+/* Any additional styles can be added here */
|
|
|
</style>
|
genlitex