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 @@
退出聊天
-
+
-
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+

+
+
更换人物模板
+
+
+
+
+

+
+
摄像头开启
+
+
+
+
+

+
+
对话框关闭
+
+
+
+
+

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

+
+
+
按住说话
+
+

+
+
+
+
+
@@ -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;
+}