From 5916ea8e3942d4afc1e5bdc4ad27e8bac3d94708 Mon Sep 17 00:00:00 2001
From: devil_gong <devil_gong@wochacha.com>
Date: Thu, 23 Aug 2018 11:57:49 +0800
Subject: [PATCH] detail

---
 .../Home/View/Default/Detail/Index.html       | 18 ++--
 service/Public/Home/Default/Css/Common.css    |  2 +-
 service/Public/Home/Default/Css/Detail.css    | 52 +++++++-----
 service/Public/Home/Default/Js/Detail.js      | 83 +++++++++++++++++++
 4 files changed, 122 insertions(+), 33 deletions(-)

diff --git a/service/Application/Home/View/Default/Detail/Index.html b/service/Application/Home/View/Default/Detail/Index.html
index 7daed4c2c..d95bfa8c0 100644
--- a/service/Application/Home/View/Default/Detail/Index.html
+++ b/service/Application/Home/View/Default/Detail/Index.html
@@ -100,11 +100,15 @@
                                     <div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
                                 </li>
                             </ul>
-                            <div class="clear"></div>
 
                             <!--各种规格-->
                             <dl class="iteminfo_parameter sys_item_specpara">
-                                <dt class="theme-login"><div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div></dt>
+                                <dt class="theme-login">
+                                    <div class="cart-title">
+                                        <span class="specpara-title">可选规格</span>
+                                        <span class="am-icon-angle-right"></span>
+                                    </div>
+                                </dt>
                                 <dd>
                                     <!--操作页面-->
 
@@ -147,7 +151,6 @@
                                                         </dd>
 
                                                     </div>
-                                                    <div class="clear"></div>
 
                                                     <div class="btn-op">
                                                         <div class="btn am-btn am-btn-warning">确认</div>
@@ -192,8 +195,6 @@
 
                     </div>
 
-                    <div class="clear"></div>
-
                 </div>
                             
                 <!-- introduce-->
@@ -289,9 +290,8 @@
                                     <div class="J_Brand">
 
                                         <div class="attr-list-hd tm-clear">
-                                            <h4>产品参数：</h4></div>
-                                        <div class="clear"></div>
-                                        <ul id="J_AttrUL">
+                                            <h4>产品参数</h4></div>
+                                        <ul class="detail-attr">
                                             <li title="">产品类型:&nbsp;烘炒类</li>
                                             <li title="">原料产地:&nbsp;巴基斯坦</li>
                                             <li title="">产地:&nbsp;湖北省武汉市</li>
@@ -310,7 +310,7 @@
                                         <div class="attr-list-hd after-market-hd">
                                             <h4>商品细节</h4>
                                         </div>
-                                        <div class="twlistNews">
+                                        <div class="detail-content">
                                             <img src="__PUBLIC__/Home/{{$default_theme}}/Images/tw1.jpg" />
                                             <img src="__PUBLIC__/Home/{{$default_theme}}/Images/tw2.jpg" />
                                             <img src="__PUBLIC__/Home/{{$default_theme}}/Images/tw3.jpg" />
