From ec2c0f774de59c91267e1db9b3857216ab9c5630 Mon Sep 17 00:00:00 2001
From: gongfuxiang <fuxiang.gong@qq.com>
Date: Sun, 8 May 2022 10:48:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E7=9B=B8?=
 =?UTF-8?q?=E5=86=8C=E5=B0=8F=E5=9B=BE=E7=89=87=E5=A2=9E=E5=8A=A0=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/default/goods/index.html   | 26 +++++++++++------------
 public/static/index/default/css/goods.css | 17 ++++-----------
 public/static/index/default/js/goods.js   |  7 +++---
 3 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/app/index/view/default/goods/index.html b/app/index/view/default/goods/index.html
index 7c01f2680..8c17a9315 100755
--- a/app/index/view/default/goods/index.html
+++ b/app/index/view/default/goods/index.html
@@ -72,24 +72,22 @@
         <!-- pc放大镜 / 左侧 -->
         <div class="clearfix-left" id="clearcontent">
             <div class="box">
-                <div class="tb-booth tb-pic tb-s310">
+                <div class="tb-booth tb-pic">
                     {{if !empty($goods['photo'][0])}}
                         <img src="{{$goods['photo'][0]['images']}}" alt="{{$goods.title}}" rel="{{$goods['photo'][0]['images']}}" class="jqzoom" />
                     {{/if}}
                 </div>
-                <ul class="tb-thumb" id="thumblist">
-                    {{if !empty($goods.photo)}}
-                        {{foreach $goods.photo as $photo_key=>$photo}}
-                            <li class="{{if $photo_key eq 0}}tb-selected{{else /}} tb-pic{{/if}}">
-                                <div class="tb-pic tb-s40">
-                                    <a href="javascript:;">
-                                        <img src="{{$photo.images}}" mid="{{$photo.images}}" big="{{$photo.images}}" class="tb-s40" />
-                                    </a>
-                                </div>
-                            </li>
-                        {{/foreach}}
-                    {{/if}}
-                </ul>
+                <div class="am-slider am-slider-default am-slider-carousel am-margin-0 tb-thumb" data-am-flexslider="{itemWidth: 60, itemMargin: 5, slideshow: false, controlNav: false}">
+                    <ul class="am-slides" id="thumblist">
+                        {{if !empty($goods.photo)}}
+                            {{foreach $goods.photo as $photo_key=>$photo}}
+                                <li class="{{if $photo_key eq 0}}tb-selected{{else /}} tb-pic{{/if}}">
+                                    <img src="{{$photo.images}}" mid="{{$photo.images}}" big="{{$photo.images}}" class="tb-pic-min" />
+                                </li>
+                            {{/foreach}}
+                        {{/if}}
+                    </ul>
+                </div>
 
                 <!-- 视频 -->
                 {{if !empty($goods.video)}}
diff --git a/public/static/index/default/css/goods.css b/public/static/index/default/css/goods.css
index 3f01cf61f..81fb7a9a8 100755
--- a/public/static/index/default/css/goods.css
+++ b/public/static/index/default/css/goods.css
@@ -459,22 +459,13 @@ flex: 1 1 0%;line-height: 16px;cursor: pointer;}
 
 @media only screen and (min-width:1025px) {
     /*放大镜*/
-    /* box */
     .box { position: relative; border: 1px solid #eee; }
-    .tb-pic a { display:table-cell; text-align:center; vertical-align:middle; }
-    .tb-pic a img {vertical-align:middle; }
-    .tb-pic a {*display:block;*font-family:Arial;*line-height:1;}
-    .tb-thumb { padding: 5px; overflow: hidden; background: #f9f9f9; }
-    .tb-thumb li {background:none repeat scroll 0 0 transparent; float:left; margin:0 6px 0 0; overflow:hidden; padding:1px; }
-
-    .tb-s310 a { *font-size:271px;}
-    .tb-s40 a { *font-size:35px;}
-    .tb-s40{ height:60px; width:60px; }
     .tb-booth { border-bottom:1px solid #f5f5f5; position:relative; z-index:1;overflow: hidden; height: 358px; }
     .tb-booth img { max-width: 100%;height: 100%; margin: 0 auto; display: block; }
-    .tb-thumb .tb-selected { background:none repeat scroll 0 0 #C30008; height:62px;}
-    .tb-thumb .tb-selected div { background-color:#FFFFFF; border:medium none; }
-    .tb-thumb li div { border:1px solid #eee; overflow: hidden;}
+    .tb-thumb { padding: 5px; overflow: hidden; background: #f9f9f9; height: 70px; -webkit-box-shadow: none;box-shadow: none;}
+    .tb-thumb ul.am-slides li { padding:1px; border: 1px solid #eee; height:60px; width:60px !important;cursor: pointer; }
+    .tb-thumb ul.am-slides li img {height: 56px; width: 56px !important;}
+    .tb-thumb ul.am-slides .tb-selected { border: 1px solid #C30008;}
     div.zoomDiv { z-index:999; position:absolute; top:0px; left:0px; width:400px; height:400px; background:#ffffff; border:1px solid #CCCCCC; display:none; text-align:center; overflow:hidden; }
     div.zoomDiv img { min-width: 1000px; display: block; }
     div.zoomMask { position:absolute; background:url(../images/goods-mask.png)repeat scroll 0 0 rgba(33, 150, 243, 0.3); cursor:move; z-index:1; }
diff --git a/public/static/index/default/js/goods.js b/public/static/index/default/js/goods.js
index 1c4a5b02d..0180b9f52 100755
--- a/public/static/index/default/js/goods.js
+++ b/public/static/index/default/js/goods.js
@@ -562,10 +562,11 @@ $(function() {
     $('.jqzoom').imagezoom({
         yzoom: 398
     });
-    $('#thumblist li a').on('mouseover', function() {
+    $('#thumblist li img').on('mouseover', function() {
         $(this).parents('li').addClass('tb-selected').siblings().removeClass('tb-selected');
-        $('.jqzoom').attr('src', $(this).find('img').attr('mid'));
-        $('.jqzoom').attr('rel', $(this).find('img').attr('big'));
+        var img = $(this).attr('mid');
+        $('.jqzoom').attr('src', img);
+        $('.jqzoom').attr('rel', img);
     });
 
     // 规格选择显示事件