0
点赞
收藏
分享

微信扫一扫

H5 页面优化

yundejia 2022-03-30 阅读 127


H5 页面优化_微信


<!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">
<title>Document</title>
<link rel="stylesheet" href="./H5.css">
</head>
<body>
<div class="da">
<div class="box">
<p>截至&nbsp2022-03-23&nbsp09:35:28</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp受计划不足、RDC爆仓缓发等因素影响,超7天未配订单共计 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp11121&nbsp&nbsp台</p>
<p class="arr">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp较昨日环比增加</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2.59% &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp具体如下:</p>
</div>
<div class="box1">
<table style="border: none;" class="table">
<tr style="border: none;" class="tr">
<td class="h1">冰箱:</td>
<td class="h2">超7天未配</td>
<td class="h2"> 6.182</td>
<td class="h2">台</td>
<td class="h2 id">环比减少</td>
<td class="h2">2.66%</td>
<td class="h7">,其中超15天未配</td>
<td class="h2">625</td>
<td class="h2">台</td>
<td class="h10">需加速清理</td>
</tr>
<tr style="border: none;" class="tr">
<td class="h1">电视:</td>
<td class="h2">超7天未配</td>
<td class="h2"> 2.671</td>
<td class="h2">台</td>
<td class="h2 id1">环比增加</td>
<td class="h2">16.89%</td>
<td class="h7">,其中超15天未配</td>
<td class="h2">647</td>
<td class="h2">台</td>
<td class="h10">需加速清理</td>
</tr>
<tr style="border: none;" class="tr">
<td class="h1">空调:</td>
<td class="h2">超7天未配</td>
<td class="h2"> 2.268</td>
<td class="h2">台</td>
<td class="h2 id1">环比增加</td>
<td class="h2">2.90%</td>
<td class="h7">,其中超15天未配</td>
<td class="h2">70</td>
<td class="h2">台</td>
<td class="h10">需加速清理</td>
</tr>
</table>
</div>
<div class="box2">
<div class="arr1">
<p class="head">冰箱</p>
<div class="h">
<div class="div" style="font-size: 16px;"><p>超七天未配送数量</p><h1>6.182</h1></div>
<div class="div" style="font-size: 16px;"><p>超15天为配送数量</p><h1>625</h1></div>
</div>
<div class="h">
<div class="a"><p class="id" id="id1">环比减少</p><p class="shu">2.66%</p></div>
<div><p class="id1" id="id1">环比增加</p><p class="shu">41.08%</p></div>
</div>

</div>
<div class="arr1">
<p class="head">电视</p>
<div class="h">
<div class="div" style="font-size: 16px;"><p>超七天未配送数量</p><h1>2.671</h1></div>
<div class="div" style="font-size: 16px;"><p>超15天为配送数量</p><h1>647</h1></div>
</div>
<div class="h">
<div class="a"><p class="id1" id="id1">环比增加</p><p class="shu">16.89%</p></div>
<div><p class="id1" id="id1">环比增加</p><p class="shu">25.63%</p></div>
</div>

</div>
<div class="arr1">
<p class="head">空调</p>
<div class="h">
<div class="div" style="font-size: 16px;"><p>超七天未配送数量</p><h1>2.268</h1></div>
<div class="div" style="font-size: 16px;"><p>超15天为配送数量</p><h1>70</h1></div>
</div>
<div class="h">
<div class="a"><p class="id1" id="id1">环比增加</p><p class="shu">2.90%</p></div>
<div><p class="id1" id="id1">环比增加</p><p class="shu">133.33%</p></div>
</div>

</div>
<div class="arr1">
<p class="head">整体</p>
<div class="h">
<div class="div" style="font-size: 16px;"><p>超七天未配送数量</p><h1>11.121</h1></div>
<div class="div" style="font-size: 16px;"><p>超15天为配送数量</p><h1>1.342</h1></div>
</div>
<div class="h">
<div class="a"><p class="id1" id="id1">环比增加</p><p class="shu">2.59%</p></div>
<div><p class="id1" id="id1">环比增加</p><p class="shu">35.83%</p></div>
</div>

</div>
</div>
<div class="box3">
<p class="header">转储订单超期未匹配订单数量(台)</p>
<table>
<tr class="tr1">
<td class="td1">产品线</td>
<td class="td1">基地</td>
<td class="td3">5天内未配车</td>
<td class="td4">5-7天未配车</td>
<td class="td5">7-10天未配车</td>
<td class="td5">10-15天未配车</td>
<td class="td5">15-30天未配车</td>
<td class="td5">超30天未配车</td>
<td class="td9">总计数量</td>
<td class="td10">当日超7天未匹配数量</td>
<td class="td10">昨日超7天未匹配数量</td>
<td class="td12">环比</td>
<td class="td12">环比趋势</td>
</tr>
<tr class="tr2">
<td rowspan="4">冰箱</td>
<td>宁波</td>
<td>1.700</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1.700</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td><b>持平</td>
</tr>
<tr class="tr2">
<td>宿迁</td>
<td>1.660</td>
<td>0</td>
<td>0</td>
<td>930</td>
<td>93</td>
<td>0</td>
<td>2.683</td>
<td>1.023</td>
<td>2.223</td>
<td>-53.98%</td>
<td class="id" style="float: none;">减少</td>
</tr>
<tr class="tr2">
<td>山东</td>
<td>5.343</td>
<td>1.051</td>
<td>717</td>
<td>783</td>
<td>5</td>
<td>0</td>
<td>7.899</td>
<td>1.505</td>
<td>1.312</td>
<td>14.71%</td>
<td class="id2">增加</td>
<tr class="tr2" id="tr2">
<td>小计</td>
<td>15.058</td>
<td>2.106</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id" style="float: none;">减少</td>

