优化代码

app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml

@@ -11,6 +11,9 @@
     .checkout-index-index{
     .checkout-index-index{
         font-family: 'Outfit-Regular', sans-serif;
         font-family: 'Outfit-Regular', sans-serif;
     }
     }
+    .opc>li{padding: 0;padding-bottom: 20px;}
+    #maincontent{background: #f2f2f2;}
+    .page-title-wrapper{display: none;}
     #opc-sidebar{
     #opc-sidebar{
         border: 1px solid #d4d4d4;
         border: 1px solid #d4d4d4;
         background: #fff;
         background: #fff;
@@ -27,8 +30,9 @@
         line-height: 30px;
         line-height: 30px;
         font-family: Outfit-Regular;
         font-family: Outfit-Regular;
         font-weight: 300;
         font-weight: 300;
-        font-size: 16px;
+        font-size: 12px;
         text-transform: uppercase;
         text-transform: uppercase;
+        z-index: 1;
     }
     }
     .opc .step-title, .opc .field-select-billing .label{
     .opc .step-title, .opc .field-select-billing .label{
         font-weight: 600;
         font-weight: 600;
@@ -42,13 +46,16 @@
         font-size: 13px;
         font-size: 13px;
     }
     }
     .table-checkout-shipping-method tr.row{
     .table-checkout-shipping-method tr.row{
-        border: 1px solid #1979c3;
+        /*border: 1px solid #1979c3;*/
         box-shadow: 0 2px 8px rgb(56 77 108 / 40%);
         box-shadow: 0 2px 8px rgb(56 77 108 / 40%);
-        line-height: 35px;
-    }
-    table tbody:last-child tr:last-child{
-        border-bottom: 1px solid #1979c3;
-    }
+        line-height: 20px;
+        display: block;
+        padding: 0 20px;
+        margin-bottom: 10px;
+    }
+    /*table tbody:last-child tr:last-child{*/
+    /*    border-bottom: 1px solid #1979c3;*/
+    /*}*/
     a[href^="tel:"]{
     a[href^="tel:"]{
         color: #666666;
         color: #666666;
     }
     }
@@ -134,11 +141,19 @@
         font-family: Outfit-Regular;
         font-family: Outfit-Regular;
         color: #000000;
         color: #000000;
     }
     }
+    .opc .checkout-shipping-address{
+        padding-bottom: 20px;
+    }
+    table.table-checkout-shipping-method{
+        border-collapse: separate;
+        border-spacing: 5px 10px;
+    }
     @media (min-width: 1024px) {
     @media (min-width: 1024px) {
         .checkout-container{
         .checkout-container{
             width: 60%;
             width: 60%;
             margin: 0 auto;
             margin: 0 auto;
             background: #ffffff;
             background: #ffffff;
+            padding: 20px;
         }
         }
     }
     }
     @media(min-width: 768px){
     @media(min-width: 768px){
@@ -146,32 +161,26 @@
             justify-content: center;
             justify-content: center;
             padding-left: 80px;
             padding-left: 80px;
             font-size: 22px;
             font-size: 22px;
-            padding-top: 40px;
         }
         }
         .authentication-wrapper{
         .authentication-wrapper{
-            float: none;
-            left: 2rem;
-            padding-top: 40px;
-        }
-        .login-q-reg{
-            font-weight: 400;
-            padding: 0;
-            width: 100%;
-            margin-left: 5px;
-            white-space: nowrap;
-            font-size: 18px;
-            color: #666666;
-            margin-right: 20px;
+            float: left;
+            top: 8.5rem;
+            right: -20rem;
+            font-size: 12px;
         }
         }
+
         .action.action-auth-toggle{
         .action.action-auth-toggle{
             margin: 0;
             margin: 0;
             padding: 0;
             padding: 0;
         }
         }
-        .content.minicart-items{
-            display: block !important;
+
+        #opc-sidebar{
+            float: right;
+            width: 370px;
         }
         }
     }
     }
     @media(max-width: 767.98px){
     @media(max-width: 767.98px){
+        #maincontent{background: #ffffff;}
         .opc-progress-bar{
         .opc-progress-bar{
             margin-top: 100px;
             margin-top: 100px;
         }
         }