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 }} +
+ +
+ +
+ +
点击语音按钮,快来跟我对话吧!
+
+ +
+ +
按住说话
+
+ +
+
+
+ +
+ +
+
+
+ {{ item.type }} +
+
+
+
取消
+
确定
+
+
+ +
+ +
点击语音按钮,快来跟我对话吧!
+
+ +
+ +
按住说话
+
+ +
+
+
@@ -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; + } +}