@gnai/message-templates-vue/dist/style.css

A flexible Vue 3 component library for rendering various platform message templates (WeChat, Xiaohongshu, Douyin, etc.)

.message-template[data-v-e27a5802]{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.message-template--light[data-v-e27a5802]{--primary-color: #07c160;--secondary-color: #2a313d;--background-color: #ffffff;--text-color: #333333;--border-color: #e5e5e5}.message-template--dark[data-v-e27a5802]{--primary-color: #07c160;--secondary-color: #ffffff;--background-color: #1a1a1a;--text-color: #ffffff;--border-color: #333333}.message-template--small[data-v-e27a5802]{--font-size: 12px;--padding: 8px;--avatar-size: 32px}.message-template--medium[data-v-e27a5802]{--font-size: 14px;--padding: 16px;--avatar-size: 44px}.message-template--large[data-v-e27a5802]{--font-size: 16px;--padding: 20px;--avatar-size: 56px}.message-template__content[data-v-e27a5802]{background:var(--background-color);border-radius:8px;overflow:hidden;border:1px solid var(--border-color);display:inline-block}.message-template__content.video[data-v-e27a5802],.message-template__content.audio[data-v-e27a5802]{background:transparent;border:none}.message-template__content .person-content[data-v-e27a5802]{width:240px;padding:var(--padding);display:flex;align-items:center;gap:16px}.message-template__content .person-content .name[data-v-e27a5802]{font-weight:500;color:var(--secondary-color);font-size:var(--font-size)}.message-template__content .person-content .person[data-v-e27a5802]{color:#86909c;margin-top:4px;font-size:calc(var(--font-size) - 2px)}.message-template__content .person-content .avatar[data-v-e27a5802]{width:var(--avatar-size);height:var(--avatar-size);border-radius:4px;flex-shrink:0;overflow:hidden}.message-template__content .person-content .avatar img[data-v-e27a5802]{width:100%;height:100%}.message-template__content .image-wrapper[data-v-e27a5802]{display:inline-flex;border-radius:8px;overflow:hidden}.message-template__content .link-content[data-v-e27a5802]{width:240px;padding:var(--padding);cursor:pointer;transition:all .2s}.message-template__content .link-content[data-v-e27a5802]:hover{background:#00000005}.message-template__content .link-content .title[data-v-e27a5802]{color:var(--secondary-color);font-weight:500;margin-bottom:6px;font-size:var(--font-size)}.message-template__content .link-content .box[data-v-e27a5802]{display:flex;align-items:flex-end;justify-content:space-between}.message-template__content .link-content .box img[data-v-e27a5802]{flex-shrink:0;width:var(--avatar-size);height:var(--avatar-size);border-radius:6px}.message-template__content .link-content .box .desc[data-v-e27a5802]{color:#86909c;margin-right:20px;min-height:calc(var(--avatar-size) + 2px);font-size:calc(var(--font-size) - 2px)}.message-template__content .position-content[data-v-e27a5802]{width:240px;padding:var(--padding);cursor:pointer;transition:all .2s}.message-template__content .position-content[data-v-e27a5802]:hover{background:#00000005}.message-template__content .position-content .title[data-v-e27a5802]{font-weight:500;color:var(--secondary-color);font-size:var(--font-size)}.message-template__content .position-content .desc[data-v-e27a5802]{margin-top:4px;color:#86909c;font-size:calc(var(--font-size) - 2px)}.message-template__content .minip-content[data-v-e27a5802]{width:240px;padding:var(--padding)}.message-template__content .minip-content .name[data-v-e27a5802]{display:flex;align-items:center;gap:6px;color:#bbc0c7;font-size:var(--font-size)}.message-template__content .minip-content .avatar[data-v-e27a5802]{width:24px;height:24px;border-radius:100%;flex-shrink:0;overflow:hidden}.message-template__content .minip-content .avatar img[data-v-e27a5802]{width:100%;height:100%}.message-template__content .minip-content .label[data-v-e27a5802]{margin-left:auto;flex-shrink:0;font-size:calc(var(--font-size) - 2px)}.message-template__content .minip-content .title[data-v-e27a5802]{margin-top:10px;color:var(--secondary-color);font-size:var(--font-size)}.message-template__content .minip-content .cover[data-v-e27a5802]{width:100%;height:160px;overflow:hidden;margin-top:4px;border-radius:4px}.message-template__content .minip-content .cover img[data-v-e27a5802]{width:100%;height:100%;object-fit:cover}.message-template__content .video-content[data-v-e27a5802],.message-template__content .audio-content[data-v-e27a5802]{background-color:transparent}.message-template__content .file-content[data-v-e27a5802]{width:220px;background:#fff;border-radius:var(--radius-m);overflow:hidden}.message-template__content .file-content .bottom[data-v-e27a5802]{border-top:1px solid rgba(0,0,0,.05);padding:10px 14px;color:#9097a3;display:flex;align-items:center;justify-content:space-between;background:#f8f9fc}.message-template__content .file-content .bottom .download[data-v-e27a5802]{cursor:pointer}.message-template__content .file-content .top[data-v-e27a5802]{display:flex;justify-content:space-between;word-break:break-all;font-size:16px;line-height:22px;padding:16px}.message-template__content .file-content .top .name[data-v-e27a5802]{color:#2a313d;font-weight:500}.message-template__content .file-content .top .size[data-v-e27a5802]{margin-top:4px;color:#86909c}.message-template__content .file-content .top img[data-v-e27a5802]{height:44px;flex-shrink:0;margin-left:20px}.message-template__content .text-content[data-v-e27a5802]{padding:var(--padding);color:var(--text-color);font-size:var(--font-size);line-height:1.5;word-break:break-word}.message-template__content .text-content .highlight[data-v-e27a5802] b{color:#3cae90;font-weight:700}.message-template__content .sph-content[data-v-e27a5802]{width:220px;height:310px;border-radius:var(--radius-m);overflow:hidden;word-break:break-all;background:#fff;background-size:cover;position:relative}.message-template__content .sph-content .content-img[data-v-e27a5802]{width:100%;height:100%;object-fit:cover}.message-template__content .sph-content .cover[data-v-e27a5802]{position:absolute;top:0;left:0;width:100%;height:100%}.message-template__content .sph-content .bottom[data-v-e27a5802]{display:flex;align-items:center;gap:6px;position:absolute;bottom:16px;left:16px;color:#fff;font-size:16px;font-weight:500}