HyperCube/Pages/ModalCompetency.razor

<div class="modal" tabindex="-1" role="dialog" style="display:none" id="@elementid">
    <div class="modal-container">
        <div class="modal__body">
            <div class="modal__body__header">
                <div class="modal__body__header__info">
                    <img src="img/competence.svg" alt="">
                    <p>Ваши компетенции</p>
                </div>
            </div>
            <div class="modal__body__container modal__body__container_aligncenter">
                <div class="modal__body__container__left modal__body__container__left_blackborder">
                    <p class="modal__competence__text">Цифровая лаборатория 2dh создает матрицу личных особенностей и навыков Пользователей</p>
                    <p class="modal__competence__text">Формирование матрицы происходит при прохождении квалификационных отборов на Цифровые мероприятия 2dh</p>
                    <p class="modal__competence__text">Уникальные Пользователи создают уникальные материалы, находя знания которые имеют ценность.</p>
                </div>
                <img src="img/competence_icon.svg" alt="" class="modal__competence__central__icon">
                <div class="modal__body__container__right modal__body__container__right_paddinglr modal__body__container__right_blackborder">
                    <p class="modal__competence__header__text">Показатели</p>
                    <div class="modal__competence__scale">
                        <div class="modal__competence__scale__text">Профессиональный</div>
                        <div class="modal__competence__scale__box">
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item modal__competence__scale__box__item_blue">
                                <p class="scale__value">123</p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal__competence__scale">
                        <div class="modal__competence__scale__text">Моделирующий</div>
                        <div class="modal__competence__scale__box">
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item modal__competence__scale__box__item_orange">
                                <p class="scale__value">205</p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal__competence__scale">
                        <div class="modal__competence__scale__text">Личный</div>
                        <div class="modal__competence__scale__box">
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item modal__competence__scale__box__item_black">
                                <p class="scale__value">34</p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal__competence__scale">
                        <div class="modal__competence__scale__text">Способности</div>
                        <div class="modal__competence__scale__box">
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item modal__competence__scale__box__item_blue">
                                <p class="scale__value">104</p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                            <div class="modal__competence__scale__box__item">
                                <p class="scale__value"></p>
                            </div>
                        </div>
                    </div>
                    <button class="modal__competence__button btn_orange">Правила начисления</button>
                </div>
            </div>
        </div>
        <a class="modal_close" style="cursor:pointer" @onclick="@Close">&#10006;</a>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JsRuntime { get; set; }

    [Parameter]
    public RenderFragment Title { get; set; }

    private string elementid = "modal_competency";


    public void Open()
    {
        JsRuntime.InvokeVoidAsync("OpenModal", elementid);
    }

    public void Close()
    {
        JsRuntime.InvokeVoidAsync("CloseModal", elementid);
    }
}