diff --git a/src/assets/icon/icon-closeChat.png b/src/assets/icon/icon-closeChat.png new file mode 100644 index 0000000..98419c0 Binary files /dev/null and b/src/assets/icon/icon-closeChat.png differ diff --git a/src/assets/icon/icon-global.png b/src/assets/icon/icon-global.png new file mode 100644 index 0000000..70529cd Binary files /dev/null and b/src/assets/icon/icon-global.png differ diff --git a/src/assets/icon/icon-microphone2.png b/src/assets/icon/icon-microphone2.png new file mode 100644 index 0000000..63ed38b Binary files /dev/null and b/src/assets/icon/icon-microphone2.png differ diff --git a/src/assets/icon/icon-openCamera.png b/src/assets/icon/icon-openCamera.png new file mode 100644 index 0000000..2d57f1d Binary files /dev/null and b/src/assets/icon/icon-openCamera.png differ diff --git a/src/assets/icon/icon-person.png b/src/assets/icon/icon-person.png new file mode 100644 index 0000000..6478869 Binary files /dev/null and b/src/assets/icon/icon-person.png differ diff --git a/src/assets/icon/icon-speaking.png b/src/assets/icon/icon-speaking.png new file mode 100644 index 0000000..6864547 Binary files /dev/null and b/src/assets/icon/icon-speaking.png differ diff --git a/src/styles/index.scss b/src/styles/index.scss index f84640e..2b74325 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ + .floatRight { float: right; } @@ -11,6 +12,11 @@ font-weight: normal; color: red; } +//图片居中对齐 img { vertical-align: middle; +} +//按钮选中颜色 +.buleBtn { + background: #24A9FF!important; } \ No newline at end of file diff --git a/src/views/chat/chat.vue b/src/views/chat/chat.vue index 5eaaa04..84b3d49 100644 --- a/src/views/chat/chat.vue +++ b/src/views/chat/chat.vue @@ -11,9 +11,66 @@ 退出聊天 - +
- + +
+ +
+
+
{{ item.name }} +
+
+ +
+
+ +
+ +
+
+ +
+

更换人物模板

+
+ +
+
+ +
+

摄像头开启

+
+ +
+
+ +
+

对话框关闭

+
+ +
+
+ +
+

选择对话语言

+
+
+ +
+ +
点击语音按钮,快来跟我对话吧!
+
+ +
+ +
按住说话
+
+ +
+
+
+ +
@@ -32,6 +89,18 @@ export default { data() { return { inPage: false, + PersonButtonAction: false,//个人按钮状态 + CameraAction:false,// 摄像头按钮状态 + CloseChatAction:false,// 聊天框按钮状态 + GlobalAction:false,// 语音按钮状态 + speakingAction: false, // 底部是否说话按钮状态 + modelList: [ + { 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,// 人物模板列表选中高亮 }; }, computed: { @@ -42,7 +111,22 @@ export default { methods: { ...mapActions(["setCharacters"]), - + // 点击个人按钮事件 + clickPersonButton() { + this.PersonButtonAction=!this.PersonButtonAction + }, + // 点击摄像头按钮事件 + clickCameraButton() { + this.CameraAction=!this.CameraAction + }, + // 点击聊天框按钮事件 + clickCloseChatButton() { + this.CloseChatAction=!this.CloseChatAction + }, + // 点击语音按钮事件 + clickGlobalButton() { + this.GlobalAction=!this.GlobalAction + }, go(url) { this.$router.push(url); }, @@ -95,6 +179,108 @@ export default { width: 100%; height: calc(100vh - 44px) ; background-color: red; + &-bottom { + position: absolute; + bottom: 0; + width: 100%; + // height: 150px; + padding-bottom: 33px; + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%); + &-buttons { + display: flex; + justify-content: space-evenly; + padding: 0 20px; + color: #fff; + font-size: 10px; + &-item { + display: flex; + flex-wrap: wrap; + justify-content: center; + p { + margin-top: 4px; + } + } + } + .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; + } + } + &-speakDiv { + display: flex; + justify-content: space-between; + margin-top: 20px; + padding: 0 15px; + &-text { + margin-top: 4px; + width: 290px; + height: 36px; + border-radius: 18px; + border: 1px solid #FFFFFF; + font-size: 14px; + color: #FFFFFF; + text-align: center; + line-height: 34px; + } + .whiteDiv { + background-color: #ececec; + color: #000; + } + } + } + &-modelList { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + height: 200px; + padding-left: 15px; + overflow-x: scroll; + &-item { + position: relative; + margin-right: 15px; + &-boxBorder { + position: absolute; + top: -2px; + width: 123px; + height: 183px; + border-radius: 8px; + transition: all 0.5s; // + border: 3px solid #00ffe1; + } + .modelName { + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 28px; + background: rgba(0,0,0,0.5); + border-radius: 8px 0px 8px 0px; + color: #fff; + font-size: 13px; + line-height: 28px; + text-align: center; + } + img { + width: 120px; + height: 180px; + border-radius:8px 5px 5px 8px; + } + } + + } } } +.showBody-modelList::-webkit-scrollbar { + width:0; +}