{"id":10388,"date":"2026-08-15T10:07:44","date_gmt":"2026-08-15T02:07:44","guid":{"rendered":"https:\/\/www.dzrgw.cn\/?p=10388"},"modified":"2026-08-15T15:41:49","modified_gmt":"2026-08-15T07:41:49","slug":"%e7%94%9f%e6%80%81%e7%8e%af%e5%a2%83%e6%b3%95%e5%85%b8","status":"publish","type":"post","link":"https:\/\/www.dzrgw.cn\/?p=10388","title":{"rendered":"\u751f\u6001\u73af\u5883\u6cd5\u5178"},"content":{"rendered":"\n<style>\n    \/* ===== \u4ec5\u9650\u672c\u533a\u5757\uff0c\u4e0d\u5f71\u54cd\u5168\u5c40 ===== *\/\n    .eco-card {\n        max-width: 500px;\n        width: 100%;\n        margin: 0 auto;\n        background: linear-gradient(145deg, #d4e9ff 0%, #b5d9f7 40%, #8fc5f0 70%, #6bb0e8 100%);\n        border-radius: 48px 48px 32px 32px;\n        padding: 28px 22px 34px;\n        box-shadow: 0 20px 50px rgba(0, 20, 40, 0.5), inset 0 1px 4px rgba(255, 255, 255, 0.6);\n        position: relative;\n        overflow: hidden;\n        transition: all 0.2s ease;\n        backdrop-filter: blur(2px);\n        border: 1px solid rgba(255, 255, 255, 0.25);\n        box-sizing: border-box;\n        font-family: 'Segoe UI', 'PingFang SC', Roboto, system-ui, -apple-system, sans-serif;\n    }\n\n    .eco-card .eco-bg {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        z-index: 0;\n        border-radius: inherit;\n        overflow: hidden;\n    }\n\n    .eco-card .eco-bg::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background:\n            radial-gradient(circle at 20% 30%, rgba(255, 255, 220, 0.35) 0%, transparent 50%),\n            radial-gradient(circle at 80% 10%, rgba(255, 240, 180, 0.25) 0%, transparent 40%);\n        z-index: 1;\n    }\n\n    .eco-card .ocean-wave {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 200%;\n        height: 28%;\n        background: repeating-linear-gradient(120deg,\n                rgba(30, 144, 200, 0.25) 0%,\n                rgba(20, 100, 170, 0.30) 10%,\n                rgba(10, 70, 140, 0.35) 20%,\n                rgba(30, 144, 200, 0.20) 30%);\n        border-radius: 50% 50% 0 0 \/ 30% 30% 0 0;\n        animation: waveMove 12s ease-in-out infinite alternate;\n        z-index: 0;\n        transform-origin: bottom;\n        mix-blend-mode: overlay;\n    }\n    .eco-card .ocean-wave:nth-child(2) {\n        bottom: -6%;\n        height: 32%;\n        background: repeating-linear-gradient(100deg,\n                rgba(10, 80, 160, 0.20) 0%,\n                rgba(20, 120, 190, 0.25) 15%,\n                rgba(5, 50, 120, 0.30) 30%);\n        animation-duration: 18s;\n        animation-delay: -3s;\n        border-radius: 60% 40% 0 0 \/ 20% 40% 0 0;\n    }\n\n    @keyframes waveMove {\n        0% { transform: translateX(-8%) scaleY(1.0); }\n        100% { transform: translateX(8%) scaleY(1.2); }\n    }\n\n    .eco-card .forest-silhouette {\n        position: absolute;\n        bottom: 6%;\n        right: -5%;\n        width: 50%;\n        height: 40%;\n        background:\n            radial-gradient(ellipse at 90% 100%, #1f5a3a 0%, transparent 70%),\n            radial-gradient(ellipse at 60% 100%, #1e6b3c 0%, transparent 60%),\n            radial-gradient(ellipse at 30% 100%, #1a5a32 0%, transparent 50%);\n        opacity: 0.30;\n        border-radius: 80% 0 0 0;\n        filter: blur(2px);\n        z-index: 0;\n        transform: rotate(-6deg);\n    }\n    .eco-card .forest-silhouette::after {\n        content: '';\n        position: absolute;\n        bottom: 10%;\n        left: -20%;\n        width: 70%;\n        height: 50%;\n        background:\n            radial-gradient(ellipse at 10% 100%, #1f5a3a 0%, transparent 60%),\n            radial-gradient(ellipse at 50% 100%, #1a5a32 0%, transparent 50%);\n        opacity: 0.25;\n        border-radius: 0 80% 0 0;\n        filter: blur(3px);\n    }\n\n    .eco-card .grassland {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 18%;\n        background: linear-gradient(0deg, rgba(60, 140, 60, 0.20) 0%, rgba(80, 180, 80, 0.10) 60%, transparent 100%);\n        z-index: 0;\n        border-radius: 0 0 32px 32px;\n        pointer-events: none;\n    }\n\n    .eco-card .flowers {\n        position: absolute;\n        bottom: 6%;\n        left: 0;\n        width: 100%;\n        height: 20%;\n        z-index: 1;\n        pointer-events: none;\n        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));\n    }\n    .eco-card .flower {\n        position: absolute;\n        width: 10px;\n        height: 10px;\n        border-radius: 50% 50% 50% 0;\n        background: #f9a8b7;\n        transform: rotate(45deg);\n        box-shadow:\n            0 0 0 2px #fcd4d4,\n            0 0 0 4px #f7b8c8,\n            0 0 0 6px rgba(255,200,200,0.2);\n        animation: flowerFloat 6s ease-in-out infinite alternate;\n    }\n    .eco-card .flower::before {\n        content: '';\n        position: absolute;\n        width: 6px;\n        height: 6px;\n        background: #fdd835;\n        border-radius: 50%;\n        top: 2px;\n        left: 2px;\n        box-shadow: 0 0 6px #fdd835;\n    }\n    .eco-card .flower:nth-child(1) { left: 8%; bottom: 12%; animation-delay: 0.2s; background: #f9a8b7; }\n    .eco-card .flower:nth-child(2) { left: 18%; bottom: 6%; animation-delay: 1.0s; background: #f2b5d4; width: 8px; height: 8px; }\n    .eco-card .flower:nth-child(3) { left: 30%; bottom: 16%; animation-delay: 0.6s; background: #f7c5b0; width: 12px; height: 12px; }\n    .eco-card .flower:nth-child(4) { left: 45%; bottom: 8%; animation-delay: 2.1s; background: #d4a8d9; width: 9px; height: 9px; }\n    .eco-card .flower:nth-child(5) { left: 58%; bottom: 14%; animation-delay: 0.9s; background: #f9b8b8; }\n    .eco-card .flower:nth-child(6) { left: 70%; bottom: 5%; animation-delay: 1.7s; background: #f2c4d4; width: 11px; height: 11px; }\n    .eco-card .flower:nth-child(7) { left: 82%; bottom: 18%; animation-delay: 0.4s; background: #f5b5c5; }\n    .eco-card .flower:nth-child(8) { left: 92%; bottom: 10%; animation-delay: 2.4s; background: #f0b0c0; width: 7px; height: 7px; }\n    .eco-card .flower:nth-child(9) { left: 12%; bottom: 22%; animation-delay: 1.3s; background: #f7c0b0; }\n    .eco-card .flower:nth-child(10) { left: 64%; bottom: 22%; animation-delay: 0.1s; background: #f2b0d0; }\n    .eco-card .flower:nth-child(11) { left: 40%; bottom: 2%; animation-delay: 1.9s; background: #f9b0a0; }\n    .eco-card .flower:nth-child(12) { left: 78%; bottom: 2%; animation-delay: 0.7s; background: #f0b8c8; }\n\n    @keyframes flowerFloat {\n        0% { transform: rotate(45deg) translateY(0px) scale(1); }\n        100% { transform: rotate(60deg) translateY(-6px) scale(1.05); }\n    }\n\n    .eco-card .bird {\n        position: absolute;\n        font-size: 20px;\n        color: rgba(40, 60, 80, 0.30);\n        z-index: 2;\n        animation: birdFly 18s linear infinite;\n        pointer-events: none;\n        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.05));\n    }\n    .eco-card .bird:nth-of-type(1) { top: 12%; left: -5%; animation-duration: 22s; font-size: 24px; }\n    .eco-card .bird:nth-of-type(2) { top: 26%; left: -10%; animation-duration: 28s; animation-delay: -6s; font-size: 16px; }\n    .eco-card .bird:nth-of-type(3) { top: 6%; left: -15%; animation-duration: 20s; animation-delay: -12s; font-size: 18px; }\n\n    @keyframes birdFly {\n        0% { transform: translateX(0) translateY(0) scale(1); }\n        25% { transform: translateX(25vw) translateY(-12px) scale(1.1); }\n        50% { transform: translateX(50vw) translateY(6px) scale(0.9); }\n        75% { transform: translateX(75vw) translateY(-8px) scale(1.05); }\n        100% { transform: translateX(110vw) translateY(4px) scale(1); }\n    }\n\n    .eco-card .content {\n        position: relative;\n        z-index: 10;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        color: #0a2a44;\n        text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);\n    }\n\n    .eco-card .title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        letter-spacing: 2px;\n        margin-bottom: 6px;\n        background: linear-gradient(135deg, #0b3d5a, #1f6d4a);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        text-shadow: 0 2px 12px rgba(60, 160, 120, 0.2);\n    }\n    .eco-card .subtitle {\n        font-size: 0.85rem;\n        font-weight: 400;\n        color: #1a4b5e;\n        background: rgba(255, 255, 255, 0.25);\n        padding: 4px 18px;\n        border-radius: 40px;\n        backdrop-filter: blur(4px);\n        margin-bottom: 18px;\n        display: inline-block;\n        border: 1px solid rgba(255, 255, 255, 0.3);\n        letter-spacing: 1px;\n    }\n\n    .eco-card .timer-panel {\n        background: rgba(255, 255, 255, 0.20);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        border-radius: 40px;\n        padding: 22px 16px 18px;\n        width: 100%;\n        box-shadow: 0 8px 32px rgba(0, 30, 50, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.5);\n        border: 1px solid rgba(255, 255, 255, 0.25);\n        transition: all 0.2s;\n    }\n\n    .eco-card .time-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 6px;\n        margin-bottom: 10px;\n    }\n\n    .eco-card .time-sub {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 6px;\n        margin-top: 2px;\n    }\n\n    .eco-card .time-item {\n        background: rgba(255, 255, 255, 0.15);\n        border-radius: 24px;\n        padding: 8px 2px 4px;\n        backdrop-filter: blur(4px);\n        border: 1px solid rgba(255, 255, 255, 0.15);\n    }\n    .eco-card .time-item .number {\n        font-size: 1.9rem;\n        font-weight: 700;\n        line-height: 1.2;\n        color: #023047;\n        letter-spacing: 1px;\n        font-variant-numeric: tabular-nums;\n        background: linear-gradient(180deg, #0a2a44, #1b5a6a);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n    .eco-card .time-item .label {\n        font-size: 0.6rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        color: #1a4a5e;\n        font-weight: 600;\n        background: rgba(255,255,255,0.2);\n        padding: 0 6px;\n        border-radius: 20px;\n        display: inline-block;\n        margin-top: 2px;\n    }\n\n    .eco-card .time-sub .number {\n        font-size: 1.6rem;\n    }\n\n    .eco-card .start-marker {\n        margin-top: 14px;\n        font-size: 0.7rem;\n        color: #1a4a5e;\n        background: rgba(255, 255, 255, 0.25);\n        padding: 6px 16px;\n        border-radius: 40px;\n        backdrop-filter: blur(4px);\n        border: 1px solid rgba(255, 255, 255, 0.2);\n        display: inline-block;\n        letter-spacing: 0.5px;\n    }\n    .eco-card .start-marker strong {\n        font-weight: 600;\n        color: #023047;\n    }\n\n    .eco-card .eco-footer {\n        margin-top: 18px;\n        font-size: 0.6rem;\n        color: #1a4a5e;\n        opacity: 0.8;\n        letter-spacing: 2px;\n        background: rgba(255,255,255,0.10);\n        padding: 4px 16px;\n        border-radius: 30px;\n        backdrop-filter: blur(2px);\n        border: 1px solid rgba(255,255,255,0.10);\n    }\n\n    @media (max-width: 420px) {\n        .eco-card { padding: 20px 14px 26px; border-radius: 32px; }\n        .eco-card .time-item .number { font-size: 1.5rem; }\n        .eco-card .time-sub .number { font-size: 1.3rem; }\n        .eco-card .title { font-size: 1.3rem; }\n        .eco-card .time-grid { gap: 4px; }\n        .eco-card .time-sub { gap: 4px; }\n        .eco-card .flower { width: 7px; height: 7px; }\n        .eco-card .flower::before { width: 4px; height: 4px; top: 1.5px; left: 1.5px; }\n    }\n    @media (max-width: 360px) {\n        .eco-card .time-item .number { font-size: 1.2rem; }\n        .eco-card .time-sub .number { font-size: 1.1rem; }\n        .eco-card { padding: 16px 10px 20px; }\n    }\n<\/style>\n\n<div class=\"eco-card\" id=\"app\">\n    <div class=\"eco-bg\">\n        <div class=\"ocean-wave\"><\/div>\n        <div class=\"ocean-wave\"><\/div>\n        <div class=\"forest-silhouette\"><\/div>\n        <div class=\"grassland\"><\/div>\n        <div class=\"flowers\">\n            <div class=\"flower\"><\/div><div class=\"flower\"><\/div><div class=\"flower\"><\/div>\n            <div class=\"flower\"><\/div><div class=\"flower\"><\/div><div class=\"flower\"><\/div>\n            <div class=\"flower\"><\/div><div class=\"flower\"><\/div><div class=\"flower\"><\/div>\n            <div class=\"flower\"><\/div><div class=\"flower\"><\/div><div class=\"flower\"><\/div>\n        <\/div>\n        <div class=\"bird\">\ud83d\udd4a\ufe0f<\/div>\n        <div class=\"bird\">\ud83d\udd4a\ufe0f<\/div>\n        <div class=\"bird\">\ud83d\udd4a\ufe0f<\/div>\n    <\/div>\n\n    <div class=\"content\">\n        <div class=\"title\">\ud83c\udf3f \u751f\u6001 \u00b7 \u73af\u5883<\/div>\n        <div class=\"subtitle\">\u81ea\u7136\u7a7a\u95f4\uff0c\u81ea\u7136\u56e0\u7d20<\/div>\n\n        <div class=\"timer-panel\">\n            <div class=\"time-grid\">\n                <div class=\"time-item\"><div class=\"number\" id=\"years\">&#8212;<\/div><div class=\"label\">\u5e74<\/div><\/div>\n                <div class=\"time-item\"><div class=\"number\" id=\"days\">&#8212;<\/div><div class=\"label\">\u65e5<\/div><\/div>\n            <\/div>\n            <div class=\"time-sub\">\n                <div class=\"time-item\"><div class=\"number\" id=\"hours\">&#8212;<\/div><div class=\"label\">\u65f6<\/div><\/div>\n                <div class=\"time-item\"><div class=\"number\" id=\"minutes\">&#8212;<\/div><div class=\"label\">\u5206<\/div><\/div>\n                <div class=\"time-item\"><div class=\"number\" id=\"seconds\">&#8212;<\/div><div class=\"label\">\u79d2<\/div><\/div>\n            <\/div>\n\n            <div class=\"start-marker\">\n                \u23f3 \u7b2c\u4e00\u5343\u4e8c\u767e\u56db\u5341\u4e8c\u6761 \u751f\u6001\u73af\u5883\u6cd5\u5178\u81ea\u5317\u4eac\u65f6\u95f4 <strong id=\"startDisplay\">2026-08-15 00:00:00<\/strong> \u8d77\u65bd\u884c\u3002\n            <\/div>\n        <\/div>\n\n        <div class=\"eco-footer\">\ud83c\udf0e \u5927\u6c14 \u00b7 \u6c34 \u00b7 \u6d77\u6d0b \u00b7 \u571f\u5730 \u00b7 \u77ff\u4ea7\u2026\u2026<\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \"use strict\";\n\n        var START_DATE = new Date(2026, 7, 15, 0, 0, 0, 0);\n        var START_ISO = '2026-08-15 00:00:00';\n\n        var elYears = document.getElementById('years');\n        var elDays = document.getElementById('days');\n        var elHours = document.getElementById('hours');\n        var elMinutes = document.getElementById('minutes');\n        var elSeconds = document.getElementById('seconds');\n        var elStartDisplay = document.getElementById('startDisplay');\n\n        if (!elYears || !elDays || !elHours || !elMinutes || !elSeconds) {\n            console.error('\u8ba1\u65f6\u5668\u5143\u7d20\u7f3a\u5931');\n            return;\n        }\n        if (elStartDisplay) elStartDisplay.textContent = START_ISO;\n\n        function computeDifference(from, to) {\n            if (to < from) {\n                return { years: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };\n            }\n            var years = 0;\n            var anniversary = new Date(from);\n            while (true) {\n                var next = new Date(anniversary);\n                next.setFullYear(next.getFullYear() + 1);\n                if (next <= to) {\n                    years++;\n                    anniversary = next;\n                } else {\n                    break;\n                }\n            }\n            var diffMs = to.getTime() - anniversary.getTime();\n            var msPerDay = 24 * 60 * 60 * 1000;\n            var days = Math.floor(diffMs \/ msPerDay);\n            diffMs -= days * msPerDay;\n            var msPerHour = 60 * 60 * 1000;\n            var hours = Math.floor(diffMs \/ msPerHour);\n            diffMs -= hours * msPerHour;\n            var msPerMinute = 60 * 1000;\n            var minutes = Math.floor(diffMs \/ msPerMinute);\n            diffMs -= minutes * msPerMinute;\n            var seconds = Math.floor(diffMs \/ 1000);\n            return { years: years, days: days, hours: hours, minutes: minutes, seconds: seconds };\n        }\n\n        function updateTimer(now) {\n            var diff = computeDifference(START_DATE, now);\n            elYears.textContent = diff.years;\n            elDays.textContent = diff.days;\n            elHours.textContent = String(diff.hours).padStart(2, '0');\n            elMinutes.textContent = String(diff.minutes).padStart(2, '0');\n            elSeconds.textContent = String(diff.seconds).padStart(2, '0');\n        }\n\n        \/\/ \u76f4\u63a5\u4f7f\u7528\u672c\u5730\u65f6\u95f4\uff0c\u65e0\u9700API\u8bf7\u6c42\uff08\u66f4\u7a33\u5b9a\uff09\n        function startTimer() {\n            updateTimer(new Date());\n            setInterval(function() {\n                updateTimer(new Date());\n            }, 500);\n        }\n\n        startTimer();\n\n        document.addEventListener('visibilitychange', function() {\n            if (!document.hidden) {\n                updateTimer(new Date());\n            }\n        });\n\n        console.log('\ud83c\udf31 \u751f\u6001\u8ba1\u65f6\u5df2\u542f\u52a8 | \u8d77\u70b9: ' + START_ISO);\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd4a\ufe0f \ud83d\udd4a\ufe0f \ud83d\udd4a\ufe0f \ud83c\udf3f \u751f\u6001 \u00b7 \u73af\u5883 \u81ea\u7136\u7a7a\u95f4\uff0c\u81ea\u7136\u56e0\u7d20 &#8212; \u5e74 &#038; &hellip; <a href=\"https:\/\/www.dzrgw.cn\/?p=10388\">\u7ee7\u7eed\u9605\u8bfb <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-10388","post","type-post","status-publish","format-standard","hentry","category-notes"],"_links":{"self":[{"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/posts\/10388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10388"}],"version-history":[{"count":21,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/posts\/10388\/revisions"}],"predecessor-version":[{"id":10412,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=\/wp\/v2\/posts\/10388\/revisions\/10412"}],"wp:attachment":[{"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dzrgw.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}