| @@ -70,7 +70,62 @@ | |||||
| </div> | </div> | ||||
| </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> | </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')}, | ||||
| { 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: { | computed: { | ||||
| @@ -176,6 +251,7 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .showBody { | .showBody { | ||||
| position: relative; | |||||
| width: 100%; | width: 100%; | ||||
| height: calc(100vh - 44px) ; | height: calc(100vh - 44px) ; | ||||
| background-color: red; | 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 { | .showBody-modelList::-webkit-scrollbar { | ||||
| width:0; | 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> | </style> | ||||