| | |
| | | <template> |
| | | <div class="main"> |
| | | <el-row style=" height: 40px;"> |
| | | <el-col :span="9"><div> </div></el-col> |
| | | <el-col :span="9"><p /></el-col> |
| | | <el-col :span="15"> |
| | | <ul class="data-ul"> |
| | | <li :class="{selectedColor:selectIndex === 0}" @click="selectTab(0)">今日</li> |
| | | <li :class="{selectedColor:selectIndex === 1}" @click="selectTab(1)">本周</li> |
| | | <li :class="{selectedColor:selectIndex === 2}" @click="selectTab(2)">本月</li> |
| | | <li :class="{selectedColor:selectIndex === 3}" @click="selectTab(3)">今年</li> |
| | | <li :class="{ selectedColor: selectIndex === 0 }" @click="selectTab(0)"> |
| | | 今日 |
| | | </li> |
| | | <li :class="{ selectedColor: selectIndex === 1 }" @click="selectTab(1)"> |
| | | 本周 |
| | | </li> |
| | | <li :class="{ selectedColor: selectIndex === 2 }" @click="selectTab(2)"> |
| | | 本月 |
| | | </li> |
| | | <li :class="{ selectedColor: selectIndex === 3 }" @click="selectTab(3)"> |
| | | 今年 |
| | | </li> |
| | | </ul> |
| | | <span style=" font-size: 16px; color: #333333;"> 时间段:</span> |
| | | <el-date-picker |
| | |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>在职员工总数</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>离职员工总数</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>新进人员</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>正常离职人员</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>自动离职人员</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>有效合同</p> |
| | | </el-card> |
| | |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>到期合同</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>新签合同</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>续签合同</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>历史合同</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>出勤天数</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工请假</p> |
| | | </el-card> |
| | |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工加班(天)</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工加班(小时)</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工旷工</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>证件到期</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工调岗</p> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-card shadow="always"> |
| | | <el-card shadow="always" class="card-info"> |
| | | <p class="card-number">12</p> |
| | | <p>员工体检</p> |
| | | </el-card> |
| | |
| | | value2: '', |
| | | selectIndex: 0 // 搜索结果,被选中的li index |
| | | } |
| | | }, methods: { |
| | | }, |
| | | methods: { |
| | | selectTab(index) { |
| | | this.selectIndex = index |
| | | } |
| | |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | .main{ |
| | | padding: 20px; |
| | | .data-ul { |
| | | margin-right: 40px; |
| | | margin-top: 0px; |
| | | list-style: none; |
| | | float: left; |
| | | li { |
| | | float: left; |
| | | width: 60px; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #333333; |
| | | } |
| | | li:hover { |
| | | color:#931e1e; |
| | | border-bottom:2px solid #931e1e; |
| | | .main { |
| | | padding: 20px; |
| | | .data-ul { |
| | | margin-right: 40px; |
| | | margin-top: 0px; |
| | | list-style: none; |
| | | float: left; |
| | | li { |
| | | float: left; |
| | | width: 60px; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #333333; |
| | | } |
| | | li:hover { |
| | | color: #931e1e; |
| | | border-bottom: 2px solid #931e1e; |
| | | } |
| | | } |
| | | } |
| | | .selectedColor { |
| | | color: #931e1e; |
| | | border-bottom: 2px solid #931e1e; |
| | | } |
| | | .selectedColor{ |
| | | color:#931e1e; |
| | | border-bottom:2px solid #931e1e; |
| | | .el-card__body { |
| | | text-align: center; |
| | | .card-number { |
| | | color: #931e1e; |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | .el-card__body{ |
| | | text-align: center; |
| | | .card-number{ |
| | | color:#931e1e; |
| | | font-size:20px; |
| | | } |
| | | } |
| | | .el-card__body:hover{ |
| | | text-align: center; |
| | | background-color: #931e1e; |
| | | color:#fff; |
| | | .card-number{ |
| | | color:#fff; |
| | | font-size:20px; |
| | | |
| | | } |
| | | .card-info:hover { |
| | | text-align: center; |
| | | background-color: #931e1e; |
| | | color: #fff; |
| | | .card-number { |
| | | color: #fff; |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | .el-row { |
| | | margin-bottom: 20px; |
| | |
| | | <style lang="scss" scoped> |
| | | .data-ul { |
| | | li { |
| | | line-height: 40px; |
| | | } |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | </style> |