幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了vue.js实现h5机器人聊天的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>登录</title> <link rel="stylesheet" href="css/mui.css" /> </head> <style> page { background-color: #ececec; } .reply .pic, .send .pic { border-radius: 50%; padding: 10px; } .reply, .send { display: flex; } .reply .pic image, .send .pic image { border-radius: 50%; width: 80rpx; height: 80rpx; } .send { justify-content: flex-end; } .reply .content { padding: 10px 10px 10px 0; max-width: 480rpx; } .send .content { padding: 10px 0 10px 10px; max-width: 480rpx; } .reply .content .text, .send .content .text { background-color: #fff; border-radius: 5px; padding: 10px; font-size: 16px; } .send .content .text { background-color: #78fd75; } .sendMessage { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: #fff; } .inputMsg { flex: 2; background-color: #fff; height: 30px; font-size: 16px; padding: 5px 10px; border-bottom: 1px solid #ddd; } .sendMessage { position: fixed; bottom: 0px; width: 100%; height: 60px; line-height: 60px; background-color: #4CD964; } #inputs { position: absolute; display: inline-block; width: 65%; height: 40px; background-color: #fff; border-radius: 3px; } #btn_submit { position: absolute; width: 100px; display: inline-block; right: 10px; height: 40px; background-color: #DD524D; border: 0px; text-align: center; color: #fff; } .image { width: 60px; border-radius: 50%; height: 60px; } </style> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">老五</h1> </header> <div class="mui-content"> <!--chat.wxml--> <div id="cont"> <div > <!--<div v-if="{{item.type == 1}}">--> <div class="reply"> <div class="pic"> <image class="image" src="/UploadFiles/2021-04-02/list_img.png">关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue.js,机器人,聊天
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...