Modify interact in favor.

dlstatic
2 parents 98116cea 8aa940c2
Showing 3 changed files with 179 additions and 15 deletions
2.0/collect_shop.html
css/style/collection.css
css/style/collection.less
@@ -18,12 +18,12 @@
     <script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script>
 </head>
 <body>
-    <div class="m-page" id="collection">
+    <div class="m-page panel-open" id="collection">
         <header class="m-header header-light">
             <div class="head">
                 <a href="javascript:history.go(-1);" class="lt-bar"><i class="m-icon icon-back"></i></a>
                 <h1>我的收藏</h1>
-                <span class="rt-bar text">编辑</span>
+                <span class="rt-bar text edit-btn">编辑</span>
             </div>
         </header>
         <div class="content">
@@ -39,7 +39,12 @@
             <div class="collection-lists supply-list inlist" id="insale">
                 <ul class="m-table-view">
                     <li class="cell">
-                        <a href="#">
+                      <div class="cellin">
+                        <label class="labchk">
+                          选择
+                          <input type="checkbox" class="m-radio"/>
+                        </label>
+                        <a href="#" class="display-block">
                             <div class="orso">
                                 <span class="title">山东白萝卜</span>
                                 <span class="right price">0.7元/斤</span>
@@ -50,6 +55,7 @@
                                 <span class="right">2015-03-04</span>
                             </div>
                         </a>
+                      </div>
                     </li>
                 </ul>
             </div>
@@ -63,6 +69,11 @@
             <div id="goods" class="goodlist">
             <ul class="m-table-view">
                 <li class="cell cell-extend-pic">
+                  <div class="cellin">
+                    <label class="labchk">
+                      选择
+                      <input type="checkbox" class="m-radio">
+                    </label>
                     <a class="display-block" href="#">
                         <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
                         <h3 class="title">
@@ -79,6 +90,7 @@
                           辽宁沈阳地利批发市场五号厅
                         </p>
                     </a>
+                  </div>
                 </li>
             </ul>
@@ -87,6 +99,11 @@
             <div id="shops" class="shoplist">
             <ul class="m-table-view">
                 <li class="cell cell-extend-pic">
+                  <div class="cellin">
+                    <label class="labchk">
+                      选择
+                      <input type="checkbox" class="m-radio">
+                    </label>
                     <a class="display-block" href="#">
                         <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
                         <h3 class="title">
@@ -108,8 +125,14 @@
                         <p class="text from-label">产地直供</p>
                         <i class="m-icon icon-sdrz store-label"></i>
                     </a>
+                  </div>
                 </li>
                 <li class="cell cell-extend-pic">
+                  <div class="cellin">
+                    <label class="labchk">
+                      选择
+                      <input type="checkbox" class="m-radio">
+                    </label>
                     <a class="display-block" href="#">
                         <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
                         <h3 class="title">
@@ -131,6 +154,7 @@
                         <p class="text from-label">产地直供</p>
                         <i class="m-icon icon-sxsj store-label"></i>
                     </a>
+                  </div>
                 </li>
             </ul>
             </div>
@@ -146,6 +170,10 @@
                 <!--</ul>-->
             <!--</div>-->
         </div>
+        <footer class="m-footer border-1px border-top">
+          <a href="#" class="m-btn btn-large">取消</a>
+          <a href="#" class="m-btn btn-danger btn-large">立即删除</a>
+        </footer>
     </div>
 </body>
 </html>
@@ -79,16 +79,33 @@
   width: 20%;
   padding: 0px;
 }
+#collection .m-table-view {
+  background-color: transparent;
+}
+#collection .m-table-view .cell {
+  background-color: transparent;
+  overflow: visible;
+  border: 0;
+  padding: 0;
+}
+#collection .m-table-view .cell .cellin {
+  border: 1px solid #ddd;
+  background-color: #fff;
+  padding: 10px;
+}
 #collection .m-table-view .cell-extend-pic {
