\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<!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\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 \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: '#0A2463', \/\/ \u6df1\u84dd\u8272 - \u4e3b\u8272\u8c03\uff0c\u4f53\u73b0\u4e13\u4e1a\u548c\u4fe1\u4efb\n secondary: '#3E92CC', \/\/ \u6d45\u84dd\u8272 - \u8f85\u52a9\u8272\n accent: '#D8E1FF', \/\/ \u6de1\u84dd\u8272 - \u5f3a\u8c03\u8272\n neutral: '#F5F5F7', \/\/ \u6d45\u7070\u8272 - \u80cc\u666f\u8272\n 'neutral-dark': '#2D3748', \/\/ \u6df1\u7070\u8272 - \u6587\u672c\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.1);\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(10, 36, 99, 0.15);\n }\n .swiss-border {\n border: 1px solid rgba(10, 36, 99, 0.1);\n }\n .text-balance {\n text-wrap: balance;\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-dark 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\">\u5fae\u4fe1\u5c0f\u7a0b\u5e8fUI\u539f\u578b\u8bbe\u8ba1 – \u501f\u9274\u94f6\u884c\u98ce\u683c\uff0c\u4e13\u6ce8\u60c5\u611f\u8d44\u4ea7\u7684\u5b58\u50a8\u3001\u589e\u503c\u4e0e\u4f20\u627f<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">1. \u6b22\u8fce\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n \n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n \n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-24 h-24 rounded-full bg-primary\/10 flex items-center justify-center mb-8\">\n <i class=\"fa fa-heart text-4xl text-primary\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold text-primary mb-4\">HeartSync<\/h2>\n <p class=\"text-gray-500 text-center mb-10 px-4\">\u4e3a\u60a8\u7684\u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u63d0\u4f9b\u4e13\u4e1a\u7684\u5b58\u50a8\u3001\u589e\u503c\u4e0e\u4f20\u627f\u65b9\u6848<\/p>\n <div class=\"flex flex-col gap-3 w-full\">\n <button class=\"bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u7acb\u5373\u6ce8\u518c\n <\/button>\n <button class=\"border border-primary text-primary py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\u8d26\u6237\n <\/button>\n <\/div>\n <p class=\"text-xs text-gray-400 mt-8\">\n \u6ce8\u518c\u5373\u8868\u793a\u540c\u610f\u300a\u670d\u52a1\u6761\u6b3e\u300b\u548c\u300a\u9690\u79c1\u653f\u7b56\u300b\n <\/p>\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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">2. \u6ce8\u518c\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-8\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u521b\u5efa\u8d26\u6237<\/h2>\n <div class=\"w-6\"><\/div> \n <\/div>\n \n <form class=\"flex flex-col gap-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u624b\u673a\u53f7\u7801<\/label>\n <div class=\"relative\">\n <input type=\"tel\" 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\u624b\u673a\u53f7\u7801\">\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u9a8c\u8bc1\u7801<\/label>\n <div class=\"flex gap-2\">\n <input type=\"text\" class=\"flex-1 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\u9a8c\u8bc1\u7801\">\n <button type=\"button\" class=\"bg-primary\/10 text-primary px-4 py-3 rounded-lg font-medium btn-hover\">\u83b7\u53d6\u9a8c\u8bc1\u7801<\/button>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bbe\u7f6e\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\u8bbe\u7f6e\u5bc6\u7801\">\n <button type=\"button\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\">\n <i class=\"fa fa-eye-slash\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start mt-2\">\n <input type=\"checkbox\" id=\"agree\" class=\"mt-1\">\n <label for=\"agree\" class=\"ml-2 text-xs text-gray-500\">\n \u6211\u5df2\u9605\u8bfb\u5e76\u540c\u610f\u300a\u670d\u52a1\u6761\u6b3e\u300b\u3001\u300a\u9690\u79c1\u653f\u7b56\u300b\u53ca\u300a\u60c5\u611f\u6570\u636e\u4fdd\u62a4\u534f\u8bae\u300b\n <\/label>\n <\/div>\n \n <button type=\"button\" class=\"mt-4 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u5b8c\u6210\u6ce8\u518c\n <\/button>\n <\/form>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u5df2\u6709\u8d26\u6237\uff1f<span class=\"text-primary font-medium\">\u7acb\u5373\u767b\u5f55<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">3. \u767b\u5f55\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-8\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u8d26\u6237\u767b\u5f55<\/h2>\n <div class=\"w-6\"><\/div> \n <\/div>\n \n <form class=\"flex flex-col gap-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u624b\u673a\u53f7\u7801<\/label>\n <input type=\"tel\" 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\u624b\u673a\u53f7\u7801\">\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\u5bc6\u7801\">\n <button type=\"button\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\">\n <i class=\"fa fa-eye-slash\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-end\">\n <a href=\"#\" class=\"text-sm text-primary\">\u5fd8\u8bb0\u5bc6\u7801\uff1f<\/a>\n <\/div>\n \n <button type=\"button\" class=\"mt-4 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\n <\/button>\n <\/form>\n \n <div class=\"my-6 flex items-center\">\n <div class=\"flex-1 h-px bg-gray-200\"><\/div>\n <span class=\"px-3 text-gray-400 text-sm\">\u5176\u4ed6\u767b\u5f55\u65b9\u5f0f<\/span>\n <div class=\"flex-1 h-px bg-gray-200\"><\/div>\n <\/div>\n \n <button class=\"flex items-center justify-center gap-2 bg-[#07C160] text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-weixin text-lg\"><\/i>\n \u5fae\u4fe1\u5feb\u6377\u767b\u5f55\n <\/button>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u8fd8\u6ca1\u6709\u8d26\u6237\uff1f<span class=\"text-primary font-medium\">\u7acb\u5373\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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">4. \u9996\u9875\/\u4eea\u8868\u76d8<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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-6\">\n <div>\n <h2 class=\"text-xl font-semibold\">\u60a8\u597d\uff0c\u7528\u6237<\/h2>\n <p class=\"text-gray-500 text-sm\">\u4eca\u5929\u662f 6\u670815\u65e5\uff0c\u661f\u671f\u56db<\/p>\n <\/div>\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-primary rounded-xl p-5 text-white mb-6\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <p class=\"text-white\/80 text-sm\">\u5bb6\u5ead\u60c5\u611f\u6307\u6570<\/p>\n <h3 class=\"text-2xl font-bold mt-1\">87.5<\/h3>\n <\/div>\n <div class=\"bg-white\/20 rounded-lg px-2 py-1 text-xs\">\n \u8f83\u4e0a\u6708 +2.3\n <\/div>\n <\/div>\n <div class=\"w-full h-1 bg-white\/20 rounded-full overflow-hidden\">\n <div class=\"h-full bg-white rounded-full\" style=\"width: 87.5%\"><\/div>\n <\/div>\n <p class=\"text-white\/80 text-xs mt-2\">\u5065\u5eb7\u72b6\u6001\uff1a\u975e\u5e38\u826f\u597d<\/p>\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-3 gap-3 mb-8\">\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-plus\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u6dfb\u52a0\u8bb0\u5f55<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-lightbulb-o\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u4f18\u5316\u5efa\u8bae<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-exclamation-circle\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u7d27\u6025\u5e72\u9884<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-line-chart\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u60c5\u611f\u5206\u6790<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-book\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u4f20\u627f\u8ba1\u5212<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-cog\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u66f4\u591a\u529f\u80fd<\/span>\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-semibold\">\u6700\u8fd1\u60c5\u611f\u8bb0\u5f55<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u67e5\u770b\u5168\u90e8<\/a>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"p-3 bg-neutral rounded-lg flex justify-between items-center\">\n <div>\n <p class=\"font-medium\">\u5bb6\u5ead\u805a\u9910\u5bf9\u8bdd<\/p>\n <p class=\"text-xs text-gray-500\">6\u670812\u65e5 19:30<\/p>\n <\/div>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n \n <div class=\"p-3 bg-neutral rounded-lg flex justify-between items-center\">\n <div>\n <p class=\"font-medium\">\u592b\u59bb\u6df1\u5165\u4ea4\u6d41<\/p>\n <p class=\"text-xs text-gray-500\">6\u670810\u65e5 21:15<\/p>\n <\/div>\n <span class=\"text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full\">\u4e2d\u6027<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u4f18\u5316\u5efa\u8bae<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a\u5efa\u8bae<\/a>\n <\/div>\n \n <div class=\"p-4 bg-accent\/50 rounded-lg border border-primary\/10\">\n <div class=\"flex items-start gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary mt-0.5\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u5b89\u6392\u4e00\u6b21\u6237\u5916\u5bb6\u5ead\u6d3b\u52a8<\/h4>\n <p class=\"text-xs text-gray-600\">\u6839\u636e\u60a8\u7684\u60c5\u611f\u6307\u6570\u5206\u6790\uff0c\u5efa\u8bae\u5728\u5468\u672b\u5b89\u6392\u4e00\u6b21\u6237\u5916\u5bb6\u5ead\u6d3b\u52a8\uff0c\u53ef\u63d0\u5347\u5bb6\u5ead\u51dd\u805a\u529b15%\u3002<\/p>\n <\/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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">5. \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55<\/h2>\n <button class=\"text-primary font-medium\">\u4fdd\u5b58<\/button>\n <\/div>\n \n <form class=\"space-y-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bb0\u5f55\u6807\u9898<\/label>\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=\"\u4f8b\u5982\uff1a\u5bb6\u5ead\u665a\u9910\u5bf9\u8bdd\u3001\u592b\u59bb\u8c08\u5fc3\u7b49\">\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bb0\u5f55\u7c7b\u578b<\/label>\n <select 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 appearance-none bg-white\">\n <option>\u592b\u59bb\u5bf9\u8bdd<\/option>\n <option>\u4eb2\u5b50\u4ea4\u6d41<\/option>\n <option>\u5bb6\u5ead\u4f1a\u8bae<\/option>\n <option>\u91cd\u8981\u51b3\u5b9a<\/option>\n <option>\u5176\u4ed6\u7c7b\u578b<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u60c5\u611f\u5185\u5bb9<\/label>\n <textarea rows=\"5\" 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\u8fd9\u6b21\u60c5\u611f\u4ea4\u6d41\u7684\u4e3b\u8981\u5185\u5bb9...\"><\/textarea>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u6dfb\u52a0\u9644\u4ef6\uff08\u53ef\u9009\uff09<\/label>\n <div class=\"grid grid-cols-2 gap-3\">\n \n <button type=\"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 \n \n <button type=\"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\">\u4e3b\u52a8\u4e0a\u4f20\u6587\u4ef6<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u60c5\u611f\u6807\u7b7e<\/label>\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"px-3 py-1 bg-primary\/10 text-primary text-xs rounded-full\">\u6e29\u99a8<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u7406\u89e3<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u652f\u6301<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u89c4\u5212<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full flex items-center\">\n <i class=\"fa fa-plus text-xs mr-1\"><\/i> \u6dfb\u52a0\n <\/span>\n <\/div>\n <\/div>\n <\/form>\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">6. \u60c5\u611f\u8d26\u6237\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u60c5\u611f\u8d26\u6237<\/h2>\n <button class=\"text-primary\">\n <i class=\"fa fa-search\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div class=\"bg-neutral rounded-lg p-4\">\n <p class=\"text-gray-500 text-sm\">\u603b\u8bb0\u5f55\u6570<\/p>\n <p class=\"text-2xl font-bold mt-1\">24<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-4\">\n <p class=\"text-gray-500 text-sm\">\u672c\u6708\u65b0\u589e<\/p>\n <p class=\"text-2xl font-bold mt-1\">5<\/p>\n <\/div>\n <\/div>\n \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\">\u5168\u90e8\u8bb0\u5f55<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u592b\u59bb\u5bf9\u8bdd<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u4eb2\u5b50\u4ea4\u6d41<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u5bb6\u5ead\u4f1a\u8bae<\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n <div class=\"space-y-4\">\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u5468\u672b\u5bb6\u5ead\u65c5\u884c\u89c4\u5212<\/h3>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u8ba8\u8bba\u4e86\u6691\u5047\u7684\u5bb6\u5ead\u65c5\u884c\u8ba1\u5212\uff0c\u5b69\u5b50\u4eec\u5e0c\u671b\u53bb\u6d77\u8fb9\uff0c\u6700\u7ec8\u51b3\u5b9a\u53bb\u9752\u5c9b\uff0c\u8ba1\u52127\u6708\u4e2d\u65ec\u51fa\u53d1…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u670814\u65e5 18:45<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u4e0e\u513f\u5b50\u7684\u5b66\u4e1a\u4ea4\u6d41<\/h3>\n <span class=\"text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full\">\u5f85\u6539\u8fdb<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u4e86\u89e3\u4e86\u513f\u5b50\u6700\u8fd1\u7684\u5b66\u4e60\u60c5\u51b5\uff0c\u6570\u5b66\u6210\u7ee9\u6709\u6240\u4e0b\u6ed1\uff0c\u9700\u8981\u627e\u8001\u5e08\u4e86\u89e3\u60c5\u51b5\u5e76\u5236\u5b9a\u8f85\u5bfc\u8ba1\u5212…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u670812\u65e5 20:30<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u7ed3\u5a5a\u7eaa\u5ff5\u65e5\u8c08\u8bdd<\/h3>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u56de\u987e\u4e86\u7ed3\u5a5a10\u5e74\u6765\u7684\u70b9\u70b9\u6ef4\u6ef4\uff0c\u611f\u8c22\u5f7c\u6b64\u7684\u4ed8\u51fa\uff0c\u7ea6\u5b9a\u6bcf\u5e74\u90fd\u8981\u5b89\u6392\u4e00\u6b21\u4e8c\u4eba\u65c5\u884c…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u67088\u65e5 21:15<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u5bb6\u5ead\u8d22\u52a1\u89c4\u5212\u4f1a\u8bae<\/h3>\n <span class=\"text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full\">\u4e2d\u6027<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u8ba8\u8bba\u4e86\u4e0b\u534a\u5e74\u7684\u5bb6\u5ead\u8d22\u52a1\u5b89\u6392\uff0c\u5305\u62ec\u5b69\u5b50\u7684\u6559\u80b2\u57fa\u91d1\u3001\u4fdd\u9669\u66f4\u65b0\u548c\u6295\u8d44\u8c03\u6574…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u67085\u65e5 19:00<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/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-primary\">\n <i class=\"fa fa-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">7. \u60c5\u611f\u5206\u6790\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u60c5\u611f\u5206\u6790<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n \n \n <div class=\"bg-neutral rounded-lg p-4 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-medium\">\u5bb6\u5ead\u60c5\u611f\u6307\u6570\u8d8b\u52bf<\/h3>\n <select class=\"text-sm bg-white border-none rounded px-2 py-1\">\n <option>\u8fd16\u4e2a\u6708<\/option>\n <option>\u8fd11\u5e74<\/option>\n <option>\u5168\u90e8<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full h-40\">\n <canvas id=\"emotionChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <h3 class=\"font-semibold mb-3\">\u60c5\u611f\u7c7b\u578b\u5206\u5e03<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mx-auto mb-2\">\n <i class=\"fa fa-smile-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u79ef\u6781\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">65%<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mx-auto mb-2\">\n <i class=\"fa fa-meh-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u4e2d\u6027\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">25%<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mx-auto mb-2\">\n <i class=\"fa fa-frown-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u6d88\u6781\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">10%<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h3 class=\"font-semibold mb-3\">\u5173\u7cfb\u5065\u5eb7\u5ea6\u5206\u6790<\/h3>\n <div class=\"space-y-4\">\n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u592b\u59bb\u5173\u7cfb<\/span>\n <span class=\"text-sm font-medium\">92\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 92%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u4eb2\u5b50\u5173\u7cfb<\/span>\n <span class=\"text-sm font-medium\">85\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 85%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u5bb6\u5ead\u6c9f\u901a<\/span>\n <span class=\"text-sm font-medium\">78\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-yellow-500 rounded-full\" style=\"width: 78%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">AI \u4f18\u5316\u5efa\u8bae<\/h3>\n <div class=\"bg-accent\/50 rounded-lg p-4 border border-primary\/10\">\n <h4 class=\"font-medium text-sm mb-2\">\u57fa\u4e8e\u60a8\u7684\u60c5\u611f\u6570\u636e\u5206\u6790<\/h4>\n <ul class=\"space-y-2 text-sm text-gray-700\">\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u589e\u52a0\u6bcf\u5468\u5bb6\u5ead\u4f1a\u8bae\u9891\u7387\uff0c\u53ef\u63d0\u5347\u5bb6\u5ead\u6c9f\u901a\u6307\u6570\u7ea615%<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u6bcf\u6708\u5b89\u6392\u4e00\u6b21\u4eb2\u5b50\u4e13\u5c5e\u6d3b\u52a8\uff0c\u6709\u52a9\u4e8e\u589e\u5f3a\u4eb2\u5b50\u60c5\u611f\u8fde\u63a5<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u8bb0\u5f55\u4e2d\u663e\u793a\u8d22\u52a1\u8bdd\u9898\u6613\u5f15\u53d1\u7d27\u5f20\uff0c\u5efa\u8bae\u4f7f\u7528”\u60c5\u611f\u8d26\u6237”\u4e2d\u7684\u6c9f\u901a\u6307\u5357<\/span>\n <\/li>\n <\/ul>\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">8. \u4f20\u627f\u8ba1\u5212\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u4f20\u627f\u8ba1\u5212<\/h2>\n <button class=\"text-primary\">\n <i class=\"fa fa-plus\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-primary rounded-xl p-5 text-white mb-6\">\n <h3 class=\"font-medium mb-3\">\u5bb6\u65cf\u60c5\u611f\u8d44\u4ea7\u4f20\u627f<\/h3>\n <p class=\"text-white\/80 text-sm mb-4\">\u8bb0\u5f55\u548c\u4f20\u9012\u5bb6\u65cf\u7684\u667a\u6167\u3001\u4ef7\u503c\u89c2\u548c\u60c5\u611f\u8fde\u63a5\uff0c\u6784\u5efa\u5bb6\u65cf\u7cbe\u795e\u8d22\u5bcc<\/p>\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <p class=\"text-white\/80 text-xs\">\u5df2\u521b\u5efa\u8ba1\u5212<\/p>\n <p class=\"text-xl font-bold mt-1\">3<\/p>\n <\/div>\n <div>\n <p class=\"text-white\/80 text-xs\">\u5f85\u5b8c\u6210\u4e8b\u9879<\/p>\n <p class=\"text-xl font-bold mt-1\">5<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u5bb6\u5ead\u6559\u80b2\u7406\u5ff5<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u7ba1\u7406<\/a>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-4 card-hover\">\n <h4 class=\"font-medium mb-2\">\u6211\u4eec\u7684\u6838\u5fc3\u6559\u80b2\u4ef7\u503c\u89c2<\/h4>\n <p class=\"text-sm text-gray-600 mb-3 line-clamp-3\">1. \u8bda\u4fe1\u4e3a\u672c\uff1a\u65e0\u8bba\u4f55\u65f6\u4f55\u5730\uff0c\u90fd\u8981\u575a\u5b88\u8bda\u4fe1\u539f\u5219<br>2. \u7ec8\u8eab\u5b66\u4e60\uff1a\u4fdd\u6301\u597d\u5947\u5fc3\uff0c\u4e0d\u65ad\u5b66\u4e60\u65b0\u77e5\u8bc6\u548c\u6280\u80fd<br>3. \u8d23\u4efb\u62c5\u5f53\uff1a\u5bf9\u81ea\u5df1\u7684\u884c\u4e3a\u8d1f\u8d23\uff0c\u5173\u5fc3\u4ed6\u4eba\u548c\u793e\u4f1a<br>4. \u575a\u97e7\u4e0d\u62d4\uff1a\u9762\u5bf9\u56f0\u96be\u4e0d\u9000\u7f29\uff0c\u4ece\u5931\u8d25\u4e2d\u5b66\u4e60\u6210\u957f<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-gray-400\">\u66f4\u65b0\u4e8e 2023\u5e745\u670810\u65e5<\/span>\n <button class=\"text-primary text-sm\">\u67e5\u770b\u8be6\u60c5<\/button>\n <\/div>\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-semibold\">\u5bb6\u65cf\u6545\u4e8b\u96c6<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u7ba1\u7406<\/a>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 flex gap-3 card-hover\">\n <div class=\"w-12 h-12 bg-primary\/10 rounded flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm\">\u7956\u7236\u6bcd\u7684\u521b\u4e1a\u6545\u4e8b<\/h4>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4e8e 2023\u5e743\u670815\u65e5<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 flex gap-3 card-hover\">\n <div class=\"w-12 h-12 bg-primary\/10 rounded flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm\">\u5bb6\u65cf\u4f20\u7edf\u8282\u65e5\u4e60\u4fd7<\/h4>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4e8e 2023\u5e742\u670820\u65e5<\/p>\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-semibold\">\u5bb6\u65cf\u5fc3\u7406\u5065\u5eb7\u5206\u6790<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u65b0<\/a>\n <\/div>\n \n <div class=\"bg-neutral rounded-lg p-4\">\n <div class=\"flex items-start gap-3 mb-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary mt-0.5\">\n <i class=\"fa fa-heartbeat\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u5bb6\u65cf\u5fc3\u7406\u5065\u5eb7\u62a5\u544a<\/h4>\n <p class=\"text-xs text-gray-500 mt-1\">\u57fa\u4e8e\u5bb6\u65cf\u60c5\u611f\u8bb0\u5f55\u7684AI\u5206\u6790\uff0c\u66f4\u65b0\u4e8e 2023\u5e746\u67081\u65e5<\/p>\n <\/div>\n <\/div>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u60c5\u7eea\u7ba1\u7406\u80fd\u529b<\/span>\n <span class=\"text-xs font-medium\">\u826f\u597d<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u538b\u529b\u5e94\u5bf9\u65b9\u5f0f<\/span>\n <span class=\"text-xs font-medium\">\u9700\u5173\u6ce8<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u6c9f\u901a\u6a21\u5f0f\u5206\u6790<\/span>\n <span class=\"text-xs font-medium\">\u826f\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-4 py-2 text-sm bg-primary\/10 text-primary rounded-lg btn-hover\">\n \u67e5\u770b\u5b8c\u6574\u5206\u6790\u62a5\u544a\n <\/button>\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-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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">9. \u7d27\u6025\u5e72\u9884\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u7d27\u6025\u60c5\u611f\u5e72\u9884<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n \n \n <div class=\"bg-red-50 border border-red-100 rounded-lg p-4 mb-6\">\n <h3 class=\"font-medium text-red-700 mb-3 flex items-center gap-2\">\n <i class=\"fa fa-exclamation-triangle\"><\/i>\n \u8bf7\u9009\u62e9\u5f53\u524d\u51b2\u7a81\u7a0b\u5ea6\n <\/h3>\n \n <div class=\"grid grid-cols-3 gap-3\">\n <button class=\"py-3 border border-gray-200 rounded-lg text-center text-sm card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mx-auto mb-1\">\n <i class=\"fa fa-warning\"><\/i>\n <\/div>\n \u8f7b\u5fae\u5206\u6b67\n <\/button>\n <button class=\"py-3 border border-orange-200 bg-orange-50 rounded-lg text-center text-sm text-orange-700 card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-1\">\n <i class=\"fa fa-exclamation\"><\/i>\n <\/div>\n \u4e2d\u5ea6\u51b2\u7a81\n <\/button>\n <button class=\"py-3 border border-red-200 bg-red-50 rounded-lg text-center text-sm text-red-700 card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600 mx-auto mb-1\">\n <i class=\"fa fa-exclamation-circle\"><\/i>\n <\/div>\n \u4e25\u91cd\u77db\u76fe\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">\u51b2\u7a81\u7c7b\u578b<\/label>\n <div class=\"grid grid-cols-2 gap-2\">\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-user-o text-primary mr-2\"><\/i>\n \u592b\u59bb\u77db\u76fe\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-child text-primary mr-2\"><\/i>\n \u4eb2\u5b50\u51b2\u7a81\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-money text-primary mr-2\"><\/i>\n \u8d22\u52a1\u7ea0\u7eb7\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-ellipsis-h text-primary mr-2\"><\/i>\n \u5176\u4ed6\u7c7b\u578b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bf7\u7b80\u8981\u63cf\u8ff0\u95ee\u9898<\/label>\n <textarea rows=\"4\" 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\u5f53\u524d\u7684\u77db\u76fe\u70b9\u548c\u4e3b\u8981\u95ee\u9898...\"><\/textarea>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">AI \u5373\u65f6\u5e72\u9884\u5efa\u8bae<\/h3>\n <div class=\"bg-accent\/50 rounded-lg p-4 border border-primary\/10\">\n <div class=\"flex items-start gap-2 mb-3\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 1\n <\/div>\n <p class=\"text-sm\">\u5efa\u8bae\u5148\u6682\u505c\u4e89\u8bba\uff0c\u53cc\u65b9\u5206\u5f00\u51b7\u975915-30\u5206\u949f\uff0c\u907f\u514d\u60c5\u7eea\u8fdb\u4e00\u6b65\u6fc0\u5316\u3002<\/p>\n <\/div>\n <div class=\"flex items-start gap-2 mb-3\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 2\n <\/div>\n <p class=\"text-sm\">\u51b7\u9759\u540e\uff0c\u5c1d\u8bd5\u4f7f\u7528”\u6211\u611f\u53d7”\u8868\u8fbe\u65b9\u5f0f\uff0c\u5982”\u5f53…\u53d1\u751f\u65f6\uff0c\u6211\u611f\u5230…”\uff0c\u800c\u975e\u6307\u8d23\u5bf9\u65b9\u3002<\/p>\n <\/div>\n <div class=\"flex items-start gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 3\n <\/div>\n <p class=\"text-sm\">\u56de\u987e\u4f60\u4eec\u4e4b\u524d\u8bb0\u5f55\u7684\u79ef\u6781\u4e92\u52a8\uff08\u59826\u67088\u65e5\u7684\u8c08\u8bdd\uff09\uff0c\u63d0\u9192\u5f7c\u6b64\u7684\u611f\u60c5\u57fa\u7840\u3002<\/p>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-4 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n \u83b7\u53d6\u8be6\u7ec6\u89e3\u51b3\u65b9\u6848\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-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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">10. \u4e2a\u4eba\u4e2d\u5fc3\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"bg-primary p-6 text-white\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-16 h-16 rounded-full bg-white\/20 flex items-center justify-center\">\n <i class=\"fa fa-user text-2xl\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-semibold text-lg\">\u5f20\u5148\u751f\u7684\u5bb6\u5ead\u8d26\u6237<\/h3>\n <p class=\"text-white\/80 text-sm\">\u5bb6\u5ead\u6210\u5458\uff1a3\u4eba<\/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-2xl font-bold\">87.5<\/p>\n <p class=\"text-white\/80 text-xs\">\u60c5\u611f\u6307\u6570<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-2xl font-bold\">24<\/p>\n <p class=\"text-white\/80 text-xs\">\u60c5\u611f\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-2xl font-bold\">3<\/p>\n <p class=\"text-white\/80 text-xs\">\u4f20\u627f\u8ba1\u5212<\/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-shield\"><\/i>\n <\/div>\n <span>\u8d26\u6237\u4e0e\u5b89\u5168<\/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\u6210\u5458\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-lock\"><\/i>\n <\/div>\n <span>\u9690\u79c1\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\u652f\u6301<\/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-info-circle\"><\/i>\n <\/div>\n <span>\u5173\u4e8e\u6211\u4eec<\/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 \u60c5\u611f\u8d44\u4ea7\u7ba1\u7406\u5e73\u53f0 v1.0.0<br>\n \u00a9 2023 \u60c5\u611f\u8d44\u4ea7\u79d1\u6280\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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 \n \n <script>\n \/\/ \u7b49\u5f85\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ \u521b\u5efa\u60c5\u611f\u6307\u6570\u8d8b\u52bf\u56fe\n const ctx = document.getElementById('emotionChart').getContext('2d');\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u60c5\u611f\u6307\u6570',\n data: [78, 82, 76, 80, 85, 87.5],\n borderColor: '#0A2463',\n backgroundColor: 'rgba(10, 36, 99, 0.1)',\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n y: {\n min: 50,\n max: 100,\n ticks: {\n stepSize: 10\n }\n }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\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-725","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725","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=725"}],"version-history":[{"count":26,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725\/revisions"}],"predecessor-version":[{"id":1611,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725\/revisions\/1611"}],"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=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":725,"date":"2025-06-12T14:43:43","date_gmt":"2025-06-12T06:43:43","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=725"},"modified":"2025-07-29T14:13:03","modified_gmt":"2025-07-29T06:13:03","slug":"xinsnc","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartfamily\/xinsnc\/","title":{"rendered":"\u5fc3\u8c10XinSync"},"content":{"rendered":"\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<!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\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 \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: '#0A2463', \/\/ \u6df1\u84dd\u8272 - \u4e3b\u8272\u8c03\uff0c\u4f53\u73b0\u4e13\u4e1a\u548c\u4fe1\u4efb\n secondary: '#3E92CC', \/\/ \u6d45\u84dd\u8272 - \u8f85\u52a9\u8272\n accent: '#D8E1FF', \/\/ \u6de1\u84dd\u8272 - \u5f3a\u8c03\u8272\n neutral: '#F5F5F7', \/\/ \u6d45\u7070\u8272 - \u80cc\u666f\u8272\n 'neutral-dark': '#2D3748', \/\/ \u6df1\u7070\u8272 - \u6587\u672c\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.1);\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(10, 36, 99, 0.15);\n }\n .swiss-border {\n border: 1px solid rgba(10, 36, 99, 0.1);\n }\n .text-balance {\n text-wrap: balance;\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-dark 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\">\u5fae\u4fe1\u5c0f\u7a0b\u5e8fUI\u539f\u578b\u8bbe\u8ba1 – \u501f\u9274\u94f6\u884c\u98ce\u683c\uff0c\u4e13\u6ce8\u60c5\u611f\u8d44\u4ea7\u7684\u5b58\u50a8\u3001\u589e\u503c\u4e0e\u4f20\u627f<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">1. \u6b22\u8fce\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n \n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n \n <div class=\"w-full h-full p-6 flex flex-col items-center justify-center bg-white\">\n <div class=\"w-24 h-24 rounded-full bg-primary\/10 flex items-center justify-center mb-8\">\n <i class=\"fa fa-heart text-4xl text-primary\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold text-primary mb-4\">HeartSync<\/h2>\n <p class=\"text-gray-500 text-center mb-10 px-4\">\u4e3a\u60a8\u7684\u5bb6\u5ead\u60c5\u611f\u5173\u7cfb\u63d0\u4f9b\u4e13\u4e1a\u7684\u5b58\u50a8\u3001\u589e\u503c\u4e0e\u4f20\u627f\u65b9\u6848<\/p>\n <div class=\"flex flex-col gap-3 w-full\">\n <button class=\"bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u7acb\u5373\u6ce8\u518c\n <\/button>\n <button class=\"border border-primary text-primary py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\u8d26\u6237\n <\/button>\n <\/div>\n <p class=\"text-xs text-gray-400 mt-8\">\n \u6ce8\u518c\u5373\u8868\u793a\u540c\u610f\u300a\u670d\u52a1\u6761\u6b3e\u300b\u548c\u300a\u9690\u79c1\u653f\u7b56\u300b\n <\/p>\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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">2. \u6ce8\u518c\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-8\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u521b\u5efa\u8d26\u6237<\/h2>\n <div class=\"w-6\"><\/div> \n <\/div>\n \n <form class=\"flex flex-col gap-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u624b\u673a\u53f7\u7801<\/label>\n <div class=\"relative\">\n <input type=\"tel\" 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\u624b\u673a\u53f7\u7801\">\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u9a8c\u8bc1\u7801<\/label>\n <div class=\"flex gap-2\">\n <input type=\"text\" class=\"flex-1 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\u9a8c\u8bc1\u7801\">\n <button type=\"button\" class=\"bg-primary\/10 text-primary px-4 py-3 rounded-lg font-medium btn-hover\">\u83b7\u53d6\u9a8c\u8bc1\u7801<\/button>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bbe\u7f6e\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\u8bbe\u7f6e\u5bc6\u7801\">\n <button type=\"button\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\">\n <i class=\"fa fa-eye-slash\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start mt-2\">\n <input type=\"checkbox\" id=\"agree\" class=\"mt-1\">\n <label for=\"agree\" class=\"ml-2 text-xs text-gray-500\">\n \u6211\u5df2\u9605\u8bfb\u5e76\u540c\u610f\u300a\u670d\u52a1\u6761\u6b3e\u300b\u3001\u300a\u9690\u79c1\u653f\u7b56\u300b\u53ca\u300a\u60c5\u611f\u6570\u636e\u4fdd\u62a4\u534f\u8bae\u300b\n <\/label>\n <\/div>\n \n <button type=\"button\" class=\"mt-4 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u5b8c\u6210\u6ce8\u518c\n <\/button>\n <\/form>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u5df2\u6709\u8d26\u6237\uff1f<span class=\"text-primary font-medium\">\u7acb\u5373\u767b\u5f55<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">3. \u767b\u5f55\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full p-6 bg-white flex flex-col\">\n <div class=\"flex justify-between items-center mb-8\">\n <button class=\"text-gray-500\">\n <i class=\"fa fa-arrow-left\"><\/i>\n <\/button>\n <h2 class=\"text-xl font-semibold\">\u8d26\u6237\u767b\u5f55<\/h2>\n <div class=\"w-6\"><\/div> \n <\/div>\n \n <form class=\"flex flex-col gap-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u624b\u673a\u53f7\u7801<\/label>\n <input type=\"tel\" 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\u624b\u673a\u53f7\u7801\">\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\u5bc6\u7801\">\n <button type=\"button\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400\">\n <i class=\"fa fa-eye-slash\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-end\">\n <a href=\"#\" class=\"text-sm text-primary\">\u5fd8\u8bb0\u5bc6\u7801\uff1f<\/a>\n <\/div>\n \n <button type=\"button\" class=\"mt-4 bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n \u767b\u5f55\n <\/button>\n <\/form>\n \n <div class=\"my-6 flex items-center\">\n <div class=\"flex-1 h-px bg-gray-200\"><\/div>\n <span class=\"px-3 text-gray-400 text-sm\">\u5176\u4ed6\u767b\u5f55\u65b9\u5f0f<\/span>\n <div class=\"flex-1 h-px bg-gray-200\"><\/div>\n <\/div>\n \n <button class=\"flex items-center justify-center gap-2 bg-[#07C160] text-white py-3 px-6 rounded-lg font-medium btn-hover\">\n <i class=\"fa fa-weixin text-lg\"><\/i>\n \u5fae\u4fe1\u5feb\u6377\u767b\u5f55\n <\/button>\n \n <div class=\"mt-auto mb-6\">\n <p class=\"text-center text-gray-500 text-sm\">\n \u8fd8\u6ca1\u6709\u8d26\u6237\uff1f<span class=\"text-primary font-medium\">\u7acb\u5373\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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">4. \u9996\u9875\/\u4eea\u8868\u76d8<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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-6\">\n <div>\n <h2 class=\"text-xl font-semibold\">\u60a8\u597d\uff0c\u7528\u6237<\/h2>\n <p class=\"text-gray-500 text-sm\">\u4eca\u5929\u662f 6\u670815\u65e5\uff0c\u661f\u671f\u56db<\/p>\n <\/div>\n <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n <i class=\"fa fa-user\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-primary rounded-xl p-5 text-white mb-6\">\n <div class=\"flex justify-between items-start mb-4\">\n <div>\n <p class=\"text-white\/80 text-sm\">\u5bb6\u5ead\u60c5\u611f\u6307\u6570<\/p>\n <h3 class=\"text-2xl font-bold mt-1\">87.5<\/h3>\n <\/div>\n <div class=\"bg-white\/20 rounded-lg px-2 py-1 text-xs\">\n \u8f83\u4e0a\u6708 +2.3\n <\/div>\n <\/div>\n <div class=\"w-full h-1 bg-white\/20 rounded-full overflow-hidden\">\n <div class=\"h-full bg-white rounded-full\" style=\"width: 87.5%\"><\/div>\n <\/div>\n <p class=\"text-white\/80 text-xs mt-2\">\u5065\u5eb7\u72b6\u6001\uff1a\u975e\u5e38\u826f\u597d<\/p>\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-3 gap-3 mb-8\">\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-plus\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u6dfb\u52a0\u8bb0\u5f55<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-lightbulb-o\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u4f18\u5316\u5efa\u8bae<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-exclamation-circle\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u7d27\u6025\u5e72\u9884<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-line-chart\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u60c5\u611f\u5206\u6790<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-book\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u4f20\u627f\u8ba1\u5212<\/span>\n <\/div>\n <div class=\"flex flex-col items-center p-3 bg-neutral rounded-lg 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-cog\"><\/i>\n <\/div>\n <span class=\"text-xs text-center\">\u66f4\u591a\u529f\u80fd<\/span>\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-semibold\">\u6700\u8fd1\u60c5\u611f\u8bb0\u5f55<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u67e5\u770b\u5168\u90e8<\/a>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"p-3 bg-neutral rounded-lg flex justify-between items-center\">\n <div>\n <p class=\"font-medium\">\u5bb6\u5ead\u805a\u9910\u5bf9\u8bdd<\/p>\n <p class=\"text-xs text-gray-500\">6\u670812\u65e5 19:30<\/p>\n <\/div>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n \n <div class=\"p-3 bg-neutral rounded-lg flex justify-between items-center\">\n <div>\n <p class=\"font-medium\">\u592b\u59bb\u6df1\u5165\u4ea4\u6d41<\/p>\n <p class=\"text-xs text-gray-500\">6\u670810\u65e5 21:15<\/p>\n <\/div>\n <span class=\"text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full\">\u4e2d\u6027<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u60c5\u611f\u4f18\u5316\u5efa\u8bae<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u591a\u5efa\u8bae<\/a>\n <\/div>\n \n <div class=\"p-4 bg-accent\/50 rounded-lg border border-primary\/10\">\n <div class=\"flex items-start gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary mt-0.5\">\n <i class=\"fa fa-heart\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm mb-1\">\u5b89\u6392\u4e00\u6b21\u6237\u5916\u5bb6\u5ead\u6d3b\u52a8<\/h4>\n <p class=\"text-xs text-gray-600\">\u6839\u636e\u60a8\u7684\u60c5\u611f\u6307\u6570\u5206\u6790\uff0c\u5efa\u8bae\u5728\u5468\u672b\u5b89\u6392\u4e00\u6b21\u6237\u5916\u5bb6\u5ead\u6d3b\u52a8\uff0c\u53ef\u63d0\u5347\u5bb6\u5ead\u51dd\u805a\u529b15%\u3002<\/p>\n <\/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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">5. \u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u6dfb\u52a0\u60c5\u611f\u8bb0\u5f55<\/h2>\n <button class=\"text-primary font-medium\">\u4fdd\u5b58<\/button>\n <\/div>\n \n <form class=\"space-y-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bb0\u5f55\u6807\u9898<\/label>\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=\"\u4f8b\u5982\uff1a\u5bb6\u5ead\u665a\u9910\u5bf9\u8bdd\u3001\u592b\u59bb\u8c08\u5fc3\u7b49\">\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bb0\u5f55\u7c7b\u578b<\/label>\n <select 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 appearance-none bg-white\">\n <option>\u592b\u59bb\u5bf9\u8bdd<\/option>\n <option>\u4eb2\u5b50\u4ea4\u6d41<\/option>\n <option>\u5bb6\u5ead\u4f1a\u8bae<\/option>\n <option>\u91cd\u8981\u51b3\u5b9a<\/option>\n <option>\u5176\u4ed6\u7c7b\u578b<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u60c5\u611f\u5185\u5bb9<\/label>\n <textarea rows=\"5\" 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\u8fd9\u6b21\u60c5\u611f\u4ea4\u6d41\u7684\u4e3b\u8981\u5185\u5bb9...\"><\/textarea>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u6dfb\u52a0\u9644\u4ef6\uff08\u53ef\u9009\uff09<\/label>\n <div class=\"grid grid-cols-2 gap-3\">\n \n <button type=\"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 \n \n <button type=\"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\">\u4e3b\u52a8\u4e0a\u4f20\u6587\u4ef6<\/span>\n <\/button>\n <\/div>\n <\/div>\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u60c5\u611f\u6807\u7b7e<\/label>\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"px-3 py-1 bg-primary\/10 text-primary text-xs rounded-full\">\u6e29\u99a8<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u7406\u89e3<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u652f\u6301<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full\">\u89c4\u5212<\/span>\n <span class=\"px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full flex items-center\">\n <i class=\"fa fa-plus text-xs mr-1\"><\/i> \u6dfb\u52a0\n <\/span>\n <\/div>\n <\/div>\n <\/form>\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">6. \u60c5\u611f\u8d26\u6237\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u60c5\u611f\u8d26\u6237<\/h2>\n <button class=\"text-primary\">\n <i class=\"fa fa-search\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div class=\"bg-neutral rounded-lg p-4\">\n <p class=\"text-gray-500 text-sm\">\u603b\u8bb0\u5f55\u6570<\/p>\n <p class=\"text-2xl font-bold mt-1\">24<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-4\">\n <p class=\"text-gray-500 text-sm\">\u672c\u6708\u65b0\u589e<\/p>\n <p class=\"text-2xl font-bold mt-1\">5<\/p>\n <\/div>\n <\/div>\n \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\">\u5168\u90e8\u8bb0\u5f55<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u592b\u59bb\u5bf9\u8bdd<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u4eb2\u5b50\u4ea4\u6d41<\/button>\n <button class=\"px-4 py-2 bg-neutral text-gray-600 rounded-full text-sm whitespace-nowrap\">\u5bb6\u5ead\u4f1a\u8bae<\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n <div class=\"space-y-4\">\n \n <div class=\"bg-white border border-gray-200 rounded-lg overflow-hidden card-hover\">\n <div class=\"p-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u5468\u672b\u5bb6\u5ead\u65c5\u884c\u89c4\u5212<\/h3>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u8ba8\u8bba\u4e86\u6691\u5047\u7684\u5bb6\u5ead\u65c5\u884c\u8ba1\u5212\uff0c\u5b69\u5b50\u4eec\u5e0c\u671b\u53bb\u6d77\u8fb9\uff0c\u6700\u7ec8\u51b3\u5b9a\u53bb\u9752\u5c9b\uff0c\u8ba1\u52127\u6708\u4e2d\u65ec\u51fa\u53d1…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u670814\u65e5 18:45<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u4e0e\u513f\u5b50\u7684\u5b66\u4e1a\u4ea4\u6d41<\/h3>\n <span class=\"text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full\">\u5f85\u6539\u8fdb<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u4e86\u89e3\u4e86\u513f\u5b50\u6700\u8fd1\u7684\u5b66\u4e60\u60c5\u51b5\uff0c\u6570\u5b66\u6210\u7ee9\u6709\u6240\u4e0b\u6ed1\uff0c\u9700\u8981\u627e\u8001\u5e08\u4e86\u89e3\u60c5\u51b5\u5e76\u5236\u5b9a\u8f85\u5bfc\u8ba1\u5212…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u670812\u65e5 20:30<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u7ed3\u5a5a\u7eaa\u5ff5\u65e5\u8c08\u8bdd<\/h3>\n <span class=\"text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full\">\u79ef\u6781<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u56de\u987e\u4e86\u7ed3\u5a5a10\u5e74\u6765\u7684\u70b9\u70b9\u6ef4\u6ef4\uff0c\u611f\u8c22\u5f7c\u6b64\u7684\u4ed8\u51fa\uff0c\u7ea6\u5b9a\u6bcf\u5e74\u90fd\u8981\u5b89\u6392\u4e00\u6b21\u4e8c\u4eba\u65c5\u884c…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u67088\u65e5 21:15<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/div>\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-4\">\n <div class=\"flex justify-between items-start mb-2\">\n <h3 class=\"font-medium\">\u5bb6\u5ead\u8d22\u52a1\u89c4\u5212\u4f1a\u8bae<\/h3>\n <span class=\"text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full\">\u4e2d\u6027<\/span>\n <\/div>\n <p class=\"text-sm text-gray-500 mb-3 line-clamp-2\">\u8ba8\u8bba\u4e86\u4e0b\u534a\u5e74\u7684\u5bb6\u5ead\u8d22\u52a1\u5b89\u6392\uff0c\u5305\u62ec\u5b69\u5b50\u7684\u6559\u80b2\u57fa\u91d1\u3001\u4fdd\u9669\u66f4\u65b0\u548c\u6295\u8d44\u8c03\u6574…<\/p>\n <div class=\"flex justify-between items-center\">\n <p class=\"text-xs text-gray-400\">6\u67085\u65e5 19:00<\/p>\n <div class=\"flex gap-2\">\n <button class=\"text-primary\">\n <i class=\"fa fa-paperclip\"><\/i>\n <\/button>\n <button class=\"text-gray-400 hover:text-primary\">\n <i class=\"fa fa-ellipsis-h\"><\/i>\n <\/button>\n <\/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-primary\">\n <i class=\"fa fa-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">7. \u60c5\u611f\u5206\u6790\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u60c5\u611f\u5206\u6790<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n \n \n <div class=\"bg-neutral rounded-lg p-4 mb-6\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"font-medium\">\u5bb6\u5ead\u60c5\u611f\u6307\u6570\u8d8b\u52bf<\/h3>\n <select class=\"text-sm bg-white border-none rounded px-2 py-1\">\n <option>\u8fd16\u4e2a\u6708<\/option>\n <option>\u8fd11\u5e74<\/option>\n <option>\u5168\u90e8<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full h-40\">\n <canvas id=\"emotionChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <h3 class=\"font-semibold mb-3\">\u60c5\u611f\u7c7b\u578b\u5206\u5e03<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mx-auto mb-2\">\n <i class=\"fa fa-smile-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u79ef\u6781\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">65%<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mx-auto mb-2\">\n <i class=\"fa fa-meh-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u4e2d\u6027\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">25%<\/p>\n <\/div>\n <div class=\"bg-neutral rounded-lg p-3 text-center\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mx-auto mb-2\">\n <i class=\"fa fa-frown-o\"><\/i>\n <\/div>\n <p class=\"text-xs text-gray-500\">\u6d88\u6781\u60c5\u611f<\/p>\n <p class=\"font-bold mt-1\">10%<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h3 class=\"font-semibold mb-3\">\u5173\u7cfb\u5065\u5eb7\u5ea6\u5206\u6790<\/h3>\n <div class=\"space-y-4\">\n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u592b\u59bb\u5173\u7cfb<\/span>\n <span class=\"text-sm font-medium\">92\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 92%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u4eb2\u5b50\u5173\u7cfb<\/span>\n <span class=\"text-sm font-medium\">85\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 85%\"><\/div>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"text-sm\">\u5bb6\u5ead\u6c9f\u901a<\/span>\n <span class=\"text-sm font-medium\">78\u5206<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-full bg-yellow-500 rounded-full\" style=\"width: 78%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">AI \u4f18\u5316\u5efa\u8bae<\/h3>\n <div class=\"bg-accent\/50 rounded-lg p-4 border border-primary\/10\">\n <h4 class=\"font-medium text-sm mb-2\">\u57fa\u4e8e\u60a8\u7684\u60c5\u611f\u6570\u636e\u5206\u6790<\/h4>\n <ul class=\"space-y-2 text-sm text-gray-700\">\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u589e\u52a0\u6bcf\u5468\u5bb6\u5ead\u4f1a\u8bae\u9891\u7387\uff0c\u53ef\u63d0\u5347\u5bb6\u5ead\u6c9f\u901a\u6307\u6570\u7ea615%<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u6bcf\u6708\u5b89\u6392\u4e00\u6b21\u4eb2\u5b50\u4e13\u5c5e\u6d3b\u52a8\uff0c\u6709\u52a9\u4e8e\u589e\u5f3a\u4eb2\u5b50\u60c5\u611f\u8fde\u63a5<\/span>\n <\/li>\n <li class=\"flex items-start gap-2\">\n <i class=\"fa fa-check-circle text-primary mt-0.5\"><\/i>\n <span>\u8bb0\u5f55\u4e2d\u663e\u793a\u8d22\u52a1\u8bdd\u9898\u6613\u5f15\u53d1\u7d27\u5f20\uff0c\u5efa\u8bae\u4f7f\u7528”\u60c5\u611f\u8d26\u6237”\u4e2d\u7684\u6c9f\u901a\u6307\u5357<\/span>\n <\/li>\n <\/ul>\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">8. \u4f20\u627f\u8ba1\u5212\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u4f20\u627f\u8ba1\u5212<\/h2>\n <button class=\"text-primary\">\n <i class=\"fa fa-plus\"><\/i>\n <\/button>\n <\/div>\n \n \n <div class=\"bg-primary rounded-xl p-5 text-white mb-6\">\n <h3 class=\"font-medium mb-3\">\u5bb6\u65cf\u60c5\u611f\u8d44\u4ea7\u4f20\u627f<\/h3>\n <p class=\"text-white\/80 text-sm mb-4\">\u8bb0\u5f55\u548c\u4f20\u9012\u5bb6\u65cf\u7684\u667a\u6167\u3001\u4ef7\u503c\u89c2\u548c\u60c5\u611f\u8fde\u63a5\uff0c\u6784\u5efa\u5bb6\u65cf\u7cbe\u795e\u8d22\u5bcc<\/p>\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <p class=\"text-white\/80 text-xs\">\u5df2\u521b\u5efa\u8ba1\u5212<\/p>\n <p class=\"text-xl font-bold mt-1\">3<\/p>\n <\/div>\n <div>\n <p class=\"text-white\/80 text-xs\">\u5f85\u5b8c\u6210\u4e8b\u9879<\/p>\n <p class=\"text-xl font-bold mt-1\">5<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-semibold\">\u5bb6\u5ead\u6559\u80b2\u7406\u5ff5<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u7ba1\u7406<\/a>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-4 card-hover\">\n <h4 class=\"font-medium mb-2\">\u6211\u4eec\u7684\u6838\u5fc3\u6559\u80b2\u4ef7\u503c\u89c2<\/h4>\n <p class=\"text-sm text-gray-600 mb-3 line-clamp-3\">1. \u8bda\u4fe1\u4e3a\u672c\uff1a\u65e0\u8bba\u4f55\u65f6\u4f55\u5730\uff0c\u90fd\u8981\u575a\u5b88\u8bda\u4fe1\u539f\u5219<br>2. \u7ec8\u8eab\u5b66\u4e60\uff1a\u4fdd\u6301\u597d\u5947\u5fc3\uff0c\u4e0d\u65ad\u5b66\u4e60\u65b0\u77e5\u8bc6\u548c\u6280\u80fd<br>3. \u8d23\u4efb\u62c5\u5f53\uff1a\u5bf9\u81ea\u5df1\u7684\u884c\u4e3a\u8d1f\u8d23\uff0c\u5173\u5fc3\u4ed6\u4eba\u548c\u793e\u4f1a<br>4. \u575a\u97e7\u4e0d\u62d4\uff1a\u9762\u5bf9\u56f0\u96be\u4e0d\u9000\u7f29\uff0c\u4ece\u5931\u8d25\u4e2d\u5b66\u4e60\u6210\u957f<\/p>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs text-gray-400\">\u66f4\u65b0\u4e8e 2023\u5e745\u670810\u65e5<\/span>\n <button class=\"text-primary text-sm\">\u67e5\u770b\u8be6\u60c5<\/button>\n <\/div>\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-semibold\">\u5bb6\u65cf\u6545\u4e8b\u96c6<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u7ba1\u7406<\/a>\n <\/div>\n \n <div class=\"space-y-3\">\n <div class=\"bg-white border border-gray-200 rounded-lg p-3 flex gap-3 card-hover\">\n <div class=\"w-12 h-12 bg-primary\/10 rounded flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm\">\u7956\u7236\u6bcd\u7684\u521b\u4e1a\u6545\u4e8b<\/h4>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4e8e 2023\u5e743\u670815\u65e5<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-white border border-gray-200 rounded-lg p-3 flex gap-3 card-hover\">\n <div class=\"w-12 h-12 bg-primary\/10 rounded flex items-center justify-center text-primary flex-shrink-0\">\n <i class=\"fa fa-book\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <h4 class=\"font-medium text-sm\">\u5bb6\u65cf\u4f20\u7edf\u8282\u65e5\u4e60\u4fd7<\/h4>\n <p class=\"text-xs text-gray-500\">\u8bb0\u5f55\u4e8e 2023\u5e742\u670820\u65e5<\/p>\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-semibold\">\u5bb6\u65cf\u5fc3\u7406\u5065\u5eb7\u5206\u6790<\/h3>\n <a href=\"#\" class=\"text-xs text-primary\">\u66f4\u65b0<\/a>\n <\/div>\n \n <div class=\"bg-neutral rounded-lg p-4\">\n <div class=\"flex items-start gap-3 mb-3\">\n <div class=\"w-8 h-8 rounded-full bg-primary\/10 flex items-center justify-center text-primary mt-0.5\">\n <i class=\"fa fa-heartbeat\"><\/i>\n <\/div>\n <div>\n <h4 class=\"font-medium text-sm\">\u5bb6\u65cf\u5fc3\u7406\u5065\u5eb7\u62a5\u544a<\/h4>\n <p class=\"text-xs text-gray-500 mt-1\">\u57fa\u4e8e\u5bb6\u65cf\u60c5\u611f\u8bb0\u5f55\u7684AI\u5206\u6790\uff0c\u66f4\u65b0\u4e8e 2023\u5e746\u67081\u65e5<\/p>\n <\/div>\n <\/div>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u60c5\u7eea\u7ba1\u7406\u80fd\u529b<\/span>\n <span class=\"text-xs font-medium\">\u826f\u597d<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u538b\u529b\u5e94\u5bf9\u65b9\u5f0f<\/span>\n <span class=\"text-xs font-medium\">\u9700\u5173\u6ce8<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs\">\u6c9f\u901a\u6a21\u5f0f\u5206\u6790<\/span>\n <span class=\"text-xs font-medium\">\u826f\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-4 py-2 text-sm bg-primary\/10 text-primary rounded-lg btn-hover\">\n \u67e5\u770b\u5b8c\u6574\u5206\u6790\u62a5\u544a\n <\/button>\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-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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">9. \u7d27\u6025\u5e72\u9884\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\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\">\u7d27\u6025\u60c5\u611f\u5e72\u9884<\/h2>\n <div class=\"w-6\"><\/div>\n <\/div>\n \n \n <div class=\"bg-red-50 border border-red-100 rounded-lg p-4 mb-6\">\n <h3 class=\"font-medium text-red-700 mb-3 flex items-center gap-2\">\n <i class=\"fa fa-exclamation-triangle\"><\/i>\n \u8bf7\u9009\u62e9\u5f53\u524d\u51b2\u7a81\u7a0b\u5ea6\n <\/h3>\n \n <div class=\"grid grid-cols-3 gap-3\">\n <button class=\"py-3 border border-gray-200 rounded-lg text-center text-sm card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mx-auto mb-1\">\n <i class=\"fa fa-warning\"><\/i>\n <\/div>\n \u8f7b\u5fae\u5206\u6b67\n <\/button>\n <button class=\"py-3 border border-orange-200 bg-orange-50 rounded-lg text-center text-sm text-orange-700 card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-1\">\n <i class=\"fa fa-exclamation\"><\/i>\n <\/div>\n \u4e2d\u5ea6\u51b2\u7a81\n <\/button>\n <button class=\"py-3 border border-red-200 bg-red-50 rounded-lg text-center text-sm text-red-700 card-hover\">\n <div class=\"w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600 mx-auto mb-1\">\n <i class=\"fa fa-exclamation-circle\"><\/i>\n <\/div>\n \u4e25\u91cd\u77db\u76fe\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"flex-1 overflow-y-auto px-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">\u51b2\u7a81\u7c7b\u578b<\/label>\n <div class=\"grid grid-cols-2 gap-2\">\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-user-o text-primary mr-2\"><\/i>\n \u592b\u59bb\u77db\u76fe\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-child text-primary mr-2\"><\/i>\n \u4eb2\u5b50\u51b2\u7a81\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-money text-primary mr-2\"><\/i>\n \u8d22\u52a1\u7ea0\u7eb7\n <\/button>\n <button class=\"p-3 border border-gray-200 rounded-lg text-left text-sm card-hover\">\n <i class=\"fa fa-ellipsis-h text-primary mr-2\"><\/i>\n \u5176\u4ed6\u7c7b\u578b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bf7\u7b80\u8981\u63cf\u8ff0\u95ee\u9898<\/label>\n <textarea rows=\"4\" 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\u5f53\u524d\u7684\u77db\u76fe\u70b9\u548c\u4e3b\u8981\u95ee\u9898...\"><\/textarea>\n <\/div>\n \n \n <div>\n <h3 class=\"font-semibold mb-3\">AI \u5373\u65f6\u5e72\u9884\u5efa\u8bae<\/h3>\n <div class=\"bg-accent\/50 rounded-lg p-4 border border-primary\/10\">\n <div class=\"flex items-start gap-2 mb-3\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 1\n <\/div>\n <p class=\"text-sm\">\u5efa\u8bae\u5148\u6682\u505c\u4e89\u8bba\uff0c\u53cc\u65b9\u5206\u5f00\u51b7\u975915-30\u5206\u949f\uff0c\u907f\u514d\u60c5\u7eea\u8fdb\u4e00\u6b65\u6fc0\u5316\u3002<\/p>\n <\/div>\n <div class=\"flex items-start gap-2 mb-3\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 2\n <\/div>\n <p class=\"text-sm\">\u51b7\u9759\u540e\uff0c\u5c1d\u8bd5\u4f7f\u7528”\u6211\u611f\u53d7”\u8868\u8fbe\u65b9\u5f0f\uff0c\u5982”\u5f53…\u53d1\u751f\u65f6\uff0c\u6211\u611f\u5230…”\uff0c\u800c\u975e\u6307\u8d23\u5bf9\u65b9\u3002<\/p>\n <\/div>\n <div class=\"flex items-start gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-primary\/20 flex items-center justify-center text-primary text-xs mt-0.5 flex-shrink-0\">\n 3\n <\/div>\n <p class=\"text-sm\">\u56de\u987e\u4f60\u4eec\u4e4b\u524d\u8bb0\u5f55\u7684\u79ef\u6781\u4e92\u52a8\uff08\u59826\u67088\u65e5\u7684\u8c08\u8bdd\uff09\uff0c\u63d0\u9192\u5f7c\u6b64\u7684\u611f\u60c5\u57fa\u7840\u3002<\/p>\n <\/div>\n <\/div>\n \n <button class=\"w-full mt-4 py-3 bg-primary text-white rounded-lg font-medium btn-hover\">\n \u83b7\u53d6\u8be6\u7ec6\u89e3\u51b3\u65b9\u6848\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-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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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=\"bg-primary p-6 text-white\">\n <h3 class=\"font-semibold text-lg\">10. \u4e2a\u4eba\u4e2d\u5fc3\u9875<\/h3>\n <\/div>\n <div class=\"p-1 relative\">\n <div class=\"w-full aspect-[9\/16] bg-neutral rounded-lg overflow-hidden relative border-8 border-neutral-dark\">\n <div class=\"w-full h-full bg-white flex flex-col\">\n \n <div class=\"bg-primary p-6 text-white\">\n <div class=\"flex items-center gap-4\">\n <div class=\"w-16 h-16 rounded-full bg-white\/20 flex items-center justify-center\">\n <i class=\"fa fa-user text-2xl\"><\/i>\n <\/div>\n <div>\n <h3 class=\"font-semibold text-lg\">\u5f20\u5148\u751f\u7684\u5bb6\u5ead\u8d26\u6237<\/h3>\n <p class=\"text-white\/80 text-sm\">\u5bb6\u5ead\u6210\u5458\uff1a3\u4eba<\/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-2xl font-bold\">87.5<\/p>\n <p class=\"text-white\/80 text-xs\">\u60c5\u611f\u6307\u6570<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-2xl font-bold\">24<\/p>\n <p class=\"text-white\/80 text-xs\">\u60c5\u611f\u8bb0\u5f55<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-2xl font-bold\">3<\/p>\n <p class=\"text-white\/80 text-xs\">\u4f20\u627f\u8ba1\u5212<\/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-shield\"><\/i>\n <\/div>\n <span>\u8d26\u6237\u4e0e\u5b89\u5168<\/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\u6210\u5458\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-lock\"><\/i>\n <\/div>\n <span>\u9690\u79c1\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\u652f\u6301<\/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-info-circle\"><\/i>\n <\/div>\n <span>\u5173\u4e8e\u6211\u4eec<\/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 \u60c5\u611f\u8d44\u4ea7\u7ba1\u7406\u5e73\u53f0 v1.0.0<br>\n \u00a9 2023 \u60c5\u611f\u8d44\u4ea7\u79d1\u6280\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-book 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-line-chart text-lg\"><\/i>\n <span class=\"text-xs mt-1\">\u5206\u6790<\/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 \n \n <script>\n \/\/ \u7b49\u5f85\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ \u521b\u5efa\u60c5\u611f\u6307\u6570\u8d8b\u52bf\u56fe\n const ctx = document.getElementById('emotionChart').getContext('2d');\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u60c5\u611f\u6307\u6570',\n data: [78, 82, 76, 80, 85, 87.5],\n borderColor: '#0A2463',\n backgroundColor: 'rgba(10, 36, 99, 0.1)',\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n y: {\n min: 50,\n max: 100,\n ticks: {\n stepSize: 10\n }\n }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\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-725","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725","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=725"}],"version-history":[{"count":26,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725\/revisions"}],"predecessor-version":[{"id":1611,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/725\/revisions\/1611"}],"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=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}