body {
            /*padding: 2px;
            margin: 0px 2px 0px 0px;*/
        }
        img {
            width: 220px;
        }
        .dataDivx {
            width: calc(100% - 14px);
            height: 100vh;
            border: solid 1px grey;
            border-radius: 5px;
            margin: 6px 0px 0px 6px;
        }
        .topDiv {
            height: 40px;
            width: 100%;
            /*border-top-left-radius: 5px;*/
            /*border-top-right-radius: 5px;*/
            line-height: 40px; /* 文字垂直居中 */
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            /*padding-left: 20px;*/
            box-sizing: border-box;
            /*color: white;*/
            background-color: #fafafa;
        }
        .line {
            width: 100%;
            height: 1px;
            background-color: rgb(183, 178, 178);
        }
        .chat {
            /*height: calc(100vh - 220px);*/
            width: 100%;
            overflow: auto; /* 内容超出时显示滚动条 172*/
            background-image:url('bj.jpg');
        }
        .leftDiv {
            width: 100%;
            margin-bottom: 3px;
        }
 
        .leftDiv:after {
            content: '';
            display: block;
            clear: both; /* 清除浮动 */
        }
 
        .left1 {
            width: 50px;
            height: 50px;
            background-color: rgba(24, 120, 188, 0.968);
            /*background-color: rgb(235, 231, 231);*/
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 5px;
            border-radius: 30px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 14px;
        }
 
        .left1a {
            width: 50px;
            height: 50px;
            background-color: rgba(24, 120, 188, 0.968);
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 5px;
            border-radius: 30px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 14px;
        }
 
        .left2 {
            width: calc(100% - 130px);
            float: left;
            margin-top: 20px;
        }
 
        .leftContent {
            background-color: rgb(235, 231, 231);
            font-size: 14px;
            padding: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            margin-top: 2px;
            display: inline-block;
            word-break: break-all; /* 允许长单词换行 */
        }
        .rightDiv {
            width: 100%;
            margin-bottom: 3px;
        }
 
        .rightDiv:after {
            content: '';
            display: block;
            clear: both; /* 清除浮动 */
        }
 
        .right1 {
            width: 50px;
            height: 50px;
            background-color: rgba(24, 120, 188, 0.968);
            float: right;
            margin-top: 10px;
            margin-left: 5px;
            margin-right: 10px;
            border-radius: 30px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 14px;
        }
 
        .right2 {
            width: calc(100% - 130px);
            float: right;
            margin-top: 20px;
            text-align: right;
        }
 
        .rightContent {
            background-color: rgb(79, 144, 218);
            color: white;
            font-size: 14px;;
            padding: 10px;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            margin-top: 2px;
            display: inline-block;
            word-break: break-all; /* 允许长单词换行 */
        }
        .bottomDiv {
            height: 150px;
            width: 100%;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            position: relative;
        }
 
        .text {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-width: 0px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            outline: none;
            padding: 15px;
            resize: none;
            font-size: 14px;;
        }
 
        .commit {
            width: 90px;
            height: 35px;
            background-color: rgb(19, 149, 229);
            color: white;
            font-size: 14px;;
            border-radius: 5px;
            position: absolute;
            bottom: 15px;
            right: 15px;
            border: none;
        }
        /* 加号功能 */
        .div3 {
            /*width: 326px;*/
            height: 48px;
            margin: 0;
            padding: 0;
            background: rgb(240, 240, 240);
        }
 
        /* 输入框 */
        .div5 {
            /*margin-top: 10px;*/
            /* 修改这行的长度，为后续的发送按钮显示做准备 */
            /*width: 380px;*/
            height: 48px;
            overflow: hidden;
            border-top: 1px solid pink 326px;
            border-bottom: 1px solid pink 0px;
        }
 
        /* 左边输入语音 */
        .i1 {
            float: left;
            width: 24px;
            height: 24px;
            margin: 10px 0 10px 9px;
        }
 
        /* 输入框 */
        .i3 {
            outline: none;
            border: 0;
            border-radius: 5px;
            float: left;
            margin: 8px 0 8px 9px;
            width: calc(100% - 120px);
            height: 28px;
            /* 修改光标的颜色 */
            caret-color: red;
            transition: all .4s;
        }
 
        /* emjoy的位置 */
        .i4 {
            float: left;
            margin: 8px 0 8px 9px;
            width: 28px;
            height: 28px;
        }
 
        /* 叉掉 */
        .i2 {
            display: block;
            float: left;
            width: 22px;
            height: 22px;
            margin: 12px 10px 10px 9px;
        }
 
        /* 发送按钮 style="position: absolute;margin-top: -30px;" */
        .i5 {
            display: block;
            float: left;
            width: 52px;
            height: 28px;
            border: 0;
            border-radius: 5px;
            background-color: rgba(24, 120, 188, 0.968);
            margin: 8px 0 10px 12px;
            color: white;
        }
        .i6 {
            position: absolute;
            margin-top: -25px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 52px;
            height: 28px;
            border: 0;
            border-radius: 5px;
            background-color: rgba(24, 120, 188, 0.968);
            /*margin: 8px 0 10px 12px;*/
            color: white;
        }
        .p {
            font-size: 10px;
            color: grey;
        }
        .emjon{
            width: 260px;
            height: auto;
            border: 1px solid #ccc;
            position: absolute;
            left:10px;
            bottom:60px;
            display: none;
            background: #fff;
            border-radius: 5px;
        }
        .emjon ul{
            list-style: none;
        }
        .emjon ul li{
            width: 26px;
            height: 26px;
            margin: 5px;
            float: left;
  
        }
        .emjon ul li:hover{
            box-shadow:5px 5px 5px #888888;
            transform: scale(1.2);
        }
        .emjon ul li img{
            width: 100%;
            height: 100%;
        }