message-views-template/dist/message-views-template.css

+ 一个会话视图、朋友圈、微信收藏的 视图模板，只需要 写好自己数据结构的适配层，然后以props传入 即可。 + 项目刚开始开发，很多事件和需求并不完善； + 项目主要于公司业务，用于展示市面上大多数社交app的会话视图和朋友圈，的通用展示解决方案；

.message-body[data-v-74e97e3b]{min-width:30px;min-height:30px}.message-body .text[data-v-74e97e3b]{text-align:left;word-break:break-all}.message-body .map[data-v-74e97e3b]{display:flex;padding-bottom:10px}.message-body .map .map-img[data-v-74e97e3b]{width:50px;height:50px;margin-right:10px}.message-body .map .map-desc[data-v-74e97e3b]{text-align:left;max-width:250px}.message-body .desc[data-v-74e97e3b]{border-top:1px solid rgba(0,0,0,.1);margin-left:-5px;margin-right:-5px;padding:0 5px;color:#999;font-size:12px;padding-top:5px}.message-body .voice[data-v-74e97e3b]{margin:-4px -3px -8px}.message-body .web .web1[data-v-74e97e3b]{margin-bottom:5px}.message-body .web .web1 .web1-img-content[data-v-74e97e3b]{display:flex;padding:10px;justify-content:start}.message-body .web .web1 .web1-img-content .web1-img[data-v-74e97e3b]{height:70px;-o-object-fit:scale-down;object-fit:scale-down;margin-right:10px}.message-body .web .web1 .web1-desc .web-title[data-v-74e97e3b]{color:#4a7aff;text-decoration:underline;cursor:pointer;font-size:16px;font-weight:400}.message-body .web .web1 .web1-desc p[data-v-74e97e3b]{word-break:break-all;font-size:1rem;font-weight:400}.message-body .redenvelope[data-v-74e97e3b]{background-color:#fb992a;padding:10px 10px;display:flex}.message-body .redenvelope .redenvelope-img[data-v-74e97e3b]{max-width:50px;min-width:50px;margin-right:10px}.message-body .redenvelope .redenvelope-desc[data-v-74e97e3b]{max-width:170px;width:170px;color:#fff}.message-body .redenvelope .redenvelope-desc h5[data-v-74e97e3b]{font-size:1rem;margin-bottom:5px}.message-body .card .card-main[data-v-74e97e3b]{display:flex;width:260px}.message-body .card .card-main .card-img[data-v-74e97e3b]{max-width:50px;min-width:50px;margin-right:10px}.message-body .card .card-main .card-desc[data-v-74e97e3b]{text-align:left;width:calc(100% - 80px);margin-right:20px}.message-body .card .card-main .card-desc .card-title[data-v-74e97e3b]{font-size:18px;font-weight:400}.message-body .card .card-main .card-desc .card-info[data-v-74e97e3b]{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box}.message-body .card .card-flag[data-v-74e97e3b]{width:100%;margin-top:5px;padding-top:5px;text-align:left;border-top:1px solid hsla(0,0%,85.5%,.562)}.message-body .image img[data-v-74e97e3b]{max-height:100px}.message-body .audio video[data-v-74e97e3b]{max-width:300px;max-height:300px}.message-body .transferaccount[data-v-74e97e3b]{background-color:#2ca8ed;padding:10px 10px;display:flex}.message-body .transferaccount .transferaccount-img[data-v-74e97e3b]{max-width:50px;min-width:50px;margin-right:10px}.message-body .transferaccount .transferaccount-desc[data-v-74e97e3b]{max-width:170px;width:170px;color:#fff}.message-body .transferaccount .transferaccount-desc div[data-v-74e97e3b]:nth-child(3){border-top:1px solid hsla(0,0%,100%,.514)}.message-body span img[data-v-74e97e3b]{margin-right:10px;-o-object-fit:cover;object-fit:cover}.message-body .imsnsinfo .imsnsinfo-say[data-v-74e97e3b]{margin-bottom:20px}.message-body .imsnsinfo .imsnsinfo-time[data-v-74e97e3b]{font-size:12px;margin-bottom:10px}.message-body .imsnsinfo .imsnsinfo-like-info[data-v-74e97e3b]{position:relative;height:40px;background:rgba(0,0,0,.05);padding-left:40px;display:flex;line-height:40px;border-bottom:1px solid rgba(0,0,0,.1)}.message-body .imsnsinfo .imsnsinfo-like-info .like-icon[data-v-74e97e3b]{position:absolute;left:15px;top:13px;width:15px}.message-body .imsnsinfo .imsnsinfo-like-info .num-name.wrapper[data-v-74e97e3b]{display:flex;max-width:100px}.message-body .imsnsinfo .imsnsinfo-like-info .num-name[data-v-74e97e3b]{margin-right:5px}.message-body .imsnsinfo .imsnsinfo-like-info .num-like[data-v-74e97e3b]{font-size:12px}.message-body .imsnsinfo .imsnsinfo-res-comment[data-v-74e97e3b]{position:relative;background:rgba(0,0,0,.05);padding:20px 20px 10px 40px}.message-body .imsnsinfo .imsnsinfo-res-comment .like-icon[data-v-74e97e3b]{position:absolute;left:15px;top:30px;width:15px}.message-body .imsnsinfo .imsnsinfo-res-comment .comment-item[data-v-74e97e3b]{display:flex;margin-bottom:10px}.message-body .imsnsinfo .imsnsinfo-res-comment .comment-item .comment-item-img[data-v-74e97e3b]{width:35px;height:35px;margin-right:5px}.message-body .imsnsinfo .imsnsinfo-res-comment .comment-item .comment-item-desc[data-v-74e97e3b]{font-size:12px}.message-body .multi[data-v-74e97e3b]{border-bottom:1px dashed #000;margin:10px 0;padding:0 10px}.message-body .multi p.left .user-name[data-v-74e97e3b]{color:#1254e4}.message-body .multi p.right .user-name[data-v-74e97e3b]{color:#eee0e0}.message-body .job-content[data-v-74e97e3b]{max-width:450px;padding:10px;margin:10px 0;border-radius:4px;background-color:#fff}.message-body .job-content .green-text[data-v-74e97e3b]{color:rgba(9,190,175,.87)}.message-body .job-content .header[data-v-74e97e3b]{display:flex;justify-content:end}.message-body .job-content .header .job[data-v-74e97e3b]{font-size:18px;width:100%;word-spacing:10px;line-height:18px}.message-body .job-content .header .salary[data-v-74e97e3b]{width:130px;color:rgba(9,190,175,.87)}.message-body .job-content .request .education[data-v-74e97e3b]{display:inline-block;padding:2px;margin-right:10px;border-radius:2px}.message-body .job-content .request .pop[data-v-74e97e3b]{display:inline-block;background-color:#f3f3f3;padding:2px 5px;margin:10px 0;border-radius:2px}.message-body .job-content .employee .employee-header[data-v-74e97e3b]{display:flex}.message-body .job-content .employee .employee-header .employee-info[data-v-74e97e3b]{flex-grow:1}.message-body .job-content .employee .employee-header .employee-info .desc[data-v-74e97e3b]{border-top:1px solid rgba(0,0,0,.1);margin-left:-5px;margin-right:-5px;padding:0 5px;color:#999;font-size:12px;padding-top:5px}.message-body .job-content .employee .employee-header .employee-info .desc .iconitem[data-v-74e97e3b]{font-size:16px;margin-right:2px;color:rgba(9,190,175,.87)}.message-body .job-content .employee .employee-header .employee-info .desc .textitem[data-v-74e97e3b]{margin-right:10px;font-size:14px}.message-body .job-content .employee .employee-header .employee-info p[data-v-74e97e3b]{font-size:18px}.message-body .job-content .employee .employee-header .employee-info p .status[data-v-74e97e3b]{font-size:15px;color:#b3b3b3}.message-body .job-content .employee .employee-header img.avatar[data-v-74e97e3b]{width:60px;height:60px;margin-left:15px;border-radius:50%}#conversation-wraper[data-v-42ce7ab2]{padding:10px 0;background-color:#fff}#conversation-wraper .item[data-v-42ce7ab2]{min-height:60px;margin-bottom:20px;position:relative}#conversation-wraper .item.pengyouquan-line[data-v-42ce7ab2]{margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.1)}#conversation-wraper .item .time[data-v-42ce7ab2]{display:flex;justify-content:center;margin-bottom:5px}#conversation-wraper .item .time>span[data-v-42ce7ab2]{font-size:12px;border-radius:4px;padding:0 10px;background-color:#ccc;color:#fff}#conversation-wraper .item .main-systemmsg[data-v-42ce7ab2]{display:flex;justify-content:center}#conversation-wraper .item .main-systemmsg span[data-v-42ce7ab2]{font-size:13px;border-radius:4px;padding:0 10px;background-color:#cacaca;color:#fff}#conversation-wraper .item .item-checkbox[data-v-42ce7ab2]{display:block;width:30px;height:30px;position:absolute;top:50%;left:10px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#conversation-wraper .item .item-checkbox input[data-v-42ce7ab2]{opacity:0;cursor:pointer;height:0;width:0}#conversation-wraper .item .item-checkbox input:hover input~.checkbox-marker[data-v-42ce7ab2]{background-color:#ccc}#conversation-wraper .item .item-checkbox input:checked~.checkbox-marker[data-v-42ce7ab2]{background-color:#6a52f6}#conversation-wraper .item .item-checkbox input:checked~.checkbox-marker[data-v-42ce7ab2]:after{display:block}#conversation-wraper .item .item-checkbox .checkbox-marker[data-v-42ce7ab2]{width:25px;height:25px;position:absolute;background-color:#c9c9c9}#conversation-wraper .item .item-checkbox .checkbox-marker[data-v-42ce7ab2]:after{left:8px;top:2px;width:9px;height:18px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);content:"";position:absolute;display:none}#conversation-wraper .item .main[data-v-42ce7ab2]{display:flex;padding:5px 20px;padding-left:40px}#conversation-wraper .item .main[data-v-42ce7ab2]:hover{background-color:hsla(0,0%,89.4%,.5)}#conversation-wraper .item .main:hover .delete-image[data-v-42ce7ab2]{opacity:.2}#conversation-wraper .item .main .avatar[data-v-42ce7ab2]{margin-top:5px;width:50px;height:50px;border-radius:50%;margin-right:10px}#conversation-wraper .item .main .main-content[data-v-42ce7ab2]{max-width:calc(100% - 100px);display:flex;flex-direction:column}#conversation-wraper .item .main .main-content .name-wrapper[data-v-42ce7ab2]{display:flex}#conversation-wraper .item .main .main-content .name-wrapper .name[data-v-42ce7ab2]{font-size:13px;position:relative;white-space:nowrap}#conversation-wraper .item .main .main-content .name-wrapper .name .delete-image[data-v-42ce7ab2]{position:absolute;top:-10px;z-index:2}#conversation-wraper .item .main .main-content .message-regular[data-v-42ce7ab2]{flex-direction:row-reverse;border-radius:5px;border-top-right-radius:0}#conversation-wraper .item .main .main-content .message-regular .message-back[data-v-42ce7ab2]{background-color:#ebebeb}#conversation-wraper .item .main .main-content .message-regular .message-back[data-v-42ce7ab2]:after{border-top:8px solid #ebebeb;right:-5px;top:0}#conversation-wraper .item .main .main-content .message-media .message-back[data-v-42ce7ab2]{background-color:#fff}#conversation-wraper .item .main .main-content .message-media .message-back[data-v-42ce7ab2]:after{border-top:8px solid #fff}#conversation-wraper .item .main .main-content .message[data-v-42ce7ab2]{flex-direction:row-reverse;border-radius:5px;border-top-right-radius:0;font-size:14px;display:flex;padding:5px}#conversation-wraper .item .main .main-content .message .relative-wrap[data-v-42ce7ab2]{display:flex}#conversation-wraper .item .main .main-content .message .relative-wrap .function-bar[data-v-42ce7ab2]{width:80px;min-width:80px;display:flex;align-items:flex-end}#conversation-wraper .item .main .main-content .message .relative-wrap .function-bar .item-flag[data-v-42ce7ab2]{height:30px;line-height:30px}#conversation-wraper .item .main .main-content .message .relative-wrap .function-bar .item-flag i[data-v-42ce7ab2]{font-size:30px}#conversation-wraper .item .main .main-content .message .relative-wrap .function-bar .item-transtale[data-v-42ce7ab2]{cursor:pointer}#conversation-wraper .item .main .main-content .message .relative-wrap .function-bar .item-selected[data-v-42ce7ab2]{color:red}#conversation-wraper .item .main .main-content .message .message-back[data-v-42ce7ab2]{position:relative;max-width:100%;padding:5px;display:inline-block;word-wrap:break-word;border-radius:5px}#conversation-wraper .item .main .main-content .message .message-back[data-v-42ce7ab2]:after{position:absolute;display:block;content:"";width:0;height:0;right:-5px;top:0;border-left:8px solid transparent;border-right:8px solid transparent}#conversation-wraper .item .main .main-content .voice-text[data-v-42ce7ab2]{width:100%}#conversation-wraper .item .main .main-content .voice-text .error-text[data-v-42ce7ab2]{color:red}#conversation-wraper .item .main .main-content .voice-text span[data-v-42ce7ab2]{color:#158bec}#conversation-wraper .item .main.left[data-v-42ce7ab2]{flex-direction:row}#conversation-wraper .item .main.left .avatar[data-v-42ce7ab2]{margin-right:10px}#conversation-wraper .item .main.left .main-content .name-wrapper[data-v-42ce7ab2]{flex-direction:row}#conversation-wraper .item .main.left .main-content .name-wrapper .name .delete-image[data-v-42ce7ab2]{right:0}#conversation-wraper .item .main.left .main-content .name-wrapper .name[data-v-42ce7ab2]:before{display:inline-block;content:attr(name);margin-right:5px}#conversation-wraper .item .main.left .main-content .name-wrapper .name[data-v-42ce7ab2]:after{display:inline-block;content:attr(time);font-size:12px}#conversation-wraper .item .main.left .main-content .message-media[data-v-42ce7ab2]{flex-direction:row;border-radius:5px;border-top-left-radius:0}#conversation-wraper .item .main.left .main-content .message-media .message-back[data-v-42ce7ab2]:after{left:-5px;top:0}#conversation-wraper .item .main.left .main-content .message[data-v-42ce7ab2]{flex-direction:row;border-radius:5px;border-top-left-radius:0}#conversation-wraper .item .main.left .main-content .message .relative-wrap[data-v-42ce7ab2]{flex-direction:row-reverse}#conversation-wraper .item .main.left .main-content .message .message-back[data-v-42ce7ab2]:after{left:-5px;top:0}#conversation-wraper .item .main.left .voice-text[data-v-42ce7ab2]{padding-right:85px}#conversation-wraper .item .main.right[data-v-42ce7ab2]{flex-direction:row-reverse}#conversation-wraper .item .main.right .avatar[data-v-42ce7ab2]{margin-right:0;margin-left:10px}#conversation-wraper .item .main.right .main-content .name-wrapper[data-v-42ce7ab2]{flex-direction:row-reverse}#conversation-wraper .item .main.right .main-content .name-wrapper .name .delete-image[data-v-42ce7ab2]{left:0}#conversation-wraper .item .main.right .main-content .name-wrapper .name[data-v-42ce7ab2]:after{display:inline-block;content:attr(name)}#conversation-wraper .item .main.right .main-content .name-wrapper .name[data-v-42ce7ab2]:before{display:inline-block;content:attr(time);font-size:12px;margin-right:5px}#conversation-wraper .item .main.right .main-content .message .relative-wrap .function-bar[data-v-42ce7ab2]{flex-direction:row-reverse}#conversation-wraper .item .main.right .main-content .message-regular .message-back[data-v-42ce7ab2]{background-color:#ebebeb}#conversation-wraper .item .main.right .main-content .message-regular .message-back[data-v-42ce7ab2]:after{border-top:8px solid #ebebeb}#conversation-wraper .item .main.right .main-content .message-media .message-back[data-v-42ce7ab2]{background-color:#fff}#conversation-wraper .item .main.right .main-content .message-media .message-back[data-v-42ce7ab2]:after{border-top:8px solid #fff}#conversation-wraper .item .main.right .main-content .message-normal .message-back[data-v-42ce7ab2]{color:#fff;background-color:#158bec}#conversation-wraper .item .main.right .main-content .message-normal .message-back[data-v-42ce7ab2]:after{border-top:8px solid #158bec}#conversation-wraper .item .main.right .voice-text[data-v-42ce7ab2]{padding-left:85px}.collect-body[data-v-65ffae40]{text-align:left}.collect-body .text[data-v-65ffae40]{font-size:1rem;white-space:pre-wrap;text-align:left;margin-bottom:5px}.collect-body .image[data-v-65ffae40]{max-width:350px}.collect-body .image img[data-v-65ffae40]{width:100px;height:100px;-o-object-fit:scale-down;object-fit:scale-down;background-color:#d1d1d1;margin-right:5px}.collect-body .video video[data-v-65ffae40]{max-width:300px;max-height:300px}.collect-body .file .file-link[data-v-65ffae40]{color:#4a7aff;cursor:pointer;font-size:16px;font-weight:400}.collect-body .map[data-v-65ffae40]{display:flex;padding:10px;background-color:#d4d4d4}.collect-body .map .map-img[data-v-65ffae40]{width:50px;height:50px;margin-right:10px}.collect-body .map .map-desc[data-v-65ffae40]{text-align:left;max-width:250px}.collect-body .web .web1[data-v-65ffae40]{margin-bottom:5px}.collect-body .web .web1 .web1-img-content[data-v-65ffae40]{display:flex;padding:10px;justify-content:start}.collect-body .web .web1 .web1-img-content .web1-img[data-v-65ffae40]{height:70px;-o-object-fit:scale-down;object-fit:scale-down;margin-right:10px}.collect-body .web .web1 .web1-desc[data-v-65ffae40]{padding:10px;background-color:hsla(0,0%,83.1%,.5)}.collect-body .web .web1 .web1-desc .web-title[data-v-65ffae40]{color:#4a7aff;cursor:pointer;font-size:16px;font-weight:400}.collect-body .web .web1 .web1-desc .web-content[data-v-65ffae40]{max-width:400px}#collections .item[data-v-130e5640]{min-height:60px;margin-bottom:20px}#collections .item .main[data-v-130e5640]{display:flex;position:relative;padding:5px 20px}#collections .item .main[data-v-130e5640]:hover{background-color:hsla(0,0%,89.4%,.5)}#collections .item .main:hover .delete-image[data-v-130e5640]{opacity:.2}#collections .item .main .avatar[data-v-130e5640]{margin-top:5px;width:50px;height:50px;border-radius:50%;margin-right:10px}#collections .item .main .main-content[data-v-130e5640]{max-width:calc(100% - 200px);display:flex;flex-direction:column}#collections .item .main .main-content .name-wrapper[data-v-130e5640]{display:flex}#collections .item .main .main-content .name-wrapper .name[data-v-130e5640]{font-size:14px;white-space:nowrap;position:relative}#collections .item .main .main-content .name-wrapper .name .delete-image[data-v-130e5640]{position:absolute;top:-10px;right:0;z-index:2}#collections .item .main .main-content .collect-content[data-v-130e5640]{font-size:1rem;position:relative}#collections .item .main .main-content .collect-content .location-name[data-v-130e5640]{color:#3a78ff}#collections .item .main .main-content .collect-content .item-selected[data-v-130e5640]{color:red;position:absolute;top:0;right:-45px}#collections .item .main .main-content .collect-content .item-selected i[data-v-130e5640]{font-size:40px}#collections .item .main .main-content .collect-time[data-v-130e5640]{text-align:left;color:#3a78ff}#collections .item .main .main-content .collect-status[data-v-130e5640]{text-align:left;margin-bottom:10px}#collections .item .main .main-content .collect-status .like-names[data-v-130e5640]{font-size:14px}#collections .item .main .main-content .collect-status .like-names i[data-v-130e5640]{margin-right:5px}#collections .item .main .main-content .collect-status .like-names span[data-v-130e5640]{color:#3a78ff}#collections .item .main .main-content .collect-comments[data-v-130e5640]{text-align:left;font-size:14px}#collections .item .main .main-content .collect-comments .comment-item span.name[data-v-130e5640]{color:#3a78ff}#collections .item .main .main-content .collect-comments .content[data-v-130e5640]{white-space:pre-wrap;margin:0 0 10px}