Home Explore Help
Register Sign In
genlitex
/
prototype_design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

hunk-2025-04-28 02:28:05

genlitex 3 weeks ago
parent
e3b134922f
commit
d3d8900030
7 changed files with 261 additions and 335 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-B8xzzdcR.css
  2. 0 0
      dist/assets/index-BKcODZ1N.css
  3. 4 0
      dist/assets/index-D1L7uIt-.js
  4. 0 4
      dist/assets/index-Dw0nKTiY.js
  5. 2 2
      dist/index.html
  6. 242 327
      src/views/HomeView.vue
  7. 13 2
      src/views/LoginView.vue

File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-B8xzzdcR.css


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-BKcODZ1N.css


File diff suppressed because it is too large
+ 4 - 0
dist/assets/index-D1L7uIt-.js


File diff suppressed because it is too large
+ 0 - 4
dist/assets/index-Dw0nKTiY.js


+ 2 - 2
dist/index.html
View File 

@@ -5,8 +5,8 @@
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Vite + Vue</title>
 
     <title>Vite + Vue</title>
 
-    <script type="module" crossorigin src="/ide/proxy/6004/assets/index-Dw0nKTiY.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/ide/proxy/6004/assets/index-BKcODZ1N.css">
 
+    <script type="module" crossorigin src="/ide/proxy/6005/assets/index-D1L7uIt-.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6005/assets/index-B8xzzdcR.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 242 - 327
src/views/HomeView.vue
View File 

@@ -1,338 +1,253 @@
 
 <template>
 
 <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>
 
           </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>
 
-  </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>
 
 </style>

+ 13 - 2
src/views/LoginView.vue
View File 

@@ -72,6 +72,7 @@
 
 
 
 <script setup>
 
 <script setup>
 
 import { ref } from 'vue';
 
 import { ref } from 'vue';
 
+import { useRouter } from 'vue-router';
 
 import { Globe } from 'lucide-vue-next';
 
 import { Globe } from 'lucide-vue-next';
 
 
 
 // State Variables
 
 // State Variables
 
@@ -81,6 +82,8 @@ const rememberMe = ref(false);
 
 const language = ref('zh');
 
 const language = ref('zh');
 
 
 
 // Methods
 
 // Methods
 
+const router = useRouter();
 
+
 
 const handleLogin = () => {
 
 const handleLogin = () => {
 
   console.log('Login attempt:', { 
   console.log('Login attempt:', { 
     username: username.value, 
     username: username.value, 
@@ -88,7 +91,13 @@ const handleLogin = () => {
 
     rememberMe: rememberMe.value,
 
     rememberMe: rememberMe.value,
 
     language: language.value
 
     language: language.value
 
   });
 
   });
 
-  // Add actual login logic here
 
+
 
+  // Simple authentication check
 
+  if (username.value === 'admin' && password.value === 'admin') {
 
+    router.push({ name: 'Chatbot' });
 
+  } else {
 
+    alert('Invalid credentials');
 
+  }
 
 };
 
 };
 
 </script>
 
 </script>
 
 
 
@@ -164,8 +173,9 @@ const handleLogin = () => {
 
   flex: 1;
 
   flex: 1;
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
 
-  align-items: center;
 
+  align-items: flex-end;
 
   padding: 20px;
 
   padding: 20px;
 
+  height: 100%; /* Ensure it takes up the full height */
 
 }
 
 }
 
 
 
 .login-card {
 
 .login-card {
 
@@ -176,6 +186,7 @@ const handleLogin = () => {
 
   width: 100%;
 
   width: 100%;
 
   max-width: 420px;
 
   max-width: 420px;
 
   text-align: left;
 
   text-align: left;
 
+  margin-bottom: 20px; /* Add margin to ensure spacing from the bottom */
 
 }
 
 }
 
 
 
 .greeting {
 
 .greeting {

Some files were not shown because too many files changed in this diff