feat: 添加全选结算栏

新版闲书网主页/.idea/前端/html/cart.html

@@ -15,6 +15,9 @@
 
 </head>
 <style>
+    /* * {
+        box-sizing: content-box !important;
+    } */
     .cart-header, .item-content {
         /* position: relative; */
         width: 990px;
@@ -137,6 +140,162 @@
     .item-content .td-op a {
         padding-bottom: 3px;
     }
+    .float-bar, #footer, .wp {
+        width: 990px;
+        margin: 0 auto;
+    }
+    .float-bar-holder {
+        position: relative;
+        width: 990px;
+        height: 50px;
+        margin: auto;
+    }
+    .group-wrapper {
+        position: absolute;
+        bottom: 49px;
+        width: 100%;
+        z-index: 10001;
+        background-color: #fff;
+        position: relative;
+        bottom: 0;
+    }
+    .float-bar-wrapper {
+        height: 50px;
+        overflow: hidden;
+    }
+    .float-bar .select-all {
+        float: left;
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+        padding-left: 5px;
+    }
+    .select-all {
+        cursor: pointer;
+    }
+    .select-all .cart-checkbox {
+        vertical-align: middle;
+        margin-top: -2px;
+    }
+    .cart-checkbox {
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        overflow: hidden;
+    }
+    .cart-checkbox input {
+        position: absolute;
+        z-index: 0;
+        left: -20px;
+        top: -20px;
+    }
+    .cart-checkbox label {
+        position: relative;
+        z-index: 1;
+        float: left;
+        width: 15px;
+        height: 15px;
+        background-position: 0 0;
+        line-height: 200em;
+        overflow: hidden;
+        cursor: pointer;
+        background-image: -webkit-image-set(url(../img/unchecked.png) 2x);
+        background-repeat: no-repeat;
+    }
+    .float-bar .operations {
+        float: left;
+        line-height: 50px;
+        height: 50px;
+    }
+    .float-bar .operations a {
+        margin-left: 25px;
+        float: left;
+    }
+    .float-bar .operations {
+        line-height: 50px;
+    }
+    .float-bar-right {
+        float: right;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 4;
+        padding-left: 20px;
+    }
+    .float-bar-right, .float-bar-wrapper {
+        background: #e5e5e5;
+    }
+    .float-bar .amount-sum em {
+        line-height: 50px;
+        padding: 0 5px;
+    }
+    .float-bar .amount-sum {
+        cursor: pointer;
+    }
+    .float-bar .amount-sum, .float-bar .price-sum {
+        height: 48px;
+        color: #3c3c3c;
+    }
+    .float-bar .amount-sum, .float-bar .price-sum, .float-bar .btn-area {
+        float: left;
+    }
+    .float-bar .amount-sum .arrow-box {
+        float: left;
+    }
+    .float-bar .txt {
+        line-height: 48px;
+    }
+    .float-bar .price-sum .price {
+        color: #f40;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 48px;
+        font-family: Arial;
+        vertical-align: middle;
+    }
+    .float-bar .amount-sum em, .float-bar .price-sum .price em {
+        color: #f40;
+        font-weight: 700;
+        font-size: 18px;
+        font-family: tohoma,arial;
+    }
+    .float-bar .combine-not-supported:link, .float-bar .combine-not-supported:hover, .float-bar .submit-btn-disabled:link, .float-bar .submit-btn-disabled:hover {
+        background: #B0B0B0;
+        color: #fff;
+        border-left: 1px solid #e7e7e7;
+        width: 119px;
+        cursor: not-allowed;
+        text-decoration: none;
+    }
+    .float-bar .price-sum strong, .float-bar .amount-sum em, .float-bar .price-sum .txt, .float-bar .amount-sum .txt {
+        float: left;
+    }
+    .float-bar .submit-btn {
+        display: inline-block;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        font-family: 'Lantinghei SC','Microsoft Yahei';
+        font-size: 20px;
+    }
+    .pipe, .check-cod {
+        float: left;
+    }
+    .float-bar .pipe {
+        float: left;
+        margin: 0 10px 0 18px;
+        width: 1px;
+        height: 12px;
+    }
+    .float-bar .price-sum .price em {
+        font-weight: 700;
+        font-size: 22px;
+        padding: 0 3px;
+    }
+    address, cite, dfn, em, var {
+        font-style: normal;
+    }
 </style>
 <body>
 
@@ -229,5 +388,46 @@
         </div>
     </li>
 </ul>
-<script>appendBooks()</script>
+<div class="float-bar-holder" id="J_FloatBarHolder">
+    <div id="J_FloatBar" class="float-bar clearfix default" style="position: static;">
+        <div class="float-bar-wrapper">
+            <div id="J_SelectAll2" class="select-all">
+                <div class="cart-checkbox">
+                    <input type="checkbox" class="J_CheckBoxShop" id="J_SelectAllCbx2" name="select-all" value="true">
+                    <label for="J_SelectAllCbx2">勾选购物车内所有商品</label>
+                </div>&nbsp;全选
+            </div>
+            <div class="operations">
+                <a href="#" hidefocus="true" class="J_DeleteSelected">删除</a>
+                <a href="#" hidefocus="true" class="J_ClearInvalid hidden">清除失效宝贝</a>
+                <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
+                <a href="#" hidefocus="true" class="J_BatchShare">分享</a>
+            </div>
+            <div class="float-bar-right">
+                <div id="J_ShowSelectedItems" class="amount-sum">
+                    <span class="txt">已选商品</span><em id="J_SelectedItemsCount">0</em>
+                    <span class="txt">件</span><div class="arrow-box">
+                        <span class="selected-items-arrow"></span>
+                        <span class="arrow"></span>
+                </div>
+            </div>
+            <div id="J_CheckCOD" class="check-cod" style="display: none;">
+                <span class="icon-cod"></span>
+                <span class="s-checkbox J_CheckCOD"></span>货到付款
+            </div>
+            <div class="pipe"></div>
+            <div class="price-sum">
+                <span class="txt">合计（不含运费）：</span>
+                <strong class="price"><em id="J_Total">
+                    <span class="total-symbol">&nbsp;</span>0.00</em>
+                </strong></div><div class="btn-area">
+                    <a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
+                        <span>结&nbsp;算</span><b></b>
+                    </a>
+                </div>
+        </div>
+    </div>
+</div>
+
+<script></script>
 </html>