\u5fc3\u8c10XinSync<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF7A9C', \/\/ \u4e3b\u7c89\u8272\n secondary: '#FFE6EC', \/\/ \u6d45\u7c89\u8272\n neutral: '#333333', \/\/ \u6df1\u7070\u8272\n 'neutral-light': '#F5F5F5', \/\/ \u6d45\u7070\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .app-shadow {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);\n }\n .card-hover {\n transition: transform 0.2s ease;\n }\n .card-hover:hover {\n transform: translateY(-2px);\n }\n .nav-active {\n color: #FF7A9C;\n }\n .iphone16 {\n width: 393px; \/* iPhone16 \u5bbd\u5ea6 *\/\n height: 852px; \/* iPhone16 \u9ad8\u5ea6 *\/\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n }\n }\n <\/style>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-gray-100 font-sans text-neutral min-h-screen py-8\">\n <div class=\"container mx-auto px-4\">\n <header class=\"text-center mb-8\">\n <div class=\"flex items-center justify-center gap-2 mb-2\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-8 h-8 object-contain\">\n <h1 class=\"text-xl font-bold text-primary\">\u5fc3\u8c10XinSync<\/h1>\n <\/div>\n <p class=\"text-gray-500 text-sm\">\u6807\u51c6APP\u98ce\u683c\u8bbe\u8ba1 \u00b7 \u9002\u914diPhone<\/p>\n <\/header>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:41<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4\">\n <div class=\"flex justify-between items-center\">\n <div>\n <h2 class=\"text-lg font-medium\">\u55e8\uff0cChris \ud83d\udc4b<\/h2>\n <p class=\"text-gray-500 text-sm\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/60\/60\" alt=\"Chris\u5934\u50cf\" class=\"w-10 h-10 rounded-full object-cover border-2 border-primary\">\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"grid grid-cols-2 gap-3\">\n <button class=\"bg-primary text-white py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center\">\n <i class=\"fa fa-pencil-square-o mr-2\"><\/i> \u8bb0\u5f55\u5fc3\u60c5\n <\/button>\n <button class=\"bg-white border border-gray-200 text-neutral py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center\">\n <i class=\"fa fa-comments-o mr-2\"><\/i> \u60c5\u611f\u5bf9\u8bdd\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u4eca\u65e5\u63a8\u8350<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"bg-gradient-to-r from-primary\/10 to-purple-100 rounded-xl p-4\">\n <div class=\"flex items-start gap-3\">\n <div class=\"w-12 h-12 rounded-lg bg-white flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-heart-o text-xl\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm mb-1\">5\u5206\u949f\u60c5\u7eea\u51a5\u60f3<\/h4>\n <p class=\"text-gray-600 text-xs mb-2\">\u7f13\u89e3\u538b\u529b\uff0c\u627e\u56de\u5185\u5fc3\u5e73\u9759<\/p>\n <button class=\"text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u7acb\u5373\u5f00\u59cb\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <h3 class=\"font-semibold mb-3\">\u529f\u80fd\u4e2d\u5fc3<\/h3>\n \n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-line-chart\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u60c5\u611f\u5206\u6790<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u60c5\u611f\u8bfe\u7a0b<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-users\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u5173\u7cfb\u6d4b\u8bc4<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u5fc3\u60c5\u65e5\u5386<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-comments\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u6c9f\u901a\u6280\u5de7<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u66f4\u591a<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u52a8\u6001<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u5168\u90e8<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex gap-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/author1\/50\/50\" alt=\"\u4f5c\u8005\u5934\u50cf\" class=\"w-8 h-8 rounded-full object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u5efa\u7acb\u5065\u5eb7\u7684\u8fb9\u754c\u611f<\/h4>\n <p class=\"text-gray-500 text-xs\">\u60c5\u611f\u7814\u7a76\u6240 \u00b7 2\u5c0f\u65f6\u524d<\/p>\n <\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article\/80\/60\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-16 h-12 rounded-lg object-cover\">\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex gap-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/author2\/50\/50\" alt=\"\u4f5c\u8005\u5934\u50cf\" class=\"w-8 h-8 rounded-full object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u4eb2\u5bc6\u5173\u7cfb\u4e2d\u7684\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-gray-500 text-xs\">\u5fc3\u7406\u4e13\u5bb6\u674e\u6559\u6388 \u00b7 \u6628\u5929<\/p>\n <\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/80\/60\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-16 h-12 rounded-lg object-cover\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:42<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u60c5\u611f\u8d26\u6237<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <div class=\"bg-gradient-to-r from-primary to-pink-400 rounded-2xl p-5 text-white\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <h3 class=\"font-medium\">Chris \u7684\u60c5\u611f\u8d26\u6237<\/h3>\n <p class=\"text-sm opacity-90 mt-1\">\u603b\u4f59\u989d: 1,250 \u60c5\u611f\u503c<\/p>\n <\/div>\n <button class=\"bg-white\/20 backdrop-blur-sm rounded-full w-8 h-8 flex items-center justify-center\">\n <i class=\"fa fa-refresh\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"grid grid-cols-3 gap-2 mb-5\">\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u4eb2\u5bc6\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">680<\/p>\n <\/div>\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u4eb2\u5b50\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">320<\/p>\n <\/div>\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u5bb6\u5ead\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">250<\/p>\n <\/div>\n <\/div>\n \n <button class=\"w-full bg-white text-primary py-2.5 rounded-xl text-sm font-medium\">\n \u67e5\u770b\u8d26\u6237\u660e\u7ec6\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u6700\u8fd1\u4ea4\u6613<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u5168\u90e8<\/span>\n <\/div>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u6bcf\u65e5\u611f\u6069\u7ec3\u4e60<\/h4>\n <p class=\"text-gray-500 text-xs\">\u4eca\u5929 08:30<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-green-600\">+20<\/span>\n <\/div>\n \n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u5b8c\u6210\u60c5\u611f\u6d4b\u8bc4<\/h4>\n <p class=\"text-gray-500 text-xs\">\u6628\u5929 19:45<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-green-600\">+50<\/span>\n <\/div>\n \n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600\">\n <i class=\"fa fa-minus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u60c5\u611f\u54a8\u8be2\u670d\u52a1<\/h4>\n <p class=\"text-gray-500 text-xs\">05-12 15:20<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-red-600\">-100<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u4efb\u52a1<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a\u4efb\u52a1<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-4 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u6df1\u5ea6\u6c9f\u901a\u7ec3\u4e60<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u4e0e\u4f34\u4fa3\u8fdb\u884c30\u5206\u949f\u6df1\u5ea6\u4ea4\u6d41<\/p>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded-full\">+50\u60c5\u611f\u503c<\/span>\n <span class=\"text-xs text-gray-500\">30\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <button class=\"bg-primary\/10 text-primary py-1.5 px-3 rounded-lg text-xs font-medium\">\n \u53bb\u5b8c\u6210\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-4 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u5bb6\u5ead\u76f8\u518c\u6574\u7406<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u6574\u7406\u5e76\u5206\u4eab\u5bb6\u5ead\u7167\u7247\u56de\u5fc6<\/p>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded-full\">+30\u60c5\u611f\u503c<\/span>\n <span class=\"text-xs text-gray-500\">45\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <button class=\"bg-primary\/10 text-primary py-1.5 px-3 rounded-lg text-xs font-medium\">\n \u53bb\u5b8c\u6210\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:45<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u4ee3\u9645\u4f20\u627f<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-plus\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <h3 class=\"font-semibold mb-4\">\u5bb6\u65cf\u5173\u7cfb\u6811<\/h3>\n \n <div class=\"bg-neutral-light rounded-2xl p-5 mb-6\">\n <div class=\"flex flex-col items-center\">\n \n <div class=\"w-full max-w-xs mb-6\">\n \n <div class=\"flex justify-center mb-8 relative\">\n <div class=\"absolute top-8 left-1\/2 -translate-x-1\/2 w-0.5 h-6 bg-gray-300\"><\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary flex items-center justify-center text-white text-xs font-medium z-10\">\n \u7956\u7236\u6bcd\n <\/div>\n <\/div>\n \n \n <div class=\"flex justify-center gap-6 mb-8 relative\">\n <div class=\"absolute top-8 left-1\/2 -translate-x-1\/2 w-[calc(100%-2rem)] h-0.5 bg-gray-300\"><\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary\/80 flex items-center justify-center text-white text-xs font-medium z-10\">\n \u7236\u4eb2\n <\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary\/80 flex items-center justify-center text-white text-xs font-medium z-10\">\n \u6bcd\u4eb2\n <\/div>\n <\/div>\n \n \n <div class=\"flex justify-center gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-primary\/60 flex items-center justify-center text-white text-xs font-medium border-2 border-white\">\n Chris\n <\/div>\n <div class=\"w-12 h-12 rounded-full bg-primary\/60 flex items-center justify-center text-white text-xs font-medium\">\n \u5144\u5f1f\u59d0\u59b9\n <\/div>\n <\/div>\n <\/div>\n \n <button class=\"text-sm text-primary flex items-center\">\n \u67e5\u770b\u5b8c\u6574\u5bb6\u65cf\u6811 <i class=\"fa fa-angle-right ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u5bb6\u65cf\u6545\u4e8b\u4e0e\u4f20\u7edf<\/h3>\n <button class=\"text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u6dfb\u52a0\u6545\u4e8b\n <\/button>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex items-start gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/grandpa\/60\/60\" alt=\"\u7956\u7236\u7167\u7247\" class=\"w-12 h-12 rounded-full object-cover flex-shrink-0\">\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u7956\u7236\u7684\u4eba\u751f\u667a\u6167<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u7531\u7236\u4eb2\u8bb0\u5f55 \u00b7 2023\u5e7410\u6708<\/p>\n <p class=\"text-xs text-gray-600 line-clamp-2\">\u5173\u4e8e\u5982\u4f55\u9762\u5bf9\u4eba\u751f\u632b\u6298\u7684\u5b9d\u8d35\u7ecf\u9a8c\uff0c\u4ee5\u53ca\u5bb6\u65cf\u4ee3\u4ee3\u76f8\u4f20\u7684\u5904\u4e16\u54f2\u5b66…<\/p>\n <button class=\"mt-2 text-xs text-primary\">\u9605\u8bfb\u5168\u6587<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex items-start gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/grandma\/60\/60\" alt=\"\u7956\u6bcd\u7167\u7247\" class=\"w-12 h-12 rounded-full object-cover flex-shrink-0\">\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u7956\u6bcd\u7684\u4f20\u7edf\u98df\u8c31<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u7531\u6bcd\u4eb2\u8bb0\u5f55 \u00b7 2023\u5e748\u6708<\/p>\n <p class=\"text-xs text-gray-600 line-clamp-2\">\u5bb6\u65cf\u4f20\u627f\u4e09\u4ee3\u7684\u79d8\u65b9\uff0c\u5305\u542b\u4e86\u5bf9\u751f\u6d3b\u7684\u70ed\u7231\u548c\u5bf9\u5bb6\u4eba\u7684\u5173\u6000…<\/p>\n <button class=\"mt-2 text-xs text-primary\">\u9605\u8bfb\u5168\u6587<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <h3 class=\"font-semibold mb-4\">\u4ee3\u9645\u6a21\u5f0f\u5206\u6790<\/h3>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-4 mb-4 card-hover\">\n <h4 class=\"font-medium text-sm mb-3\">\u60c5\u611f\u8868\u8fbe\u65b9\u5f0f<\/h4>\n <div class=\"space-y-3\">\n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>\u7956\u7236\u8f88<\/span>\n <span>\u542b\u84c4\u578b (65%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 65%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>\u7236\u6bcd\u8f88<\/span>\n <span>\u5e73\u8861\u578b (42%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 42%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>Chris<\/span>\n <span>\u5f00\u653e\u578b (78%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 78%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <button class=\"w-full bg-primary text-white py-3 rounded-xl text-sm font-medium\">\n \u751f\u6210\u5b8c\u6574\u4ee3\u9645\u5206\u6790\u62a5\u544a\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:50<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"bg-gradient-to-b from-primary\/10 to-white pt-6 pb-4\">\n <div class=\"px-6 flex items-center gap-4\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/100\/100\" alt=\"Chris\u7684\u5934\u50cf\" class=\"w-16 h-16 rounded-full object-cover border-2 border-white shadow-sm\">\n <div>\n <h2 class=\"text-lg font-semibold\">Chris<\/h2>\n <p class=\"text-gray-500 text-sm\">\u60c5\u611f\u8d26\u6237\u4f1a\u5458 \u00b7 128\u5929<\/p>\n <button class=\"mt-2 text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u7f16\u8f91\u8d44\u6599\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mt-6 grid grid-cols-3 gap-2\">\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">42<\/p>\n <p class=\"text-gray-500 text-xs\">\u5fc3\u60c5\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">8<\/p>\n <p class=\"text-gray-500 text-xs\">\u5b8c\u6210\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">4<\/p>\n <p class=\"text-gray-500 text-xs\">\u6210\u5c31\u52cb\u7ae0<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-4\">\n <div class=\"space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u8bb0\u5f55<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u6d4b\u8bc4<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u6536\u85cf<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-piggy-bank\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-history\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-6 space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n <i class=\"fa fa-cog\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u8bbe\u7f6e<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n <i class=\"fa fa-question-circle-o\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u5e2e\u52a9\u4e0e\u53cd\u9988<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-8\">\n <button class=\"w-full flex items-center justify-center gap-2 p-3 bg-red-50 rounded-xl text-red-600 border border-red-100 card-hover\">\n <i class=\"fa fa-sign-out\"><\/i>\n <span class=\"font-medium\">\u9000\u51fa\u767b\u5f55<\/span>\n <\/button>\n <\/div>\n \n <div class=\"mt-8 text-center pb-4\">\n <div class=\"flex items-center justify-center gap-2 mb-2\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-6 h-6 object-contain\">\n <span class=\"text-sm font-medium text-primary\">\u5fc3\u8c10XinSync<\/span>\n <\/div>\n <p class=\"text-xs text-gray-400\">\n v1.0.0<br>\n \u00a9 2023 \u5fc3\u8c10\u79d1\u6280\u6709\u9650\u516c\u53f8\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:30<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u8bb0\u5f55\u5fc3\u60c5<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <h3 class=\"font-semibold mb-4\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/h3>\n \n <div class=\"grid grid-cols-5 gap-2 mb-8\">\n <div class=\"flex flex-col items-center p-3 bg-green-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude0a\n <\/div>\n <span class=\"text-xs\">\u7f8e\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-green-50\/50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100\/50 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude42\n <\/div>\n <span class=\"text-xs\">\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-gray-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-2\">\n \ud83d\ude10\n <\/div>\n <span class=\"text-xs\">\u4e00\u822c<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-red-50\/50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100\/50 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude41\n <\/div>\n <span class=\"text-xs\">\u4e0d\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-red-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude22\n <\/div>\n <span class=\"text-xs\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">\u53ef\u4ee5\u63cf\u8ff0\u4e00\u4e0b\u5417\uff1f<\/h3>\n \n <div class=\"flex flex-wrap gap-2 mb-5\">\n <span class=\"bg-primary\/10 text-primary text-xs py-1.5 px-3 rounded-full\">\u5f00\u5fc3<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u5e73\u9759<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u75b2\u60eb<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u7126\u8651<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6124\u6012<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6cae\u4e27<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6dfb\u52a0\u6807\u7b7e<\/span>\n <\/div>\n \n \n <div>\n <textarea \n class=\"w-full border border-gray-200 rounded-xl p-3 text-sm placeholder-gray-400 resize-none h-32\"\n placeholder=\"\u8be6\u7ec6\u63cf\u8ff0\u4e00\u4e0b\u4eca\u5929\u7684\u5fc3\u60c5\u548c\u611f\u53d7\u5427...\"\n ><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <h3 class=\"font-semibold mb-3\">\u76f8\u5173\u4eba\u5458<\/h3>\n \n <div class=\"flex flex-wrap gap-3\">\n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person1\/40\/40\" alt=\"\u4f34\u4fa3\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u4f34\u4fa3<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person2\/40\/40\" alt=\"\u5bb6\u4eba\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u5bb6\u4eba<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person3\/40\/40\" alt=\"\u670b\u53cb\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u670b\u53cb<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <button class=\"flex items-center gap-2 bg-white border border-gray-200 rounded-full px-3 py-1.5\">\n <i class=\"fa fa-plus text-gray-400 text-xs\"><\/i>\n <span class=\"text-xs\">\u6dfb\u52a0<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 pb-6\">\n <button class=\"w-full bg-primary text-white py-3 rounded-xl font-medium text-sm\">\n \u4fdd\u5b58\u8bb0\u5f55\n <\/button>\n <p class=\"text-center text-xs text-gray-400 mt-3\">\n \u6bcf\u6b21\u8bb0\u5f55\u53ef\u83b7\u5f975\u60c5\u611f\u503c\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:35<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u53d1\u73b0<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-3\">\n <div class=\"relative\">\n <input \n type=\"text\" \n class=\"w-full bg-gray-100 rounded-xl py-3 pl-10 pr-4 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary\/30\"\n placeholder=\"\u641c\u7d22\u60c5\u611f\u6587\u7ae0\u3001\u6d4b\u8bc4\u6216\u8bfe\u7a0b...\"\n >\n <i class=\"fa fa-search absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-5\">\n <div class=\"flex overflow-x-auto pb-2 gap-3 scrollbar-hide\">\n <button class=\"bg-primary text-white text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5168\u90e8\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u60c5\u611f\u6d4b\u8bc4\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u4e13\u5bb6\u8bfe\u7a0b\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5173\u7cfb\u6307\u5357\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5fc3\u7406\u79d1\u666e\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u4e92\u52a8\u6d3b\u52a8\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u7cbe\u9009\u63a8\u8350<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden mb-4 card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/featured\/400\/200\" alt=\"\u7cbe\u9009\u5185\u5bb9\u5c01\u9762\" class=\"w-full h-40 object-cover\">\n <div class=\"p-4\">\n <span class=\"text-xs bg-primary\/10 text-primary py-0.5 px-2 rounded-full\">\u7cbe\u54c1\u8bfe\u7a0b<\/span>\n <h4 class=\"font-medium text-base mt-2 mb-1\">\u6784\u5efa\u5065\u5eb7\u4eb2\u5bc6\u5173\u7cfb\u76847\u4e2a\u5173\u952e<\/h4>\n <p class=\"text-gray-500 text-xs mb-3\">\u77e5\u540d\u5fc3\u7406\u5b66\u5bb6\u738b\u6559\u6388 \u00b7 12\u8282\u8bfe\u7a0b \u00b7 \u5df2\u67093.2\u4e07\u4eba\u5b66\u4e60<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-1\">\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star-half-o text-yellow-400 text-xs\"><\/i>\n <span class=\"text-xs text-gray-500 ml-1\">4.8<\/span>\n <\/div>\n <span class=\"text-primary font-medium\">\u00a599<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u70ed\u95e8\u6d4b\u8bc4<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"w-full h-24 bg-primary\/10 rounded-lg mb-3 flex items-center justify-center\">\n <i class=\"fa fa-heart-o text-3xl text-primary\"><\/i>\n <\/div>\n <h4 class=\"font-medium text-sm mb-1\">\u7231\u60c5\u5339\u914d\u5ea6\u6d4b\u8bd5<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u8bc4\u4f30\u4f60\u4e0e\u4f34\u4fa3\u7684\u5339\u914d\u7a0b\u5ea6<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs text-gray-500\">5\u5206\u949f<\/span>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"w-full h-24 bg-primary\/10 rounded-lg mb-3 flex items-center justify-center\">\n <i class=\"fa fa-line-chart text-3xl text-primary\"><\/i>\n <\/div>\n <h4 class=\"font-medium text-sm mb-1\">\u60c5\u7eea\u7ba1\u7406\u80fd\u529b\u6d4b\u8bd5<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u4e86\u89e3\u4f60\u7684\u60c5\u7eea\u8c03\u63a7\u6c34\u5e73<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-gray-600\">\u00a512<\/span>\n <span class=\"text-xs text-gray-500\">8\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u6700\u65b0\u6587\u7ae0<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"flex\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article1\/120\/120\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-24 h-24 object-cover\">\n <div class=\"p-3 flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u5982\u4f55\u4e0e\u4f34\u4fa3\u8fdb\u884c\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u60c5\u611f\u4e13\u680f \u00b7 3\u5c0f\u65f6\u524d<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-2 text-xs text-gray-400\">\n <span><i class=\"fa fa-eye mr-1\"><\/i> 1.2k<\/span>\n <span><i class=\"fa fa-comment-o mr-1\"><\/i> 32<\/span>\n <\/div>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"flex\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/120\/120\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-24 h-24 object-cover\">\n <div class=\"p-3 flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u5bb6\u5ead\u4e2d\u7684\u8fb9\u754c\u611f\u5efa\u7acb<\/h4><\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u5fc3\u7406\u4e13\u5bb6 \u00b7 \u6628\u5929<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-2 text-xs text-gray-400\">\n <span><i class=\"fa fa-eye mr-1\"><\/i> 2.5k<\/span>\n <span><i class=\"fa fa-comment-o mr-1\"><\/i> 78<\/span>\n <\/div>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u5fc3\u94fe\u6570\u79d1 – \u5bb6\u5ead\u4fdd\u62a4\u89e3\u51b3\u65b9\u6848<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#165DFF',\r\n secondary: '#36CFC9',\r\n accent: '#722ED1',\r\n dark: '#1D2129',\r\n light: '#F2F3F5',\r\n neutral: '#86909C'\r\n },\r\n fontFamily: {\r\n inter: ['Inter', 'sans-serif'],\r\n },\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style type=\"text\/tailwindcss\">\r\n @layer utilities {\r\n .content-auto {\r\n content-visibility: auto;\r\n }\r\n .text-shadow {\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n }\r\n .bg-gradient-primary {\r\n background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);\r\n }\r\n .card-hover {\r\n transition: all 0.3s ease;\r\n }\r\n .card-hover:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px rgba(22, 93, 255, 0.1);\r\n }\r\n .gradient-mask {\r\n mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-inter bg-white text-dark antialiased\"> \r\n \r\n <section class=\"py-16 md:py-24 container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u5b88\u62a4\u5bb6\u5ead\u5173\u7cfb\u7684\u6838\u5fc3\u4ef7\u503c<\/h2>\r\n <p class=\"text-neutral text-lg\">\u6211\u4eec\u81f4\u529b\u4e8e\u901a\u8fc7\u79d1\u6280\u624b\u6bb5\uff0c\u8bc6\u522b\u9690\u5f62\u4f24\u5bb3\uff0c\u63d0\u4f9b\u4e13\u4e1a\u5e72\u9884\uff0c\r\n \u5e2e\u52a9\u6bcf\u4e2a\u5bb6\u5ead\u5efa\u7acb\u5065\u5eb7\u3001\u5e73\u7b49\u3001\u5c0a\u91cd\u7684\u4e92\u52a8\u6a21\u5f0f<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-eye text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u7cbe\u51c6\u8bc6\u522b<\/h3>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u5148\u8fdb\u7b97\u6cd5\uff0c\u7cbe\u51c6\u8bc6\u522b\u4e0d\u6613\u5bdf\u89c9\u7684\u60c5\u611f\u64cd\u63a7\u548c\u7cbe\u795e\u8650\u5f85\u884c\u4e3a\u6a21\u5f0f<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-secondary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-shield text-2xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5168\u9762\u4fdd\u62a4<\/h3>\r\n <p class=\"text-neutral\">\u5168\u65b9\u4f4d\u76d1\u6d4b\u5bb6\u5ead\u4e92\u52a8\uff0c\u4e3a\u6bcf\u4e2a\u5bb6\u5ead\u6210\u5458\u63d0\u4f9b\u5b89\u5168\u4fdd\u62a4\u5c4f\u969c<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-accent\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-handshake-o text-2xl text-accent\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u4e13\u4e1a\u5e72\u9884<\/h3>\r\n <p class=\"text-neutral\">\u8fde\u63a5\u4e13\u4e1a\u5fc3\u7406\u8d44\u6e90\uff0c\u63d0\u4f9b\u79d1\u5b66\u6709\u6548\u7684\u5e72\u9884\u65b9\u6848\u548c\u652f\u6301\u670d\u52a1<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-heart text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5065\u5eb7\u91cd\u5efa<\/h3>\r\n <p class=\"text-neutral\">\u5e2e\u52a9\u5bb6\u5ead\u91cd\u5efa\u5065\u5eb7\u4e92\u52a8\u6a21\u5f0f\uff0c\u57f9\u517b\u5c0a\u91cd\u4e0e\u5e73\u7b49\u7684\u6c9f\u901a\u65b9\u5f0f<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 md:py-24 bg-light relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-primary\/5 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/3\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-accent\/5 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/3\"><\/div>\r\n \r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6838\u5fc3\u6280\u672f<\/span>\r\n <\/div>\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u591a\u6a21\u6001\u667a\u80fd\u5206\u6790\u6280\u672f<\/h2>\r\n <p class=\"text-neutral text-lg\">\u878d\u5408\u591a\u79cd\u6570\u636e\u7ef4\u5ea6\uff0c\u5b9e\u73b0\u66f4\u7cbe\u51c6\u3001\u5168\u9762\u7684\u5bb6\u5ead\u5173\u7cfb\u8bc4\u4f30\u4e0e\u5206\u6790<\/p>\r\n <\/div>\r\n \r\n <div class=\"max-w-6xl mx-auto\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <p class=\"text-neutral mb-8 leading-relaxed text-lg\">\r\n \u5fc3\u94fe\u6570\u79d1\u91c7\u7528\u5148\u8fdb\u7684\u591a\u6a21\u6001\u667a\u80fd\u5206\u6790\u6280\u672f\uff0c\u901a\u8fc7\u6574\u5408\u6587\u672c\u3001\u8bed\u97f3\u3001\u884c\u4e3a\u6a21\u5f0f\u7b49\u591a\u7ef4\u5ea6\u6570\u636e\uff0c\r\n \u6784\u5efa\u5168\u65b9\u4f4d\u7684\u5bb6\u5ead\u5173\u7cfb\u8bc4\u4f30\u6a21\u578b\u3002\u8fd9\u79cd\u8de8\u6a21\u6001\u5206\u6790\u80fd\u529b\u4f7f\u7cfb\u7edf\u80fd\u591f\u6355\u6349\u5230\u5355\u4e00\u6570\u636e\u6e90\u65e0\u6cd5\u8bc6\u522b\u7684\r\n \u9690\u5f62\u4f24\u5bb3\u4fe1\u53f7\uff0c\u663e\u8457\u63d0\u5347\u8bc6\u522b\u7cbe\u5ea6\u548c\u5e72\u9884\u6548\u679c\u3002\r\n <\/p>\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-comments text-primary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u8bed\u8a00\u60c5\u611f\u5206\u6790<\/h4>\r\n <p class=\"text-neutral\">\u89e3\u6790\u6c9f\u901a\u4e2d\u7684\u8bed\u8a00\u6a21\u5f0f\u3001\u60c5\u611f\u503e\u5411\u548c\u9690\u6027\u63a7\u5236\u4fe1\u53f7\uff0c\u8bc6\u522b\u8d2c\u4f4e\u3001\u6307\u8d23\u7b49\u6709\u5bb3\u8bed\u8a00\u7279\u5f81<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-volume-up text-secondary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u8bed\u97f3\u60c5\u7eea\u8bc6\u522b<\/h4>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u8bed\u8c03\u3001\u8bed\u901f\u3001\u97f3\u91cf\u53d8\u5316\u7b49\u8bed\u97f3\u7279\u5f81\uff0c\u5206\u6790\u6f5c\u5728\u7684\u60c5\u7eea\u64cd\u63a7\u548c\u7cbe\u795e\u538b\u529b\u72b6\u6001<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-motion-picture-o text-accent\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u884c\u4e3a\u6a21\u5f0f\u5206\u6790<\/h4>\r\n <p class=\"text-neutral\">\u8bc6\u522b\u4e92\u52a8\u4e2d\u7684\u63a7\u5236\u884c\u4e3a\u6a21\u5f0f\u3001\u793e\u4ea4\u9650\u5236\u884c\u4e3a\u548c\u6743\u529b\u4e0d\u5bf9\u7b49\u8868\u73b0<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-sitemap text-primary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u591a\u6a21\u6001\u878d\u5408\u63a8\u7406<\/h4>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u8de8\u6a21\u6001\u5173\u8054\u5206\u6790\uff0c\u6784\u5efa\u5b8c\u6574\u7684\u5bb6\u5ead\u5173\u7cfb\u56fe\u8c31\uff0c\u7cbe\u51c6\u5b9a\u4f4d\u95ee\u9898\u6839\u6e90<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-8 -left-8 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-10 -right-10 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n \r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"h-96\">\r\n <canvas id=\"multimodalChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"py-16 md:py-24 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u6838\u5fc3\u529f\u80fd\u6a21\u5757<\/h2>\r\n <p class=\"text-neutral text-lg\">\u56db\u5927\u6838\u5fc3\u6a21\u5757\u534f\u540c\u5de5\u4f5c\uff0c\u4ece\u8bc6\u522b\u8bc4\u4f30\u5230\u5e72\u9884\u91cd\u5efa\uff0c\u63d0\u4f9b\u5168\u6d41\u7a0b\u89e3\u51b3\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6a21\u5757\u4e00<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5173\u7cfb\u5065\u5eb7\u8bc4\u4f30<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u901a\u8fc7\u4e13\u4e1a\u7684\u5fc3\u7406\u8bc4\u4f30\u6a21\u578b\u548c\u591a\u6a21\u6001\u884c\u4e3a\u5206\u6790\u7b97\u6cd5\uff0c\u5168\u9762\u8bc4\u4f30\u5bb6\u5ead\u5173\u7cfb\u5065\u5eb7\u72b6\u51b5\uff0c\r\n \u7cbe\u51c6\u8bc6\u522b\u63a7\u5236\u884c\u4e3a\u3001\u60c5\u611f\u64cd\u63a7\u7b49\u9690\u5f62\u4f24\u5bb3\u6a21\u5f0f\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5bb6\u5ead\u4e92\u52a8\u6a21\u5f0f\u5065\u5eb7\u5ea6\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u63a7\u5236\u884c\u4e3a\u4e0e\u7cbe\u795e\u8650\u5f85\u8bc6\u522b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5173\u7cfb\u5e73\u7b49\u5ea6\u4e0e\u5c0a\u91cd\u6307\u6570\u5206\u6790<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u4e2a\u6027\u5316\u5065\u5eb7\u5173\u7cfb\u5efa\u8bae<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u957f\u671f\u5173\u7cfb\u53d8\u5316\u8ffd\u8e2a<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -left-6 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -right-8 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"h-80\">\r\n <canvas id=\"relationshipChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center lg:flex-row-reverse\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-secondary\/10 rounded-full\">\r\n <span class=\"text-secondary text-sm font-medium\">\u6a21\u5757\u4e8c<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5371\u9669\u4fe1\u53f7\u76d1\u6d4b<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u5229\u7528\u5148\u8fdb\u7684\u591a\u6a21\u6001\u884c\u4e3a\u6a21\u5f0f\u8bc6\u522b\u6280\u672f\uff0c\u76d1\u6d4b\u5e76\u9884\u8b66\u5bb6\u5ead\u4e2d\u7684\u6f5c\u5728\u4f24\u5bb3\u884c\u4e3a\uff0c\r\n \u5305\u62ec\u63a7\u5236\u3001\u5b64\u7acb\u3001\u8d2c\u4f4e\u7b49\u9690\u5f62\u8650\u5f85\u5f62\u5f0f\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u63a7\u5236\u884c\u4e3a\u6a21\u5f0f\u667a\u80fd\u8bc6\u522b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u793e\u4ea4\u5b64\u7acb\u9884\u8b66\u7cfb\u7edf<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u60c5\u611f\u64cd\u63a7\u68c0\u6d4b\u673a\u5236<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5371\u9669\u7a0b\u5ea6\u5206\u7ea7\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u53ca\u65f6\u5e72\u9884\u5efa\u8bae\u751f\u6210<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-secondary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -left-8 w-32 h-32 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"flex flex-col h-full\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h4 class=\"font-semibold text-lg\">\u5371\u9669\u4fe1\u53f7\u76d1\u6d4b<\/h4>\r\n <span class=\"px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-medium\">\u4e2d\u7b49\u98ce\u9669<\/span>\r\n <\/div>\r\n \r\n <div class=\"space-y-6 flex-grow\">\r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u63a7\u5236\u884c\u4e3a\u6307\u6570<\/span>\r\n <span class=\"text-sm text-amber-600\">68%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-amber-500 rounded-full\" style=\"width: 68%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u60c5\u611f\u64cd\u63a7\u6307\u6570<\/span>\r\n <span class=\"text-sm text-amber-600\">57%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-amber-500 rounded-full\" style=\"width: 57%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u793e\u4ea4\u5b64\u7acb\u6307\u6570<\/span>\r\n <span class=\"text-sm text-green-600\">23%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 23%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u8a00\u8bed\u8d2c\u4f4e\u6307\u6570<\/span>\r\n <span class=\"text-sm text-red-600\">75%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-red-500 rounded-full\" style=\"width: 75%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-6 p-4 bg-amber-50 border border-amber-100 rounded-lg\">\r\n <p class=\"text-sm text-amber-800 flex items-start\">\r\n <i class=\"fa fa-exclamation-triangle mt-0.5 mr-2\"><\/i>\r\n <span>\u68c0\u6d4b\u5230\u6f5c\u5728\u98ce\u9669\u6a21\u5f0f\uff0c\u5efa\u8bae\u8fdb\u884c\u4e13\u4e1a\u8bc4\u4f30\u5e76\u83b7\u53d6\u5e72\u9884\u6307\u5bfc\u3002<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-accent\/10 rounded-full\">\r\n <span class=\"text-accent text-sm font-medium\">\u6a21\u5757\u4e09<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5e72\u9884\u652f\u6301\u7cfb\u7edf<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u4e3a\u5904\u4e8e\u98ce\u9669\u4e2d\u7684\u5bb6\u5ead\u63d0\u4f9b\u591a\u5c42\u6b21\u7684\u5e72\u9884\u652f\u6301\uff0c\u8fde\u63a5\u4e13\u4e1a\u8d44\u6e90\uff0c\r\n \u5236\u5b9a\u4e2a\u6027\u5316\u5e72\u9884\u65b9\u6848\uff0c\u5e2e\u52a9\u53d7\u5bb3\u8005\u6446\u8131\u56f0\u5883\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u4e13\u4e1a\u5fc3\u7406\u54a8\u8be2\u5bf9\u63a5\u670d\u52a1<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5b89\u5168\u8ba1\u5212\u5236\u5b9a\u4e0e\u5b9e\u65bd<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u652f\u6301\u5c0f\u7ec4\u4e0e\u793e\u533a\u8d44\u6e90\u94fe\u63a5<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u9636\u6bb5\u6027\u5e72\u9884\u6548\u679c\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u7d27\u6025\u60c5\u51b5\u54cd\u5e94\u673a\u5236<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -left-6 w-24 h-24 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -right-8 w-32 h-32 bg-secondary\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <h4 class=\"font-semibold text-lg mb-6\">\u5e72\u9884\u652f\u6301\u6d41\u7a0b<\/h4>\r\n \r\n <div class=\"relative\">\r\n \r\n <div class=\"absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200\"><\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">1<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u98ce\u9669\u8bc4\u4f30\u786e\u8ba4<\/h5>\r\n <p class=\"text-neutral text-sm\">\u4e13\u4e1a\u4eba\u5458\u5ba1\u6838\u7cfb\u7edf\u8bc4\u4f30\u7ed3\u679c\uff0c\u786e\u8ba4\u98ce\u9669\u7b49\u7ea7\u548c\u5177\u4f53\u95ee\u9898<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">2<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u4e2a\u6027\u5316\u65b9\u6848\u5236\u5b9a<\/h5>\r\n <p class=\"text-neutral text-sm\">\u6839\u636e\u5177\u4f53\u60c5\u51b5\uff0c\u5236\u5b9a\u4e13\u5c5e\u5e72\u9884\u8ba1\u5212\u548c\u5b89\u5168\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">3<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u4e13\u4e1a\u8d44\u6e90\u5bf9\u63a5<\/h5>\r\n <p class=\"text-neutral text-sm\">\u5339\u914d\u6700\u5408\u9002\u7684\u5fc3\u7406\u54a8\u8be2\u5e08\u548c\u652f\u6301\u670d\u52a1\u8d44\u6e90<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">4<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u5b9e\u65bd\u4e0e\u8ddf\u8e2a<\/h5>\r\n <p class=\"text-neutral text-sm\">\u6267\u884c\u5e72\u9884\u8ba1\u5212\uff0c\u5b9a\u671f\u8bc4\u4f30\u6548\u679c\u5e76\u8c03\u6574\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">5<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u957f\u671f\u652f\u6301\u4e0e\u6062\u590d<\/h5>\r\n <p class=\"text-neutral text-sm\">\u63d0\u4f9b\u6301\u7eed\u652f\u6301\uff0c\u5e2e\u52a9\u5efa\u7acb\u5065\u5eb7\u6a21\u5f0f\uff0c\u9884\u9632\u590d\u53d1<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center lg:flex-row-reverse\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6a21\u5757\u56db<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5065\u5eb7\u5173\u7cfb\u5efa\u8bbe<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u63d0\u4f9b\u4e13\u4e1a\u6307\u5bfc\u548c\u5de5\u5177\uff0c\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u5efa\u7acb\u5065\u5eb7\u3001\u5e73\u7b49\u3001\u5c0a\u91cd\u7684\u4e92\u52a8\u6a21\u5f0f\uff0c\r\n \u57f9\u517b\u6709\u6548\u7684\u6c9f\u901a\u6280\u5de7\u548c\u51b2\u7a81\u89e3\u51b3\u80fd\u529b\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5065\u5eb7\u6c9f\u901a\u6280\u5de7\u57f9\u8bad<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u8fb9\u754c\u8bbe\u5b9a\u4e0e\u5c0a\u91cd\u57f9\u517b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u51b2\u7a81\u89e3\u51b3\u7b56\u7565\u6307\u5bfc<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5bb6\u5ead\u89d2\u8272\u5e73\u7b49\u5316\u5efa\u8bbe<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u957f\u671f\u5173\u7cfb\u5065\u5eb7\u7ef4\u62a4\u8ba1\u5212<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -left-8 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <h4 class=\"font-semibold text-lg mb-6\">\u5065\u5eb7\u5173\u7cfb\u57f9\u517b\u5de5\u5177<\/h4>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-comments text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u6c9f\u901a\u7ec3\u4e60\u6307\u5357<\/h5>\r\n <p class=\"text-sm text-neutral\">\u57fa\u4e8e\u975e\u66b4\u529b\u6c9f\u901a\u7406\u5ff5\u7684\u4e92\u52a8\u7ec3\u4e60<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-balance-scale text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u8fb9\u754c\u8bbe\u5b9a\u5de5\u5177<\/h5>\r\n <p class=\"text-sm text-neutral\">\u5e2e\u52a9\u660e\u786e\u4e2a\u4eba\u8fb9\u754c\u7684\u5b9e\u7528\u5de5\u4f5c\u8868<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-exclamation-circle text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u51b2\u7a81\u89e3\u51b3\u624b\u518c<\/h5>\r\n <p class=\"text-sm text-neutral\">\u5efa\u8bbe\u6027\u89e3\u51b3\u5bb6\u5ead\u77db\u76fe\u7684\u6b65\u9aa4\u4e0e\u65b9\u6cd5<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-calendar-check-o text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u5173\u7cfb\u5efa\u8bbe\u8ba1\u5212<\/h5>\r\n <p class=\"text-sm text-neutral\">30\u5929\u5065\u5eb7\u5bb6\u5ead\u4e92\u52a8\u57f9\u517b\u8ba1\u5212<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-6 pt-6 border-t border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <h5 class=\"font-medium\">\u5bb6\u5ead\u5065\u5eb7\u6307\u6570<\/h5>\r\n <p class=\"text-sm text-neutral\">\u57fa\u4e8e\u4e92\u52a8\u6570\u636e\u7684\u7efc\u5408\u8bc4\u4f30<\/p>\r\n <\/div>\r\n <div class=\"text-3xl font-bold text-primary\">72<span class=\"text-sm font-normal\">\/100<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 h-2 w-full bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-gradient-primary rounded-full\" style=\"width: 72%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"py-16 md:py-24 container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u5e7f\u6cdb\u7684\u5e94\u7528\u573a\u666f<\/h2>\r\n <p class=\"text-neutral text-lg\">\u5fc3\u94fe\u6570\u79d1\u5bb6\u5ead\u4fdd\u62a4\u89e3\u51b3\u65b9\u6848\u9002\u7528\u4e8e\u591a\u79cd\u573a\u666f\uff0c\u4e3a\u4e0d\u540c\u9700\u6c42\u63d0\u4f9b\u4e13\u4e1a\u652f\u6301<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-home text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5bb6\u5ead\u81ea\u6211\u8bc4\u4f30<\/h3>\r\n <p class=\"text-neutral mb-4\">\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u8fdb\u884c\u81ea\u6211\u68c0\u6d4b\uff0c\u8bc6\u522b\u6f5c\u5728\u95ee\u9898\uff0c\u4e3b\u52a8\u5bfb\u6c42\u6539\u5584<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u5bb6\u5ead\u5173\u7cfb\u81ea\u6d4b\u4e0e\u8bc4\u4f30\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u4e92\u52a8\u6a21\u5f0f\u5206\u6790\u4e0e\u53cd\u9988\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u81ea\u6211\u63d0\u5347\u4e0e\u6539\u5584\u5efa\u8bae\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-secondary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-users text-2xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u4e13\u4e1a\u673a\u6784\u652f\u6301<\/h3>\r\n <p class=\"text-neutral mb-4\">\u4e3a\u5fc3\u7406\u54a8\u8be2\u3001\u793e\u5de5\u670d\u52a1\u7b49\u4e13\u4e1a\u673a\u6784\u63d0\u4f9b\u8bc4\u4f30\u4e0e\u5e72\u9884\u8f85\u52a9\u5de5\u5177<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u6848\u4f8b\u8bc4\u4f30\u4e0e\u5206\u6790\u7cfb\u7edf\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u5e72\u9884\u6548\u679c\u8ddf\u8e2a\u4e0e\u8bc4\u4f30\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u4e13\u4e1a\u8d44\u6e90\u5339\u914d\u4e0e\u7ba1\u7406\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-accent\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-building text-2xl text-accent\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u793e\u4f1a\u670d\u52a1\u4f53\u7cfb<\/h3>\r\n <p class=\"text-neutral mb-4\">\u4e3a\u793e\u533a\u3001\u5987\u8054\u3001\u53f8\u6cd5\u7b49\u793e\u4f1a\u670d\u52a1\u4f53\u7cfb\u63d0\u4f9b\u51b3\u7b56\u652f\u6301\u4e0e\u5e72\u9884\u5de5\u5177<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u5bb6\u5ead\u98ce\u9669\u7b5b\u67e5\u4e0e\u9884\u8b66\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u8d44\u6e90\u8c03\u914d\u4e0e\u5e72\u9884\u652f\u6301\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u793e\u4f1a\u670d\u52a1\u6548\u679c\u8bc4\u4f30\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ \u521d\u59cb\u5316\u56fe\u8868\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ \u591a\u6a21\u6001\u6280\u672f\u5206\u6790\u56fe\u8868\r\n const multimodalCtx = document.getElementById('multimodalChart').getContext('2d');\r\n const multimodalChart = new Chart(multimodalCtx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['\u8bed\u8a00\u60c5\u611f', '\u8bed\u97f3\u60c5\u7eea', '\u884c\u4e3a\u6a21\u5f0f', '\u793e\u4ea4\u4e92\u52a8', '\u6587\u672c\u5185\u5bb9'],\r\n datasets: [{\r\n label: '\u5355\u4e00\u6a21\u6001\u8bc6\u522b\u51c6\u786e\u7387',\r\n data: [68, 72, 65, 70, 62],\r\n backgroundColor: 'rgba(22, 93, 255, 0.6)',\r\n }, {\r\n label: '\u591a\u6a21\u6001\u878d\u5408\u8bc6\u522b\u51c6\u786e\u7387',\r\n data: [89, 91, 87, 88, 85],\r\n backgroundColor: 'rgba(114, 46, 209, 0.6)',\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n plugins: {\r\n title: {\r\n display: true,\r\n text: '\u591a\u6a21\u6001\u6280\u672f\u8bc6\u522b\u51c6\u786e\u7387\u5bf9\u6bd4 (%)',\r\n font: {\r\n size: 16\r\n }\r\n },\r\n legend: {\r\n position: 'bottom',\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 100,\r\n title: {\r\n display: true,\r\n text: '\u51c6\u786e\u7387 (%)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u5173\u7cfb\u5065\u5eb7\u8bc4\u4f30\u56fe\u8868\r\n const relationshipCtx = document.getElementById('relationshipChart').getContext('2d');\r\n const relationshipChart = new Chart(relationshipCtx, {\r\n type: 'radar',\r\n data: {\r\n labels: [\r\n '\u6c9f\u901a\u5065\u5eb7\u5ea6',\r\n '\u5c0a\u91cd\u6307\u6570',\r\n '\u5e73\u7b49\u53c2\u4e0e',\r\n '\u60c5\u611f\u652f\u6301',\r\n '\u8fb9\u754c\u5c0a\u91cd',\r\n '\u51b2\u7a81\u89e3\u51b3'\r\n ],\r\n datasets: [{\r\n label: '\u5f53\u524d\u5bb6\u5ead\u5173\u7cfb',\r\n data: [65, 59, 60, 72, 45, 55],\r\n fill: true,\r\n backgroundColor: 'rgba(22, 93, 255, 0.2)',\r\n borderColor: '#165DFF',\r\n pointBackgroundColor: '#165DFF',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#165DFF'\r\n }, {\r\n label: '\u5065\u5eb7\u5bb6\u5ead\u6807\u51c6',\r\n data: [85, 90, 85, 90, 85, 80],\r\n fill: true,\r\n backgroundColor: 'rgba(114, 46, 209, 0.2)',\r\n borderColor: '#722ED1',\r\n pointBackgroundColor: '#722ED1',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#722ED1'\r\n }]\r\n },\r\n options: {\r\n elements: {\r\n line: {\r\n borderWidth: 3\r\n }\r\n },\r\n scales: {\r\n r: {\r\n angleLines: {\r\n display: true,\r\n color: 'rgba(0, 0, 0, 0.1)'\r\n },\r\n suggestedMin: 0,\r\n suggestedMax: 100,\r\n ticks: {\r\n stepSize: 20,\r\n backdropColor: 'transparent'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u6dfb\u52a0\u6eda\u52a8\u52a8\u753b\r\n const animateOnScroll = function() {\r\n const elements = document.querySelectorAll('.card-hover');\r\n \r\n elements.forEach(element => {\r\n const elementPosition = element.getBoundingClientRect().top;\r\n const windowHeight = window.innerHeight;\r\n \r\n if (elementPosition < windowHeight * 0.85) {\r\n element.classList.add('opacity-100');\r\n element.classList.remove('opacity-0', 'translate-y-8');\r\n }\r\n });\r\n };\r\n \r\n \/\/ \u521d\u59cb\u5316\u5143\u7d20\u72b6\u6001\r\n document.querySelectorAll('.card-hover').forEach(el => {\r\n el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');\r\n });\r\n \r\n \/\/ \u521d\u59cb\u68c0\u67e5\r\n animateOnScroll();\r\n \r\n \/\/ \u6eda\u52a8\u65f6\u68c0\u67e5\r\n window.addEventListener('scroll', animateOnScroll);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n\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 <title>\u5fc3\u8c10XinSync<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF7A9C', \/\/ \u4e3b\u7c89\u8272\n secondary: '#FFE6EC', \/\/ \u6d45\u7c89\u8272\n neutral: '#333333', \/\/ \u6df1\u7070\u8272\n 'neutral-light': '#F5F5F5', \/\/ \u6d45\u7070\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .app-shadow {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n }\n .card-hover {\n transition: all 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-4px);\n box-shadow: 0 10px 25px rgba(255, 122, 156, 0.15);\n }\n .btn-hover {\n transition: all 0.2s ease;\n }\n .btn-hover:hover {\n transform: translateY(-2px);\n }\n }\n <\/style>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-white font-sans text-neutral min-h-screen\">\n <div class=\"container mx-auto px-4 py-8\">\n <header class=\"text-center mb-10\">\n <h1 class=\"text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary mb-2\">\u5fc3\u8c10XinSync<\/h1>\n <p class=\"text-gray-600 max-w-2xl mx-auto\">\u60c5\u611f\u5173\u7cfb\u667a\u80fd\u7ba1\u7406\u5e73\u53f0<\/p>\n <\/header>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart1\/200\/200\" alt=\"\u627e\u81ea\u5df1\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u627e\u81ea\u5df1\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u8fd9\u91cc\u662f\u60c5\u7eea\u7684\u6811\u6d1e\uff0c\u4e5f\u662f\u627e\u56de\u81ea\u5df1\u7684\u8d77\u70b9<\/p>\n <button class=\"bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart2\/200\/200\" alt=\"\u6211\u548cTA\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u6211\u548cTA\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u4e0a\u4f20\u4f60\u4eec\u7684\u804a\u5929\u8bb0\u5f55\uff0cAI\u7ed3\u5408\u4e13\u4e1a\u5fc3\u7406\u54a8\u8be2\u5e08\u7684\u5206\u6790\uff0c\u4e3a\u4f60\u751f\u6210\u4e00\u4efd\u4e13\u5c5e\u7684\u300c\u5173\u7cfb\u89e3\u8bfb\u62a5\u544a\u300d<\/p>\n <button class=\"bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart3\/200\/200\" alt=\"\u9690\u79c1\u4e0e\u5b89\u5168\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u9690\u79c1\u4e0e\u5b89\u5168\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u62e5\u6709\u5f3a\u5927\u7684\u6570\u636e\u5b89\u5168\u6027\uff0c\u60a8\u901a\u5f80\u66f4\u597d\u7684\u5fc3\u7406\u5065\u5eb7\u7684\u65c5\u7a0b\u65e0\u5fe7<\/p>\n <div class=\"flex flex-col gap-2 mt-4\">\n <button class=\"bg-white text-primary border border-primary py-2 px-4 rounded-full text-sm btn-hover\">\n \u4e0d\u5bf9\u4f60\u7684\u6570\u636e\u8fdb\u884cAI\u8bad\u7ec3\n <\/button>\n <button class=\"bg-white text-primary border border-primary py-2 px-4 rounded-full text-sm btn-hover\">\n \u53ef\u968f\u65f6\u5220\u9664\n <\/button>\n <\/div>\n <button class=\"mt-6 bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-6\">\n <div class=\"w-6\"><\/div>\n <h2 class=\"text-xl font-semibold\">\u767b\u5f55<\/h2>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n \n <h3 class=\"text-lg font-medium mb-1\">\u73b0\u5728\u767b\u5f55<\/h3>\n <p class=\"text-gray-500 mb-6\">\u6b22\u8fce\u56de\u6765\uff0c\u627e\u5230\u81ea\u5df1\u7684\u7075\u9b42\uff01<\/p>\n \n <form class=\"flex flex-col gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8d26\u53f7<\/label>\n <div class=\"relative\">\n <input type=\"text\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition\" placeholder=\"\u8bf7\u8f93\u5165\u4f60\u7684\u8d26\u53f7\">\n <i class=\"fa fa-check-circle absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u5bc6\u7801<\/label>\n <div class=\"relative\">\n <input type=\"password\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition\" placeholder=\"\u8bf7\u8f93\u5165\u4f60\u7684\u5bc6\u7801\">\n <a href=\"#\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-primary text-sm\">\u5fd8\u4e86\uff1f<\/a>\n <\/div>\n <\/div>\n \n <button type=\"button\" class=\"mt-2 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\n <\/button>\n \n <p class=\"text-center text-sm text-gray-500\">\u4f7f\u7528\u7b2c\u4e09\u65b9\u8d26\u53f7\u767b\u5f55<\/p>\n \n <button type=\"button\" class=\"flex items-center justify-center gap-2 bg-neutral-light text-neutral py-3 px-6 rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-weixin text-lg text-green-500\"><\/i>\n \u5fae\u4fe1\u4e00\u952e\u767b\u5f55\n <\/button>\n <\/form>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u8fd8\u6ca1\u6709\u8d26\u53f7\uff1f<span class=\"text-primary font-medium\">\u6ce8\u518c<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6 pb-0\">\n <div class=\"flex justify-between items-center mb-4\">\n <div>\n <h2 class=\"text-lg font-medium\">Hello, \u65e9\u8d77\u5927\u738b\ud83d\udc51<\/h2>\n <p class=\"text-gray-500 text-sm\">\u6674, 5-14<\/p>\n <\/div>\n <div class=\"w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-primary\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"flex gap-3 mb-6\">\n <button class=\"flex-1 bg-primary text-white py-3 rounded-lg font-medium btn-hover\">\n \u5fc3\u60c5\u8bb0\u5f55\n <\/button>\n <button class=\"flex-1 bg-white border border-gray-300 text-neutral py-3 rounded-lg font-medium btn-hover\">\n \u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto p-6 pt-0\">\n \n <div class=\"grid grid-cols-2 gap-3 mb-6\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-4 card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mb-2\">\n <i class=\"fa fa-comments\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-sm mb-1\">\u6c9f\u901a\u8bb0\u5f55<\/h3>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4f60\u4eec\u7684\u804a\u5929\u8bb0\u5f55\uff0cAI\u5206\u6790\u4f60\u4eec\u7684\u5173\u7cfb<\/p>\n <\/div>\n \n <div class=\"bg-green-50 border border-green-100 rounded-lg p-4 card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n <i class=\"fa fa-comment\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-sm mb-1\">AI\u667a\u80fd\u5bf9\u8bdd<\/h3>\n <p class=\"text-xs text-green-600\">\u5386\u65f6\u79d1\u6280\u53d1\u8d77\uff0cAI\u89e3\u51b3\u4f60\u7684\u5fc3\u7406\u56f0\u60d1<\/p>\n <button class=\"mt-2 text-xs bg-green-100 text-green-600 py-1 px-3 rounded-full btn-hover\">\n \u5f00\u59cb\u804a\u5929\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-4 mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <div>\n <h3 class=\"font-medium\">\u9884\u7ea6\u4e13\u5bb6<\/h3>\n <p class=\"text-xs text-gray-500\">\u4e00\u952e\u53d1\u9001\u4efb\u52a1<\/p>\n <\/div>\n <button class=\"bg-primary text-white py-1 px-3 rounded-full text-sm btn-hover\">\n \u53bb\u9884\u7ea6\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">5\u6708\u7cbe\u9009\u6587\u7ae0\u4efb\u52a1<\/h3>\n <div class=\"flex items-center gap-1 text-xs text-gray-500\">\n <div class=\"w-2 h-2 rounded-full bg-orange-500\"><\/div>\n <span>3 days<\/span>\n <\/div>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article1\/300\/100\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-20 object-cover\">\n <div class=\"p-3\">\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u9762\u5bf9\u4eb2\u53cb\u79bb\u4e16\u540e\u7684\u54c0\u75db<\/h4>\n <p class=\"text-xs text-gray-500\">\u76f4\u9762\u54c0\u4f24\uff0c\u5145\u5206\u54c0\u4f24<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/300\/100\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-20 object-cover\">\n <div class=\"p-3\">\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u5efa\u7acb\u5065\u5eb7\u7684\u4eb2\u5bc6\u5173\u7cfb<\/h4>\n <p class=\"text-xs text-gray-500\">\u6c9f\u901a\u4e0e\u8fb9\u754c\u7684\u5e73\u8861<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-medium mb-3\">\u5fc3\u60c5\u7edf\u8ba1\u4e0e\u5206\u6790<\/h3>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 mb-4\">\n <h4 class=\"font-medium text-sm mb-2\">\u5fc3\u60c5\u65e5\u5386<\/h4>\n <div class=\"grid grid-cols-7 gap-1 text-center text-xs\">\n <div class=\"text-gray-500\">\u4e00<\/div>\n <div class=\"text-gray-500\">\u4e8c<\/div>\n <div class=\"text-gray-500\">\u4e09<\/div>\n <div class=\"text-gray-500\">\u56db<\/div>\n <div class=\"text-gray-500\">\u4e94<\/div>\n <div class=\"text-gray-500\">\u516d<\/div>\n <div class=\"text-gray-500\">\u65e5<\/div>\n \n <div class=\"text-gray-400\">5<\/div>\n <div class=\"text-gray-400\">6<\/div>\n <div class=\"text-gray-400\">7<\/div>\n <div class=\"text-gray-400\">8<\/div>\n <div class=\"text-gray-400\">9<\/div>\n <div class=\"text-gray-400\">10<\/div>\n <div class=\"text-gray-400\">11<\/div>\n \n <div class=\"text-gray-400\">12<\/div>\n <div class=\"text-gray-400\">13<\/div>\n <div class=\"bg-primary\/20 rounded-full h-6 flex items-center justify-center text-primary\">14<\/div>\n <div class=\"text-gray-400\">15<\/div>\n <div class=\"text-gray-400\">16<\/div>\n <div class=\"text-gray-400\">17<\/div>\n <div class=\"text-gray-400\">18<\/div>\n \n <div class=\"text-gray-400\">19<\/div>\n <div class=\"text-gray-400\">20<\/div>\n <div class=\"text-gray-400\">21<\/div>\n <div class=\"text-gray-400\">22<\/div>\n <div class=\"text-gray-400\">23<\/div>\n <div class=\"text-gray-400\">24<\/div>\n <div class=\"text-gray-400\">25<\/div>\n \n <div class=\"text-gray-400\">26<\/div>\n <div class=\"text-gray-400\">27<\/div>\n <div class=\"text-gray-400\">28<\/div>\n <div class=\"text-gray-400\">29<\/div>\n <div class=\"text-gray-400\">30<\/div>\n <div class=\"text-gray-400\">31<\/div>\n <div class=\"text-gray-400\">1<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3\">\n <h4 class=\"font-medium text-sm mb-2\">\u5fc3\u60c5\u8d8b\u52bf<\/h4>\n <div class=\"grid grid-cols-7 gap-1 text-center text-xs\">\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-1\">\ud83d\ude0a<\/div>\n <span class=\"text-xs\">\u7f8e\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-green-50 rounded-full flex items-center justify-center text-green-600 mb-1\">\ud83d\ude42<\/div>\n <span class=\"text-xs\">\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 mb-1\">\ud83d\ude10<\/div>\n <span class=\"text-xs\">\u4e00\u822c<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-red-50 rounded-full flex items-center justify-center text-red-600 mb-1\">\ud83d\ude41<\/div>\n <span class=\"text-xs\">\u4e0d\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-1\">\ud83d\ude22<\/div>\n <span class=\"text-xs\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <div class=\"w-6\"><\/div>\n <div class=\"w-6\"><\/div>\n \n <div class=\"h-12 bg-green-100 rounded\"><\/div>\n <div class=\"h-8 bg-green-50 rounded\"><\/div>\n <div class=\"h-6 bg-gray-100 rounded\"><\/div>\n <div class=\"h-4 bg-red-50 rounded\"><\/div>\n <div class=\"h-2 bg-red-100 rounded\"><\/div>\n <div class=\"h-1 bg-gray-100 rounded\"><\/div>\n <div class=\"h-1 bg-gray-100 rounded\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5bb6\u5ead\u5171\u8bbf<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-search\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-neutral-light rounded-lg p-3 mb-6\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa fa-search text-gray-400\"><\/i>\n <input type=\"text\" class=\"bg-transparent w-full outline-none\" placeholder=\"\u641c\u7d22...\">\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n \n <div class=\"mb-6\">\n <h3 class=\"font-medium mb-3\">AI\u60c5\u611f\u5173\u7cfb\u6d4b\u8bc4<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u60c5\u611f\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-child\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u4eb2\u5b50\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-line-chart\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u4ee3\u9645\u6d4b\u8bc4<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h3 class=\"font-medium mb-3\">\u5bb6\u5ead\u6d3b\u52a8<\/h3>\n <div class=\"flex justify-between items-center mb-2\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-xs\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span class=\"text-sm\">\u6210\u5c31\u52cb\u7ae0<\/span>\n <\/div>\n <div class=\"flex items-center gap-1 text-xs text-gray-500\">\n <span>\u5df2\u5b8c\u62104\/200<\/span>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/family1\/200\/100\" alt=\"\u6d3b\u52a8\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5982\u4f55\u9762\u5bf9\u4eb2\u53cb\u79bb\u4e16\u540e\u7684\u54c0\u75db<\/h4>\n <p class=\"text-xs text-gray-500\">\u76f4\u9762\u54c0\u4f24\uff0c\u5145\u5206\u54c0\u4f24<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u514d\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/family2\/200\/100\" alt=\"\u6d3b\u52a8\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5e38\u4e3a\u8fc7\u53bb\u7684\u9009\u62e9\u800c\u540e\u6094<\/h4>\n <p class=\"text-xs text-gray-500\">\u7406\u89e3\u8fc7\u53bb\uff0c\u76f4\u9762\u5f53\u4e0b<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-orange-100 text-orange-600 py-0.5 px-2 rounded\">\u4ed8\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-medium mb-3\">\u4eb2\u5b50\u6c9f\u901a\u5e93<\/h3>\n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/parent1\/200\/100\" alt=\"\u6c9f\u901a\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5982\u4f55\u4e0e\u9752\u6625\u671f\u5b69\u5b50\u6c9f\u901a<\/h4>\n <p class=\"text-xs text-gray-500\">\u5efa\u7acb\u4fe1\u4efb\uff0c\u6709\u6548\u503e\u542c<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u514d\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/parent2\/200\/100\" alt=\"\u6c9f\u901a\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u57f9\u517b\u5b69\u5b50\u7684\u60c5\u7eea\u7ba1\u7406\u80fd\u529b<\/h4>\n <p class=\"text-xs text-gray-500\">\u4ece\u8bc6\u522b\u5230\u8868\u8fbe\u7684\u5168\u6d41\u7a0b<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-orange-100 text-orange-600 py-0.5 px-2 rounded\">\u4ed8\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"w-full mt-4 py-2 text-sm bg-white border border-gray-200 rounded-lg btn-hover\">\n \u67e5\u770b\u5168\u90e8 >\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">AI\u60c5\u611f\u5173\u7cfb\u6d4b\u8bc4<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test1\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u591a\u7ef4\u5ea6\u5b8c\u7f8e\u4e3b\u4e49\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u62c6\u89e3\u4f60\u7684\u5b8c\u7f8e\u4e3b\u4e49\u503e\u5411<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a58.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">188\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test2\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u4eb2\u5bc6\u5173\u7cfb\u6ee1\u610f\u5ea6\u8bc4\u4f30<\/h4>\n <p class=\"text-xs text-gray-500\">\u5168\u9762\u89e3\u6790\u4f60\u7684\u60c5\u611f\u72b6\u6001<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a58.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">256\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test3\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u60c5\u7eea\u8bc6\u522b\u80fd\u529b\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u4e86\u89e3\u4f60\u7684\u60c5\u7eea\u611f\u77e5\u6c34\u5e73<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded\">324\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test4\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u6c9f\u901a\u98ce\u683c\u7c7b\u578b\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u53d1\u73b0\u4f60\u7684\u72ec\u7279\u6c9f\u901a\u6a21\u5f0f<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded\">412\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test5\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u51b2\u7a81\u89e3\u51b3\u65b9\u5f0f\u8bc4\u4f30<\/h4>\n <p class=\"text-xs text-gray-500\">\u63a2\u7d22\u4f60\u7684\u51b2\u7a81\u5e94\u5bf9\u7b56\u7565<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a512.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">178\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-6 text-center text-xs text-gray-500\">\n <p>\u6ca1\u627e\u5230\u5408\u9002\u7684\u5185\u5bb9\uff1f\u6b22\u8fce\u8ddf\u6211\u4eec\u63d0\u5efa\u8bae<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u4f60\u7684\u5fc3\u60c5\u5982\u4f55<\/h3>\n \n <div class=\"space-y-4\">\n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude0a\n <\/div>\n <span class=\"text-sm font-medium\">\u7f8e\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude42\n <\/div>\n <span class=\"text-sm font-medium\">\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-2\">\n \ud83d\ude10\n <\/div>\n <span class=\"text-sm font-medium\">\u4e00\u822c<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude41\n <\/div>\n <span class=\"text-sm font-medium\">\u4e0d\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude22\n <\/div>\n <span class=\"text-sm font-medium\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-arrow-right mr-2\"><\/i>\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u4f60\u611f\u53d7\u5230\u4e86\u54ea\u4e9b\u60c5\u7eea\uff1f<\/h3>\n \n <div class=\"grid grid-cols-3 gap-2\">\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5f00\u5fc3\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5174\u594b\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u60ca\u559c\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u671f\u5f85\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u81ea\u8c6a\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6ee1\u610f\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5e73\u9759\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6e29\u6696\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5b89\u5168\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u751c\u871c\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u4fe1\u4efb\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u611f\u6fc0\n <\/button>\n <\/div>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u8d1f\u9762\u60c5\u7eea<\/h4>\n <div class=\"grid grid-cols-3 gap-2\">\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u751f\u6c14\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u96be\u8fc7\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u7126\u8651\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6050\u60e7\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5931\u671b\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5b64\u72ec\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6127\u759a\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5ac9\u5992\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u75b2\u60eb\n <\/button>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-arrow-right mr-2\"><\/i>\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u53d1\u751f\u4e86\u4ec0\u4e48\u4e8b\uff1f<\/h3>\n \n <textarea rows=\"8\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition resize-none\" placeholder=\"\u8bf7\u63cf\u8ff0\u4eca\u5929\u53d1\u751f\u7684\u4e8b\u60c5\uff0c\u4ee5\u53ca\u662f\u4ec0\u4e48\u8ba9\u4f60\u6709\u8fd9\u6837\u7684\u611f\u53d7...\"><\/textarea>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u76f8\u5173\u4eba\u7269<\/h4>\n <div class=\"grid grid-cols-4 gap-2\">\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <span>\u81ea\u5df1<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <span>\u4f34\u4fa3<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-child\"><\/i>\n <\/div>\n <span>\u5b69\u5b50<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <span>\u6dfb\u52a0<\/span>\n <\/button>\n <\/div>\n \n <\/div>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u6dfb\u52a0\u9644\u4ef6\uff08\u53ef\u9009\uff09<\/h4>\n <div class=\"grid grid-cols-2 gap-3\">\n <button class=\"flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition\">\n <i class=\"fa fa-weixin text-2xl text-gray-400 mb-2\"><\/i>\n <span class=\"text-xs text-gray-500\">\u4ece\u5fae\u4fe1\u5bfc\u5165<\/span>\n <\/button>\n <button class=\"flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition\">\n <i class=\"fa fa-upload text-2xl text-gray-400 mb-2\"><\/i>\n <span class=\"text-xs text-gray-500\">\u4e0a\u4f20\u56fe\u7247<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n \u5b8c\u6210\u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u53d1\u73b0<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-bell\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-neutral-light rounded-lg p-3 mb-6\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa fa-search text-gray-400\"><\/i>\n <input type=\"text\" class=\"bg-transparent w-full outline-none\" placeholder=\"\u641c\u7d22\u6587\u7ae0\u3001\u8bdd\u9898\u3001\u8bfe\u7a0b...\">\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n \n <div class=\"flex gap-2 mb-6 overflow-x-auto pb-2\">\n <button class=\"px-4 py-2 bg-primary text-white rounded-full text-sm whitespace-nowrap\">\u63a8\u8350<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u60c5\u7eea\u7ba1\u7406<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u4eb2\u5bc6\u5173\u7cfb<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u4eb2\u5b50\u6559\u80b2<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u5bb6\u5ead\u6c9f\u901a<\/button>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">\u7cbe\u9009\u6587\u7ae0<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a<\/a>\n <\/div>\n \n <div class=\"space-y-4\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article3\/300\/150\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-32 object-cover\">\n <div class=\"p-3\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u60c5\u7eea\u7ba1\u7406<\/span>\n <span class=\"text-xs text-gray-500\">5\u670812\u65e5<\/span>\n <\/div>\n <h4 class=\"font-medium text-sm mb-2\">\u5982\u4f55\u5728\u538b\u529b\u4e0b\u4fdd\u6301\u51b7\u9759\uff1a7\u4e2a\u5b9e\u7528\u6280\u5de7<\/h4>\n <p class=\"text-xs text-gray-500 line-clamp-2\">\u5728\u73b0\u4ee3\u5feb\u8282\u594f\u7684\u751f\u6d3b\u4e2d\uff0c\u538b\u529b\u65e0\u5904\u4e0d\u5728\u3002\u672c\u6587\u5c06\u5206\u4eab7\u4e2a\u7ecf\u8fc7\u9a8c\u8bc1\u7684\u5b9e\u7528\u6280\u5de7\uff0c\u5e2e\u52a9\u4f60\u5728\u9ad8\u538b\u73af\u5883\u4e0b\u4fdd\u6301\u51b7\u9759\u548c\u6e05\u6670\u7684\u601d\u7ef4…<\/p>\n <div class=\"flex justify-between items-center mt-3\">\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-eye\"><\/i> 1.2k\n <\/span>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-comment\"><\/i> 32\n <\/span>\n <\/div>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article4\/300\/150\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-32 object-cover\">\n <div class=\"p-3\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs bg-blue-100 text-blue-600 py-0.5 px-2 rounded\">\u4eb2\u5bc6\u5173\u7cfb<\/span>\n <span class=\"text-xs text-gray-500\">5\u670810\u65e5<\/span>\n <\/div>\n <h4 class=\"font-medium text-sm mb-2\">\u91cd\u5efa\u4fe1\u4efb\uff1a\u4fee\u590d\u5173\u7cfb\u4e2d\u7684\u88c2\u75d5<\/h4>\n <p class=\"text-xs text-gray-500 line-clamp-2\">\u4fe1\u4efb\u662f\u4efb\u4f55\u5065\u5eb7\u5173\u7cfb\u7684\u57fa\u77f3\uff0c\u4f46\u4e00\u65e6\u88ab\u7834\u574f\uff0c\u91cd\u5efa\u4fe1\u4efb\u9700\u8981\u65f6\u95f4\u548c\u52aa\u529b\u3002\u672c\u6587\u5c06\u63a2\u8ba8\u5982\u4f55\u6709\u6548\u4fee\u590d\u5173\u7cfb\u4e2d\u7684\u4fe1\u4efb\u95ee\u9898…<\/p>\n <div class=\"flex justify-between items-center mt-3\">\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-eye\"><\/i> 2.5k\n <\/span>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-comment\"><\/i> 78\n <\/span>\n <\/div>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">\u70ed\u95e8\u8bdd\u9898<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a<\/a>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 card-hover\">\n <h4 class=\"font-medium text-sm mb-2\"># \u5982\u4f55\u4e0e\u4f34\u4fa3\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-xs text-gray-500 mb-2\">1.2k \u4eba\u53c2\u4e0e\u8ba8\u8bba<\/p>\n <div class=\"flex -space-x-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user1\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user2\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user3\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <div class=\"w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-xs text-gray-600\">+24<\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 card-hover\">\n <h4 class=\"font-medium text-sm mb-2\"># \u5b69\u5b50\u53db\u9006\u671f\u7684\u5e94\u5bf9\u7b56\u7565<\/h4>\n <p class=\"text-xs text-gray-500 mb-2\">856 \u4eba\u53c2\u4e0e\u8ba8\u8bba<\/p>\n <div class=\"flex -space-x-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user4\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user5\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user6\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <div class=\"w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-xs text-gray-600\">+18<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"bg-secondary p-6 text-neutral\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-16 h-16 rounded-full bg-white flex items-center justify-center\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/100\/100\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-full h-full object-cover rounded-full\">\n <\/div>\n <div>\n <h3 class=\"font-semibold text-lg\">\u65e9\u8d77\u5927\u738b<\/h3>\n <p class=\"text-gray-600 text-sm\">\u5df2\u52a0\u5165 128 \u5929<\/p>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-3 gap-2 mt-6\">\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">42<\/p>\n <p class=\"text-gray-600 text-xs\">\u5fc3\u60c5\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">8<\/p>\n <p class=\"text-gray-600 text-xs\">\u5b8c\u6210\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">4<\/p>\n <p class=\"text-gray-600 text-xs\">\u6210\u5c31\u52cb\u7ae0<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto p-4\">\n <div class=\"space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <span>\u6211\u7684\u8bb0\u5f55<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span>\u6211\u7684\u6d4b\u8bc4<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-bookmark\"><\/i>\n <\/div>\n <span>\u6211\u7684\u6536\u85cf<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-users\"><\/i>\n <\/div>\n <span>\u5bb6\u5ead\u7ba1\u7406<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-cog\"><\/i>\n <\/div>\n <span>\u8bbe\u7f6e<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-question-circle\"><\/i>\n <\/div>\n <span>\u5e2e\u52a9\u4e0e\u53cd\u9988<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-6\">\n <button class=\"w-full flex items-center justify-center gap-2 p-3 bg-red-50 rounded-lg text-red-600 border border-red-100 card-hover\">\n <i class=\"fa fa-sign-out\"><\/i>\n <span>\u9000\u51fa\u767b\u5f55<\/span>\n <\/button>\n <\/div>\n \n <div class=\"mt-8 text-center\">\n <p class=\"text-xs text-gray-400\">\n \u5fc3\u8c10XinSync v1.0.0<br>\n \u00a9 2025 \u5fc3\u94fe\u60c5\u667a\u6570\u636e\u79d1\u6280(\u4e0a\u6d77)\u6709\u9650\u516c\u53f8\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u8c10XinSync \u5fc3\u8c10XinSync \u6807\u51c6APP\u98ce\u683c\u8bbe\u8ba1 \u00b7 \u9002\u914diPhone 9:41 \u55e8\uff0cChris \ud83d\udc4b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":424,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-937","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":35,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937\/revisions"}],"predecessor-version":[{"id":1620,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937\/revisions\/1620"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/424"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":937,"date":"2025-06-19T12:19:19","date_gmt":"2025-06-19T04:19:19","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=937"},"modified":"2025-07-29T14:28:57","modified_gmt":"2025-07-29T06:28:57","slug":"syncapp","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartfamily\/syncapp\/","title":{"rendered":"XinSync APP"},"content":{"rendered":"\n\n\n\n\n \n \n \u5fc3\u8c10XinSync<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF7A9C', \/\/ \u4e3b\u7c89\u8272\n secondary: '#FFE6EC', \/\/ \u6d45\u7c89\u8272\n neutral: '#333333', \/\/ \u6df1\u7070\u8272\n 'neutral-light': '#F5F5F5', \/\/ \u6d45\u7070\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .app-shadow {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);\n }\n .card-hover {\n transition: transform 0.2s ease;\n }\n .card-hover:hover {\n transform: translateY(-2px);\n }\n .nav-active {\n color: #FF7A9C;\n }\n .iphone16 {\n width: 393px; \/* iPhone16 \u5bbd\u5ea6 *\/\n height: 852px; \/* iPhone16 \u9ad8\u5ea6 *\/\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n }\n }\n <\/style>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-gray-100 font-sans text-neutral min-h-screen py-8\">\n <div class=\"container mx-auto px-4\">\n <header class=\"text-center mb-8\">\n <div class=\"flex items-center justify-center gap-2 mb-2\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-8 h-8 object-contain\">\n <h1 class=\"text-xl font-bold text-primary\">\u5fc3\u8c10XinSync<\/h1>\n <\/div>\n <p class=\"text-gray-500 text-sm\">\u6807\u51c6APP\u98ce\u683c\u8bbe\u8ba1 \u00b7 \u9002\u914diPhone<\/p>\n <\/header>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:41<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4\">\n <div class=\"flex justify-between items-center\">\n <div>\n <h2 class=\"text-lg font-medium\">\u55e8\uff0cChris \ud83d\udc4b<\/h2>\n <p class=\"text-gray-500 text-sm\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/p>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/60\/60\" alt=\"Chris\u5934\u50cf\" class=\"w-10 h-10 rounded-full object-cover border-2 border-primary\">\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"grid grid-cols-2 gap-3\">\n <button class=\"bg-primary text-white py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center\">\n <i class=\"fa fa-pencil-square-o mr-2\"><\/i> \u8bb0\u5f55\u5fc3\u60c5\n <\/button>\n <button class=\"bg-white border border-gray-200 text-neutral py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center\">\n <i class=\"fa fa-comments-o mr-2\"><\/i> \u60c5\u611f\u5bf9\u8bdd\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u4eca\u65e5\u63a8\u8350<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"bg-gradient-to-r from-primary\/10 to-purple-100 rounded-xl p-4\">\n <div class=\"flex items-start gap-3\">\n <div class=\"w-12 h-12 rounded-lg bg-white flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-heart-o text-xl\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm mb-1\">5\u5206\u949f\u60c5\u7eea\u51a5\u60f3<\/h4>\n <p class=\"text-gray-600 text-xs mb-2\">\u7f13\u89e3\u538b\u529b\uff0c\u627e\u56de\u5185\u5fc3\u5e73\u9759<\/p>\n <button class=\"text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u7acb\u5373\u5f00\u59cb\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <h3 class=\"font-semibold mb-3\">\u529f\u80fd\u4e2d\u5fc3<\/h3>\n \n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-line-chart\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u60c5\u611f\u5206\u6790<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u60c5\u611f\u8bfe\u7a0b<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-users\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u5173\u7cfb\u6d4b\u8bc4<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u5fc3\u60c5\u65e5\u5386<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-comments\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u6c9f\u901a\u6280\u5de7<\/p>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/div>\n <p class=\"text-xs\">\u66f4\u591a<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u52a8\u6001<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u5168\u90e8<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex gap-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/author1\/50\/50\" alt=\"\u4f5c\u8005\u5934\u50cf\" class=\"w-8 h-8 rounded-full object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u5efa\u7acb\u5065\u5eb7\u7684\u8fb9\u754c\u611f<\/h4>\n <p class=\"text-gray-500 text-xs\">\u60c5\u611f\u7814\u7a76\u6240 \u00b7 2\u5c0f\u65f6\u524d<\/p>\n <\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article\/80\/60\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-16 h-12 rounded-lg object-cover\">\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div class=\"flex gap-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/author2\/50\/50\" alt=\"\u4f5c\u8005\u5934\u50cf\" class=\"w-8 h-8 rounded-full object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u4eb2\u5bc6\u5173\u7cfb\u4e2d\u7684\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-gray-500 text-xs\">\u5fc3\u7406\u4e13\u5bb6\u674e\u6559\u6388 \u00b7 \u6628\u5929<\/p>\n <\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/80\/60\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-16 h-12 rounded-lg object-cover\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:42<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u60c5\u611f\u8d26\u6237<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <div class=\"bg-gradient-to-r from-primary to-pink-400 rounded-2xl p-5 text-white\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <h3 class=\"font-medium\">Chris \u7684\u60c5\u611f\u8d26\u6237<\/h3>\n <p class=\"text-sm opacity-90 mt-1\">\u603b\u4f59\u989d: 1,250 \u60c5\u611f\u503c<\/p>\n <\/div>\n <button class=\"bg-white\/20 backdrop-blur-sm rounded-full w-8 h-8 flex items-center justify-center\">\n <i class=\"fa fa-refresh\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"grid grid-cols-3 gap-2 mb-5\">\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u4eb2\u5bc6\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">680<\/p>\n <\/div>\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u4eb2\u5b50\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">320<\/p>\n <\/div>\n <div class=\"bg-white\/20 backdrop-blur-sm rounded-xl p-3 text-center\">\n <p class=\"text-xs opacity-90\">\u5bb6\u5ead\u5173\u7cfb<\/p>\n <p class=\"font-bold text-lg\">250<\/p>\n <\/div>\n <\/div>\n \n <button class=\"w-full bg-white text-primary py-2.5 rounded-xl text-sm font-medium\">\n \u67e5\u770b\u8d26\u6237\u660e\u7ec6\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u6700\u8fd1\u4ea4\u6613<\/h3>\n <span class=\"text-primary text-xs\">\u67e5\u770b\u5168\u90e8<\/span>\n <\/div>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u6bcf\u65e5\u611f\u6069\u7ec3\u4e60<\/h4>\n <p class=\"text-gray-500 text-xs\">\u4eca\u5929 08:30<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-green-600\">+20<\/span>\n <\/div>\n \n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u5b8c\u6210\u60c5\u611f\u6d4b\u8bc4<\/h4>\n <p class=\"text-gray-500 text-xs\">\u6628\u5929 19:45<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-green-600\">+50<\/span>\n <\/div>\n \n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600\">\n <i class=\"fa fa-minus\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u60c5\u611f\u54a8\u8be2\u670d\u52a1<\/h4>\n <p class=\"text-gray-500 text-xs\">05-12 15:20<\/p>\n <\/div>\n <\/div>\n <span class=\"font-medium text-red-600\">-100<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u4efb\u52a1<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a\u4efb\u52a1<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-4 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u6df1\u5ea6\u6c9f\u901a\u7ec3\u4e60<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u4e0e\u4f34\u4fa3\u8fdb\u884c30\u5206\u949f\u6df1\u5ea6\u4ea4\u6d41<\/p>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded-full\">+50\u60c5\u611f\u503c<\/span>\n <span class=\"text-xs text-gray-500\">30\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <button class=\"bg-primary\/10 text-primary py-1.5 px-3 rounded-lg text-xs font-medium\">\n \u53bb\u5b8c\u6210\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-4 card-hover\">\n <div class=\"flex justify-between items-start\">\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u5bb6\u5ead\u76f8\u518c\u6574\u7406<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u6574\u7406\u5e76\u5206\u4eab\u5bb6\u5ead\u7167\u7247\u56de\u5fc6<\/p>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded-full\">+30\u60c5\u611f\u503c<\/span>\n <span class=\"text-xs text-gray-500\">45\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <button class=\"bg-primary\/10 text-primary py-1.5 px-3 rounded-lg text-xs font-medium\">\n \u53bb\u5b8c\u6210\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:45<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u4ee3\u9645\u4f20\u627f<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-plus\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <h3 class=\"font-semibold mb-4\">\u5bb6\u65cf\u5173\u7cfb\u6811<\/h3>\n \n <div class=\"bg-neutral-light rounded-2xl p-5 mb-6\">\n <div class=\"flex flex-col items-center\">\n \n <div class=\"w-full max-w-xs mb-6\">\n \n <div class=\"flex justify-center mb-8 relative\">\n <div class=\"absolute top-8 left-1\/2 -translate-x-1\/2 w-0.5 h-6 bg-gray-300\"><\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary flex items-center justify-center text-white text-xs font-medium z-10\">\n \u7956\u7236\u6bcd\n <\/div>\n <\/div>\n \n \n <div class=\"flex justify-center gap-6 mb-8 relative\">\n <div class=\"absolute top-8 left-1\/2 -translate-x-1\/2 w-[calc(100%-2rem)] h-0.5 bg-gray-300\"><\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary\/80 flex items-center justify-center text-white text-xs font-medium z-10\">\n \u7236\u4eb2\n <\/div>\n <div class=\"w-14 h-14 rounded-full bg-primary\/80 flex items-center justify-center text-white text-xs font-medium z-10\">\n \u6bcd\u4eb2\n <\/div>\n <\/div>\n \n \n <div class=\"flex justify-center gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-primary\/60 flex items-center justify-center text-white text-xs font-medium border-2 border-white\">\n Chris\n <\/div>\n <div class=\"w-12 h-12 rounded-full bg-primary\/60 flex items-center justify-center text-white text-xs font-medium\">\n \u5144\u5f1f\u59d0\u59b9\n <\/div>\n <\/div>\n <\/div>\n \n <button class=\"text-sm text-primary flex items-center\">\n \u67e5\u770b\u5b8c\u6574\u5bb6\u65cf\u6811 <i class=\"fa fa-angle-right ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u5bb6\u65cf\u6545\u4e8b\u4e0e\u4f20\u7edf<\/h3>\n <button class=\"text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u6dfb\u52a0\u6545\u4e8b\n <\/button>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex items-start gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/grandpa\/60\/60\" alt=\"\u7956\u7236\u7167\u7247\" class=\"w-12 h-12 rounded-full object-cover flex-shrink-0\">\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u7956\u7236\u7684\u4eba\u751f\u667a\u6167<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u7531\u7236\u4eb2\u8bb0\u5f55 \u00b7 2023\u5e7410\u6708<\/p>\n <p class=\"text-xs text-gray-600 line-clamp-2\">\u5173\u4e8e\u5982\u4f55\u9762\u5bf9\u4eba\u751f\u632b\u6298\u7684\u5b9d\u8d35\u7ecf\u9a8c\uff0c\u4ee5\u53ca\u5bb6\u65cf\u4ee3\u4ee3\u76f8\u4f20\u7684\u5904\u4e16\u54f2\u5b66…<\/p>\n <button class=\"mt-2 text-xs text-primary\">\u9605\u8bfb\u5168\u6587<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex items-start gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/grandma\/60\/60\" alt=\"\u7956\u6bcd\u7167\u7247\" class=\"w-12 h-12 rounded-full object-cover flex-shrink-0\">\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u7956\u6bcd\u7684\u4f20\u7edf\u98df\u8c31<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u7531\u6bcd\u4eb2\u8bb0\u5f55 \u00b7 2023\u5e748\u6708<\/p>\n <p class=\"text-xs text-gray-600 line-clamp-2\">\u5bb6\u65cf\u4f20\u627f\u4e09\u4ee3\u7684\u79d8\u65b9\uff0c\u5305\u542b\u4e86\u5bf9\u751f\u6d3b\u7684\u70ed\u7231\u548c\u5bf9\u5bb6\u4eba\u7684\u5173\u6000…<\/p>\n <button class=\"mt-2 text-xs text-primary\">\u9605\u8bfb\u5168\u6587<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <h3 class=\"font-semibold mb-4\">\u4ee3\u9645\u6a21\u5f0f\u5206\u6790<\/h3>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-4 mb-4 card-hover\">\n <h4 class=\"font-medium text-sm mb-3\">\u60c5\u611f\u8868\u8fbe\u65b9\u5f0f<\/h4>\n <div class=\"space-y-3\">\n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>\u7956\u7236\u8f88<\/span>\n <span>\u542b\u84c4\u578b (65%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 65%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>\u7236\u6bcd\u8f88<\/span>\n <span>\u5e73\u8861\u578b (42%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 42%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between text-xs mb-1\">\n <span>Chris<\/span>\n <span>\u5f00\u653e\u578b (78%)<\/span>\n <\/div>\n <div class=\"w-full bg-gray-100 rounded-full h-2\">\n <div class=\"bg-primary h-2 rounded-full\" style=\"width: 78%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <button class=\"w-full bg-primary text-white py-3 rounded-xl text-sm font-medium\">\n \u751f\u6210\u5b8c\u6574\u4ee3\u9645\u5206\u6790\u62a5\u544a\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:50<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"bg-gradient-to-b from-primary\/10 to-white pt-6 pb-4\">\n <div class=\"px-6 flex items-center gap-4\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/100\/100\" alt=\"Chris\u7684\u5934\u50cf\" class=\"w-16 h-16 rounded-full object-cover border-2 border-white shadow-sm\">\n <div>\n <h2 class=\"text-lg font-semibold\">Chris<\/h2>\n <p class=\"text-gray-500 text-sm\">\u60c5\u611f\u8d26\u6237\u4f1a\u5458 \u00b7 128\u5929<\/p>\n <button class=\"mt-2 text-xs bg-primary text-white py-1 px-3 rounded-full\">\n \u7f16\u8f91\u8d44\u6599\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mt-6 grid grid-cols-3 gap-2\">\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">42<\/p>\n <p class=\"text-gray-500 text-xs\">\u5fc3\u60c5\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">8<\/p>\n <p class=\"text-gray-500 text-xs\">\u5b8c\u6210\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">4<\/p>\n <p class=\"text-gray-500 text-xs\">\u6210\u5c31\u52cb\u7ae0<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-4\">\n <div class=\"space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u8bb0\u5f55<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u6d4b\u8bc4<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u6211\u7684\u6536\u85cf<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-piggy-bank\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-history\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-6 space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n <i class=\"fa fa-cog\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u8bbe\u7f6e<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n <i class=\"fa fa-question-circle-o\"><\/i>\n <\/div>\n <span class=\"font-medium\">\u5e2e\u52a9\u4e0e\u53cd\u9988<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-8\">\n <button class=\"w-full flex items-center justify-center gap-2 p-3 bg-red-50 rounded-xl text-red-600 border border-red-100 card-hover\">\n <i class=\"fa fa-sign-out\"><\/i>\n <span class=\"font-medium\">\u9000\u51fa\u767b\u5f55<\/span>\n <\/button>\n <\/div>\n \n <div class=\"mt-8 text-center pb-4\">\n <div class=\"flex items-center justify-center gap-2 mb-2\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-6 h-6 object-contain\">\n <span class=\"text-sm font-medium text-primary\">\u5fc3\u8c10XinSync<\/span>\n <\/div>\n <p class=\"text-xs text-gray-400\">\n v1.0.0<br>\n \u00a9 2023 \u5fc3\u8c10\u79d1\u6280\u6709\u9650\u516c\u53f8\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:30<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u8bb0\u5f55\u5fc3\u60c5<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-5\">\n <h3 class=\"font-semibold mb-4\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/h3>\n \n <div class=\"grid grid-cols-5 gap-2 mb-8\">\n <div class=\"flex flex-col items-center p-3 bg-green-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude0a\n <\/div>\n <span class=\"text-xs\">\u7f8e\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-green-50\/50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100\/50 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude42\n <\/div>\n <span class=\"text-xs\">\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-gray-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-2\">\n \ud83d\ude10\n <\/div>\n <span class=\"text-xs\">\u4e00\u822c<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-red-50\/50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100\/50 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude41\n <\/div>\n <span class=\"text-xs\">\u4e0d\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-red-50 rounded-xl card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude22\n <\/div>\n <span class=\"text-xs\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">\u53ef\u4ee5\u63cf\u8ff0\u4e00\u4e0b\u5417\uff1f<\/h3>\n \n <div class=\"flex flex-wrap gap-2 mb-5\">\n <span class=\"bg-primary\/10 text-primary text-xs py-1.5 px-3 rounded-full\">\u5f00\u5fc3<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u5e73\u9759<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u75b2\u60eb<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u7126\u8651<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6124\u6012<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6cae\u4e27<\/span>\n <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6dfb\u52a0\u6807\u7b7e<\/span>\n <\/div>\n \n \n <div>\n <textarea \n class=\"w-full border border-gray-200 rounded-xl p-3 text-sm placeholder-gray-400 resize-none h-32\"\n placeholder=\"\u8be6\u7ec6\u63cf\u8ff0\u4e00\u4e0b\u4eca\u5929\u7684\u5fc3\u60c5\u548c\u611f\u53d7\u5427...\"\n ><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <h3 class=\"font-semibold mb-3\">\u76f8\u5173\u4eba\u5458<\/h3>\n \n <div class=\"flex flex-wrap gap-3\">\n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person1\/40\/40\" alt=\"\u4f34\u4fa3\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u4f34\u4fa3<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person2\/40\/40\" alt=\"\u5bb6\u4eba\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u5bb6\u4eba<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <div class=\"flex items-center gap-2 bg-gray-100 rounded-full px-3 py-1.5\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/person3\/40\/40\" alt=\"\u670b\u53cb\" class=\"w-6 h-6 rounded-full\">\n <span class=\"text-xs\">\u670b\u53cb<\/span>\n <button class=\"text-gray-400 text-xs\">\u00d7<\/button>\n <\/div>\n \n <button class=\"flex items-center gap-2 bg-white border border-gray-200 rounded-full px-3 py-1.5\">\n <i class=\"fa fa-plus text-gray-400 text-xs\"><\/i>\n <span class=\"text-xs\">\u6dfb\u52a0<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 pb-6\">\n <button class=\"w-full bg-primary text-white py-3 rounded-xl font-medium text-sm\">\n \u4fdd\u5b58\u8bb0\u5f55\n <\/button>\n <p class=\"text-center text-xs text-gray-400 mt-3\">\n \u6bcf\u6b21\u8bb0\u5f55\u53ef\u83b7\u5f975\u60c5\u611f\u503c\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden\">\n <div class=\"p-2\">\n <div class=\"iphone16 bg-white rounded-[36px] border-8 border-gray-800 relative\">\n \n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-36 h-6 bg-gray-800 rounded-b-[16px] z-10\"><\/div>\n \n \n <div class=\"absolute top-6 left-4 right-4 flex justify-between text-white text-xs z-20\">\n <span>9:35<\/span>\n <div class=\"flex gap-1\">\n <i class=\"fa fa-signal\"><\/i>\n <i class=\"fa fa-wifi\"><\/i>\n <i class=\"fa fa-battery-full\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"h-full pt-14 pb-20 overflow-y-auto\">\n \n <div class=\"px-6 py-4 border-b border-gray-100\">\n <div class=\"flex items-center justify-between\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-lg font-semibold\">\u53d1\u73b0<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 py-3\">\n <div class=\"relative\">\n <input \n type=\"text\" \n class=\"w-full bg-gray-100 rounded-xl py-3 pl-10 pr-4 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary\/30\"\n placeholder=\"\u641c\u7d22\u60c5\u611f\u6587\u7ae0\u3001\u6d4b\u8bc4\u6216\u8bfe\u7a0b...\"\n >\n <i class=\"fa fa-search absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-5\">\n <div class=\"flex overflow-x-auto pb-2 gap-3 scrollbar-hide\">\n <button class=\"bg-primary text-white text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5168\u90e8\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u60c5\u611f\u6d4b\u8bc4\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u4e13\u5bb6\u8bfe\u7a0b\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5173\u7cfb\u6307\u5357\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u5fc3\u7406\u79d1\u666e\n <\/button>\n <button class=\"bg-gray-100 text-gray-600 text-xs py-2 px-4 rounded-full whitespace-nowrap\">\n \u4e92\u52a8\u6d3b\u52a8\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u7cbe\u9009\u63a8\u8350<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden mb-4 card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/featured\/400\/200\" alt=\"\u7cbe\u9009\u5185\u5bb9\u5c01\u9762\" class=\"w-full h-40 object-cover\">\n <div class=\"p-4\">\n <span class=\"text-xs bg-primary\/10 text-primary py-0.5 px-2 rounded-full\">\u7cbe\u54c1\u8bfe\u7a0b<\/span>\n <h4 class=\"font-medium text-base mt-2 mb-1\">\u6784\u5efa\u5065\u5eb7\u4eb2\u5bc6\u5173\u7cfb\u76847\u4e2a\u5173\u952e<\/h4>\n <p class=\"text-gray-500 text-xs mb-3\">\u77e5\u540d\u5fc3\u7406\u5b66\u5bb6\u738b\u6559\u6388 \u00b7 12\u8282\u8bfe\u7a0b \u00b7 \u5df2\u67093.2\u4e07\u4eba\u5b66\u4e60<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-1\">\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star text-yellow-400 text-xs\"><\/i>\n <i class=\"fa fa-star-half-o text-yellow-400 text-xs\"><\/i>\n <span class=\"text-xs text-gray-500 ml-1\">4.8<\/span>\n <\/div>\n <span class=\"text-primary font-medium\">\u00a599<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u70ed\u95e8\u6d4b\u8bc4<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"w-full h-24 bg-primary\/10 rounded-lg mb-3 flex items-center justify-center\">\n <i class=\"fa fa-heart-o text-3xl text-primary\"><\/i>\n <\/div>\n <h4 class=\"font-medium text-sm mb-1\">\u7231\u60c5\u5339\u914d\u5ea6\u6d4b\u8bd5<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u8bc4\u4f30\u4f60\u4e0e\u4f34\u4fa3\u7684\u5339\u914d\u7a0b\u5ea6<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs text-gray-500\">5\u5206\u949f<\/span>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n <div class=\"w-full h-24 bg-primary\/10 rounded-lg mb-3 flex items-center justify-center\">\n <i class=\"fa fa-line-chart text-3xl text-primary\"><\/i>\n <\/div>\n <h4 class=\"font-medium text-sm mb-1\">\u60c5\u7eea\u7ba1\u7406\u80fd\u529b\u6d4b\u8bd5<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u4e86\u89e3\u4f60\u7684\u60c5\u7eea\u8c03\u63a7\u6c34\u5e73<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-gray-600\">\u00a512<\/span>\n <span class=\"text-xs text-gray-500\">8\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"px-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-semibold\">\u6700\u65b0\u6587\u7ae0<\/h3>\n <span class=\"text-primary text-xs\">\u66f4\u591a<\/span>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"flex\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article1\/120\/120\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-24 h-24 object-cover\">\n <div class=\"p-3 flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u5982\u4f55\u4e0e\u4f34\u4fa3\u8fdb\u884c\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u60c5\u611f\u4e13\u680f \u00b7 3\u5c0f\u65f6\u524d<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-2 text-xs text-gray-400\">\n <span><i class=\"fa fa-eye mr-1\"><\/i> 1.2k<\/span>\n <span><i class=\"fa fa-comment-o mr-1\"><\/i> 32<\/span>\n <\/div>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-100 rounded-xl overflow-hidden card-hover\">\n <div class=\"flex\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/120\/120\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-24 h-24 object-cover\">\n <div class=\"p-3 flex-1\">\n <h4 class=\"font-medium text-sm mb-1\">\u5bb6\u5ead\u4e2d\u7684\u8fb9\u754c\u611f\u5efa\u7acb<\/h4><\/h4>\n <p class=\"text-gray-500 text-xs mb-2\">\u5fc3\u7406\u4e13\u5bb6 \u00b7 \u6628\u5929<\/p>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center gap-2 text-xs text-gray-400\">\n <span><i class=\"fa fa-eye mr-1\"><\/i> 2.5k<\/span>\n <span><i class=\"fa fa-comment-o mr-1\"><\/i> 78<\/span>\n <\/div>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-history text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user-o text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u5fc3\u94fe\u6570\u79d1 – \u5bb6\u5ead\u4fdd\u62a4\u89e3\u51b3\u65b9\u6848<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#165DFF',\r\n secondary: '#36CFC9',\r\n accent: '#722ED1',\r\n dark: '#1D2129',\r\n light: '#F2F3F5',\r\n neutral: '#86909C'\r\n },\r\n fontFamily: {\r\n inter: ['Inter', 'sans-serif'],\r\n },\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style type=\"text\/tailwindcss\">\r\n @layer utilities {\r\n .content-auto {\r\n content-visibility: auto;\r\n }\r\n .text-shadow {\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n }\r\n .bg-gradient-primary {\r\n background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);\r\n }\r\n .card-hover {\r\n transition: all 0.3s ease;\r\n }\r\n .card-hover:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px rgba(22, 93, 255, 0.1);\r\n }\r\n .gradient-mask {\r\n mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-inter bg-white text-dark antialiased\"> \r\n \r\n <section class=\"py-16 md:py-24 container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u5b88\u62a4\u5bb6\u5ead\u5173\u7cfb\u7684\u6838\u5fc3\u4ef7\u503c<\/h2>\r\n <p class=\"text-neutral text-lg\">\u6211\u4eec\u81f4\u529b\u4e8e\u901a\u8fc7\u79d1\u6280\u624b\u6bb5\uff0c\u8bc6\u522b\u9690\u5f62\u4f24\u5bb3\uff0c\u63d0\u4f9b\u4e13\u4e1a\u5e72\u9884\uff0c\r\n \u5e2e\u52a9\u6bcf\u4e2a\u5bb6\u5ead\u5efa\u7acb\u5065\u5eb7\u3001\u5e73\u7b49\u3001\u5c0a\u91cd\u7684\u4e92\u52a8\u6a21\u5f0f<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-eye text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u7cbe\u51c6\u8bc6\u522b<\/h3>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u5148\u8fdb\u7b97\u6cd5\uff0c\u7cbe\u51c6\u8bc6\u522b\u4e0d\u6613\u5bdf\u89c9\u7684\u60c5\u611f\u64cd\u63a7\u548c\u7cbe\u795e\u8650\u5f85\u884c\u4e3a\u6a21\u5f0f<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-secondary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-shield text-2xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5168\u9762\u4fdd\u62a4<\/h3>\r\n <p class=\"text-neutral\">\u5168\u65b9\u4f4d\u76d1\u6d4b\u5bb6\u5ead\u4e92\u52a8\uff0c\u4e3a\u6bcf\u4e2a\u5bb6\u5ead\u6210\u5458\u63d0\u4f9b\u5b89\u5168\u4fdd\u62a4\u5c4f\u969c<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-accent\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-handshake-o text-2xl text-accent\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u4e13\u4e1a\u5e72\u9884<\/h3>\r\n <p class=\"text-neutral\">\u8fde\u63a5\u4e13\u4e1a\u5fc3\u7406\u8d44\u6e90\uff0c\u63d0\u4f9b\u79d1\u5b66\u6709\u6548\u7684\u5e72\u9884\u65b9\u6848\u548c\u652f\u6301\u670d\u52a1<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-heart text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5065\u5eb7\u91cd\u5efa<\/h3>\r\n <p class=\"text-neutral\">\u5e2e\u52a9\u5bb6\u5ead\u91cd\u5efa\u5065\u5eb7\u4e92\u52a8\u6a21\u5f0f\uff0c\u57f9\u517b\u5c0a\u91cd\u4e0e\u5e73\u7b49\u7684\u6c9f\u901a\u65b9\u5f0f<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 md:py-24 bg-light relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-primary\/5 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/3\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-accent\/5 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/3\"><\/div>\r\n \r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6838\u5fc3\u6280\u672f<\/span>\r\n <\/div>\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u591a\u6a21\u6001\u667a\u80fd\u5206\u6790\u6280\u672f<\/h2>\r\n <p class=\"text-neutral text-lg\">\u878d\u5408\u591a\u79cd\u6570\u636e\u7ef4\u5ea6\uff0c\u5b9e\u73b0\u66f4\u7cbe\u51c6\u3001\u5168\u9762\u7684\u5bb6\u5ead\u5173\u7cfb\u8bc4\u4f30\u4e0e\u5206\u6790<\/p>\r\n <\/div>\r\n \r\n <div class=\"max-w-6xl mx-auto\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <p class=\"text-neutral mb-8 leading-relaxed text-lg\">\r\n \u5fc3\u94fe\u6570\u79d1\u91c7\u7528\u5148\u8fdb\u7684\u591a\u6a21\u6001\u667a\u80fd\u5206\u6790\u6280\u672f\uff0c\u901a\u8fc7\u6574\u5408\u6587\u672c\u3001\u8bed\u97f3\u3001\u884c\u4e3a\u6a21\u5f0f\u7b49\u591a\u7ef4\u5ea6\u6570\u636e\uff0c\r\n \u6784\u5efa\u5168\u65b9\u4f4d\u7684\u5bb6\u5ead\u5173\u7cfb\u8bc4\u4f30\u6a21\u578b\u3002\u8fd9\u79cd\u8de8\u6a21\u6001\u5206\u6790\u80fd\u529b\u4f7f\u7cfb\u7edf\u80fd\u591f\u6355\u6349\u5230\u5355\u4e00\u6570\u636e\u6e90\u65e0\u6cd5\u8bc6\u522b\u7684\r\n \u9690\u5f62\u4f24\u5bb3\u4fe1\u53f7\uff0c\u663e\u8457\u63d0\u5347\u8bc6\u522b\u7cbe\u5ea6\u548c\u5e72\u9884\u6548\u679c\u3002\r\n <\/p>\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-comments text-primary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u8bed\u8a00\u60c5\u611f\u5206\u6790<\/h4>\r\n <p class=\"text-neutral\">\u89e3\u6790\u6c9f\u901a\u4e2d\u7684\u8bed\u8a00\u6a21\u5f0f\u3001\u60c5\u611f\u503e\u5411\u548c\u9690\u6027\u63a7\u5236\u4fe1\u53f7\uff0c\u8bc6\u522b\u8d2c\u4f4e\u3001\u6307\u8d23\u7b49\u6709\u5bb3\u8bed\u8a00\u7279\u5f81<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-volume-up text-secondary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u8bed\u97f3\u60c5\u7eea\u8bc6\u522b<\/h4>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u8bed\u8c03\u3001\u8bed\u901f\u3001\u97f3\u91cf\u53d8\u5316\u7b49\u8bed\u97f3\u7279\u5f81\uff0c\u5206\u6790\u6f5c\u5728\u7684\u60c5\u7eea\u64cd\u63a7\u548c\u7cbe\u795e\u538b\u529b\u72b6\u6001<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-motion-picture-o text-accent\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u884c\u4e3a\u6a21\u5f0f\u5206\u6790<\/h4>\r\n <p class=\"text-neutral\">\u8bc6\u522b\u4e92\u52a8\u4e2d\u7684\u63a7\u5236\u884c\u4e3a\u6a21\u5f0f\u3001\u793e\u4ea4\u9650\u5236\u884c\u4e3a\u548c\u6743\u529b\u4e0d\u5bf9\u7b49\u8868\u73b0<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-sitemap text-primary\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-lg mb-1\">\u591a\u6a21\u6001\u878d\u5408\u63a8\u7406<\/h4>\r\n <p class=\"text-neutral\">\u901a\u8fc7\u8de8\u6a21\u6001\u5173\u8054\u5206\u6790\uff0c\u6784\u5efa\u5b8c\u6574\u7684\u5bb6\u5ead\u5173\u7cfb\u56fe\u8c31\uff0c\u7cbe\u51c6\u5b9a\u4f4d\u95ee\u9898\u6839\u6e90<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-8 -left-8 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-10 -right-10 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n \r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"h-96\">\r\n <canvas id=\"multimodalChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"py-16 md:py-24 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u6838\u5fc3\u529f\u80fd\u6a21\u5757<\/h2>\r\n <p class=\"text-neutral text-lg\">\u56db\u5927\u6838\u5fc3\u6a21\u5757\u534f\u540c\u5de5\u4f5c\uff0c\u4ece\u8bc6\u522b\u8bc4\u4f30\u5230\u5e72\u9884\u91cd\u5efa\uff0c\u63d0\u4f9b\u5168\u6d41\u7a0b\u89e3\u51b3\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6a21\u5757\u4e00<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5173\u7cfb\u5065\u5eb7\u8bc4\u4f30<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u901a\u8fc7\u4e13\u4e1a\u7684\u5fc3\u7406\u8bc4\u4f30\u6a21\u578b\u548c\u591a\u6a21\u6001\u884c\u4e3a\u5206\u6790\u7b97\u6cd5\uff0c\u5168\u9762\u8bc4\u4f30\u5bb6\u5ead\u5173\u7cfb\u5065\u5eb7\u72b6\u51b5\uff0c\r\n \u7cbe\u51c6\u8bc6\u522b\u63a7\u5236\u884c\u4e3a\u3001\u60c5\u611f\u64cd\u63a7\u7b49\u9690\u5f62\u4f24\u5bb3\u6a21\u5f0f\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5bb6\u5ead\u4e92\u52a8\u6a21\u5f0f\u5065\u5eb7\u5ea6\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u63a7\u5236\u884c\u4e3a\u4e0e\u7cbe\u795e\u8650\u5f85\u8bc6\u522b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5173\u7cfb\u5e73\u7b49\u5ea6\u4e0e\u5c0a\u91cd\u6307\u6570\u5206\u6790<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u4e2a\u6027\u5316\u5065\u5eb7\u5173\u7cfb\u5efa\u8bae<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u957f\u671f\u5173\u7cfb\u53d8\u5316\u8ffd\u8e2a<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -left-6 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -right-8 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"h-80\">\r\n <canvas id=\"relationshipChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center lg:flex-row-reverse\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-secondary\/10 rounded-full\">\r\n <span class=\"text-secondary text-sm font-medium\">\u6a21\u5757\u4e8c<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5371\u9669\u4fe1\u53f7\u76d1\u6d4b<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u5229\u7528\u5148\u8fdb\u7684\u591a\u6a21\u6001\u884c\u4e3a\u6a21\u5f0f\u8bc6\u522b\u6280\u672f\uff0c\u76d1\u6d4b\u5e76\u9884\u8b66\u5bb6\u5ead\u4e2d\u7684\u6f5c\u5728\u4f24\u5bb3\u884c\u4e3a\uff0c\r\n \u5305\u62ec\u63a7\u5236\u3001\u5b64\u7acb\u3001\u8d2c\u4f4e\u7b49\u9690\u5f62\u8650\u5f85\u5f62\u5f0f\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u63a7\u5236\u884c\u4e3a\u6a21\u5f0f\u667a\u80fd\u8bc6\u522b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u793e\u4ea4\u5b64\u7acb\u9884\u8b66\u7cfb\u7edf<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u60c5\u611f\u64cd\u63a7\u68c0\u6d4b\u673a\u5236<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5371\u9669\u7a0b\u5ea6\u5206\u7ea7\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-secondary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-secondary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u53ca\u65f6\u5e72\u9884\u5efa\u8bae\u751f\u6210<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-secondary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -left-8 w-32 h-32 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <div class=\"flex flex-col h-full\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h4 class=\"font-semibold text-lg\">\u5371\u9669\u4fe1\u53f7\u76d1\u6d4b<\/h4>\r\n <span class=\"px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-medium\">\u4e2d\u7b49\u98ce\u9669<\/span>\r\n <\/div>\r\n \r\n <div class=\"space-y-6 flex-grow\">\r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u63a7\u5236\u884c\u4e3a\u6307\u6570<\/span>\r\n <span class=\"text-sm text-amber-600\">68%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-amber-500 rounded-full\" style=\"width: 68%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u60c5\u611f\u64cd\u63a7\u6307\u6570<\/span>\r\n <span class=\"text-sm text-amber-600\">57%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-amber-500 rounded-full\" style=\"width: 57%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u793e\u4ea4\u5b64\u7acb\u6307\u6570<\/span>\r\n <span class=\"text-sm text-green-600\">23%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 23%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <div class=\"flex justify-between mb-2\">\r\n <span class=\"text-sm font-medium\">\u8a00\u8bed\u8d2c\u4f4e\u6307\u6570<\/span>\r\n <span class=\"text-sm text-red-600\">75%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-2 bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-red-500 rounded-full\" style=\"width: 75%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-6 p-4 bg-amber-50 border border-amber-100 rounded-lg\">\r\n <p class=\"text-sm text-amber-800 flex items-start\">\r\n <i class=\"fa fa-exclamation-triangle mt-0.5 mr-2\"><\/i>\r\n <span>\u68c0\u6d4b\u5230\u6f5c\u5728\u98ce\u9669\u6a21\u5f0f\uff0c\u5efa\u8bae\u8fdb\u884c\u4e13\u4e1a\u8bc4\u4f30\u5e76\u83b7\u53d6\u5e72\u9884\u6307\u5bfc\u3002<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto mb-24\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-accent\/10 rounded-full\">\r\n <span class=\"text-accent text-sm font-medium\">\u6a21\u5757\u4e09<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5e72\u9884\u652f\u6301\u7cfb\u7edf<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u4e3a\u5904\u4e8e\u98ce\u9669\u4e2d\u7684\u5bb6\u5ead\u63d0\u4f9b\u591a\u5c42\u6b21\u7684\u5e72\u9884\u652f\u6301\uff0c\u8fde\u63a5\u4e13\u4e1a\u8d44\u6e90\uff0c\r\n \u5236\u5b9a\u4e2a\u6027\u5316\u5e72\u9884\u65b9\u6848\uff0c\u5e2e\u52a9\u53d7\u5bb3\u8005\u6446\u8131\u56f0\u5883\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u4e13\u4e1a\u5fc3\u7406\u54a8\u8be2\u5bf9\u63a5\u670d\u52a1<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5b89\u5168\u8ba1\u5212\u5236\u5b9a\u4e0e\u5b9e\u65bd<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u652f\u6301\u5c0f\u7ec4\u4e0e\u793e\u533a\u8d44\u6e90\u94fe\u63a5<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u9636\u6bb5\u6027\u5e72\u9884\u6548\u679c\u8bc4\u4f30<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-accent\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-accent text-sm\"><\/i>\r\n <\/div>\r\n <span>\u7d27\u6025\u60c5\u51b5\u54cd\u5e94\u673a\u5236<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -left-6 w-24 h-24 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -right-8 w-32 h-32 bg-secondary\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <h4 class=\"font-semibold text-lg mb-6\">\u5e72\u9884\u652f\u6301\u6d41\u7a0b<\/h4>\r\n \r\n <div class=\"relative\">\r\n \r\n <div class=\"absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200\"><\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">1<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u98ce\u9669\u8bc4\u4f30\u786e\u8ba4<\/h5>\r\n <p class=\"text-neutral text-sm\">\u4e13\u4e1a\u4eba\u5458\u5ba1\u6838\u7cfb\u7edf\u8bc4\u4f30\u7ed3\u679c\uff0c\u786e\u8ba4\u98ce\u9669\u7b49\u7ea7\u548c\u5177\u4f53\u95ee\u9898<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">2<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u4e2a\u6027\u5316\u65b9\u6848\u5236\u5b9a<\/h5>\r\n <p class=\"text-neutral text-sm\">\u6839\u636e\u5177\u4f53\u60c5\u51b5\uff0c\u5236\u5b9a\u4e13\u5c5e\u5e72\u9884\u8ba1\u5212\u548c\u5b89\u5168\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">3<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u4e13\u4e1a\u8d44\u6e90\u5bf9\u63a5<\/h5>\r\n <p class=\"text-neutral text-sm\">\u5339\u914d\u6700\u5408\u9002\u7684\u5fc3\u7406\u54a8\u8be2\u5e08\u548c\u652f\u6301\u670d\u52a1\u8d44\u6e90<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14 pb-8\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">4<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u5b9e\u65bd\u4e0e\u8ddf\u8e2a<\/h5>\r\n <p class=\"text-neutral text-sm\">\u6267\u884c\u5e72\u9884\u8ba1\u5212\uff0c\u5b9a\u671f\u8bc4\u4f30\u6548\u679c\u5e76\u8c03\u6574\u65b9\u6848<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-14\">\r\n <div class=\"absolute left-0 w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white font-medium\">5<\/div>\r\n <h5 class=\"font-medium text-lg mb-1\">\u957f\u671f\u652f\u6301\u4e0e\u6062\u590d<\/h5>\r\n <p class=\"text-neutral text-sm\">\u63d0\u4f9b\u6301\u7eed\u652f\u6301\uff0c\u5e2e\u52a9\u5efa\u7acb\u5065\u5eb7\u6a21\u5f0f\uff0c\u9884\u9632\u590d\u53d1<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"max-w-6xl mx-auto\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center lg:flex-row-reverse\">\r\n <div>\r\n <div class=\"inline-block mb-4 px-3 py-1 bg-primary\/10 rounded-full\">\r\n <span class=\"text-primary text-sm font-medium\">\u6a21\u5757\u56db<\/span>\r\n <\/div>\r\n <h3 class=\"text-2xl md:text-3xl font-bold mb-6\">\u5065\u5eb7\u5173\u7cfb\u5efa\u8bbe<\/h3>\r\n <p class=\"text-neutral mb-8 leading-relaxed\">\r\n \u63d0\u4f9b\u4e13\u4e1a\u6307\u5bfc\u548c\u5de5\u5177\uff0c\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u5efa\u7acb\u5065\u5eb7\u3001\u5e73\u7b49\u3001\u5c0a\u91cd\u7684\u4e92\u52a8\u6a21\u5f0f\uff0c\r\n \u57f9\u517b\u6709\u6548\u7684\u6c9f\u901a\u6280\u5de7\u548c\u51b2\u7a81\u89e3\u51b3\u80fd\u529b\u3002\r\n <\/p>\r\n \r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5065\u5eb7\u6c9f\u901a\u6280\u5de7\u57f9\u8bad<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u8fb9\u754c\u8bbe\u5b9a\u4e0e\u5c0a\u91cd\u57f9\u517b<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u51b2\u7a81\u89e3\u51b3\u7b56\u7565\u6307\u5bfc<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u5bb6\u5ead\u89d2\u8272\u5e73\u7b49\u5316\u5efa\u8bbe<\/span>\r\n <\/li>\r\n <li class=\"flex items-start\">\r\n <div class=\"mt-1 mr-4 w-6 h-6 rounded-full bg-primary\/10 flex items-center justify-center flex-shrink-0\">\r\n <i class=\"fa fa-check text-primary text-sm\"><\/i>\r\n <\/div>\r\n <span>\u957f\u671f\u5173\u7cfb\u5065\u5eb7\u7ef4\u62a4\u8ba1\u5212<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"relative\">\r\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-primary\/10 rounded-full\"><\/div>\r\n <div class=\"absolute -bottom-8 -left-8 w-32 h-32 bg-accent\/10 rounded-full\"><\/div>\r\n <div class=\"bg-white p-6 rounded-2xl shadow-xl relative z-10 border border-gray-100\">\r\n <h4 class=\"font-semibold text-lg mb-6\">\u5065\u5eb7\u5173\u7cfb\u57f9\u517b\u5de5\u5177<\/h4>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-comments text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u6c9f\u901a\u7ec3\u4e60\u6307\u5357<\/h5>\r\n <p class=\"text-sm text-neutral\">\u57fa\u4e8e\u975e\u66b4\u529b\u6c9f\u901a\u7406\u5ff5\u7684\u4e92\u52a8\u7ec3\u4e60<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-balance-scale text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u8fb9\u754c\u8bbe\u5b9a\u5de5\u5177<\/h5>\r\n <p class=\"text-sm text-neutral\">\u5e2e\u52a9\u660e\u786e\u4e2a\u4eba\u8fb9\u754c\u7684\u5b9e\u7528\u5de5\u4f5c\u8868<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-exclamation-circle text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u51b2\u7a81\u89e3\u51b3\u624b\u518c<\/h5>\r\n <p class=\"text-sm text-neutral\">\u5efa\u8bbe\u6027\u89e3\u51b3\u5bb6\u5ead\u77db\u76fe\u7684\u6b65\u9aa4\u4e0e\u65b9\u6cd5<\/p>\r\n <\/div>\r\n \r\n <div class=\"p-4 bg-light rounded-xl\">\r\n <div class=\"w-10 h-10 rounded-lg bg-primary\/10 flex items-center justify-center mb-3\">\r\n <i class=\"fa fa-calendar-check-o text-primary\"><\/i>\r\n <\/div>\r\n <h5 class=\"font-medium mb-2\">\u5173\u7cfb\u5efa\u8bbe\u8ba1\u5212<\/h5>\r\n <p class=\"text-sm text-neutral\">30\u5929\u5065\u5eb7\u5bb6\u5ead\u4e92\u52a8\u57f9\u517b\u8ba1\u5212<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-6 pt-6 border-t border-gray-100\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <h5 class=\"font-medium\">\u5bb6\u5ead\u5065\u5eb7\u6307\u6570<\/h5>\r\n <p class=\"text-sm text-neutral\">\u57fa\u4e8e\u4e92\u52a8\u6570\u636e\u7684\u7efc\u5408\u8bc4\u4f30<\/p>\r\n <\/div>\r\n <div class=\"text-3xl font-bold text-primary\">72<span class=\"text-sm font-normal\">\/100<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 h-2 w-full bg-gray-100 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-gradient-primary rounded-full\" style=\"width: 72%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"py-16 md:py-24 container mx-auto px-4\">\r\n <div class=\"max-w-3xl mx-auto text-center mb-16\">\r\n <h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6\">\u5e7f\u6cdb\u7684\u5e94\u7528\u573a\u666f<\/h2>\r\n <p class=\"text-neutral text-lg\">\u5fc3\u94fe\u6570\u79d1\u5bb6\u5ead\u4fdd\u62a4\u89e3\u51b3\u65b9\u6848\u9002\u7528\u4e8e\u591a\u79cd\u573a\u666f\uff0c\u4e3a\u4e0d\u540c\u9700\u6c42\u63d0\u4f9b\u4e13\u4e1a\u652f\u6301<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-primary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-home text-2xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u5bb6\u5ead\u81ea\u6211\u8bc4\u4f30<\/h3>\r\n <p class=\"text-neutral mb-4\">\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u8fdb\u884c\u81ea\u6211\u68c0\u6d4b\uff0c\u8bc6\u522b\u6f5c\u5728\u95ee\u9898\uff0c\u4e3b\u52a8\u5bfb\u6c42\u6539\u5584<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u5bb6\u5ead\u5173\u7cfb\u81ea\u6d4b\u4e0e\u8bc4\u4f30\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u4e92\u52a8\u6a21\u5f0f\u5206\u6790\u4e0e\u53cd\u9988\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-primary mr-2\"><\/i>\r\n \u81ea\u6211\u63d0\u5347\u4e0e\u6539\u5584\u5efa\u8bae\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-secondary\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-users text-2xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u4e13\u4e1a\u673a\u6784\u652f\u6301<\/h3>\r\n <p class=\"text-neutral mb-4\">\u4e3a\u5fc3\u7406\u54a8\u8be2\u3001\u793e\u5de5\u670d\u52a1\u7b49\u4e13\u4e1a\u673a\u6784\u63d0\u4f9b\u8bc4\u4f30\u4e0e\u5e72\u9884\u8f85\u52a9\u5de5\u5177<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u6848\u4f8b\u8bc4\u4f30\u4e0e\u5206\u6790\u7cfb\u7edf\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u5e72\u9884\u6548\u679c\u8ddf\u8e2a\u4e0e\u8bc4\u4f30\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-secondary mr-2\"><\/i>\r\n \u4e13\u4e1a\u8d44\u6e90\u5339\u914d\u4e0e\u7ba1\u7406\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"bg-white p-8 rounded-xl shadow-sm border border-gray-100 card-hover\">\r\n <div class=\"w-14 h-14 rounded-lg bg-accent\/10 flex items-center justify-center mb-6\">\r\n <i class=\"fa fa-building text-2xl text-accent\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold mb-3\">\u793e\u4f1a\u670d\u52a1\u4f53\u7cfb<\/h3>\r\n <p class=\"text-neutral mb-4\">\u4e3a\u793e\u533a\u3001\u5987\u8054\u3001\u53f8\u6cd5\u7b49\u793e\u4f1a\u670d\u52a1\u4f53\u7cfb\u63d0\u4f9b\u51b3\u7b56\u652f\u6301\u4e0e\u5e72\u9884\u5de5\u5177<\/p>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u5bb6\u5ead\u98ce\u9669\u7b5b\u67e5\u4e0e\u9884\u8b66\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u8d44\u6e90\u8c03\u914d\u4e0e\u5e72\u9884\u652f\u6301\r\n <\/li>\r\n <li class=\"flex items-center text-neutral\">\r\n <i class=\"fa fa-angle-right text-accent mr-2\"><\/i>\r\n \u793e\u4f1a\u670d\u52a1\u6548\u679c\u8bc4\u4f30\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ \u521d\u59cb\u5316\u56fe\u8868\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ \u591a\u6a21\u6001\u6280\u672f\u5206\u6790\u56fe\u8868\r\n const multimodalCtx = document.getElementById('multimodalChart').getContext('2d');\r\n const multimodalChart = new Chart(multimodalCtx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['\u8bed\u8a00\u60c5\u611f', '\u8bed\u97f3\u60c5\u7eea', '\u884c\u4e3a\u6a21\u5f0f', '\u793e\u4ea4\u4e92\u52a8', '\u6587\u672c\u5185\u5bb9'],\r\n datasets: [{\r\n label: '\u5355\u4e00\u6a21\u6001\u8bc6\u522b\u51c6\u786e\u7387',\r\n data: [68, 72, 65, 70, 62],\r\n backgroundColor: 'rgba(22, 93, 255, 0.6)',\r\n }, {\r\n label: '\u591a\u6a21\u6001\u878d\u5408\u8bc6\u522b\u51c6\u786e\u7387',\r\n data: [89, 91, 87, 88, 85],\r\n backgroundColor: 'rgba(114, 46, 209, 0.6)',\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n plugins: {\r\n title: {\r\n display: true,\r\n text: '\u591a\u6a21\u6001\u6280\u672f\u8bc6\u522b\u51c6\u786e\u7387\u5bf9\u6bd4 (%)',\r\n font: {\r\n size: 16\r\n }\r\n },\r\n legend: {\r\n position: 'bottom',\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 100,\r\n title: {\r\n display: true,\r\n text: '\u51c6\u786e\u7387 (%)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u5173\u7cfb\u5065\u5eb7\u8bc4\u4f30\u56fe\u8868\r\n const relationshipCtx = document.getElementById('relationshipChart').getContext('2d');\r\n const relationshipChart = new Chart(relationshipCtx, {\r\n type: 'radar',\r\n data: {\r\n labels: [\r\n '\u6c9f\u901a\u5065\u5eb7\u5ea6',\r\n '\u5c0a\u91cd\u6307\u6570',\r\n '\u5e73\u7b49\u53c2\u4e0e',\r\n '\u60c5\u611f\u652f\u6301',\r\n '\u8fb9\u754c\u5c0a\u91cd',\r\n '\u51b2\u7a81\u89e3\u51b3'\r\n ],\r\n datasets: [{\r\n label: '\u5f53\u524d\u5bb6\u5ead\u5173\u7cfb',\r\n data: [65, 59, 60, 72, 45, 55],\r\n fill: true,\r\n backgroundColor: 'rgba(22, 93, 255, 0.2)',\r\n borderColor: '#165DFF',\r\n pointBackgroundColor: '#165DFF',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#165DFF'\r\n }, {\r\n label: '\u5065\u5eb7\u5bb6\u5ead\u6807\u51c6',\r\n data: [85, 90, 85, 90, 85, 80],\r\n fill: true,\r\n backgroundColor: 'rgba(114, 46, 209, 0.2)',\r\n borderColor: '#722ED1',\r\n pointBackgroundColor: '#722ED1',\r\n pointBorderColor: '#fff',\r\n pointHoverBackgroundColor: '#fff',\r\n pointHoverBorderColor: '#722ED1'\r\n }]\r\n },\r\n options: {\r\n elements: {\r\n line: {\r\n borderWidth: 3\r\n }\r\n },\r\n scales: {\r\n r: {\r\n angleLines: {\r\n display: true,\r\n color: 'rgba(0, 0, 0, 0.1)'\r\n },\r\n suggestedMin: 0,\r\n suggestedMax: 100,\r\n ticks: {\r\n stepSize: 20,\r\n backdropColor: 'transparent'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u6dfb\u52a0\u6eda\u52a8\u52a8\u753b\r\n const animateOnScroll = function() {\r\n const elements = document.querySelectorAll('.card-hover');\r\n \r\n elements.forEach(element => {\r\n const elementPosition = element.getBoundingClientRect().top;\r\n const windowHeight = window.innerHeight;\r\n \r\n if (elementPosition < windowHeight * 0.85) {\r\n element.classList.add('opacity-100');\r\n element.classList.remove('opacity-0', 'translate-y-8');\r\n }\r\n });\r\n };\r\n \r\n \/\/ \u521d\u59cb\u5316\u5143\u7d20\u72b6\u6001\r\n document.querySelectorAll('.card-hover').forEach(el => {\r\n el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');\r\n });\r\n \r\n \/\/ \u521d\u59cb\u68c0\u67e5\r\n animateOnScroll();\r\n \r\n \/\/ \u6eda\u52a8\u65f6\u68c0\u67e5\r\n window.addEventListener('scroll', animateOnScroll);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n\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 <title>\u5fc3\u8c10XinSync<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF7A9C', \/\/ \u4e3b\u7c89\u8272\n secondary: '#FFE6EC', \/\/ \u6d45\u7c89\u8272\n neutral: '#333333', \/\/ \u6df1\u7070\u8272\n 'neutral-light': '#F5F5F5', \/\/ \u6d45\u7070\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .app-shadow {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n }\n .card-hover {\n transition: all 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-4px);\n box-shadow: 0 10px 25px rgba(255, 122, 156, 0.15);\n }\n .btn-hover {\n transition: all 0.2s ease;\n }\n .btn-hover:hover {\n transform: translateY(-2px);\n }\n }\n <\/style>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-white font-sans text-neutral min-h-screen\">\n <div class=\"container mx-auto px-4 py-8\">\n <header class=\"text-center mb-10\">\n <h1 class=\"text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary mb-2\">\u5fc3\u8c10XinSync<\/h1>\n <p class=\"text-gray-600 max-w-2xl mx-auto\">\u60c5\u611f\u5173\u7cfb\u667a\u80fd\u7ba1\u7406\u5e73\u53f0<\/p>\n <\/header>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart1\/200\/200\" alt=\"\u627e\u81ea\u5df1\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u627e\u81ea\u5df1\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u8fd9\u91cc\u662f\u60c5\u7eea\u7684\u6811\u6d1e\uff0c\u4e5f\u662f\u627e\u56de\u81ea\u5df1\u7684\u8d77\u70b9<\/p>\n <button class=\"bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart2\/200\/200\" alt=\"\u6211\u548cTA\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u6211\u548cTA\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u4e0a\u4f20\u4f60\u4eec\u7684\u804a\u5929\u8bb0\u5f55\uff0cAI\u7ed3\u5408\u4e13\u4e1a\u5fc3\u7406\u54a8\u8be2\u5e08\u7684\u5206\u6790\uff0c\u4e3a\u4f60\u751f\u6210\u4e00\u4efd\u4e13\u5c5e\u7684\u300c\u5173\u7cfb\u89e3\u8bfb\u62a5\u544a\u300d<\/p>\n <button class=\"bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-40 h-40 mb-6\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/heart3\/200\/200\" alt=\"\u9690\u79c1\u4e0e\u5b89\u5168\u63d2\u56fe\" class=\"w-full h-full object-cover rounded-full bg-secondary p-2\">\n <\/div>\n <h2 class=\"text-2xl font-bold text-neutral mb-2\">\u300c\u9690\u79c1\u4e0e\u5b89\u5168\u300d<\/h2>\n <p class=\"text-center text-gray-500 mb-8 px-4\">\u62e5\u6709\u5f3a\u5927\u7684\u6570\u636e\u5b89\u5168\u6027\uff0c\u60a8\u901a\u5f80\u66f4\u597d\u7684\u5fc3\u7406\u5065\u5eb7\u7684\u65c5\u7a0b\u65e0\u5fe7<\/p>\n <div class=\"flex flex-col gap-2 mt-4\">\n <button class=\"bg-white text-primary border border-primary py-2 px-4 rounded-full text-sm btn-hover\">\n \u4e0d\u5bf9\u4f60\u7684\u6570\u636e\u8fdb\u884cAI\u8bad\u7ec3\n <\/button>\n <button class=\"bg-white text-primary border border-primary py-2 px-4 rounded-full text-sm btn-hover\">\n \u53ef\u968f\u65f6\u5220\u9664\n <\/button>\n <\/div>\n <button class=\"mt-6 bg-primary text-white py-3 px-8 rounded-full font-medium btn-hover\">\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-6\">\n <div class=\"w-6\"><\/div>\n <h2 class=\"text-xl font-semibold\">\u767b\u5f55<\/h2>\n <button class=\"text-gray-400\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n \n <h3 class=\"text-lg font-medium mb-1\">\u73b0\u5728\u767b\u5f55<\/h3>\n <p class=\"text-gray-500 mb-6\">\u6b22\u8fce\u56de\u6765\uff0c\u627e\u5230\u81ea\u5df1\u7684\u7075\u9b42\uff01<\/p>\n \n <form class=\"flex flex-col gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8d26\u53f7<\/label>\n <div class=\"relative\">\n <input type=\"text\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition\" placeholder=\"\u8bf7\u8f93\u5165\u4f60\u7684\u8d26\u53f7\">\n <i class=\"fa fa-check-circle absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u5bc6\u7801<\/label>\n <div class=\"relative\">\n <input type=\"password\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition\" placeholder=\"\u8bf7\u8f93\u5165\u4f60\u7684\u5bc6\u7801\">\n <a href=\"#\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-primary text-sm\">\u5fd8\u4e86\uff1f<\/a>\n <\/div>\n <\/div>\n \n <button type=\"button\" class=\"mt-2 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\n <\/button>\n \n <p class=\"text-center text-sm text-gray-500\">\u4f7f\u7528\u7b2c\u4e09\u65b9\u8d26\u53f7\u767b\u5f55<\/p>\n \n <button type=\"button\" class=\"flex items-center justify-center gap-2 bg-neutral-light text-neutral py-3 px-6 rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-weixin text-lg text-green-500\"><\/i>\n \u5fae\u4fe1\u4e00\u952e\u767b\u5f55\n <\/button>\n <\/form>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u8fd8\u6ca1\u6709\u8d26\u53f7\uff1f<span class=\"text-primary font-medium\">\u6ce8\u518c<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6 pb-0\">\n <div class=\"flex justify-between items-center mb-4\">\n <div>\n <h2 class=\"text-lg font-medium\">Hello, \u65e9\u8d77\u5927\u738b\ud83d\udc51<\/h2>\n <p class=\"text-gray-500 text-sm\">\u6674, 5-14<\/p>\n <\/div>\n <div class=\"w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-primary\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"flex gap-3 mb-6\">\n <button class=\"flex-1 bg-primary text-white py-3 rounded-lg font-medium btn-hover\">\n \u5fc3\u60c5\u8bb0\u5f55\n <\/button>\n <button class=\"flex-1 bg-white border border-gray-300 text-neutral py-3 rounded-lg font-medium btn-hover\">\n \u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto p-6 pt-0\">\n \n <div class=\"grid grid-cols-2 gap-3 mb-6\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-4 card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mb-2\">\n <i class=\"fa fa-comments\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-sm mb-1\">\u6c9f\u901a\u8bb0\u5f55<\/h3>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4f60\u4eec\u7684\u804a\u5929\u8bb0\u5f55\uff0cAI\u5206\u6790\u4f60\u4eec\u7684\u5173\u7cfb<\/p>\n <\/div>\n \n <div class=\"bg-green-50 border border-green-100 rounded-lg p-4 card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n <i class=\"fa fa-comment\"><\/i>\n <\/div>\n <h3 class=\"font-medium text-sm mb-1\">AI\u667a\u80fd\u5bf9\u8bdd<\/h3>\n <p class=\"text-xs text-green-600\">\u5386\u65f6\u79d1\u6280\u53d1\u8d77\uff0cAI\u89e3\u51b3\u4f60\u7684\u5fc3\u7406\u56f0\u60d1<\/p>\n <button class=\"mt-2 text-xs bg-green-100 text-green-600 py-1 px-3 rounded-full btn-hover\">\n \u5f00\u59cb\u804a\u5929\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-4 mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <div>\n <h3 class=\"font-medium\">\u9884\u7ea6\u4e13\u5bb6<\/h3>\n <p class=\"text-xs text-gray-500\">\u4e00\u952e\u53d1\u9001\u4efb\u52a1<\/p>\n <\/div>\n <button class=\"bg-primary text-white py-1 px-3 rounded-full text-sm btn-hover\">\n \u53bb\u9884\u7ea6\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">5\u6708\u7cbe\u9009\u6587\u7ae0\u4efb\u52a1<\/h3>\n <div class=\"flex items-center gap-1 text-xs text-gray-500\">\n <div class=\"w-2 h-2 rounded-full bg-orange-500\"><\/div>\n <span>3 days<\/span>\n <\/div>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article1\/300\/100\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-20 object-cover\">\n <div class=\"p-3\">\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u9762\u5bf9\u4eb2\u53cb\u79bb\u4e16\u540e\u7684\u54c0\u75db<\/h4>\n <p class=\"text-xs text-gray-500\">\u76f4\u9762\u54c0\u4f24\uff0c\u5145\u5206\u54c0\u4f24<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article2\/300\/100\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-20 object-cover\">\n <div class=\"p-3\">\n <h4 class=\"font-medium text-sm\">\u5982\u4f55\u5efa\u7acb\u5065\u5eb7\u7684\u4eb2\u5bc6\u5173\u7cfb<\/h4>\n <p class=\"text-xs text-gray-500\">\u6c9f\u901a\u4e0e\u8fb9\u754c\u7684\u5e73\u8861<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-medium mb-3\">\u5fc3\u60c5\u7edf\u8ba1\u4e0e\u5206\u6790<\/h3>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 mb-4\">\n <h4 class=\"font-medium text-sm mb-2\">\u5fc3\u60c5\u65e5\u5386<\/h4>\n <div class=\"grid grid-cols-7 gap-1 text-center text-xs\">\n <div class=\"text-gray-500\">\u4e00<\/div>\n <div class=\"text-gray-500\">\u4e8c<\/div>\n <div class=\"text-gray-500\">\u4e09<\/div>\n <div class=\"text-gray-500\">\u56db<\/div>\n <div class=\"text-gray-500\">\u4e94<\/div>\n <div class=\"text-gray-500\">\u516d<\/div>\n <div class=\"text-gray-500\">\u65e5<\/div>\n \n <div class=\"text-gray-400\">5<\/div>\n <div class=\"text-gray-400\">6<\/div>\n <div class=\"text-gray-400\">7<\/div>\n <div class=\"text-gray-400\">8<\/div>\n <div class=\"text-gray-400\">9<\/div>\n <div class=\"text-gray-400\">10<\/div>\n <div class=\"text-gray-400\">11<\/div>\n \n <div class=\"text-gray-400\">12<\/div>\n <div class=\"text-gray-400\">13<\/div>\n <div class=\"bg-primary\/20 rounded-full h-6 flex items-center justify-center text-primary\">14<\/div>\n <div class=\"text-gray-400\">15<\/div>\n <div class=\"text-gray-400\">16<\/div>\n <div class=\"text-gray-400\">17<\/div>\n <div class=\"text-gray-400\">18<\/div>\n \n <div class=\"text-gray-400\">19<\/div>\n <div class=\"text-gray-400\">20<\/div>\n <div class=\"text-gray-400\">21<\/div>\n <div class=\"text-gray-400\">22<\/div>\n <div class=\"text-gray-400\">23<\/div>\n <div class=\"text-gray-400\">24<\/div>\n <div class=\"text-gray-400\">25<\/div>\n \n <div class=\"text-gray-400\">26<\/div>\n <div class=\"text-gray-400\">27<\/div>\n <div class=\"text-gray-400\">28<\/div>\n <div class=\"text-gray-400\">29<\/div>\n <div class=\"text-gray-400\">30<\/div>\n <div class=\"text-gray-400\">31<\/div>\n <div class=\"text-gray-400\">1<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3\">\n <h4 class=\"font-medium text-sm mb-2\">\u5fc3\u60c5\u8d8b\u52bf<\/h4>\n <div class=\"grid grid-cols-7 gap-1 text-center text-xs\">\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-1\">\ud83d\ude0a<\/div>\n <span class=\"text-xs\">\u7f8e\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-green-50 rounded-full flex items-center justify-center text-green-600 mb-1\">\ud83d\ude42<\/div>\n <span class=\"text-xs\">\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 mb-1\">\ud83d\ude10<\/div>\n <span class=\"text-xs\">\u4e00\u822c<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-red-50 rounded-full flex items-center justify-center text-red-600 mb-1\">\ud83d\ude41<\/div>\n <span class=\"text-xs\">\u4e0d\u597d<\/span>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <div class=\"w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-1\">\ud83d\ude22<\/div>\n <span class=\"text-xs\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <div class=\"w-6\"><\/div>\n <div class=\"w-6\"><\/div>\n \n <div class=\"h-12 bg-green-100 rounded\"><\/div>\n <div class=\"h-8 bg-green-50 rounded\"><\/div>\n <div class=\"h-6 bg-gray-100 rounded\"><\/div>\n <div class=\"h-4 bg-red-50 rounded\"><\/div>\n <div class=\"h-2 bg-red-100 rounded\"><\/div>\n <div class=\"h-1 bg-gray-100 rounded\"><\/div>\n <div class=\"h-1 bg-gray-100 rounded\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5bb6\u5ead\u5171\u8bbf<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-search\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-neutral-light rounded-lg p-3 mb-6\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa fa-search text-gray-400\"><\/i>\n <input type=\"text\" class=\"bg-transparent w-full outline-none\" placeholder=\"\u641c\u7d22...\">\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n \n <div class=\"mb-6\">\n <h3 class=\"font-medium mb-3\">AI\u60c5\u611f\u5173\u7cfb\u6d4b\u8bc4<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u60c5\u611f\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-child\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u4eb2\u5b50\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 text-center card-hover\">\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n <i class=\"fa fa-line-chart\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">AI\u4ee3\u9645\u6d4b\u8bc4<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h3 class=\"font-medium mb-3\">\u5bb6\u5ead\u6d3b\u52a8<\/h3>\n <div class=\"flex justify-between items-center mb-2\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-xs\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span class=\"text-sm\">\u6210\u5c31\u52cb\u7ae0<\/span>\n <\/div>\n <div class=\"flex items-center gap-1 text-xs text-gray-500\">\n <span>\u5df2\u5b8c\u62104\/200<\/span>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/family1\/200\/100\" alt=\"\u6d3b\u52a8\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5982\u4f55\u9762\u5bf9\u4eb2\u53cb\u79bb\u4e16\u540e\u7684\u54c0\u75db<\/h4>\n <p class=\"text-xs text-gray-500\">\u76f4\u9762\u54c0\u4f24\uff0c\u5145\u5206\u54c0\u4f24<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u514d\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/family2\/200\/100\" alt=\"\u6d3b\u52a8\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5e38\u4e3a\u8fc7\u53bb\u7684\u9009\u62e9\u800c\u540e\u6094<\/h4>\n <p class=\"text-xs text-gray-500\">\u7406\u89e3\u8fc7\u53bb\uff0c\u76f4\u9762\u5f53\u4e0b<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-orange-100 text-orange-600 py-0.5 px-2 rounded\">\u4ed8\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-medium mb-3\">\u4eb2\u5b50\u6c9f\u901a\u5e93<\/h3>\n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/parent1\/200\/100\" alt=\"\u6c9f\u901a\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u5982\u4f55\u4e0e\u9752\u6625\u671f\u5b69\u5b50\u6c9f\u901a<\/h4>\n <p class=\"text-xs text-gray-500\">\u5efa\u7acb\u4fe1\u4efb\uff0c\u6709\u6548\u503e\u542c<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u514d\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/parent2\/200\/100\" alt=\"\u6c9f\u901a\u5c01\u9762\" class=\"w-full h-16 object-cover\">\n <div class=\"p-2\">\n <h4 class=\"font-medium text-xs\">\u57f9\u517b\u5b69\u5b50\u7684\u60c5\u7eea\u7ba1\u7406\u80fd\u529b<\/h4>\n <p class=\"text-xs text-gray-500\">\u4ece\u8bc6\u522b\u5230\u8868\u8fbe\u7684\u5168\u6d41\u7a0b<\/p>\n <div class=\"flex justify-between items-center mt-2\">\n <span class=\"text-xs bg-orange-100 text-orange-600 py-0.5 px-2 rounded\">\u4ed8\u8d39\u6d4b\u8bd5<\/span>\n <span class=\"text-xs text-gray-500\">12\u5206\u949f<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"w-full mt-4 py-2 text-sm bg-white border border-gray-200 rounded-lg btn-hover\">\n \u67e5\u770b\u5168\u90e8 >\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">AI\u60c5\u611f\u5173\u7cfb\u6d4b\u8bc4<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test1\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u591a\u7ef4\u5ea6\u5b8c\u7f8e\u4e3b\u4e49\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u62c6\u89e3\u4f60\u7684\u5b8c\u7f8e\u4e3b\u4e49\u503e\u5411<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a58.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">188\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test2\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u4eb2\u5bc6\u5173\u7cfb\u6ee1\u610f\u5ea6\u8bc4\u4f30<\/h4>\n <p class=\"text-xs text-gray-500\">\u5168\u9762\u89e3\u6790\u4f60\u7684\u60c5\u611f\u72b6\u6001<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a58.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">256\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test3\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u60c5\u7eea\u8bc6\u522b\u80fd\u529b\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u4e86\u89e3\u4f60\u7684\u60c5\u7eea\u611f\u77e5\u6c34\u5e73<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded\">324\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test4\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u6c9f\u901a\u98ce\u683c\u7c7b\u578b\u6d4b\u8bd5<\/h4>\n <p class=\"text-xs text-gray-500\">\u53d1\u73b0\u4f60\u7684\u72ec\u7279\u6c9f\u901a\u6a21\u5f0f<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-green-600\">\u514d\u8d39<\/span>\n <span class=\"text-xs bg-green-100 text-green-600 py-0.5 px-2 rounded\">412\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-3 flex justify-between items-center\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/test5\/50\/50\" alt=\"\u6d4b\u8bc4\u5c01\u9762\" class=\"w-10 h-10 rounded object-cover\">\n <div>\n <h4 class=\"font-medium text-sm\">\u51b2\u7a81\u89e3\u51b3\u65b9\u5f0f\u8bc4\u4f30<\/h4>\n <p class=\"text-xs text-gray-500\">\u63a2\u7d22\u4f60\u7684\u51b2\u7a81\u5e94\u5bf9\u7b56\u7565<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs text-gray-500\">\u00a512.00<\/span>\n <span class=\"text-xs bg-gray-100 text-gray-600 py-0.5 px-2 rounded\">178\u4eba\u6d4b\u8bd5<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-6 text-center text-xs text-gray-500\">\n <p>\u6ca1\u627e\u5230\u5408\u9002\u7684\u5185\u5bb9\uff1f\u6b22\u8fce\u8ddf\u6211\u4eec\u63d0\u5efa\u8bae<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u4f60\u7684\u5fc3\u60c5\u5982\u4f55<\/h3>\n \n <div class=\"space-y-4\">\n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude0a\n <\/div>\n <span class=\"text-sm font-medium\">\u7f8e\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-600 mb-2\">\n \ud83d\ude42\n <\/div>\n <span class=\"text-sm font-medium\">\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-2\">\n \ud83d\ude10\n <\/div>\n <span class=\"text-sm font-medium\">\u4e00\u822c<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude41\n <\/div>\n <span class=\"text-sm font-medium\">\u4e0d\u597d<\/span>\n <\/div>\n \n <div class=\"flex flex-col items-center p-3 bg-white border border-gray-200 rounded-lg card-hover\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-2\">\n \ud83d\ude22\n <\/div>\n <span class=\"text-sm font-medium\">\u5f88\u4e0d\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-arrow-right mr-2\"><\/i>\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u4f60\u611f\u53d7\u5230\u4e86\u54ea\u4e9b\u60c5\u7eea\uff1f<\/h3>\n \n <div class=\"grid grid-cols-3 gap-2\">\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5f00\u5fc3\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5174\u594b\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u60ca\u559c\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u671f\u5f85\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u81ea\u8c6a\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6ee1\u610f\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5e73\u9759\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6e29\u6696\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5b89\u5168\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u751c\u871c\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u4fe1\u4efb\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u611f\u6fc0\n <\/button>\n <\/div>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u8d1f\u9762\u60c5\u7eea<\/h4>\n <div class=\"grid grid-cols-3 gap-2\">\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u751f\u6c14\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u96be\u8fc7\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u7126\u8651\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6050\u60e7\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5931\u671b\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5b64\u72ec\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u6127\u759a\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u5ac9\u5992\n <\/button>\n <button class=\"p-3 bg-white border border-gray-200 rounded-lg text-center text-sm card-hover\">\n \u75b2\u60eb\n <\/button>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-arrow-right mr-2\"><\/i>\n \u7ee7\u7eed\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u5fc3\u60c5\u8bb0\u5f55<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-times\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n <h3 class=\"font-medium mb-6\">\u53d1\u751f\u4e86\u4ec0\u4e48\u4e8b\uff1f<\/h3>\n \n <textarea rows=\"8\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary\/30 focus:border-primary outline-none transition resize-none\" placeholder=\"\u8bf7\u63cf\u8ff0\u4eca\u5929\u53d1\u751f\u7684\u4e8b\u60c5\uff0c\u4ee5\u53ca\u662f\u4ec0\u4e48\u8ba9\u4f60\u6709\u8fd9\u6837\u7684\u611f\u53d7...\"><\/textarea>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u76f8\u5173\u4eba\u7269<\/h4>\n <div class=\"grid grid-cols-4 gap-2\">\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <span>\u81ea\u5df1<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <span>\u4f34\u4fa3<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-child\"><\/i>\n <\/div>\n <span>\u5b69\u5b50<\/span>\n <\/button>\n <button class=\"flex flex-col items-center p-2 bg-white border border-gray-200 rounded-lg text-center text-xs card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-1\">\n <i class=\"fa fa-plus\"><\/i>\n <\/div>\n <span>\u6dfb\u52a0<\/span>\n <\/button>\n <\/div>\n \n <\/div>\n \n <div class=\"mt-6\">\n <h4 class=\"font-medium mb-3\">\u6dfb\u52a0\u9644\u4ef6\uff08\u53ef\u9009\uff09<\/h4>\n <div class=\"grid grid-cols-2 gap-3\">\n <button class=\"flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition\">\n <i class=\"fa fa-weixin text-2xl text-gray-400 mb-2\"><\/i>\n <span class=\"text-xs text-gray-500\">\u4ece\u5fae\u4fe1\u5bfc\u5165<\/span>\n <\/button>\n <button class=\"flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary transition\">\n <i class=\"fa fa-upload text-2xl text-gray-400 mb-2\"><\/i>\n <span class=\"text-xs text-gray-500\">\u4e0a\u4f20\u56fe\u7247<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-8 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n \u5b8c\u6210\u8bb0\u5f55\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u53d1\u73b0<\/h2>\n <button class=\"text-gray-500\">\n <i class=\"fa fa-bell\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-neutral-light rounded-lg p-3 mb-6\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa fa-search text-gray-400\"><\/i>\n <input type=\"text\" class=\"bg-transparent w-full outline-none\" placeholder=\"\u641c\u7d22\u6587\u7ae0\u3001\u8bdd\u9898\u3001\u8bfe\u7a0b...\">\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6 pb-6\">\n \n <div class=\"flex gap-2 mb-6 overflow-x-auto pb-2\">\n <button class=\"px-4 py-2 bg-primary text-white rounded-full text-sm whitespace-nowrap\">\u63a8\u8350<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u60c5\u7eea\u7ba1\u7406<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u4eb2\u5bc6\u5173\u7cfb<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u4eb2\u5b50\u6559\u80b2<\/button>\n <button class=\"px-4 py-2 bg-neutral-light text-neutral rounded-full text-sm whitespace-nowrap\">\u5bb6\u5ead\u6c9f\u901a<\/button>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">\u7cbe\u9009\u6587\u7ae0<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a<\/a>\n <\/div>\n \n <div class=\"space-y-4\">\n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article3\/300\/150\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-32 object-cover\">\n <div class=\"p-3\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs bg-purple-100 text-purple-600 py-0.5 px-2 rounded\">\u60c5\u7eea\u7ba1\u7406<\/span>\n <span class=\"text-xs text-gray-500\">5\u670812\u65e5<\/span>\n <\/div>\n <h4 class=\"font-medium text-sm mb-2\">\u5982\u4f55\u5728\u538b\u529b\u4e0b\u4fdd\u6301\u51b7\u9759\uff1a7\u4e2a\u5b9e\u7528\u6280\u5de7<\/h4>\n <p class=\"text-xs text-gray-500 line-clamp-2\">\u5728\u73b0\u4ee3\u5feb\u8282\u594f\u7684\u751f\u6d3b\u4e2d\uff0c\u538b\u529b\u65e0\u5904\u4e0d\u5728\u3002\u672c\u6587\u5c06\u5206\u4eab7\u4e2a\u7ecf\u8fc7\u9a8c\u8bc1\u7684\u5b9e\u7528\u6280\u5de7\uff0c\u5e2e\u52a9\u4f60\u5728\u9ad8\u538b\u73af\u5883\u4e0b\u4fdd\u6301\u51b7\u9759\u548c\u6e05\u6670\u7684\u601d\u7ef4…<\/p>\n <div class=\"flex justify-between items-center mt-3\">\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-eye\"><\/i> 1.2k\n <\/span>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-comment\"><\/i> 32\n <\/span>\n <\/div>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/article4\/300\/150\" alt=\"\u6587\u7ae0\u5c01\u9762\" class=\"w-full h-32 object-cover\">\n <div class=\"p-3\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs bg-blue-100 text-blue-600 py-0.5 px-2 rounded\">\u4eb2\u5bc6\u5173\u7cfb<\/span>\n <span class=\"text-xs text-gray-500\">5\u670810\u65e5<\/span>\n <\/div>\n <h4 class=\"font-medium text-sm mb-2\">\u91cd\u5efa\u4fe1\u4efb\uff1a\u4fee\u590d\u5173\u7cfb\u4e2d\u7684\u88c2\u75d5<\/h4>\n <p class=\"text-xs text-gray-500 line-clamp-2\">\u4fe1\u4efb\u662f\u4efb\u4f55\u5065\u5eb7\u5173\u7cfb\u7684\u57fa\u77f3\uff0c\u4f46\u4e00\u65e6\u88ab\u7834\u574f\uff0c\u91cd\u5efa\u4fe1\u4efb\u9700\u8981\u65f6\u95f4\u548c\u52aa\u529b\u3002\u672c\u6587\u5c06\u63a2\u8ba8\u5982\u4f55\u6709\u6548\u4fee\u590d\u5173\u7cfb\u4e2d\u7684\u4fe1\u4efb\u95ee\u9898…<\/p>\n <div class=\"flex justify-between items-center mt-3\">\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-eye\"><\/i> 2.5k\n <\/span>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fa fa-comment\"><\/i> 78\n <\/span>\n <\/div>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-bookmark-o\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-medium\">\u70ed\u95e8\u8bdd\u9898<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a<\/a>\n <\/div>\n \n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 card-hover\">\n <h4 class=\"font-medium text-sm mb-2\"># \u5982\u4f55\u4e0e\u4f34\u4fa3\u6709\u6548\u6c9f\u901a<\/h4>\n <p class=\"text-xs text-gray-500 mb-2\">1.2k \u4eba\u53c2\u4e0e\u8ba8\u8bba<\/p>\n <div class=\"flex -space-x-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user1\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user2\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user3\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <div class=\"w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-xs text-gray-600\">+24<\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 card-hover\">\n <h4 class=\"font-medium text-sm mb-2\"># \u5b69\u5b50\u53db\u9006\u671f\u7684\u5e94\u5bf9\u7b56\u7565<\/h4>\n <p class=\"text-xs text-gray-500 mb-2\">856 \u4eba\u53c2\u4e0e\u8ba8\u8bba<\/p>\n <div class=\"flex -space-x-2\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user4\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user5\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/user6\/30\/30\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-6 h-6 rounded-full border-2 border-white\">\n <div class=\"w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-xs text-gray-600\">+18<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl app-shadow overflow-hidden card-hover\">\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-white rounded-lg overflow-hidden relative border-8 border-gray-200\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"bg-secondary p-6 text-neutral\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-16 h-16 rounded-full bg-white flex items-center justify-center\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/100\/100\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-full h-full object-cover rounded-full\">\n <\/div>\n <div>\n <h3 class=\"font-semibold text-lg\">\u65e9\u8d77\u5927\u738b<\/h3>\n <p class=\"text-gray-600 text-sm\">\u5df2\u52a0\u5165 128 \u5929<\/p>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-3 gap-2 mt-6\">\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">42<\/p>\n <p class=\"text-gray-600 text-xs\">\u5fc3\u60c5\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">8<\/p>\n <p class=\"text-gray-600 text-xs\">\u5b8c\u6210\u6d4b\u8bc4<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-xl font-bold\">4<\/p>\n <p class=\"text-gray-600 text-xs\">\u6210\u5c31\u52cb\u7ae0<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto p-4\">\n <div class=\"space-y-1\">\n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-calendar\"><\/i>\n <\/div>\n <span>\u6211\u7684\u8bb0\u5f55<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-trophy\"><\/i>\n <\/div>\n <span>\u6211\u7684\u6d4b\u8bc4<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-bookmark\"><\/i>\n <\/div>\n <span>\u6211\u7684\u6536\u85cf<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-users\"><\/i>\n <\/div>\n <span>\u5bb6\u5ead\u7ba1\u7406<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-cog\"><\/i>\n <\/div>\n <span>\u8bbe\u7f6e<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n \n <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-lg text-left border border-gray-100 card-hover\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-question-circle\"><\/i>\n <\/div>\n <span>\u5e2e\u52a9\u4e0e\u53cd\u9988<\/span>\n <\/div>\n <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"mt-6\">\n <button class=\"w-full flex items-center justify-center gap-2 p-3 bg-red-50 rounded-lg text-red-600 border border-red-100 card-hover\">\n <i class=\"fa fa-sign-out\"><\/i>\n <span>\u9000\u51fa\u767b\u5f55<\/span>\n <\/button>\n <\/div>\n \n <div class=\"mt-8 text-center\">\n <p class=\"text-xs text-gray-400\">\n \u5fc3\u8c10XinSync v1.0.0<br>\n \u00a9 2025 \u5fc3\u94fe\u60c5\u667a\u6570\u636e\u79d1\u6280(\u4e0a\u6d77)\u6709\u9650\u516c\u53f8\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-auto border-t border-gray-200 py-2 px-6\">\n <div class=\"flex justify-around\">\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-home text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-users text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5bb6\u5ead\u5171\u8bbf<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-gray-400\">\n <i class=\"fa fa-compass text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n <\/div>\n <div class=\"flex flex-col items-center text-primary\">\n <i class=\"fa fa-user text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u8c10XinSync \u5fc3\u8c10XinSync \u6807\u51c6APP\u98ce\u683c\u8bbe\u8ba1 \u00b7 \u9002\u914diPhone 9:41 \u55e8\uff0cChris \ud83d\udc4b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":424,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-937","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":35,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937\/revisions"}],"predecessor-version":[{"id":1620,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/937\/revisions\/1620"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/424"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}