feat : 进一步扩充less类库; navigation样式微调

app/code/Joshine/Category/Block/Html/Topmenu.php

@@ -99,7 +99,7 @@ class Topmenu extends JoshineMenu
     {
     {
         $parentSetMyColumns = $item->getParent()->getSubmenuColumnsSingle();
         $parentSetMyColumns = $item->getParent()->getSubmenuColumnsSingle();
         $selfColumns    = $item->getSelfColumns();
         $selfColumns    = $item->getSelfColumns();
-        $defaultColumns = '4';
+        $defaultColumns = '3';
         if ($item->getLevel() > 1) {
         if ($item->getLevel() > 1) {
             $defaultColumns = '12';
             $defaultColumns = '12';
         }
         }
@@ -195,8 +195,8 @@ class Topmenu extends JoshineMenu
         $columns = $sumMenuColumnsTotal ?? '12';
         $columns = $sumMenuColumnsTotal ?? '12';
         if ($childLevel == 0) {
         if ($childLevel == 0) {
             $html  = "<div class=\"level{$childLevel} {$childrenWrapClass}\">";
             $html  = "<div class=\"level{$childLevel} {$childrenWrapClass}\">";
-            $html .= "<div class=\"row\">
-                    <ul class=\"subchildmenu mega-columns joshine-clearfix joshine-col-lg-{$columns} {$child->getMenuImage()}\">
+            $html .= "<div class=\"row  \">
+                    <ul class=\"subchildmenu joshine-col-lg-push-1 mega-columns joshine-clearfix joshine-col-lg-{$columns} {$child->getMenuImage()}\">
                         {$this->_getHtml($child, $childrenWrapClass, $limit, $colStops)}
                         {$this->_getHtml($child, $childrenWrapClass, $limit, $colStops)}
                     </ul>";
                     </ul>";
             $html .= $this->appendImage($child);
             $html .= $this->appendImage($child);
@@ -217,7 +217,7 @@ class Topmenu extends JoshineMenu
         }
         }
 
 
         if ($child->getMenuImage()) {
         if ($child->getMenuImage()) {
-            $html  .= "<div class=\" pull-right \">";
+            $html  .= "<div class=\" pull-right joshine-col-lg-3 joshine-col-lg-push-1 joshine-hidden-xs joshine-hidden-sm joshine-hidden-md  \">";
             $html  .=  "<img src='{$child->getMenuImage()}'/>";
             $html  .=  "<img src='{$child->getMenuImage()}'/>";
             $html  .= "</div>";
             $html  .= "</div>";
         }
         }

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -1350,14 +1350,14 @@ footer{
     .submenu{
     .submenu{
       width: 100%;
       width: 100%;
       margin-top: 16px;
       margin-top: 16px;
-      padding: 60px 30px 60px 20px;
+      padding: 24px 30px 60px 20px;
     }
     }
     .subchildmenu.mega-columns > li{
     .subchildmenu.mega-columns > li{
       float: left;
       float: left;
     }
     }
     .navigation li.level0 .submenu li.level1{
     .navigation li.level0 .submenu li.level1{
       border-right: 1px solid #e1e1e1;
       border-right: 1px solid #e1e1e1;
-      padding: 0 20px;
+      padding: 0 6px;
     }
     }
 
 
     .navigation .subchildmenu li.level1:last-child{
     .navigation .subchildmenu li.level1:last-child{
@@ -1369,7 +1369,7 @@ footer{
     }
     }
     .navigation ul li.level0 > a > span{
     .navigation ul li.level0 > a > span{
       text-transform: uppercase;
       text-transform: uppercase;
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
       font-weight: 500;
     }
     }
 
 
@@ -1394,7 +1394,7 @@ footer{
     }
     }
 
 
     .navigation .subchildmenu li.level1.parent>a>span{
     .navigation .subchildmenu li.level1.parent>a>span{
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 500;
       font-weight: 500;
       color: #000001;
       color: #000001;
       font-family: 'Outfit-Regular', sans-serif;
       font-family: 'Outfit-Regular', sans-serif;

app/design/frontend/Joshine/breeze/web/css/_joshine_col.less

@@ -763,4 +763,26 @@
   display: none !important;
   display: none !important;
 }
 }
 
 
+/*可见性*/
+@media (max-width: 767px) {
+  .joshine-hidden-xs {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .joshine-hidden-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .joshine-hidden-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .joshine-hidden-lg {
+    display: none !important;
+  }
+}
+