elizebeth/src/xt_pages/user/evaluationtool/dailyLife.vue

<!--  日常生活能力评估 -->
<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-4"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
               
                <div class='content_top' style="width: 100%;margin-bottom: 20px;">
                    <div style="font-size: 20px;"> 日常生活能力评定(ADL评估)表</div>
                    <div>
                        <el-button>历史评分</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                            <tr>
                                <th style="width: 150px;">项目</th>
                                <th>分值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bg_color">
                                <td class="start">进食</td>
                                <td class="start">进食</td>
                                <td class="start">进食</td>
                                <td class="start">进食</td>
                            </tr>
            
                            <tr>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            
                            <tr class="bg_color">
                                <td class="start">修饰</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            
                            <tr>
                                <td class="start">穿衣</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            <tr class="bg_color">
                                <td class="start">控制大便</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
            
                            <tr>
                                <td class="start">控制小便</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            
                            <tr class="bg_color">
                                <td class="start">如厕</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            
                            <tr>
                                <td class="start">床椅转移</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            <tr class="bg_color">
                                <td class="start">平地行走</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                            
                            <tr>
                                <td class="start">上下楼梯</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                                <td class="start">洗澡</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="content_top" style="margin: 10px 0px;">
                    <div>
                        <div class="bottoms">
                        <span>总分:</span>
                        <el-input v-model="input" placeholder="请输入内容" style="width: 100px;"></el-input>分
                        </div>

                        <div class="bottoms">
                            <span>评估日期:</span>
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期"
                                :clearable="false"
                                style="width: 150px;">
                            </el-date-picker>
                        </div>

                        <div class="bottoms">
                            <span>评估人:</span>
                            <el-select v-model="value" placeholder="请选择" >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                style="width:150px;">
                                </el-option>
                            </el-select>
                        </div>
                        
                    </div>
                    <div style="margin:5px 10px;">
                            <el-button type="primary">确认</el-button>
                    </div>
                </div>
                <hr/>
                <div class="shuoming">
                    <p>说明：</p>
                    <p>一级 无需依赖 100分</p>
                    <p>二级 轻度依赖 61-99分</p>
                    <p>三级 中度依赖 41-60分</p>
                    <p>四级 重度依赖 ≤40分</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
        return{
            patientID:0,
            value:'',
            options:[],
        }
    }
}
</script>
<style lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between; 
    }
    .table{
        border: 1px solid #DCDFE6;
        border-collapse:collapse;
        border-spacing: 0;
        thead th{
            background: #0077ff9f;
            color: white;
            text-align: center;
            height: 40px;
        }
        tbody td{
           height: 40px;
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .jiange{
            margin-left: 20px;
            color: black;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
    .shuoming p{
      margin-top: 5px;
      color: rgb(167, 165, 165);
    }
</style>