<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<title>Document</title>
</head>
<body>
<div class="main">
<div class="flex1">
<div class="flex1-left">
<img src="../images/one.png" alt="some_text">
<div>首页</div>
</div>
<div class="flex1-right">欢迎您!李强【今天是2022年12月12日 星期一】</div>
</div>
<div class="lines"></div>
<!-- <hr /> -->
<div class="flex2">
代办件提醒
</div>
<div class="lines"></div>
<!-- <hr /> -->
<div class="flex3">
<div class="flex3-left">
<div class="flex3-left1">当日接件</div>
<div class="flex3-left2">待受理</div>
<div class="flex3-left3">带现场核查</div>
<div class="flex3-left4">待审批</div>
</div>
<div class="flex3-right">
<div class="flex3-right1">已退回</div>
<div class="flex3-right2">代打证</div>
<div class="flex3-right3">代归档</div>
<div class="flex3-right4">代注销</div>
</div>
</div>
<div class="lines"></div>
<div class="flex4">已办件提醒</div>
<div class="lines"></div>
<div class="flex5">
<div class="flex5-left">
<div>小餐饮店名称:
<input type="text" name="fname" value="请输入小餐饮店名称">
</div>
<div>经营地址:<input type="text" name="fname" value="请输入经营地址"></div>
<div>受理日期:<input type="date" id="time" min="1900-01-01" max="2100-01-01">-<input type="date" id="time" min="1900-01-01" max="2100-01-01"></div>
</div>
<div class="flex5-right">
<div>状态:
<select>
<option>-全部-</option>
</select>
</div>
<div>申请类型
<select>
<option>-全部-</option>
</select>
</div>
<div>主体状态:
<select>
<option>-全部-</option>
</select>
</div>
<div>
<button>查询</button>
</div>
</div>
</div>
<div class="lines"></div>
<div class="flex6">
<table border="1">
<tr>
<th>序号</th>
<th>小餐饮店名称</th>
<th>主体状态</th>
<th>经营者(负责人)</th>
<th>申请类型</th>
<th>受理日期</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>多肉牛肉干</td>
<td>小餐饮</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
</table>
</div>
</div>
</body>
</html>
.main{
background-color: white;
display: flex;
flex-direction: column;
}
.flex1{
display: flex;
flex-direction: row;
justify-content:space-between;
margin-top: 10px;
}
.flex1-left{
display: flex;
align-items:flex-start;
}
.flex1_right{
display: flex;
align-items:flex-end;
}
.flex2{
display: flex;
flex-direction: row;
margin-top: 20px;
}
.flex3{
display: flex;
flex-direction: column;
margin: 20px;
}
.flex3-left{
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.flex3-left1{
background-color:yellow;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-left2{
background-color: springgreen;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-left3{
background-color: slateblue;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-left4{
background-color: turquoise;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-right{
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.flex3-right1{
background-color: tomato;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-right2{
background-color: turquoise;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-right3{
background-color: slategrey;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex3-right4{
background-color: red;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.flex4{
display: flex;
flex-direction: row;
margin-top: 10px;
}
.flex5{
display: flex;
flex-direction: column;
margin-top: 10px;
margin: 30px;
}
.flex5-left{
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.flex5-right{
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.flex6{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 30px;
}
table{
width: 100%;
border-collapse: collapse;
}
table,table tr td {
border:1px solid #ccc;
height: 70px;
}
table tr td{
padding: 5px 10px;
}
.lines{
border-bottom: 1px solid #DDDDDD;
}
th{
background-color: cyan;
}