|  |  | 
 |  |  |     <!-- 右侧数据 --> | 
 |  |  |     <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; |