From 286c7e6077a258324fe8e32ef13951283fadbb9f Mon Sep 17 00:00:00 2001 From: zyronon Date: Wed, 22 Sep 2021 00:43:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=86=99=E7=9B=B4=E6=92=AD=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/icon/home/jin.webp | Bin 0 -> 774 bytes src/assets/img/icon/home/level.webp | Bin 0 -> 976 bytes src/assets/img/icon/home/rank-yellow.png | Bin 0 -> 509 bytes src/pages/home/LivePage.vue | 224 +++++++++++++++++++++-- 4 files changed, 206 insertions(+), 18 deletions(-) create mode 100644 src/assets/img/icon/home/jin.webp create mode 100644 src/assets/img/icon/home/level.webp create mode 100644 src/assets/img/icon/home/rank-yellow.png diff --git a/src/assets/img/icon/home/jin.webp b/src/assets/img/icon/home/jin.webp new file mode 100644 index 0000000000000000000000000000000000000000..c938e1747679e5b4f49bf276f7263cea317bca86 GIT binary patch literal 774 zcmV+h1Nr(+o@7%Y?Zd>5bT+1O53*atd-}^_rKqN1QFrDZ6rl#c6{MBViT5{~ z3Cp_t=|UQ*be);G7%%f9GkG&3iC0bAt~wz2pkmoS+q4zSMt4iFWw?tVDXw0@jsoQY93Yn^r%9EC^w z8?0S&npSr}DiM({{uUX|>^E={1>lB)5EgGqbl_K|pb%UG%W#i^esBmJ0s{)xfaTyS zC{l0&bb>b^RDjw)HsJ|vRq@tlAJYbLx32Xp@Au?X8 z$QQ%!Ms=Sh{I`3n^#Qg6%m?c4>vz82pbtO~*6&yk^;!}dXnifm-&te7phGei+xvUs=9}xkMmH#|2%l!;T?p32YYaPe>W3nQ5}>gsPvCH^vNT7s^3;ioJI@ zfZ+OgrA~=O<$f+z+xa0Z@)Mw8b*4UOEiShK7hvSv< z`Hz;H_~WPGh?o?}Sih^$Xh>8z$geG()tKHZlKlNlQ{@Eo6T;SBr6qA^avV#k$zSn4 zWHAiYV0ny#_Zl8Z%lqpNFN3iG&N*{Jqmy6GVG+)gHhHyIhCQy_9)IDIVgLVzh!p?; E0Ez2vl>h($ literal 0 HcmV?d00001 diff --git a/src/assets/img/icon/home/level.webp b/src/assets/img/icon/home/level.webp new file mode 100644 index 0000000000000000000000000000000000000000..cfc223f98fb4e35e98e287ce8619a76189dbf591 GIT binary patch literal 976 zcmV;>126niNk&G<0{{S5MM6+kP&il$0000G0000-002h-06|PpNJ{|#00EFy+io36 zf?x=O5C~?HFz99wGw5PqGiV5cA_#(@dAJ-|cOJhHF#+`d&SKvA55Vf~t_5%S^b3yt zEu)Qh0(SUf#nKglx_r4J>6!vv{_qoq^@$af+aEU&_UBeGMu2w+_Rs@i#0Wt3;F?dP zB;DoVXEu$~lIz1awp6S;jPsP+e5-cOaSTt`d0!Pz+K)X|Jh9ZcOFX%rA>}p))bmlf z%|Z3%6@Hl`cYed_;L5Y%@G^6Jn;D+Z1h3Cn(UfPz!;tL7w8%|StQC5CDT1{^k(XxE zvru%EOj2p)&X=C-3z>Y{N<$*;IG8%dN>`WkiSBZ>JY zz$1ncXhd{^EEd2R)Sfj0E%rnig+8C0gsW>xz;*3JB3V&_t}7Lb#N8&Hz}eq28og$n z;EVpIj7L1&gz5hs09H^qAXWkZ08kA8odGIH07w8naVU>Rq@tlAJOGdm2|yZC2E17~ z8SRnt0p}H_G3WvN0qKkTEAXNF3Hv4OfJ~}tt9$|BDVgfU`VD$l1-RigHWDhXw0=S< zLPk$(!!e`0)64CxPGIi>Ifo|Sga|?j`7YA*jO@w)0RH=(n!}IGxlISOZxZWPIZ%qH zZ#&In=Am{qHs+Bx0m=0RYh(?nDE)knWulw^6`~BQbwOXN824_cz29srpPYOl1|w1< z#oyims&|VW6=ke@f zVrl(-10A-erbS`YOJSMnndiH#I?Sgb`BuEG@LUVklKwDWt7Fcwq1KB(Bbn*FIC=gW ze?4p{(v0Y!weZzJ6s%dHRKGS))aY7<*8|kFOcSZ6(gLU>WOlmkg+@-MhW0lK$zY+$ z!lVRi3o(ZI1{p2Djb0uoe+(hT#B%?m|4l2(dO5y_vR6CO_I(g&y2cFC<28QcIOrV$ zq<7TfzytwM0|Xc yo;P@;hZ6f(c9XNs0002A$ktK- literal 0 HcmV?d00001 diff --git a/src/assets/img/icon/home/rank-yellow.png b/src/assets/img/icon/home/rank-yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..0d366bcb538dcdaa4c3aee946ba8f15c2ecc7ca5 GIT binary patch literal 509 zcmV71Q{0005RNklg@ru~D|6N}$9LXs>+vu|N^q zxQL&q{?vuoCdxR06BeI>9A`!aq8&ha&n{W}5=i1xmsC1y^?zsSWTf<^j^%zV0pt#t@G9jh>gLGrLjP*KE`yE{uZG zpkN*k)h1uq>=B03hqOJl2tR$SRV>EEk}3p$XrRtpXKZJ500000NkvXXu0mjf
-
#唱歌
-
江苏第15名
+
+ + 唱歌 +
+
+ + 江苏第15名 +
- - - -
107
- +
+ + + +
107
+ +
+
+
+ + 更多同城 + +
+
- +
+
+
+
+ 欢迎来到直播间！抖音严禁未成年人直播或打赏，直接间内严禁出现违法违规、低俗色情、吸烟酗酒等内容。如主播在直播过程中以不当方式诱导打赏、私下交易，请谨慎判断，以防人身财产损失。请大家注意财产安全，谨防网络诈骗。 +
+
+
+
+ + 30 +
+
+ 嘻嘻哈哈 + {{ i }} +
+
+
+ 点击 +
@@ -78,16 +123,21 @@ export default { width: 100vw; height: 100vh; + @tag-bg: rgba(58, 58, 70, .3); + .top { + display: flex; + justify-content: space-between; margin-top: 1rem; .left { + margin-left: @padding-page; + .liver { box-sizing: border-box; - width: 45vw; - background: yellowgreen; + background: @second-btn-color-tran; display: flex; - padding: .2rem .2rem .2rem .1rem; + padding: .3rem .4rem .3rem .2rem; align-items: center; border-radius: 2rem; @@ -95,10 +145,10 @@ export default { border-radius: 50%; width: 3rem; height: 3rem; + margin-right: .4rem; } .desc { - flex: 1; display: flex; align-items: center; @@ -106,22 +156,24 @@ export default { .desc-wrapper { - width: 60%; + width: 8rem; .name { + font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .count { + color: gainsboro; font-size: 1rem; } } .follow-btn { - height: 3.8rem; - width: 4rem; + height: 3rem; + width: 4.5rem; background: @primary-btn-color; border-radius: 3rem; display: flex; @@ -132,10 +184,146 @@ export default { } } + .left-bottom { + margin-top: calc(@padding-page / 2); + display: flex; + font-size: 1.2rem; + + .tag { + display: flex; + align-items: center; + padding: .4rem 1rem; + background: @tag-bg; + border-radius: 2rem; + margin-right: 1rem; + + img { + margin-right: .5rem; + width: 1rem; + height: 1rem; + } + } + } + } .right { + margin-top: .3rem; + display: flex; + flex-direction: column; + + .follower { + @width: 3rem; + display: flex; + + .round { + width: @width; + height: @width; + border-radius: 50%; + margin-right: .3rem; + } + + .count { + font-size: 1.2rem; + background: @second-btn-color-tran; + display: flex; + align-items: center; + justify-content: center; + } + .close { + margin-right: 1rem; + margin-left: .5rem; + padding: 0.6rem; + width: calc(@width - 1.2rem); + height: calc(@width - 1.2rem); + } + } + + .more { + display: flex; + justify-content: flex-end; + + .wrapper { + border-radius: 1.3rem 0 0 1.3rem; + padding: .2rem 0 .2rem 1rem; + margin-top: 1.5rem; + background: @tag-bg; + display: flex; + align-items: center; + font-size: 1rem; + } + } + + } + } + + .bottom { + position: absolute; + bottom: 0; + width: 100vw; + box-sizing: border-box; + padding: @padding-page; + + + .left { + width: 90%; + + .comments { + overflow: auto; + height: 20vh; + + .comments-wrapper { + min-height: 20vh; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .comment { + padding: .4rem .5rem; + border-radius: 1rem; + background: @tag-bg; + margin-bottom: .5rem; + + @text-color: rgb(164, 234, 253); + + &.notice { + .text { + color: @text-color; + } + } + + .level { + display: inline-block; + + .wrapper { + display: flex; + @color: rgb(130, 133, 185); + align-items: center; + font-size: 1rem; + border-radius: 1rem; + margin-right: 0.5rem; + padding: 0 .6rem; + background: @color; + + img { + margin-right: 0.3rem; + width: 1.2rem; + } + } + } + + .name { + margin-right: 0.5rem; + font-size: 1.3rem; + color: @text-color; + } + .text{ + word-break: break-all; + } + } + } } } }