Explorar el Código

upload

master
568170040@qq.com hace 2 años
padre
commit
3b59fea10c
Se han modificado 8 ficheros con 195 adiciones y 3 borrados
  1. BIN
      src/assets/icon/icon-closeChat.png
  2. BIN
      src/assets/icon/icon-global.png
  3. BIN
      src/assets/icon/icon-microphone2.png
  4. BIN
      src/assets/icon/icon-openCamera.png
  5. BIN
      src/assets/icon/icon-person.png
  6. BIN
      src/assets/icon/icon-speaking.png
  7. +6
    -0
      src/styles/index.scss
  8. +189
    -3
      src/views/chat/chat.vue

BIN
src/assets/icon/icon-closeChat.png Ver fichero

Antes Después
Anchura: 48  |  Altura: 50  |  Tamaño: 1.4 KiB

BIN
src/assets/icon/icon-global.png Ver fichero

Antes Después
Anchura: 48  |  Altura: 48  |  Tamaño: 1.8 KiB

BIN
src/assets/icon/icon-microphone2.png Ver fichero

Antes Después
Anchura: 28  |  Altura: 40  |  Tamaño: 809 B

BIN
src/assets/icon/icon-openCamera.png Ver fichero

Antes Después
Anchura: 48  |  Altura: 48  |  Tamaño: 901 B

BIN
src/assets/icon/icon-person.png Ver fichero

Antes Después
Anchura: 48  |  Altura: 48  |  Tamaño: 2.0 KiB

BIN
src/assets/icon/icon-speaking.png Ver fichero

Antes Después
Anchura: 60  |  Altura: 44  |  Tamaño: 396 B

+ 6
- 0
src/styles/index.scss Ver fichero

@@ -1,3 +1,4 @@

.floatRight {
float: right;
}
@@ -11,6 +12,11 @@
font-weight: normal;
color: red;
}
//图片居中对齐
img {
vertical-align: middle;
}
//按钮选中颜色
.buleBtn {
background: #24A9FF!important;
}

+ 189
- 3
src/views/chat/chat.vue Ver fichero

@@ -11,9 +11,66 @@
退出聊天
</div>
</div>
<!-- 显示区 -->
<!-- 显示模板区 -->
<div class="showBody">

<!-- 底部渐变区 -->
<div class="showBody-bottom">
<!-- 更换人物模板列表 -->
<div v-show="PersonButtonAction" class="showBody-modelList">
<div v-for="item,index in modelList" :key="item.name" class="showBody-modelList-item" @click="modelItemAction=index">
<div class="modelName">{{ item.name }}
<div v-show="modelItemAction==index" class="showBody-modelList-item-boxBorder"></div>
</div>
<img :src="item.url" alt="">
</div>
</div>
<!-- 四大按钮 -->
<div class="showBody-bottom-buttons">
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':PersonButtonAction}" class="defaultBtn" @click="clickPersonButton">
<img src="@/assets/icon/icon-person.png" alt="">
</div>
<p>更换人物模板</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':CameraAction}" class="defaultBtn" @click="clickCameraButton">
<img src="@/assets/icon/icon-openCamera.png" alt="">
</div>
<p>摄像头开启</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':CloseChatAction}" class="defaultBtn" @click="clickCloseChatButton">
<img src="@/assets/icon/icon-closeChat.png" alt="">
</div>
<p>对话框关闭</p>
</div>
<!-- -->
<div class="showBody-bottom-buttons-item">
<div :class="{'buleBtn':GlobalAction}" class="defaultBtn" @click="clickGlobalButton">
<img src="@/assets/icon/icon-global.png" alt="">
</div>
<p>选择对话语言</p>
</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 whiteDiv">按住说话</div>
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
<img src="../../assets/icon/icon-speaking.png" alt="">
</div>
</div>
</div>
<!-- 摄像头窗口 -->
<div class="my"></div>
</div>
</div>
</div>
@@ -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;
}
</style>

Cargando…
Cancelar
Guardar