恢复pc详情页

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/gallery.phtml

@@ -76,7 +76,7 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
         </a>
     </div>
 
-    <div class="thumbnails <?php echo $navType ? '' : 'hidden' ?>" style="display: none;">
+    <div class="thumbnails <?php echo $navType ? '' : 'hidden' ?>">
         <?php if (count($images) > 1) : // empty parent wrapper may be used at configurable product page ?>
             <?php
             foreach ($images as $image) : ?>
@@ -103,13 +103,12 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
             <?php endforeach ?>
         <?php endif ?>
     </div>
-    <div class="thumbnails-2" style="display: none;">
-        <ul class="des">
+    <div class="thumbnails-2">
         <?php
-        for($i=1;$i<count($images)+1;$i++) : ?>
-            <li><?= $i; ?></li>
-        <?php endfor ?>
-        </ul>
+        foreach ($images as $key => $image) : ?>
+            <a  href="javasrcpit:void(0);" name="<?= $image->getLargeImageUrl() ?>" title="<?= $image->getLabel() ?: __('View Image') ?>">
+            <?= $key + 1 ;?></a>
+        <?php endforeach ?>
     </div>
 </div>
 
@@ -144,43 +143,31 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
         background-color: #fff;
     }
 
-    @media (min-width: 768px) {
-        .breeze-gallery .thumbnails {
-           display: block !important;
-        }
-
-    }
     @media (max-width: 768px) {
-        .breeze-gallery .thumbnails-2 {
-            display: block !important;
-            TEXT-ALIGN: center;
-            margin-top: -100px;
-            z-index: 999;
+        .breeze-gallery .thumbnails {
+           display: none !important;
         }
-        .thumbnails-2  > ul {
-            display: flex;
-            flex-flow: row nowrap;
-            justify-content: center;
     }
-        .thumbnails-2  > ul li {
-            list-style: none;
-            text-align: center;
-            height: 15px;
-            font-size: 0px;
-            color: #000;
-            font-weight: 700;
-            background-color: #000;
-            width: 15px;
-            border-radius: 50%;
-            margin: 2px;
+    @media (m-width: 768px) {
+        .breeze-gallery .thumbnails {
+            display: none !important;
         }
-
-        .active{
-            background-color: #fff;
-            color: #fff;
     }
 
-    }
+    ul{list-style: none;}
+    .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}
+    .img{position: absolute;top: 0;left: 0;}
+    .des{position: absolute;bottom: 0;left: 0;z-index: -2;background: #ccc}
+    .des li{float: left;width: 600px;}
+    .img li{float: left;}
+    .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
+    .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
+    .btn{display: none;}
+    .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
+    .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
+    .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
+    .num .active{background-color: #fff;}
+    .hide{display: none;}
 </style>
 
 <script>