{"id":33,"date":"2026-06-12T03:21:05","date_gmt":"2026-06-12T03:21:05","guid":{"rendered":"https:\/\/ourui.themeforest.cn\/?page_id=33"},"modified":"2026-10-09T07:42:45","modified_gmt":"2026-10-09T07:42:45","slug":"%e5%ae%a2%e6%88%b7%e6%9d%a5%e8%ae%bf","status":"publish","type":"page","link":"https:\/\/ourui.themeforest.cn\/ko\/%e5%ae%a2%e6%88%b7%e6%9d%a5%e8%ae%bf\/","title":{"rendered":"\uace0\uac1d \ubc29\ubb38"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"33\" class=\"elementor elementor-33\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc38555 e-flex e-con-boxed e-con e-parent\" data-id=\"fc38555\" 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-d3e1051 elementor-widget elementor-widget-heading\" data-id=\"d3e1051\" 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\">\uace0\uac1d \ubc29\ubb38<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65e7271 elementor-widget elementor-widget-heading\" data-id=\"65e7271\" 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\">\uae30\ud68d\ubd80\ud130 \uac1c\uc5c5 \ubc0f \uc6b4\uc601\uc5d0 \uc774\ub974\uae30\uae4c\uc9c0 \uc6d0\uc2a4\ud1b1 \uc885\ud569 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud558\uba70,<br>\ube0c\ub79c\ub4dc\uc758 \uc804\uad6d\uc801 \ud655\uc7a5 \ubc0f \uae00\ub85c\ubc8c \uc9c4\ucd9c \uc9c0\uc6d0<\/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-d1e8e3a e-flex e-con-boxed e-con e-parent\" data-id=\"d1e8e3a\" 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-4e2b097 elementor-widget elementor-widget-shortcode\" data-id=\"4e2b097\" 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    .std-posts-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    .std-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    .std-filter-btn {\n        background: none;\n        border: none;\n        font-size: 20px;\n        line-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        background-color: transparent !important;\n    }\n\n    .std-filter-btn:hover, .std-filter-btn.active {\n        color: #1e86be;\n    }\n\n    \/* \u9519\u843d\u7f51\u683c\u5e03\u5c40 *\/\n    .std-posts-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        column-gap: 40px;\n        row-gap: 60px;\n    }\n\n    .std-posts-grid > .std-post-card:nth-child(3n+2) {\n        transform: translateY(30px);\n    }\n\n    .std-post-card {\n        position: relative;\n        width: 100%;\n        cursor: pointer;\n        overflow: hidden;\n        text-decoration: none;\n        display: block;\n    }\n\n    .std-img-wrapper {\n        position: relative;\n        width: 100%;\n        padding-top: 70%;\n        overflow: hidden;\n        background-color: #f5f5f5;\n    }\n\n    .std-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    .std-post-card:hover .std-img-wrapper img {\n        transform: scale(1.05);\n    }\n\n    \/* \u53f3\u4e0a\u89d2\u5706\u5f62\u6269\u6563\u906e\u7f69 *\/\n    .std-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    .std-post-card:hover .std-overlay {\n        clip-path: circle(150% at 100% 0%);\n    }\n\n    .std-view-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    .std-view-btn {\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    .std-post-card:hover .std-view-btn {\n        opacity: 1;\n    }\n\n    @media (max-width: 992px) {\n        .std-posts-grid {\n            grid-template-columns: repeat(2, 1fr);\n            column-gap: 20px;\n            row-gap: 40px;\n        }\n        .std-posts-grid > .std-post-card:nth-child(3n+2) {\n            transform: translateY(0);\n        }\n    }\n    @media (max-width: 576px) {\n        .std-posts-grid { grid-template-columns: 1fr; }\n    }\n    <\/style>\n\n    <div class=\"std-posts-container\" id=\"std_post_grid_8115\">\n        \n        <div class=\"std-posts-grid\" \n             data-current-cat=\"1\" \n             data-page=\"1\" \n             data-count=\"6\"\n             data-max=\"0\">\n            <a href=\"https:\/\/ourui.themeforest.cn\/ko\/f65587b434369ecd373c401860ec1cd0\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/f65587b434369ecd373c401860ec1cd0-1-767x1024.jpg\" alt=\"f65587b434369ecd373c401860ec1cd0\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/ko\/f61da3cb6ab6d74d73185eb9a887b736\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/f61da3cb6ab6d74d73185eb9a887b736-1-1024x768.jpg\" alt=\"f61da3cb6ab6d74d73185eb9a887b736\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/ko\/db0c3c2649e1bdcafe83e70c5414b713\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/db0c3c2649e1bdcafe83e70c5414b713-1-1024x768.jpg\" alt=\"db0c3c2649e1bdcafe83e70c5414b713\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/ko\/d94b2544253c6f35850983d9f57679cf\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/d94b2544253c6f35850983d9f57679cf-1-1024x768.jpg\" alt=\"d94b2544253c6f35850983d9f57679cf\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/ko\/d164146728938764f892703361b86d2f\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/d164146728938764f892703361b86d2f-1024x768.jpg\" alt=\"d164146728938764f892703361b86d2f\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a><a href=\"https:\/\/ourui.themeforest.cn\/ko\/aa48e685f253a9d1a0a7a362a6a48d85\/\" class=\"std-post-card\">  <div class=\"std-img-wrapper\">    <img decoding=\"async\" src=\"https:\/\/ourui.themeforest.cn\/wp-content\/uploads\/2026\/10\/aa48e685f253a9d1a0a7a362a6a48d85-1-1024x771.jpg\" alt=\"aa48e685f253a9d1a0a7a362a6a48d85\" loading=\"lazy\">    <div class=\"std-overlay\">        <div class=\"std-view-wrapper\">            <div class=\"std-view-btn\">VIEW<\/div>        <\/div>    <\/div>  <\/div><\/a>        <\/div>\n\n        <div class=\"std-load-status\" 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', function() {\n        var container = document.getElementById('std_post_grid_8115');\n        if (!container) return;\n\n        var grid = container.querySelector('.std-posts-grid');\n        var statusDiv = container.querySelector('.std-load-status');\n        var buttons = container.querySelectorAll('.std-filter-btn');\n        var ajaxUrl = \"https:\/\/ourui.themeforest.cn\/wp-admin\/admin-ajax.php\";\n        \n        var canLoadMore = true;\n        var isRequesting = false;\n\n        \/\/ \u68c0\u67e5\u521d\u59cb\u5361\u7247\u6570\u91cf\u662f\u5426\u5df2\u8fbe\u4e0a\u9650\n        checkLimitReached();\n\n        function checkLimitReached() {\n            var maxLimit = parseInt(grid.getAttribute('data-max')) || 0;\n            if (maxLimit > 0) {\n                var currentCards = grid.querySelectorAll('.std-post-card').length;\n                if (currentCards >= maxLimit) {\n                    canLoadMore = false;\n                }\n            }\n        }\n\n        window.addEventListener('scroll', function() {\n            if (!canLoadMore || isRequesting) return;\n            var rect = grid.getBoundingClientRect();\n            if (rect.bottom <= (window.innerHeight + 250)) {\n                loadMorePosts();\n            }\n        });\n\n        function loadMorePosts() {\n            isRequesting = true;\n            statusDiv.style.display = 'block';\n\n            var currentCat = grid.getAttribute('data-current-cat');\n            var nextPage = parseInt(grid.getAttribute('data-page')) + 1;\n            var count = grid.getAttribute('data-count') || 6;\n            var maxLimit = grid.getAttribute('data-max') || 0;\n\n            var formData = new FormData();\n            formData.append('action', 'load_std_posts_grid_action'); \n            formData.append('cat_id', currentCat);\n            formData.append('page', nextPage);\n            formData.append('count', count);\n            formData.append('max', maxLimit);\n\n            fetch(ajaxUrl, { method: 'POST', body: formData })\n            .then(function(res) { return res.text(); })\n            .then(function(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                    bindMagnetic();\n                    checkLimitReached();\n                }\n            })\n            .catch(function() {\n                isRequesting = false;\n                statusDiv.style.display = 'none';\n            });\n        }\n\n        buttons.forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                if (isRequesting) return;\n                \n                buttons.forEach(function(b) { b.classList.remove('active'); });\n                btn.classList.add('active');\n\n                var catId = btn.getAttribute('data-cat-id');\n                var count = grid.getAttribute('data-count') || 6;\n                var maxLimit = grid.getAttribute('data-max') || 0;\n\n                grid.setAttribute('data-current-cat', catId);\n                grid.setAttribute('data-page', '1');\n                canLoadMore = true;\n\n                grid.innerHTML = '';\n                statusDiv.style.display = 'block';\n\n                var formData = new FormData();\n                formData.append('action', 'load_std_posts_grid_action');\n                formData.append('cat_id', catId);\n                formData.append('page', 1);\n                formData.append('count', count);\n                formData.append('max', maxLimit);\n\n                fetch(ajaxUrl, { method: 'POST', body: formData })\n                .then(function(res) { return res.text(); })\n                .then(function(data) {\n                    statusDiv.style.display = 'none';\n                    if (data.trim() === 'no_more' || data.trim() === '') {\n                        canLoadMore = false;\n                        grid.innerHTML = '<div style=\"grid-column: 1\/-1; text-align:center; padding: 80px 20px; color:#999; font-size:14px; letter-spacing:1px;\">\u6682\u65e0\u76f8\u5173\u6587\u7ae0<\/div>';\n                    } else {\n                        grid.innerHTML = data;\n                        bindMagnetic();\n                        checkLimitReached();\n                    }\n                });\n            });\n        });\n\n        function bindMagnetic() {\n            var cards = container.querySelectorAll('.std-post-card');\n            var maxShift = 20;\n\n            cards.forEach(function(card) {\n                card.removeEventListener('mousemove', onMouseMove);\n                card.removeEventListener('mouseleave', onMouseLeave);\n                card.addEventListener('mousemove', onMouseMove);\n                card.addEventListener('mouseleave', onMouseLeave);\n            });\n\n            function onMouseMove(e) {\n                var rect = this.getBoundingClientRect();\n                var cardCenterX = rect.left + rect.width \/ 2;\n                var cardCenterY = rect.top + rect.height \/ 2;\n\n                var shiftX = e.clientX - cardCenterX;\n                var shiftY = e.clientY - cardCenterY;\n\n                var targetX = (shiftX \/ (rect.width \/ 2)) * maxShift;\n                var targetY = (shiftY \/ (rect.height \/ 2)) * maxShift;\n\n                var indicator = this.querySelector('.std-view-btn');\n                if (indicator) {\n                    indicator.style.transform = 'translate(' + targetX + 'px, ' + targetY + 'px) scale(1.1)';\n                }\n            }\n\n            function onMouseLeave() {\n                var indicator = this.querySelector('.std-view-btn');\n                if (indicator) {\n                    indicator.style.transform = 'translate(0px, 0px) scale(1)';\n                }\n            }\n        }\n\n        bindMagnetic();\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>\u5ba2\u6237\u6765\u8bbf \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-33","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":59,"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":1439,"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/pages\/33\/revisions\/1439"}],"wp:attachment":[{"href":"https:\/\/ourui.themeforest.cn\/ko\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}