优化checkout页面的安全图标

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

@@ -11,12 +11,68 @@
     .checkout-index-index{
     .checkout-index-index{
         font-family: 'Outfit-Regular', sans-serif;
         font-family: 'Outfit-Regular', sans-serif;
     }
     }
+    .page-header .header.content .logo{
+        position: unset;
+        left: unset;
+    }
+    .header.content .logo:after{
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 30px;
+        margin-left: 10px;
+        background-color: #ccc;
+        vertical-align: middle;
+        -webkit-transform: rotate(30deg);
+        transform: rotate(30deg);
+        position: relative;
+        top: 0px;
+        left: 8px;
+    }
+    .header.content .secure-wrapper{
+        display: inline-block;
+        margin-left: 10px;
+        font-size: 12px;
+        color: #83b293;
+        opacity: 1;
+        width: unset;
+    }
+    .header.content .secure-wrapper .iconfont.icon-safepay{
+        font-family: "iconfont" !important;
+        font-size: 16px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        color: #ffffff;
+        background: #83b293;
+        padding: 8px;
+        border-radius: 50%;
+    }
+    .header.content .secure-wrapper em{
+        padding-top: 36px;
+        position: relative;
+        top: 2px;
+        left: 5px;
+        font-size: 20px;
+        font-style: normal;
+    }
+    .header.content .secure-wrapper .icon-safepay:before {
+        content: "\e644";
+    }
     .checkout-index-index footer.modal-footer{margin-top: unset;}
     .checkout-index-index footer.modal-footer{margin-top: unset;}
     .header.content{height:60px;padding-top: 10px;padding-bottom: 10px;}
     .header.content{height:60px;padding-top: 10px;padding-bottom: 10px;}
     @media(min-width: 640px){
     @media(min-width: 640px){
         .header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
         .header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
     }
     }
 
 
+    @media(max-width: 639.98px){
+        .header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
+        .page-layout-checkout .header.content{justify-content:unset;gap:unset;}
+        .header.content .secure-wrapper{margin-left: 20px;margin-top: 5px;}
+        .header.content .secure-wrapper .iconfont.icon-safepay{padding: 5px !important;}
+        .header.content .secure-wrapper em{top: unset !important;font-size: 12px !important;}
+        .header.content .logo:after{left: 5px;}
+    }
+
     .opc>li{padding: 0;padding-bottom: 20px;}
     .opc>li{padding: 0;padding-bottom: 20px;}
     #maincontent{background: #f2f2f2;}
     #maincontent{background: #f2f2f2;}
     .page-title-wrapper{display: none;}
     .page-title-wrapper{display: none;}

app/design/frontend/Joshine/breeze/Magento_Theme/templates/html/header/logo.phtml

@@ -34,3 +34,7 @@ $logoHeight = $logoSizeResolver !== null && $logoSizeResolver->getHeight()
             <?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?>
             <?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?>
     />
     />
 </a>
 </a>
+<span class="secure-wrapper">
+    <i class="iconfont icon-safepay"></i>
+    <em>SECURE CHECKOUT</em>
+</span>
\ No newline at end of file

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

@@ -1048,6 +1048,11 @@ footer{
   .switcher.currency .actions.dropdown{width: 80px;}
   .switcher.currency .actions.dropdown{width: 80px;}
   .switcher.currency .dropdown.switcher-dropdown{width: 140px;}
   .switcher.currency .dropdown.switcher-dropdown{width: 140px;}
 }
 }
+.header.content .secure-wrapper{
+  opacity: 0;
+  width: 0;
+}
+
 .header.content{
 .header.content{
   max-width: none;
   max-width: none;
 }
 }

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

@@ -4,3 +4,11 @@
   font-weight: normal;
   font-weight: normal;
   font-style: normal;
   font-style: normal;
 }
 }
+@font-face {
+  font-family: 'iconfont';
+  src: url('../fonts/iconfont.woff2?t=1666939843803') format('woff2'),
+  url('../fonts/iconfont.woff?t=1666939843803') format('woff'),
+  url('../fonts/iconfont.ttf?t=1666939843803') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file

app/design/frontend/Joshine/breeze/web/css/source/_typography.less

@@ -4,3 +4,10 @@
   @font-weight: normal,
   @font-weight: normal,
   @font-style: normal
   @font-style: normal
 );
 );
+
+.lib-font-face(
+  @family-name: 'iconfont',
+  @font-path: '@{baseDir}fonts/iconfont',
+  @font-weight: normal,
+  @font-style: normal
+);
\ No newline at end of file