{"id":30,"date":"2026-06-12T03:20:09","date_gmt":"2026-06-12T03:20:09","guid":{"rendered":"https:\/\/ourui.themeforest.cn\/?page_id=30"},"modified":"2026-07-08T03:21:36","modified_gmt":"2026-07-08T03:21:36","slug":"%e6%a1%88%e4%be%8b%e4%b8%ad%e5%bf%83","status":"publish","type":"page","link":"https:\/\/ourui.themeforest.cn\/en\/%e6%a1%88%e4%be%8b%e4%b8%ad%e5%bf%83\/","title":{"rendered":"Case Studies"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"30\" class=\"elementor elementor-30\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7aff66d e-flex e-con-boxed e-con e-parent\" data-id=\"7aff66d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b8fbd5 elementor-widget elementor-widget-heading\" data-id=\"9b8fbd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Case Studies<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc5f727 elementor-widget elementor-widget-heading\" data-id=\"dc5f727\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">We provide comprehensive, one-stop solutions ranging from planning to operations,<br>Empowering Brands to Expand Nationwide and Globally<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a432078 e-flex e-con-boxed e-con e-parent\" data-id=\"a432078\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-efb16e7 elementor-widget elementor-widget-shortcode\" data-id=\"efb16e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <style>\n    .case-showcase-container {\n        max-width: 1280px;\n        margin: 0 auto;\n        padding: 80px 20px 140px 20px;\n        font-family: \"Noto Serif SC\", Sans-serif;\n    }\n\n    \/* \u9876\u90e8\u7b5b\u9009\u63a7\u5236\u680f *\/\n    .case-filter-bar {\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 60px;\n        margin-bottom: 60px;\n        padding-bottom: 15px;\n    }\n\n    .case-filter-btn {\n        background: none;\n        border: none;\n        font-size:20px;\n\t\t\tline-height:26px;\n        font-weight: 600;\n        color: #000;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        cursor: pointer;\n        position: relative;\n        padding: 5px 0;\n        transition: color 0.3s;\n\t\tbackground-color: transparent!important;\n    }\n\n    .case-filter-btn:hover, .case-filter-btn.active {\n        color: #1e86be; \/* \u4f60\u7684\u4e3b\u9898\u6807\u51c6\u84dd\u8272 *\/\n    }\n\n    \/* \u4ea4\u9519\u9519\u843d\u7f51\u683c\u5e03\u5c40 (Staggered Grid) *\/\n    .case-showcase-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        column-gap: 40px;\n        row-gap: 60px;\n    }\n\n    \/* \u8ba9\u4e2d\u95f4\u90a3\u4e00\u5217\u6574\u4f53\u5f80\u4e0b\u9519\u843d 30px *\/\n    .case-showcase-grid > .case-card:nth-child(3n+2) {\n        transform: translateY(30px);\n    }\n\n    \/* \u6848\u4f8b\u5361\u7247\u4e3b\u5bb9\u5668\uff1a\u81ea\u5e26\u8d85\u94fe\u63a5 *\/\n    .case-card {\n        position: relative;\n        width: 100%;\n        cursor: pointer;\n        overflow: hidden;\n        text-decoration: none;\n        display: block;\n    }\n\n    \/* \u56fe\u7247\u5305\u88f9\u5c42 *\/\n    .card-img-wrapper {\n        position: relative;\n        width: 100%;\n        padding-top: 70%; \/* \u6241\u5bbd\u9ec4\u91d1\u6bd4\u4f8b *\/\n        overflow: hidden;\n        background-color: #f5f5f5;\n    }\n\n    .card-img-wrapper img {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    .case-card:hover .card-img-wrapper img {\n        transform: scale(1.05);\n    }\n\n    \/* \u53f3\u4e0a\u89d2\u5706\u5f62\u6269\u6563\u906e\u7f69 *\/\n    .card-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.4); \n        display: flex;\n        align-items: center;\n        justify-content: center;\n        clip-path: circle(0% at 100% 0%);\n        transition: clip-path 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n        z-index: 2;\n    }\n\n    .case-card:hover .card-overlay {\n        clip-path: circle(150% at 100% 0%);\n    }\n\n    .view-magnetic-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 4;\n    }\n\n    \/* \u78c1\u6027 VIEW \u6309\u94ae *\/\n    .view-indicator {\n        width: 60px;\n        height: 60px;\n        border: 1px solid rgba(255, 255, 255, 0.6);\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        font-size: 0.7rem;\n        letter-spacing: 2px;\n        font-weight: 300;\n        opacity: 0; \n        transition: transform 0.1s ease, opacity 0.3s ease;\n        z-index: 4;\n    }\n\n    .case-card:hover .view-indicator {\n        opacity: 1;\n    }\n\n    \/* \ud83c\udfaf \u4f18\u5316\uff1a\u6587\u5b57\u5b8c\u5168\u60ac\u6d6e\u5728\u56fe\u7247\u5de6\u4e0b\u89d2 *\/\n    .card-content-overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        padding: 30px; \/* \u7559\u51fa\u7cbe\u81f4\u7684\u5185\u8fb9\u8ddd *\/\n        z-index: 3; \n        color: #ffffff;\n        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); \/* \u4fdd\u8bc1\u6807\u9898\u5728\u767d\u56fe\u4e0b\u4e5f\u6e05\u6670 *\/\n        pointer-events: none; \/* \u8ba9\u9f20\u6807\u4e8b\u4ef6\u80fd\u591f\u7a7f\u900f\u5230\u56fe\u7247\u5c42 *\/\n    }\n\n    .meta-left-bottom {\n        text-align: left; \/* \u5de6\u5bf9\u9f50 *\/\n    }\n\n    .meta-left-bottom .project-title {\n        font-size: 1.25rem;\n        font-weight: 500;\n        letter-spacing: 1px;\n        margin: 0;\n    }\n\n    \/* \u54cd\u5e94\u5f0f\u9002\u914d *\/\n    @media (max-width: 992px) {\n        .case-showcase-grid {\n            grid-template-columns: repeat(2, 1fr);\n            column-gap: 20px;\n            row-gap: 40px;\n        }\n        .case-showcase-grid > .case-card:nth-child(3n+2) {\n            transform: translateY(0);\n        }\n    }\n    @media (max-width: 576px) {\n        .case-showcase-grid { grid-template-columns: 1fr; }\n        .card-content-overlay { padding: 20px; }\n        .meta-left-bottom .project-title { font-size: 1.1rem; }\n    }\n    <\/style>\n\n    <div class=\"case-showcase-container\">\n        <div class=\"case-filter-bar\">\n            <button class=\"case-filter-btn active\" data-slug=\"all\">\u5168\u90e8\u6848\u4f8b<\/button>\n                                                <button class=\"case-filter-btn\" data-slug=\"domestic-cases\">\n                        \u56fd\u5185\u6848\u4f8b                    <\/button>\n                                    <button class=\"case-filter-btn\" data-slug=\"overseas-cases\">\n                        \u56fd\u5916\u6848\u4f8b                    <\/button>\n                                    <\/div>\n\n        <div class=\"case-showcase-grid\" id=\"caseRefinedGrid\" data-current-slug=\"all\" data-page=\"1\">\n            <a href=\"https:\/\/ourui.themeforest.cn\/en\/case\/%e6%b5%b7%e5%a4%96%e9%a1%b9%e7%9b%ae\/\" class=\"case-card\">  <div class=\"card-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/06\/haiwai-3-1024x469.png\" alt=\"\u9738\u738b\u8336\u59ec\">    <div class=\"card-overlay\">        <div class=\"view-magnetic-wrapper\">            <div class=\"view-indicator\">VIEW<\/div>        <\/div>    <\/div>    <div class=\"card-content-overlay\">        <div class=\"meta-left-bottom\">            <h3 class=\"project-title\">\u9738\u738b\u8336\u59ec<\/h3>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/en\/case\/%e5%8d%97%e5%ae%81\/\" class=\"case-card\">  <div class=\"card-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/06\/nanning-10.jpg\" alt=\"\u745e\u5e78\u5496\u5561\">    <div class=\"card-overlay\">        <div class=\"view-magnetic-wrapper\">            <div class=\"view-indicator\">VIEW<\/div>        <\/div>    <\/div>    <div class=\"card-content-overlay\">        <div class=\"meta-left-bottom\">            <h3 class=\"project-title\">\u745e\u5e78\u5496\u5561<\/h3>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/en\/case\/%e4%b8%8a%e6%b5%b7\/\" class=\"case-card\">  <div class=\"card-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/06\/shanghai-1-1024x512.jpg\" alt=\"\u745e\u5e78\u5496\u5561\">    <div class=\"card-overlay\">        <div class=\"view-magnetic-wrapper\">            <div class=\"view-indicator\">VIEW<\/div>        <\/div>    <\/div>    <div class=\"card-content-overlay\">        <div class=\"meta-left-bottom\">            <h3 class=\"project-title\">\u745e\u5e78\u5496\u5561<\/h3>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/en\/case\/%e9%99%86%e7%bd%90%e7%bd%90\/\" class=\"case-card\">  <div class=\"card-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/06\/luguanguan-1-1024x434.png\" alt=\"\u9646\u7f50\u7f50\">    <div class=\"card-overlay\">        <div class=\"view-magnetic-wrapper\">            <div class=\"view-indicator\">VIEW<\/div>        <\/div>    <\/div>    <div class=\"card-content-overlay\">        <div class=\"meta-left-bottom\">            <h3 class=\"project-title\">\u9646\u7f50\u7f50<\/h3>        <\/div>    <\/div>  <\/div><\/a>        <\/div>\n\n        <div class=\"case-load-status\" id=\"caseLoadStatus\" style=\"display: none; text-align: center; margin: 50px 0; color: #999; font-size: 0.8rem; letter-spacing: 1px;\">\n            LOADING...\n        <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const grid = document.getElementById('caseRefinedGrid');\n        const statusDiv = document.getElementById('caseLoadStatus');\n        const buttons = document.querySelectorAll('.case-filter-btn');\n        const ajaxUrl = \"https:\/\/ourui.themeforest.cn\/wp-admin\/admin-ajax.php\";\n        \n        let canLoadMore = true;\n        let isRequesting = false;\n\n        \/\/ \u65e0\u9650\u6eda\u52a8\n        window.addEventListener('scroll', () => {\n            if (!canLoadMore || isRequesting) return;\n            if ((window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 150)) {\n                loadMoreCases();\n            }\n        });\n\n        function loadMoreCases() {\n            isRequesting = true;\n            statusDiv.style.display = 'block';\n\n            const currentSlug = grid.getAttribute('data-current-slug');\n            const nextPage = parseInt(grid.getAttribute('data-page')) + 1;\n\n            const formData = new FormData();\n            formData.append('action', 'load_refined_cases_action'); \n            formData.append('slug', currentSlug);\n            formData.append('page', nextPage);\n\n            fetch(ajaxUrl, { method: 'POST', body: formData })\n            .then(res => res.text())\n            .then(data => {\n                statusDiv.style.display = 'none';\n                isRequesting = false;\n\n                if (data.trim() === 'no_more' || data.trim() === '') {\n                    canLoadMore = false;\n                } else {\n                    grid.insertAdjacentHTML('beforeend', data);\n                    grid.setAttribute('data-page', nextPage);\n                    initPerfectMagnetic(); \n                }\n            })\n            .catch(() => {\n                isRequesting = false;\n                statusDiv.style.display = 'none';\n            });\n        }\n\n        \/\/ \u5206\u7c7b\u5207\u6362\n        buttons.forEach(btn => {\n            btn.addEventListener('click', () => {\n                if (isRequesting) return;\n                \n                buttons.forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n\n                const slug = btn.getAttribute('data-slug');\n                grid.setAttribute('data-current-slug', slug);\n                grid.setAttribute('data-page', '1');\n                canLoadMore = true;\n\n                grid.innerHTML = '';\n                statusDiv.style.display = 'block';\n\n                const formData = new FormData();\n                formData.append('action', 'load_refined_cases_action');\n                formData.append('slug', slug);\n                formData.append('page', 1);\n\n                fetch(ajaxUrl, { method: 'POST', body: formData })\n                .then(res => res.text())\n                .then(data => {\n                    statusDiv.style.display = 'none';\n                    if (data.trim() === 'no_more' || data.trim() === '') {\n                        grid.innerHTML = '<div style=\"grid-column: 1\/-1; text-align:center; padding: 80px; color:#ccc; font-size:13px;\">\u6682\u65e0\u76f8\u5173\u6848\u4f8b<\/div>';\n                    } else {\n                        grid.innerHTML = data;\n                        initPerfectMagnetic();\n                    }\n                });\n            });\n        });\n\n        \/\/ 20px \u9650\u5236\u7684\u78c1\u6027\u5438\u9644\n        function initPerfectMagnetic() {\n            const cards = document.querySelectorAll('.case-card');\n            const maxMagneticShift = 20;\n\n            cards.forEach(card => {\n                card.removeEventListener('mousemove', handleMouseMove);\n                card.removeEventListener('mouseleave', handleMouseLeave);\n                card.addEventListener('mousemove', handleMouseMove);\n                card.addEventListener('mouseleave', handleMouseLeave);\n            });\n\n            function handleMouseMove(e) {\n                const rect = this.getBoundingClientRect();\n                const cardCenterX = rect.left + rect.width \/ 2;\n                const cardCenterY = rect.top + rect.height \/ 2;\n\n                const shiftX = e.clientX - cardCenterX;\n                const shiftY = e.clientY - cardCenterY;\n\n                const targetX = (shiftX \/ (rect.width \/ 2)) * maxMagneticShift;\n                const targetY = (shiftY \/ (rect.height \/ 2)) * maxMagneticShift;\n\n                const button = this.querySelector('.view-indicator');\n                if (button) {\n                    button.style.transform = `translate(${targetX}px, ${targetY}px) scale(1.1)`;\n                }\n            }\n\n            function handleMouseLeave() {\n                const button = this.querySelector('.view-indicator');\n                if (button) {\n                    button.style.transform = 'translate(0px, 0px) scale(1)';\n                }\n            }\n        }\n\n        initPerfectMagnetic();\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u6848\u4f8b\u4e2d\u5fc3 \u63d0\u4f9b\u4ece\u65b9\u6848\u89c4\u5212\u5230\u5f00\u4e1a\u8fd0\u8425\u7684\u4e00\u7ad9\u5f0f\u6574\u4f53\u89e3\u51b3\u65b9\u6848\uff0c\u8d4b\u80fd\u54c1\u724c\u5168\u56fd\u6269\u5f20\u4e0e\u5168\u7403\u5e03\u5c40<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":19,"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":993,"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/pages\/30\/revisions\/993"}],"wp:attachment":[{"href":"https:\/\/ourui.themeforest.cn\/en\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}