购物车编辑样式

zhangxiaoru
Commit 598c4f840214c6119793e9a9d5cea73415e8232d 1 parent d783bb47
Showing 4 changed files with 148 additions and 83 deletions
static/js/cart/chose-panel.js
static/sass/cart/_chose-panel.css
yohobuy/m.yohobuy.com/application/models/Index/Cart.php
yohobuy/m.yohobuy.com/public/index-dev.php
--- a/static/js/cart/chose-panel.js
View file @598c4f8
+++ b/static/js/cart/chose-panel.js
View file @598c4f8
@@ -472,6 +472,10 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         //老的选中颜色去掉勾选,新的选中颜色加上勾选
         changeColorChosed(0);
+        if (!$('.size-info').hasClass('hide')) {
+            $('.size-info').addClass('hide');
+        }
+
         // 当前尺码不是选中状态,选中时
     } else {
         hasChooseSize = true;
@@ -492,6 +496,8 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         curColorIndex = index + 1;
         $curSizeBlock = $this;
+
+        $('.size-info').html($(this).data('info')).removeClass('hide');
     }
     // 颜色块切换勾选样式
@@ -718,6 +724,18 @@ $yohoPage.on('touchstart', '.btn-minus', function() {
 });
+$yohoPage.on('touchstart', '.close', function() {
+    hide();
+});
+
+$yohoPage.on('touchstart', '.thumb', function() {
+    if ($(this).hasClass('hover')) {
+        $(this).removeClass('hover');
+    } else {
+        $(this).addClass('hover');
+    }  
+})
+
 exports.init = init;
 exports.show = show;
 exports.remove = removePannel;
--- a/static/sass/cart/_chose-panel.css
View file @598c4f8
+++ b/static/sass/cart/_chose-panel.css
View file @598c4f8
 .chose-panel {
     position: fixed;
-    display: none;
-    height: 100%;
     top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
-    background: rgba(0,0,0,.3);
-    z-index:3;
-
+    z-index: 3;
+    display: none;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
     .main {
         position: absolute;
-        height: 610px;
+        right: 0;
         bottom: 0;
         left: 0;
-        right: 0;
+        height: 838px;
         background: #fff;
     }
+    .close {
+        float: right;
+        font-size: 80%;
+        width: 30px;
+        height: 30px;
+        margin-right: 6px;
+        text-align: right;
+    }
+
     .infos {
-        height: 460px;
-        padding: 0 22px;
+        padding: 0 30px;
     }
     .chose-items {
-        height: 325px;
         overflow: auto;
+        height: 500px;
     }
     .basic-info {
-        overflow: hidden;
         position: relative;
-        margin-bottom: 30px;
-        margin-top: 30px;
+        padding-bottom: 30px;
+        min-height: 160px;
+        border-bottom: 1px solid #e6e6e6;
     }
     .thumb {
-        float: left;
-        width: 100px;
-        margin-right: 20px;
+        width: 164px;
+        /*height: 228px;*/
+        position: absolute;
+        top: -60px;
+        border: 1px solid #e6e6e6;
+        border-radius: 5px;
     }
     .text-info {
+        margin-left: 195px;
         height: auto;
+        margin-top: 30px;
+        font-size: 24px;
+
+        .seckill-time {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            float: none;
+        }
+
         .name {
-            font-size: 28px;
-            height: 74px;
-            overflow: hidden;
             display: -webkit-box;
+            overflow: hidden;
+            height: 60px;
+            font-size: 28px;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
         }
-        .price{
-            font-size: 24px;
+        .price {
             display: inline;
+            font-size: 24px;
         }
+
         .sale-price {
-            color: #e10;
             margin-right: 15px;
+            color: #D0021b;
+            font-size: 28px;
             &.no-price {
                 color: #000;
@@ -70,34 +93,60 @@
             color: #b0b0b0;
             text-decoration: line-through;
         }
+        
+        .size-info {
+            font-size: 24px;
+            display: block;
+            margin-top: 5px;
+            color: #444;
+        }
+
+        .hide {
+            display: none;
+        }
     }
-    .color-list, .size-list, .num {
+    .color-list,
+    .size-list,
+    .num {
         position: relative;
-        font-size: 28px;
         padding-left: 80px;
-        input.disabled{
-            background-color:#fff;
+        font-size: 28px;
+        overflow: hidden;
+        /*margin-top: 30px;*/
+
+        input.disabled {
+            border-radius: 0;
+            background-color: #fff;
             color: #000;
             opacity: 1;
-            border-radius: 0;
             -webkit-appearance: none;
         }
+
         > span {
             position: absolute;
+            top: 10px;
             left: 0;
-            top: 20px;
         }
-        >span.left-num{
+
+        > span.left-num {
             position: absolute;
-            left: 380px;
             top: 20px;
+            left: 380px;
+            color: #b0b0b0;
         }
-        span.disabled{
+
+        span.disabled {
             color: #e6e6e6;
         }
     }
+    .color-list,
+    .size-list {
+        border-bottom: 1px solid #e6e6e6;
+        margin: 30px 0;
+    }
+
     .size-list li.hide {
         display: none;
     }
@@ -106,36 +155,36 @@
         display: block;
         float: left;
         box-sizing: border-box;
-        margin-right: 0.75rem;
-        margin-bottom: 0.75rem;
-        padding: 0 0.5rem;
-        min-width: 2rem;
-        max-width: 12rem;
-        height: 2rem;
-        border: 1px solid #000;
+        margin-right: 30px;
+        margin-bottom: 30px;
+        padding: 0 20px;
+        min-width: 80px;
+        max-width: 480px;
+        height: 60px;
+        border: 3px solid #444;
         text-align: center;
-        line-height: 2rem;
+        line-height: 60px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        border-radius: 6px;
         &.chosed {
             border-color: #e10;
-            background: resolve('shopping-cart/right.png') no-repeat;
-            background-size: 38px;
-            background-position: bottom right;
-            color: #e10;
+            background: #d0021b;
+            color: #fff;
         }
         &.zero-stock {
-           color: #e0e0e0;
-           border-color: #e0e0e0;
+            border-color: #e0e0e0;
+            color: #e0e0e0;
         }
+
         &.zero-stock.chosed {
             border-color: #e0e0e0;
             background: none;
-            color: #e0e0e0;
             background-color: #c0c0c0;
+            color: #e0e0e0;
         }
     }
@@ -144,13 +193,13 @@
     }
     .num .btn {
-        float: left;
         display: block;
-        height: 80px;
+        float: left;
         width: 80px;
+        height: 80px;
+        border: 1px solid #e6e6e6;
         text-align: center;
         line-height: 80px;
-        border: 1px solid #e6e6e6;
         &.disable {
             color: #e6e6e6;
@@ -159,46 +208,44 @@
     .good-num {
         float: left;
+        margin-left: -1px;
+        padding: 0;
         width: 106px;
         height: 80px;
-        line-height: 80px;
-        padding: 0;
         border: 1px solid #e6e6e6;
         text-align: center;
-        margin-left: -1px;
+        line-height: 80px;
     }
-    .btn-plus{
+
+    .btn-plus {
         margin-left: -1px;
     }
     .btn-wrap {
-        position: relative;
-        height: 120px;
-        border-top: 1px solid #e6e6e6;
-        padding: 20px;
-        text-align: center;
-        background: #fff;
-        box-sizing: border-box;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
         .btn-sure {
-            width: 260px;
+            width: 100%;
             height: 80px;
-            background: #e10;
+            border: none;
+            background: #d0021b;
             color: #fff;
             font-size: 32px;
-            border: none;
-        }
-    }
-
-    .tickets-info {
-
-        span.left-num {
-            color: #e10;
         }
     }
-    .discount-gray {
-        background-color: #e0e0e0;
+    .hover {
+        position: fixed;
+        width: 100%;
+        background-color: black;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        border: 0px;
+        z-index: 999;
     }
-
 }
+
--- a/yohobuy/m.yohobuy.com/application/models/Index/Cart.php
View file @598c4f8
+++ b/yohobuy/m.yohobuy.com/application/models/Index/Cart.php
View file @598c4f8
@@ -981,7 +981,7 @@ class CartModel
                 // 缩略图
                 $thumbImageList[] = array(
-                    'img' => Helpers::getImageUrl($val['color_image'], 300, 417)
+                    'img' => Helpers::getImageUrl($val['color_image'], 300, 395)
                 );
                 // 商品库存总数
--- a/yohobuy/m.yohobuy.com/public/index-dev.php
View file @598c4f8
+++ b/yohobuy/m.yohobuy.com/public/index-dev.php
View file @598c4f8
@@ -15,15 +15,15 @@ define('USE_INTER_FACE_SHUNT', false);//分流开关
 #dev环境
-define('API_URL', 'http://dev-api.yohops.com:9999/');
-define('SERVICE_URL', 'http://dev-service.yohops.com:9999/');
-define('YOHOBUY_URL', 'http://www.yohobuy.com/');
-define('SERVICE_NOTIFY', 'http://dev-service.yohops.com:9999/');
-
-// define('API_URL', 'http://api-test2.yohops.com:9999/');
-// define('SERVICE_URL', 'http://service-test2.yohops.com:9999/');
+// define('API_URL', 'http://dev-api.yohops.com:9999/');
+// define('SERVICE_URL', 'http://dev-service.yohops.com:9999/');
 // define('YOHOBUY_URL', 'http://www.yohobuy.com/');
-// define('SERVICE_NOTIFY', 'http://service-test2.yohops.com:9999/');
+// define('SERVICE_NOTIFY', 'http://dev-service.yohops.com:9999/');
+
+define('API_URL', 'http://api-test2.yohops.com:9999/');
+define('SERVICE_URL', 'http://service-test2.yohops.com:9999/');
+define('YOHOBUY_URL', 'http://www.yohobuy.com/');
+define('SERVICE_NOTIFY', 'http://service-test2.yohops.com:9999/');
 $application = new Application(APPLICATION_PATH . '/configs/application.developer.ini');
 $application->bootstrap()->run();