| | |
| | | height: 100%; |
| | | } |
| | | .el-card__header{ |
| | | height: 40px; |
| | | padding: 8px 20px; |
| | | height: 55px; |
| | | padding: 18px 20px; |
| | | color: #FFFFFF; |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | } |
| | | #app { |
| | | height: 100%; |
| | |
| | | width: 180px !important; |
| | | height: 180px !important; |
| | | } |
| | | .card1{ |
| | | height: 320px;margin-right: 20px; |
| | | } |
| | | .card-blue .el-card__header{ |
| | | height: 40px; |
| | | padding: 8px 20px; |
| | | background: #1894F6; |
| | | } |
| | | .card-yellow .el-card__header{ |
| | | height: 40px; |
| | | padding: 8px 20px; |
| | | background: #F7931E; |
| | | } |
| | | .card-red .el-card__header{ |
| | | height: 40px; |
| | | padding: 8px 20px; |
| | | background: #FF0000; |
| | | } |
| | | .card-green .el-card__header{ |
| | | height: 40px; |
| | | padding: 8px 20px; |
| | | background: #67C23A; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div id="app" v-cloak> |
| | | <el-row style="height: 200px;"> |
| | | <el-col :span="8"> |
| | | <el-card class="box-card" style="height: 320px;"> |
| | | <el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>场地简介</span> |
| | | </div> |
| | |
| | | </el-col> |
| | | |
| | | <el-col :span="10" > |
| | | <el-card class="box-card" style="height: 320px;"> |
| | | <el-card class="box-card card-yellow" style="height: 320px;margin-right: 20px;"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>场地进度</span> |
| | | <span>钻孔进度</span> |
| | | </div> |
| | | <template> |
| | | <el-table :data="holeData" size="small" style="width: 100%"> |
| | |
| | | </el-col> |
| | | |
| | | <el-col :span="6" > |
| | | <el-card class="box-card" style="height: 320px;"> |
| | | <el-card class="box-card card-red" style="height: 320px;"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>场地进度</span> |
| | | <span>场地进度(%)</span> |
| | | </div> |
| | | <div style=""> |
| | | <el-progress type="dashboard" :percentage="50"> |
| | | </el-progress> |
| | | <div> |
| | | <div style="padding-left: 20%;"> |
| | | <el-progress type="dashboard" color="#FF0000" :percentage="50"> |
| | | </el-progress> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="height: 200px;"> |
| | | <el-col :span="24"> |
| | | <el-card class="box-card card-green" style="height: 320px;margin-top: 20px"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>材料信息</span> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | </div> |
| | | |
| | | |