From 37d8b37f61c5db566c1961cc440229cd149de567 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 16 Oct 2018 10:10:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                     |   1 +
 src/App.vue                    | 136 +++++++++++--
 src/assets/img/add.svg         |   1 +
 src/assets/img/close.svg       |   1 +
 src/assets/img/head-image.jpeg | Bin 0 -> 10880 bytes
 src/assets/img/love-gray.svg   |   1 +
 src/assets/img/love.svg        |   1 +
 src/assets/img/message.svg     |   1 +
 src/assets/img/music.svg       |   1 +
 src/assets/img/play.svg        |   1 +
 src/assets/img/share.svg       |   1 +
 src/components/Home.vue        | 361 +++++++++++++++++++++++++++++++++
 src/components/index.vue       |  13 --
 13 files changed, 486 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/img/add.svg
 create mode 100644 src/assets/img/close.svg
 create mode 100644 src/assets/img/head-image.jpeg
 create mode 100644 src/assets/img/love-gray.svg
 create mode 100644 src/assets/img/love.svg
 create mode 100644 src/assets/img/message.svg
 create mode 100644 src/assets/img/music.svg
 create mode 100644 src/assets/img/play.svg
 create mode 100644 src/assets/img/share.svg
 create mode 100644 src/components/Home.vue
 delete mode 100644 src/components/index.vue

diff --git a/.gitignore b/.gitignore
index 185e663..7616b9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+src/assets/video/
diff --git a/src/App.vue b/src/App.vue
index fcc5662..d16fb31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,124 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div id="app">
+        <Home/>
+    </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+    import Home from './components/Home.vue'
 
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
+    export default {
+        name: 'app',
+        components: {
+            Home
+        }
+    }
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="scss">
+    #app {
+        width: 100%;
+        height: 100%;
+    }
+
+    $width: 1000;
+    @while $width > 0 {
+        .w#{$width}p {
+            width: #{$width}px !important;
+        }
+        $width: $width - 50;
+    }
+
+    $margin: 50;
+
+    @while $margin > 0 {
+        .ml#{$margin}p {
+            margin-left: #{$margin}px !important;
+        }
+        $margin: $margin - 1;
+    }
+
+    $margin: 50;
+    @while $margin > 0 {
+        .mr#{$margin}p {
+            margin-right: #{$margin}px !important;
+        }
+        $margin: $margin - 1;
+    }
+
+    $margin: 50;
+    @while $margin > 0 {
+        .mt#{$margin}p {
+            margin-top: #{$margin}px !important;
+        }
+        $margin: $margin - 1;
+    }
+
+    $margin: 50;
+    @while $margin > 0 {
+        .mb#{$margin}p {
+            margin-bottom: #{$margin}px !important;
+        }
+        $margin: $margin - 1;
+    }
+
+    $padding: 50;
+    @while $padding > 0 {
+        .pl#{$padding}p {
+            padding-left: #{$padding}px !important;
+        }
+        $padding: $padding - 1;
+    }
+
+    $padding: 50;
+    @while $padding > 0 {
+        .pr#{$padding}p {
+            padding-right: #{$padding}px !important;
+        }
+        $padding: $padding - 1;
+    }
+
+    $padding: 50;
+    @while $padding > 0 {
+        .pt#{$padding}p {
+            padding-top: #{$padding}px !important;
+        }
+        $padding: $padding - 1;
+    }
+
+    $padding: 50;
+    @while $padding > 0 {
+        .pb#{$padding}p {
+            padding-bottom: #{$padding}px !important;
+        }
+        $padding: $padding - 1;
+    }
+
+    $font: 30;
+    @while $font > 0 {
+        .f#{$font} {
+            font-size: #{$font}px;
+        }
+        $font: $font - 1;
+    }
+
+
+    .pull-left {
+        float: left;
+    }
+
+    .pull-right {
+        float: right;
+    }
+
+    .block{
+        display: block;
+    }
+
+    .oh{
+        overflow: hidden;
+    }
+    .tac{
+        text-align: center;
+    }
 </style>
