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 0000000..be04d17
Binary files /dev/null and b/src/assets/img/head-image.jpeg differ
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>