右侧悬浮菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>派单</title> <link rel="stylesheet" type="text/css" href="demo.css"/> <script src="js/jquery-1.9.0.js"></script> </head> <body> <!--浮层--> <div class="layer-main"> <div> <div class="layer-right"> <div class="lay-flo lay-one"> <div class="lay-name">骑手</div> <div class="lay-num">5</div> </div> <div class="lay-flo lay-two"> 配送中<span>2</span> </div> <div class="lay-flo lay-two">返回中<span>3</span></div> <div class="lay-flo lay-but">查看详情</div> </div> </div> <div> <div class="layer-right"> <div class="lay-flo lay-one"> <div class="lay-name">需要配送</div> <div class="lay-num">3</div> </div> <div class="lay-flo lay-but">查看详情</div> </div> </div> <div> <div class="layer-right"> <div class="lay-flo lay-one"> <div class="lay-name">预定单需要配送</div> <div class="lay-num">5</div> </div> <div class="lay-flo lay-but">查看详情</div> </div> </div> <div> <div class="layer-right"> <div class="lay-flo lay-one"> <div class="lay-name">进行中</div> <div class="lay-num">17</div> </div> <div class="lay-flo lay-two"> 未出餐<span>2</span> </div> <div class="lay-flo lay-two">未取餐<span>3</span></div> <div class="lay-flo lay-but">查看详情</div> </div> </div> <div> <div class="layer-right"> <div class="lay-flo lay-one"> <div class="lay-name">配送超时</div> <div class="lay-num">22</div> </div> <div class="lay-flo lay-two"> 未出餐<span>2</span> </div> <div class="lay-flo lay-two">未取餐<span>3</span></div> <div class="lay-flo lay-but">查看详情</div> </div> </div> </div> </body> </html>
@charset "utf-8"; *{ margin: 0; padding: 0; } ul,li{ list-style: none; } body{ background: #eff2f3; } .layer-main{ position: fixed; right: 0; top: 135px; width: 66px; z-index: 100; } .layer-list{ overflow: hidden; } .layer-right{ position: relative; text-align: center; background: #fff; border: solid 1px #d4d4d4; border-left: none; margin-top: -1px; line-height: 20px; padding-right: 20px; overflow: hidden; clear: both; display:-webkit-flex; -webkit-justify-content:center; -webkit-align-items:center; transform:translateX(calc(100% - 66px)); transition: all 0.5s; } .layer-right:hover{ transform:translateX(0px); } .layer-right{ float: right; } .layer-right:nth-child(odd){ border-left: solid 2px #16c346; } .layer-right:nth-child(even){ border-left: solid 2px #0cb6e7; } .layer-right:after{ content: ""; position: absolute; left: 66px; top: 8px; bottom: 8px; width: 0; border-right: solid 1px #dde1e2; } .lay-flo{ float: left; } .lay-r{ height: 100%; } .lay-one{ position: relative; width: 50px; padding: 8px; min-height: 42px; margin-right: 20px; } .lay-two{ position: relative; top: 50%; font-size: 12px; color: #061423; height: 30px; line-height: 30px; margin-right: 28px; white-space:nowrap; } .lay-two span{ font-size: 14px; font-weight: bold; color: #16c346; margin-left: 5px; } .lay-but{ width: 70px; height: 30px; line-height: 30px; font-size: 12px; color: #fff; text-align: center; background: #16c346; cursor: pointer; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .lay-name{ font-size: 12px; font-weight: bold; color: #061423; } .lay-num{ font-size: 16px; font-weight: bold; color: #16c346; }