{"id":368,"date":"2022-06-10T09:44:00","date_gmt":"2022-06-10T01:44:00","guid":{"rendered":"http:\/\/117.72.73.133\/?p=368"},"modified":"2026-06-03T15:22:46","modified_gmt":"2026-06-03T07:22:46","slug":"%e7%94%a8%e9%95%9c%e5%a4%b4%e5%ae%9a%e6%a0%bc%e6%82%a8%e7%9a%84%e7%88%b1%e6%83%85%e7%94%b5%e5%bd%b1","status":"publish","type":"post","link":"https:\/\/jiyiyingshi.xyz\/?p=368","title":{"rendered":"\u6781\u827a\u5f71\u89c6\u4ef7\u683c\u8868"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+SC:wght@300;500;700&display=swap');\n\n    .wedding-config-wrapper { max-width: 1100px; margin: 40px auto; }\n    .config-top-header { text-align: center; margin-bottom: 35px; padding: 0 20px; font-family: 'Noto Serif SC', \"Source Han Serif CN\", serif; }\n    .config-top-header h2 { font-size: 1.8rem; font-weight: 500; color: #2c2520; margin: 0 0 12px 0; letter-spacing: 3px; }\n    .config-top-header p { font-size: 0.85rem; color: #8c827a; margin: 0; font-family: sans-serif; letter-spacing: 1px; }\n    .wedding-story-container { display: flex; flex-direction: column; background: #ffffff; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border-radius: 12px; overflow: hidden; font-family: 'Noto Serif SC', \"Source Han Serif CN\", serif; }\n    @media(min-width: 768px) { .wedding-story-container { flex-direction: row; align-items: stretch; } }\n    .left-visual-bill-panel { flex: 1.2; background: #faf8f5; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #eae5e1; }\n    .story-visual-stage { width: 100%; flex: 1; background: #1a1a1a; position: relative; min-height: 480px; }\n    .story-visual-stage img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; }\n    .story-visual-stage img.active { opacity: 1; }\n    \n    \/* \ud83d\udd34 \u4f18\u5316\u533a\u57df\uff1a\u8c03\u5927\u6807\u7b7e\u5b57\u4f53\u3001\u8fb9\u8ddd\u548c\u95f4\u8ddd\uff0c\u589e\u5f3a\u89c6\u89c9\u51b2\u51fb\u529b *\/\n    .visual-deliverables-overlay { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 15; pointer-events: none; }\n    .overlay-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; margin-bottom: 12px; font-weight: bold; font-family: sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }\n    .overlay-tags-container { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }\n    .film-tag { font-size: 0.85rem; background: rgba(255, 255, 255, 0.95); color: #2c2520; border: 1px solid rgba(255, 255, 255, 0.8); padding: 8px 16px; border-radius: 6px; font-family: sans-serif; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); backdrop-filter: blur(4px); animation: fadeInTag 0.3s ease forwards; width: auto; font-weight: 500; }\n    \n    .tag-duration-suffix { font-size: 0.8rem; color: #c5a880; font-weight: 600; margin-left: 5px; }\n    .tag-duration-suffix.today-highlight { color: #d35400; font-weight: bold; }\n    \n    .bill-details-block { padding: 30px 30px 38px 30px; box-sizing: border-box; }\n    .price-meta { font-size: 0.75rem; color: #9c928a; letter-spacing: 1px; font-family: sans-serif; margin-bottom: 12px; border-bottom: 1px solid #eae5e1; padding-bottom: 6px; text-transform: uppercase; font-weight: bold; }\n    .price-manifest-summary { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n    .bill-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #5c5550; font-family: sans-serif; line-height: 1.4; }\n    .bill-name { color: #7c6e64; }\n    .bill-price { font-weight: 500; color: #4a3f35; }\n    @keyframes fadeInTag { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }\n    .preview-tag { position: absolute; bottom: 15px; left: 15px; background: rgba(44, 37, 32, 0.7); color: #fff; padding: 5px 10px; font-size: 0.75rem; border-radius: 3px; z-index: 10; font-family: sans-serif; }\n    .story-script-panel { flex: 1; background: #fdfcfb; display: flex; flex-direction: column; justify-content: space-between; padding: 45px 30px 35px 30px; box-sizing: border-box; }\n    .script-panel-upper { width: 100%; }\n    .scenario-list { display: flex; flex-direction: column; gap: 15px; }\n    .scenario-label { display: block; padding: 20px; background: #ffffff; border: 1px solid #eae5e1; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; user-select: none; }\n    .scenario-label:hover { border-color: #c5a880; background: #fdfbf7; }\n    .label-top-flex { display: flex; align-items: flex-start; }\n    .custom-checkbox { width: 18px; height: 18px; margin-top: 2px; margin-right: 15px; accent-color: #c5a880; flex-shrink: 0; cursor: pointer; }\n    .scenario-content { flex: 1; }\n    .scenario-title { font-size: 0.95rem; font-weight: 500; color: #332c28; line-height: 1.5; }\n    .scenario-hint { font-size: 0.8rem; color: #9c928a; margin-top: 6px; font-family: sans-serif; }\n    .sub-options-box { margin-top: 15px; margin-left: 33px; padding-top: 12px; border-top: 1px dashed #eae5e1; display: none; flex-direction: row; flex-wrap: wrap; gap: 20px; }\n    .sub-option-item { display: inline-flex; align-items: center; font-size: 0.85rem; color: #5c5550; cursor: pointer; font-family: sans-serif; }\n    .sub-option-item input[type=\"radio\"] { margin-right: 6px; accent-color: #c5a880; }\n    .story-footer { margin-top: 40px; padding-top: 25px; border-top: 1px solid #eae5e1; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; }\n    .price-block { display: flex; flex-direction: column; }\n    .footer-meta-title { font-size: 0.75rem; color: #9c928a; letter-spacing: 1px; font-family: sans-serif; margin-bottom: 4px; }\n    .price-tag { font-size: 2.4rem; font-weight: 700; color: #c5a880; line-height: 1; }\n    .book-btn { background: #2c2520; color: #ffffff; border: none; padding: 15px 40px; font-size: 0.95rem; border-radius: 4px; cursor: pointer; letter-spacing: 1px; transition: background 0.2s; flex-shrink: 0; height: 50px; }\n    .book-btn:hover { background: #c5a880; }\n    .detail-info-panel { margin-top: 20px; background: #f6f3f0; border: 1px solid #eae5e1; border-radius: 12px; padding: 25px 30px; font-family: sans-serif; }\n    .detail-title { font-size: 0.85rem; color: #c5a880; font-weight: bold; letter-spacing: 1px; margin-bottom: 8px; }\n    .detail-content { font-size: 0.9rem; color: #5c5550; line-height: 1.6; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"wedding-config-wrapper\">\n    <div class=\"config-top-header\">\n        <h2>\u5b9a\u5236\u60a8\u7684\u5a5a\u793c\u65b9\u6848<\/h2>\n        <p>\u70b9\u51fb\u4e0b\u65b9\u9009\u9879\u5361\u7247\u5373\u53ef\u76f4\u63a5\u6253\u52fe\u9009\u914d\u4e13\u5c5e\u65b9\u6848<\/p>\n    <\/div>\n    \n    <div class=\"wedding-story-container\">\n        <div class=\"left-visual-bill-panel\">\n            <div class=\"story-visual-stage\">\n                <div class=\"visual-deliverables-overlay\">\n                    <div class=\"overlay-title\">\u6700\u7ec8\u53ef\u83b7\u5f97\u6210\u7247 \/ DELIVERABLES<\/div>\n                    <div class=\"overlay-tags-container\" id=\"deliverables-tags-target\"><\/div>\n                <\/div>\n                <img decoding=\"async\" id=\"view-base\" class=\"active\" src=\"https:\/\/images.unsplash.com\/photo-1519741497674-611481863552?q=80&#038;w=1000\" alt=\"\u4eea\u5f0f\u8bb0\u5f55\">\n                <img decoding=\"async\" id=\"view-mv\" src=\"https:\/\/images.unsplash.com\/photo-1511285560929-80b456fea0bc?q=80&#038;w=1000\" alt=\"\u7cbe\u526aMV\">\n                <img decoding=\"async\" id=\"view-multi\" src=\"https:\/\/images.unsplash.com\/photo-1465495976277-4387d4b0b4c6?q=80&#038;w=1000\" alt=\"\u53cc\u673a\u4f4d\">\n                <img decoding=\"async\" id=\"view-drone\" src=\"https:\/\/images.unsplash.com\/photo-1473177104440-ffee2f376098?q=80&#038;w=1000\" alt=\"\u822a\u62cd\">\n                <img decoding=\"async\" id=\"view-sde\" src=\"https:\/\/images.unsplash.com\/photo-1492684223066-81342ee5ff30?q=80&#038;w=1000\" alt=\"\u665a\u5bb4\u5feb\u526a\">\n                <img decoding=\"async\" id=\"view-fast\" src=\"https:\/\/images.unsplash.com\/photo-1519225495810-7512c696505a?q=80&#038;w=1000\" alt=\"\u6781\u901f\u4ea4\u4ed8\">\n                <img decoding=\"async\" id=\"view-vlog\" src=\"https:\/\/images.unsplash.com\/photo-1616469829581-73993eb86b02?q=80&#038;w=1000\" alt=\"\u670b\u53cb\u5708\u9884\u544a\">\n                <div class=\"preview-tag\" id=\"view-tag\">\u753b\u9762\u9884\u89c8\uff1a\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5b9e<\/div>\n            <\/div>\n            <div class=\"bill-details-block\">\n                <div class=\"price-meta\">\u5f71\u50cf\u5b9a\u5236\u8d26\u5355 \/ BILL DETAILS<\/div>\n                <div class=\"price-manifest-summary\" id=\"manifest-summary-target\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"story-script-panel\">\n            <div class=\"script-panel-upper\">\n                <div class=\"scenario-list\">\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('base')\" onclick=\"toggleRowCard(event, 'opt-base', '')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-base\" class=\"custom-checkbox\" checked disabled onclick=\"event.stopPropagation();\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u60f3\u5b8c\u6574\u8bb0\u5f55\u4e0b\u5168\u5929\u5168\u6d41\u7a0b\uff08\u6781\u81f4\u6027\u4ef7\u6bd4\uff09<\/div>\n                                <div class=\"scenario-hint\">\u5305\u542b\uff1a\u9ad8\u6e05\u5a5a\u793c\u5168\u7a0b\u7eaa\u5f55\u7247 (\u6240\u6709\u65b9\u6848\u7684\u6839\u57fa\uff0c\u9002\u5408\u7eaf\u8bb0\u5f55\u65e0\u6446\u62cd)<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('mv')\" onclick=\"toggleRowCard(event, 'opt-mv', 'sub-mv-box')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-mv\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); handleMainCheckboxToggle(this, 'sub-mv-box')\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u60f3\u628a\u611f\u52a8\u6d53\u7f29\uff0c\u6709\u4e00\u652f\u7535\u5f71\u611f\u7cbe\u526aMV\uff08\u5e38\u89c4\u5355\u673a\uff09<\/div>\n                                <div class=\"scenario-hint\">\u81ea\u9009\u5347\u7ea7\uff1a\u72ec\u7acb\u5b9a\u5236 +\u00a5880\uff08\u5305\u542b3\u5206\u949f\u5de6\u53f3\u7535\u5f71\u611fMV\uff09<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"sub-options-box\" id=\"sub-mv-box\">\n                            <label class=\"sub-option-item\" onmouseenter=\"syncText('mv-documentary'); event.stopPropagation();\">\n                                <input type=\"radio\" name=\"mv_style\" value=\"\ud83c\udf32 \u6e29\u6696\u7eaa\u5b9e\u98ce\u683c\" checked onchange=\"calculatePrice()\"> \ud83c\udf32 \u6e29\u6696\u7eaa\u5b9e\u98ce\n                            <\/label>\n                            <label class=\"sub-option-item\" onmouseenter=\"syncText('mv-fashion'); event.stopPropagation();\">\n                                <input type=\"radio\" name=\"mv_style\" value=\"\ud83c\udfac \u9ad8\u7ea7\u65f6\u5c1a\u98ce\u683c\" onchange=\"calculatePrice()\"> \ud83c\udfac \u9ad8\u7ea7\u65f6\u5c1a\u98ce\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('multi')\" onclick=\"toggleRowCard(event, 'opt-multi', 'sub-multi-box')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-multi\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); handleMainCheckboxToggle(this, 'sub-multi-box')\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u60f3\u540c\u65f6\u62cd\u5230\u65e9\u4e0a\u51c6\u5907\u7684\u6211\u4eec\uff0c\u548c\u4eea\u5f0f\u53f0\u4e0b\u7236\u6bcd\u4eb2\u53cb\uff08\u53cc\u673a\u4f4d\uff09<\/div>\n                                <div class=\"scenario-hint\">\u81ea\u9009\u5347\u7ea7\uff1a\u53cc\u673a\u4f4d\uff08\u5305\u542b3-5\u5206\u949fMV\u4e0e\u5168\u7a0b\u7247\uff0c\u8d60\u9001\u4e13\u4e1a\u5f71\u89c6\u706f\u5149\uff09<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"sub-options-box\" id=\"sub-multi-box\">\n                            <label class=\"sub-option-item\" onmouseenter=\"syncText('multi-emotion'); event.stopPropagation();\">\n                                <input type=\"radio\" name=\"multi_focus\" value=\"\u2764\ufe0f \u4fa7\u91cd\u4eb2\u53cb\u6293\u62cd\" checked onchange=\"calculatePrice()\"> \u2764\ufe0f \u4fa7\u91cd\u6293\u62cd\u4eb2\u53cb\u7eaa\u5b9e\n                            <\/label>\n                            <label class=\"sub-option-item\" onmouseenter=\"syncText('multi-portrait'); event.stopPropagation();\">\n                                <input type=\"radio\" name=\"multi_focus\" value=\"\ud83d\udc51 \u4fa7\u91cd\u552f\u7f8e\u65b0\u4eba\" onchange=\"calculatePrice()\"> \ud83d\udc51 \u4fa7\u91cd\u552f\u7f8e\u65b0\u4eba\u4e3b\u7ebf\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('drone')\" onclick=\"toggleRowCard(event, 'opt-drone', '')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-drone\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); calculatePrice();\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u51c6\u5907\u4e86\u6237\u5916\u8349\u576a\/\u5927\u6c14\u8f66\u961f\uff0c\u60f3\u8981\u9707\u64bc\u7684\u201c\u4e0a\u5e1d\u89c6\u89d2\u201d<\/div>\n                                <div class=\"scenario-hint\">\u81ea\u9009\u5347\u7ea7\uff1a\u4e13\u4e1a\u822a\u62cd\u521b\u4f5c +\u00a5400<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('sde')\" onclick=\"toggleRowCard(event, 'opt-sde', '')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-sde\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); calculatePrice();\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u60f3\u5728\u5f53\u5929\u3010\u665a\u5bb4\u73b0\u573a\u3011\u7acb\u523b\u64ad\u653e\u63a5\u4eb2\u7684\u7535\u5f71\u611f\u5feb\u526a<\/div>\n                                <div class=\"scenario-hint\">\u81ea\u9009\u5347\u7ea7\uff1a\u73b0\u573a\u9707\u64bc\u9996\u6620 +\u00a51,200 (\u5efa\u8bae\u914d\u5408\u53cc\u673a\u4f4d)<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" id=\"card-vlog\" onmouseenter=\"syncText('vlog')\" onclick=\"toggleRowCard(event, 'opt-vlog', '')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-vlog\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); calculatePrice();\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u60f3\u5728\u5a5a\u793c\u3010\u5f53\u65e5\u6216\u6b21\u65e5\u3011\u62ff\u523030s\u7279\u5feb\u670b\u53cb\u5708\u9884\u544a\u77ed\u7247<\/div>\n                                <div class=\"scenario-hint\" id=\"hint-vlog\">\u81ea\u9009\u5347\u7ea7\uff1a\u7f51\u7ea2\u8f7b\u91cf\u5feb\u526a \u2500\u2500 +\u00a5180\uff08\u53cc\u673a\u4f4dC\u5957\u9910\u5df2\u9ed8\u8ba4\u514d\u8d39\u8d60\u9001\uff09<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"scenario-label\" onmouseenter=\"syncText('fast')\" onclick=\"toggleRowCard(event, 'opt-fast', '')\">\n                        <div class=\"label-top-flex\">\n                            <input type=\"checkbox\" id=\"opt-fast\" class=\"custom-checkbox\" onclick=\"event.stopPropagation(); calculatePrice();\">\n                            <div class=\"scenario-content\">\n                                <div class=\"scenario-title\">\u6211\u662f\u8d85\u7ea7\u6025\u6027\u5b50\uff0c\u7ed3\u5a5a\u5f53\u5468\u30101\u5468\u5185\u3011\u5c31\u60f3\u62ff\u5230\u5168\u5957\u6210\u7247<\/div>\n                                <div class=\"scenario-hint\">\u81ea\u9009\u5347\u7ea7\uff1a+\u00a5300 (\u6ce8\uff1aA\u5957\u9910\u5df2\u81ea\u5e261\u5468\u5185\u4ea4\u4ed8)<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"story-footer\">\n                <div class=\"price-block\">\n                    <div class=\"footer-meta-title\">\u5f53\u524d\u5b9a\u5236\u9884\u4f30\u603b\u4ef7<\/div>\n                    <div class=\"price-tag\">\u00a5 <span id=\"price-display\">1,000<\/span><\/div>\n                <\/div>\n                <button class=\"book-btn\" onclick=\"submitSelection()\">\u9501\u5b9a\u8fd9\u4e2a\u77ac\u95f4<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"detail-info-panel\">\n        <div class=\"detail-title\" id=\"detail-title-target\">\u670d\u52a1\u6807\u51c6\u8be6\u60c5 \/ DETAILS<\/div>\n        <div class=\"detail-content\" id=\"detail-content-target\">\n            \u3010\u9ad8\u6e05\u5168\u7a0b\u7eaa\u5f55\u7247\u3011\u91c7\u7528\u5355\u673a\u4f4d\u591a\u89d2\u5ea6\u5168\u6d41\u7a0b\u7eaa\u5b9e\u62cd\u6444\u3002\u5b8c\u6574\u4fdd\u7559\u6838\u5fc3\u4eea\u5f0f\u5185\u5bb9\u3002\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    const descriptions = {\n        base: \"\u3010\u9ad8\u6e05\u5168\u7a0b\u7eaa\u5f55\u7247\u6807\u51c6\u3011\u91c7\u7528\u5355\u673a\u4f4d\u591a\u89d2\u5ea6\u5168\u6d41\u7a0b\u7eaa\u5b9e\u62cd\u6444\u3002\u5b8c\u6574\u4fdd\u7559\u6838\u5fc3\u4eea\u5f0f\uff0c\u4ee5\u65f6\u95f4\u7ebf\u4e3a\u8f74\uff0c\u8fd8\u539f\u73b0\u573a\u771f\u5b9e\u58f0\u97f3\u4e0e\u7eaf\u7cb9\u7684\u60c5\u611f\u6c1b\u56f4\u3002\",\n        mv: \"\u3010\u7535\u5f71\u611f\u7cbe\u526aMV\u6807\u51c6\u3011\u5355\u673a\u4f4d\u7248\u672c\u63d0\u4f9b3\u5206\u949f\u5de6\u53f3\u7cbe\u526a\uff1b\u53cc\u673a\u4f4d\u7248\u672c\u5219\u5347\u7ea7\u4e3a3-5\u5206\u949f\u6df1\u5ea6\u53d9\u4e8b\uff0c\u7531\u6444\u5f71\u5e08\u7cbe\u6311\u9009\u5168\u5929\u6700\u5177\u60c5\u7eea\u611f\u67d3\u529b\u7684\u9ec4\u91d1\u955c\u5934\uff0c\u6253\u9020\u7535\u5f71\u8d28\u611f\u3002\",\n        'mv-documentary': \"\u3010\ud83c\udf32 \u6e29\u6696\u7eaa\u5b9e\u98ceMV\u3011\u8272\u8c03\u6e29\u6696\u67d4\u548c\uff0c\u4fdd\u7559\u90e8\u5206\u73b0\u573a\u73af\u5883\u97f3\uff08\u5982\u8a93\u8a00\u54fd\u54bd\u3001\u4eb2\u4eba\u7b11\u58f0\uff09\uff0c\u50cf\u4e00\u90e8\u5145\u6ee1\u70df\u706b\u6c14\u7684\u7eaa\u5f55\u7247\u3002\",\n        'mv-fashion': \"\u3010\ud83c\udfac \u9ad8\u7ea7\u65f6\u5c1a\u98ceMV\u3011\u8282\u594f\u611f\u5f3a\uff0c\u5f3a\u8c03\u5149\u5f71\u9ad8\u7ea7\u611f\u4e0e\u7535\u5f71\u8272\u8c03\u3002\u914d\u4e50\u524d\u536b\u5927\u80c6\uff0c\u9002\u5408\u8ffd\u6c42\u89c6\u89c9\u51b2\u51fb\u529b\u4e0e\u5927\u7247\u8d28\u611f\u7684\u65b0\u4eba\u3002\",\n        multi: \"\u3010\u53cc\u673a\u4f4d\u5bfc\u6f14\u7ea7\u6807\u51c6\u3011\u73b0\u573a\u914d\u5907\u4e24\u540d\u6444\u50cf\u5e08\uff0c\u5168\u65b9\u4f4d\u591a\u89c6\u89d2\u8bb0\u5f55\u821e\u53f0\u5ba3\u8a93\u53ca\u53f0\u4e0b\u4eb2\u53cb\u4e0d\u820d\u843d\u6cea\u7684\u52a8\u4eba\u77ac\u95f4\u3002\u989d\u5916\u514d\u8d39\u8d60\u9001\u4e13\u4e1a\u5f71\u89c6\u706f\u5149\u5e03\u9635\u3002\",\n        'multi-emotion': \"\u3010\u2764\ufe0f \u4fa7\u91cd\u6293\u62cd\u4eb2\u53cb\u7eaa\u5b9e\u3011\u6e38\u673a\u4f4d\u4e13\u95e8\u201c\u57cb\u4f0f\u201d\u5728\u5bbe\u5ba2\u4e2d\uff0c\u6293\u62cd\u957f\u8f88\u7236\u6bcd\u6b23\u6170\u4e0d\u820d\u7684\u773c\u795e\u4e0e\u5bbe\u5ba2\u88ab\u611f\u52a8\u7684\u6838\u5fc3\u9ad8\u5149\u7ec6\u8282\u3002\",\n        'multi-portrait': \"\u3010\ud83d\udc51 \u4fa7\u91cd\u552f\u7f8e\u65b0\u4eba\u4e3b\u7ebf\u3011\u53cc\u955c\u5934\u6df1\u5ea6\u805a\u7126\u65b0\u4eba\uff0c\u6355\u6349\u65b0\u5a18\u63d0\u88d9\u3001\u5c40\u90e8\u7279\u5199\u3001\u773c\u795e\u7279\u5199\u3001\u5934\u7eb1\u98d8\u52a8\u7684\u77ac\u95f4\uff0c\u6781\u81f4\u552f\u7f8e\u6d6a\u6f2b\u3002\",\n        drone: \"\u30104K\u822a\u62cd\u521b\u4f5c\u6807\u51c6\u3011\u9009\u7528\u4e13\u4e1a4K\u65e0\u4eba\u673a\u8fdb\u884c\u7a7a\u57df\u521b\u4f5c\u3002\u5b8c\u7f8e\u6355\u6349\u63a5\u4eb2\u8f66\u961f\u957f\u9f99\u3001\u6237\u5916\u8349\u576a\u5a5a\u793c\u5b8f\u5927\u58ee\u4e3d\u7684\u5168\u666f\u5927\u89c6\u91ce\u3002\",\n        sde: \"\u3010\u26a1 \u5f53\u5929\u665a\u5bb4\u5feb\u526a (SDE)\u3011\u6781\u9650\u73b0\u573a\u521b\u4f5c\uff01\u526a\u8f91\u5e08\u9a7b\u5b88\u5a5a\u793c\u73b0\u573a\uff0c\u5c06\u4e0a\u5348\u63a5\u4eb2\u3001\u5835\u95e8\u7684\u9ad8\u5149\u753b\u9762\u5728\u4e0b\u53482\u5c0f\u65f6\u5185\u73b0\u573a\u5236\u4f5c\uff0c\u5f53\u665a\u9996\u6620\u3002\",\n        fast: \"\u3010\u23f1\ufe0f \u4e00\u5468\u5185\u5168\u7247\u6781\u901f\u4ea4\u4ed8\u3011\u8fdb\u5165\u72ec\u7acb\u52a0\u6025\u526a\u8f91\u4e13\u5c5e\u7eff\u8272\u901a\u9053\u3002\u5305\u542b\u957f\u7248\u5168\u7a0b\u7eaa\u5f55\u7247\u3001\u7cbe\u526aMV\u5728\u5185\u7684\u5168\u90e8\u5927\u7247\u5c06\u57287\u4e2a\u5de5\u4f5c\u65e5\u5185\u5b8c\u6210\u4ea4\u4ed8\u3002\",\n        vlog: \"\u3010\ud83c\udfb5 30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a\u3011\u77ed\u89c6\u9891\u7279\u5feb\u6d41\u3002\u91c7\u7528\u5361\u70b9\u8282\u594f\u548c\u7f51\u7ea2\u97f3\u4e50\uff0c24\u5c0f\u65f6\u5185\u6781\u901f\u51fa\u7247\u3002\u7ed3\u5a5a\u5f53\u5929\u4f18\u5148\u585e\u8fdb\u60a8\u7684\u624b\u673a\uff0c\u4e13\u4e3a\u670b\u53cb\u5708\u9738\u5c4f\u5b9a\u5236\u3002\"\n    };\n\n    const imgMapping = {\n        base: 'view-base', mv: 'view-mv', 'mv-documentary': 'view-mv', 'mv-fashion': 'view-mv',\n        multi: 'view-multi', 'multi-emotion': 'view-multi', 'multi-portrait': 'view-multi',\n        drone: 'view-drone', sde: 'view-sde', fast: 'view-fast', vlog: 'view-vlog'\n    };\n    const tagMapping = {\n        base: '\u753b\u9762\u9884\u89c8\uff1a\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5b9e', mv: '\u753b\u9762\u9884\u89c8\uff1a\u7535\u5f71\u611f\u7cbe\u526aMV', 'mv-documentary': '\u98ce\u683c\u9884\u89c8\uff1a\u6e29\u6696\u7eaa\u5b9e\u98ce', 'mv-fashion': '\u98ce\u683c\u9884\u89c8\uff1a\u9ad8\u7ea7\u65f6\u5c1a\u98ce',\n        multi: '\u753b\u9762\u9884\u89c8\uff1a\u53cc\u673a\u4f4d\u591a\u89c6\u89d2\u6355\u6349', 'multi-emotion': '\u5206\u5de5\u9884\u89c8\uff1a\u4fa7\u91cd\u4eb2\u53cb\u6293\u62cd', 'multi-portrait': '\u5206\u5de5\u9884\u89c8\uff1a\u4fa7\u91cd\u552f\u7f8e\u65b0\u4eba',\n        drone: '\u753b\u9762\u9884\u89c8\uff1a\u65e0\u4eba\u673a\u822a\u62cd\u5927\u573a\u666f', sde: '\u73b0\u573a\u9707\u64bc\uff1a\u5f53\u5929\u665a\u5bb4\u5feb\u526a\u9996\u6620', fast: '\u6548\u7387\u7279\u6743\uff1a\u5168\u5957\u6210\u72471\u5468\u5185\u4ea4\u4ed8', vlog: '\u70ab\u8000\u7279\u6743\uff1a30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a'\n    };\n\n    function syncText(key) {\n        document.querySelectorAll('.story-visual-stage img').forEach(img => img.classList.remove('active'));\n        const targetImgId = imgMapping[key];\n        if (document.getElementById(targetImgId)) {\n            document.getElementById(targetImgId).classList.add('active');\n        }\n        document.getElementById('view-tag').innerText = tagMapping[key];\n        const textTarget = document.getElementById('detail-content-target');\n        textTarget.style.opacity = 0;\n        setTimeout(() => { textTarget.innerText = descriptions[key]; textTarget.style.opacity = 1; }, 120);\n    }\n\n    function toggleRowCard(event, checkboxId, subBoxId) {\n        const checkbox = document.getElementById(checkboxId);\n        if (checkbox.disabled) return;\n        if (event.target.tagName.toLowerCase() === 'input') return;\n        checkbox.checked = !checkbox.checked;\n        const subBox = document.getElementById(subBoxId);\n        if (subBoxId) { if (checkbox.checked) { subBox.style.display = 'flex'; } else { subBox.style.display = 'none'; } }\n        handleReverseVlogLogic(checkboxId, checkbox.checked);\n        calculatePrice();\n    }\n\n    function handleMainCheckboxToggle(checkboxEl, subBoxId) {\n        const subBox = document.getElementById(subBoxId);\n        if (checkboxEl.checked) { subBox.style.display = 'flex'; } else { subBox.style.display = 'none'; }\n        handleReverseVlogLogic(checkboxEl.id, checkboxEl.checked);\n        calculatePrice();\n    }\n\n    function handleReverseVlogLogic(checkboxId, isChecked) {\n        if (checkboxId === 'opt-multi' && !isChecked) {\n             document.getElementById('opt-vlog').checked = false;\n        }\n    }\n\n    function calculatePrice() {\n        const hasMV = document.getElementById('opt-mv').checked;\n        const hasMulti = document.getElementById('opt-multi').checked;\n        const hasDrone = document.getElementById('opt-drone').checked;\n        const hasSDE = document.getElementById('opt-sde').checked;\n        const hasFast = document.getElementById('opt-fast').checked;\n        let optVlog = document.getElementById('opt-vlog');\n\n        let totalPrice = 1000;\n        let billData = [];        \n        let deliverableFilmsData = []; \n        let textDays = \"30\u4e2a\u5de5\u4f5c\u65e5\";   \n\n        if (hasFast) { textDays = \"7\u4e2a\u5de5\u4f5c\u65e5\"; }\n\n        if (hasMV && hasMulti) {\n            totalPrice = 3488;\n            billData.push({name: \"\u5b8c\u7f8e\u53cc\u673a C\u65b9\u6848\", price: \"\u00a53,488\"});\n            billData.push({name: \" \u2514 \u8d60\u9001: \u4e13\u4e1a\u5f71\u89c6\u706f\u5149\", price: \"\u5df2\u542b\"});\n            const multiFocus = document.querySelector('input[name=\"multi_focus\"]:checked').value;\n            const mvStyle = document.querySelector('input[name=\"mv_style\"]:checked').value;\n            billData.push({name: \" \u2514 \u62cd\u6444\u504f\u597d: \" + multiFocus, price: \"\u5df2\u542b\"});\n            billData.push({name: \" \u2514 \u526a\u8f91\u504f\u597d: \" + mvStyle, price: \"\u5df2\u542b\"});\n            \n            deliverableFilmsData.push({title: \"\ud83c\udfac 4K\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5f55\u7247 (\u957f\u7248)\", time: textDays, isToday: false});\n            deliverableFilmsData.push({title: \"\ud83c\udf9e\ufe0f 3-5\u5206\u949f\u7535\u5f71\u611f\u7cbe\u526aMV\", time: textDays, isToday: false});\n            deliverableFilmsData.push({title: \"\ud83d\udca1 \u4e13\u4e1a\u5f71\u89c6\u706f\u5149\u5e03\u9635\", time: \"\u514d\u8d39\u8d60\u9001\", isToday: false});\n            \n            optVlog.checked = true;\n            optVlog.disabled = true;\n            document.getElementById('hint-vlog').innerText = \"\u5957\u9910\u6743\u76ca\uff1a\u53cc\u673aC\u65b9\u6848\u5df2\u514d\u8d39\u5305\u542b\u6b64\u9879\";\n            billData.push({name: \" \u2514 \u8d60\u9001: 30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a\u7247\", price: \"\u5df2\u542b\"});\n            deliverableFilmsData.push({title: \"\ud83c\udfb5 30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a\u7247\", time: \"\u5f53\u65e5\u4ea4\u4ed8\", isToday: true});\n\n            if (hasFast) { totalPrice += 300; }\n        } else {\n            optVlog.disabled = false;\n            if (hasMV && !hasMulti) {\n                totalPrice = 1880;\n                billData.push({name: \"\u7ecf\u5178\u53cc\u5168 B\u65b9\u6848\", price: \"\u00a51,880\"});\n                const mvStyle = document.querySelector('input[name=\"mv_style\"]:checked').value;\n                billData.push({name: \" \u2514 \u526a\u8f91\u504f\u597d: \" + mvStyle, price: \"\u5df2\u542b\"});\n                deliverableFilmsData.push({title: \"\ud83c\udfac 4K\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5f55\u7247 (\u957f\u7248)\", time: textDays, isToday: false});\n                deliverableFilmsData.push({title: \"\ud83c\udf9e\ufe0f 3\u5206\u949f\u7535\u5f71\u611f\u7cbe\u526aMV\", time: textDays, isToday: false});\n                if (hasFast) { totalPrice += 300; }\n            } else if (!hasMV && hasMulti) {\n                totalPrice = 1000 + 1500;\n                billData.push({name: \"\u6027\u4ef7\u6bd4\u5355\u673a A\u65b9\u6848\", price: \"\u00a51,000\"});\n                billData.push({name: \"\u8ffd\u52a0\u9ad8\u7ea7\u53cc\u673a\u4f4d\u673a\u5e08\", price: \"+\u00a51,500\"});\n                billData.push({name: \" \u2514 \u8d60\u9001: \u4e13\u4e1a\u5f71\u89c6\u706f\u5149\", price: \"\u5df2\u542b\"});\n                const multiFocus = document.querySelector('input[name=\"multi_focus\"]:checked').value;\n                billData.push({name: \" \u2514 \u62cd\u6444\u504f\u597d: \" + multiFocus, price: \"\u5df2\u542b\"});\n                deliverableFilmsData.push({title: \"\ud83c\udfac 4K\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5f55\u7247 (\u957f\u7248)\", time: textDays, isToday: false});\n                deliverableFilmsData.push({title: \"\ud83d\udca1 \u4e13\u4e1a\u5f71\u89c6\u706f\u5149\u5e03\u9635\", time: \"\u514d\u8d39\u8d60\u9001\", isToday: false});\n            } else {\n                totalPrice = 1000;\n                billData.push({name: \"\u6027\u4ef7\u6bd4\u5355\u673a A\u65b9\u6848\", price: \"\u00a51,000\"});\n                deliverableFilmsData.push({title: \"\ud83c\udfac 4K\u5168\u6d41\u7a0b\u9ad8\u6e05\u7eaa\u5f55\u7247 (\u957f\u7248)\", time: \"7\u4e2a\u5de5\u4f5c\u65e5\", isToday: false});\n            }\n\n            if (optVlog.checked) {\n                totalPrice += 180;\n                billData.push({name: \"\u52a0\u88c5\uff1a30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a\u7247\", price: \"+\u00a5180\"});\n                deliverableFilmsData.push({title: \"\ud83c\udfb5 30s\u670b\u53cb\u5708\u7279\u5feb\u9884\u544a\u7247\", time: \"\u5f53\u65e5\u4ea4\u4ed8\", isToday: true});\n            }\n        }\n\n        if (hasDrone) { totalPrice += 400; billData.push({name: \"\u52a0\u88c5\uff1a4K\u65e0\u4eba\u673a\u7a7a\u4e2d\u822a\u62cd\", price: \"+\u00a5400\"}); deliverableFilmsData.push({title: \"\ud83d\udef8 \u822a\u62cd\u7a7a\u57df\u7d20\u6750\u5b8c\u6574\u7559\u5b58\", time: \"\u968f\u5168\u7247\u4e00\u5e76\u4ea4\u4ed8\", isToday: false}); }\n        if (hasSDE) { totalPrice += 1200; billData.push({name: \"\u52a0\u88c5\uff1a\u26a1\u5f53\u5929\u665a\u5bb4\u7535\u5f71\u611f\u5feb\u526a(SDE)\", price: \"+\u00a51,200\"}); deliverableFilmsData.push({title: \"\u26a1 \u665a\u5bb4\u9996\u6620\u63a5\u4eb2\u5feb\u526a\u7247 (SDE)\", time: \"\u5f53\u65e5\u665a\u5bb4\u9996\u6620\", isToday: true}); }\n        if (hasFast && !(hasMV && hasMulti)) { if (hasMV) { billData.push({name: \"\u670d\u52a1\uff1a\u5168\u5957\u6210\u72471\u5468\u5185\u52a0\u6025\u4ea4\u4ed8\", price: \"+\u00a5300\"}); } else { billData.push({name: \"\u670d\u52a1\uff1a\u5168\u72471\u5468\u5185\u4ea4\u4ed8\", price: \"\u514d\u8d39\u81ea\u5e26\"}); } }\n\n        document.getElementById('price-display').innerText = totalPrice.toLocaleString();\n        const summaryContainer = document.getElementById('manifest-summary-target');\n        summaryContainer.innerHTML = \"\"; \n        billData.forEach(item => { const rowDiv = document.createElement('div'); rowDiv.className = 'bill-row'; rowDiv.innerHTML = `<span class=\"bill-name\">${item.name}<\/span><span class=\"bill-price\">${item.price}<\/span>`; summaryContainer.appendChild(rowDiv); });\n        const tagsContainer = document.getElementById('deliverables-tags-target');\n        tagsContainer.innerHTML = \"\"; \n        deliverableFilmsData.forEach(film => { const tagSpan = document.createElement('span'); tagSpan.className = 'film-tag'; const suffixClass = film.isToday ? \"tag-duration-suffix today-highlight\" : \"tag-duration-suffix\"; tagSpan.innerHTML = `${film.title} <span class=\"${suffixClass}\">(${film.time})<\/span>`; tagsContainer.appendChild(tagSpan); });\n    }\n\n    function submitSelection() { alert(\"\u2728 \u65b9\u6848\u5b9a\u5236\u6210\u529f\uff01\\n\u8bf7\u76f4\u63a5\u622a\u56fe\u5f53\u524d\u9875\u9762\u53d1\u9001\u7ed9\u5ba2\u670d\u786e\u8ba4\u6863\u671f\u3002\"); }\n    window.onload = function() { calculatePrice(); };\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u5a5a\u793cMV\u8272\u8c03\u53c2\u8003<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        gold: '#D4AF37',\n                        dark: '#2D2D2D'\n                    },\n                    fontFamily: {\n                        serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'],\n                        sans: ['Inter', 'system-ui', 'sans-serif']\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style type=\"text\/tailwindcss\">\n        @layer utilities {\n            .style-card {\n                @apply bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;\n            }\n            .style-card-active {\n                @apply border-gold shadow-lg;\n            }\n            .image-grid-item {\n                @apply aspect-[4\/3] overflow-hidden rounded-md cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-md;\n            }\n            .section-divider {\n                @apply w-12 h-0.5 bg-gold mx-auto my-3;\n            }\n        }\n    <\/style>\n\n\n    <div class=\"container mx-auto px-4 py-10 max-w-6xl\">\n        <!-- \u9875\u9762\u6807\u9898 -->\n        <div class=\"text-center mb-12\">\n            <h1 class=\"text-[clamp(1.5rem,3vw,2.2rem)] font-serif font-bold mb-2\">\u5a5a\u793cMV\u8272\u8c03\u53c2\u8003<\/h1>\n            <div class=\"section-divider\"><\/div>\n            <p class=\"text-gray-600 max-w-2xl mx-auto text-base\">\u9009\u62e9\u60a8\u559c\u7231\u7684\u8272\u8c03\u98ce\u683c\uff0c\u6211\u4eec\u5c06\u4e3a\u60a8\u6253\u9020\u4e13\u5c5e\u7684\u5a5a\u793c\u7535\u5f71<\/p>\n        <\/div>\n\n        <!-- \u98ce\u683c\u9009\u62e9\u533a\u57df -->\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-12\">\n            <!-- \u98ce\u683c1: \u7535\u5f71\u8d28\u611f -->\n            <div class=\"style-card style-card-active\" data-style=\"cinematic\">\n                <div class=\"p-8 text-center\">\n                    <h3 class=\"text-lg font-serif font-bold mb-2\">\u7535\u5f71\u8d28\u611f<\/h3>\n                    <p class=\"text-gray-600 text-xs\">\u6d53\u90c1\u8272\u5f69 \u00b7 \u5149\u5f71\u5c42\u6b21 \u00b7 \u9ad8\u7ea7\u8d28\u611f<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- \u98ce\u683c2: \u6e05\u65b0\u81ea\u7136 -->\n            <div class=\"style-card\" data-style=\"fresh\">\n                <div class=\"p-8 text-center\">\n                    <h3 class=\"text-lg font-serif font-bold mb-2\">\u6e05\u65b0\u81ea\u7136<\/h3>\n                    <p class=\"text-gray-600 text-xs\">\u660e\u4eae\u901a\u900f \u00b7 \u67d4\u548c\u8272\u8c03 \u00b7 \u771f\u5b9e\u81ea\u7136<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- \u98ce\u683c3: \u590d\u53e4\u80f6\u7247 -->\n            <div class=\"style-card\" data-style=\"vintage\">\n                <div class=\"p-8 text-center\">\n                    <h3 class=\"text-lg font-serif font-bold mb-2\">\u590d\u53e4\u80f6\u7247<\/h3>\n                    <p class=\"text-gray-600 text-xs\">\u6000\u65e7\u9897\u7c92 \u00b7 \u6696\u8c03\u8272\u5f69 \u00b7 \u7ecf\u5178\u6c38\u6052<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- \u98ce\u683c4: \u6d6a\u6f2b\u68a6\u5e7b -->\n            <div class=\"style-card\" data-style=\"romantic\">\n                <div class=\"p-8 text-center\">\n                    <h3 class=\"text-lg font-serif font-bold mb-2\">\u6d6a\u6f2b\u68a6\u5e7b<\/h3>\n                    <p class=\"text-gray-600 text-xs\">\u67d4\u5149\u6ee4\u955c \u00b7 \u7c89\u8272\u8c03 \u00b7 \u552f\u7f8e\u6c1b\u56f4<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- \u56fe\u7247\u5c55\u793a\u533a\u57df -->\n        <div id=\"style-gallery\">\n            <!-- \u7535\u5f71\u8d28\u611f\u98ce\u683c\u56fe\u7247 -->\n            <div class=\"style-gallery-item\" id=\"cinematic-gallery\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-xl font-serif font-bold mb-2\">\u7535\u5f71\u8d28\u611f\u98ce\u683c<\/h2>\n                    <div class=\"section-divider\"><\/div>\n                    <p class=\"text-gray-600 text-sm\">\u91c7\u7528\u7535\u5f71\u7ea7\u8c03\u8272\uff0c\u5f3a\u8c03\u5149\u5f71\u5bf9\u6bd4\u548c\u8272\u5f69\u5c42\u6b21\uff0c\u8425\u9020\u51fa\u5927\u7247\u822c\u7684\u89c6\u89c9\u6548\u679c<\/p>\n                <\/div>\n                <div class=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding1\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c1\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding2\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c2\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding3\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c3\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding4\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c4\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding5\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c5\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/wedding6\/800\/600\" alt=\"\u7535\u5f71\u8d28\u611f\u5a5a\u793c6\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- \u6e05\u65b0\u81ea\u7136\u98ce\u683c\u56fe\u7247 -->\n            <div class=\"style-gallery-item hidden\" id=\"fresh-gallery\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-xl font-serif font-bold mb-2\">\u6e05\u65b0\u81ea\u7136\u98ce\u683c<\/h2>\n                    <div class=\"section-divider\"><\/div>\n                    <p class=\"text-gray-600 text-sm\">\u660e\u4eae\u901a\u900f\u7684\u8272\u5f69\uff0c\u8fd8\u539f\u771f\u5b9e\u81ea\u7136\u7684\u573a\u666f\uff0c\u8bb0\u5f55\u6700\u7eaf\u7cb9\u7684\u5e78\u798f\u77ac\u95f4<\/p>\n                <\/div>\n                <div class=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh1\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c1\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh2\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c2\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh3\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c3\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh4\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c4\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh5\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c5\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/fresh6\/800\/600\" alt=\"\u6e05\u65b0\u81ea\u7136\u5a5a\u793c6\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- \u590d\u53e4\u80f6\u7247\u98ce\u683c\u56fe\u7247 -->\n            <div class=\"style-gallery-item hidden\" id=\"vintage-gallery\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-xl font-serif font-bold mb-2\">\u590d\u53e4\u80f6\u7247\u98ce\u683c<\/h2>\n                    <div class=\"section-divider\"><\/div>\n                    <p class=\"text-gray-600 text-sm\">\u5e26\u6709\u80f6\u7247\u9897\u7c92\u8d28\u611f\u7684\u6696\u8272\u8c03\uff0c\u8425\u9020\u51fa\u6000\u65e7\u6d6a\u6f2b\u7684\u6c1b\u56f4\uff0c\u7ecf\u5178\u6c38\u4e0d\u8fc7\u65f6<\/p>\n                <\/div>\n                <div class=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage1\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c1\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage2\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c2\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage3\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c3\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage4\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c4\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage5\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c5\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/vintage6\/800\/600\" alt=\"\u590d\u53e4\u80f6\u7247\u5a5a\u793c6\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- \u6d6a\u6f2b\u68a6\u5e7b\u98ce\u683c\u56fe\u7247 -->\n            <div class=\"style-gallery-item hidden\" id=\"romantic-gallery\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-xl font-serif font-bold mb-2\">\u6d6a\u6f2b\u68a6\u5e7b\u98ce\u683c<\/h2>\n                    <div class=\"section-divider\"><\/div>\n                    <p class=\"text-gray-600 text-sm\">\u67d4\u548c\u7684\u7c89\u8272\u8c03\u4e0e\u67d4\u5149\u6548\u679c\uff0c\u6253\u9020\u51fa\u7ae5\u8bdd\u822c\u7684\u6d6a\u6f2b\u6c1b\u56f4\uff0c\u5982\u68a6\u5982\u5e7b<\/p>\n                <\/div>\n                <div class=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic1\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c1\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic2\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c2\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic3\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c3\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic4\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c4\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic5\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c5\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <div class=\"image-grid-item\">\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/romantic6\/800\/600\" alt=\"\u6d6a\u6f2b\u68a6\u5e7b\u5a5a\u793c6\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u98ce\u683c\u5207\u6362\u529f\u80fd\n        document.addEventListener('DOMContentLoaded', function() {\n            const styleCards = document.querySelectorAll('.style-card');\n            const galleryItems = document.querySelectorAll('.style-gallery-item');\n\n            styleCards.forEach(card => {\n                card.addEventListener('click', function() {\n                    \/\/ \u79fb\u9664\u6240\u6709\u5361\u7247\u7684\u6fc0\u6d3b\u72b6\u6001\n                    styleCards.forEach(c => c.classList.remove('style-card-active'));\n                    \/\/ \u6dfb\u52a0\u5f53\u524d\u5361\u7247\u7684\u6fc0\u6d3b\u72b6\u6001\n                    this.classList.add('style-card-active');\n\n                    \/\/ \u83b7\u53d6\u5bf9\u5e94\u7684\u98ce\u683cID\n                    const styleId = this.getAttribute('data-style');\n                    \n                    \/\/ \u9690\u85cf\u6240\u6709\u56fe\u5e93\n                    galleryItems.forEach(item => item.classList.add('hidden'));\n                    \/\/ \u663e\u793a\u5bf9\u5e94\u98ce\u683c\u7684\u56fe\u5e93\n                    document.getElementById(`${styleId}-gallery`).classList.remove('hidden');\n                });\n            });\n        });\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u5b9a\u5236\u60a8\u7684\u5a5a\u793c\u65b9\u6848 \u70b9\u51fb\u4e0b\u65b9\u9009\u9879\u5361\u7247\u5373\u53ef\u76f4\u63a5\u6253\u52fe\u9009\u914d &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-qita"],"_links":{"self":[{"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=368"}],"version-history":[{"count":35,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions\/814"}],"wp:attachment":[{"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jiyiyingshi.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}