邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

508 lines
15 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <!-- 主体内容 -->
  5. <div class="contnet">
  6. <!-- 头部 -->
  7. <div class="head">
  8. <img src="../../assets/icon/icon-loginout.png" alt="">
  9. <div class="head-exit">
  10. <img src="../../assets/icon/icon-loginoutwhite.png" alt="">
  11. 退出聊天
  12. </div>
  13. </div>
  14. <!-- 显示模板区 -->
  15. <div class="showBody">
  16. <!-- 底部渐变区 -->
  17. <div class="showBody-bottom">
  18. <!-- 更换人物模板列表 -->
  19. <div v-show="PersonButtonAction" class="showBody-modelList">
  20. <div v-for="item,index in modelList" :key="item.name" class="showBody-modelList-item" @click="modelItemAction=index">
  21. <div class="modelName">{{ item.name }}
  22. <div v-show="modelItemAction==index" class="showBody-modelList-item-boxBorder"></div>
  23. </div>
  24. <img :src="item.url" alt="">
  25. </div>
  26. </div>
  27. <!-- 四大按钮 -->
  28. <div class="showBody-bottom-buttons">
  29. <!-- -->
  30. <div class="showBody-bottom-buttons-item">
  31. <div :class="{'buleBtn':PersonButtonAction}" class="defaultBtn" @click="clickPersonButton">
  32. <img src="@/assets/icon/icon-person.png" alt="">
  33. </div>
  34. <p>更换人物模板</p>
  35. </div>
  36. <!-- -->
  37. <div class="showBody-bottom-buttons-item">
  38. <div :class="{'buleBtn':CameraAction}" class="defaultBtn" @click="clickCameraButton">
  39. <img src="@/assets/icon/icon-openCamera.png" alt="">
  40. </div>
  41. <p>摄像头开启</p>
  42. </div>
  43. <!-- -->
  44. <div class="showBody-bottom-buttons-item">
  45. <div :class="{'buleBtn':CloseChatAction}" class="defaultBtn" @click="clickCloseChatButton">
  46. <img src="@/assets/icon/icon-closeChat.png" alt="">
  47. </div>
  48. <p>对话框关闭</p>
  49. </div>
  50. <!-- -->
  51. <div class="showBody-bottom-buttons-item">
  52. <div :class="{'buleBtn':GlobalAction}" class="defaultBtn" @click="clickGlobalButton">
  53. <img src="@/assets/icon/icon-global.png" alt="">
  54. </div>
  55. <p>选择对话语言</p>
  56. </div>
  57. </div>
  58. <!-- 语音说话 -->
  59. <div class="showBody-bottom-speakDiv">
  60. <!-- 没点麦克风 -->
  61. <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
  62. <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
  63. <img src="../../assets/icon/icon-microphone2.png" alt="">
  64. </div>
  65. <!-- 点了麦克风 -->
  66. <div v-show="speakingAction" class="showBody-bottom-speakDiv-text whiteDiv">按住说话</div>
  67. <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
  68. <img src="../../assets/icon/icon-speaking.png" alt="">
  69. </div>
  70. </div>
  71. </div>
  72. <!-- 摄像头窗口 -->
  73. <div v-show="CameraAction" class="showBody-myCamera"></div>
  74. <!-- 聊天框 -->
  75. <div v-show="CloseChatAction" class="showBody-chatBox">
  76. <!-- 关闭 -->
  77. <div class="showBody-chatBox-close">
  78. <i @click="CloseChatAction=false" class="el-icon-close"></i>
  79. </div>
  80. <!-- 聊天记录 -->
  81. <div class="showBody-chatBox-record">
  82. <div class="showBody-chatBox-record-my" :class="{'others':item.form!='me'}" v-for="item,index in chatRecordList" :key="index">
  83. <span>{{ item.message }}</span>
  84. </div>
  85. </div>
  86. <!-- 底部说话按钮 -->
  87. <div class="showBody-bottom-speakDiv">
  88. <!-- 没点麦克风 -->
  89. <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
  90. <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
  91. <img src="../../assets/icon/icon-microphone2.png" alt="">
  92. </div>
  93. <!-- 点了麦克风 -->
  94. <div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
  95. <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
  96. <img src="../../assets/icon/icon-speaking.png" alt="">
  97. </div>
  98. </div>
  99. </div>
  100. <!-- 选择语言 -->
  101. <div v-show="GlobalAction" class="showBody-global">
  102. <!-- -->
  103. <div class="showBody-global-choose">
  104. <div class="showBody-global-choose-language">
  105. <div class="showBody-global-choose-language-item" v-for="item in languageList" :key="item.type">
  106. {{ item.type }}
  107. </div>
  108. </div>
  109. <div class="showBody-global-choose-btn">
  110. <div @click="GlobalAction=false" class="showBody-global-choose-btn-no">取消</div>
  111. <div class="showBody-global-choose-btn-yes">确定</div>
  112. </div>
  113. </div>
  114. <!-- 底部说话按钮 -->
  115. <div class="showBody-bottom-speakDiv">
  116. <!-- 没点麦克风 -->
  117. <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div>
  118. <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
  119. <img src="../../assets/icon/icon-microphone2.png" alt="">
  120. </div>
  121. <!-- 点了麦克风 -->
  122. <div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
  123. <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
  124. <img src="../../assets/icon/icon-speaking.png" alt="">
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </template>
  132. <script>
  133. // 组件
  134. import Vue from "vue";
  135. import { Toast } from "vant";
  136. import { mapState, mapActions } from "vuex";
  137. // 工具
  138. import { scrollToID } from "../../utils";
  139. Vue.use(Toast);
  140. export default {
  141. data() {
  142. return {
  143. inPage: false,
  144. PersonButtonAction: false,//个人按钮状态
  145. CameraAction:false,// 摄像头按钮状态
  146. CloseChatAction:false,// 聊天框按钮状态
  147. GlobalAction:false,// 语音按钮状态
  148. speakingAction: false, // 底部是否说话按钮状态
  149. modelList: [
  150. { name:'甘雨',url:require('../../assets/img/module_3_1.png')},
  151. { name:'莫甘娜',url:require('../../assets/img/module_3_1.png')},
  152. { name:'达尔文',url:require('../../assets/img/module_3_1.png')},
  153. { name:'雨果',url:require('../../assets/img/module_3_1.png')},
  154. ],// 人物模板列表
  155. modelItemAction: -1,// 人物模板列表选中高亮
  156. chatRecordList: [
  157. { form: 'me', message: '生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1' },
  158. { form: 'you', message: '生于忧患死于安乐2' },
  159. { form: 'me', message: '生于忧患死于安乐3' },
  160. { form: 'you', message: '生于忧患死于安乐4' },
  161. { form: 'me', message: '生于忧患死于安乐5' },
  162. { form: 'me', message: '生于忧患死于安乐6' },
  163. { form: 'me', message: '生于忧患死于安乐7' },
  164. ],// 聊天记录列表
  165. languageList: [
  166. {type:'AUTO'},
  167. {type:'璃月语'},
  168. {type:'JP语'},
  169. {type:'english'},
  170. {type:'中国话'},
  171. {type:'四川话'},
  172. {type:'东百话'},
  173. {type:'阿拉伯语'},
  174. {type:'朝鲜语'},
  175. ], //语种列表
  176. };
  177. },
  178. computed: {
  179. ...mapState({
  180. characters: (state) => state.publicObj.characters,
  181. }),
  182. },
  183. methods: {
  184. ...mapActions(["setCharacters"]),
  185. // 点击个人按钮事件
  186. clickPersonButton() {
  187. this.PersonButtonAction=!this.PersonButtonAction
  188. },
  189. // 点击摄像头按钮事件
  190. clickCameraButton() {
  191. this.CameraAction=!this.CameraAction
  192. },
  193. // 点击聊天框按钮事件
  194. clickCloseChatButton() {
  195. this.CloseChatAction=!this.CloseChatAction
  196. },
  197. // 点击语音按钮事件
  198. clickGlobalButton() {
  199. this.GlobalAction=!this.GlobalAction
  200. },
  201. go(url) {
  202. this.$router.push(url);
  203. },
  204. },
  205. created() {},
  206. mounted() {
  207. this.inPage = true;
  208. scrollToID("top");
  209. },
  210. };
  211. </script>
  212. <style lang="scss" scoped>
  213. .page {
  214. transform: translateX(30%);
  215. opacity: 0;
  216. transition: all 0.5s; // global-transition
  217. &.active {
  218. opacity: 1;
  219. transform: translateX(0);
  220. }
  221. }
  222. .contnet {
  223. .head {
  224. display: flex;
  225. justify-content: space-between;
  226. padding: 4px 10px;
  227. >img {
  228. width: 36px;
  229. height: 36px;
  230. }
  231. &-exit {
  232. margin-top: 4px;
  233. width: 97px;
  234. height: 28px;
  235. text-align: center;
  236. line-height: 28px;
  237. background: #24A9FF;
  238. color: #fff;
  239. box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  240. border-radius: 33px;
  241. >img {
  242. margin-top: -2px;
  243. margin-right: 4px;
  244. }
  245. }
  246. }
  247. .showBody {
  248. position: relative;
  249. width: 100%;
  250. height: calc(100vh - 44px) ;
  251. background-color: red;
  252. &-bottom {
  253. position: absolute;
  254. bottom: 0;
  255. width: 100%;
  256. // height: 150px;
  257. padding-bottom: 33px;
  258. background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
  259. &-buttons {
  260. display: flex;
  261. justify-content: space-evenly;
  262. padding: 0 20px;
  263. color: #fff;
  264. font-size: 10px;
  265. &-item {
  266. display: flex;
  267. flex-wrap: wrap;
  268. justify-content: center;
  269. p {
  270. margin-top: 4px;
  271. }
  272. }
  273. }
  274. .defaultBtn {
  275. display: flex;
  276. flex-wrap: wrap;
  277. justify-content: center;
  278. align-items: center;
  279. width: 44px;
  280. height: 44px;
  281. background: rgba(0,0,0,0.3);
  282. border-radius: 22px;
  283. img {
  284. width: 24px;
  285. height: 24px;
  286. }
  287. }
  288. &-speakDiv {
  289. display: flex;
  290. justify-content: space-between;
  291. margin-top: 20px;
  292. padding: 0 15px;
  293. &-text {
  294. margin-top: 4px;
  295. width: 290px;
  296. height: 36px;
  297. border-radius: 18px;
  298. border: 1px solid #FFFFFF;
  299. font-size: 14px;
  300. color: #FFFFFF;
  301. text-align: center;
  302. line-height: 34px;
  303. }
  304. .whiteDiv {
  305. background-color: #ececec;
  306. color: #000;
  307. }
  308. }
  309. }
  310. &-modelList {
  311. position: relative;
  312. display: flex;
  313. justify-content: space-between;
  314. align-items: center;
  315. height: 200px;
  316. padding-left: 15px;
  317. overflow-x: scroll;
  318. &-item {
  319. position: relative;
  320. margin-right: 15px;
  321. &-boxBorder {
  322. position: absolute;
  323. top: -2px;
  324. width: 123px;
  325. height: 183px;
  326. border-radius: 8px;
  327. transition: all 0.5s; //
  328. border: 3px solid #00ffe1;
  329. }
  330. .modelName {
  331. position: absolute;
  332. top: 0;
  333. left: 0;
  334. width: 48px;
  335. height: 28px;
  336. background: rgba(0,0,0,0.5);
  337. border-radius: 8px 0px 8px 0px;
  338. color: #fff;
  339. font-size: 13px;
  340. line-height: 28px;
  341. text-align: center;
  342. }
  343. img {
  344. width: 120px;
  345. height: 180px;
  346. border-radius:8px 5px 5px 8px;
  347. }
  348. }
  349. }
  350. &-myCamera {
  351. position: absolute;
  352. top: 0;
  353. right: 0;
  354. width: 96px;
  355. height: 180px;
  356. background-image:url(../../assets/img/bg.png);
  357. background-size: contain;
  358. }
  359. &-chatBox {
  360. position: absolute;
  361. bottom: 0;
  362. width: 100%;
  363. height: 375px;
  364. background-color: #ECECEC;
  365. &-close {
  366. padding: 10px 15px;
  367. height: 35px;
  368. i {
  369. float: right;
  370. display: flex;
  371. justify-content: center;
  372. align-items: center;
  373. font-size: 16px;
  374. font-weight: 600;
  375. }
  376. }
  377. &-record {
  378. padding: 5px 10px 0;
  379. height: 255px;
  380. overflow-y: scroll;
  381. font-size: 15px;
  382. color: #333333;
  383. line-height: 21px;
  384. &-my {
  385. float: right;
  386. padding: 10px 20px;
  387. margin-bottom: 15px;
  388. background: #9EE445;
  389. border-radius: 20px 20px 2px 20px;
  390. clear: both;
  391. }
  392. .others {
  393. float: left;
  394. background: #FFFFFF;
  395. border-radius: 20px 20px 20px 2px;
  396. }
  397. }
  398. .showBody-bottom-speakDiv {
  399. margin-top: 0;
  400. height: 85px;
  401. padding-top: 15px;
  402. background-color: #fff;
  403. &-text {
  404. color: #666;
  405. border-radius: 18px;
  406. border: 1px solid #666666;
  407. }
  408. }
  409. }
  410. &-global {
  411. position: absolute;
  412. bottom: 0;
  413. width: 100%;
  414. height: 385px;
  415. background-color: #ECECEC;
  416. &-choose {
  417. padding: 20px 36px 0;
  418. height: 304px;
  419. overflow-y: scroll;
  420. font-size: 15px;
  421. color: #333333;
  422. line-height: 21px;
  423. &-language {
  424. display: flex;
  425. justify-content: start;
  426. flex-wrap: wrap;
  427. width: 300px;
  428. height: 210px;
  429. background-color: #fff;
  430. overflow: hidden;
  431. border: none;
  432. border-radius: 15px;
  433. &-item {
  434. width: 100px;
  435. height: 70px;
  436. text-align: center;
  437. line-height: 70px;
  438. font-size: 14px;
  439. color: #333;
  440. border: 1px solid #ECECEC;
  441. }
  442. }
  443. &-btn {
  444. display: flex;
  445. justify-content: space-between;
  446. margin-top: 20px;
  447. >div {
  448. width: 139px;
  449. height: 37px;
  450. border-radius: 31px;
  451. text-align: center;
  452. line-height: 37px;
  453. font-size: 15px;
  454. font-weight: 600;
  455. }
  456. &-no {
  457. color: #333333;
  458. background: #FFFFFF;
  459. }
  460. &-yes {
  461. color: #FFFFFF;
  462. background: #24A9FF;
  463. }
  464. }
  465. }
  466. .showBody-bottom-speakDiv {
  467. margin-top: 0;
  468. height: 85px;
  469. padding-top: 15px;
  470. background-color: #fff;
  471. &-text {
  472. color: #666;
  473. border-radius: 18px;
  474. border: 1px solid #666666;
  475. }
  476. }
  477. }
  478. }
  479. }
  480. .showBody-modelList::-webkit-scrollbar {
  481. width:0;
  482. }
  483. .showBody-chatBox-record::-webkit-scrollbar {
  484. width:0;
  485. }
  486. .defaultBtn {
  487. display: flex;
  488. flex-wrap: wrap;
  489. justify-content: center;
  490. align-items: center;
  491. width: 44px;
  492. height: 44px;
  493. background: rgba(0,0,0,0.3);
  494. border-radius: 22px;
  495. img {
  496. width: 24px;
  497. height: 24px;
  498. }
  499. }
  500. </style>