Skip to content

J
joshine
Commit f77863d7 by halweg
Options

详情页ui整理

parent 1b681d3a
Showing with 84 additions and 77 deletions
app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml
...@@ -23,6 +23,23 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -23,6 +23,23 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
?> ?>
<style>
.review-item-head {
display: flex;
justify-content: space-between;
}
.review-item-head-item {
display: flex;
}
.review-item-head-item .joshine-review-nickname {
margin-right: 10px;
}
.ave-rate + * {
margin: 0 !important;
}
</style>
<div class="block review-list joshine-clearfix" id="customer-reviews"> <div class="block review-list joshine-clearfix" id="customer-reviews">
<div class="joshine-review-container joshine-clearfix joshine-hidden-md joshine-hidden-sm joshine-hidden-xs"> <div class="joshine-review-container joshine-clearfix joshine-hidden-md joshine-hidden-sm joshine-hidden-xs">
...@@ -36,8 +53,8 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -36,8 +53,8 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
<?= __("Average Rating") ?> <?= __("Average Rating") ?>
</div> </div>
<div class="ave-rate"> <div class="ave-rate">
<div class="joshine-rating-container"> <div class="rating-result -lg">
<div class="joshine-rating-starts" style="width: <?= $rating ?>%;"></div> <span style="width: <?= $rating ?>%;"></span>
</div> </div>
<div class="ave-rate-total"><?= $block->getRatingSummaryValue() ?></div> <div class="ave-rate-total"><?= $block->getRatingSummaryValue() ?></div>
</div> </div>
...@@ -58,10 +75,12 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -58,10 +75,12 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<div class="joshine-review-item add-new-box"> <div class="joshine-review-item">
<a href="#review-form" title="Write a review" class="add-new-button joshine-btn joshine-btn-dark joshine-review-add-btn"> <div class="add-new-box">
<?= __("Write a review") ?> <div class="primary actions-primary">
</a> <a href="#review-form" class="action submit primary joshine-review-add-btn" style="background-color: #000; margin-left: 25%;"><span><?= $block->escapeHtml(__('Write a review')) ?></span></a>
</div>
</div>
</div> </div>
</div> </div>
...@@ -83,14 +102,13 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -83,14 +102,13 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
<div class="joshine-review-des-title joshine-font-size-default joshine-font-c-deepin"> <div class="joshine-review-des-title joshine-font-size-default joshine-font-c-deepin">
<?= $block->escapeHtml($review->getTitle()) ?> <?= $block->escapeHtml($review->getTitle()) ?>
</div> </div>
<div class="joshine-rating-container joshine-rating-small"> <div class="rating-result">
<?php if (count($review->getRatingVotes())) : ?> <?php if (count($review->getRatingVotes())) : ?>
<?php foreach ($review->getRatingVotes() as $_vote) : ?> <?php foreach ($review->getRatingVotes() as $_vote) : ?>
<div class="joshine-rating-starts" style="width: <?= $block->escapeHtml($_vote->getPercent()) ?>%;"></div> <span style="width: <?= $block->escapeHtml($_vote->getPercent()) ?>%;"></span>
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div class="joshine-review-des"> <div class="joshine-review-des">
<?= $block->escapeHtml($review->getDetail()); ?> <?= $block->escapeHtml($review->getDetail()); ?>
</div> </div>
...@@ -127,43 +145,30 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -127,43 +145,30 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
</div> </div>
<div class="joshine-review-container-mobile joshine-hidden-lg"> <div class="joshine-review-container-mobile joshine-hidden-lg">
<h4 class="joshine-review-title joshine-font-w-bolder"> <h5 class="joshine-review-title joshine-font-w-bolder">
<?= __("Customer Reviews") ?> <?= __("Customer Reviews") ?>
</h4> </h5>
<div class="joshine-review"> <div class="joshine-review">
<div class="joshine-review-averate joshine-bg-silver joshine-clearfix"> <div class="joshine-review-averate joshine-bg-silver joshine-clearfix" style="margin-bottom: 1em;">
<div class="joshine-review-item joshine-review-rating-box"> <div class="joshine-review-item joshine-review-rating-box">
<div class="name"> <div class="name">
<?= __("Average Rating") ?> <?= __("Average Rating") ?>
</div> </div>
<div class="ave-rate row"> <div style="display: flex; justify-content: space-between;">
<div class="joshine-rating-container joshine-col-xs-8"> <div class="ave-rate">
<div class="joshine-rating-starts" style="width: <?= $rating ?>%;"></div> <div class="rating-result -lg">
</div> <span style="width: <?= $rating ?>%;"></span>
<h2 class="ave-rate-total" style="margin-top: 0; margin-bottom: .35em; margin-left: .4em"><?= $block->getRatingSummaryValue() ?></h2>
</div>
</div>
<div class="joshine-review-item">
<div class="name">
<?= __("Did the item fit well?") ?>
</div>
<?php foreach ($block->getDetailedSummary() as $key => $detail) : ?>
<div class="fit-item">
<span class="fit-name joshine-font-mini">
<?= $t[$key] ?>
</span>
<div class="joshine-process">
<div class="joshine-process-active" style="width: <?= /* @noEscape */ $count ? round($detail / $count * 100) : 0 ?>%;"></div>
</div> </div>
<h4 class="ave-rate-total" style="margin:0;"><?= $block->getRatingSummaryValue() ?></h4>
</div> </div>
<?php endforeach; ?> <div class="joshine-review-item add-new-box">
<a href="#review-form" title="Write a review" class="add-new-button joshine-btn joshine-btn-dark joshine-review-add-btn">
<?= __("Write a review") ?>
</a>
</div>
</div>
</div> </div>
</div>
<div class="joshine-review-item add-new-box">
<a href="#review-form" title="Write a review" class="add-new-button joshine-btn joshine-btn-dark joshine-review-add-btn">
<?= __("Write a review") ?>
</a>
</div> </div>
<div class="joshine-review-list joshine-clearfix"> <div class="joshine-review-list joshine-clearfix">
...@@ -171,48 +176,44 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -171,48 +176,44 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
<?php foreach ($_items as $review) : ?> <?php foreach ($_items as $review) : ?>
<div class="joshine-review-list-item row joshine-clearfix"> <div class="joshine-review-list-item row joshine-clearfix">
<div class="row"> <div class="row">
<span class="joshine-review-nickname" style="font-size: .9em;"> <div class="review-item-head">
<?= $block->escapeHtml($review->getNickname()) ?> <div class="review-item-head-item">
</span> <span class="joshine-review-nickname" style="font-size: .9em;">
&nbsp; <?= $block->escapeHtml($review->getNickname()) ?>
<span class="joshine-review-date joshine-font-c-darkgray joshine-font-mini-plus">
<?= $block->escapeHtml($block->formatDate($review->getCreatedAt(), $format)) ?>
</span>
</div>
<div class="row">
<div class="joshine-rating-container joshine-rating-small joshine-col-xs-8">
<?php if (count($review->getRatingVotes())) : ?>
<?php foreach ($review->getRatingVotes() as $_vote) : ?>
<div class="joshine-rating-starts" style="width: <?= $block->escapeHtml($_vote->getPercent()) ?>%;"></div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="joshine-pull-right">
<div class="joshine-review-helpful joshine-font-c-darkgray joshine-font-text">
<span class="joshine-like <?= $block->getPlusVotedClass($review->getId()); ?>" data-review-id="<?= $review->getId(); ?>">
<input name="form_key" type="hidden" value="<?= /* @noEscape */ $block->getFormKey(); ?>" />
</span> </span>
<span class="joshine-review-likes-count" data-review-id="<?= $review->getId(); ?>"><?= $block->getPlusReview($review->getId()); ?></span> <div class="rating-result">
<?php if (count($review->getRatingVotes())) : ?>
<?php foreach ($review->getRatingVotes() as $_vote) : ?>
<span style="width: <?= $block->escapeHtml($_vote->getPercent()) ?>%;"></span>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<div class="joshine-flex">
<span class="joshine-review-date joshine-font-c-darkgray joshine-font-mini-plus">
<?= $block->escapeHtml($block->formatDate($review->getCreatedAt(), $format)) ?>
</span>
<div class="joshine-review-helpful joshine-font-c-darkgray joshine-font-text">
<span class="joshine-like <?= $block->getPlusVotedClass($review->getId()); ?>" data-review-id="<?= $review->getId(); ?>">
<input name="form_key" type="hidden" value="<?= /* @noEscape */ $block->getFormKey(); ?>" />
</span>
<span class="joshine-review-likes-count" data-review-id="<?= $review->getId(); ?>"><?= $block->getPlusReview($review->getId()); ?></span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row joshine-foot-mark">
<?php $fitsValue = $review->getSizeFits(); ?>
<span><strong class="joshine-font-w-bolder"><?= __("Size Fits") ?>:</strong> <?= $helper->translateSizeFits($fitsValue); ?></span>
</div>
<div class="row joshine-font-w-bolder" style="font-size: .9em;">
<?= $block->escapeHtml($review->getTitle()); ?>
</div>
<div class="row joshine-font-c-darkgray" style="font-size: .8em;"> <div class="row joshine-font-c-darkgray" style="font-size: .8em;">
<?= $block->escapeHtml($review->getDetail()); ?> <?= $block->escapeHtml($review->getDetail()); ?>
</div> </div>
<div class="row joshine-review-pics"> <div class="row joshine-review-pics" style="margin: .5em;">
<?= /* @noEscape */ $helper->getReviewImagesHtml($review->getId(), $block->getProductId()) ?> <?= /* @noEscape */ $helper->getReviewImagesHtml($review->getId(), $block->getProductId()) ?>
</div> </div>
<div class="row joshine-foot-mark">
<?php $fitsValue = $review->getSizeFits(); ?>
<span><strong class="joshine-font-w-bolder"><?= __("Size Fits") ?>:</strong> <?= $helper->translateSizeFits($fitsValue); ?></span>
</div>
</div> </div>
<hr> <hr>
<?php endforeach; ?> <?php endforeach; ?>
......
app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js
...@@ -451,7 +451,7 @@ define([ ...@@ -451,7 +451,7 @@ define([
if (item.id == 137) { if (item.id == 137) {
// Create new control // Create new control
var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="display:block;">'+ var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="display:block;">'+
'<div style="font-size:.32rem;color:#999999;">'+$.mage.__("Product Size Describe")+ '</div>'+ '<div style="color:#999999;">'+$.mage.__("Product Size Describe")+ '</div>'+
'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '">'+item.options[0].label+'</span></div>'; '<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '">'+item.options[0].label+'</span></div>';
container.append( container.append(
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
...@@ -2329,11 +2329,6 @@ button.action.submit.primary { ...@@ -2329,11 +2329,6 @@ button.action.submit.primary {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-bottom: revert; margin-bottom: revert;
font-size: larger;
}
.swatch-attribute {
margin-bottom: 1.5rem !important;
} }
...@@ -2457,13 +2452,11 @@ button.action.submit.primary { ...@@ -2457,13 +2452,11 @@ button.action.submit.primary {
.swatch-attribute-selected-option-size-content{ .swatch-attribute-selected-option-size-content{
margin-top: 0.53333rem; margin-top: 0.53333rem;
padding: 0.26667rem; padding: 10px;
background-color: #f8f8f8!important; background-color: #f8f8f8!important;
display: none; display: none;
} }
.fieldset .swatch-attribute-options.clearfix{margin-top: 20px !important;}
@media (max-width: 768px){ @media (max-width: 768px){
.swatch-attribute-selected-option-size-content span.swatch-attribute-selected-option{ .swatch-attribute-selected-option-size-content span.swatch-attribute-selected-option{
margin-left: 0!important; margin-left: 0!important;
......
app/design/frontend/Joshine/breeze/web/css/_joshine_utils.less
...@@ -22,6 +22,16 @@ ...@@ -22,6 +22,16 @@
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMnYxOEgweiIvPjxwYXRoIGQ9Ik05LjUgMGwyLjI0MyA2Ljg3NUgxOWwtNS44NzEgNC4yNUwxNS4zNyAxOCA5LjUgMTMuNzUgMy42MjkgMThsMi4yNDItNi44NzVMMCA2Ljg3NWg3LjI1N0w5LjUgMHoiIGZpbGw9IiNFRDlEMDAiLz48L3N2Zz4=); background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMnYxOEgweiIvPjxwYXRoIGQ9Ik05LjUgMGwyLjI0MyA2Ljg3NUgxOWwtNS44NzEgNC4yNUwxNS4zNyAxOCA5LjUgMTMuNzUgMy42MjkgMThsMi4yNDItNi44NzVMMCA2Ljg3NWg3LjI1N0w5LjUgMHoiIGZpbGw9IiNFRDlEMDAiLz48L3N2Zz4=);
} }
.rating-result::before, .rating-result > span::before {
left: -5px;
}
.rating-result.-lg {
width: 9rem;
&::before, & > span::before {
-webkit-mask-size: 1.8rem 1.8rem;
}
}
/*点赞图标*/ /*点赞图标*/
.joshine-like { .joshine-like {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMHYxOEgweiIvPjxwYXRoIGQ9Ik0zLjg5NiA3LjI4NkguNTU2QS41NTQuNTU0IDAgMCAwIDAgNy44NDh2OC45ODVjMCAuMzE0LjI0NS41NjEuNTU3LjU2MWgzLjM0YS41NTMuNTUzIDAgMCAwIC41NTYtLjU2MVY3Ljg0OGEuNTUzLjU1MyAwIDAgMC0uNTU3LS41NjJ6TTIwIDguMzVjMC0uOTE1LS42MjMtMS44NC0xLjgxMy0xLjg0aC01LjM5MmMuNzctMS4zOTEuOTk3LTMuMzQ3LjQ2Mi00Ljc3OEMxMi44NjMuNjggMTIuMTEuMDY2IDExLjEzOS4wMDRsLS4wMTYtLjAwMkExLjE3IDEuMTcgMCAwIDAgOS44ODkgMS4wOEM5Ljc1MSAyLjUgOS4xMzQgNS4wMSA4LjI1MSA1LjljLS43NDQuNzUtMS4zOCAxLjA2NS0yLjQzNiAxLjU4Ni0uMTUyLjA3NS0uMzIuMTU3LS40OTYuMjQ2YTEuNCAxLjQgMCAwIDEgLjAwNS4xMTd2OC44OTNsLjM3Ny4xM0M3LjQ0MyAxNy40NzggOC45NDggMTggMTEuMjQ4IDE4aDQuMzZjMS4xOSAwIDEuODEyLS45MjYgMS44MTItMS44NDFhMiAyIDAgMCAwLS4xNjMtLjc5MyAxLjcxOCAxLjcxOCAwIDAgMCAxLS41NTljLjI5Mi0uMzM0LjQ1My0uNzc5LjQ1My0xLjI1MSAwLS4yNy0uMDU1LS41NDMtLjE2My0uNzkyLjk1Ni0uMTY2IDEuNDUzLS45OTMgMS40NTMtMS44MSAwLS40NzUtLjE2OC0uOTUzLS40OTQtMS4zMDIuMzI2LS4zNS40OTQtLjgyNy40OTQtMS4zMDJ6IiBmaWxsPSIjQzRDNEM0Ii8+PC9zdmc+); background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMHYxOEgweiIvPjxwYXRoIGQ9Ik0zLjg5NiA3LjI4NkguNTU2QS41NTQuNTU0IDAgMCAwIDAgNy44NDh2OC45ODVjMCAuMzE0LjI0NS41NjEuNTU3LjU2MWgzLjM0YS41NTMuNTUzIDAgMCAwIC41NTYtLjU2MVY3Ljg0OGEuNTUzLjU1MyAwIDAgMC0uNTU3LS41NjJ6TTIwIDguMzVjMC0uOTE1LS42MjMtMS44NC0xLjgxMy0xLjg0aC01LjM5MmMuNzctMS4zOTEuOTk3LTMuMzQ3LjQ2Mi00Ljc3OEMxMi44NjMuNjggMTIuMTEuMDY2IDExLjEzOS4wMDRsLS4wMTYtLjAwMkExLjE3IDEuMTcgMCAwIDAgOS44ODkgMS4wOEM5Ljc1MSAyLjUgOS4xMzQgNS4wMSA4LjI1MSA1LjljLS43NDQuNzUtMS4zOCAxLjA2NS0yLjQzNiAxLjU4Ni0uMTUyLjA3NS0uMzIuMTU3LS40OTYuMjQ2YTEuNCAxLjQgMCAwIDEgLjAwNS4xMTd2OC44OTNsLjM3Ny4xM0M3LjQ0MyAxNy40NzggOC45NDggMTggMTEuMjQ4IDE4aDQuMzZjMS4xOSAwIDEuODEyLS45MjYgMS44MTItMS44NDFhMiAyIDAgMCAwLS4xNjMtLjc5MyAxLjcxOCAxLjcxOCAwIDAgMCAxLS41NTljLjI5Mi0uMzM0LjQ1My0uNzc5LjQ1My0xLjI1MSAwLS4yNy0uMDU1LS41NDMtLjE2My0uNzkyLjk1Ni0uMTY2IDEuNDUzLS45OTMgMS40NTMtMS44MSAwLS40NzUtLjE2OC0uOTUzLS40OTQtMS4zMDIuMzI2LS4zNS40OTQtLjgyNy40OTQtMS4zMDJ6IiBmaWxsPSIjQzRDNEM0Ii8+PC9zdmc+);
...@@ -180,6 +190,9 @@ fieldset[disabled] a.joshine-btn { ...@@ -180,6 +190,9 @@ fieldset[disabled] a.joshine-btn {
.joshine-inline-block { .joshine-inline-block {
display: inline-block; display: inline-block;
} }
.joshine-flex{
display: flex;
}
.joshine-pagination { .joshine-pagination {
display: flex; display: flex;
......
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