0
点赞
收藏
分享

微信扫一扫

H5 页面优化

yundejia 2022-03-30 阅读 128
微信d3htmlcssHtml/CSS前端开发


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;
   }


举报

相关推荐

H5页面秒开优化与实践

加载缓存H5React.js前端开发

H5 页面拖动悬浮按钮

icoJavaScript前端开发

uniapp 如何嵌套H5 页面？

算法数据结构leetcode

H5禁止ios页面拉动反弹

ios

python开发h5页面

H5HTMLCSSPython后端开发

支付宝云开发 H5 页面渲染提升优化实践

支付宝云开发云开发H5云服务云计算

uniapp H5页面打包发布

h5发布h5静态文件htmlPHP前端开发

ios 内嵌 H5 页面 new Date() 问题

h5前端开发那些事儿

广州H5开发|h5开发流程中的UI设计与交互优化

h5UI开发流程软件研发

从0-1 h5 h5 授权 适配 h5微信授权

html5vue.jsnpm
0 条评论