</tr>
<tr class="tr2">
<td rowspan="3">电视</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr> <tr class="tr2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr> <tr class="tr2" id="tr2">
<td>小计</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr> <tr class="tr2">
<td rowspan="3">空调</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr>
<tr class="tr2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr>
<tr class="tr2" id="tr2">
<td>小计</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="id2">增加</td>

</tr>
</table>
</div>
<div class="box4">
<p class="header">超5天未配送转储单预警表</p>
<table>
<tr class="tr1" style="font-size: 15px;">
<td class="td1" style="width: 40px;">产品线</td>
<td class="td1" style="width: 40px;">基地</td>
<td class="td3" style="width: 60px;">分公司</td>
<td class="td4" style="width: 60px;">起运量</td>
<td class="td5" style="width: 60px;">超5天未配订单数(单)</td>
<td class="td5" style="width: 60px;">超5天未配订单数(台)</td>
<td class="td5" style="width: 60px;">超5天未配订单台数(m³)</td>
<td class="td5" >RDC合计带发量(m³)(转储+转运+统藏订单)</td>
<td class="td5" style="width: 60px;">需加货放量</td>
<td class="td9">订单最早创建时间</td>
<td class="td10" style="width: 105px;">备注</td>
</tr>
<tr class="tr2">
<td>冰箱</td>
<td>成都</td>
<td>北京调度中心</td>
<td>175</td>
<td>15</td>
<td>642</td>
<td>540.5</td>
<td>638</td>
<td style="color: red;">(463)</td>
<td>2022-02-28</td>
<td>以达起运量,凑够整车时间:2022-03-13</td>
</tr>
<tr class="tr2">
<td>冰箱</td>
<td>成都</td>
<td>长春调度中心</td>
<td>175</td>
<td>9</td>
<td>176</td>
<td>142.7</td>
<td>149</td>
<td>26</td>
<td>2022-02-27</td>
<td>需加货</td>
</tr>

</table>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.da{
width: 1513px;
margin: auto;
margin-left: 20px;

}
.box{
width: 1362px;
display: flex;
margin-left: 20px;
}
.box p{
font-size: 15px;
}
.box1{
width: 1080px;
}
.box2{
display: flex;
width: 1362px;
justify-content: space-between;
margin-top: 25px;

}
.box3{
margin-top: 20px;
}
.box4{
margin-top: 40px;
}
.arr{
color: aqua;
}
h1{
margin-top: 16px;
float: left;
margin-left: 20px;
font-weight: 100;
}
span{
float: left;
}
.id{
color: red;
float: left;
}
.id1{
color: aqua;
float: left;
}
#id1{
margin-left: 10px;
}
.id2{
color: aqua;
}
.head{
height: 20px;
width: 300px;
background: #00aaa7;
font-size: 12px;
line-height: 20px;
text-align: center;
color: white;
}
.h{
display: flex;
justify-content: space-between;
width: 300px;

}

.div{
width: 140px;
height: 90px;
font-size: 15px;
background: #f2f2f2;
text-align: center;

}
.h div{
width: 140px;
margin-top: 10px;
font-size: 12px;
background-color: #f2f2f2;
/* display: flex; */
}
.header{
background: #00aaa7;
width: 1360px;
height: 50px;
line-height: 50px;
text-align: center;
color: aliceblue;
}

table{
width: 1360px;
border: 1px solid rgb(230, 220, 220);
border-collapse: collapse;
table-layout: fixed;
}
tr{
border: 1px solid rgb(230, 220, 220);
}
td{
border: 1px solid rgb(230, 220, 220);
}
.tr1{
background:#00aaa7;
color: aliceblue;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 16;
height: 25px;
}
.td1{
width: 60px;
}
.td3{
width: 95px;
}
.td4{
width: 155px;
}
.td5{
width: 110px;
}
.td9{
width: 80px;
}
.td10{
width: 155px;
}
.tr2{
height: 25px;
text-align: center;
}
#tr2{
background: #f2f2f2;
font-weight: 900;
}
.shu{
float: right;
width: 50px;
margin-right: 10px;
}
.table{
width: 1080px;
margin-left: 30px;
margin-top: 30px;
}
.h1{
width: 40px;

}
.h2{
width: 90px;
}
.tr{
margin-top: 10px;
}
.tr td{
border: none;
}


举报

相关推荐

0 条评论