diff --git a/src/views/chat/chat.vue b/src/views/chat/chat.vue
index 84b3d49..0091d8d 100644
--- a/src/views/chat/chat.vue
+++ b/src/views/chat/chat.vue
@@ -70,7 +70,62 @@
-
+
+
+
+
+
+
+
+
+
+
+ {{ item.message }}
+
+
+
+
+
+
+
点击语音按钮,快来跟我对话吧!
+
+

+
+
+
按住说话
+
+

+
+
+
+
+
+
+
+
+
+
+
点击语音按钮,快来跟我对话吧!
+
+

+
+
+
按住说话
+
+

+
+
+
@@ -100,7 +155,27 @@ export default {
{ name:'达尔文',url:require('../../assets/img/module_3_1.png')},
{ name:'雨果',url:require('../../assets/img/module_3_1.png')},
],// 人物模板列表
- modelItemAction:-1,// 人物模板列表选中高亮
+ modelItemAction: -1,// 人物模板列表选中高亮
+ chatRecordList: [
+ { form: 'me', message: '生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1' },
+ { form: 'you', message: '生于忧患死于安乐2' },
+ { form: 'me', message: '生于忧患死于安乐3' },
+ { form: 'you', message: '生于忧患死于安乐4' },
+ { form: 'me', message: '生于忧患死于安乐5' },
+ { form: 'me', message: '生于忧患死于安乐6' },
+ { form: 'me', message: '生于忧患死于安乐7' },
+ ],// 聊天记录列表
+ languageList: [
+ {type:'AUTO'},
+ {type:'璃月语'},
+ {type:'JP语'},
+ {type:'english'},
+ {type:'中国话'},
+ {type:'四川话'},
+ {type:'东百话'},
+ {type:'阿拉伯语'},
+ {type:'朝鲜语'},
+ ], //语种列表
};
},
computed: {
@@ -176,6 +251,7 @@ export default {
}
}
.showBody {
+ position: relative;
width: 100%;
height: calc(100vh - 44px) ;
background-color: red;
@@ -278,9 +354,154 @@ export default {
}
}
+ &-myCamera {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 96px;
+ height: 180px;
+ background-image:url(../../assets/img/bg.png);
+ background-size: contain;
+ }
+ &-chatBox {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 375px;
+ background-color: #ECECEC;
+ &-close {
+ padding: 10px 15px;
+ height: 35px;
+ i {
+ float: right;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 16px;
+ font-weight: 600;
+ }
+ }
+ &-record {
+ padding: 5px 10px 0;
+ height: 255px;
+ overflow-y: scroll;
+ font-size: 15px;
+ color: #333333;
+ line-height: 21px;
+ &-my {
+ float: right;
+ padding: 10px 20px;
+ margin-bottom: 15px;
+ background: #9EE445;
+ border-radius: 20px 20px 2px 20px;
+ clear: both;
+ }
+ .others {
+ float: left;
+ background: #FFFFFF;
+ border-radius: 20px 20px 20px 2px;
+ }
+ }
+ .showBody-bottom-speakDiv {
+ margin-top: 0;
+ height: 85px;
+ padding-top: 15px;
+ background-color: #fff;
+ &-text {
+ color: #666;
+ border-radius: 18px;
+ border: 1px solid #666666;
+ }
+ }
+ }
+ &-global {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 385px;
+ background-color: #ECECEC;
+ &-choose {
+ padding: 20px 36px 0;
+ height: 304px;
+ overflow-y: scroll;
+ font-size: 15px;
+ color: #333333;
+ line-height: 21px;
+ &-language {
+ display: flex;
+ justify-content: start;
+ flex-wrap: wrap;
+ width: 300px;
+ height: 210px;
+ background-color: #fff;
+ overflow: hidden;
+ border: none;
+ border-radius: 15px;
+ &-item {
+ width: 100px;
+ height: 70px;
+ text-align: center;
+ line-height: 70px;
+ font-size: 14px;
+ color: #333;
+ border: 1px solid #ECECEC;
+ }
+ }
+ &-btn {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+ >div {
+ width: 139px;
+ height: 37px;
+ border-radius: 31px;
+ text-align: center;
+ line-height: 37px;
+ font-size: 15px;
+ font-weight: 600;
+ }
+ &-no {
+ color: #333333;
+ background: #FFFFFF;
+ }
+ &-yes {
+ color: #FFFFFF;
+ background: #24A9FF;
+ }
+ }
+ }
+ .showBody-bottom-speakDiv {
+ margin-top: 0;
+ height: 85px;
+ padding-top: 15px;
+ background-color: #fff;
+ &-text {
+ color: #666;
+ border-radius: 18px;
+ border: 1px solid #666666;
+ }
+ }
+ }
}
}
.showBody-modelList::-webkit-scrollbar {
width:0;
}
+.showBody-chatBox-record::-webkit-scrollbar {
+ width:0;
+}
+.defaultBtn {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ width: 44px;
+ height: 44px;
+ background: rgba(0,0,0,0.3);
+ border-radius: 22px;
+ img {
+ width: 24px;
+ height: 24px;
+ }
+}