568170040@qq.com 2 роки тому
джерело
коміт
c67ef3d57b
1 змінених файлів з 223 додано та 2 видалено
  1. +223
    -2
      src/views/chat/chat.vue

+ 223
- 2
src/views/chat/chat.vue Переглянути файл

@@ -70,7 +70,62 @@
</div>
</div>
<!-- 摄像头窗口 -->
<div class="my"></div>
<div v-show="CameraAction" class="showBody-myCamera"></div>
<!-- 聊天框 -->
<div v-show="CloseChatAction" class="showBody-chatBox">
<!-- 关闭 -->
<div class="showBody-chatBox-close">
<i @click="CloseChatAction=false" class="el-icon-close"></i>
</div>
<!-- 聊天记录 -->
<div class="showBody-chatBox-record">
<div class="showBody-chatBox-record-my" :class="{'others':item.form!='me'}" v-for="item,index in chatRecordList" :key="index">
<span>{{ item.message }}</span>
</div>

</div>
<!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
<!-- 选择语言 -->
<div v-show="GlobalAction" class="showBody-global">
<!-- -->
<div class="showBody-global-choose">
<div class="showBody-global-choose-language">
<div class="showBody-global-choose-language-item" v-for="item in languageList" :key="item.type">
{{ item.type }}
</div>
</div>
<div class="showBody-global-choose-btn">
<div @click="GlobalAction=false" class="showBody-global-choose-btn-no">取消</div>
<div class="showBody-global-choose-btn-yes">确定</div>
</div>
</div>
<!-- 底部说话按钮 -->
<div class="showBody-bottom-speakDiv">
<!-- 没点麦克风 -->
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-microphone2.png" alt="">
</div>
<!-- 点了麦克风 -->
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -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;
}
}
</style>

Завантаження…
Відмінити
Зберегти