用户:7709386/HeartLinkPhone.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
Opera：按 Ctrl-F5。

$(() => {
    (window.RLQ = window.RLQ || []).push(() => {

        const $heartlinkPhone = $(".heartlink-phone");
        const $datingCharCardItems = $(".dating-char-card-item");
        const $phoneMenuItems = $(".phone-menu-bar .menu-item");
        const $phoneMainContainers = $(".phone-main-container");
        const $operatePanels = $(".operate-panel");

        const datingCardsanimate = ($element) => {
            $element.css({
                "opacity": "0",
                "transform": "scale(1.3)"
            }).each((idx, ele) => {
                $(ele).delay((idx + 1) * 100)
                    .queue((next) => {
                        $(ele).css({
                            "opacity": "1",
                            "transform": "scale(1)"
                        });
                        next();
                    });
            });
        }

        $phoneMenuItems.each((index, element) => {
            $(element).on("click", (event) => {
                const $event = $(event.currentTarget);
                const bgIndex = index === 0 ? 1 : 2;
                const DATING_MAIN_CONTENT_INDEX = 1;

                $heartlinkPhone.css({
                    "--phone-inline-bg": `var(--phone-inline-bg-${bgIndex})`
                });

                $event.toggleClass("active")
                    .siblings()
                    .removeClass("active");

                const $curMainContainer = $phoneMainContainers.eq(index);

                $curMainContainer.fadeIn("linear")
                    .toggleClass("active")
                    .siblings()
                    .hide()
                    .removeClass("active");

                const $curPperatePanel = $operatePanels.eq(index);

                $curPperatePanel.fadeIn("linear")
                    .toggleClass("active")
                    .siblings()
                    .hide()
                    .removeClass("active");

                $curMainContainer.find(".phone-main-content").scrollTop(0);

                if (index === DATING_MAIN_CONTENT_INDEX) {
                    $datingCharCardItems.removeClass("active")
                        .eq(0).addClass("active");
                    datingCardsanimate($datingCharCardItems);
                } else {
                    $datingCharCardItems.css({
                        "opacity": "0",
                        "transform": "scale(1)"
                    }).removeClass("active")
                        .eq(0).addClass("active")
                }
            })
        })

        $datingCharCardItems.each((index, element) => {
            $(element).on("click", (event) => {
                const $event = $(event.currentTarget);

                $event.toggleClass("active")
                    .siblings()
                    .removeClass("active");
            })
        })

    })
})