{"html":"

Chat

Hello, How are you?

I'm good, thanks for asking! How about you?

\n \n

\n","css":".card-container {\n background-color: #fff;\n border-radius: 10px;\n padding: 15px;\n margin: 20px;\n display: flex;\n flex-direction: column;\n width: 280px;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-header .img-avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-right: 20px;\n background-color: #333;\n}\n\n.card-header .text-chat {\n color: black;\n margin: 0;\n font-size: 20px;\n}\n\n.card-body {\n flex: 1;\n overflow-y: auto;\n}\n\n.messages-container {\n padding: 15px;\n}\n\n.message-box {\n padding: 10px;\n margin-bottom: 5px;\n border-radius: 10px;\n}\n\n.message-box.left {\n background-color: #f1f1f1;\n color: black;\n font-size: 13px;\n left: 0;\n}\n\n.message-box.right {\n background-color: #333;\n color: #fff;\n font-size: 13px;\n right: 0;\n}\n\n.message-input {\n padding: 5px;\n border-top: 1px solid #ccc;\n}\n\n.message-input .message-send {\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: 10px;\n resize: none;\n}\n\n.message-input .button-send {\n background-color: #333;\n color: #fff;\n padding: 10px 20px;\n border: none;\n cursor: pointer;\n margin-left: 10px;\n border-radius: 10px;\n font-size: 13px;\n}\n\n.message-input .button-send:hover {\n background-color: #f1f1f1;\n color: #333;\n}\n"}

afraid-octopus-75

👁 实时预览

📝 源代码