Spaces:

CYXiaofeng
/

second-care

Running

App Files Files Community

CYXiaofeng commited on Apr 3, 2025

Commit

b981fcb

verified ·

1 Parent(s): 7b148ae

Add 1 files

Browse files

Files changed (1) hide show

index.html +125 -2

index.html CHANGED Viewed

@@ -91,6 +91,41 @@
             background-clip: text;
             color: transparent;
         }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -319,8 +354,86 @@
                     </div>
                 </div>
-                <!-- 服务卡片3 -->
                 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.6s;">
                     <div class="overflow-hidden">
                         <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="智慧康复护理" class="w-full service-image">
                     </div>
@@ -523,6 +636,7 @@
                                 <option value="">请选择服务项目</option>
                                 <option value="home-care">智慧居家养老</option>
                                 <option value="institution-care">智慧养老社区</option>
                                 <option value="rehabilitation">智慧康复护理</option>
                                 <option value="other">其他服务</option>
                             </select>
@@ -655,8 +769,8 @@
                     <ul class="space-y-2">
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧居家养老</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧养老社区</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧康复护理</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智能健康监测</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI护理助手</a></li>
                     </ul>
                 </div>
@@ -758,6 +872,15 @@
         // 滚动时执行
         window.addEventListener('scroll', animateOnScroll);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=CYXiaofeng/second-care" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>

             background-clip: text;
             color: transparent;
         }
+        /* 新增服务详情样式 */
+        .service-detail {
+            position: relative;
+            padding-left: 1.5rem;
+        }
+        .service-detail:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0.7rem;
+            width: 0.5rem;
+            height: 0.5rem;
+            background-color: #10B981;
+            border-radius: 50%;
+        }
+        .service-collapse {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .service-collapse.show {
+            max-height: 1000px;
+        }
+        .toggle-icon {
+            transition: transform 0.3s ease;
+        }
+        .toggle-icon.rotate {
+            transform: rotate(180deg);
+        }
     </style>
 </head>
 <body class="bg-gray-50">
                     </div>
                 </div>
+                <!-- 服务卡片3 - 新增日间照料与上门服务 -->
                 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.6s;">
+                    <div class="overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="日间照料与上门服务" class="w-full service-image">
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-purple-100 p-2 rounded-full mr-3">
+                                <i class="fas fa-hands-helping text-purple-500 text-xl"></i>
+                            </div>
+                            <h3 class="text-xl font-bold text-gray-800">日间照料与上门服务</h3>
+                        </div>
+                        <p class="text-gray-600 mb-4">专业护理人员提供全方位生活照料与健康管理服务</p>
+                        <!-- 1. 生活照料 -->
+                        <div class="mb-4">
+                            <button class="flex items-center justify-between w-full text-left font-medium text-gray-800" onclick="toggleServiceDetail('life-care')">
+                                <span>1. 生活照料</span>
+                                <i class="fas fa-chevron-down toggle-icon" id="life-care-icon"></i>
+                            </button>
+                            <div id="life-care" class="service-collapse pl-4 mt-2">
+                                <div class="service-detail mb-2">助浴、助餐、助洁等日常生活照料</div>
+                                <div class="service-detail mb-2">1.1 一对一上门服务</div>
+                                <div class="service-detail">1.2 集中养老服务（暂无）</div>
+                            </div>
+                        </div>
+                        <!-- 2. 健康管理 -->
+                        <div class="mb-4">
+                            <button class="flex items-center justify-between w-full text-left font-medium text-gray-800" onclick="toggleServiceDetail('health-management')">
+                                <span>2. 健康管理</span>
+                                <i class="fas fa-chevron-down toggle-icon" id="health-management-icon"></i>
+                            </button>
+                            <div id="health-management" class="service-collapse pl-4 mt-2">
+                                <div class="service-detail mb-2">2.1 健康监测（血压、血糖等指标检测）</div>
+                                <div class="service-detail mb-2">2.2 康复训练指导</div>
+                                <div class="service-detail">2.3 慢性病管理</div>
+                            </div>
+                        </div>
+                        <!-- 3. 医护与护理 -->
+                        <div class="mb-4">
+                            <button class="flex items-center justify-between w-full text-left font-medium text-gray-800" onclick="toggleServiceDetail('medical-care')">
+                                <span>3. 医护与护理</span>
+                                <i class="fas fa-chevron-down toggle-icon" id="medical-care-icon"></i>
+                            </button>
+                            <div id="medical-care" class="service-collapse pl-4 mt-2">
+                                <div class="font-medium mb-1">3.1 专业基础护理（专业资质）</div>
+                                <div class="service-detail mb-1 pl-4">3.1.1 灌肠护理</div>
+                                <div class="service-detail mb-1 pl-4">3.1.2 ���腔护理</div>
+                                <div class="service-detail mb-1 pl-4">3.1.3 导尿护理</div>
+                                <div class="service-detail mb-1 pl-4">3.1.4 创伤面评估</div>
+                                <div class="service-detail mb-2 pl-4">3.1.5 护药服务</div>
+                                <div class="service-detail mb-2">3.2 居家护理服务</div>
+                                <div class="service-detail">3.3 家庭医生签约服务</div>
+                            </div>
+                        </div>
+                        <!-- 4. 生活与心理关怀 -->
+                        <div>
+                            <button class="flex items-center justify-between w-full text-left font-medium text-gray-800" onclick="toggleServiceDetail('psychological-care')">
+                                <span>4. 生活与心理关怀</span>
+                                <i class="fas fa-chevron-down toggle-icon" id="psychological-care-icon"></i>
+                            </button>
+                            <div id="psychological-care" class="service-collapse pl-4 mt-2">
+                                <div class="service-detail mb-2">4.1 文娱活动组织</div>
+                                <div class="service-detail mb-2">4.2 营养膳食指导</div>
+                                <div class="service-detail mb-2">4.3 居家环境改造建议</div>
+                                <div class="service-detail">4.4 临终关怀</div>
+                            </div>
+                        </div>
+                        <a href="#contact" class="mt-4 text-green-600 font-medium inline-flex items-center group">
+                            立即预约 <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform duration-300"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- 服务卡片4 -->
+                <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.8s;">
                     <div class="overflow-hidden">
                         <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="智慧康复护理" class="w-full service-image">
                     </div>
                                 <option value="">请选择服务项目</option>
                                 <option value="home-care">智慧居家养老</option>
                                 <option value="institution-care">智慧养老社区</option>
+                                <option value="day-care">日间照料与上门服务</option>
                                 <option value="rehabilitation">智慧康复护理</option>
                                 <option value="other">其他服务</option>
                             </select>
                     <ul class="space-y-2">
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧居家养老</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧养老社区</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">日间照料与上门服务</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">智慧康复护理</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI护理助手</a></li>
                     </ul>
                 </div>
         // 滚动时执行
         window.addEventListener('scroll', animateOnScroll);
+        // 服务详情展开/收起功能
+        function toggleServiceDetail(id) {
+            const element = document.getElementById(id);
+            const icon = document.getElementById(`${id}-icon`);
+            element.classList.toggle('show');
+            icon.classList.toggle('rotate');
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=CYXiaofeng/second-care" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>