From 2c003be8e73b2c5c7e761a2e6d9e364483ce6199 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 15 Apr 2022 09:25:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=92=AD=E6=94=BE=EF=BC=8C?=
 =?UTF-8?q?=E5=81=9C=E6=AD=A2=EF=BC=8C=E9=9D=99=E9=9F=B3=EF=BC=8C=E8=BD=AE?=
 =?UTF-8?q?=E8=AF=A2=EF=BC=8C=E6=A8=A1=E5=BC=8F=EF=BC=8C=E9=A2=84=E6=A1=88?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/pad/mode_icon.png               | Bin 0 -> 1065 bytes
 public/pad/plan_icon.png               | Bin 0 -> 1132 bytes
 public/pad/play_control/mute_icon.png  | Bin 0 -> 1775 bytes
 public/pad/play_control/pause_icon.png | Bin 4006 -> 3916 bytes
 public/pad/play_control/play_icon.png  | Bin 0 -> 4317 bytes
 public/pad/play_control/stop_icon.png  | Bin 0 -> 3918 bytes
 public/pad/polling_icon.png            | Bin 0 -> 1737 bytes
 src/pad/BottomBar.vue                  |  31 ++--
 src/pad/ContentWall.vue                | 215 ++++++++++++++++++++++++-
 9 files changed, 234 insertions(+), 12 deletions(-)
 create mode 100644 public/pad/mode_icon.png
 create mode 100644 public/pad/plan_icon.png
 create mode 100644 public/pad/play_control/mute_icon.png
 create mode 100644 public/pad/play_control/play_icon.png
 create mode 100644 public/pad/play_control/stop_icon.png
 create mode 100644 public/pad/polling_icon.png

diff --git a/public/pad/mode_icon.png b/public/pad/mode_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce699f9827cc49a8135e360feae81053c50619de
GIT binary patch
literal 1065
zcmV+^1lIeBP)<h;3K|Lk000e1NJLTq001@s001-y1^@s6!Hvt-000B<Nkl<ZXo2mT
zTc}k<7{`Aew<)F)Vs@9rB2>l_6NOAnQ6dTIC6XEu8I4}VL_{is#7HrF=)nh_k{o>S
z!3(5ML5hK%(9j(3ibunGP?X4n_F!%qnRQrabJp5xuf6sh7oI;1d#yc}@B6RIH{WIT
zt5&N-5JtZSECj{_18EL_0Y3xZTd6vmT&rQ+Cnk*U2Yd@GZGntSz}r@;6D{V_4H2;w
zz&hYApn;!&n@z0S28;!k1EW2;30A6R)@%qBVf0|&Gk^ZEm1>hP`U&98ggJj&srF@9
zd!I0RJMbGY2KWg0rby+};I8acU>MK=Z1!VE0PiHUDOne{Qe6ku`_nn0NI6u1q5k-?
zm8$9$Itjd6kc>0__wj<(%Y?R&!a|~tSlLjC>nn^N1^khb!&)oVx(AhSrRMx^U}DC(
z|Fl4#!qAPFmFkY)OiPd2JJt|{(a!-N`VF{$!rUkQ?<isPmVz$WRbY>m>er+Jxrqs*
z=K((egECGT4lKwkuLrCUMsIaayOrwy+U_2S38P;E-cMNYnD<h)Hhaelz<l5w@Kq*a
zzyRQ}gg)n6E{V-`p~(i|zd&SMBr+TL)SoXEMt^Okx*H$VBQYOhe3G=XFghOIEVfdG
zHaPo*(Qg5-c)#{3AOCeB?*{!y?6|kgeq8Q=+Ri?gs%&^De8rZUZeg^0$%oV#cE?I}
zr3iU#ejjj{B#a(e#G(mU@Atp7mgq?|ii(x$v@rTGFd5h`jDF8bb*%-&z5{mG8FQ;B
zVbSBKfCIn`cQu94?RBzLqZ<`ur8){6&97=>sCc2rh0)W!?>7mU6-t3tq03-6a=@#?
zXptckyxMu|r63l;N@d+o+9dB%J<!A+j+{p;A&g#`A=%ntrCL@hV!)#*p-_aOb^0?S
z7%?l=s!+1%bAn5VK4N7<NOM2l=O@z8X{GwT2zepR{Tg3LOvAATQtYV+Nz84$U)C9O
zyC`8H_py#pvM7`B5Jo@kTGsKsouY08+kn@F(T98_o?0^~6S0Fn!k^|_HP-ihZTYKA
z#CFB<_4piq1ouseiy?Qq=7Q$D@7TYw<8k?Q%?>No5#VCV1Q+>#4*V#L9+LNt?FXj&
z<K4pO9f7JXNp*safYafKmFoUQ@AmauRtTeq`y%|a0mx**1^510sk$mIxgJF;)eYbc
zpgpAaJs^4|Uht)*XQDB=?pPec=yARV9coWp1k43oR_z1em)Pe_=Yf~4RJWV9idL#q
zz^Uf-%?4p~rzh6#3Y5a=nK5!N`s~@+GKMYAaJjDr+(sQ$Umdx<z!z4kv+n<<AI08)
jFxu6?cf^fFHvsnlve*_)vA6X$00000NkvXXu0mjf?o|l$

literal 0
HcmV?d00001

diff --git a/public/pad/plan_icon.png b/public/pad/plan_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..35abf1cd14d7faab8483cef01a7c19470f55aefc
GIT binary patch
literal 1132
zcmV-y1e5!TP)<h;3K|Lk000e1NJLTq001=r001-y1^@s6D!Oph000CtNkl<ZXo2mT
zU94S06vuz}YSBiecp%aUjn+qvNMF2ok`M&p;YN{3e2j-CC~5S;N2SEa#e--fk&cE=
zLWm+N8c9QZ-|7n){g99%u8*P`6!mpv^{#ufbDe$m>~rRvoU8YroSZ$gXRS5=J!{s?
zti1;sjRpb}{Cwa#;3Qyx&hZ!UKJa+7Zg&QK$=FZI1V03<0}kzijjw@oqjev3iNk*|
zaN4>xGD2IsL}(nJ0E?n^e{|8t1ZDu&6bOm&mB6nVbRP>019N~Af%AZuGU%;@kUF){
zXl1nS>0HW9@C$*Pw795Oqy{Gig&ZSP#Gb<S!I^cJVz5_+dWjjSwoLHLN^X4`t$TS&
zk^+t|ssA}sU$P;YRJ88qe(QW0{+Dy=zzh^7c-afiO3*bLt^2OU{Yy;nW%IHOvJA`y
z-iy{fkSdfir&j4Ew+asePqk=shW@&aN>b6fC7C+$qW<dOEWp*>6x0dno#KON-IH~6
znBY-TwKl@j(Qm3C$^A_5bAcaAZa)#NyE+$N6TBRQZUk0Osvl5Sd^KA4MJpXiq@s0u
zG9B?#Z2fM6KVJ#FuGPos^(hq*c0YO<DC*!&;0<7b%ABqL%cFIBtMv5coQl@H3A{F`
zdK7pxMP5k#St!rT+dbwNu79a1dmGRwl!wJNQv}8RMt~tL-*19H8Th_t2bw`#=ZZr8
zNFCv5-G~W(BX9vAfniOmtdLqOzN(3m!+`5MVN!xk(Yklqkh=?zpm9&?C{f7!NmAr_
zU}2}dZ-Pz0l4#uz<F`!k3v>kLCdf--=wsmT7HxI`8=`ezPLNVVGl6q7>odEBf<u&i
ztmup^16!hX?-t0&vT!f3q6<N4A8<>wZuJDIRG8q!C2p0=Xx;XjvXbX`I5U~axVRQ6
z6Z}!YPEAlgQ)dTnf|rr`3OHJ;nuYClAftaNaJtHFsk`_tS3-gz6a0PAx(^d&=M@O;
z*8KXu45Z|N$@=xJ78fV`wFzE2bVH$PP*c>YDBAid7a_*N|E@yupgNOvg@*hh<cPjF
zSLbpeiIk4gQs7yg3xbCvkqO-0Z=_P^)DggC(Yg&L_!qS9ZFRqF#}39G;N>m$cvnX2
zUa8WNdi2-<>}XQ|Tk0mW2G#=`OPW{i(CNpchrXEW=;hpj{nn#^nR<Cq&E({fZP;oH
z?T{KD-D|tiArt(CEp*==t=n3qqa9MuF}7>2i^KK(auv2oGN+`?Hz_u2Z)n?vy6R39
z|14T}LT3FFM5dFOQw4puPMP4()Nd}DK@z8*SLv7@sa_yjw;9;niK*#8krA^r36ljT
z_+p}{(M$Im)o(85=&^pS30}Tc`lmy^!r`hyd3(<mU&fy3u%4j1iKV@EzdJN(+ATZ+
yJl4~Z66jo#?5u2DkIA4?2uQAdeYEZ^fPVpASSJno<3qpz0000<MNUMnLSTa7Y%C`L

literal 0
HcmV?d00001

diff --git a/public/pad/play_control/mute_icon.png b/public/pad/play_control/mute_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0799be1ffc7fe2f9dc4f1213a667a2e715d2ba02
GIT binary patch
literal 1775
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
RQtto&002ovPDHLkV1n^fM1KGP

literal 0
HcmV?d00001

diff --git a/public/pad/play_control/pause_icon.png b/public/pad/play_control/pause_icon.png
index 3439d4e1548648c588c245c3daa38054d64543c4..cb1b98970376e38ba562c5203387d1bf5c9afd46 100644
GIT binary patch
literal 3916
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
a0sJ3iwM?N8Jmq!(0000<MNUMnLSTZLuw!Zf

literal 4006
zcmV;X4_WYuP)<h;3K|Lk000e1NJLTq003nG003qP1^@s6(&%4d000kdNkl<Zc%1EB
z36vDY8U9$5prYV`7ihcy71TmhP>cr>AwHA@R8U*-DDg}@BNCKIJf7$Sj1m<s6D6f0
zA_O7c3Z9_PqeW069tlPwmkOx32ut2Se67vy99=y<v$M1Fy~i7NrmMQTzOL&(o2*~I
z9;FOrO-lfs0qh5$1AsjN>;hm10NVm+lA-xO09XcK5rBmNJ_hhUfH?r>`kt;X)yFP5
zQj|5)(Z>Mj3E*%5duQo*!AbyY0DQy0g~Xo$*gQ)ax&CbcF9LWTz{|d;zfbs4VxuHT
zQP%7T;6wl?0q72(Y3S!_zTNNgP5+p0{{Lho_?}*up-v&DHGnn%e$G+0ulxj{J%Fmv
z<=+B$3c#ZPrum-!uJBKt8TCervPL?-4}fz4^bQdr)6S~^o&hiez&lA#HOiV+0J;I_
z0iYLv{X;*m0`LfcyM0f;mE?V+qUfY3Ygzy}2f(EOcH`GSkc0^Uru&}$y2x#kk<=f+
zKmZ4aev+4C6o9F|r)!GUo}!VWtl12}Zvp%sz;^ulQvi1X81H*}aZwtQ1Iiki;syga
zlj{>WZ4L)8+4pq8JFMWOC~IVqJ{`bKoZkg+0=OB#lw!VtE>PBN2|)8D+KEM92XLA1
z=~;!mcR@)}*2p$?9Dqall`Po9d{0j=*i91#N4SifKLFSsfOOacLYD98WretBK}b>7
zY|4ii20;G51i(-L_m}F($OUE1R(z(*05k)z6u^bPrza(Suf$1F*6an~VE_m5tug?H
z_@4eM(Hqqhlr?g0x(C27*aAy(RwdP<L`hNB$T{Oa05TtcCX1!-=@$~aL5V<FQ^ie-
ztc%S7ECA5Y_w?K(T9^naY~+nHB6#|qBHP|_86BCRtm()zO-CL;2l<|UEZ=(bCPi5z
z;*9a!=dU9%ql>Y1<RUEF>lPHPfSn^#$#UP*KNO)2TX1$5!0CFZ@9B~G)R`A46c$dW
zjB14(zI;zVl~02*+($aSD}Y0I`tHDk=hj(@$%8GXSY|$DU2g#JeNV4VxP48yk-330
z#h<x#j@7xbNm15_T<Hle=pu>zmG9{}u_{Yn{~jEDeYmCGG@+_RfGO+T<2<Q<nNYpb
zW{;z$84tx5#UUmZDI6iskq~(kd-<OJ*tw#*^~zK@kcYNIBNWLOYdF$nH}y;sQ?9b+
zc#4ZQk4ua*DeSnXIb{hENBW-r+_mww>J$OtB>*lCiC~J2`P@xCnD6watT~!eXBjc0
zd{1BLQr?LaN_IuO{Tl$ElaSaWgbTF@Ca(g}DsDXq<0CmF`ksC?pK3W`CIi?+UO3;=
zw?{4OO3KaLUCE+;L_TYXvgSAdV*%_Qw~hj1CV=yOPyZ{AXFLnQU%4wi!T0nNQOZRo
zg$Kilyuoq4r=N-0P+5=eppdfEA==1mxy6qq9#YoaNb!uQBM$aG{ZXzmRk<!;#qG$r
z;Ho?b5naVQ4TKQzw0^5>0+cm7#H>R|oyO_;QDsf@Tm^EHLgC^B9?(SiHYQHXlr@7y
z7hb~CRW^vtz?;gN16>PpgbkwZNO3cf6;VdY9|0UlS=M0J?VTK~lr<wnLL54EH$=3R
zmx^nl6DV#v1%T}8ey6NCDqH!iYl^Z)PS0;qf8N9Q^h{Sm0Q?2O1r3;t+E_~&*F&xa
z`Em~DsOgl+KqKQwp^)(&Zt2EV2>B7xALErZ17nnxMSm`*@M|+&lx_MtgYu@ul<T-+
zL>UqiKxU2ylr_Cv3i+NE3Bvi5%U#Y5R2`%xg{Sr#`R5Q<>k?(nnc3ciGJ%}dCn{??
zxjc^V=~t;3YnExz&ooj*fwQyJ0pRa0H|4hX?(*vYj1U#^RAo&zX>~ft%(Ge)W6GMY
zwSTWe3dQ7stY)aop@}lAi4A<0<%&J1@{SD33di#L>uQ%vH&O;uC^$QYZe(o8z^*Yt
z-uSZ}pZ693vis_-tm&MQ6lKjOl-34?B7*|B(;6Wm0Y)opc8YdsYP2k)?nQ8U__x|4
zMLKp@isYw8y#b}YcSOCuOd&G8(T<OH8vt1zPFB`zAADJxl)?PG(@_9-1ufefI|e9g
zx<~B;-_xIj^e%(ykfN-S-PW<x#*L3!v9e}6ns!#OK|g<kV?W%>&$H@~LN%=X{iLHg
z<|W)3R<Hp_DQk{&=!<^>5Icc=lr<u-Oo<Ev^ylZpQEQ`l&4q;^qgB(UxM1&&Xw`g!
zLsrfD8q8eyZ#=zhNv!(x?t7u#Ha}^aKl*YR?)@~UY9lU&&`T^Q#0*MVBU;Y$WEUr2
zrAVP=N;i5<J?YSpQvqyKh^HE=4o0tiHa;x(?9d4xOnwjxtKEEvPTILGF7CduU{>TK
zE7nwF;^&_w(%xE-ZSI~9s`7u3loLc?8BAZta_SP_zm*O**LgKP3wGOP+d4mP+O!J0
zY_^4SU2V5aKfAV1bB~13#IbK?^2~C8vZhTy$}#+WI%+M-n)Wn~Yp`gN)xR}woJvV~
zPS6SVC0=(_K+56#j5H4t{Ucq~c(JSFOB<+0j;NwAtsMnq?>JP_r?K~X1i19kEBx$M
z74nRIH>wdDEmG=8H!G-vo(^5&(^6>PD*BcOUq(gOTE6ZTq{l%#Hsof+)8En%aFZ%J
z`hy;@E~HeD8*=10z@eW$0Jp(`sNLlx<#MCO4(0ItDGsVaZqy4M3b&7NO$F|K^`C&0
z!1C`4hr)YQIy^F5`YOdi6`e-c`JP@Lr4*h1-H+9c7dtvU`4WVr#4hf}_2oa(P~p;F
zDG^sd$_j^qEhAi0LA?G-#ViX*Dedrh4I7a>8;I25-K9VUMM6M|i|1|HNOTosgo`hK
z%3dxYrG-Pmq6SDS1Guc$sa<VAN=sVVM?pctDU~r?`YUDrS`{kPI!Y<u)2pfIuOJ%!
z>(Ecz1*8O)2$8M(==4%SG<@RFPi+EH0w!H-fag^RiHr{%u1#@J6=E{214{<D=w2E-
z-gS8X_5mp$@{5iRg<o&%JslCExO&gw`jo=4Dx}=%oc;QZ@Fq=SD#(sm4l4H6jN$)X
z6&)i}x?u;^<r+uJm&OVg|DG;E_g2wucn(#U-5e^3>?+ZSG0ox818e<R!GSS&>$5uD
z*TR&F$R#VpI_N`(>yPH=%K<6R^Rsu<8hlSLaU7mbs3}6Y_jT(F8Y0=non&jyQnLQc
z3`m*5h&^5CrxF$SI$Y}ne^Fh->#tXTi+QVDL`fU)){@0_NS425Ey^o)TsBlYdQ}Hm
zF<$jOy&`3GFE&TYnrG==*DvI`nhVo-&PiNnKl1(eFmKsX?6k!OS?SuE8oc<$B7D8h
zea3w0tK~R<+9d41ZR?cvun;nL`7+F2Suok^L%ye%I$R%^083oUjr>z4l9Yi_Nf8%3
zWz8*x@|&N&#Ko2)JKk8iBK5Bbs9`v&NT9XpaeP-&A=<-|;m3LQIE<muqvCIl=1Jv_
zM|@Aah*l)H-DY${S-24?^h<e+z7^+2t&wMzVU3*$qB=%joX5}mgD-09P{#4|9L8sf
ziU(!g%;RCo1!H_qN0y*71c-zY{)*w*>ypA?E^jkc-=MTLr2zx8o#&|fEH}u8=X%Fy
zx`Lngg=2rE(>4Z+)YZzGW>IVRJ^fw`cja<{EbeEyWW7_??89Bx8iry25$Q;oL__0U
z!@k`SaZ||or7>Zo@9CEupLaO>-};{3NIO}F6iPLN$U4Ja))tl>z`$*d1v6Y@n=wG>
z0FIIowSUiKEb%avGdnZ7c4YXTUc?CBC6i&afRJ_M<V*=b(}B*ZW4Oz`E7%5yk(Lz3
zWx14pUd0Rzk-_Y4r<b|Faw!upxLWr}?13X_eDbGs7i2UmVj#~6JlNbF)%`eBeiC<N
z<!BNsqJd+gMB@&Fd69!iM?*8E3CU&abs3HCei<i_f$!=2xLGKt5wnzW{$13(0md>d
z;Vapq>E(=dudF$Pc@4!P{6OE+3tU^Gtm!L4x*VCW8v<kv=^e8VPURt6w#}Wh=~{AH
zMf#o|&uwxGMi<Q)t36E}Q<;LVAc0Vd1leVEjY&wmkkIzZT*|MgrmBNOvD)v7(+9q%
z-)4CBNa-p{2sI2<du*Hxs0@@knI3afqDa(TQgw9UT-cm!kBZZ8+%QNG>5-0x<@Eu1
z5zlswULJbZrWEq_r771TqQuHoF0y|LbF*virba4j`o(Fe$jN+9-$^^OQZ>F<!<S~i
zxP%a+Nr({9Hwqz$nUm`}W{Rk0#=05t+nlPe2cw0%Ske><HB|OplW*cTWz97dPzu3)
zd`~|cwQL+xnoz`lE_V`r@+F4#_M-HlN4|B%z#5*(Zgx~qWqOt&T!*A{PxCz;Iocrd
zNGaHq+vL+oj10}^oGVIScSlZ>r-Xd`3x#>KI=P?LIZ3pC7^UUwndsSBRi01s%`h=*
zm{VjztjaRi-<@^?JsE8&Umwlysf?5KRge3gc8N!m6>RS)20D#R2ogwB+mr#1FJ?nT
zT6$9<@&+>>d>4|lH{Ax>FotDqbK4d4yII5o-~03wm_zk-(rs(OOb>nef}ZI*WrdMc
zmhG#lOKHM9kmn?spS_epBNI7)bmGf!lFOo=4vFQX=N9<^o;?;&q+Qm2EXtZwxarxF
zioxT3PtVV{-o!}3hDPqoEoH}$0_T>bvs%|TDDAzSVt8<*ob8(YCleA4Zoq}JD|2}@
z<N0GYr2%CDj*fXGWHr~*{z(ynq(@2^OuaXbsrYJWcl<}+(+yHp%#i0}LY@h)adgB^
zW19&DBLzS0m_)mF5lv*j;e(A%^35tFxR8$s<pTJU26y+wO<kJ{1tlc_*P2^tGYf{Y
zl0E$GwJkYH1<WmW1<gvUxJJsz9}zV+T3i%`lmN_@a9wB$SW6pb!zBIns-a|nxf7|X
z2xM_<c?P+j`A!OsqLLDN_-=d)e;u;?|AJ>6*~z>j*%FG>maUkNpdS+e1lrM+d|7Vu
zJzZ4gT)mJIKv~n4I($(%hb{f3LtdcU-)nSLb4vx0`JOEq?))$cKMxH>aavC?jARs_
zz*xaWN4=5~fRg7!XvQgTYlm8w$f%jme+w9ubP?mqtfIeq7%h3A+mW_wyOH!x{D0Uo
zN2bi#oJJ=VYl_N-k|3ovlr_8aEk2xcd;0{>RMj*zoW)EGGc%d`)E7#Ul-i)cPlS-N
zixa{m2!I6mk(0Ho31XWThD?7lf<!1OYn6;F5rfD``><H+RV)DbKZhG#f=!lHxBvhE
M07*qoM6N<$g5T1V+yDRo

diff --git a/public/pad/play_control/play_icon.png b/public/pad/play_control/play_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b20a554e90de854df468cbf599754fd21295d884
GIT binary patch
literal 4317
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
LNkvXXu0mjf3wTtk

literal 0
HcmV?d00001

diff --git a/public/pad/play_control/stop_icon.png b/public/pad/play_control/stop_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cfb4ad40c6525e7c28774ec4e19c28c5d18e5a7
GIT binary patch
literal 3918
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

literal 0
HcmV?d00001

diff --git a/public/pad/polling_icon.png b/public/pad/polling_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..04b73c32e896b170832040c27029208d8461b2be
GIT binary patch
literal 1737
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

literal 0
HcmV?d00001

diff --git a/src/pad/BottomBar.vue b/src/pad/BottomBar.vue
index 265d37d..4c13e52 100644
--- a/src/pad/BottomBar.vue
+++ b/src/pad/BottomBar.vue
@@ -72,19 +72,23 @@
           <q-btn
             icon="img:pad/play_control/play_prev_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-btn
-            icon="img:pad/play_control/pause_icon.png"
+            :icon="
+              paused
+                ? 'img:pad/play_control/pause_icon.png'
+                : 'img:pad/play_control/play_icon.png'
+            "
             flat
-            size="2.3rem"
+            size="2.4rem"
             class="col-auto q-mx-xs"
           />
           <q-btn
             icon="img:pad/play_control/play_next_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-space />
@@ -94,19 +98,23 @@
           <q-btn
             icon="img:pad/play_control/volume_down_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-btn
-            icon="img:pad/play_control/unmute_icon.png"
+            :icon="
+              muted
+                ? 'img:pad/play_control/unmute_icon.png'
+                : 'img:pad/play_control/mute_icon.png'
+            "
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto q-mx-xs"
           />
           <q-btn
             icon="img:pad/play_control/volume_up_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-space />
@@ -119,7 +127,7 @@
 
 <style scoped>
 .__panel_item {
-  height: 26.5vh;
+  height: 27vh;
 }
 </style>
 
@@ -137,9 +145,14 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
+    const paused = ref(false);
+    const muted = ref(false);
+
     const tab = ref("signal_source");
     return {
       tab,
+      paused,
+      muted,
       loga(a: any) {
         console.log(a);
       },
diff --git a/src/pad/ContentWall.vue b/src/pad/ContentWall.vue
index e753b12..21b5639 100644
--- a/src/pad/ContentWall.vue
+++ b/src/pad/ContentWall.vue
@@ -1,22 +1,231 @@
 <template>
-  <div class="row">avbccsadsad</div>
+  <div
+    ref="wall"
+    class="fit bg-white q-py-md q-mx-sm row items-center justify-evenly wall"
+  >
+    <div
+      ref="wall_content"
+      :style="{
+        width: wall_width + 'px',
+        height: wall_height + 'px',
+      }"
+      class="wall"
+    >
+      <div id="windows" style="position: absolute">
+        <vue3-resize-drag
+          :w="item.width * ($refs.wall?.clientWidth ?? 0)"
+          :h="item.height * ($refs.wall?.clientHeight ?? 0)"
+          :x="
+            ($refs.wall?.parentElement?.offsetLeft ?? 0) +
+            ($refs.wall?.offsetLeft ?? 0) +
+            item.x * ($refs.wall?.clientWidth ?? 0)
+          "
+          :y="
+            ($refs.wall?.parentElement?.offsetTop ?? 0) +
+            ($refs.wall?.offsetTop ?? 0) +
+            item.y * ($refs.wall?.clientHeight ?? 0)
+          "
+          :zIndex="
+            $store.state.windows_sort.findIndex(
+              (element) => element == item.uuid
+            )
+          "
+          :isActive="item.uuid == $store.state.selected_window"
+          :resizeIconSize="14"
+          :isGuide="true"
+          v-for="(item, index) in $store.state.windows"
+          :key="index"
+          @resizeEndHandler="resizeWindow(item.window_id, $event)"
+          @moveEndHandler="moveWindow(item.window_id, $event)"
+          style="position: fixed"
+        >
+          <window
+            @close_this_window="closeWindow"
+            @close_other_windows="closeOtherWindows"
+            @close_all_windows="closeAllWindows"
+            @replace_this_window="repliceWindow"
+            @top_window="topWindow"
+            @lower_window="lowerWindow"
+            @dblclick="(evt) => windowDBClick(item.window_id)"
+            @edit_volume="edit_volume"
+            @mute_unmute="mute_unmute"
+            @start_polling="start_polling"
+            @stop_polling="stop_polling"
+            @polling_setting="polling_setting"
+            :ref="'window_' + item.window_id"
+            :id="'window_' + item.window_id"
+            :uuid="item.uuid"
+            :disable="plan_running"
+            :mouse_area_flag="area_open_window_flag"
+            :signal_source_table_uuid="item.signal_source_table_uuid"
+            :window="item"
+            :plan_running="plan_running"
+            class="window fit"
+          >
+          </window>
+        </vue3-resize-drag>
+      </div>
+      <div ref="wall_grids">
+        <div
+          v-for="row in wall_rows"
+          :key="row"
+          class="row"
+          :style="{
+            height: cell_height + 'px',
+          }"
+        >
+          <div
+            :ref="'item' + (row - 1) * wall_cols + col"
+            v-for="col in wall_cols"
+            :key="col"
+            class="col wall_item wall_item_flag"
+            :style="{
+              width: cell_witdh + 'px',
+              height: cell_height + 'px',
+            }"
+          >
+            <q-popup-proxy
+              context-menu
+              @show="
+                {
+                  //last_context_menu_pos_x = $event.layerX;
+                  //last_context_menu_pos_y = $event.layerY;
+                }
+              "
+            >
+              <q-list>
+                <q-item
+                  :disable="plan_running"
+                  clickable
+                  v-close-popup
+                  @click="openWindowByLocalFile($event)"
+                >
+                  <q-item-section avatar>
+                    <q-icon name="open_in_browser" />
+                  </q-item-section>
+                  <q-item-section> {{ $t("open window") }} </q-item-section>
+                </q-item>
+                <q-item
+                  :disable="plan_running"
+                  clickable
+                  v-close-popup
+                  @click="closeAllWindows"
+                >
+                  <q-item-section avatar>
+                    <q-icon name="close" color="red" />
+                  </q-item-section>
+                  <q-item-section>
+                    {{ $t("close all windwos") }}
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+<style scoped>
+.wall {
+  border: 1px solid black;
+}
+
+.wall_item {
+  border: 1px solid gray;
+}
+
+.window {
+  position: absolute;
+}
+
+.wall_item_flag {
+}
+
+.mouse_area_mask {
+  background: #aacceec2;
+  border: 1px solid #0069bee7;
+}
+</style>
+
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { defineComponent, Ref, ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
+const elementResizeDetectorMaker = require("element-resize-detector");
+
+import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import Window from "src/components/Window.vue";
 
 export default defineComponent({
   name: "PadContentWallPage",
-  components: {},
+  components: { Window, vue3ResizeDrag },
   setup() {
     const $store = useStore();
     const $q = useQuasar();
     const $t = useI18n();
 
+    const wall: Ref<any> = ref(null);
+
+    const wall_width = ref(0);
+    const wall_height = ref(0);
+
+    const wall_rows = computed({
+      get: () => $store.state.wall_row,
+      set: (val) => $store.commit("setWallRow", val),
+    });
+
+    const wall_cols = computed({
+      get: () => $store.state.wall_col,
+      set: (val) => $store.commit("setWallCol", val),
+    });
+    const cell_width = ref(0);
+    const cell_height = ref(0);
+
+    onMounted(() => {
+      if (wall.value && wall.value.parentElement) {
+        const wall_parent = wall.value.parentElement as HTMLElement;
+
+        elementResizeDetectorMaker().listenTo(
+          wall_parent,
+          (element: HTMLElement) => {
+            if (element) {
+              console.log();
+              let height = wall_parent.offsetHeight * 0.9;
+              let width = height / 0.56;
+
+              if (width > element.offsetWidth) {
+                width = element.offsetWidth * 0.9;
+                height = width * 0.56;
+              }
+
+              console.log(height);
+              console.log(width);
+              wall_height.value = height;
+              wall_width.value = width;
+
+              cell_height.value = wall_height.value / $store.state.wall_row;
+              cell_width.value = wall_width.value / $store.state.wall_col;
+            }
+          }
+        );
+      } else {
+        console.error("dom error");
+        console.error((wall.value as HTMLElement).parentElement);
+      }
+    });
+
     return {
+      wall,
+      wall_width,
+      wall_height,
+      wall_rows,
+      wall_cols,
+      cell_width,
+      cell_height,
+
       loga(a: any) {
         console.log(a);
       },