| | |
| | | <!-- 右侧数据 --> |
| | | <div class="leftvlue"> |
| | | <div> |
| | | <el-row :gutter="8"> |
| | | <el-col :span="2.5"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="2.5" v-for="(item,index) in cardlist" :key="index"> |
| | | <el-card shadow="hover"> |
| | | <div style="padding: 10px"> |
| | | <span>患者总数</span> |
| | | <div class="bottom clearfix">1232</div> |
| | | <div style="padding: 8px"> |
| | | <span>{{item.name}}</span> |
| | | <div style="text-align: center; font-size: 18px; margin-top: 10px; font-weight: 600;">{{item.value}}</div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="2.5"> |
| | | <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> |
| | | </el-col> |
| | | <el-col :span="2.5"> |
| | | <el-card shadow="hover"> 从不显示 </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | |
| | | tagname: undefined, |
| | | tagdescription: undefined, |
| | | }, |
| | | cardlist:[ |
| | | { |
| | | name:'患者总数', |
| | | value:123 |
| | | }, |
| | | { |
| | | name:'在院患者', |
| | | value:23 |
| | | }, |
| | | { |
| | | name:'离院患者', |
| | | value:41 |
| | | }, |
| | | { |
| | | name:'诊疗患者', |
| | | value:56 |
| | | }, |
| | | { |
| | | name:'离世患者', |
| | | value:0 |
| | | }, |
| | | ], |
| | | // 列信息 |
| | | columns: [ |
| | | { key: 0, label: `标签编号`, visible: true }, |
| | |
| | | margin-top: 20px; |
| | | margin: 20px; |
| | | padding: 30px; |
| | | background: #edf1f7; |
| | | background: #d0e9fd; |
| | | border: 1px solid #dcdfe6; |
| | | -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), |
| | | 0 0 6px 0 rgba(0, 0, 0, 0.04); |
| | |
| | | text-align: left; |
| | | font-size: 20px; |
| | | } |
| | | |
| | | ::v-deep.leftvlue .el-card__body{ |
| | | background: #d0e9fd; |
| | | } |
| | | ::v-deep.leftvlue .el-card__body:hover{ |
| | | background: #8dc8f8; |
| | | } |
| | | .leftvlue{ |
| | | width: 80%; |
| | | margin-top: 10px; |
| | | } |
| | | .leftvlue-bg { |
| | | // display: flex; |
| | | // flex: 1; |
| | | width: 80%; |
| | | margin-top: 20px; |
| | | // margin: 20px; |
| | | padding: 30px; |