From c4578781c4688c751f624b43e986de6a2abe3546 Mon Sep 17 00:00:00 2001 From: congzc Date: Thu, 17 Aug 2023 14:43:27 +0800 Subject: [PATCH] 3 --- src/assets/icon/more.png | Bin 0 -> 255 bytes src/assets/icon/play.png | Bin 0 -> 1762 bytes src/pages/home/index.vue | 159 +++++++++++++++++++++++++++++++++++---- 3 files changed, 146 insertions(+), 13 deletions(-) create mode 100644 src/assets/icon/more.png create mode 100644 src/assets/icon/play.png diff --git a/src/assets/icon/more.png b/src/assets/icon/more.png new file mode 100644 index 0000000000000000000000000000000000000000..f6d155f12127524097a140adefac5135a29ac214 GIT binary patch literal 255 zcmVPx#xk*GpR5(xV)GiV5)m!*afO~=%yExdiHIStaf%ctzOcq!3T`pLQ6;zI z8_y|tLc2k3k01XM{ArOPZ*bBG`G!eaWVkbo(5>dLm||J-A|i5T(Bmrj#Cs`aL+r$! z1Uoa-S9CDOc@4C{BUXp9_FC4Vi_PNX%3t8J@jpD^Px*oJmAMRCr$PoZnAeMHI)s6{`5FD*gZg!Dy}8SfeIQ8)JOofd^mOhbG(ffut$f zn8qdzf%Kt)(2x-P6SN_OEU+sfQETH5pp8(CX>4M3cezqpOR=z`Hl>SHcT2DNUhg%x z%Pu>+cjmIY-IFwsa_`L9&(54VbIzIB0C!~rfcpVFVE()hz`X!U0h9pX-zhqP6#%yY z!~pyQ;3j}&^C$oAidYJ%?2G^&1@H)fhXCB;u(R6$mH;dQxNZV;*ktP0RRLnVV-J5KaZ_bx{e zr`=TmH0~Kowt%=iKW{G88F#u4FVID}Xu1m-b)OBOO#q%V{g#Y6Tjz)AS6u>dBNII` z1;nNM*&Loy={`HB+-1`xNcU{UHi)){#yC@`LW;Qf5Fycc{~^++=!d1lS62XVEGC3B zV>*~?auNZ=W&DK#f@6ntA)OnL4iHzXm-Emdi_9KAL&L2BpwE<4)&fL7=cPPa%0;0h zK1UaTkdpdIYXPD`=APr@UBVyGl& zk0&JpdKy5LY{fe}J2!j1-uKGN%D7cAWNB$>#_#tJ96o%Q!#bB_4#2#nkR1?z-zGZ} zSYKbiX?S?JyQHLq@#sX+Baz6t?(S~?@#Dwu7~1PdjFHKoEL&s;#O(w(qEhA5sZ;N4 z-@e_mR-?ME$HU?9mtL>;)AQ%g(=S{#N%Xg%Gb$9x29T+TK0iNy_Smsw0iVxDPuFdkW#HcewAoDTNms%F zAVU{j*JHt8@bmrq_n*)-jTu(Ago(*%0^+~dBxF33D()1J)o3ghyMFrg>A>E-d%tnX zK5_H<1K}`F&X9%@kp;+7E*gzq>g((C9XWD@dneU0Nk9yxGFqraWCOD7)9mc*cO4xa zfj}T&EXRsuhJa|CX{42iB0z?&D=RCpP$=|SV`JmV>FH@!fyfraNGmhY)K(=Rn|-=A zGBOhIcs$=qCbVdUHdwQxMBD&mDZaS4INj6J<7;bcW0FvY+$5k^W$(Z2nz;#x{pz}| zhr{8MJ9q93NFWp^px0F`@or7AWFSUIM?cuTd-sGxNVf^-4Ha7qOEI@ckZrnMs;Q}I zcL+!?SU~Z3{6=|s`9T?g3UZ3kp{%N^ayo*HDOONM+8QxqV`Crg+O=!k;RrH}G&2|l zvCNw=xQd(C4?#064u*z7Gv02TlaEE1Q=H}+kwzahlD&EZ-;f}lrnAz;iF9QPu zJ{J;?{|C(2Hw&a#oGD#odD4t1PE1S;xtQ@_vFC+c4%!=E7IS8klapUGHa33Za!mS; zpnXoIeJnc@iA28d=;#<+hpfh`v=4Q9(L9+Wb(&=}#iG&Z%;4Z)e{*y5q*P_Z8(Wn) z+0$n%%SRzl;tnfUr7N~ zS6A1T0|yQqOsEgKGBh+aaOlvXkid|4>yfktR8&Ms2_7rVIy*bJRa8_wHZ?Uh*V59W zxs)Nz1a8_AJT_J=;})+NcY?ghgs;Yr>r{?DY+|D zdzA9{fqmH%0c34MiU;b_I1I%jnF1bFz8}pLK8k6v5S?OncEw}i0wbw-v48-ie7Tx} z$G^G9$|}B;%@j*ySG?RrU^EeQ@p>EqP}T)YgvEQw+!V%gc)3zeUa*u1f+LED=jb~z zk|<*;Cxgvp`!DmFiM+U?E7^xAUhN7KY5)KL literal 0 HcmV?d00001 diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 2219b77..89d57a3 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -31,11 +31,21 @@ > - + - 风格名称 - 生成时间 + 风格名称 + + 生成时间 + + + + + @@ -47,7 +57,34 @@ - + + + + + + + + 视频名称 + 生成时间 + + + + + + + + + + + @@ -145,7 +182,7 @@ const tabList = ref([ { name: "我的邀请", id: 3 }, { name: "消费记录", id: 4 }, ]); -const showListActive = ref(3); +const showListActive = ref(1); function clickTabHandle(e) { showListActive.value = e.id; } @@ -232,35 +269,131 @@ function clickTabHandle(e) { // 风格列表 .showStyleList { - margin-top: 20rpx; - width: 750rpx; + flex: 1; + overflow: hidden; + margin-top: 30rpx; + width: 690rpx; .showListItem { + margin-top: 10rpx; .top { display: flex; justify-content: space-between; padding: 0 30rpx; + margin-bottom: 20rpx; + .name { + font-weight: 900; + } + .time { + display: inline-block; + font-size: 22rpx; + font-weight: 100; + line-height: 33rpx; + text { + margin-right: 50rpx; + } + .moreBox { + display: inline-block; + width: 8rpx; + height: 33rpx; + image { + vertical-align: top; + width: 100%; + } + } + } } .imgListBox { white-space: nowrap; display: flex; justify-content: space-between; flex-wrap: nowrap; - height: 250rpx; + height: 200rpx; .item { - width: 240rpx; - height: 240rpx; - margin-right: 20rpx; + width: 150rpx; + height: 200rpx; + border-radius: 30rpx; + margin-right: 30rpx; display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 flex-direction: column; align-items: center; .cover { - width: 240rpx; - height: 240rpx; + width: 150rpx; + height: 200rpx; + border-radius: 30rpx; } } } } } +// 视频列表 +.showVideoList { + flex: 1; + overflow: hidden; + margin-top: 30rpx; + width: 690rpx; + padding: 15rpx; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + word-break: keep-all; + .showListItem { + position: relative; + display: inline-block; + width: 330rpx; + height: 440rpx; + background-color: #000; + margin-bottom: 25rpx; + border-radius: 25rpx; + overflow: hidden; + .showImg { + position: absolute; + top: 0; + z-index: 1; + width: 100%; + } + .videoInfo { + position: absolute; + bottom: 0; + width: 100%; + height: 100rpx; + padding: 10rpx 20rpx; + background-color: red; + z-index: 2; + .name { + font-weight: 900; + margin-bottom: 10rpx; + } + .time { + font-size: 22rpx; + font-weight: 100; + } + } + .playIcon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + image { + width: 72rpx; + height: 72rpx; + } + } + .moreBox { + position: absolute; + top: 23rpx; + right: 26rpx; + width: 8rpx; + height: 33rpx; + image { + width: 100%; + } + } + } + .showListItem:nth-child(odd) { + margin-right: 30rpx; + } +} // 邀请列表 .InviteBox { width: 100%;