Skip to content

J
joshine
Commit d13a3baa by 王东红
Options

下单支付页面优化

parent 859fe45d
Showing with 178 additions and 2 deletions
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
...@@ -8,6 +8,19 @@ ...@@ -8,6 +8,19 @@
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */ /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?> ?>
<style type="text/css"> <style type="text/css">
.checkout-index-index{
font-family: 'Outfit-Regular', sans-serif;
}
#opc-sidebar{
border: 1px solid #d4d4d4;
background: #fff;
font-size: 16px;
margin-top: 70px;
}
.opc-block-summary{
background: #f9f9f9;
padding: 15px;
}
.action.action-auth-toggle{ .action.action-auth-toggle{
background: none; background: none;
color: #000; color: #000;
...@@ -18,9 +31,95 @@ ...@@ -18,9 +31,95 @@
font-size: 16px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
} }
.opc .step-title, .opc .field-select-billing .label{
font-weight: 600;
font-size: 20px;
cursor: pointer;
background: #eeeeee;
padding:15px;
}
.label {
color: #555;
font-size: 13px;
}
.table-checkout-shipping-method tr.row{
border: 1px solid #1979c3;
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;
}
/*.amcheckout-step-container input[type='text'], .amcheckout-step-container input[type='password'], .amcheckout-step-container input[type='url'], .amcheckout-step-container input[type='tel'], .amcheckout-step-container input[type='search'], .amcheckout-step-container input[type='number'], .amcheckout-step-container input[type='datetime'], .amcheckout-step-container input[type='email'], .amcheckout-step-container select{*/
/* height: 40px;*/
/* border: 1px solid #d4d4d4;*/
/* border-radius: 2px;*/
/* font-size: 16px;*/
/*}*/
.field ._with-tooltip input{
width: 100%;
}
.action.primary{
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgb(0 0 0 / 0%);
border-radius: 0px;
background-color: #222222;
box-shadow: none;
color: #ffffff;
display: inline-block;
font-family: 'Outfit', sans-serif;
font-weight: normal;
padding: 12px 50px;
line-height: 1;
text-shadow: none;
text-transform: capitalize;
white-space: nowrap;
font-size: 13px;
border-radius: 2px;
border: 2px solid #222222;
background-image: none;
text-align: center;
border: none;
text-transform: uppercase;
font-weight: normal !important;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
border: 1px solid #e1e1e1;
height: 40px;
padding: 5px;
border-radius: 3px;
box-shadow: none;
}
select {
background: #ffffff;
background-clip: padding-box;
border: 1px solid #c2c2c2;
border-radius: 1px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 32px;
line-height: 1.42857143;
padding: 5px 10px 4px;
vertical-align: baseline;
width: 100%;
box-sizing: border-box;
}
.opc-block-summary .title{
font-weight: 600;
font-size: 20px;
color: #363636;
}
.product-item-details{
color: #666666;
font-size: 14px;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.checkout-container{ .checkout-container{
width: 70%; width: 60%;
margin: 0 auto; margin: 0 auto;
background: #ffffff; background: #ffffff;
} }
...@@ -29,10 +128,11 @@ ...@@ -29,10 +128,11 @@
.opc-progress-bar{ .opc-progress-bar{
justify-content: center; justify-content: center;
padding-left: 80px; padding-left: 80px;
font-size: 22px;
} }
.authentication-wrapper{ .authentication-wrapper{
float: none; float: none;
top: 7.375rem; top: 6.375rem;
left: 2rem; left: 2rem;
} }
.opc-wrapper{ .opc-wrapper{
...@@ -52,6 +152,9 @@ ...@@ -52,6 +152,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.content.minicart-items{
display: block !important;
}
} }
@media(max-width: 767.98px){ @media(max-width: 767.98px){
.opc-progress-bar{ .opc-progress-bar{
...@@ -63,6 +166,9 @@ ...@@ -63,6 +166,9 @@
.login-q-reg{ .login-q-reg{
display: none; display: none;
} }
#opc-sidebar{
margin-top: 30px;
}
} }
</style> </style>
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container"> <div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
......
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/form/element/email.html 0 → 100644
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!-- ko ifnot: isCustomerLoggedIn() -->
<!-- ko foreach: getRegion('before-login-form') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<form class="form form-login" data-role="email-with-possible-login"
data-bind="submit:login"
method="post">
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
<div class="field required">
<label class="label" for="customer-email"><span data-bind="i18n: 'Email Address'"></span><!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko --></label>
<div class="control _with-tooltip">
<input class="input-text"
type="email"
data-bind="
textInput: email,
hasFocus: emailFocused,
afterRender: emailHasChanged,
mageInit: {'mage/trim-input':{}}"
name="username"
data-validate="{required:true, 'validate-email':true}"
id="customer-email" />
<span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
</div>
</div>
<!--Hidden fields -->
<fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
<div class="field">
<label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
<div class="control">
<input class="input-text"
data-bind="
attr: {
placeholder: $t('Password'),
}"
type="password"
name="password"
id="customer-password"
data-validate="{required:true}" autocomplete="off"/>
<span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
</div>
</div>
<!-- ko foreach: getRegion('additional-login-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="actions-toolbar">
<input name="context" type="hidden" value="checkout" />
<div class="primary">
<button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
</div>
<div class="secondary">
<a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
<span data-bind="i18n: 'Forgot Your Password?'"></span>
</a>
</div>
</div>
</fieldset>
<!--Hidden fields -->
</fieldset>
</form>
<!-- /ko -->
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment