Commit 0984c3fd by 王东红

登录界面优化

parent ad9a36f5
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// phpcs:disable Generic.Files.LineLength.TooLong
/** @var \Magento\Customer\Block\Form\Login $block */
?>
<style type="text/css">
.page-main>.columns{
width: 50%;
margin: 0 auto;
}
@media(min-width: 768px){
.login-container{
flex-direction: column;
}
}
.page-title-wrapper h1 span{
font-size: 60px;
color: #222222;
font-weight: 400;
text-transform: capitalize;
letter-spacing: -1.5px;
margin-bottom: 20px;
line-height: 1;
}
.login-container{
padding: 1rem 3rem;
}
.login-container .block.block-customer-login .block-title strong, .login-container .block.block-new-customer .block-title strong {
font-family: 'Outfit-Regular', sans-serif;
color: #292929;
text-transform: none;
font-size: 16px;
}
.login-container .block.block-customer-login .actions-toolbar .secondary a.action.remind{
font-size: 14px;
font-family: Outfit-Regular;
color: #000000;
margin-left: 20px;
}
.abs-login-block-title, .amazon-validate-container .block .block-title, .login-container .block .block-title{
border-bottom: 1px solid #e8e8e8;
margin-bottom: 15px;
padding-bottom: 12px;
}
.login-container .block-content .field.note{
font-size: 14px;
font-family: Outfit-Regular;
}
.login-container .block-content .field .label span{
font-family: Outfit-Regular;
font-size: 14px;
}
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: 50px;
padding: 5px;
border-radius: 3px;
box-shadow: none;
}
.login-container .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: 18px 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;
}
.login-container .block.block-new-customer .block-content p{
font-size: 14px;
font-family: Outfit-Regular;
}
</style>
<div class="block block-customer-login">
<div class="block-title">
<strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Registered Customers')) ?></strong>
</div>
<div class="block-content" aria-labelledby="block-customer-login-heading">
<form class="form form-login"
action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
method="post"
id="login-form"
data-mage-init='{"validation":{}}'>
<?= $block->getBlockHtml('formkey') ?>
<fieldset class="fieldset login" data-hasrequired="<?= $block->escapeHtml(__('* Required Fields')) ?>">
<div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
<div class="field email required">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>"
<?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
id="email" type="email" class="input-text"
title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
data-mage-init='{"mage/trim-input":{}}'
data-validate="{required:true, 'validate-email':true}">
</div>
</div>
<div class="field password required">
<label for="pass" class="label"><span><?= $block->escapeHtml(__('Password')) ?></span></label>
<div class="control">
<input name="login[password]" type="password"
<?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
class="input-text" id="pass"
title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
data-validate="{required:true}">
</div>
</div>
<div class="field choice" data-bind="scope: 'showPassword'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<?= $block->getChildHtml('form_additional_info') ?>
<div class="actions-toolbar">
<div class="primary"><button type="submit" class="action login primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
<div class="secondary"><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></div>
</div>
</fieldset>
</form>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Customer/js/block-submit-on-send": {
"formId": "login-form"
},
"Magento_Ui/js/core/app": {
"components": {
"showPassword": {
"component": "Magento_Customer/js/show-password",
"passwordSelector": "#pass"
}
}
}
}
}
</script>
</div>
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