diff --git a/service/Public/Home/Default/Css/Common.css b/service/Public/Home/Default/Css/Common.css
index c8a4da82b..da6a19504 100755
--- a/service/Public/Home/Default/Css/Common.css
+++ b/service/Public/Home/Default/Css/Common.css
@@ -84,7 +84,7 @@ color: #555555;background:none;border-color:transparent;cursor: default;}
 
 /*选项卡样式*/
 .am-nav-tabs > li.am-active span{color: #E4393C;font-size:16px;}
-.am-nav-tabs > li span{font-size:16px;font-weight:700;}
+.am-nav-tabs > li span{font-size:16px;font-weight:500;}
 
 /* 商品分类 */
 #goods-category { position: relative; top: -45px; }
diff --git a/service/Public/Home/Default/Css/Detail.css b/service/Public/Home/Default/Css/Detail.css
index 6760b4d3d..f8574f239 100644
--- a/service/Public/Home/Default/Css/Detail.css
+++ b/service/Public/Home/Default/Css/Detail.css
@@ -23,7 +23,7 @@ input{font-size:12px;font-size:100%;outline:none;line-height:normal;color:#444;}
 .ipt:focus{border-color:#95C8F1;box-shadow:0 0 4px #95C8F1;}
 .theme-login,.item-props-can{cursor: pointer;}
 
-.theme-popover-mask{z-index:10000000;position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
+.theme-popover-mask{z-index:10000000;position:fixed;left:0;top:0;width:100%;height:100%;background:#333;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
 .theme-popover{z-index:10000009;position:fixed;bottom:0;left:0;width:100%;display:none;}
 .theme-poptit{padding:12px;position:relative;overflow: hidden;background:#fff ;height:80px ;}
 .theme-poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd}
@@ -46,6 +46,7 @@ input{font-size:12px;font-size:100%;outline:none;line-height:normal;color:#444;}
 .text-info span#Stock{font-size:14px ;}
 
 /*可选规格*/
+.iteminfo_parameter { margin-bottom: 10px; }
 .theme-signin-left{padding-bottom:30px;max-height:250px ;overflow-y: scroll;background: #fff;}
 .theme-options{display: block;overflow: hidden;padding-left: 10px;padding-right:10px ;}
 .theme-signin-left .cart-title{font-size:14px ;font-weight: 600;}
@@ -54,10 +55,10 @@ input{font-size:12px;font-size:100%;outline:none;line-height:normal;color:#444;}
 
 .theme-signin .btn{width:100%;font-size: 16px;padding:5px ;}
 .btn-op{position:fixed;left:0;bottom: 0;width:100% ;}
-.iteminfo_parameter dt.theme-login {text-align: left;margin-left:-30px ;width:100% ;}
-.theme-login .cart-title{float: left;margin-right:10px ;}
+.iteminfo_parameter dt.theme-login {text-align: left;width:100% ;}
 
 .theme-options dd{margin:10px 0px ;}
+.introduceMain .am-sticky-placeholder { margin: 0px !important; }
 
 
 @media only screen and (min-width:640px) 
@@ -72,8 +73,8 @@ input{font-size:12px;font-size:100%;outline:none;line-height:normal;color:#444;}
 .theme-options .cart-title{margin-top:10px ;}
 .theme-options ul{float: left;}
 
-.theme-signin-left .sku-line {background: none;border-radius:0 ;margin:5px;padding:3px;border:2px solid #F5F5F5 ;color:#000 ;}
-.theme-signin-left .sku-line.selected {background:none;color:#000;border: 2px solid #BE0106;}
+.theme-signin-left .sku-line {background: none;border-radius:0 ;margin:5px;padding:3px;border:2px solid #F5F5F5 ;color:#333 ;}
+.theme-signin-left .sku-line.selected {background:none;color:#333;border: 2px solid #BE0106;}
 
 /*选中样式*/
 .sku-line{position: relative;}
@@ -145,7 +146,7 @@ fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
 
 
 /*导航固定*/
-ul.am-tabs-nav.am-nav.am-nav-tabs {width:100%;background: #F5F5F5;}
+ul.am-tabs-nav.am-nav.am-nav-tabs {background: #F5F5F5;}
 
 
 
@@ -162,7 +163,7 @@ ul.am-tabs-nav.am-nav.am-nav-tabs {width:100%;background: #F5F5F5;}
 .clearfixRight{font-size:12px;}
 
 /*价格*/
-.tb-detail-price{text-align: center;}
+.tb-detail-price{text-align: left;}
 .tb-detail-price .price em{font-family: arial;}
 .iteminfo_price .sys_item_mktprice{text-decoration:line-through;padding-top:7px ;padding-bottom: 0px;}
 .iteminfo_mktprice em, .sys_item_price { color:#c00;}
@@ -172,7 +173,8 @@ ul.am-tabs-nav.am-nav.am-nav-tabs {width:100%;background: #F5F5F5;}
 .iteminfo_parameter a:hover{text-decoration: none;color:initial ;}
 .iteminfo_parameter dt,.tb-detail-price dt,.shopPromotion.gold dt{display:inline; width:60px; white-space:nowrap; text-align:right; color:#888;}
 
-.tb-detail-price li{display: inline-block;margin:0px 5px ;}
+.tb-detail-price li { display: inline-block; }
+.tb-detail-price li:not(:last-child) { margin-right:10px; }
 
 /*优惠活动*/
 .shopPromotion.gold{padding-left: 10px;}
@@ -199,7 +201,7 @@ flex: 1 1 0%;line-height: 16px;cursor: pointer;}
 .theme-signin .btn-op.act{display: none;}
 .theme-signin .btn-op.act .btn{width:50%;float: left;}
 .theme-login .cart-title{border: 1px solid #F5F5F5;width:100%;padding:10px ;}
-.theme-login .cart-title span{float: right;}
+.theme-login .cart-title .am-icon-angle-right{float: right;}
 /*数量*/
 .iteminfo_parameter.munber,.iteminfo_parameter.freight{display:none ;}
 .iteminfo_parameter.munber dd{margin-left:5px ;}
@@ -215,7 +217,7 @@ color:#F03726;font-size: 14px;text-align: center;}
 .pay li,.pay .pay-opt{float:left; margin-top:15px;width:33.33% ;height:30px ;}
 .pay span{display:inline-block;width: 50%;float: left;font-size:14px ;background:#fff ;line-height:30px ;cursor: pointer;}
 
-.tb-detail-hd h1 {padding-bottom:0.4em; line-height: 1;font-size: 14px;font-weight: 700;color: #000; line-height: 20px;}
+.tb-detail-hd h1 {padding-bottom:0.4em; line-height: 1;font-size: 14px;font-weight: 600;color: #333; line-height: 20px;}
 
 li.am-active hr{border-top: 1px solid #f00;}
 
@@ -237,7 +239,7 @@ width: 62px;line-height:24px;font-size: 12px;display: block;}
 .like_list .plus_icon i.am-icon-angle-right{position: absolute;right:10px;font-weight:600 ;}
 .match-comment{border-bottom: 1px solid #E6E6E6;}
 /*介绍*/
-.introduce{width:100%;margin: 0px auto;text-align: center;padding-bottom: 110px;}
+.introduce{width:100%;margin: 0px auto;text-align: center;padding-bottom: 20px;}
 .introduceMain{width:100%;background:#fff ;}
 .introduceMain .am-tab-panel { padding: 0px; }
 .browse{display: none;}
@@ -245,18 +247,17 @@ width: 62px;line-height:24px;font-size: 12px;display: block;}
 /*产品参数*/
 
 .J_BrandAttr.name {color: #666;padding: 8px 20px 10px;height: 40px;line-height: 40px;text-align:left;}
-.attr-list-hd ,.after-market-hd{height: 35px; padding-top:20px;}
-.attr-list-hd h4 {position: relative;float: left;height: 35px;margin-bottom: -1px;padding-right: 10px;border-bottom: 1px solid #F70;font-size: 14px;}
+.attr-list-hd ,.after-market-hd{padding-top:20px;text-align: left;margin-bottom: 10px;}
+.attr-list-hd h4 {height: 30px;border-bottom: 1px solid #F70;font-size: 14px; font-weight: 500;}
 
-ul#J_AttrUL{padding: 0px 20px 18px;text-indent: 0px;overflow: hidden;}
+ul.detail-attr{overflow: hidden;text-align: left;}
 
-ul#J_AttrUL li {float: left;width: 100%;height: 18px;overflow: hidden;margin: 10px 0px 0px 0px;line-height: 18px;vertical-align: top;white-space: nowrap; text-overflow: ellipsis;color: #666;font-size:14px;}
+ul.detail-attr li {height: 26px;overflow: hidden;line-height: 26px;vertical-align: top;white-space: nowrap; text-overflow: ellipsis;color: #666;font-size:14px;}
 
 
 
-/*图片*/
-.twlistNews img,.sh .return-process img{width:100%;}
-.twlistNews{padding-top: 40px;}
+/*详情内容*/
+.detail-content img,.sh .return-process img{width:100%;}
 
 
 /*评价*/
@@ -312,8 +313,9 @@ li.am-comment{ width:100%}
 
 @media only screen and (min-width:640px) 
 {
-
+.am-container { padding: 10px; }
 .listMain{padding-top: 10px;}
+
 /*导航固定*/
 ul.am-tabs-nav.am-nav.am-nav-tabs {margin-right:10px ;margin-left: 10px;width: auto;}
 .scoll{float: left;width: calc(45% - 10px);max-width:360px;padding-right:20px; margin-left: 10px;}
@@ -322,13 +324,11 @@ ul.am-tabs-nav.am-nav.am-nav-tabs {margin-right:10px ;margin-left: 10px;width: a
 .iteminfo_parameter.freight dt{margin-left:-70px ;float: left;margin-right:10px ;padding-top:5px ;padding-bottom:20px ;}
 .pay{position: static;}
 ul.am-avg-sm-4.am-tabs-nav.am-nav.am-nav-tabs {width: auto;}
+ul.detail-attr li {display: inline;float: left;width: 33.33%;}
 
-ul#J_AttrUL li {display: inline;float: left;width: 33.33%;}
-
-.introduce{margin-top: 20px;}
 /*可选规格*/
 .theme-login .cart-title{border:none ;margin-left: -60px;position: relative;padding:10px 0px 0px 10px ;}
-.theme-login .cart-title span {position: absolute;right: -50px;}
+.theme-login .cart-title .am-icon-angle-right {position: absolute;right: -50px;}
 
 /*优惠活动*/
 .shopPromotion.gold{padding-left:0px ;}
@@ -473,4 +473,10 @@ ul.am-tabs-nav.am-nav.am-nav-tabs {left:20% ;max-width:960px ;margin-right: 0px;
     body {
         padding-top: 0px;
     }
+}
+
+/* 小于1025 */
+@media only screen and (max-width:1025px)
+{
+    ul.am-tabs-nav.am-nav.am-nav-tabs { width:100% !important; left: 0px !important; }
 }
\ No newline at end of file
diff --git a/service/Public/Home/Default/Js/Detail.js b/service/Public/Home/Default/Js/Detail.js
index 983c1fd68..8842be643 100644
--- a/service/Public/Home/Default/Js/Detail.js
+++ b/service/Public/Home/Default/Js/Detail.js
@@ -1486,7 +1486,90 @@ $(document).ready(function() {
         })
 
     }
+})
+
+// 小导航
+$(window).resize(function()
+{
+    table_nav();
+    
 });
+table_nav();
+
+function table_nav()
+{
+//     $(window).scroll(function()
+//     {
+//         if($(window).width() <= 1030)
+//         {
+//             var dv = $('ul.am-tabs-nav.am-nav.am-nav-tabs');
+//             if($(document).width(), dv.css('top') == '0px')
+//             {
+//                 dv.css({'width': '100%'});
+//             }
+//             console.log($(document).width(), dv.css('top'));
+//         }
+//     });
+// }
+
+//导航固定
+// $(document).ready(function() {
+//     var $ww = $(window).width();
+//     var dv = $('ul.am-tabs-nav.am-nav.am-nav-tabs'),
+//         st;
+
+//     if ($ww < 623) {
+
+//                 var tp =$ww+363;
+//                 $(window).scroll(function() {
+//                     st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
+//                     if (st >= tp) {
+//                         if (dv.css('position') != 'fixed') dv.css({
+//                             'position': 'fixed',
+//                             'top': 0,
+//                             'z-index': 1000009,
+//                             'width': '100%'
+//                         });
+
+//                     } else if (dv.css('position') != 'static') dv.css({
+//                         'position': 'static'
+//                     });
+//                 });
+//                 //滚动条复位（需要减去固定导航的高度）
+
+//                 $('.introduceMain ul li').click(function() {
+//                     sts = tp;
+//                     $(document).scrollTop(sts);
+//                 });
+//        } else {
+
+//         dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
+//         var tp = parseInt(dv.attr('otop'))+36;
+//         $(window).scroll(function() {
+//             st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
+//             if (st >= tp) {
+             
+//                     if (dv.css('position') != 'fixed') dv.css({
+//                         'position': 'fixed',
+//                         'top': 0,
+//                         'z-index': 998
+//                     });
+
+//                 //滚动条复位 
+//                 $('.introduceMain ul li').click(function() {
+//                     sts = tp-35;
+//                     $(document).scrollTop(sts);
+//                 });
+
+//             } else if (dv.css('position') != 'static') dv.css({
+//                 'position': 'static'
+//             });
+//         });
+
+
+
+//     }
+// });