{"id":9,"date":"2026-03-30T06:22:59","date_gmt":"2026-03-29T22:22:59","guid":{"rendered":"https:\/\/caifu.pro\/?page_id=9"},"modified":"2026-03-30T06:30:44","modified_gmt":"2026-03-29T22:30:44","slug":"travel-memory-wall","status":"publish","type":"page","link":"https:\/\/caifu.pro\/?page_id=9","title":{"rendered":"\u65c5\u884c"},"content":{"rendered":"<div id=\"travel-memory-wall\">\n    \n    <!-- \u97f3\u4e50\u64ad\u653e\u5668 -->\n        <div id=\"bg-music-player\">\n        <audio id=\"bg-music\" loop preload=\"none\">\n            <source src=\"https:\/\/caifu.pro\/wp-content\/uploads\/2026\/04\/685.mp3\" type=\"audio\/mpeg\">\n        <\/audio>\n        <button id=\"music-toggle\" class=\"music-btn\">\n            <span class=\"music-icon\">\u266a<\/span>\n            <span class=\"music-text\">\u80cc\u666f\u97f3\u4e50<\/span>\n        <\/button>\n        <div class=\"volume-control\">\n            <input type=\"range\" id=\"volume-slider\" min=\"0\" max=\"100\" value=\"50\">\n        <\/div>\n    <\/div>\n        \n    <!-- \u65c5\u884c\u8bb0\u5fc6\u90e8\u5206 -->\n    <div id=\"travel-section\" class=\"active\">\n        <!-- \u6807\u9898\u677f\u5757 -->\n        <div class=\"travel-header\">\n            <div class=\"travel-bg\">\n                <div class=\"overlay\"><\/div>\n            <\/div>\n            <div class=\"travel-header-content\">\n                <h1 id=\"travel-title\">\u6211\u4eec\u7684\u65c5\u884c\u8bb0\u5fc6<\/h1>\n                <p class=\"travel-description\">\u8bb0\u5f55\u6bcf\u4e00\u6b21\u65c5\u884c\u7684\u7f8e\u597d\u77ac\u95f4<\/p>\n                \n                <div class=\"travel-stats\">\n                    <div class=\"stat-item\">\n                        <span class=\"stat-icon\">\ud83d\uddfa\ufe0f<\/span>\n                        <div class=\"stat-info\">\n                            <span class=\"stat-value\" id=\"total-travels\">3<\/span>\n                            <span class=\"stat-label\">\u6b21\u65c5\u884c<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"stat-item\">\n                        <span class=\"stat-icon\">\ud83d\udcc5<\/span>\n                        <div class=\"stat-info\">\n                            <span class=\"stat-value\" id=\"travel-days\">20<\/span>\n                            <span class=\"stat-label\">\u65c5\u884c\u5929\u6570<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"stat-item\">\n                        <span class=\"stat-icon\">\ud83d\udccd<\/span>\n                        <div class=\"stat-info\">\n                            <span class=\"stat-value\" id=\"locations-count\">3<\/span>\n                            <span class=\"stat-label\">\u4e2a\u5730\u70b9<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- \u65c5\u884c\u5730\u56fe\u65f6\u95f4\u8f74 -->\n        <div class=\"travel-timeline-section\">\n            <h2 class=\"section-title\">\u65c5\u884c\u65f6\u95f4\u8f74<\/h2>\n            <div class=\"timeline-container\">\n                                    <p class=\"no-travels\">\u6682\u65e0\u65f6\u95f4\u8f74\u6587\u7ae0\uff0c\u8bf7\u5230\u540e\u53f0\u8bbe\u7f6e\u9009\u62e9\u8981\u663e\u793a\u7684\u6587\u7ae0<\/p>\n                            <\/div>\n        <\/div>\n\n        <!-- \u65c5\u884c\u76f8\u518c\u8f6e\u64ad -->\n        <div class=\"travel-gallery-section\">\n            <h2 class=\"section-title\">\u65c5\u884c\u76f8\u518c<\/h2>\n            <div class=\"swiper-container travel-swiper\">\n                <div class=\"swiper-wrapper\">\n                                                                    <div class=\"swiper-slide\">\n                            <div class=\"travel-slide\" style=\"background-color: #F5F5F5\">\n                                                                <div class=\"slide-image\">\n                                    <img decoding=\"async\" src=\"https:\/\/caifu.pro\/wp-content\/uploads\/2026\/04\/th-.png\" \n                                         alt=\"\u96ea\u5c71\u4e4b\u65c5\"\n                                         loading=\"lazy\"\n                                         onerror=\"this.onerror=null; this.src='https:\/\/caifu.pro\/wp-content\/themes\/caifu\/travel-memory-module\/images\/default\/travel1.jpg';\">\n                                    <div class=\"image-overlay\">\n                                        <span class=\"location-tag\">\ud83d\udccd \u56db\u5ddd\u7a3b\u57ce\u4e9a\u4e01<\/span>\n                                    <\/div>\n                                <\/div>\n                                                                \n                                <div class=\"slide-content\" style=\"color: #34495E\">\n                                    <div class=\"slide-header\">\n                                        <h3 class=\"slide-title\">\u96ea\u5c71\u4e4b\u65c5<\/h3>\n                                        <span class=\"travel-date\">2025\u5e7411\u670829\u65e5<\/span>\n                                    <\/div>\n                                    <div class=\"slide-text\"><p>\u7ad9\u5728\u96ea\u5c71\u4e4b\u5dc5\uff0c\u611f\u53d7\u5927\u81ea\u7136\u7684\u58ee\u4e3d\u4e0e\u795e\u79d8\u3002<\/p>\n<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                                <div class=\"swiper-slide\">\n                            <div class=\"travel-slide\" style=\"background-color: #F0F8FF\">\n                                                                <div class=\"slide-image\">\n                                    <img decoding=\"async\" src=\"https:\/\/caifu.pro\/wp-content\/uploads\/2026\/04\/8153833657-1.png\" \n                                         alt=\"\u6d77\u8fb9\u5ea6\u5047\"\n                                         loading=\"lazy\"\n                                         onerror=\"this.onerror=null; this.src='https:\/\/caifu.pro\/wp-content\/themes\/caifu\/travel-memory-module\/images\/default\/travel1.jpg';\">\n                                    <div class=\"image-overlay\">\n                                        <span class=\"location-tag\">\ud83d\udccd \u6d77\u5357\u4e09\u4e9a<\/span>\n                                    <\/div>\n                                <\/div>\n                                                                \n                                <div class=\"slide-content\" style=\"color: #1A5276\">\n                                    <div class=\"slide-header\">\n                                        <h3 class=\"slide-title\">\u6d77\u8fb9\u5ea6\u5047<\/h3>\n                                        <span class=\"travel-date\">2025\u5e7407\u670829\u65e5<\/span>\n                                    <\/div>\n                                    <div class=\"slide-text\"><p>\u78a7\u6d77\u84dd\u5929\uff0c\u6c99\u6ee9\u6f2b\u6b65\uff0c\u4eab\u53d7\u9633\u5149\u4e0e\u6d77\u98ce\u7684\u62e5\u62b1\u3002<\/p>\n<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                                <div class=\"swiper-slide\">\n                            <div class=\"travel-slide\" style=\"background-color: #E8F4F8\">\n                                                                <div class=\"slide-image\">\n                                    <img decoding=\"async\" src=\"https:\/\/caifu.pro\/wp-content\/uploads\/2026\/04\/4913604141.png\" \n                                         alt=\"\u7b2c\u4e00\u6b21\u65c5\u884c\"\n                                         loading=\"lazy\"\n                                         onerror=\"this.onerror=null; this.src='https:\/\/caifu.pro\/wp-content\/themes\/caifu\/travel-memory-module\/images\/default\/travel1.jpg';\">\n                                    <div class=\"image-overlay\">\n                                        <span class=\"location-tag\">\ud83d\udccd \u4e91\u5357\u4e3d\u6c5f<\/span>\n                                    <\/div>\n                                <\/div>\n                                                                \n                                <div class=\"slide-content\" style=\"color: #2C3E50\">\n                                    <div class=\"slide-header\">\n                                        <h3 class=\"slide-title\">\u7b2c\u4e00\u6b21\u65c5\u884c<\/h3>\n                                        <span class=\"travel-date\">2025\u5e7403\u670829\u65e5<\/span>\n                                    <\/div>\n                                    <div class=\"slide-text\"><p>\u7b2c\u4e00\u6b21\u4e00\u8d77\u65c5\u884c\uff0c\u6f2b\u6b65\u5728\u4e3d\u6c5f\u53e4\u57ce\uff0c\u611f\u53d7\u7eb3\u897f\u6587\u5316\u7684\u9b45\u529b\u3002<\/p>\n<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                                            <\/div>\n                \n                <!-- \u5bfc\u822a\u6309\u94ae -->\n                <div class=\"swiper-pagination\"><\/div>\n                <div class=\"swiper-button-next\"><\/div>\n                <div class=\"swiper-button-prev\"><\/div>\n            <\/div>\n            \n            <div class=\"enter-wall-btn\">\n                <button id=\"enter-wall\" class=\"enter-btn\">\n                    <span class=\"btn-text\">\u8fdb\u5165\u65c5\u884c\u795d\u798f\u5899<\/span>\n                    <span class=\"btn-arrow\">\u2192<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <!-- \u65c5\u884c\u5730\u56fe\uff08\u6a21\u62df\uff09 -->\n        <div class=\"travel-map-section\">\n            <h2 class=\"section-title\">\u65c5\u884c\u8db3\u8ff9<\/h2>\n            <div class=\"map-container\">\n                <div class=\"map-placeholder\">\n                    <div class=\"map-dots\">\n                                                                        <div class=\"map-dot\" data-location=\"\u5546\u4e1a\" \n                             style=\"top: 30%; left: 20%;\">\n                            <span class=\"dot\"><\/span>\n                            <span class=\"location-name\">\u5546\u4e1a<\/span>\n                        <\/div>\n                                                                    <\/div>\n                    <div class=\"map-lines\"><\/div>\n                <\/div>\n                <div class=\"map-legend\">\n                    <h4>\u6211\u4eec\u53bb\u8fc7\u7684\u5730\u65b9\uff1a<\/h4>\n                    <ul class=\"location-list\">\n                                                                                <li>\n                                <a href=\"https:\/\/caifu.pro\/?tag=%e5%95%86%e4%b8%9a\" target=\"_blank\">\n                                    \ud83d\udccd \u5546\u4e1a                                <\/a>\n                                <span class=\"post-count\">(1\u7bc7)<\/span>\n                            <\/li>\n                                                                        <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- \u65c5\u884c\u795d\u798f\u5899\u90e8\u5206 -->\n    <div id=\"wish-wall-section\" style=\"display: none;\">\n        <div class=\"wall-container\">\n            \n            <!-- \u795d\u798f\u5899\u5934\u90e8 -->\n            <div class=\"wall-header\">\n                <h1>\u2708\ufe0f \u65c5\u884c\u795d\u798f\u5899 \u2708\ufe0f<\/h1>\n                <p>\u5728\u8fd9\u91cc\u5206\u4eab\u4f60\u7684\u65c5\u884c\u795d\u798f\u548c\u613f\u671b<\/p>\n                <div class=\"wall-stats\">\n                    <span>\u5df2\u6709 <span id=\"wish-count\">0<\/span> \u4e2a\u65c5\u884c\u795d\u798f<\/span>\n                    <button id=\"post-wish-btn\" class=\"wall-btn\">\n                        <span class=\"btn-icon\">\ud83d\udcdd<\/span>\n                        <span class=\"btn-text\">\u5199\u4e0b\u795d\u798f<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- \u795d\u798f\u8868\u5355 -->\n            <div id=\"wish-form\" class=\"wish-form\" style=\"display: none;\">\n                <div class=\"form-header\">\n                    <h3>\u5199\u4e0b\u65c5\u884c\u795d\u798f<\/h3>\n                    <button id=\"close-form\" class=\"close-btn\">\u00d7<\/button>\n                <\/div>\n                \n                <div class=\"form-body\">\n                    <div class=\"form-group\">\n                        <label for=\"to_who\">\n                            <span class=\"label-icon\">\ud83c\udfaf<\/span>\n                            \u795d\u798f\u7ed9\u8c01\uff1a\n                        <\/label>\n                        <input type=\"text\" id=\"to_who\" placeholder=\"\u8f93\u5165\u4f60\u8981\u795d\u798f\u7684\u4eba\u6216\u5730\u70b9\" maxlength=\"20\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"from_who\">\n                            <span class=\"label-icon\">\ud83d\udc64<\/span>\n                            \u4f60\u7684\u540d\u5b57\uff1a\n                        <\/label>\n                        <input type=\"text\" id=\"from_who\" placeholder=\"\u8f93\u5165\u4f60\u7684\u79f0\u547c\" maxlength=\"15\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"wish_content\">\n                            <span class=\"label-icon\">\ud83d\udc8c<\/span>\n                            \u795d\u798f\u8bed\uff1a\n                        <\/label>\n                        <textarea id=\"wish_content\" placeholder=\"\u5199\u4e0b\u4f60\u7684\u65c5\u884c\u795d\u798f\u6216\u613f\u671b...\" maxlength=\"140\"><\/textarea>\n                        <div class=\"form-tips\">\n                            <span class=\"char-count\">\n                                <span id=\"char-left\">140<\/span> \u5b57\u5269\u4f59\n                            <\/span>\n                            <span class=\"tips\">\u53ef\u4ee5\u795d\u798f\u65c5\u9014\u5e73\u5b89\uff0c\u6216\u5206\u4eab\u65c5\u884c\u613f\u671b<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"form-section\">\n                        <label>\u9009\u62e9\u98ce\u683c\uff1a<\/label>\n                        <div class=\"style-selector\">\n                            <div class=\"color-picker\">\n                                <h4>\u80cc\u666f\u989c\u8272\uff1a<\/h4>\n                                <div class=\"color-options\">\n                                    <div class=\"color-option selected\" data-color=\"#E8F4F8\" style=\"background:#E8F4F8\" title=\"\u5929\u7a7a\u84dd\"><\/div>\n                                    <div class=\"color-option\" data-color=\"#F0F8FF\" style=\"background:#F0F8FF\" title=\"\u6d77\u6d0b\u84dd\"><\/div>\n                                    <div class=\"color-option\" data-color=\"#F5F5F5\" style=\"background:#F5F5F5\" title=\"\u4e91\u6735\u767d\"><\/div>\n                                    <div class=\"color-option\" data-color=\"#F0FFE9\" style=\"background:#F0FFE9\" title=\"\u8349\u5730\u7eff\"><\/div>\n                                    <div class=\"color-option\" data-color=\"#FFF3E0\" style=\"background:#FFF3E0\" title=\"\u6c99\u6ee9\u9ec4\"><\/div>\n                                    <div class=\"color-option\" data-color=\"#F9ECFF\" style=\"background:#F9ECFF\" title=\"\u665a\u971e\u7d2b\"><\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"icon-picker\">\n                                <h4>\u9009\u62e9\u56fe\u6807\uff1a<\/h4>\n                                <div class=\"icon-options\">\n                                                                        <div class=\"icon-option selected\" data-icon=\"0\">\n                                        <span class=\"icon-text\">\u2708\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"1\">\n                                        <span class=\"icon-text\">\ud83d\uddfa\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"2\">\n                                        <span class=\"icon-text\">\ud83d\udccd<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"3\">\n                                        <span class=\"icon-text\">\ud83c\udfd6\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"4\">\n                                        <span class=\"icon-text\">\ud83c\udfd4\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"5\">\n                                        <span class=\"icon-text\">\ud83c\udf05<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"6\">\n                                        <span class=\"icon-text\">\ud83c\udf04<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"7\">\n                                        <span class=\"icon-text\">\ud83c\udf0a<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"8\">\n                                        <span class=\"icon-text\">\ud83c\udfde\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"9\">\n                                        <span class=\"icon-text\">\ud83c\udfd5\ufe0f<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"10\">\n                                        <span class=\"icon-text\">\ud83d\ude97<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"11\">\n                                        <span class=\"icon-text\">\ud83d\ude82<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"12\">\n                                        <span class=\"icon-text\">\ud83d\udea2<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"13\">\n                                        <span class=\"icon-text\">\ud83c\udf92<\/span>\n                                    <\/div>\n                                                                        <div class=\"icon-option \" data-icon=\"14\">\n                                        <span class=\"icon-text\">\ud83d\udcf8<\/span>\n                                    <\/div>\n                                                                    <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"preview-section\">\n                        <h4>\u9884\u89c8\u6548\u679c\uff1a<\/h4>\n                        <div id=\"wish-preview\" class=\"wish-preview\">\n                            <div class=\"preview-icon\">\n                                <span class=\"icon-text\" id=\"preview-icon\">\u2708\ufe0f<\/span>\n                            <\/div>\n                            <div class=\"preview-content\">\n                                <p class=\"preview-to\">To: <span id=\"preview-to\">[\u63a5\u6536\u795d\u798f\u7684\u4eba\/\u5730\u70b9]<\/span><\/p>\n                                <p class=\"preview-text\" id=\"preview-text\">\u5728\u8fd9\u91cc\u663e\u793a\u65c5\u884c\u795d\u798f\u9884\u89c8...<\/p>\n                                <div class=\"preview-footer\">\n                                    <span class=\"preview-from\">From: <span id=\"preview-from\">[\u4f60\u7684\u540d\u5b57]<\/span><\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"form-footer\">\n                    <div class=\"form-actions\">\n                        <button id=\"submit-wish\" class=\"submit-btn\">\n                            <span class=\"btn-icon\">\u2713<\/span>\n                            <span class=\"btn-text\">\u53d1\u5e03\u795d\u798f<\/span>\n                        <\/button>\n                        <button id=\"reset-form\" class=\"reset-btn\">\n                            <span class=\"btn-icon\">\u21ba<\/span>\n                            <span class=\"btn-text\">\u91cd\u7f6e<\/span>\n                        <\/button>\n                    <\/div>\n                    <div id=\"form-message\" class=\"form-message\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- \u795d\u798f\u5899\u5185\u5bb9 -->\n            <div id=\"wish-wall\" class=\"wish-wall\">\n                <div class=\"loading-state\">\n                    <div class=\"loading-spinner\"><\/div>\n                    <p>\u52a0\u8f7d\u65c5\u884c\u795d\u798f\u4e2d...<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- \u5206\u9875 -->\n            <div id=\"wish-pagination\" class=\"pagination\"><\/div>\n            \n            <!-- \u8fd4\u56de\u65c5\u884c\u9875\u9762 -->\n            <div class=\"back-to-travel\">\n                <button id=\"back-to-travel\" class=\"back-btn\">\n                    <span class=\"btn-icon\">\u2190<\/span>\n                    <span class=\"btn-text\">\u8fd4\u56de\u65c5\u884c\u8bb0\u5fc6<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n<\/div>\n\n<!-- \u7279\u6548\u5bb9\u5668 -->\n<div id=\"leaf-effect\"><\/div>\n<div id=\"snow-effect\"><\/div>\n\n<style>\n\/* \u786e\u4fdd\u7279\u6548\u5bb9\u5668\u5b58\u5728 *\/\n#leaf-effect, #snow-effect {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 9999;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":33,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/page-travel-memory.php","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caifu.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":1,"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/68"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/caifu.pro\/index.php?rest_route=\/wp\/v2\/media\/33"}],"wp:attachment":[{"href":"https:\/\/caifu.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}