{"id":40,"date":"2025-10-23T03:08:58","date_gmt":"2025-10-22T19:08:58","guid":{"rendered":"http:\/\/8.134.34.90\/?page_id=40"},"modified":"2026-02-23T03:56:26","modified_gmt":"2026-02-22T19:56:26","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/www.elsakitsune.top\/index.php\/portfolio\/","title":{"rendered":"\u4f5c\u54c1\u96c6"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \u4f5c\u54c1\u96c6 - \u9648\u709c\u5a34<\/title>\n <style>\n \/* \u7ec8\u6781\u91cd\u7f6e\uff1a\u8986\u76d6\u6240\u6709\u6d4f\u89c8\u5668\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5f7b\u5e95\u6d88\u9664\u8fb9\u8ddd\uff08\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4\uff09 *\/\n * {\n margin: 0 !important;\n padding: 0 !important;\n box-sizing: border-box !important;\n }\n html, body {\n width: 100vw !important;\n height: 100vh !important;\n overflow-x: hidden !important;\n overflow-y: auto !important;\n position: relative !important;\n }\n body {\n font-family: 'SimSun', 'Microsoft YaHei', sans-serif;\n color: #333;\n line-height: 1.6;\n }\n\n \/* 1. \u9876\u90e8\u5bfc\u822a\u680f\uff1a\u79fb\u9664\u8bed\u8a00\u5207\u6362\uff0c\u65b0\u589e\u4e0b\u8f7d\u4f5c\u54c1\u96c6\u6309\u94ae\uff08\u4e0e\u5176\u4ed6\u9875\u9762\u7edf\u4e00\uff09 *\/\n .top-nav {\n position: fixed;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n padding: 15px 20px !important;\n background-color: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(5px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);\n z-index: 999;\n width: 100vw !important;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px; \/* \u5bfc\u822a\u4e0e\u4e0b\u8f7d\u6309\u94ae\u95f4\u8ddd\u7edf\u4e00 *\/\n }\n .nav-list {\n display: flex;\n justify-content: center;\n gap: 25px; \/* \u5bfc\u822a\u9879\u95f4\u8ddd\u7edf\u4e00 *\/\n list-style: none;\n }\n .nav-list a {\n text-decoration: none;\n color: #2c3e50;\n font-size: 13pt; \/* \u5b57\u4f53\u5927\u5c0f\u7edf\u4e00 *\/\n font-weight: 500;\n transition: color 0.3s;\n }\n .nav-list a:hover {\n color: #2980b9;\n }\n .nav-list a.active {\n color: #2980b9;\n border-bottom: 2px solid #2980b9;\n }\n\n \/* \u4e0b\u8f7d\u4f5c\u54c1\u96c6\u6309\u94ae\uff08\u56fa\u5b9a\u5728\u5bfc\u822a\u680f\uff0c\u4e0d\u968f\u6eda\u52a8\u79fb\u52a8\uff09 *\/\n .download-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 15px !important;\n background-color: rgba(41, 128, 185, 0.9);\n color: white;\n text-decoration: none;\n border-radius: 6px;\n font-size: 11pt;\n box-shadow: 0 3px 10px rgba(41, 128, 185, 0.15);\n transition: background-color 0.3s;\n cursor: pointer; \/* \u6539\u4e3a\u53ef\u70b9\u51fb *\/\n }\n .download-btn:hover {\n background-color: rgba(36, 113, 163, 0.95);\n }\n\n \/* \u52a0\u8f7d\u63d0\u793a\u6837\u5f0f *\/\n .loading-toast {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 15px 25px !important;\n border-radius: 8px;\n font-size: 12pt;\n z-index: 99999;\n display: none;\n align-items: center;\n gap: 10px;\n }\n .loading-spinner {\n width: 20px;\n height: 20px;\n border: 2px solid #fff;\n border-top: 2px solid #2980b9;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* \u6a21\u5757\u70b9\u51fb\u9884\u52a0\u8f7d\u63d0\u793a *\/\n .module-loading {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 20px 30px !important;\n border-radius: 8px;\n font-size: 14pt;\n z-index: 99998;\n display: none;\n align-items: center;\n gap: 15px;\n }\n\n \/* 2. \u4e3b\u5185\u5bb9\u533a\uff1a\u7edf\u4e00\u80cc\u666f\u5904\u7406\uff0c\u79fb\u52a8\u7aef\u9002\u914d\u7ad6\u5c4f\u80cc\u666f+\u63d0\u9ad8\u900f\u660e\u5ea6 *\/\n .portfolio-container {\n width: 100vw !important;\n min-height: 100vh !important;\n \/* \u684c\u9762\u7aef\u80cc\u666f\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4\u7684\u56fa\u5b9a\u80cc\u666f+\u8986\u76d6\u6548\u679c *\/\n background: url(\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/background3-scaled.webp\") no-repeat center center !important;\n background-size: cover !important;\n background-attachment: fixed !important;\n background-position: 0 0 !important;\n padding-top: 100px !important; \/* \u9884\u7559\u5bfc\u822a\u680f\u9ad8\u5ea6\uff08\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4\uff09 *\/\n display: flex;\n justify-content: center;\n align-items: flex-start;\n position: relative !important;\n left: 0 !important;\n right: 0 !important;\n padding-bottom: 80px !important; \/* \u4e3a\u5907\u6848\u53f7\u533a\u57df\u9884\u7559\u7a7a\u95f4 *\/\n }\n \/* \u906e\u7f69\u5c42\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4\u7684\u6de1\u906e\u7f69\uff0c\u63d0\u5347\u6587\u5b57\u53ef\u8bfb\u6027 *\/\n .portfolio-container::before {\n content: '';\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n background-color: rgba(255, 255, 255, 0.6); \/* \u4e0e\u5b66\u672f\u9875\u9762\u906e\u7f69\u900f\u660e\u5ea6\u4e00\u81f4 *\/\n z-index: -1 !important;\n }\n \/* \u5185\u5bb9\u5361\u7247\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u98ce\u683c\u7edf\u4e00\uff0c\u53bb\u6389\u591a\u4f59\u5706\u89d2\u548c\u9634\u5f71 *\/\n .portfolio-content {\n width: 100% !important;\n max-width: 900px !important;\n background-color: rgba(255, 255, 255, 0.7); \/* PC\u7aef\u4fdd\u6301\u539f\u6709\u900f\u660e\u5ea6 *\/\n backdrop-filter: blur(3px); \/* \u4e0e\u5b66\u672f\u9875\u9762\u6bdb\u73bb\u7483\u6548\u679c\u4e00\u81f4 *\/\n padding: 40px 3% !important; \/* \u5185\u8fb9\u8ddd\u7edf\u4e00 *\/\n margin: 10px 0 !important;\n }\n\n \/* 3. \u6807\u9898\u6837\u5f0f\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u7edf\u4e00 *\/\n .portfolio-title {\n font-size: 20pt;\n color: #2c3e50;\n margin-bottom: 20px !important;\n padding-bottom: 10px !important;\n border-bottom: 1px solid rgba(41, 128, 185, 0.2);\n text-align: center;\n }\n .portfolio-intro {\n font-size: 11pt;\n line-height: 1.7;\n color: #2c3e50;\n text-align: center;\n max-width: 100% !important;\n margin: 0 auto 30px !important;\n }\n .work-category {\n margin-bottom: 40px !important;\n }\n .category-title {\n font-size: 14pt;\n color: #2980b9;\n margin-bottom: 15px !important;\n padding-left: 8px !important;\n border-left: 3px solid #2980b9;\n }\n\n \/* 4. \u4f5c\u54c1\u96c6\u5217\u8868\uff1a\u4fdd\u6301\u539f\u6709\u529f\u80fd\uff0c\u6837\u5f0f\u5411\u5b66\u672f\u9875\u9762\u5bf9\u9f50 *\/\n .work-list {\n display: grid;\n grid-template-columns: 1fr !important; \/* \u5f3a\u5236\u5355\u5217\u5e03\u5c40 *\/\n gap: 15px !important; \/* \u4e0e\u5b66\u672f\u9875\u9762\u6280\u80fd\u7f51\u683c\u95f4\u8ddd\u4e00\u81f4 *\/\n }\n .work-item {\n background-color: rgba(255, 255, 255, 0.5); \/* \u4e0e\u5b66\u672f\u9875\u9762\u6280\u80fd\u5361\u7247\u80cc\u666f\u4e00\u81f4 *\/\n border-radius: 6px; \/* \u4e0e\u5b66\u672f\u9875\u9762\u5361\u7247\u5706\u89d2\u4e00\u81f4 *\/\n padding: 15px !important;\n text-align: center;\n transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n -webkit-tap-highlight-color: rgba(41, 128, 185, 0.1);\n }\n .work-item:hover, .work-item:active {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); \/* \u4e0e\u5b66\u672f\u9875\u9762hover\u9634\u5f71\u4e00\u81f4 *\/\n background-color: #f0f7ff;\n }\n .work-name {\n font-size: 12pt;\n color: #2c3e50;\n margin: 0 0 10px !important;\n font-weight: 500;\n }\n .work-desc {\n font-size: 10pt;\n color: #4a6582;\n line-height: 1.7;\n }\n\n \/* 5. \u56fe\u7247\u6d4f\u89c8\u5668\uff1a\u91cd\u70b9\u4f18\u5316\u6837\u5f0f\uff08\u6309\u9700\u6c42\u4fee\u6539\uff09 *\/\n .img-viewer {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n z-index: 9999;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 15px;\n gap: 20px; \/* \u7f29\u7565\u56fe\u533a\u57df\u4e0e\u4e0b\u8f7d\u6309\u94ae\u533a\u57df\u7684\u7b49\u5bbd\u7a7a\u9699 *\/\n }\n .viewer-close {\n position: absolute;\n top: 25px;\n right: 25px;\n color: #fff;\n font-size: 32px;\n cursor: pointer;\n transition: color 0.3s;\n width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10001;\n }\n .viewer-close:hover {\n color: #2980b9;\n }\n \/* \u5927\u56fe\u533a\u57df\uff1a\u6dfb\u52a0\u5de6\u53f3\u7bad\u5934\u6837\u5f0f + \u4f18\u5316\u653e\u5927\u5c42\u7ea7 *\/\n .viewer-main {\n max-width: 100%;\n max-height: 55%;\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n }\n .viewer-main img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n border-radius: 8px;\n transition: transform 0.3s ease;\n position: relative;\n z-index: 10000; \/* \u786e\u4fdd\u653e\u5927\u540e\u8986\u76d6\u9884\u89c8\u680f *\/\n transform-origin: center center;\n }\n \/* \u5de6\u53f3\u7bad\u5934\uff1a\u534a\u900f\u660e\u6837\u5f0f\uff0c\u663e\u793a\u5e76\u6dfb\u52a0\u4ea4\u4e92\u6548\u679c *\/\n .viewer-prev, .viewer-next {\n display: flex !important;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 60px;\n height: 60px;\n background-color: rgba(0, 0, 0, 0.4);\n color: #fff;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n transition: all 0.3s;\n z-index: 10001;\n border: none;\n padding: 0 !important;\n margin: 0 !important;\n }\n .viewer-prev {\n left: 20px;\n }\n .viewer-next {\n right: 20px;\n }\n .viewer-prev:hover, .viewer-next:hover {\n background-color: rgba(41, 128, 185, 0.7);\n transform: translateY(-50%) scale(1.1);\n }\n \/* \u7f29\u653e\u6309\u94ae\u533a\u57df *\/\n .viewer-zoom {\n position: absolute;\n bottom: 15px;\n right: 15px;\n display: flex;\n gap: 10px;\n z-index: 10001;\n }\n .zoom-btn {\n color: #fff;\n background-color: rgba(0, 0, 0, 0.7);\n border: none;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n font-size: 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .zoom-btn:hover {\n background-color: #2980b9;\n }\n \/* \u7f29\u7565\u56fe\u533a\u57df *\/\n .viewer-thumbnails {\n width: 100%;\n max-height: 100px;\n overflow-x: auto;\n display: flex;\n gap: 8px;\n padding-bottom: 10px;\n -webkit-overflow-scrolling: touch;\n z-index: 9999; \/* \u4f4e\u4e8e\u653e\u5927\u540e\u7684\u56fe\u7247 *\/\n }\n .thumbnail-item {\n width: 80px;\n height: 60px;\n cursor: pointer;\n border-radius: 4px;\n overflow: hidden;\n opacity: 0.7;\n transition: opacity 0.3s, border 0.3s;\n }\n .thumbnail-item.active {\n opacity: 1;\n border: 2px solid #2980b9;\n }\n .thumbnail-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n \/* \u4e0b\u8f7d\u6309\u94ae\u5bb9\u5668\uff1a\u5c45\u4e2d\u663e\u793a\uff0c\u8c03\u6574\u95f4\u8ddd *\/\n .viewer-download-container {\n width: 100%;\n max-width: 500px; \/* \u9650\u5236\u6700\u5927\u5bbd\u5ea6\uff0c\u907f\u514d\u6309\u94ae\u8fc7\u5bbd *\/\n display: flex;\n justify-content: center;\n gap: 30px; \/* \u4e24\u4e2a\u4e0b\u8f7d\u6309\u94ae\u4e4b\u95f4\u7684\u7f8e\u89c2\u95f4\u9694 *\/\n padding: 0 5px;\n margin-top: 10px;\n z-index: 9999; \/* \u4f4e\u4e8e\u653e\u5927\u540e\u7684\u56fe\u7247 *\/\n }\n \/* \u4e0b\u8f7d\u6309\u94ae\uff1a\u53bb\u6389\u80cc\u666f\u8272\uff0c\u6539\u4e3a\u5706\u6846\u6837\u5f0f *\/\n .viewer-download-btn {\n color: #fff;\n background-color: transparent !important; \/* \u53bb\u6389\u80cc\u666f\u8272 *\/\n border: 2px solid rgba(255, 255, 255, 0.8); \/* \u5706\u6846\u6837\u5f0f *\/\n padding: 12px 24px;\n border-radius: 50px; \/* \u5706\u89d2\u6309\u94ae *\/\n font-size: 13pt;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 160px;\n justify-content: center;\n text-align: center;\n }\n .viewer-download-btn:hover {\n border-color: #2980b9;\n color: #2980b9;\n transform: translateY(-2px);\n }\n\n \/* \u5907\u6848\u53f7\u6837\u5f0f\uff1a\u9002\u914d\u6574\u4f53\u9875\u9762\u98ce\u683c\uff0c\u5408\u89c4\u4e14\u7f8e\u89c2 *\/\n .beian-container {\n position: fixed;\n bottom: 0 !important;\n left: 0 !important;\n width: 100vw !important;\n background-color: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(3px);\n z-index: 998;\n padding: 10px 0 !important;\n text-align: center;\n font-size: 12px;\n color: #666;\n line-height: 1.8;\n box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);\n }\n .beian-container a {\n color: #666;\n text-decoration: none;\n transition: color 0.3s;\n }\n .beian-container a:hover {\n color: #2980b9;\n }\n\n \/* \u79fb\u52a8\u7aef\u9002\u914d\uff1a\u7edf\u4e00\u903b\u8f91\uff0c\u4f18\u5316\u56fe\u7247\u6d4f\u89c8\u5668\u6837\u5f0f *\/\n @media (max-width: 768px) {\n \/* \u5bfc\u822a\u680f\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u79fb\u52a8\u7aef\u4e00\u81f4\uff0c\u6362\u884c\u5e03\u5c40 *\/\n .top-nav {\n flex-direction: column;\n padding: 10px 15px !important;\n gap: 10px;\n }\n .nav-list {\n gap: 15px !important;\n }\n .nav-list a, .download-btn {\n font-size: 11pt;\n }\n\n \/* \u4e3b\u5185\u5bb9\u533a\uff1a\u79fb\u52a8\u7aef\u4f7f\u7528\u7ad6\u5c4f\u80cc\u666f\u56febackground-M1\uff0c\u6548\u679c\u4e0e\u684c\u9762\u7aef\u4e00\u81f4 *\/\n .portfolio-container {\n background: url(\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A9-\u6784\u56fe7-BGm1-scaled.webp\") no-repeat center center !important; \/* \u7ad6\u5c4f\u4e13\u7528\u80cc\u666f *\/\n background-size: cover !important;\n background-attachment: scroll !important; \/* \u79fb\u52a8\u7aef\u53d6\u6d88\u56fa\u5b9a\u80cc\u666f\uff0c\u907f\u514d\u5361\u987f *\/\n padding-top: 120px !important; \/* \u9002\u914d\u5bfc\u822a\u680f\u6362\u884c\u9ad8\u5ea6 *\/\n padding-bottom: 70px !important; \/* \u79fb\u52a8\u7aef\u5907\u6848\u53f7\u533a\u57df\u9884\u7559\u7a7a\u95f4 *\/\n }\n .portfolio-container::before {\n background-color: rgba(255, 255, 255, 0.8) !important; \/* \u79fb\u52a8\u7aef\u52a0\u6df1\u906e\u7f69\uff0c\u63d0\u5347\u53ef\u8bfb\u6027 *\/\n }\n \/* \u6838\u5fc3\u4fee\u6539\uff1a\u79fb\u52a8\u7aef\u5185\u5bb9\u5361\u7247\u900f\u660e\u5ea6\u63d0\u9ad8\u52300.95\uff08\u66f4\u4e0d\u900f\u660e\uff09 *\/\n .portfolio-content {\n padding: 30px 4% !important;\n background-color: rgba(255, 255, 255, 0.65) !important;\n }\n\n \/* \u6807\u9898\u6837\u5f0f\uff1a\u79fb\u52a8\u7aef\u5fae\u8c03 *\/\n .portfolio-title {\n font-size: 18pt !important;\n }\n .portfolio-intro {\n font-size: 11pt !important;\n margin-bottom: 20px !important;\n }\n .category-title {\n font-size: 13pt !important;\n }\n\n \/* \u4f5c\u54c1\u5361\u7247\u4e0e\u56fe\u7247\u6d4f\u89c8\u5668\uff1a\u79fb\u52a8\u7aef\u4f18\u5316 *\/\n .work-item {\n padding: 18px !important;\n }\n .work-name {\n font-size: 12pt !important;\n }\n .work-desc {\n font-size: 10pt !important;\n }\n .viewer-main {\n max-height: 50% !important;\n }\n \/* \u79fb\u52a8\u7aef\u7bad\u5934\u5c3a\u5bf8\u8c03\u6574 *\/\n .viewer-prev, .viewer-next {\n width: 45px;\n height: 45px;\n font-size: 20px;\n }\n .viewer-thumbnails {\n max-height: 90px !important;\n }\n .thumbnail-item {\n width: 70px !important;\n height: 50px !important;\n }\n \/* \u79fb\u52a8\u7aef\u4e0b\u8f7d\u6309\u94ae\u8c03\u6574 *\/\n .viewer-download-container {\n gap: 15px !important;\n max-width: 90% !important;\n }\n .viewer-download-btn {\n padding: 10px 18px !important;\n font-size: 12pt !important;\n min-width: 130px !important;\n }\n\n \/* \u79fb\u52a8\u7aef\u5907\u6848\u53f7\u6837\u5f0f\u5fae\u8c03 *\/\n .beian-container {\n font-size: 11px;\n padding: 8px 0 !important;\n }\n }\n\n \/* \u8d85\u5c0f\u5c4f\u9002\u914d\uff1a\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4 *\/\n @media (max-width: 480px) {\n .portfolio-title {\n font-size: 17pt !important;\n }\n .viewer-download-container {\n flex-direction: column !important;\n gap: 10px !important;\n align-items: center !important;\n }\n .viewer-download-btn {\n width: 100% !important;\n max-width: 250px !important;\n }\n \/* \u8d85\u5c0f\u5c4f\u7bad\u5934\u5c3a\u5bf8\u8c03\u6574 *\/\n .viewer-prev, .viewer-next {\n width: 40px;\n height: 40px;\n font-size: 18px;\n }\n\n \/* \u8d85\u5c0f\u5c4f\u5907\u6848\u53f7\u6362\u884c\u663e\u793a *\/\n .beian-container {\n font-size: 10px;\n line-height: 1.6;\n }\n .beian-container span {\n display: block;\n margin: 2px 0 !important;\n }\n }\n\n \/* \u5f3a\u5236\u6d88\u9664\u6eda\u52a8\u6761\u7559\u767d\uff08\u4e0e\u5b66\u672f\u9875\u9762\u4e00\u81f4\uff09 *\/\n ::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n }\n <\/style>\n <!-- \u5f15\u5165ZIP\u6253\u5305\u548c\u6587\u4ef6\u4fdd\u5b58\u6240\u9700\u5e93 -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jszip@3.10.1\/dist\/jszip.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/file-saver@2.0.5\/dist\/FileSaver.min.js\"><\/script>\n<\/head>\n<body>\n <!-- \u9876\u90e8\u5bfc\u822a\u680f\uff1a\u79fb\u9664\u8bed\u8a00\u5207\u6362\uff0c\u65b0\u589e\u4e0b\u8f7d\u4f5c\u54c1\u96c6\u6309\u94ae -->\n <nav class=\"top-nav\">\n <ul class=\"nav-list\">\n <li><a href=\"https:\/\/www.elsakitsune.top\/index.php\/about-me\/\" data-i18n=\"nav_about\">\u5173\u4e8e\u6211<\/a><\/li>\n <li><a href=\"https:\/\/www.elsakitsune.top\/index.php\/acedemics-career\/\" data-i18n=\"nav_career\">\u5b66\u672f\u4e0e\u804c\u4e1a<\/a><\/li>\n <li><a href=\"https:\/\/www.elsakitsune.top\/index.php\/portfolio\/\" class=\"active\" data-i18n=\"nav_portfolio\">\u4f5c\u54c1\u96c6<\/a><\/li>\n <\/ul>\n \n <!-- \u4e0b\u8f7d\u4f5c\u54c1\u96c6\u6309\u94ae\uff08\u56fa\u5b9a\u5728\u5bfc\u822a\u680f\uff09 -->\n <div class=\"download-btn\" id=\"downloadPortfolioBtn\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M19 9H15V3H9V9H5L12 16L19 9Z\" fill=\"white\"\/>\n <path d=\"M5 18V20H19V18H5Z\" fill=\"white\"\/>\n <\/svg>\n <span data-i18n=\"btn_download_portfolio\">\u4e0b\u8f7d\u4f5c\u54c1\u96c6<\/span>\n <\/div>\n <\/nav>\n\n <!-- \u52a0\u8f7d\u63d0\u793a\u5f39\u7a97 -->\n <div class=\"loading-toast\" id=\"loadingToast\">\n <div class=\"loading-spinner\"><\/div>\n <span id=\"loadingText\">\u6b63\u5728\u6253\u5305\u6587\u4ef6\uff0c\u8bf7\u7a0d\u5019...<\/span>\n <\/div>\n\n <!-- \u6a21\u5757\u9884\u52a0\u8f7d\u63d0\u793a -->\n <div class=\"module-loading\" id=\"moduleLoading\">\n <div class=\"loading-spinner\"><\/div>\n <span id=\"moduleLoadingText\">\u6b63\u5728\u52a0\u8f7d\u56fe\u7247\uff0c\u8bf7\u7a0d\u5019...<\/span>\n <\/div>\n\n <!-- \u4e3b\u5185\u5bb9\u533a\uff1a\u4f5c\u54c1\u96c6\uff08\u6240\u6709\u5185\u5bb9\u5b8c\u5168\u4fdd\u7559\uff0c\u672a\u505a\u4efb\u4f55\u4fee\u6539\uff09 -->\n <div class=\"portfolio-container\">\n <div class=\"portfolio-content\">\n <h1 class=\"portfolio-title\" data-i18n=\"title\">\u6211\u7684\u4f5c\u54c1\u96c6<\/h1>\n <p class=\"portfolio-intro\" data-i18n=\"intro\">\u805a\u7126cosplay\u76f8\u5173\u5b9e\u8df5\u3001\u524d\u671f\u51c6\u5907\u4e0e\u540e\u671f\u4fee\u9970\u3001\u9879\u76ee\u7edf\u7b79\u6848\u4f8b\uff0c\u5c55\u73b0\u201c\u521b\u610f+\u903b\u8f91\u201d\u53cc\u91cd\u89c6\u89d2\u4e0b\u7684\u4f5c\u54c1\u6210\u679c<\/p>\n\n <!-- \u5206\u7c7b1\uff1a\u4f5c\u4e3acoser -->\n <div class=\"work-category\" id=\"coser\">\n <h2 class=\"category-title\" data-i18n=\"category_coser\">\u4f5c\u4e3acoser\uff1a\u89d2\u8272\u8fd8\u539f\u4e0e\u5448\u73b0<\/h2>\n <div class=\"work-list\">\n <!-- \u4f5c\u54c11\uff1a\u52a8\u6f2b\u89d2\u8272cos\u573a\u7167\uff0812\u5f20\u56fe\u7247\uff09 -->\n <div class=\"work-item\" \n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-1-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71671\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-2-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71672\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-3-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71673\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-4-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71674\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-5-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71675\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-6-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71676\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-7-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71677\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-8-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71678\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-9-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u71679\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-10-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u716710\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-11-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u716711\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u573a\u7167-12-scaled.webp\",\"name\":\"\u52a8\u6f2b\u89d2\u8272\u573a\u716712\"}\n ]'>\n <div class=\"work-name\" data-i18n=\"work_coser_online\">\u52a8\u6f2b\u89d2\u8272cos\u573a\u7167<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_coser_online\">\u7cbe\u51c6\u8fd8\u539f\u52a8\u6f2b\u89d2\u8272\u670d\u9970\u7ec6\u8282\u4e0e\u6807\u5fd7\u6027\u52a8\u4f5c\uff0c\u5728\u6f2b\u5c55\u73b0\u573a\u6355\u6349\u81ea\u7136\u4e92\u52a8\u77ac\u95f4\uff0c\u7a81\u51fa\u89d2\u8272\u6d3b\u529b<\/div>\n <\/div>\n <!-- \u4f5c\u54c12\uff1a\u89d2\u8272\u8fd8\u539f\u6b63\u7247 -->\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72471-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72471\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72472-BGm2-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72472\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72473.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72473\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72474-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72474\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72475-BGm4-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72475\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72476-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72476\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72477-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72477\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72478-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72478\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72479-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u72479\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u724710-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u724710\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6b63\u72471-scaled.webp\",\"name\":\"\u53e4\u98ce\u89d2\u8272\u6b63\u724711\"}\n ]'>\n <div class=\"work-name\" data-i18n=\"work_coser_character\">\u89d2\u8272\u8fd8\u539f\u6b63\u7247<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_coser_character\">\u7ed3\u5408\u89d2\u8272\u80cc\u666f\u8bbe\u8ba1\u5986\u5bb9\u4e0e\u59ff\u6001\uff0c\u901a\u8fc7\u8868\u60c5\u7ba1\u7406\u4f20\u9012\u89d2\u8272\u6027\u683c\uff0c\u642d\u914d\u53e4\u5178\u573a\u666f\u589e\u5f3a\u6c89\u6d78\u611f<\/div>\n <\/div>\n <!-- \u4f5c\u54c13\uff1a\u591a\u4eba\u89d2\u8272\u5408\u4f5c\u4f01\u5212 -->\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba1.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 1\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba2.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 2\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba3-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 3\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba4-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 4\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba5-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 5\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba6-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 6\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba7-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 7\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba8-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 8\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba9-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 9\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2025\/11\/\u591a\u4eba10-scaled.jpeg\",\"name\":\"\u591a\u4eba\u5408\u4f5c\u4f01\u5212 10\"}\n ]'>\n <div class=\"work-name\" data-i18n=\"work_coser_group\">\u591a\u4eba\u89d2\u8272\u5408\u4f5c\u4f01\u5212<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_coser_group\">\u53c2\u4e0e\u591a\u4ebacos\u4f01\u5212\uff0c\u534f\u8c03\u89d2\u8272\u9020\u578b\u7edf\u4e00\u6027\uff0c\u901a\u8fc7\u56e2\u961f\u914d\u5408\u5448\u73b0\u5267\u60c5\u5316\u573a\u666f\uff0c\u63d0\u5347\u4f5c\u54c1\u6545\u4e8b\u611f<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u5206\u7c7b2\uff1a\u4f5c\u4e3a\u6444\u5f71 -->\n <div class=\"work-category\" id=\"photography\">\n <h2 class=\"category-title\" data-i18n=\"category_photography\">\u4f5c\u4e3a\u6444\u5f71\uff1a\u955c\u5934\u8bed\u8a00\u4e0e\u5149\u5f71\u63a7\u5236<\/h2>\n <div class=\"work-list\">\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A6-\u6784\u56fe1.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 1\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A7-\u6784\u56fe2.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 2\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A8-\u6784\u56fe3.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 3\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A5-\u6784\u56fe4.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 4\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A11-\u6784\u56fe5.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 5\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A12-\u6784\u56fe6-scaled.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 6\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A9-\u6784\u56fe7-BGm1-scaled.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 7\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u6444\u5f71A13-\u6784\u56fe8-scaled.webp\",\"name\":\" \u4eba\u50cf\u6784\u56fe 8\"}\n]'>\n <div class=\"work-name\" data-i18n=\"work_photo_composition\">cosplay\u4eba\u50cf\u6784\u56fe\u62cd\u6444<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_photo_composition\">\u8fd0\u7528\u4e09\u5206\u6cd5\u3001\u5f15\u5bfc\u7ebf\u7b49\u6784\u56fe\u6280\u5de7\uff0c\u7a81\u51fa\u89d2\u8272\u4e3b\u4f53\uff0c\u642d\u914d\u73af\u5883\u5143\u7d20\u4e30\u5bcc\u753b\u9762\u5c42\u6b21\uff0c\u5f3a\u5316\u89c6\u89c9\u7126\u70b9<\/div>\n <\/div>\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f711.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f41\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f712.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f42\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f713.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f43\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f714.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f44\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f715-scaled.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f45\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f716.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f46\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f717.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f47\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f718.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f48\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f719.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f49\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u5149\u5f7110.webp\",\"name\":\"\u5149\u5f71\u6c1b\u56f410\"}\n]'>\n <div class=\"work-name\" data-i18n=\"work_photo_light\">\u5149\u5f71\u6c1b\u56f4\u8425\u9020\u62cd\u6444<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_photo_light\">\u901a\u8fc7\u81ea\u7136\u5149\/\u8865\u5149\u8bbe\u5907\u63a7\u5236\u5149\u5f71\uff0c\u6253\u9020\u67d4\u548c\u6216\u5f3a\u70c8\u7684\u5149\u5f71\u5bf9\u6bd4\uff0c\u9002\u914d\u4e0d\u540c\u89d2\u8272\u98ce\u683c\uff08\u53e4\u98ce\/\u6697\u9ed1\/\u6e05\u65b0\uff09<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u5206\u7c7b3\uff1a\u524d\u671f\u51c6\u5907\u4e0e\u540e\u671f\u4fee\u9970\u80fd\u529b -->\n <div class=\"work-category\" id=\"pre-post\">\n <h2 class=\"category-title\" data-i18n=\"category_prepost\">\u524d\u671f\u51c6\u5907\u4e0e\u540e\u671f\u4fee\u9970\u80fd\u529b<\/h2>\n <div class=\"work-list\">\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u9053\u51771.webp\",\"name\":\"\u624b\u5de5\u9053\u51771\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u9053\u51772-scaled.webp\",\"name\":\"\u624b\u5de5\u9053\u51772\"}\n ]'>\n <div class=\"work-name\" data-i18n=\"work_prop_make\">\u624b\u5de5\u9053\u5177\u5236\u4f5c\u4e0e\u6539\u9020<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_prop_make\">\u6839\u636e\u89d2\u8272\u8bbe\u5b9a\u7528EVA\u3001\u6ce1\u6cab\u7b49\u6750\u6599\u5236\u4f5c\u9053\u5177\uff08\u5982\u6b66\u5668\u3001\u914d\u9970\uff09\uff0c\u901a\u8fc7\u4e0a\u8272\u505a\u65e7\u5904\u7406\u63d0\u5347\u8fd8\u539f\u5ea6<\/div>\n <\/div>\n <div class=\"work-item\"\n data-img-group='[\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u8c03\u82721-scaled.webp\",\"name\":\"\u98ce\u683c\u8c03\u82721\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u8c03\u82722-scaled.webp\",\"name\":\"\u98ce\u683c\u8c03\u82722\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u8c03\u82723.webp\",\"name\":\"\u98ce\u683c\u8c03\u82723\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u8c03\u82724-scaled.webp\",\"name\":\"\u98ce\u683c\u8c03\u82724\"},\n {\"url\":\"https:\/\/www.elsakitsune.top\/wp-content\/uploads\/2026\/02\/\u8c03\u82725-scaled.webp\",\"name\":\"\u98ce\u683c\u8c03\u82725\"}\n ]'>\n <div class=\"work-name\" data-i18n=\"work_edit_color\">\u540e\u671f\u4fee\u56fe\u4e0e\u98ce\u683c\u8c03\u8272<\/div>\n <div class=\"work-desc\" data-i18n=\"desc_edit_color\">\u4f7f\u7528PS\/Lightroom\u8c03\u6574\u753b\u9762\u7455\u75b5\u3001\u4f18\u5316\u80a4\u8272\uff0c\u6839\u636e\u89d2\u8272\u98ce\u683c\u8c03\u8272\uff08\u5982\u53e4\u98ce\u963f\u5b9d\u8272\u3001\u52a8\u6f2b\u8d5b\u535a\u670b\u514b\u8272\uff09<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u5907\u6848\u53f7\u5c55\u793a\u533a\u57df\uff1a\u56fa\u5b9a\u5728\u9875\u9762\u5e95\u90e8\uff0c\u9002\u914d\u6574\u4f53\u6837\u5f0f -->\n <div class=\"beian-container\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u82cfICP\u59072025214309\u53f7<\/a>\n   |  \n <a href=\"https:\/\/beian.mps.gov.cn\/\" target=\"_blank\">\u82cf\u516c\u7f51\u5b89\u590732010602012194\u53f7<\/a>\n <\/div>\n\n <!-- \u56fe\u7247\u6d4f\u89c8\u5668\uff08\u6309\u9700\u6c42\u4fee\u6539\u6837\u5f0f\uff0c\u4fdd\u7559\u6240\u6709\u529f\u80fd\uff09 -->\n <div class=\"img-viewer\">\n <div class=\"viewer-close\">×<\/div>\n <!-- \u5927\u56fe\u533a\u57df\uff08\u542b\u5de6\u53f3\u7bad\u5934\uff09 -->\n <div class=\"viewer-main\">\n <img decoding=\"async\" src=\"\" alt=\"\u5927\u56fe\u9884\u89c8\" class=\"viewer-img\">\n <div class=\"viewer-prev\">❮<\/div>\n <div class=\"viewer-next\">❯<\/div>\n <div class=\"viewer-zoom\">\n <button class=\"zoom-btn zoom-in\">+<\/button>\n <button class=\"zoom-btn zoom-out\">-<\/button>\n <\/div>\n <\/div>\n <!-- \u7f29\u7565\u56fe\u533a\u57df -->\n <div class=\"viewer-thumbnails\"><\/div>\n <!-- \u4e0b\u8f7d\u6309\u94ae\u5bb9\u5668\uff08\u5c45\u4e2d\u663e\u793a\uff0c\u8c03\u6574\u6837\u5f0f\uff09 -->\n <div class=\"viewer-download-container\">\n <button class=\"viewer-download-btn viewer-download-current\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M19 9H15V3H9V9H5L12 16L19 9Z\"\/>\n <path d=\"M5 18V20H19V18H5Z\"\/>\n <\/svg>\n <span data-i18n=\"btn_download_current\">\u4e0b\u8f7d\u5f53\u524d\u56fe<\/span>\n <\/button>\n <button class=\"viewer-download-btn viewer-download-all\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M19 9H15V3H9V9H5L12 16L19 9Z\"\/>\n <path d=\"M5 18V20H19V18H5ZM19 13H15V11H19V13Z\"\/>\n <\/svg>\n <span data-i18n=\"btn_download_all\">\u4e0b\u8f7d\u5168\u90e8\u56fe<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- \u8bed\u8a00\u5207\u6362\u903b\u8f91 + \u56fe\u7247\u6d4f\u89c8\u5668\u529f\u80fd + \u5206\u7aef\u4e0b\u8f7dZIP\/\u76f4\u4e0b\u903b\u8f91 + \u4e0b\u8f7d\u539f\u56fe + \u9884\u52a0\u8f7d\u4f18\u5316 -->\n <script>\n \/\/ \u8bed\u8a00\u6570\u636e\u6620\u5c04\uff1a\u4fdd\u7559\u539f\u6709\u5b8c\u6574\u914d\u7f6e\uff0c\u65b0\u589e\u4e0b\u8f7d\u4f5c\u54c1\u96c6\u6309\u94ae\u7ffb\u8bd1\n const langData = {\n \/\/ \u7b80\u4f53\u4e2d\u6587\n \"zh-CN\": {\n \"nav_about\": \"\u5173\u4e8e\u6211\",\n \"nav_career\": \"\u5b66\u672f\u4e0e\u804c\u4e1a\",\n \"nav_portfolio\": \"\u4f5c\u54c1\u96c6\",\n \"title\": \"\u6211\u7684\u4f5c\u54c1\u96c6\",\n \"intro\": \"\u805a\u7126cosplay\u76f8\u5173\u5b9e\u8df5\u3001\u524d\u671f\u51c6\u5907\u4e0e\u540e\u671f\u4fee\u9970\u3001\u9879\u76ee\u7edf\u7b79\u6848\u4f8b\uff0c\u5c55\u73b0\u201c\u521b\u610f+\u903b\u8f91\u201d\u53cc\u91cd\u89c6\u89d2\u4e0b\u7684\u4f5c\u54c1\u6210\u679c\",\n \"category_coser\": \"\u4f5c\u4e3acoser\uff1a\u89d2\u8272\u8fd8\u539f\u4e0e\u5448\u73b0\",\n \"work_coser_online\": \"\u52a8\u6f2b\u89d2\u8272cos\u573a\u7167\",\n \"desc_coser_online\": \"\u7cbe\u51c6\u8fd8\u539f\u52a8\u6f2b\u89d2\u8272\u670d\u9970\u7ec6\u8282\u4e0e\u6807\u5fd7\u6027\u52a8\u4f5c\uff0c\u5728\u6f2b\u5c55\u73b0\u573a\u6355\u6349\u81ea\u7136\u4e92\u52a8\u77ac\u95f4\uff0c\u7a81\u51fa\u89d2\u8272\u6d3b\u529b\",\n \"work_coser_character\": \"\u89d2\u8272\u8fd8\u539f\u6b63\u7247\",\n \"desc_coser_character\": \"\u7ed3\u5408\u89d2\u8272\u80cc\u666f\u8bbe\u8ba1\u5986\u5bb9\u4e0e\u59ff\u6001\uff0c\u901a\u8fc7\u8868\u60c5\u7ba1\u7406\u4f20\u9012\u89d2\u8272\u6027\u683c\uff0c\u642d\u914d\u53e4\u5178\u573a\u666f\u589e\u5f3a\u6c89\u6d78\u611f\",\n \"work_coser_group\": \"\u591a\u4eba\u89d2\u8272\u5408\u4f5c\u4f01\u5212\",\n \"desc_coser_group\": \"\u53c2\u4e0e\u591a\u4ebacos\u4f01\u5212\uff0c\u534f\u8c03\u89d2\u8272\u9020\u578b\u7edf\u4e00\u6027\uff0c\u901a\u8fc7\u56e2\u961f\u914d\u5408\u5448\u73b0\u5267\u60c5\u5316\u573a\u666f\uff0c\u63d0\u5347\u4f5c\u54c1\u6545\u4e8b\u611f\",\n \"category_photography\": \"\u4f5c\u4e3a\u6444\u5f71\uff1a\u955c\u5934\u8bed\u8a00\u4e0e\u5149\u5f71\u63a7\u5236\",\n \"work_photo_composition\": \"cosplay\u4eba\u50cf\u6784\u56fe\u62cd\u6444\",\n \"desc_photo_composition\": \"\u8fd0\u7528\u4e09\u5206\u6cd5\u3001\u5f15\u5bfc\u7ebf\u7b49\u6784\u56fe\u6280\u5de7\uff0c\u7a81\u51fa\u89d2\u8272\u4e3b\u4f53\uff0c\u642d\u914d\u73af\u5883\u5143\u7d20\u4e30\u5bcc\u753b\u9762\u5c42\u6b21\uff0c\u5f3a\u5316\u89c6\u89c9\u7126\u70b9\",\n \"work_photo_light\": \"\u5149\u5f71\u6c1b\u56f4\u8425\u9020\u62cd\u6444\",\n \"desc_photo_light\": \"\u901a\u8fc7\u81ea\u7136\u5149\/\u8865\u5149\u8bbe\u5907\u63a7\u5236\u5149\u5f71\uff0c\u6253\u9020\u67d4\u548c\u6216\u5f3a\u70c8\u7684\u5149\u5f71\u5bf9\u6bd4\uff0c\u9002\u914d\u4e0d\u540c\u89d2\u8272\u98ce\u683c\uff08\u53e4\u98ce\/\u6697\u9ed1\/\u6e05\u65b0\uff09\",\n \"category_prepost\": \"\u524d\u671f\u51c6\u5907\u4e0e\u540e\u671f\u4fee\u9970\u80fd\u529b\",\n \"work_prop_make\": \"\u624b\u5de5\u9053\u5177\u5236\u4f5c\u4e0e\u6539\u9020\",\n \"desc_prop_make\": \"\u6839\u636e\u89d2\u8272\u8bbe\u5b9a\u7528EVA\u3001\u6ce1\u6cab\u7b49\u6750\u6599\u5236\u4f5c\u9053\u5177\uff08\u5982\u6b66\u5668\u3001\u914d\u9970\uff09\uff0c\u901a\u8fc7\u4e0a\u8272\u505a\u65e7\u5904\u7406\u63d0\u5347\u8fd8\u539f\u5ea6\",\n \"work_edit_color\": \"\u540e\u671f\u4fee\u56fe\u4e0e\u98ce\u683c\u8c03\u8272\",\n \"desc_edit_color\": \"\u4f7f\u7528PS\/Lightroom\u8c03\u6574\u753b\u9762\u7455\u75b5\u3001\u4f18\u5316\u80a4\u8272\uff0c\u6839\u636e\u89d2\u8272\u98ce\u683c\u8c03\u8272\uff08\u5982\u53e4\u98ce\u963f\u5b9d\u8272\u3001\u52a8\u6f2b\u8d5b\u535a\u670b\u514b\u8272\uff09\",\n \"btn_download_current\": \"\u4e0b\u8f7d\u5f53\u524d\u56fe\",\n \"btn_download_all\": \"\u4e0b\u8f7d\u5168\u90e8\u56fe\",\n \"btn_download_portfolio\": \"\u4e0b\u8f7d\u4f5c\u54c1\u96c6\",\n \"img_name_online\": \"\u52a8\u6f2b\u89d2\u8272\u573a\u7167\",\n \"img_name_character\": \"\u53e4\u98ce\u89d2\u8272\u6b63\u7247\",\n \"img_name_group\": \"\u591a\u4eba\u5408\u4f5c\u4f01\u5212\",\n \"img_name_photo_comp\": \"\u4eba\u50cf\u6784\u56fe\",\n \"img_name_photo_light\": \"\u5149\u5f71\u6c1b\u56f4\",\n \"img_name_prop\": \"\u624b\u5de5\u9053\u5177\",\n \"img_name_edit\": \"\u98ce\u683c\u8c03\u8272\"\n },\n \/\/ \u7e41\u4f53\u4e2d\u6587\n \"zh-TW\": {\n \"nav_about\": \"\u95dc\u65bc\u6211\",\n \"nav_career\": \"\u5b78\u8853\u8207\u8077\u696d\",\n \"nav_portfolio\": \"\u4f5c\u54c1\u96c6\",\n \"title\": \"\u6211\u7684\u4f5c\u54c1\u96c6\",\n \"intro\": \"\u805a\u7126cosplay\u76f8\u95dc\u5be6\u8e10\u3001\u524d\u671f\u6e96\u5099\u8207\u5f8c\u671f\u4fee\u98fe\u3001\u9805\u76ee\u7d71\u7c4c\u6848\u4f8b\uff0c\u5c55\u73fe\u300c\u5275\u610f+\u908f\u8f2f\u300d\u96d9\u91cd\u8996\u89d2\u4e0b\u7684\u4f5c\u54c1\u6210\u679c\",\n \"category_coser\": \"\u4f5c\u70bacoser\uff1a\u89d2\u8272\u9084\u539f\u8207\u5448\u73fe\",\n \"work_coser_online\": \"\u52d5\u6f2b\u89d2\u8272cos\u5834\u7167\",\n \"desc_coser_online\": \"\u7cbe\u78ba\u9084\u539f\u52d5\u6f2b\u89d2\u8272\u670d\u98fe\u7d30\u7bc0\u8207\u6a19\u8a8c\u6027\u52d5\u4f5c\uff0c\u5728\u6f2b\u5c55\u73fe\u5834\u6355\u6349\u81ea\u7136\u4e92\u52d5\u77ac\u9593\uff0c\u7a81\u51fa\u89d2\u8272\u6d3b\u529b\",\n \"work_coser_character\": \"\u89d2\u8272\u9084\u539f\u6b63\u7247\",\n \"desc_coser_character\": \"\u7d50\u5408\u89d2\u8272\u80cc\u666f\u8a2d\u8a08\u5316\u599d\u8207\u59ff\u614b\uff0c\u901a\u904e\u8868\u60c5\u7ba1\u7406\u50b3\u905e\u89d2\u8272\u6027\u683c\uff0c\u642d\u914d\u53e4\u5178\u5834\u666f\u589e\u5f37\u6c89\u6d78\u611f\",\n \"work_coser_group\": \"\u591a\u4eba\u89d2\u8272\u5408\u4f5c\u4f01\u5283\",\n \"desc_coser_group\": \"\u53c3\u8207\u591a\u4ebacos\u4f01\u5283\uff0c\u5354\u8abf\u89d2\u8272\u9020\u578b\u7d71\u4e00\u6027\uff0c\u901a\u904e\u5718\u968a\u914d\u5408\u5448\u73fe\u5287\u60c5\u5316\u5834\u666f\uff0c\u63d0\u5347\u4f5c\u54c1\u6545\u4e8b\u611f\",\n \"category_photography\": \"\u4f5c\u70ba\u651d\u5f71\uff1a\u93e1\u982d\u8a9e\u8a00\u8207\u5149\u5f71\u63a7\u5236\",\n \"work_photo_composition\": \"cosplay\u4eba\u50cf\u69cb\u5716\u62cd\u651d\",\n \"desc_photo_composition\": \"\u904b\u7528\u4e09\u5206\u6cd5\u3001\u5f15\u5c0e\u7dda\u7b49\u69cb\u5716\u6280\u5de7\uff0c\u7a81\u51fa\u89d2\u8272\u4e3b\u9ad4\uff0c\u642d\u914d\u74b0\u5883\u5143\u7d20\u8c50\u5bcc\u756b\u9762\u5c64\u6b21\uff0c\u5f37\u5316\u8996\u89ba\u7126\u9ede\",\n \"work_photo_light\": \"\u5149\u5f71\u6c1b\u570d\u71df\u9020\u62cd\u651d\",\n \"desc_photo_light\": \"\u901a\u904e\u81ea\u7136\u5149\/\u88dc\u5149\u8a2d\u5099\u63a7\u5236\u5149\u5f71\uff0c\u6253\u9020\u67d4\u548c\u6216\u5f37\u70c8\u7684\u5149\u5f71\u5c0d\u6bd4\uff0c\u9069\u914d\u4e0d\u540c\u89d2\u8272\u98a8\u683c\uff08\u53e4\u98a8\/\u6697\u9ed1\/\u6e05\u65b0\uff09\",\n \"category_prepost\": \"\u524d\u671f\u6e96\u5099\u8207\u5f8c\u671f\u4fee\u98fe\u80fd\u529b\",\n \"work_prop_make\": \"\u624b\u5de5\u9053\u5177\u88fd\u4f5c\u8207\u6539\u9020\",\n \"desc_prop_make\": \"\u6839\u64da\u89d2\u8272\u8a2d\u5b9a\u7528EVA\u3001\u6ce1\u6cab\u7b49\u6750\u6599\u88fd\u4f5c\u9053\u5177\uff08\u5982\u6b66\u5668\u3001\u914d\u98fe\uff09\uff0c\u901a\u904e\u4e0a\u8272\u505a\u820a\u8655\u7406\u63d0\u5347\u9084\u539f\u5ea6\",\n \"work_edit_color\": \"\u5f8c\u671f\u4fee\u5716\u8207\u98a8\u683c\u8abf\u8272\",\n \"desc_edit_color\": \"\u4f7f\u7528PS\/Lightroom\u8abf\u6574\u756b\u9762\u7455\u75b5\u3001\u512a\u5316\u819a\u8272\uff0c\u6839\u64da\u89d2\u8272\u98a8\u683c\u8abf\u8272\uff08\u5982\u53e4\u98a8\u963f\u5bf6\u8272\u3001\u52d5\u6f2b\u8cfd\u535a\u670b\u514b\u8272\uff09\",\n \"btn_download_current\": \"\u4e0b\u8f09\u7576\u524d\u5716\",\n \"btn_download_all\": \"\u4e0b\u8f09\u5168\u90e8\u5716\",\n \"btn_download_portfolio\": \"\u4e0b\u8f09\u4f5c\u54c1\u96c6\",\n \"img_name_online\": \"\u52d5\u6f2b\u89d2\u8272\u5834\u7167\",\n \"img_name_character\": \"\u53e4\u98a8\u89d2\u8272\u6b63\u7247\",\n \"img_name_group\": \"\u591a\u4eba\u5408\u4f5c\u4f01\u5283\",\n \"img_name_photo_comp\": \"\u4eba\u50cf\u69cb\u5716\",\n \"img_name_photo_light\": \"\u5149\u5f71\u6c1b\u570d\",\n \"img_name_prop\": \"\u624b\u5de5\u9053\u5177\",\n \"img_name_edit\": \"\u98a8\u683c\u8abf\u8272\"\n },\n \/\/ \u82f1\u8bed\n \"en\": {\n \"nav_about\": \"About Me\",\n \"nav_career\": \"Academics & Career\",\n \"nav_portfolio\": \"Portfolio\",\n \"title\": \"My Portfolio\",\n \"intro\": \"Focus on cosplay-related practices, pre-preparation, post-retouching, and project coordination cases, showcasing work results from the dual perspectives of \\\"creativity + logic\\\"\",\n \"category_coser\": \"As a Coser: Character Restoration & Presentation\",\n \"work_coser_online\": \"Anime Character On-site Cosplay Photos\",\n \"desc_coser_online\": \"Accurately restore anime character costume details and iconic actions, capture natural interaction moments at comic exhibitions, and highlight character vitality\",\n \"work_coser_character\": \"Character Restoration Official Photos\",\n \"desc_coser_character\": \"Design makeup and posture based on character background, convey character personality through expression management, and enhance immersion with classical scenes\",\n \"work_coser_group\": \"Multi-person Character Collaboration Project\",\n \"desc_coser_group\": \"Participate in multi-person cosplay projects, coordinate the unity of character styling, present dramatic scenes through team cooperation, and enhance the storytelling of works\",\n \"category_photography\": \"As a Photographer: Lens Language & Light Control\",\n \"work_photo_composition\": \"Cosplay Portrait Composition Shooting\",\n \"desc_photo_composition\": \"Use composition techniques such as the rule of thirds and leading lines to highlight the character subject, enrich picture layers with environmental elements, and strengthen visual focus\",\n \"work_photo_light\": \"Lighting Atmosphere Creation Shooting\",\n \"desc_photo_light\": \"Control light and shadow through natural light\/fill light equipment to create soft or strong light contrast, adapting to different character styles (ancient\/dark\/fresh)\",\n \"category_prepost\": \"Pre-preparation & Post-retouching Skills\",\n \"work_prop_make\": \"Handmade Prop Production & Modification\",\n \"desc_prop_make\": \"Make props (such as weapons and accessories) with EVA, foam and other materials according to character settings, and improve restoration through coloring and distressing\",\n \"work_edit_color\": \"Post-retouching & Style Coloring\",\n \"desc_edit_color\": \"Use PS\/Lightroom to adjust image flaws and optimize skin tone, and color according to character styles (such as ancient Aobao color, anime cyberpunk color)\",\n \"btn_download_current\": \"Download Current Image\",\n \"btn_download_all\": \"Download All Images\",\n \"btn_download_portfolio\": \"Download Portfolio\",\n \"img_name_online\": \"Anime Character On-site Photo\",\n \"img_name_character\": \"Ancient Style Character Official Photo\",\n \"img_name_group\": \"Multi-person Collaboration Project\",\n \"img_name_photo_comp\": \"Portrait Composition\",\n \"img_name_photo_light\": \"Lighting Atmosphere\",\n \"img_name_prop\": \"Handmade Prop\",\n \"img_name_edit\": \"Style Coloring\"\n }\n };\n\n \/\/ ===================== \u6838\u5fc3\u5de5\u5177\u51fd\u6570 =====================\n \/\/ 1. \u5de5\u5177\u51fd\u6570\uff1a\u66ff\u6362URL\u4e2d\u7684-scaled\uff0c\u83b7\u53d6\u539f\u56fe\u94fe\u63a5\uff08\u4ec5\u4e0b\u8f7d\u7528\uff09\n function getOriginalImageUrl(scaledUrl) {\n \/\/ \u66ff\u6362\u6240\u6709-scaled\u540e\u7f00\uff0c\u652f\u6301\u5404\u79cd\u683c\u5f0f\uff08jpeg\/jpg\/png\/webp\u7b49\uff09\n return scaledUrl.replace(\/-scaled(\\.\\w+)$\/, '$1');\n }\n\n \/\/ 2. \u5de5\u5177\u51fd\u6570\uff1a\u5224\u65ad\u662f\u5426\u4e3a\u79fb\u52a8\u7aef\uff08768px\u4e3a\u5206\u754c\uff0c\u4e0e\u5a92\u4f53\u67e5\u8be2\u4e00\u81f4\uff09\n function isMobile() {\n return window.innerWidth <= 768;\n }\n\n \/\/ 3. \u5de5\u5177\u51fd\u6570\uff1a\u663e\u793a\/\u9690\u85cf\u52a0\u8f7d\u63d0\u793a\n function showLoading(text = \"\u6b63\u5728\u6253\u5305\u6587\u4ef6\uff0c\u8bf7\u7a0d\u5019...\") {\n const toast = document.getElementById('loadingToast');\n const textEl = document.getElementById('loadingText');\n textEl.textContent = text;\n toast.style.display = 'flex';\n }\n function hideLoading() {\n const toast = document.getElementById('loadingToast');\n toast.style.display = 'none';\n }\n\n \/\/ 4. \u5de5\u5177\u51fd\u6570\uff1a\u663e\u793a\/\u9690\u85cf\u6a21\u5757\u9884\u52a0\u8f7d\u63d0\u793a\n function showModuleLoading(text = \"\u6b63\u5728\u52a0\u8f7d\u56fe\u7247\uff0c\u8bf7\u7a0d\u5019...\") {\n const toast = document.getElementById('moduleLoading');\n const textEl = document.getElementById('moduleLoadingText');\n textEl.textContent = text;\n toast.style.display = 'flex';\n }\n function hideModuleLoading() {\n const toast = document.getElementById('moduleLoading');\n toast.style.display = 'none';\n }\n\n \/\/ 5. \u5de5\u5177\u51fd\u6570\uff1a\u9884\u52a0\u8f7d\u56fe\u7247\uff08\u8fd4\u56dePromise\uff09\n function preloadImage(url) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.src = url;\n img.onload = () => resolve(url);\n img.onerror = () => reject(new Error(`\u56fe\u7247\u52a0\u8f7d\u5931\u8d25: ${url}`));\n });\n }\n\n \/\/ 6. \u5de5\u5177\u51fd\u6570\uff1a\u6279\u91cf\u9884\u52a0\u8f7d\u56fe\u7247\n async function batchPreloadImages(urls) {\n const promises = urls.map(url => preloadImage(url).catch(err => {\n console.warn(err);\n return url; \/\/ \u5355\u4e2a\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u4e0d\u5f71\u54cd\u6574\u4f53\n }));\n await Promise.all(promises);\n }\n\n \/\/ 7. \u5de5\u5177\u51fd\u6570\uff1a\u83b7\u53d6\u56fe\u7247Blob\u6570\u636e\uff08\u4f7f\u7528\u539f\u56feURL\uff09\n async function getImageBlob(scaledUrl) {\n const originalUrl = getOriginalImageUrl(scaledUrl);\n const response = await fetch(originalUrl);\n const blob = await response.blob();\n return blob;\n }\n\n \/\/ ===================== \u8bed\u8a00\u5207\u6362\u903b\u8f91 =====================\n function switchLang(lang) {\n \/\/ \u66ff\u6362\u6240\u6709\u5e26data-i18n\u5c5e\u6027\u7684\u5143\u7d20\u6587\u672c\n document.querySelectorAll('[data-i18n]').forEach(el => {\n const key = el.getAttribute('data-i18n');\n el.textContent = langData[lang][key] || '';\n });\n\n \/\/ \u66f4\u65b0\u56fe\u7247\u7ec4\u540d\u79f0\uff08data-img-group\u4e2d\u7684name\u5c5e\u6027\uff09\n document.querySelectorAll('.work-item').forEach(item => {\n const imgGroup = JSON.parse(item.getAttribute('data-img-group'));\n const workName = item.querySelector('.work-name').textContent;\n let imgNamePrefix = '';\n\n \/\/ \u6839\u636e\u4f5c\u54c1\u540d\u79f0\u5339\u914d\u56fe\u7247\u524d\u7f00\n if (workName.includes('\u573a\u7167') || workName.includes('On-site')) {\n imgNamePrefix = langData[lang]['img_name_online'];\n } else if (workName.includes('\u6b63\u7247') || workName.includes('Official')) {\n imgNamePrefix = langData[lang]['img_name_character'];\n } else if (workName.includes('\u591a\u4eba') || workName.includes('Multi-person')) {\n imgNamePrefix = langData[lang]['img_name_group'];\n } else if (workName.includes('\u6784\u56fe') || workName.includes('Composition')) {\n imgNamePrefix = langData[lang]['img_name_photo_comp'];\n } else if (workName.includes('\u5149\u5f71') || workName.includes('Lighting')) {\n imgNamePrefix = langData[lang]['img_name_photo_light'];\n } else if (workName.includes('\u9053\u5177') || workName.includes('Prop')) {\n imgNamePrefix = langData[lang]['img_name_prop'];\n } else if (workName.includes('\u8c03\u8272') || workName.includes('Coloring')) {\n imgNamePrefix = langData[lang]['img_name_edit'];\n }\n\n \/\/ \u66f4\u65b0\u56fe\u7247\u7ec4name\u5c5e\u6027\n imgGroup.forEach((img, index) => {\n img.name = `${imgNamePrefix}${index + 1}`;\n });\n item.setAttribute('data-img-group', JSON.stringify(imgGroup));\n });\n\n \/\/ \u540c\u6b65Cookie\u8bed\u8a00\u8bbe\u7f6e\n setLangCookie(lang);\n }\n\n \/\/ Cookie\u64cd\u4f5c\u51fd\u6570\n function getLangCookie() {\n const name = \"userLang=\";\n const decodedCookie = decodeURIComponent(document.cookie);\n const ca = decodedCookie.split(';');\n for(let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) === ' ') {\n c = c.substring(1);\n }\n if (c.indexOf(name) === 0) {\n return c.substring(name.length, c.length);\n }\n }\n return \"zh-CN\";\n }\n\n function setLangCookie(lang) {\n const date = new Date();\n date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));\n const expires = \"expires=\" + date.toUTCString();\n document.cookie = `userLang=${lang}; ${expires}; path=\/; SameSite=Lax`;\n }\n\n \/\/ ===================== \u4f5c\u54c1\u96c6\u4e0b\u8f7d\u903b\u8f91 =====================\n function bindPortfolioDownloadEvent() {\n const downloadBtn = document.getElementById('downloadPortfolioBtn');\n downloadBtn.addEventListener('click', async () => {\n showLoading(\"\u6b63\u5728\u6253\u5305\u4f5c\u54c1\u96c6\uff08\u539f\u56fe\uff09\uff0c\u8bf7\u7a0d\u5019...\");\n try {\n const zip = new JSZip();\n const rootFolder = zip.folder(\"\u4f5c\u54c1\u96c6\"); \/\/ \u6839\u6587\u4ef6\u5939\n\n \/\/ \u904d\u5386\u6240\u6709\u4f5c\u54c1\u9879\uff0c\u6309\u5206\u7c7b\u521b\u5efa\u5b50\u6587\u4ef6\u5939\u5e76\u6dfb\u52a0\u56fe\u7247\n const workItems = document.querySelectorAll('.work-item');\n for (let i = 0; i < workItems.length; i++) {\n const item = workItems[i];\n const workName = item.querySelector('.work-name').textContent;\n const imgGroup = JSON.parse(item.getAttribute('data-img-group'));\n const subFolder = rootFolder.folder(workName); \/\/ \u5b50\u6587\u4ef6\u5939\n\n \/\/ \u4e0b\u8f7d\u5e76\u6dfb\u52a0\u8be5\u6a21\u5757\u7684\u6240\u6709\u539f\u56fe\n for (let j = 0; j < imgGroup.length; j++) {\n const img = imgGroup[j];\n const blob = await getImageBlob(img.url); \/\/ \u81ea\u52a8\u4f7f\u7528\u539f\u56feURL\n const fileName = getOriginalImageUrl(img.url).split('\/').pop(); \/\/ \u539f\u56fe\u6587\u4ef6\u540d\n subFolder.file(fileName, blob);\n }\n }\n\n \/\/ \u751f\u6210ZIP\u5e76\u4e0b\u8f7d\n const zipContent = await zip.generateAsync({ type: \"blob\" });\n saveAs(zipContent, \"\u4f5c\u54c1\u96c6\uff08\u539f\u56fe\uff09.zip\");\n } catch (error) {\n alert(\"\u4f5c\u54c1\u96c6\u6253\u5305\u5931\u8d25\uff1a\" + error.message);\n } finally {\n hideLoading();\n }\n });\n }\n\n \/\/ ===================== \u56fe\u7247\u6d4f\u89c8\u5668\u6838\u5fc3\u903b\u8f91 =====================\n const imgViewer = document.querySelector('.img-viewer');\n const viewerClose = document.querySelector('.viewer-close');\n const viewerImg = document.querySelector('.viewer-img');\n const viewerPrev = document.querySelector('.viewer-prev');\n const viewerNext = document.querySelector('.viewer-next');\n const zoomIn = document.querySelector('.zoom-in');\n const zoomOut = document.querySelector('.zoom-out');\n const viewerDownloadCurrent = document.querySelector('.viewer-download-current');\n const viewerDownloadAll = document.querySelector('.viewer-download-all');\n const viewerThumbnails = document.querySelector('.viewer-thumbnails');\n const workItems = document.querySelectorAll('.work-item');\n\n let currentImgGroup = [];\n let currentIndex = 0;\n let currentScale = 1;\n const maxScale = 3;\n const minScale = 0.5;\n const scaleStep = 0.2;\n let currentModuleName = \"\"; \/\/ \u5f53\u524d\u6253\u5f00\u7684\u6a21\u5757\u540d\u79f0\n\n \/\/ \u521d\u59cb\u5316\u56fe\u7247\u6d4f\u89c8\u5668\uff08\u542b\u9884\u52a0\u8f7d\uff09\n async function initViewer(imgGroup, moduleName) {\n currentImgGroup = imgGroup;\n currentIndex = 0;\n currentScale = 1;\n currentModuleName = moduleName;\n\n \/\/ \u63d0\u53d6\u6240\u6709\u56fe\u7247URL\u7528\u4e8e\u9884\u52a0\u8f7d\n const imgUrls = imgGroup.map(img => img.url);\n try {\n showModuleLoading(`\u6b63\u5728\u52a0\u8f7d${moduleName}\u56fe\u7247...`);\n await batchPreloadImages(imgUrls); \/\/ \u6279\u91cf\u9884\u52a0\u8f7d\u8be5\u6a21\u5757\u6240\u6709\u56fe\u7247\n } catch (error) {\n console.warn(\"\u90e8\u5206\u56fe\u7247\u9884\u52a0\u8f7d\u5931\u8d25:\", error);\n } finally {\n hideModuleLoading();\n }\n\n \/\/ \u521d\u59cb\u5316\u663e\u793a\u7b2c\u4e00\u5f20\u56fe\n viewerImg.src = currentImgGroup[currentIndex].url;\n viewerImg.alt = currentImgGroup[currentIndex].name;\n viewerImg.style.transform = `scale(${currentScale})`;\n\n \/\/ \u751f\u6210\u7f29\u7565\u56fe\uff08\u9884\u52a0\u8f7d\u540e\u751f\u6210\uff0c\u907f\u514d\u52a0\u8f7d\u6162\uff09\n viewerThumbnails.innerHTML = '';\n currentImgGroup.forEach((img, index) => {\n const thumbnail = document.createElement('div');\n thumbnail.className = `thumbnail-item ${index === currentIndex ? 'active' : ''}`;\n thumbnail.innerHTML = `<img decoding=\"async\" src=\"${img.url}\" alt=\"${img.name}\">`;\n thumbnail.addEventListener('click', () => {\n currentIndex = index;\n updateViewer();\n \/\/ \u9884\u52a0\u8f7d\u4e0a\u4e0b\u5f20\u56fe\u7247\n preloadNeighborImages(index);\n });\n viewerThumbnails.appendChild(thumbnail);\n });\n\n \/\/ \u9884\u52a0\u8f7d\u521d\u59cb\u56fe\u7247\u7684\u4e0a\u4e0b\u5f20\n preloadNeighborImages(0);\n\n updateDownloadLinks();\n imgViewer.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n }\n\n \/\/ \u66f4\u65b0\u56fe\u7247\u6d4f\u89c8\u5668\u663e\u793a\n function updateViewer() {\n viewerImg.src = currentImgGroup[currentIndex].url;\n viewerImg.alt = currentImgGroup[currentIndex].name;\n currentScale = 1;\n viewerImg.style.transform = `scale(${currentScale})`;\n \n const thumbnails = document.querySelectorAll('.thumbnail-item');\n thumbnails.forEach((thumb, index) => {\n thumb.classList.toggle('active', index === currentIndex);\n });\n \n updateDownloadCurrentLink();\n \/\/ \u9884\u52a0\u8f7d\u4e0a\u4e0b\u5f20\u56fe\u7247\n preloadNeighborImages(currentIndex);\n }\n\n \/\/ \u9884\u52a0\u8f7d\u5f53\u524d\u56fe\u7247\u7684\u4e0a\u4e0b\u5f20\n function preloadNeighborImages(currentIdx) {\n const total = currentImgGroup.length;\n if (total <= 1) return;\n\n \/\/ \u4e0b\u4e00\u5f20\n const nextIdx = (currentIdx + 1) % total;\n preloadImage(currentImgGroup[nextIdx].url).catch(err => console.warn(\"\u9884\u52a0\u8f7d\u4e0b\u4e00\u5f20\u5931\u8d25:\", err));\n \n \/\/ \u4e0a\u4e00\u5f20\n const prevIdx = (currentIdx - 1 + total) % total;\n preloadImage(currentImgGroup[prevIdx].url).catch(err => console.warn(\"\u9884\u52a0\u8f7d\u4e0a\u4e00\u5f20\u5931\u8d25:\", err));\n }\n\n \/\/ \u66f4\u65b0\u5f53\u524d\u56fe\u7247\u4e0b\u8f7d\u94fe\u63a5\uff08\u4f7f\u7528\u539f\u56fe\uff09\n function updateDownloadCurrentLink() {\n const scaledUrl = currentImgGroup[currentIndex].url;\n const originalUrl = getOriginalImageUrl(scaledUrl); \/\/ \u66ff\u6362\u4e3a\u539f\u56feURL\n \n viewerDownloadCurrent.onclick = () => {\n const downloadLink = document.createElement('a');\n downloadLink.href = originalUrl;\n const fileName = originalUrl.split('\/').pop(); \/\/ \u539f\u56fe\u6587\u4ef6\u540d\n downloadLink.download = fileName;\n downloadLink.click();\n };\n }\n\n \/\/ \u6838\u5fc3\u4fee\u6539\uff1a\u5206\u7aef\u5904\u7406\u300c\u4e0b\u8f7d\u5168\u90e8\u56fe\u300d\u903b\u8f91\uff08\u4f7f\u7528\u539f\u56fe\uff09\n function updateDownloadLinks() {\n updateDownloadCurrentLink();\n \n viewerDownloadAll.onclick = async () => {\n \/\/ \u79fb\u52a8\u7aef\uff1a\u76f4\u63a5\u9010\u4e2a\u4e0b\u8f7d\u539f\u56fe\n if (isMobile()) {\n currentImgGroup.forEach((img, index) => {\n setTimeout(() => {\n const originalUrl = getOriginalImageUrl(img.url);\n const downloadLink = document.createElement('a');\n downloadLink.href = originalUrl;\n const fileName = originalUrl.split('\/').pop();\n downloadLink.download = fileName;\n downloadLink.click();\n }, index * 300); \/\/ \u95f4\u9694\u4e0b\u8f7d\uff0c\u907f\u514d\u6d4f\u89c8\u5668\u62e6\u622a\n });\n alert(\"\u5df2\u5f00\u59cb\u4e0b\u8f7d\u8be5\u6a21\u5757\u6240\u6709\u539f\u56fe\uff0c\u8bf7\u7559\u610f\u6d4f\u89c8\u5668\u4e0b\u8f7d\u63d0\u793a\");\n } \n \/\/ \u684c\u9762\u7aef\uff1a\u6253\u5305\u539f\u56fe\u4e3aZIP\u4e0b\u8f7d\n else {\n showLoading(`\u6b63\u5728\u6253\u5305${currentModuleName}\u539f\u56fe\uff0c\u8bf7\u7a0d\u5019...`);\n try {\n const zip = new JSZip();\n \/\/ \u4e0b\u8f7d\u5e76\u6dfb\u52a0\u6240\u6709\u539f\u56fe\n for (let i = 0; i < currentImgGroup.length; i++) {\n const img = currentImgGroup[i];\n const blob = await getImageBlob(img.url); \/\/ \u81ea\u52a8\u4f7f\u7528\u539f\u56fe\n const fileName = getOriginalImageUrl(img.url).split('\/').pop(); \/\/ \u539f\u56fe\u6587\u4ef6\u540d\n zip.file(fileName, blob);\n }\n \/\/ \u751f\u6210ZIP\u5e76\u4e0b\u8f7d\n const zipContent = await zip.generateAsync({ type: \"blob\" });\n saveAs(zipContent, `${currentModuleName}\uff08\u539f\u56fe\uff09.zip`);\n } catch (error) {\n alert(\"\u56fe\u7247\u6253\u5305\u5931\u8d25\uff1a\" + error.message);\n } finally {\n hideLoading();\n }\n }\n };\n }\n\n \/\/ \u79fb\u52a8\u7aef\u6ed1\u52a8\u5207\u6362\u56fe\u7247\uff08\u7cbe\u7b80Y\u8f74\u5197\u4f59\u53d8\u91cf\uff09\n let touchStartX = 0;\n let touchEndX = 0;\n const swipeThreshold = 30;\n\n viewerImg.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].clientX;\n e.preventDefault();\n });\n\n viewerImg.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].clientX;\n const touchDiffX = touchEndX - touchStartX;\n\n if (Math.abs(touchDiffX) > swipeThreshold) {\n if (touchDiffX > 0) {\n currentIndex = (currentIndex - 1 + currentImgGroup.length) % currentImgGroup.length;\n } else {\n currentIndex = (currentIndex + 1) % currentImgGroup.length;\n }\n updateViewer();\n }\n });\n\n \/\/ \u4fee\u590d\u53cc\u51fb\u653e\u5927\u529f\u80fd\uff08\u53cc\u7aef\u751f\u6548\uff0c\u652f\u6301\u79fb\u52a8\u7aef\uff09\n let lastTapTime = 0;\n viewerImg.addEventListener('touchstart', (e) => {\n const now = Date.now();\n if (now - lastTapTime < 300) {\n \/\/ \u79fb\u52a8\u7aef\u53cc\u51fb\n e.preventDefault();\n toggleScale();\n }\n lastTapTime = now;\n });\n viewerImg.addEventListener('dblclick', (e) => {\n \/\/ \u684c\u9762\u7aef\u53cc\u51fb\n e.preventDefault();\n toggleScale();\n });\n\n \/\/ \u653e\u5927\/\u8fd8\u539f\u5207\u6362\u51fd\u6570\n function toggleScale() {\n currentScale = currentScale === 1 ? 2 : 1;\n viewerImg.style.transform = `scale(${currentScale})`;\n }\n\n \/\/ \u7f29\u653e\u6309\u94ae\u529f\u80fd\n zoomIn.addEventListener('click', () => {\n if (currentScale < maxScale) {\n currentScale += scaleStep;\n viewerImg.style.transform = `scale(${currentScale})`;\n }\n });\n zoomOut.addEventListener('click', () => {\n if (currentScale > minScale) {\n currentScale -= scaleStep;\n viewerImg.style.transform = `scale(${currentScale})`;\n }\n });\n\n \/\/ \u5de6\u53f3\u7bad\u5934\u5207\u6362\u56fe\u7247\u529f\u80fd\n viewerPrev.addEventListener('click', () => {\n currentIndex = (currentIndex - 1 + currentImgGroup.length) % currentImgGroup.length;\n updateViewer();\n });\n viewerNext.addEventListener('click', () => {\n currentIndex = (currentIndex + 1 + currentImgGroup.length) % currentImgGroup.length;\n updateViewer();\n });\n\n \/\/ \u5173\u95ed\u56fe\u7247\u6d4f\u89c8\u5668\n viewerClose.addEventListener('click', () => {\n imgViewer.style.display = 'none';\n document.body.style.overflow = '';\n });\n imgViewer.addEventListener('click', (e) => {\n if (e.target === imgViewer) {\n imgViewer.style.display = 'none';\n document.body.style.overflow = '';\n }\n });\n\n \/\/ ===================== \u9875\u9762\u521d\u59cb\u5316 =====================\n window.onload = function() {\n \/\/ \u8bed\u8a00\u5207\u6362\u521d\u59cb\u5316\n const defaultLang = getLangCookie();\n switchLang(defaultLang);\n \n \/\/ \u7ed1\u5b9a\u4f5c\u54c1\u96c6\u4e0b\u8f7d\u4e8b\u4ef6\n bindPortfolioDownloadEvent();\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u9884\u52a0\u8f7d\u6bcf\u4e2a\u6a21\u5757\u7684\u7b2c\u4e00\u5f20\u56fe\u7247\uff0c\u52a0\u5feb\u9996\u6b21\u70b9\u51fb\u901f\u5ea6\n workItems.forEach(item => {\n const imgGroup = JSON.parse(item.getAttribute('data-img-group'));\n if (imgGroup.length > 0) {\n preloadImage(imgGroup[0].url).catch(err => console.warn(\"\u9884\u52a0\u8f7d\u6a21\u5757\u9996\u56fe\u5931\u8d25:\", err));\n }\n });\n\n \/\/ \u7ed1\u5b9a\u4f5c\u54c1\u9879\u70b9\u51fb\u4e8b\u4ef6\uff08\u5e26\u9884\u52a0\u8f7d\uff09\n workItems.forEach(item => {\n item.addEventListener('click', async () => {\n const imgGroup = JSON.parse(item.getAttribute('data-img-group'));\n const moduleName = item.querySelector('.work-name').textContent;\n await initViewer(imgGroup, moduleName); \/\/ \u521d\u59cb\u5316\u65f6\u9884\u52a0\u8f7d\n });\n });\n };\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4f5c\u54c1\u96c6 – \u9648\u709c\u5a34 \u5173\u4e8e\u6211 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":152,"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":742,"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/pages\/40\/revisions\/742"}],"wp:attachment":[{"href":"https:\/\/www.elsakitsune.top\/index.php\/wp-json\/wp\/v2\/media?parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}