Skip to content

J
joshine
Commit 9d64e45e by 王东红
Options

优化个人中心样式

parent 3e71cdec
Showing with 397 additions and 149 deletions
app/code/Magento/Customer/view/frontend/templates/account/dashboard/info.phtml
......@@ -6,95 +6,6 @@
/** @var \Magento\Customer\Block\Account\Dashboard\Info $block */
?>
<style type="text/css">
.customer-account-index{
font-family: 'Outfit-Regular', sans-serif;
}
.block-dashboard-info .block-title{
border-bottom: 1px solid #e1e1e1;
padding-bottom: 13px;
font-weight: 500;
}
.account .main .block .block-title{
background: none;
text-transform: uppercase;
padding-left: 0px;
font-weight: 300;
}
.account .main .block .block-title strong{
font-weight: 300;
}
.block-dashboard-addresses .block-title {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 10px;
font-weight: 500;
}
.block-dashboard-info .box-information .box-title,.box-newsletter strong.box-title,.block-dashboard-addresses .box-title{
font-size: 20px;
padding-bottom: 10px;
color: #292929;
display: block;
font-weight: 600;
}
.block-dashboard-orders{
display: none;
}
@media(min-width: 768px){
.block .box{
max-width: 700px;
}
}
.block-dashboard-info{
padding: 10px 20px;
border: 1px solid #e1e1e1;
overflow: hidden;
}
.block-dashboard-addresses {
padding: 10px 20px;
border: 1px solid #e1e1e1;
overflow: hidden;
}
.block-dashboard-info .block-title{
border-bottom: 1px solid #e1e1e1;
padding-bottom: 13px;
font-weight: 500;
}
.account .main .block .block-title{
background: none;
text-transform: uppercase;
padding-left: 0px;
font-weight: 300;
}
.account .main .block .block-title strong{
font-weight: 300;
}
.block-dashboard-addresses .block-title {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 10px;
font-weight: 500;
}
.block-dashboard-info .box-information .box-title,.box-newsletter strong.box-title,.block-dashboard-addresses .box-title{
font-size: 20px;
padding-bottom: 10px;
color: #292929;
display: block;
font-weight: 600;
}
.block-dashboard-orders{
display: none;
}
@media(min-width: 768px){
.block .box{
max-width: 700px;
}
}
</style>
<div class="block block-dashboard-info">
<div class="block-title"><strong><?= $block->escapeHtml(__('Account Information')) ?></strong></div>
<div class="block-content">
......
app/code/Magento/Customer/view/frontend/templates/form/edit.phtml
......@@ -9,66 +9,6 @@ use Magento\Customer\Block\Widget\Name;
/** @var \Magento\Customer\Block\Form\Edit $block */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<style type="text/css">
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;
}
.fieldset > .field:not(.choice) > .label {
padding: 6px 15px 0 0;
text-align: right;
box-sizing: border-box;
float: left;
}
.actions-toolbar .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;
}
.label {
color: #555;
font-size: 13px;
}
input{
box-shadow: inset 0 -2px #e7e7e7;
}
.field.choice>[type="radio"], .field.choice>[type="checkbox"] {
margin-top: 4px;
}
@media(min-width: 768px){
.form-edit-account>.fieldset, .form-address-edit>.fieldset{
width: 100%;
max-width: none;
}
}
</style>
<form class="form form-edit-account"
action="<?= $block->escapeUrl($block->getUrl('customer/account/editPost')) ?>"
method="post" id="form-validate"
......
app/design/frontend/Joshine/breeze/Magento_Customer/templates/account/dashboard/info.phtml 0 → 100644
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/** @var \Magento\Customer\Block\Account\Dashboard\Info $block */
?>
<style type="text/css">
.customer-account-index{
font-family: 'Outfit-Regular', sans-serif;
}
.block-dashboard-info .block-title{
border-bottom: 1px solid #e1e1e1;
padding-bottom: 13px;
font-weight: 500;
}
.account .main .block .block-title{
background: none;
text-transform: uppercase;
padding-left: 0px;
font-weight: 300;
}
.account .main .block .block-title strong{
font-weight: 300;
}
.block-dashboard-addresses .block-title {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 10px;
font-weight: 500;
}
.block-dashboard-info .box-information .box-title,.box-newsletter strong.box-title,.block-dashboard-addresses .box-title{
font-size: 20px;
padding-bottom: 10px;
color: #292929;
display: block;
font-weight: 600;
}
.block-dashboard-orders{
display: none;
}
@media(min-width: 768px){
.block .box{
max-width: 700px;
}
}
.block-dashboard-info{
padding: 10px 20px;
border: 1px solid #e1e1e1;
overflow: hidden;
}
.block-dashboard-addresses {
padding: 10px 20px;
border: 1px solid #e1e1e1;
overflow: hidden;
}
.block-dashboard-info .block-title{
border-bottom: 1px solid #e1e1e1;
padding-bottom: 13px;
font-weight: 500;
}
.account .main .block .block-title{
background: none;
text-transform: uppercase;
padding-left: 0px;
font-weight: 300;
}
.account .main .block .block-title strong{
font-weight: 300;
}
.block-dashboard-addresses .block-title {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 10px;
font-weight: 500;
}
.block-dashboard-info .box-information .box-title,.box-newsletter strong.box-title,.block-dashboard-addresses .box-title{
font-size: 20px;
padding-bottom: 10px;
color: #292929;
display: block;
font-weight: 600;
}
.block-dashboard-orders{
display: none;
}
@media(min-width: 768px){
.block .box{
max-width: 700px;
}
}
</style>
<div class="block block-dashboard-info">
<div class="block-title"><strong><?= $block->escapeHtml(__('Account Information')) ?></strong></div>
<div class="block-content">
<div class="box box-information">
<strong class="box-title">
<span><?= $block->escapeHtml(__('Contact Information')) ?></span>
</strong>
<div class="box-content">
<p>
<?= $block->escapeHtml($block->getName()) ?><br>
<?= $block->escapeHtml($block->getCustomer()->getEmail()) ?><br>
</p>
<?= $block->getChildHtml('customer.account.dashboard.info.extra'); ?>
</div>
<div class="box-actions">
<a class="action edit" href="<?= $block->escapeUrl($block->getUrl('customer/account/edit')) ?>">
<span><?= $block->escapeHtml(__('Edit')) ?></span>
</a>
<a href="<?= $block->escapeUrl($block->getChangePasswordUrl()) ?>" class="action change-password">
<?= $block->escapeHtml(__('Change Password')) ?>
</a>
</div>
</div>
<?php if ($block->isNewsletterEnabled()): ?>
<div class="box box-newsletter">
<strong class="box-title">
<span><?= $block->escapeHtml(__('Newsletters')) ?></span>
</strong>
<div class="box-content">
<p>
<?php if ($block->getIsSubscribed()): ?>
<?= $block->escapeHtml(__('You are subscribed to "General Subscription".')) ?>
<?php else: ?>
<?= $block->escapeHtml(__('You aren\'t subscribed to our newsletter.')) ?>
<?php endif; ?>
</p>
</div>
<div class="box-actions">
<a class="action edit" href="<?= $block->escapeUrl($block->getUrl('newsletter/manage')) ?>">
<span><?= $block->escapeHtml(__('Edit')) ?></span></a>
</div>
</div>
<?php endif; ?>
<?= $block->getChildHtml('additional_blocks'); ?>
</div>
</div>
app/design/frontend/Joshine/breeze/Magento_Customer/templates/form/edit.phtml 0 → 100644
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Customer\Block\Widget\Name;
/** @var \Magento\Customer\Block\Form\Edit $block */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<style type="text/css">
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;
}
.fieldset > .field:not(.choice) > .label {
padding: 6px 15px 0 0;
text-align: right;
box-sizing: border-box;
float: left;
}
.actions-toolbar .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;
}
.label {
color: #555;
font-size: 13px;
}
input{
box-shadow: inset 0 -2px #e7e7e7;
}
.field.choice>[type="radio"], .field.choice>[type="checkbox"] {
margin-top: 4px;
}
@media(min-width: 768px){
.form-edit-account>.fieldset, .form-address-edit>.fieldset{
width: 100%;
max-width: none;
}
}
</style>
<form class="form form-edit-account"
action="<?= $block->escapeUrl($block->getUrl('customer/account/editPost')) ?>"
method="post" id="form-validate"
enctype="multipart/form-data"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
autocomplete="off">
<fieldset class="fieldset info">
<?= $block->getBlockHtml('formkey') ?>
<legend class="legend"><span><?= $block->escapeHtml(__('Account Information')) ?></span></legend><br>
<?= $block->getLayout()->createBlock(Name::class)->setObject($block->getCustomer())->toHtml() ?>
<?php $_dob = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Dob::class) ?>
<?php $_taxvat = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Taxvat::class) ?>
<?php $_gender = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Gender::class) ?>
<?php if ($_dob->isEnabled()): ?>
<?= $_dob->setDate($block->getCustomer()->getDob())->toHtml() ?>
<?php endif ?>
<?php if ($_taxvat->isEnabled()): ?>
<?= $_taxvat->setTaxvat($block->getCustomer()->getTaxvat())->toHtml() ?>
<?php endif ?>
<?php if ($_gender->isEnabled()): ?>
<?= $_gender->setGender($block->getCustomer()->getGender())->toHtml() ?>
<?php endif ?>
<div class="field choice">
<input type="checkbox" name="change_email" id="change-email" data-role="change-email" value="1"
title="<?= $block->escapeHtmlAttr(__('Change Email')) ?>" class="checkbox" />
<label class="label" for="change-email">
<span><?= $block->escapeHtml(__('Change Email')) ?></span>
</label>
</div>
<div class="field choice">
<input type="checkbox" name="change_password" id="change-password" data-role="change-password" value="1"
title="<?= $block->escapeHtmlAttr(__('Change Password')) ?>"
<?php if ($block->getChangePassword()): ?> checked="checked"<?php endif; ?> class="checkbox" />
<label class="label" for="change-password">
<span><?= $block->escapeHtml(__('Change Password')) ?></span>
</label>
</div>
<?= $block->getChildHtml('fieldset_edit_info_additional') ?>
</fieldset>
<fieldset class="fieldset password" data-container="change-email-password">
<legend class="legend">
<span data-title="change-email-password"><?= $block->escapeHtml(__('Change Email and Password')) ?></span>
</legend><br>
<div class="field email required" data-container="change-email">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input type="email" name="email" id="email" autocomplete="email" data-input="change-email"
value="<?= $block->escapeHtmlAttr($block->getCustomer()->getEmail()) ?>"
title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
class="input-text"
data-validate="{required:true, 'validate-email':true}" />
</div>
</div>
<div class="field password current required">
<label class="label" for="current-password">
<span><?= $block->escapeHtml(__('Current Password')) ?></span>
</label>
<div class="control">
<input type="password" class="input-text" name="current_password" id="current-password"
data-input="current-password"
autocomplete="off" />
</div>
</div>
<div class="field new password required" data-container="new-password">
<label class="label" for="password"><span><?= $block->escapeHtml(__('New Password')) ?></span></label>
<div class="control">
<?php $minCharacterSets = $block->getRequiredCharacterClassesNumber() ?>
<input type="password" class="input-text" name="password" id="password"
data-password-min-length="<?= $block->escapeHtml($block->getMinimumPasswordLength()) ?>"
data-password-min-character-sets="<?= $block->escapeHtml($minCharacterSets) ?>"
data-input="new-password"
data-validate="{required:true, 'validate-customer-password':true}"
autocomplete="off" />
<div id="password-strength-meter-container" data-role="password-strength-meter" aria-live="polite">
<div id="password-strength-meter" class="password-strength-meter">
<?= $block->escapeHtml(__('Password Strength')) ?>:
<span id="password-strength-meter-label" data-role="password-strength-meter-label">
<?= $block->escapeHtml(__('No Password')) ?>
</span>
</div>
</div>
</div>
</div>
<div class="field confirmation password required" data-container="confirm-password">
<label class="label" for="password-confirmation">
<span><?= $block->escapeHtml(__('Confirm New Password')) ?></span>
</label>
<div class="control">
<input type="password" class="input-text" name="password_confirmation" id="password-confirmation"
data-input="confirm-password"
autocomplete="off" />
</div>
</div>
<div class="field choice" data-bind="scope: 'showPassword'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
</fieldset>
<fieldset class="fieldset additional_info">
<?= $block->getChildHtml('form_additional_info') ?>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action save primary" title="<?= $block->escapeHtmlAttr(__('Save')) ?>">
<span><?= $block->escapeHtml(__('Save')) ?></span>
</button>
</div>
<div class="secondary">
<a class="action back" href="<?= $block->escapeUrl($block->getBackUrl()) ?>">
<span><?= $block->escapeHtml(__('Go back')) ?></span>
</a>
</div>
</div>
</form>
<?php $ignore = /* @noEscape */ $_dob->isEnabled() ? '\'input[id$="full"]\'' : 'null';
$scriptString = <<<script
require([
"jquery",
"mage/mage"
], function($){
var dataForm = $('#form-validate');
var ignore = {$ignore};
dataForm.mage('validation', {
script;
if ($_dob->isEnabled()):
$scriptString .= <<<script
errorPlacement: function(error, element) {
if (element.prop('id').search('full') !== -1) {
var dobElement = $(element).parents('.customer-dob'),
errorClass = error.prop('class');
error.insertAfter(element.parent());
dobElement.find('.validate-custom').addClass(errorClass)
.after('<div class="' + errorClass + '"></div>');
}
else {
error.insertAfter(element);
}
},
ignore: ':hidden:not(' + ignore + ')'
script;
else:
$scriptString .= <<<script
ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
script;
endif;
$scriptString .= <<<script
});
});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<?php $changeEmailAndPasswordTitle = $block->escapeHtml(__('Change Email and Password')) ?>
<script type="text/x-magento-init">
{
"[data-role=change-email], [data-role=change-password]": {
"changeEmailPassword": {
"titleChangeEmail": "<?= $block->escapeJs($block->escapeHtml(__('Change Email'))) ?>",
"titleChangePassword": "<?= $block->escapeJs($block->escapeHtml(__('Change Password'))) ?>",
"titleChangeEmailAndPassword": "<?= $block->escapeJs($changeEmailAndPasswordTitle) ?>"
}
},
"[data-container=new-password]": {
"passwordStrengthIndicator": {
"formSelector": "form.form-edit-account"
}
},
"*": {
"Magento_Ui/js/core/app": {
"components": {
"showPassword": {
"component": "Magento_Customer/js/show-password",
"passwordSelector": "#current-password,#password,#password-confirmation"
}
}
}
}
}
</script>
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