From 3b59fea10c40c87e4bc160379ee085897a444bc8 Mon Sep 17 00:00:00 2001 From: "568170040@qq.com" Date: Fri, 24 Mar 2023 17:11:18 +0800 Subject: [PATCH] upload --- src/assets/icon/icon-closeChat.png | Bin 0 -> 1432 bytes src/assets/icon/icon-global.png | Bin 0 -> 1863 bytes src/assets/icon/icon-microphone2.png | Bin 0 -> 809 bytes src/assets/icon/icon-openCamera.png | Bin 0 -> 901 bytes src/assets/icon/icon-person.png | Bin 0 -> 2015 bytes src/assets/icon/icon-speaking.png | Bin 0 -> 396 bytes src/styles/index.scss | 6 + src/views/chat/chat.vue | 192 ++++++++++++++++++++++++++- 8 files changed, 195 insertions(+), 3 deletions(-) create mode 100644 src/assets/icon/icon-closeChat.png create mode 100644 src/assets/icon/icon-global.png create mode 100644 src/assets/icon/icon-microphone2.png create mode 100644 src/assets/icon/icon-openCamera.png create mode 100644 src/assets/icon/icon-person.png create mode 100644 src/assets/icon/icon-speaking.png diff --git a/src/assets/icon/icon-closeChat.png b/src/assets/icon/icon-closeChat.png new file mode 100644 index 0000000000000000000000000000000000000000..98419c064913eb2735551c446aea0c4b812c7376 GIT binary patch literal 1432 zcmV;J1!ww+P)FV00001b5ch_0Itp) z=>Px)Qb|NXRA@u(nQ81?V-&`JkJw7k5KC)_wvJu^aF-uy+@rtGsIWIa<=n zT2CM%UQAIU1F;JDy$Yfxo$Y`v(zA8I*T5#gPB}fVHMTYa5it%}nilv9m>}uxPQjP? zd_)`!ECz-pyW{F4Fb9~M49}9}kk^s4yRbGE5f=d0C&P20paiObZPw`&d?|s5aM*IObU3i} zU;wpv=V#zeV3DMsGM&MIZ%H5`4g($pcC8V3vnl6<$&!{ffw!Ks>vT!$BH|F>BEaRs zd`W-h4Mjxb9Z1>J@p{`02tG6I)3^b+G?fQ`0FwZNc6od&@Gfu`a5}I|(p~Kc+yE>AH3VRsy>KPT9jHIg8dR z5#iJIIzy6SgC7s9B>QpFz_01 zUuqj2B3}Sr1?~i90ej{`qK+>C@B2RO_-jcvt zU~}M0Nv=vuWia3qu=fGGi4*4#Nx!vPC?fI`j!dm3f!9+lZpEpR?k_Q%A91f2Dofs* zkP?u0b%ms?q$qqPBCO{Nd|FPSC4m{h!ldZ-?Wxqzc&C;~ax8XC&V$b)#mDVV3~)o^ zh~lJZxkS>n?cR$B_YTjbM##O&FiGCD25}Vf1lZ+)2S&|e5_fwa5coy!0hN?91obhDPTn<1E|5$<=dDD(X)qzVaS4+V5Ll+KP4x)e3htBJKd3>WgGKFedxJ(9Pm?yxWREz6Qy! z*&) zAR=5uIe}%($Xmd%NoS!X$KsxpjDSm4UtG6!9`iZTIR3l2m?_CK%$}6I3we_8nIwM^ m>>KGOyY>Xh{|Wrp$M83Fc&J@iK1X{10000Px+0ZBwbRA@upnrW=vRTag53lvcVg;w_9 z0Wb$R9M~C{=v)E(8CV4TQql`6vzLi3N<>Trz6~4=d~{_N?HKbv;HSXZlAfN(oC5=h zhz|fK0H-C@7;UY$f!BexONUp1wSYCo*_>7F4B$LTZw>-vAOI1u74R$I^8-wJ18_WW z8L(^Ve=G1c;Cx`O0p_?1I7reX1!+<*zPlvreNV;#V0*YJ-H?YI2s{K_ zS={i*RKQWAf#?KK)aL5uyf^>-u$KDe5W^>5?23M3sv@#bYruAYoBu^T~q;>pYKuz z{0G=HpFlaKR{yuE#?}R5f;X@wka^DnN#Ab(tPlJR_(*BLUD8aG7Q3=%QpCMfk|{)= zM8xk)(&Bbs;d-O#e*wG#7aHTXe316@m7Y64sGccn!7qU7^=x|^8NfkKDAMG!C0)}2 zz&5g3X%T(q}scZVdcAwVyA^$<3%T5gRBsa9+tH zdY?{!x{{iRu*oPjWfL3f=JETU(0~`KWV$iuNVOlbl_*AE*4(2`PTCKR^QTO}20XSGy zGBwT`@4KI0`@aB?Rp|Lrd}@!{HSgxy!J zqP-hNJYCX#9eZ((uzzXq8F6-_&q%81M#h#z$N6sczmx4oz4j)Op6URQ6RMsY&4Fxr zc@7TkB zz^_w#k4m&;Zn31Vb_~v;ezM7&E7xD@*n{gsN0j#E+TxFh$aMN;;8T)(Rr&hn1FpPP znM^u;uB2}@>pLhu34E-yFQ?N5fU9J#mR0FXoJ*fQ0oOgNOlCrJxFnZy@&UTuYQ9vZ zFQIX*Kc|!?Zcdzg)rbPXC*T@>Ei+D5O6ldMNgAOv5#cKLQou35(w|b64Yo=BS&~e! z@+oABJj|rtyvnv{SthBH%X)Y&>7Smq(x2290QUd6tYVHdL(&Kdi-?neoazmutYT(q zhFPUg|0BXrR)4iyEgibcDg{KFI2({b^eO}q;oQ}cy9Tsj7q-02EJ-dFdp-MoR|;Jl zs&b;Fv+KtorN!U4B3+Y`2nvM z!#reFo|x?8UCMFvtuLFNbLF3y8g=S=la9=emUuD*XY$RJ9*SUvyj(E=%8-m|~kyaRjG$rPn43CaKf002ovPDHLkV1k#F Bh8_R_ literal 0 HcmV?d00001 diff --git a/src/assets/icon/icon-microphone2.png b/src/assets/icon/icon-microphone2.png new file mode 100644 index 0000000000000000000000000000000000000000..63ed38b0d281a2fba1e1c3188ec80463c62c5dc5 GIT binary patch literal 809 zcmV+^1J?YBP)Px%<4Ht8R9Hvtms^O9Q5c4w*O`=4A|fHAiHku*juCMoIowf_6uFcnMAUHMLXxDE z6frR_NV!0A${|WA6vkODkmQh8-&mWm?c;1knN@$g_W!N*tnaYa|9+yxVS5TN9~cMp z0=@!IfHS~BNf%04O2v$94+eGv6N=cL0G3IrFJxB`XnP`X6zE)RW9j{KV3wq7`Rwxo zZ4Uu1mI2E!o&lpIJ4K#`Z|y3UFOgbq076m=4UARA+lHu((2CjilAKmjHW!{gM`DfE$4IAqOQbvpo$s zRRJ(0Mzy3HwrhbozzRt_Gr&Q>9pGJvTuJY3p9RJ@5n3y0uI(N`MyK|c^ym+T;O#DS+ z*lv}IWpaxBd`XwmW}=CSu*7fg)XaoOk?Uw?8sxq0slWlCdxSC?AW5;IhLKCtbOH_o zG4T_y9SDv2x=>hcM@O|L8XBNwf-RI3m&lKiPY8#nTY;5na#Zi}q{eRp(X_MxdIG~E zZ|P~DHn|1Z*x0kY9yZ>M?O{Mo%3lBqjVQL*)M`n0^BETH4^v*^+FJm`H5COhG|~m! z0>a}sK8GZ|C|1oS0kgdB0KAV!QpaL|?DzjE&~_Y+d?P9`y4(nBoX314zJG6vhV*a9 n#MZ#ea*H8{eQ26~+5dk7-|9^`kkp||00000NkvXXu0mjfEXiub literal 0 HcmV?d00001 diff --git a/src/assets/icon/icon-openCamera.png b/src/assets/icon/icon-openCamera.png new file mode 100644 index 0000000000000000000000000000000000000000..2d57f1d33ea6fb6859a170ac13d9fc6213bcf4bd GIT binary patch literal 901 zcmV;01A6?4P)Px&KS@MERA@u(nN5gRWfaGMe+BV7HzlqmL`z7Gz=et+A~_@#DrSO#h+kpoLUGX| z5yge5C?tVoP(+3rqC+znp|%Lbg}CxtBt#-jJ#+0+X>4ByP8nnQR6GFCIfOWu|z=#G7(-XUaKY*WrEt1YP@~uZ6 zu)PJ?)QF&py#D};Bpt5EkCNq&Ru#|-e18GsB>h%JRsaZB&P>dA!mYs7D#D(SC%irt zSPNZ^bhD&SpOF7QuLXcmx`_D=lD1b7^t3#-e*oS|e65n+?lE!fLBNM8M{fZ8CEW@D zkyHgOkaX~Am8tT+?VZUB!G2oOw0d%EPXxXJUN61#J1{+K0JbCCBGk45gS!EEJX-*^ z#{gdfvuhOp6Bw1wI{dmiuw@N!A{PGB2w0XUG(?`H+T_E2C4u)I{ELf7lS5=p0Q zF9g0#06Mb)0DJ;`9X+8YWFmQ2N$QAm+w+0%(mT!tKva~MfGCv(g~F>P1*k5v{XX!0 zagYmu+5&Srh0L|u2e#h@4&@5qKJZzTO-YfokCE+Ye$fOUQBEGX6rEPmuiYtLoYl^5 zIRRKH>GPhHPe~jj$FUqe5IXIP&MPU#>~6{S9H2E<0HN1eV7{a)b#fp&^N%?L2;E{_ z_(;-`ZmQ5MpglJL=Ye~`No@h(7Vt`9-Xp0H+AE6I>81mL7}}=mnn3z(h%ZSCLg*?#@jYM-gYw zlcFTHNQ#?=O4Rj#!1ich*>k>L|4P!`N}4C87v~2@BUb23-lhlo()#i3rU#lHXwU-v bK7<|uuO_zn5mJ_^00000NkvXXu0mjfJO7iu literal 0 HcmV?d00001 diff --git a/src/assets/icon/icon-person.png b/src/assets/icon/icon-person.png new file mode 100644 index 0000000000000000000000000000000000000000..647886983c3e1817046ff4787725902c9d5f8678 GIT binary patch literal 2015 zcmV<52O#)~P)Px+nMp)JRA@uhnt9N^G8!Tp zO))a1$kL28k`~D*vP6bK#=ew&U%%%2I@jxZ@89!0_x=3d*B`(0*Zbc0xz2T+bDiaT z&i#ljoV10XpAAvK_6>ktfd>Qk0`3NE4cr7U@CV>p;M>4ez(v4ilK!z?1FlN}+j{`d z0G?QfUFJN$13n0xCh5{;7WTZGrGV{60pmBGl0LJnyrmSdeS6@oz~g6Z z^i3cK_)@vbFMvM+*9UG2+zGfR@F3tJz|CjK_yBOIq@PYzWU>Ob9|OD_xK$_o_rR&; z22o%VRm?=*3xJ2inpnIBI6%@TrwE&*fbEw8Z|FAqJMiW_lk}S@8_nafy)$qE@W77e z-@xIL-ZCb8Q~}$s2afCnT?y91pl+MM^clY&25@zO*jCQh6uZ>|F6^B?KlCPEIAl)V0bBiq{op91b(o5Y>=mXv3k z&`bp?+kCYP*yQSGEpuwy$vSrc5-;DEl&my~Y~L10YQ0M>_$9ETq@N81%v0c;E>(U3 z*kel7v>pFF40!gy4RUK&013*orre_KdjOXMTh*b@mh_ZS1*%B3>k0(eLDCP$OlLb+ z{^7yFXDv&u*jLi8C&)~dKdty;gojDGuwS>y4cPvCS7DRNlHwMU?O>nWR9~F_1SC^s zj})*zyTm}h>mUPmD4Z@#wp`gpXhS%I= zlzV<0xE}DYAXiC2sAIQ~Z1~t>ieXa0*D6ruJ&-pLIF{R1QV`>q@blxF#dMOSgBLBZ zeG1Sl9{_jEggqV&e609V`L~hu&owtNaG!G|?K37g?`{7XxKZ)$A}N_;F4^84xTF}) zleE{^KDKjXKkw4|svE7kknN*^V@ue9l1`o=_-4RwJHD+Y{c1#k6sm?cuatD3v3<%= z?+2b#yhln3Hv3-;*nS`ICx!v5=l2%|w9|Q5__;hf~ zokt}WgYDp*q{0@+mjU}o`bjUt_8ox_0r#ut-za61PDiQmS&SUIM$$Gz1!A>S(xnuL z5Zg(eX*Cr>iU9$Ayyn6Lg8Oo>EO;2OJ|Q*>5h{J_u;g z=5$F|7O5wfv{K(*RyED!Zof<&YTVLZr~i1W zq|}s|Wcv(Y|9W|Zq?J~;&q95PKUdP;vn1J0iVYNqPd54laEPSuj{3rXgFb6xphtB4 z$x!JNHn|DgiLrEJE13sag)F@S89-$wlWUGOx04ibw@M`_^P0ACnvA%>(Nnst8M0!< z!@K8krA++RknQvXZEBZBC}3_S{SM*uJF6YcyH`lc;d%vLRF-Scj+6AtDOR7yWBZMr z5{ZdjC8hoB_w8}e$&wCiFNX?bxRho(lqNjbCgZ_edul{*&MoVGFnTKKx~3G>5am{r zWkMH8+Or+7D)85VG)|$NC4F(G0(H>%cLP|f7Pg(MjpfN;%<755kR~ORtdNv?mF?h=mUT{)6i~KdWV`PMPnGn1+d;?4 zYAd>AC@d)jbCu?eReGPx^(FPiLXAcnmt{2@6sn+txKW@;8x))=sio0T1%ejS4>VMo z6qaHX%HPRQ>+=1fg0_3K6T ze$PfKVLRX1(#`eF)KQWG6z9^Y0$Ex8XeM;MJDpqbAuZ)*lkI@Kd@N~mpU8^a1dlCj zPs2D#fl?ylkJCFmlE=XmGd@(YfDx;t3EAF9>p)EK-)Cjt)^70%{0IDZ#80@$(i#8&002ovPDHLkV1hUF;Yt7i literal 0 HcmV?d00001 diff --git a/src/assets/icon/icon-speaking.png b/src/assets/icon/icon-speaking.png new file mode 100644 index 0000000000000000000000000000000000000000..686454727dca5b43092508aec86972aa4547fc7f GIT binary patch literal 396 zcmV;70dxL|P)Px$MoC0LRA@u(S}{%oF%X>TcmO?RkZ9@PEfk@r3~vY}eJFSfbZH|&NzVh)O?0^k zEK31r!6!#Iu5Itm?(E!oZDPP7=?cJ0X7ZZk>rifRC_|kc1MZ{k4A*3xDP1$Vu3^`3 zO@8%zhih2U8GzHo#Wl&*PcBC(E$ITlNwW7R$&W~Q{sMRbV44_xCwX28@Ed?hviB3o zTLUhLfHPbWr0o<*$4hBR%M9ov$>(3{v1!1PZUEe+7)V}jDJ@AExO4CnN2U9=>b((HystLLt3*frevpO!_dI}2O1z6;f&Wzn)|p{W*+RXS7YaWw!+ z+dApI)=x|OFu93Wnr&woZK-q(N{{QRrIh-a(D{vrpFBjUbHJMLXXyYNUsI#kr4d{I qE?N;M47iV)pDjh$Q@Un!HM{|8VwOt)u3zT>0000 - +
- + +
+ +
+
+
{{ 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; +}