+  padding: 0;
+}
+#collection .m-table-view .cell-extend-pic .cellin {
   padding: 15px 56px;
   padding-left: 95px;
 }
-#collection .m-table-view .cell-extend-pic .pic {
+#collection .m-table-view .cell-extend-pic .cellin .pic {
   width: 80px;
   height: 80px;
   margin-left: -90px;
 }
-#collection .m-table-view .cell-extend-pic .display-block {
+#collection .m-table-view .cell-extend-pic .cellin .display-block {
   margin-left: 10px;
 }
 #collection .m-table-view .title {
@@ -145,6 +162,18 @@
   font-size: 13px;
   color: #999;
 }
+#collection .goodlist,
+#collection .shoplist {
+  background-color: #fff;
+}
+#collection .goodlist .cell,
+#collection .shoplist .cell {
+  border-bottom: 1px solid #ddd;
+}
+#collection .goodlist .cell .cellin,
+#collection .shoplist .cell .cellin {
+  border: 0;
+}
 .supply-list {
   padding: 0;
 }
@@ -170,3 +199,44 @@
 .red {
   color: #fa4535;
 }
+.labchk {
+  width: 40px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  z-index: -1;
+  color: transparent;
+}
+.labchk .m-radio {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -11px;
+}
+.m-footer {
+  padding: 0px;
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: height 0.3s;
+  transition: height 0.3s;
+}
+.m-footer .m-btn {
+  float: left;
+  width: 50%;
+  box-sizing: border-box;
+}
+.panel-open .m-footer {
+  position: fixed;
+  display: block;
+  z-index: 9;
+  height: 50px;
+}
+.panel-open .labchk {
+  z-index: 1;
+  left: -40px;
+}
+.panel-open .m-table-view .cellin {
+  -webkit-transform: translate3d(50px, 0, 0);
+  transform: translate3d(50px, 0, 0);
+}
@@ -13,18 +13,31 @@
     }
   }
   .m-table-view {
-    .cell-extend-pic{
-      padding: 15px 56px;
-      padding-left:95px;
+    background-color: transparent;
+    .cell {
+      background-color: transparent;
+      overflow: visible;
+      border: 0;
+      padding: 0;
+      .cellin {
+        border: 1px solid #ddd;
+        background-color: #fff;
+        padding: 10px;
+      }
     }
     .cell-extend-pic {
-      .pic{
-        width:80px;
-        height:80px;
-        margin-left: -90px;
-      }
-      .display-block{
-        margin-left:10px;
+      padding: 0;
+      .cellin {
+        padding: 15px 56px;
+        padding-left:95px;
+        .pic{
+          width:80px;
+          height:80px;
+          margin-left: -90px;
+        }
+        .display-block{
+          margin-left:10px;
+        }
       }
     }
     .title{
@@ -84,6 +97,16 @@
     font-size: 13px;
     color:#999;
   }
+  .goodlist,
+  .shoplist {
+    background-color: #fff;
+    .cell {
+      border-bottom: 1px solid #ddd;
+      .cellin {
+        border: 0;
+      }
+    }
+  }
 }
 .supply-list {
@@ -113,3 +136,46 @@
 .red {
   color: #fa4535;
 }
+.labchk {
+  width: 40px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  z-index: -1;
+  color: transparent;
+  .m-radio {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -11px;
+  }
+}
+.m-footer {
+  padding: 0px;
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: height 0.3s;
+  transition: height 0.3s;
+  .m-btn {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+  }
+}
+.panel-open {
+  .m-footer {
+    position: fixed;
+    display: block;
+    z-index: 9;
+    height: 50px;
+  }
+  .labchk {
+    z-index: 1;
+    left: -40px;
+  }
+  .m-table-view .cellin {
+    -webkit-transform: translate3d(50px, 0, 0);
+    transform: translate3d(50px, 0, 0);
+  }
+}