学习10

老年评估系统有关代码
常见问题解答

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见问题解答 - 老年人评估系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .header {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
        }

        .main-content {
            padding: 40px 0;
        }
        /* 搜索框样式 */
        .search-wrap {
            padding: 10px 0;
        }

        .search-box {
            display: flex;
            margin-bottom: 10px;
        }

        .search-box input {
            flex: 1;
            padding: 8px 15px;
            border: 2px solid #007bff;
            border-right: none;
            border-radius: 4px 0 0 4px;
            outline: none;
        }

        .search-box button {
            padding: 8px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .hot-search {
            font-size: 14px;
            color: #666;
        }
         /* 导航栏样式 */
         .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .navbar {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .navbar-style .nav-link:hover,
        .navbar-style .nav-link.active {
            background-color: #0056b3;
        }

        /* FAQ 卡片样式 */
        .faq-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .faq-header {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 20px 30px;
        }

        .faq-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }

        .faq-body {
            padding: 30px;
        }

        .faq-item {
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 25px;
            transition: transform 0.3s ease;
        }

        .faq-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .faq-item:hover {
            transform: translateX(10px);
        }

        .faq-question {
            display: flex;
            align-items: start;
            margin-bottom: 15px;
            cursor: pointer;
        }

        .question-icon {
            background: #007bff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .question-text {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .faq-answer {
            display: flex;
            align-items: start;
            margin-left: 45px;
        }

        .answer-text {
            color: #666;
            line-height: 1.6;
            font-size: 16px;
        }

        /* 分类标签样式 */
        .faq-categories {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .category-btn {
            padding: 8px 20px;
            border: none;
            border-radius: 20px;
            background: #f8f9fa;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .category-btn:hover,
        .category-btn.active {
            background: #007bff;
            color: white;
        }

        /* 搜索框样式 */
        .faq-search {
            margin-bottom: 30px;
        }

        .search-box {
            display: flex;
            gap: 10px;
        }

        .search-input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid #eee;
            border-radius: 25px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #007bff;
        }

        .search-btn {
            padding: 12px 30px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .search-btn:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <!-- 导航栏部分与原页面相同 -->
    <div class="header">
        <div class="containter">
            <div class="row">
                <div class="col-lg-8 col-md-6">
                    <a href="#" class="logo">
                        <img src="#" alt="">
                    </a>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="search-wrap">
                        <form action="/Serach" method="get" class="search-box" target="_blank">
                            <input type="text" name="keys" autocomplete="off" value>
                            <button type="submit">搜索</button>
                        </form>
                        <dl class="hot-search">
                            <dt>
                                <span>热门搜索:</span>
                            </dt>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar-style">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" href="./index.html">首页</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="assessmentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                老年人定期评估
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="assessmentDropdown">
                                <li><a class="dropdown-item" href="./评估目的.html">评估目的</a></li>
                                <li><a class="dropdown-item" href="./评估重要性.html">评估重要性</a></li>
                                <li><a class="dropdown-item" href="./评估指标和方法.html">评估指标和方法</a></li>
                                <li><a class="dropdown-item" href="./评估问卷.html">评估问卷</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./通知公告.html">通知公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./常见问题解答.html">常见问题解答</a>
                        <!-- </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">专家老师</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">课程中心</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="./联系方式.html">联系方式</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="#">证书查询</a>
                        </li> -->
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="main-content">
        <div class="container">
            <!-- 搜索框 -->
            <div class="faq-search">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索常见问题...">
                    <button class="search-btn">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </div>

            <!-- 问题分类 -->
            <div class="faq-categories">
                <button class="category-btn active">全部问题</button>
                <button class="category-btn">评估流程</button>
                <button class="category-btn">费用说明</button>
                <button class="category-btn">隐私保护</button>
                <button class="category-btn">结果查询</button>
            </div>

            <!-- FAQ内容 -->
            <div class="faq-card">
                <div class="faq-header">
                    <h2><i class="fas fa-question-circle me-2"></i>常见问题解答</h2>
                </div>
                <div class="faq-body">
                    <!-- 问题1 -->
                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-icon">Q</div>
                            <div class="question-text">评估需要多长时间?</div>
                        </div>
                        <div class="faq-answer">
                            <div class="answer-text">
                                一般评估时间约为30-45分钟,具体时间可能因个人情况有所不同。评估包括基本信息采集、身体机能测试、认知能力评估等环节。建议预留1小时时间,以确保评估可以从容完成。
                            </div>
                        </div>
                    </div>

                    <!-- 问题2 -->
                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-icon">Q</div>
                            <div class="question-text">评估需要付费吗?</div>
                        </div>
                        <div class="faq-answer">
                            <div class="answer-text">
                                基础评估项目是免费的,这是政府提供的基本公共服务。如需进行特殊项目或深入评估,可能需要支付少量费用,具体收费标准请咨询评估中心。部分医保定点机构可能支持医保报销。
                            </div>
                        </div>
                    </div>

                    <!-- 问题3 -->
                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-icon">Q</div>
                            <div class="question-text">评估结果是否保密?</div>
                        </div>
                        <div class="faq-answer">
                            <div class="answer-text">
                                是的,我们严格遵守隐私保护规定。您的评估结果将被严格保密,只有您本人和经授权的医护人员可以查看。未经您的同意,我们不会向任何第三方透露您的个人信息和评估结果。
                            </div>
                        </div>
                    </div>

                    <!-- 问题4 -->
                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-icon">Q</div>
                            <div class="question-text">多久需要进行一次评估?</div>
                        </div>
                        <div class="faq-answer">
                            <div class="answer-text">
                                建议每年进行一次常规评估。如果您有特殊健康状况或情况发生明显变化,可以根据医生建议适当增加评估频率。定期评估有助于及时发现潜在问题并进行干预。
                            </div>
                        </div>
                    </div>

                    <!-- 问题5 -->
                    <div class="faq-item">
                        <div class="faq-question">
                            <div class="question-icon">Q</div>
                            <div class="question-text">如何预约评估?</div>
                        </div>
                        <div class="faq-answer">
                            <div class="answer-text">
                                您可以通过以下方式预约评估:
                                <br>1. 在线预约:登录系统网站进行预约
                                <br>2. 电话预约:拨打服务热线
                                <br>3. 现场预约:直接到评估中心进行预约
                                建议提前3-5个工作日预约,以确保安排到合适的时间段。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

通知公告

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知公告 - 老年人评估系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .header {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
        }

        .main-content {
            padding: 40px 0;
        }

        /* 通知列表样式 */
        .notice-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .notice-header {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notice-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }

        .notice-filters {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        .filter-group {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .filter-label {
            color: #666;
            font-weight: 500;
        }

        .notice-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .notice-item {
            padding: 20px 30px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notice-item:last-child {
            border-bottom: none;
        }

        .notice-item:hover {
            background-color: #f8f9fa;
            transform: translateX(10px);
        }

        .notice-content {
            flex: 1;
        }

        .notice-title {
            color: #333;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .notice-title:hover {
            color: #007bff;
        }

        .notice-title i {
            margin-right: 10px;
            color: #007bff;
        }

        .notice-meta {
            display: flex;
            gap: 20px;
            color: #666;
            font-size: 14px;
        }

        .notice-date {
            color: #666;
            font-size: 14px;
            min-width: 80px;
            text-align: right;
        }

        .notice-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 10px;
            color: white;
            background-color: #007bff;
        }
        /* 搜索框样式 */
        .search-wrap {
            padding: 10px 0;
        }

        .search-box {
            display: flex;
            margin-bottom: 10px;
        }

        .search-box input {
            flex: 1;
            padding: 8px 15px;
            border: 2px solid #007bff;
            border-right: none;
            border-radius: 4px 0 0 4px;
            outline: none;
        }

        .search-box button {
            padding: 8px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .hot-search {
            font-size: 14px;
            color: #666;
        }

         /* 导航栏样式 */
         .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .navbar {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .navbar-style .nav-link:hover,
        .navbar-style .nav-link.active {
            background-color: #0056b3;
        }

        /* 分页样式 */
        .pagination-wrapper {
            margin-top: 30px;
            display: flex;
            justify-content: center;
        }

        .pagination .page-link {
            color: #007bff;
            border: none;
            padding: 10px 15px;
        }

        .pagination .page-item.active .page-link {
            background-color: #007bff;
            color: white;
        }

        .pagination .page-link:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <!-- 导航栏部分与原页面相同 -->
    <div class="header">
        <div class="containter">
            <div class="row">
                <div class="col-lg-8 col-md-6">
                    <a href="#" class="logo">
                        <img src="#" alt="">
                    </a>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="search-wrap">
                        <form action="/Serach" method="get" class="search-box" target="_blank">
                            <input type="text" name="keys" autocomplete="off" value>
                            <button type="submit">搜索</button>
                        </form>
                        <dl class="hot-search">
                            <dt>
                                <span>热门搜索:</span>
                            </dt>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar-style">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" href="./index.html">首页</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="assessmentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                老年人定期评估
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="assessmentDropdown">
                                <li><a class="dropdown-item" href="./评估目的.html">评估目的</a></li>
                                <li><a class="dropdown-item" href="./评估重要性.html">评估重要性</a></li>
                                <li><a class="dropdown-item" href="./评估指标和方法.html">评估指标和方法</a></li>
                                <li><a class="dropdown-item" href="./评估问卷.html">评估问卷</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./通知公告.html">通知公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./常见问题解答.html">常见问题解答</a>
                        <!-- </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">专家老师</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">课程中心</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="./联系方式.html">联系方式</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="#">证书查询</a>
                        </li> -->
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="main-content">
        <div class="container">
            <div class="notice-card">
                <div class="notice-header">
                    <h2><i class="fas fa-bullhorn me-2"></i>通知公告</h2>
                    <div class="notice-stats">
                        共 <span class="text-warning">3</span> 条通知
                    </div>
                </div>

                <div class="notice-filters">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="filter-group">
                                <span class="filter-label">时间范围:</span>
                                <select class="form-select">
                                    <option>全部时间</option>
                                    <option>最近一周</option>
                                    <option>最近一月</option>
                                    <option>最近三月</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="filter-group">
                                <span class="filter-label">通知类型:</span>
                                <select class="form-select">
                                    <option>全部类型</option>
                                    <option>工作安排</option>
                                    <option>结果公示</option>
                                    <option>培训通知</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="搜索通知...">
                                <button class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <ul class="notice-list">
                    <!-- 通知1 -->
                    <li class="notice-item">
                        <div class="notice-content">
                            <a href="#" class="notice-title">
                                <i class="fas fa-file-alt"></i>
                                <span class="notice-tag">工作安排</span>
                                关于2024年第一季度老年人能力评估工作安排的通知
                            </a>
                            <div class="notice-meta">
                                <span><i class="far fa-user"></i> 发布人:管理员</span>
                                <span><i class="far fa-eye"></i> 浏览:328</span>
                            </div>
                        </div>
                        <div class="notice-date">
                            2024-03-01
                        </div>
                    </li>

                    <!-- 通知2 -->
                    <li class="notice-item">
                        <div class="notice-content">
                            <a href="#" class="notice-title">
                                <i class="fas fa-file-alt"></i>
                                <span class="notice-tag">结果公示</span>
                                2023年度评估结果公示通知
                            </a>
                            <div class="notice-meta">
                                <span><i class="far fa-user"></i> 发布人:管理员</span>
                                <span><i class="far fa-eye"></i> 浏览:256</span>
                            </div>
                        </div>
                        <div class="notice-date">
                            2024-02-15
                        </div>
                    </li>

                    <!-- 通知3 -->
                    <li class="notice-item">
                        <div class="notice-content">
                            <a href="#" class="notice-title">
                                <i class="fas fa-file-alt"></i>
                                <span class="notice-tag">培训通知</span>
                                关于开展老年人能力评估师培训的通知
                            </a>
                            <div class="notice-meta">
                                <span><i class="far fa-user"></i> 发布人:管理员</span>
                                <span><i class="far fa-eye"></i> 浏览:195</span>
                            </div>
                        </div>
                        <div class="notice-date">
                            2024-02-01
                        </div>
                    </li>
                </ul>

                <!-- 分页 -->
                <div class="pagination-wrapper">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

评估重要性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评估重要性 - 老年人评估系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .header {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
        }

        .main-content {
            padding: 40px 0;
        }
        /* 搜索框样式 */
        .search-wrap {
            padding: 10px 0;
        }

        .search-box {
            display: flex;
            margin-bottom: 10px;
        }

        .search-box input {
            flex: 1;
            padding: 8px 15px;
            border: 2px solid #007bff;
            border-right: none;
            border-radius: 4px 0 0 4px;
            outline: none;
        }

        .search-box button {
            padding: 8px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .hot-search {
            font-size: 14px;
            color: #666;
        }

        /* 导航栏样式 */
        .navbar-style {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .navbar {
            background: #007bff !important;
            padding: 0;
        }

        .navbar-style .nav-link {
            color: white !important;
            padding: 15px 20px !important;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .navbar-style .nav-link:hover,
        .navbar-style .nav-link.active {
            background-color: #0056b3;
        }

        /* 页面标题样式 */
        .page-title {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            padding-bottom: 15px;
        }

        .page-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #007bff, #00a0ff);
        }

        /* 重要性卡片样式 */
        .importance-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .importance-card:hover {
            transform: translateY(-5px);
        }

        .importance-header {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 20px;
            position: relative;
        }

        .importance-header h2 {
            margin: 0;
            font-size: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .importance-body {
            padding: 30px;
        }

        /* 重要性项目样式 */
        .importance-item {
            background: #fff;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            border-left: 4px solid #007bff;
        }

        .importance-item:hover {
            transform: translateX(10px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .importance-item h3 {
            color: #007bff;
            font-size: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .importance-item p {
            color: #666;
            line-height: 1.8;
            margin: 0;
            font-size: 16px;
        }

        .importance-icon {
            width: 50px;
            height: 50px;
            background: rgba(0,123,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .importance-icon i {
            font-size: 24px;
            color: #007bff;
        }

        /* 补充信息样式 */
        .additional-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
        }

        .additional-info h4 {
            color: #007bff;
            margin-bottom: 15px;
        }

        .additional-info ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .additional-info li {
            padding: 10px 0;
            border-bottom: 1px dashed #dee2e6;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .additional-info li:last-child {
            border-bottom: none;
        }

        .additional-info i {
            color: #007bff;
        }
    </style>
</head>
<body>
    <!-- 导航栏部分与原页面相同 -->
    <div class="header">
        <div class="containter">
            <div class="row">
                <div class="col-lg-8 col-md-6">
                    <a href="#" class="logo">
                        <img src="#" alt="">
                    </a>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="search-wrap">
                        <form action="/Serach" method="get" class="search-box" target="_blank">
                            <input type="text" name="keys" autocomplete="off" value>
                            <button type="submit">搜索</button>
                        </form>
                        <dl class="hot-search">
                            <dt>
                                <span>热门搜索:</span>
                            </dt>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar-style">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" href="./index.html">首页</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="assessmentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                老年人定期评估
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="assessmentDropdown">
                                <li><a class="dropdown-item" href="./评估目的.html">评估目的</a></li>
                                <li><a class="dropdown-item" href="./评估重要性.html">评估重要性</a></li>
                                <li><a class="dropdown-item" href="./评估指标和方法.html">评估指标和方法</a></li>
                                <li><a class="dropdown-item" href="./评估问卷.html">评估问卷</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./通知公告.html">通知公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./常见问题解答.html">常见问题解答</a>
                        <!-- </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">专家老师</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">课程中心</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="./联系方式.html">联系方式</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="#">证书查询</a>
                        </li> -->
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="main-content">
        <div class="container">
            <h1 class="page-title">评估重要性</h1>

            <div class="importance-card">
                <div class="importance-header">
                    <h2><i class="fas fa-star"></i> 老年人能力评估的重要性</h2>
                </div>
                <div class="importance-body">
                    <!-- 重要性项目1 -->
                    <div class="importance-item">
                        <div class="importance-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3><i class="fas fa-check-circle"></i> 及时发现老年人能力的变化</h3>
                        <p>通过定期评估,我们可以:</p>
                        <ul class="mt-3">
                            <li>及时监测老年人身体机能的变化趋势</li>
                            <li>早期发现潜在的健康问题</li>
                            <li>评估日常生活自理能力的变化</li>
                            <li>观察认知能力和心理状态的变化</li>
                        </ul>
                    </div>

                    <!-- 重要性项目2 -->
                    <div class="importance-item">
                        <div class="importance-icon">
                            <i class="fas fa-cog"></i>
                        </div>
                        <h3><i class="fas fa-check-circle"></i> 及时调整养老服务方案</h3>
                        <p>根据评估结果,我们能够:</p>
                        <ul class="mt-3">
                            <li>制定个性化的照护计划</li>
                            <li>调整现有的服务内容和频率</li>
                            <li>优化康复训练方案</li>
                            <li>提供更适合的生活辅助设施</li>
                        </ul>
                    </div>

                    <!-- 重要性项目3 -->
                    <div class="importance-item">
                        <div class="importance-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3><i class="fas fa-check-circle"></i> 保障老年人的生活质量</h3>
                        <p>通过科学评估和及时干预,我们可以:</p>
                        <ul class="mt-3">
                            <li>提高日常生活的舒适度和安全性</li>
                            <li>增强老年人的生活自理能力</li>
                            <li>改善心理健康状况</li>
                            <li>促进社会参与和人际交往</li>
                        </ul>
                    </div>

                    <!-- 补充信息 -->
                    <div class="additional-info">
                        <h4><i class="fas fa-info-circle"></i> 补充说明</h4>
                        <ul>
                            <li><i class="fas fa-clock"></i> 建议每年至少进行一次全面评估</li>
                            <li><i class="fas fa-user-md"></i> 评估由专业的医护人员和养老服务人员共同完成</li>
                            <li><i class="fas fa-file-alt"></i> 评估结果将形成详细报告,并提供个性化建议</li>
                            <li><i class="fas fa-shield-alt"></i> 所有评估信息严格保密,保护老年人隐私</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
posted @ 2025-02-08 10:35  haoyinuo  阅读(15)  评论(0)    收藏  举报