create or remake a block with a rating of reviews

Question

I have a block in the product description for the product page, I need to transfer it after the tabs and redo the styles

I moved the block to xml <move element="product.info.review" destination="content" after="product.info.details"/>

the block has moved below the tabs

I added styles and it turned out that in the picture

    .product.info.detailed {
      max-width: 55%;
      float: left;
    }

    .product-reviews-summary {
      float: left;
      border: 1px solid @product-heart-color;
      margin-left: 3%;
    }

but I need to create something like this, please help

ps_______________________________

Answer 1

Override vendor/magento/module-review/view/frontend/templates/helper/summary.phtml

with below code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var \Magento\Review\Block\Product\ReviewRenderer $block */

$url = $block->getReviewsUrl() . '#reviews';
$urlForm = $block->getReviewsUrl() . '#review-form';
?>
<?php if ($block->isReviewEnabled() && $block->getReviewsCount()): ?>
<?php $rating = $block->getRatingSummary(); ?>
<div class="product-reviews-summary<?= !$rating ? ' no-rating' : '' ?>" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <?php if ($rating):?>
    <div class="rating-summary">
         <span class="label"><span><?= $block->escapeHtml(__('Rating')) ?>:</span></span>
         <div class="rating-result" title="<?= $block->escapeHtmlAttr($rating); ?>%">
             <span style="width:<?= $block->escapeHtmlAttr($rating); ?>%">
             </span>
         </div>
         <div class="rating-count-avg">
             <span itemprop="ratingValue"><?= $block->escapeHtml($rating*10/100); ?></span>
             <span itemprop="bestRating"><?= __('out of 5');?></span>
         </div>
     </div>
    <?php endif;?>
    <div class="reviews-actions">
        <!-- <a class="action view"
           href="<?= $block->escapeUrl($url) ?>"> -->
            <span itemprop="reviewCount"><?= __('BASED ON ') ?><?= $block->escapeHtml($block->getReviewsCount()) ?></span>&nbsp;
            <span><?= ($block->getReviewsCount() == 1) ? $block->escapeHtml(__('REVIEW')) : $block->escapeHtml(__('REVIEWS')) ?></span>
        <!-- </a> -->
        <!-- <a class="action add" href="<?= $block->escapeUrl($urlForm) ?>"><?= $block->escapeHtml(__('Add Your Review')) ?></a> -->
    </div>
</div>
<?php elseif ($block->isReviewEnabled() && $block->getDisplayIfEmpty()): ?>
<div class="product-reviews-summary empty">
    <div class="reviews-actions">
        <a class="action add" href="<?= $block->escapeUrl($urlForm) ?>">
            <?= $block->escapeHtml(__('Be the first to review this product')) ?>
        </a>
    </div>
</div>
<?php endif; ?>

Use below style to change the rating star design

.rating-summary .rating-result > span{
    float: right;
}

I hope you can manage with other designs, if not pls let me know