diff --git a/src/assets/img/add.svg b/src/assets/img/add.svg
new file mode 100644
index 0000000..61083e8
--- /dev/null
+++ b/src/assets/img/add.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539617695563" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2801" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M590.769231 571.076923h324.923077c15.753846 0 29.538462-13.784615 29.538461-29.538461v-59.076924c0-15.753846-13.784615-29.538462-29.538461-29.538461H590.769231c-11.815385 0-19.692308-7.876923-19.692308-19.692308V108.307692c0-15.753846-13.784615-29.538462-29.538461-29.538461h-59.076924c-15.753846 0-29.538462 13.784615-29.538461 29.538461V433.230769c0 11.815385-7.876923 19.692308-19.692308 19.692308H108.307692c-15.753846 0-29.538462 13.784615-29.538461 29.538461v59.076924c0 15.753846 13.784615 29.538462 29.538461 29.538461H433.230769c11.815385 0 19.692308 7.876923 19.692308 19.692308v324.923077c0 15.753846 13.784615 29.538462 29.538461 29.538461h59.076924c15.753846 0 29.538462-13.784615 29.538461-29.538461V590.769231c0-11.815385 7.876923-19.692308 19.692308-19.692308z" p-id="2802"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/close.svg b/src/assets/img/close.svg
new file mode 100644
index 0000000..84af41d
--- /dev/null
+++ b/src/assets/img/close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539624823281" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1952" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M505.173333 416.426666 122.88 27.306666c-27.306667-27.306667-68.266667-27.306667-102.4 0l0 0c-27.306667 27.306667-27.306667 68.266667 0 102.4L409.6 512l-389.12 389.12c-27.306667 27.306667-27.306667 68.266667 0 102.4l0 0c27.306667 27.306667 68.266667 27.306667 102.4 0l389.12-389.12 389.12 389.12c27.306667 27.306667 68.266667 27.306667 102.4 0l0 0c27.306667-27.306667 27.306667-68.266667 0-102.4L607.573333 512l389.12-389.12c27.306667-27.306667 27.306667-68.266667 0-102.4l0 0c-27.306667-27.306667-68.266667-27.306667-102.4 0L505.173333 416.426666 505.173333 416.426666z" p-id="1953" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/head-image.jpeg b/src/assets/img/head-image.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..be04d17d6974234969d86784046dc874e6fdbf72
GIT binary patch
literal 10880
zcmbVybyOVBpKYUqySoO0gy7CV2<{}oH4uDocL@??AjserEO>Aa5F8TRebC_UwtV-u
zZ_mE>$DZByIp=owIo;J=x4NtEtxwg{?9&4989+lt1)-v#fj}U1bTkYsB5W*7Oe}H&
zLR=zh3R)U!3Mwi(rdKR<3>=J9RIGw8IbL(~@$u2J2#X8xh`r+F<3T`2N5{g%BE!Ze
z<DsXb=lNg9QwM;L2224{NC*r7B0d5VKEhKs!Z!dwKtcHT0RAHo5Rs5kP(f(u7?^kf
zA_5W;A~F&R3NrHZm446X0Azd=0(x#KR6-3?5Q7sDPtey~G{!eooy3}B$4tB*orBRa
zNJz=ZDVSfdu)bvD;};MV5*CquD<dl>ub}wu{Rb^=9bG*$^G_C*R@OEyu5Rugo?hM|
zpF_jKBfdn&CnP4pl2cOCzUAc?6c&9iE~&1mt*dWnY-;}1)!ozE*FP{gJ~25pJu^Eu
z4_{l~*xcIwyR&<8dUk$sd3AkrivS?~i_Y`*UxfY(AN*%Nh{(uD$e@4tARu}?0|_4)
zg`OLgKuQB->O{!E6NE<e=4)<MCpsgq<}vX{=P?WtCO$ax$v>3-ozee{Q1Jg3qyHrI
zpM0L?0W2hh=NE>A4}gKIdDd@%82=UQ)ck+-d#XKsW#}?FLXT3MYKxsyE{0|7)DdKe
z{udzrvW82rlSMfZvz6ymrLaI{!*kkj^}#25b2&)R%s%oYQ*Q0D!HwRKU8$}*yfzuK
z)${}e76bkkHS5>uYuEX&>|JkWDwCOW4Ib6L>a@!69k{@B=JDN~#nFGXQ+({BY!#ck
z>iM;PGh=Ne46me+tMpZ^Z)<Nb6p$_ukGD^DR^m#lK&%HbSq6heF6pGGD5m(P#wN&R
z6;C`!B3TR7HDri@{{axv%WbBcNs`@)jU;9{*I#wJNd)>NbWjgeX7L*;-gS%Arv1!U
zXmoz-WIx!EnG}Fi)Kn>b-B&E|heb~MRQ13`0!Kprq}C5pAYhe$s~`y3{T9i9tT}d7
zE-LM#UY*c=cPF`6>|n@ZNYLJ%q}Zz2dBKK&s@Kk=_Y4C3>mMQ)S+hiYg9q-NSjF?B
zaDNdm%h;~l%}$??o}|g}2T$6LzPm0e!kN99Ke&z{>FIP1TQ)#9DJg`pa#@QSO+3co
zO-<oFbf4ta`%jit7i7Xj+6c#cz3s<wbM@)P%IymzQFp_@+4?YYpuglT?e~huHuJ-Z
z*rMpfq|xWr=_S&T0sdRKe=9LIp0|cM8?G40I5^M<4zZ(XBm~9#{Q*3~yM3y>P6$rL
z0{Sw`URMhBddLTeub);}vJ}dlJtjHyq)o+K#a;|WDdlIqG~(i1!|JRe2u1~c=a1tm
zaDJ;b{!=tN(Z8^@?5+7O@7Brrw#Y$2u1g$`GiY5=m^PMQ$?ZPe5lR;Bw*h<LzTd&l
zs213%_+&@pTTNtke>ZIqRVpkVX-t&7rQ`G6^zIZ`S)}zjriH72vA0jg?;Y*QzKFew
z9Sw+4Ag*gA=k9I-cY9~|wJA4Z58OTh*-yX+(#TmG_3)00`#x*ZkS>uWSPcQ}j-#cB
z1r{#=?-YN0_cdF}SZ-&2I<-{RSap(<i^xsjj3ecC^~6}9nWHMvUm7vrhvMunR~;^n
zt*j4aDx@MO?jZg}=jvnLLV<@VoA8U&{mrB$`No0W*v7vVjPUFjxtP}14KB#~cP<-C
zZ0AdJf#;?pllb#3-uvR}-y&Io{|1N!2N#8zR#$=^`1%V)D==-0(gdi&&OjyFb?*A4
zzPjBj!h;#)GHnWrHuf_4qEgxP_uM1CSKE<S19O__<n{3P35~1%FMeuVSNw4))ivT@
z6qGPmPK{NE{tYI}a%T&@Tg39`L&$_HZ8r;k5v{GR@rpk5;3b?)SZ-FAUl)1;z@c6%
z;g$XaCA~Uu+D(T7Zy-y6mLp=&8*g<cH8SK~^RDlqrL1BDj~<Vz2bGJws@JZc+|3^u
z=FKwmvIg#ADtLMtY}CNUj!>z(somL8EJ6w4!VV8K8Mz%JJY??Jg{!4H$f1n2;fzbf
zTc(ss#un?ncfJz(_;OO9Z6B8Q-tzm>_8=G`^a<!|$2dH92wkQaU$SRufXE(G_u6)~
zBJF3p`s-d*M3^!?a^l<y8!80g&z`DKN>1M^F<>*QxnN$jWxvF@3zpSC9)TN#cekUi
zT+4N%B_}+Tuz$brKYU|{C5P2G(2D~`WZ&!8<49RIA9Q?A+hXK*Qq;9=bnWNF#C_EC
z<Ey>dMV~C~)d0&e@q%Ka^}Y|8FQ*9Rl2E{0Rmv0aOFnhg?|J`s@M=?-cxwesjMxcI
zi`9R%v$-oc%$&-b8Hq~lGQr4{T_LKS|GlFe`qk=NB*6OL;0+QYTEE!G*0VL-z_M1k
z+$FF1%&F?$Z#oR}U%$n4bclWs%-A@_^-ubn6tq@s+AwMfTiYz3Qe2a16(|y3^$IDP
z$QT8U7=wKIMSR~uMQ6#ihL^3O8}!C88Ro7xos~JCj!8ckea%nqO4H}1O1Ly92M1Od
zcX&A2_;XCYi1aCjO%L*+`aA)3&W9WDmVi<tp&g@Sd8~9WmX(O(6YyrNj5D@O>u=E+
zV!>3o!>94h5QP@#;7<4euS_c!T#sM#wijD*SV<|#B1|d_V^e`vU8)ci=^53fx5LZX
z*V8|Jms{%-WRHIStDQE<!x(G*L_90%Rr;FzfUOp$gQ$RV@j}+cN7~S3f)EYTJejIr
zev{nh{=!VOgDq%Gkvd7aCIfTf(u%*THg99Ye8nC)liy9&Meq%+@ZoP7-DpNf2dc{Q
zaQ78>GfxHEQ1IRQR@Z(J!^RZu)!~U#+ta;W2|I_luT8FWAq`=LSxrr;ssb#aO0w-8
z{nt{&W$4J<WlplW8bl_nQ~(MIvc~b!M)D)&g#9MCEp1-V>F<K9+;-YjML-vA6XatD
zRiE{Dk-q(EHkH_pLCH(RW(>3cONjrgDF2`1-_x4ADm<%t{DUeDtdQ1rUdAl3j(1rZ
z)0y<-nz+I_xWdPw7qcf*_j-xR5dP(C{LqT|*&4LWD})W|R<F{TEER8YFV%K<rjqnD
z=Y=80@b3W!u1ta+l)4g#Fe-~(m|d~h*)XonL95_exoEfh$fa)ZQrGFCp1dTC<lOW@
z4paxY61fXKe}$_k)8%V1mKviMNHobslC!J{0r^Jshr)v_X1!|47iDVrawj$&5$D#f
zQKdpqMyn5+T2d2^E`b3{m9p)lu1l&PY#$`14?uJ(1V3@t4gNd<Vf(cUFJCkr|I99B
z(j<+sgD{4DP|bm`VEKQx91mm|hlpvEUi+ziIodCK^(OzTUyA=FInlO@#KF&QglGa@
z!%5{K`$Bg^xW5H8uaSc(q@b%*scgwp02_6h|LjHk6qeC7T3}pJR;#zmyIIfbnKgr}
zG@~d_&hvi922I$4ljG-8Mx&DOT$d3cfW`_b|2XfVieKdec+!TnoDXz2R>CCpGiLLU
z<~RGd@0>Z2)5}8iGV*!q5s|NnZ~$WQ|4>PFgT+2;2xoUiF_oh3927t*&OzVJ+{(2s
z>e^ab>_IeV<q<N-mfH0z9jOZ--))ei@QxCdTz5gi7R?bm7#aK=y^7}zO`4qREST4;
zD5);S#&hv<dFjq7>(U05Jc5GiOxaHKZ7fyG*aQbJS^u1Xlp}AI9IAIY7{IM@3kR6J
z{(E>EW@D;8+S;~m*qdb@B!|^93}IUDI#FA@x<xW8DobU=Be$3$`j~nIZo(beqtAlQ
zTvj}Yn~pCZ`D<DymNlB$3s2Rb0JlVLq(@}EB$36_&DUX!X*Go&?=@sxsZIYMBM72j
z=cMOaYiNv8xl`HwA;qA-ptzgO-FI{hj1+;(y#!<GgvIDhN<F?wlN30kS7iyUHNdE7
z4BA>k7ER1R;+~xsM-)1BhiTb=FG*ig+P^lm4m+<B!;YkO^b!_3*)f*z)f%%eV|?yO
z<8(h_u6o5{#3Apq(BKvcEad0+K7i5jO5X_H4mSryd8=Nnbl{<Hallay8aQI4&BNQ_
z06lMI=$YMP@ny06`^ee+f|N_D-~hIp3~jYlPJb}w^@8%$cEkWO0X_q?MOQIiyhHe&
z6>0bU1hv5pk-zeDrADR)ZoQ!tL2SjeJMGmUdNuN0jKT38kvF%!mF`bK>TKRAe^b#e
zNm{{YL6{)A6ND#R0dE6e>o3v>mp`HP{CaAuT-okzZTE&(Ld3e-m4+my!7pEdY<PV;
zX{4_>|DTJPMpF-y4RYnT)C=+*c8;@jw8?EgA2cQ}D8<>;(rzE&bakPa{fCag6CmC)
z3KGq~S3Y*HaUm`*Y_YdzhJQ@b<54U64UE*e6Q8`5V63S*f%I0V$&~+=-7E^8cZM_E
z3~`}#39X0p)p@@K*M?QM@3~^4Ud%C8UXOyt&b5br(qG@KLA02ol*6c*<(93U0PlnA
zA04z(+1^(pD7$C7G#F!*ZVGv%$t1;0`EdnbXnknbK_@xb<+8V&ysAxY=@RepYh!E8
zSFuivj7vNRjq!DZ5$9&TKBuJCFeZtUom0g&^Nu>pfyVh2_FuW)lv`RALCsmmQ15m<
z8Dq=6{2mkF)MyOG11O0u!fX>t>{a4-@e+B&nL4T(SGs*)67wH2K3NRHW)#F2RCa$h
znRb@UkY0Y}`)K>cUci(=)_E{1NKWe7MN@$#kT}TDPXiY+z8YJs8KAd3dNC5NMe4&a
z$=4Ya#20_6)+F|5(Uccr>qYa4iuwJGezgTZG<gl%?{apotrq2nMT#BZFP1R!1Q@lE
z{#quC>Kes9<GW&x;tO>e=n%TEI=|mNsElmob>q;wOxsH4fOeWe+4Dd4jRLkFNW^U-
z++lsC(&!i><y}AW|8SBKS53aK`tu5fj0i~0<7*@``PVQ?-kZir*Lx;{uM$_6f4SI)
zxYq3O$RRcM8??+X)VX?>hV>-gOV6*aFWfbpJpOV6!Hw-!j#k3>?$1b04vyfOeOiM*
zOM7!;Yg|5FR~?oT3ygdCcXY6qm`7Ovi6^`MiRxDuuRKp@QEZU~f`uM2f5XLl6Sy=!
zv<Ml|v!fhkqO4n+t1xvvY#XbRuTX)Kw)c165l!PNPFB--C8}rGo?hhP{0*MLJQ2=G
zG)M~sqK*YIE{Gp9Q`MHfe4l9VYtuhgg;k)Kf#)4!^tIsHNA~10#1@iAR_3em33Y%o
z0|LF#zV6(=-pgt)_bH0{NqBA9Q`0tiEMBm8IwSCzo%;!}G6}ip_1h!tG)95k)2>Ba
z6iw3{ca+h`4xAqA5Hmy9v(O9OXjsfjuUFtP_pp=nKl~Y+Ia%Uk3Wo^&V2zs@xhDV{
zeI1{s%Q_!M<#0+1zNKN`fk-R=m@1o}(5MMMTx#y)L49{kakIDf?7EW1<SviGA!rj%
zz~=7qYqhVBv$RVW=eMpV>H+hlJxAmpYR5Gq;Gc2i?^lS2=MAs>*6Q0yQUwY)Cu33t
z`WNWG$Z5^zA$_O9Ix~31ZD<)RW(W?dQ>e4mG0lR*UvoGkMH8Si1*83CMH*v#NWajM
zG@sd@Y9k>reR$b*37JH=X;py4+FCpT6qh6DwwB#lq!V@F;r+IaZ^Oj4t^WpKLD}5{
z#Y7b!GS07=pepYSvUc7Fk4Xa&w07~TV77B1f3j;fCd?-QZ8OTOCD-hB#!v=umhO<C
zt<Gc_Kli~DmO~k*qonDrJLGc}*oB3f(w#b8{j4jO5v~2i_BsJ_!3{aLCixJrAFP-W
zmsh#2r}oK~!!BOGdvNhJ>udiy6HVTdkOXPSp@?gqiXLm98s=YiF_*&dB95`wu5o%f
zpXfI5oZ@UPn*3~g-O~&^>*~K8*#~vy+adNm-qD25n%{l!W9h9dUQ}^-i1OHeTe8mp
z6EGl<?6i0{ds((5Urvc@i({{}>rSL4y*EADM2cr59Tfk^{&$W~buegK%kIJ!TMARx
zXkqa?kbo6*lAT+apVhP2CPVZA>mT=9?%@S7v%eyB=|g7a8JF+;AXm&%;PlS3NcTkS
z$YFIsJ~V~deA<C1#Sb?zFBP|aX}wK?7GpPyu{}!tBw?ZT^%*2zKi)+8VMpN!&{-0N
z&?GI&QOJ<Vk3AbVwrGGA2{z`7{i(<}Mq540&seAL-hVl+M?BByE3_5YsBW@9r+c0H
z{lrduvkcMzBZ>@iyblI&qC!A+Xi}r#dxD$L^cm@u6S)u-&2_~{rvU6St+(O_=4M<E
zC@nb>36Vmh6Umy&jl6<Ib*ik^HsyYfbL&pxFH@KTB8*aTJF97LMBTRTn5495H!Z9D
zRccW|L31BsX1e21Dv!SrZ%liEna9Y66Fl+5VV&q8J8riTbItKq%9XbM>^YQm#-)FD
z7<g=B51*jyk$71{0n4nArt-J@ED7!Y)iZ$BhuH#DV&8a(EbfbIrVUbK{6MBb6UTOn
zv!UUcFfk3VcJRkLVY1z<GWIJ70!y+ffg|Rzu4pY9Qx7buKg>Aa(xy6#+^z*tHAFq4
z{1sVO^2n<iKhoLwR$=P$cy#<AM>Ex->px<|WP1+1d;(M>XTV}rEuskfEwXBB>^qc7
z3%1wD(=~m3Dr4)89ghrUPLjVLD3!zI#`ez_>~2VY<a2LV5Fw0g>Jd4~yvATHb09P}
zvR<ZbYnoU;do>PTdbPBe#S6XOi$tDR+@ImBCGgQ^^f^IN3-f>uk00Ks!wW)8l&^pq
ztmmp+Y-6u0J!thymF@PB!EhlIUOv6@ls^!57KFCHzSC8$Stu<W1v)=GQmmDJY4{b(
zPMC5kDnpZ9be*{CuCb)QBNCqcLh|Fs)sSHDw0AK3ki&};@tBLH-UgD|I779&T&n$d
zVD8>2e^g-gR$Bw!PVijBa<-zpVnFv(05@WF<~T2w@7!NGo8)dIh96UW=e2c&wPEjl
zYd^gS6&4S81y1JAC>_?LCT7<xese$Ve(2=ww@)y5-2GFr_y(_HTs(mGq#{asDnV}Q
zQ<kmu7F1q~-^x9{h$$nutA084=skxRTNd-wt9rw9+X#AD9AR?i!2WyOcBHg+maZcr
znVz4e);v!@?PuB<e(pSB_Pn9oH?8KS@1`Gy(~QZj*3i)eIq5+7>DCA=)FNgVJ<djC
zE1$}(5qPRM-gMBmwy44ng+}1Y5_l*1bV1mO9UfdEx43(Tppbj65<Q!6_30_BuP^bw
zt(Fi@{cP;N_uJhW&oHkQP4Av6B^8=u9R2$ZI`x+(M?>XXAoV|%QT{zok_nm^p3gMX
zZDF2usfx|5!HmF>y+ti-)^E!I^~(@mNq0su6C#fgW0r@?$#l8j_mzMiPXB2I@EoLy
zv$=nQ&VgTbC(sT*r~&L&?FWdWj`MBpnc4YQy(})@FE5w&%UWiwnHiF7x-X&TIrQ0+
z;_uCNGNoto62uA(Z}0yN)+;FAy`o_2apjwPRrWr+b^ysjp0p<7<m~&lkT7*njuwxv
z<?39k^5vDl{AXAL$>0zfRqj&sA*fQy0Ds)q3$6rfstFcu|2e&lC_}sQuJayE+)>tc
zj^l{4j-AYbV+-nIohatq>s(gU$RAs|*Ptf|8(Yv-B5ZYnHMVl&4Z}${@f*k)SsM5`
zagNM>A3V~h>!a_xvFq11H-1$v)DJE)b;x-21hkxPU~!9Gtl~>+OeOSqr|Ddq$z}XD
zWHMu9NyY)F(9R~Y{0>tOdfd`BXD1mZ=_hNSm9XoQb=rEvcJ9TmA56q*FFoSl2lC*^
zZBKdHV^S0Tdi3eDwX1q-*>uO}^9IXaSY1C(WHn2whr~~E@VGwVSyNsmd3aUqI(<|A
zQ0PU*_L2(MbcW^vr|QI^t6r{u;*eCcnK6j+b4<XpOW$U~!Mm<CY?dD0r5%y-))mv%
z%#RZ=AM|xnHU<Kc#X-{VzBoe4S0&yoU+%%Eu`W&?MXe+nDqL|V)-D6IbBS>k=4kIX
zu;)Mk{*DU5__bO$zGt{RVN|+;{ksR}1&K}N1ZeB|#Z^UQZhbHsV^6CBg`kkkvo)v~
z_NQ+M?~9`|<S_agvgN?Dzn1~&I3HGdErQOZvu<fmEUV&j8&*KQAxjifpXEUqlJ+-M
z`XwlLm;Luqt1^eLij%Eh?uwrE=qzS2lNrgmgsJBCRleOhK*Ca05*4|))%~Vys<?$R
z#=hb5kAss>M2bltpJ@>B@RBcYOC-F44<gGdh<jm&{%$2!>gMianM$!u@izW9y`0*K
zwYD}=@6@OP+%4+Xw{soQ8(Z}bZkThmoH!S*M~s@26hhNu6_Fgu{Uc$1pO1;209?Ja
zxX;aGB?KA5Hu=Nak9c6xjIj0^3=tx7mNUfAW0t7Ec?Zr2F?+I+>E?wP2mOg!Y$eS&
zYtrgD-rD0n(e57%^cI?%IxSFeC@PL;v1?m^PI@;<no((ip58;rpi<-V@<{=snJmT+
z?h5cU&US(6KK*RvclAe&EQ;f}vGY{AmH>e@1+l(Fzcr`WfT6UV)$sl=49Gt;q7(kO
z#M?ZwN9q!Ap?5LabTejZkUEZlD1~mdERxr`@b}nVm}5VGSPS-O;K@{Z(^A}J$1Guj
zBP&M^8n2J6u9~3Gi2VgUE1(UvoL^CUNO^Uk<oe_5hb*1nozt&*2YeAmEt;YNsCT+#
z&gxXOmB$?pH5JO>EeX~-DGl+%p+TE(;t{Cj*HUvA#^xIjkk(LxN_BPQBq|GKN(_*-
zYN3aM64vWBaH!YLwYJ%OAm#Hv=GmEz$tePG`>m!iUne%TvR%ztLu(Ih6?B>8{!cJw
z<ChwOR3IUco0Imt9lcK@VI1dA0N!=J-hxpRjm6insMjhmgZbcng>BJB3!!z!w)8HM
z^ZAYW(>*7-@4e<>!$|fNbC8sfsy-Z@BrOgy6DX?C>s>8>?)LVH3f1h~ZM8<;U$VJ8
zM`o0LXSj4H;o`VOd<gtA5t=jb!_s11<CR4<TdZQ@KM%RVS}Cy!8{9c!)j^@1SHh(t
zZyP|pw~K^o9KoWPjA3G^FCg6r9V|#f)FlUXNsmRJHa($(J&Ge#Rejb@Oi_s@g9>bI
zWJu9wk$G-~w$oXxKc{LxPgF3r)(4Y94=p2dqx+pP^2}*@7YYE;?uPhlKfcmEOL^Bl
zpMH2-Aj<pG0tp@a42Zk*Ld=wOuZT?O_n#-6Jz424n|f@&`B~pa7SmkP==4f+JL8JM
z1E{eD-~McxbW@S;#@7*U3#K%+McrY<?=}4San(G5exEx?b?O|V^kGtZh_lA}GToxS
zhB<j8(@QHg@GjEvO`zAtHlPm5v~spChL^rPJU_zu-MjP&=2fc@tI-%gM6-x>L1m(?
zOY`MZ(KTtecR~C@&J^EvX8f3dejq))vTdNOHu828U*9oJu`{zZf0QR9%v5y8Nncc_
zYJh_rD=3|5W3?onM}4cAoZ})>txFG<S^N;jUK-^^r@*N@=sOV8{knf6OL)~S2S>ou
ztxb^&RcDW+9#2O_5LT_bEI*zxrz}D?<A8jM-q|-@;hFv}S@GC7(p9OH4=QRXR*<mJ
z`_{pMjyq=~gC{#N`Yce+0J|Lgi?HiO0`n6P!B06+h|i=hB3TuFIuC|NbCX&0sud_z
z?xbziyq=iUk<KTF$16lbC#v&Gt3NN)npf~9bnZw}%K_SnGOluw%-7*t@~-tQ6h>=O
zQs$^Dq7N(Jt&uBd+u9S<gwj3d7um%7?s{So{&P(FKPR}ryQAkajKcP6LV#PjX`xO<
z(gTb$?+z`z|4u?ejf>KKeS%6IahdO9FFc=+=rr9i#3Mx(cWL3w{=83k$B6ZdW$Es1
zSd~lRazR#l^P;}tb+CD}Wz6UFY?pX}4B`)BRPhSE;%buPZiW~N95gpve6DKe(yxwc
zrAKb-?V&lYW+A;e-ZP@ll0j3`V2tVV4P~<O6-(5}#Jn}JIT?9^_W@W&=qd*p!hPY>
zW;5O2@TYJmzK^>5_oJhB=6w@Ye2+e*!hjG<rL=9gUJ|TsHHNEuz~lS;!kaN8hFP@V
zJsD)bK0T^SC1mH8T6WHmYP+Ofu(t?hjSu6$$QF)#GlnjW=yau)B7S|a?0|Ru!M+uf
zE9~6LB#a-*x(c-rMa(NT$sp{1HzLfE25i{7J^_q6VLi1DM0Qg;Djv4tf697qaymEX
zSNF--$YqgG)L$cv$iWvHrdlmahumk5SFA_N8|#{&#5$U0TUdPdcTjvUmIl?jWT#c~
z?I}A4(ynFF7*3evG4|c3MF9Ens9xxHx;^Bc-6Ll&?P7m=-mQ!xsNoc{PaatWE2E?<
zS!ddg1oVdvlzN;;3jXf66zxQAvA1c;|8|zZp%5YtbD1PZ>)0k2i#EovPAd=p3_0`_
z7GfCQy~HmV4sa3SoSa2y&RfrO76PE_6Hbv`$3K&u^8Ws@bk@kfGyL6=%LIw{`05=r
zOlG;lhY(x2kWG61a^q`d?cT>~1vg7ReWo}%hb8X)mJX)aR#e^)?eaRzA#qA&B|p?V
z4XxUURJwQ+40kAQDnrHtD!Z*_gKZnn;XDs=!kd#~aRfHWk!^#MhLg+^X-HuvXn(Ya
z;$;&dDH9!bW~<w<c$Flv7|M6UA$TmVzC@587UD1b%ZB*HUdd?FA52^!Pzi&xVfF_8
zo@)=)ldRZJ1v?1}IRj>vRO+I1>3^&yQJ5@aW@(jYY`oQx{u$x9u@WWbwE-r3&E08`
z-b^zKhGg~jM*JSCOcMT^g1A*EG4FK}^={j6Wic+9KsXj2heLkbBJW^yfG-nz?doZx
zi9FTWbd%vb=?q`hG5c3_O5rW-AsR6jpONqQr0`^`LgFwEnG!Opgx4dhO0M<h!Q_7f
zAnntYoJXdOwPr8!7*OKa`rDn7gBg8;I_WH*lP!hfYVWh9eZJSu!Y9p`&FfoI@=c1n
z@aeP`8#nNT$%b(xhpJ9qv^c>(&#;WUrdt(;y@V6ksG`nv-i#!iX5dc<^Q-mVx>$j6
z`2XI6ElMWd9Egf_AE=~w3=t^IHX_Z?BpE@#25DV7$M+)L9u8RUJbHDzau{^Wx)a=V
zt7V>46u?4MH^qh#(}Zh`noMn|L%gMKd8HmCm>(I2%Df8Gm}!%$xGw!LQAe%EuEI8~
z#QADmv@|Ncv>|HKWaHq&m$Sfdu!e4P%uHn2#UD}q*1FN?*XwGh<wu+DFSe|-9e+#b
zYV>+rG>AcLABx~R=ZzH{Fzb1S6GMX(E&0!Z&G86~&S3_t7dZ%SxRg9$6gc6*Jm575
z*AqZiWG%tenp9Uiy-znW98a9@$zuIAuCMh6Gtsf=$EN;sec=o_(x7_~V^(BxiNd|a
zkUnkzNzpNE?GjVxfIeIH>v}`P=EryVzn~z%>_-mD*u6DQUg-$Lv4P}x(EzQsKJAz1
z&(Uvm`wMe#PNi4PsW_zy@847>sI|0DuD68EStjMeI0ZJ>??mEBr0L!i(b@M4brOfW
zpf(iCtS(T0oc~2F;ni9fKX@vevNdQrtl@sFMwdbLVTI5}bH^X+L^jIBqN)#KqBU@^
z&L9{pX(qGlIOwm*+Ydk+0cwk?VjB{4ta`0^*D5g9RYUIr=m%|!-AT4;(l9QiO_2_S
z&-xZO?Fahr>;+2;OyXYOtX9|ak`*GZGH!T_0vF#@rdz}(D+fbG<kL;cOqa~mb#ZnC
zmWcqkK*~dD$FlLIv+siTz(~qHZu-&f-N!(2F4@UCap~VaLn;!ia%h(xz3ZHdv`ZCW
zz0se7(rS%&xG?)}l?`-f^`AIPv)kmowo%u9euZi{bw!+8NlcaB6_;hAqpI>)0~6I<
z8kS2`R@;$SA`e{A#JC}RBlcI?IMjg+(Rd|lVlcZv@h=CG)P*6%Dy4t51ZM;i^i;&8
z3WDFWjkU`f(0B@W9txK{vQHoRis!18=<a0CgDp`NzMXZ;m;o>odEs6WZ5Ef+N~F1K
z*obn|ab2y3k*xn8x3>D$()cm_EJ}yp;*QH1SFm|VOjcr=9m!ZhqSK8M4o|L#S=J;%
zaN1E+zKrW}Oes57Fn?$#?bTt?@pSulTkW*+^2fMl-!$K1OrmDO(i%Ev1Pt!Lp(nu4
zM;i=TL%*jcKQ5a-GqhpzZNozmwO<1}@}9pVgAY6sV-MSw9xul}MCHlZGX3;hgib6i
zn$frpdx-j52F(JZ>ZtAwYql-4c=Oit?&<uueS`+P4A?EXQOI&Jze`~zKHF%E@5+4j
zoxacNujpMH>%r#N_+c!lv-Vo#AXK|^e&-d{3D?g*l`Ik09xc5nbfX413KSM#!f-hZ
z5w@9ZPs?AIHJ<D$ZGK#x<wWjZw$)rdk|!leI&jy-bcD2spGi_b7O%<kW#cLo?^3$X
zd~zZZEX%nG<i>EX0tt<P3d}~<7x2IB=!Mqj6%Mkb@ioaNat(!^2@p7v3znK})8S7>
zCinc|%nnLd3^k2BJVml3(5vW{nN>=p4(_dx8^yVh{q?vfJIc2}ey^50J6Og3c0S^a
z35J+wA(u{$Og)sHE-JOUp^mc0MYS_u8TE18b?=TGBJtaB6FY&UY=up37zeS*zD;|%
zg~0YtD?&NLj{9r1HA4&;k0h;OzByqtMl&o6;Q?VJ2d9fl#r_;r4b{P0jimD&#6(Ta
zNMQZq3AlN=jPnFkP=r4Q5nFpUC{SdDvNLThZ~cC#n05?`)+}Ok^oHg@SHJ2uKLPiN
zN1%WiZ0RRJGO}64_))Uq3Ai|7c?`Bf8g69|a63Wj$a>M*;#QZesmtl!i^(Kqc6tS<
zDzLCr<{Tu<%wLPDXl3l8T)3ymlI^~v%CW;DMY2LVYS=cA>r}gWakX-B20r88-MeZZ
zsRO(?=Ao(J9yDL_qQ3&(Hu?rV9^zBg4Cz4>UW1`;u&_5(o&As6yk&E9tZow@{T`Fd
zJXqDgDIAQ;VvdlTcy2tpZMd(Tx+Di&JWmfmLVaAWZlBYC*%1=V6TbLsLaq>&U$+K=
z9xxgBB>fk&_@&G&vB1)VXv^>Cm2#7=vt|CYhSsmS@wy7ys<}5p@#1iIj9#7$Jt~Gp
zJ<m40d;;<|Dm`WbHuNXKd*j9rBvwecipOQ&ut{!@j3z5lv!eK3%m3gojaH#O?xmzO
zxT*-~&SGtx5_4h+mKY(@8se-yHQ1<W4vtSk${7~e&canZXUDxk)DM`ceqL+9zd^ck
z>NsP3F}(5w$dm&fMiMa+b8rR?1(AEY4L6$ity<Yp{8qkP@Tfnw`}hV?=GYq>FZSak
zE^$O|wE|+>*Y|#bFKNS{3oB{d>pTJR#$^FB&;EBb6nKCAsq{q?JZc4x^P7J9-i<ll
zwny@>3PBUg!|j|s?Rz9E)#$Xg$>8;O(_>urMGFlja7K+e4M&hfQJYIUa{ET2)DvK=
z`2;*?)q?^y)Q_KlhY-`}TU#NHd^t~XTf*2H*S5-(Rzcpmg2Q+d-L8;vCq2s8%YF13
z>yPU~3#RJowrY@L`4<*$f_W*}3BEL9#rwpAax3ch9>rgQ_Yzlz8+8IUxR2K#+w9xV
z71dEYj!~n;6RVB=3U41F)e^a4eFqqW3hyYfygZp!>5yh8NwnvO!`CUnILkIl#q$PT
zOk*Q_2rQCKziM92KZqQlwxB!#u^LZ+!N_Ta;6Ke#_bp&1dS&1{5@oO5Bib0~ixlaM
zqb=&=2j84zU*|X9aa2dYzsG6!$ob>^NPeCE1fVBJGLDs>Q>t*gz3fgNFGW}R#oEP)
znBzMrkT8SV92>K8s$2=)t2MqQoQd|Od45D{p`ZQ}AjOAp9!<hyy^N8qmbP;^KRxeh
zmL-F5$!d~w8`p?@)$21|7=`8hm%_<&EOzeW#&_^9Hq4_Ngk9r{!R;H0hMXs$zr846
zrp)*jEe9(ANnhsK$`=$JPB;$;P+E=L&Q!pDh~Yi~4CU<)uFv(9ZF3m?XZ;`OY3|<u
DdH?LW

literal 0
HcmV?d00001

diff --git a/src/assets/img/love-gray.svg b/src/assets/img/love-gray.svg
new file mode 100644
index 0000000..3a24e65
--- /dev/null
+++ b/src/assets/img/love-gray.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539622562307" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.401929 878.630145c-20.164249 0-207.085452-164.513868-289.018509-253.203816-46.00273-49.79715-91.849918-133.603881-91.849918-194.943924 0-130.201387 94.799086-236.113579 211.332173-236.113579 71.160713 0 131.555222 59.236126 168.815847 120.437 37.260625-61.200874 97.632621-120.437 168.814824-120.437 116.526947 0 211.32808 105.912192 211.32808 236.113579 0 61.476143-41.280172 148.617829-92.28073 195.33585C710.48047 708.321294 534.73991 878.630145 513.401929 878.630145z" p-id="2052" fill="#cdcdcd"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/love.svg b/src/assets/img/love.svg
new file mode 100644
index 0000000..93b12b2
--- /dev/null
+++ b/src/assets/img/love.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539614702463" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2049" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="2050" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/message.svg b/src/assets/img/message.svg
new file mode 100644
index 0000000..d2b03ae
--- /dev/null
+++ b/src/assets/img/message.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539615176271" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13012" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M981.8 601.5c28-48.5 42.2-100.1 42.2-153.5s-14.2-105-42.2-153.5c-26.5-45.8-64.1-86.7-111.9-121.6C773.8 102.7 646.7 64 512 64s-261.8 38.7-357.8 108.9c-47.8 34.9-85.4 75.9-111.9 121.6C14.2 343 0 394.6 0 448s14.2 105 42.2 153.5c26.5 45.8 64.1 86.7 111.9 121.6C250.2 793.3 377.3 832 512 832c47.3 0 93.6-4.8 138-14l263.1 74.4c3.2 0.9 6.5 1.4 9.8 1.4 10.9 0 21.4-5 28.4-13.8 9-11.5 10.2-27.3 2.9-40l-71.9-126.2c41.9-32.8 75.3-70.6 99.5-112.3zM252 520c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m260 0c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m260 0c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z" p-id="13013" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/music.svg b/src/assets/img/music.svg
new file mode 100644
index 0000000..7378f04
--- /dev/null
+++ b/src/assets/img/music.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539617513383" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M405.333333 704m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#ffffff" p-id="2049"></path><path d="M512 128v576h85.333333V298.666667l234.666667 64v-149.333334z" fill="#ffffff" p-id="2050"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/play.svg b/src/assets/img/play.svg
new file mode 100644
index 0000000..8bc1f67
--- /dev/null
+++ b/src/assets/img/play.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539575406495" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1072" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912.724884 429.355681L208.797545 13.198638C151.603449-20.597874 64.01249 12.198741 64.01249 95.790112V927.904219c0 74.992259 81.391599 120.187594 144.785055 82.591475l703.927339-415.957064c62.793518-36.996181 62.993498-128.186768 0-165.182949z" fill="#cdcdcd" p-id="1073"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/share.svg b/src/assets/img/share.svg
new file mode 100644
index 0000000..e72cae1
--- /dev/null
+++ b/src/assets/img/share.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539615220711" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14876" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M621.110023 141.28277c-10.939143-10.93505-26.768667-15.935947-40.191374-6.538927-12.669554 8.868995-12.56313 19.051915-12.56313 29.986965l0 158.582785c-224.199225 0-437.464423 185.92041-437.464423 410.119635 0 60.151985 27.340695 136.708592 54.682413 164.048263 32.810267-169.514765 202.328102-300.755832 382.78201-300.755832l0 160.538323c0 5.469572-0.460488 25.329898 10.044774 31.383778 16.101723 9.278317 28.231995-0.530073 33.701566-5.999644l270.0239-291.62487c10.93505-10.939143 14.326287-22.706141 14.326287-31.006178 0-12.707416-9.071609-25.953092-14.541181-31.422663L621.110023 141.28277z" p-id="14877" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..d0127b6
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,361 @@
+<template>
+    <div id="home">
+        <div class="bg-video">
+            <video src="../assets/video/吴三二的光年之外.mp4">
+                您的浏览器不支持 video 标签。
+            </video>
+            <div class="float" @click="togglePlayVideo($event)">
+                <transition name="pause">
+                    <img src="../assets/img/play.svg" class="pause" v-show="!isPlaying"
+                         @click.stop="playVideo2($event)">
+                </transition>
+                <div class="toolbar mb10p">
+                    <img src="../assets/img/head-image.jpeg" alt="" class="head-image mb15p">
+                    <div class="love mb15p">
+                        <img src="../assets/img/love.svg" alt="" class="love-image">
+                        <span class="f14">3453</span>
+                    </div>
+                    <div class="message mb15p" @click.stop="showComment()">
+                        <img src="../assets/img/message.svg" alt="" class="message-image">
+                        <span class="f14">6666</span>
+                    </div>
+                    <div class="share mb35p">
+                        <img src="../assets/img/share.svg" alt="" class="share-image">
+                        <span class="f14">555</span>
+                    </div>
+                    <img src="../assets/img/head-image.jpeg" alt="" class="music">
+                </div>
+                <div class="content ml10p">
+                    <div class="name mb10p">@TTentau</div>
+                    <div class="description mb10p">
+                        吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
+                    </div>
+                    <div class="music mb10p">
+                        <img src="../assets/img/music.svg" alt="" class="music-image">
+                        <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <transition name="comment">
+            <div class="comment f14" v-if="isComment">
+                <div class="title">
+                    <p>2.7w条评论</p>
+                    <img src="../assets/img/close.svg" @click.stop="showComment()">
+                </div>
+                <div class="items">
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                    <div class="item pl5p pr15p mb5p  oh">
+                        <div class="content pull-left ">
+                            <img src="../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                            <div class="pull-right comment-container">
+                                <div class="name">@ttentau</div>
+                                <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                                <div class="time mt10p">10-02</div>
+                            </div>
+                        </div>
+                        <div class="love pull-right">
+                            <img src="../assets/img/love-gray.svg" alt="" class="love-image">
+                            <span class="f14 block">3453</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="input-comment">
+                    <input type="text" placeholder="留下你的精彩评论哦">
+                    <span>@</span>
+                </div>
+            </div>
+        </transition>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Home",
+        data() {
+            return {
+                isPlaying: true,
+                isComment: false,
+            }
+        },
+        methods: {
+            togglePlayVideo(e) {
+                console.log(e.target);
+                let float = e.target;
+                let video = float.previousSibling;
+                if (video.paused) {
+                    video.play();
+                } else {
+                    video.pause();
+                }
+                this.isPlaying = !video.paused;
+            },
+            showComment() {
+                this.isComment = !this.isComment;
+            }
+        },
+        created() {
+            console.log(55)
+        },
+        mounted() {
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    #home {
+        .bg-video {
+            position: relative;
+            video {
+                width: 100%;
+                height: 100%;
+                /*position: absolute;*/
+            }
+            .float {
+                z-index: 1;
+                position: absolute;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                align-items: center;
+                .pause {
+                    width: 60px;
+                    height: 60px;
+                    opacity: 0.5;
+                    position: absolute;
+                    margin: auto;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    right: 0;
+                }
+                .toolbar {
+                    width: 40px;
+                    position: absolute;
+                    bottom: 20px;
+                    right: 20px;
+                    color: #fff;
+                    div {
+                        text-align: center;
+                    }
+                    img {
+                        width: 90%;
+                        height: 90%;
+                    }
+                    .head-image, .music {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 50%;
+                    }
+                    .music {
+                        animation: animations 4s linear forwards infinite;
+                    }
+                    @keyframes animations {
+                        0% {
+                            transform: rotate(0deg);;
+                        }
+                        100% {
+                            transform: rotate(360deg);
+                        }
+                    }
+                }
+                .content {
+                    color: #fff;
+                    position: absolute;
+                    bottom: 20px;
+                    width: 75%;
+                    .music {
+                        position: relative;
+                        width: 60%;
+                        .music-image {
+                            width: 20px;
+                            height: 20px;
+                            margin-top: 3px;
+                            position: absolute;
+                        }
+                        marquee {
+                            margin-left: 30px;
+                        }
+
+                    }
+                }
+            }
+        }
+        .comment {
+            position: absolute;
+            bottom: 0;
+            background: #fff;
+            z-index: 2;
+            border-radius: 10px;
+            .title {
+                position: relative;
+                p {
+                    text-align: center;
+                }
+                img {
+                    width: 15px;
+                    height: 15px;
+                    position: absolute;
+                    right: 20px;
+                    top: 0;
+                }
+            }
+            .input-comment {
+                height: 30px;
+                border-top: 1px solid #e2e1e1;
+                input {
+                    height: 100%;
+                    width: 90%;
+                }
+                span {
+                    color: #999;
+                    font-size: 22px;
+                }
+            }
+            .items {
+                overflow-y: scroll;
+                max-height: 300px;
+                .item {
+                    .head-image {
+                        width: 40px;
+                        border-radius: 50%;
+                        float: left;
+                    }
+                    .content {
+                        float: left;
+                        width: 85%;
+                        .head-image {
+                            width: 15%;
+                        }
+                        .comment-container {
+                            width: 80%;
+                            .time {
+                                color: gray;
+                            }
+                        }
+
+                    }
+                    .love {
+                        text-align: center;
+                        .love-image {
+                            width: 30px;
+                            border-radius: 50%;
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+
+    .pause-enter-active {
+        transition: all .3s ease;
+    }
+
+    .pause-leave-active {
+        /*transition: all 1s ease ;*/
+    }
+
+    .pause-enter, .pause-leave-to {
+        transform: scale(2);
+        opacity: 0;
+    }
+
+    .comment-enter-active {
+        transition: all .3s ease;
+    }
+
+    .comment-leave-active {
+        transition: all .3s ease ;
+    }
+
+    .comment-enter, .comment-leave-to {
+        transform: translateY(300px);
+    }
+
+</style>
diff --git a/src/components/index.vue b/src/components/index.vue
deleted file mode 100644
index db27c8a..0000000
--- a/src/components/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: "index"
-    }
-</script>
-
-<style scoped>
-
-</style>