From 50d3278887f897cf39be2f41894ab3f437e3b2c9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 18 Oct 2018 23:25:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E6=B3=A8=E9=A1=B5=E5=AE=8C=E6=88=9080?=
 =?UTF-8?q?%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                            |  11 ++
 src/assets/img/location.svg            |   1 +
 src/assets/img/pause.svg               |   1 +
 src/components/attention/Attention.vue | 183 ++++++++++++++++++++++++-
 src/components/common/Footer.vue       |   2 +-
 src/components/home/Comment.vue        |   4 +-
 src/components/home/Home.vue           |  12 +-
 src/components/home/Share.vue          |   4 +-
 8 files changed, 205 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/img/location.svg
 create mode 100644 src/assets/img/pause.svg

diff --git a/src/App.vue b/src/App.vue
index c47e68b..33f53e6 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,7 @@
         font-size: 14px;
         padding: 0;
         margin: 0;
+        font-family: "Microsoft Sans Serif";
     }
 
     $width: 1000;
@@ -66,6 +67,16 @@
         $margin: $margin - 1;
     }
 
+    $margin: 50;
+    @while $margin > 0 {
+        .m#{$margin}p {
+            margin: #{$margin}px !important;
+        }
+        $margin: $margin - 1;
+    }
+
+
+
     $padding: 50;
     @while $padding > 0 {
         .pl#{$padding}p {
diff --git a/src/assets/img/location.svg b/src/assets/img/location.svg
new file mode 100644
index 0000000..ab6523f
--- /dev/null
+++ b/src/assets/img/location.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="1539875191526" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M536.217 90.69c-168.027 0-302.524 134.497-302.524 302.524 0 120.961 87.056 215.095 181.191 336.055 32.786 45.949 58.866 91.9 92.023 150.268 1.74 3.105 3.974 5.961 6.582 8.321 5.588 5.091 12.047 9.438 22.726 9.438v0c11.425 0 18.007-4.844 23.844-10.432 1.986-1.862 3.726-4.098 5.217-6.334 33.158-52.409 59.362-98.481 92.273-144.556 94.135-127.666 181.191-221.801 181.191-342.761 0-168.027-134.497-302.524-302.524-302.524v0zM536.217 494.055c-53.774 0-100.842-40.362-100.842-100.842s40.362-100.842 100.842-100.842c53.774 0 100.842 40.362 100.842 100.842 0 53.774-40.362 100.842-100.842 100.842v0z" p-id="1985" fill="#ffffff"></path><path d="M536.217 770.624c-140.334 0-254.091 53.525-254.091 119.47s113.757 119.47 254.091 119.47 254.091-53.525 254.091-119.47-113.757-119.47-254.091-119.47zM536.217 938.651c-105.561 0-191.003-37.505-191.003-78.735s85.566-74.886 191.003-74.886 191.003 33.532 191.003 74.886-85.566 78.735-191.003 78.735z" p-id="1986" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/pause.svg b/src/assets/img/pause.svg
new file mode 100644
index 0000000..6e5e820
--- /dev/null
+++ b/src/assets/img/pause.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="1539874117023" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M256 810.666667h170.666667V213.333333H256v597.333334z m341.333333-597.333334v597.333334h170.666667V213.333333h-170.666667z" p-id="1959" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/components/attention/Attention.vue b/src/components/attention/Attention.vue
index f3a5b0e..6a638bf 100755
--- a/src/components/attention/Attention.vue
+++ b/src/components/attention/Attention.vue
@@ -1,8 +1,64 @@
 <template>
-    <div id="attention">
-        <div class="items">
+    <div id="attention" >
+        <div class="items pl10p pr10p">
             <div class="item">
-
+                <div class="header">
+                    <img src="../../assets/img/head-image.jpeg" alt="">
+                    <span class="ml5p">TTentau</span>
+                </div>
+                <div class="my-comment mt5p">
+                    最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <span class="tag">#带他去旅行</span>
+                </div>
+                <div class="other-comment p10p">
+                    <span class="user-name">@super-man:</span>
+                    <span class="tag">#购物车里是什么</span>
+                    <span>无敌浩克</span>
+                </div>
+                <div class="video-container mb10p">
+                    <video src="../../assets/video/吴三二的光年之外.mp4"></video>
+                    <div class="music">
+                        <img src="../../assets/img/music.svg" alt="" class="music-image">
+                        <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
+                        <img src="../../assets/img/play.svg" alt="" class="play">
+                        <img src="../../assets/img/pause.svg" alt="" class="pause" v-if="false">
+                    </div>
+                </div>
+                <div class="location mb10p">
+                    <img src="../../assets/img/location.svg" alt="">
+                    <span class="ml5p">东方明珠</span>
+                </div>
+                <div class="toolbar mb10p">
+                    <div class="item">
+                        <img src="../../assets/img/love.svg" alt="">
+                        <span class="count">555</span>
+                    </div>
+                    <div class="item">
+                        <img src="../../assets/img/message.svg" alt="">
+                        <span class="count">555</span>
+                    </div>
+                    <div class="item">
+                        <img src="../../assets/img/love.svg" alt="">
+                        <span class="count">555</span>
+                    </div>
+                    <div class="item">
+                        <img src="../../assets/img/love.svg" alt="">
+                        <span class="count">555</span>
+                    </div>
+                </div>
+                <div class="hot-comment 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>
+                    </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>
+                <span class="time">11小时前</span>
             </div>
         </div>
         <Footer v-bind:init-tab="2"/>
@@ -15,12 +71,129 @@
 
     export default {
         name: "Attention",
-        components:{
+        components: {
             Footer
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+    #attention {
+        /*background: rgb(22，24，34);*/
+        /*background: #161822;*/
+        //抖音原色，感觉很暗
+        background: #2e3244;
+        color: #b8b9c1;
+        .items {
+            .item {
+                .header {
+                    display: flex;
+                    justify-content: start;
+                    align-items: center;
+                    img {
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 50%;
+                    }
+                }
+                .other-comment {
+                    background: #15161b;
+                    border-radius: 10px 10px 0 0;
+                }
+                .video-container {
+                    position: relative;
+                    video {
+                        border-radius: 0 0 10px 10px;
+                        width: 100%;
+                    }
+                    .music {
+                        position: absolute;
+                        bottom: 15px;
+                        right: 15px;
+                        left: 15px;
+                        .music-image {
+                            width: 20px;
+                            height: 20px;
+                            margin-top: 3px;
+                            position: absolute;
+                        }
+                        marquee {
+                            width: 50%;
+                            margin-left: 30px;
+                            color: white;
+                        }
+                        .play, .pause {
+                            width: 20px;
+                            height: 20px;
+                            margin-top: 3px;
+                            position: absolute;
+                            right: 0;
+                        }
+
+                    }
+                }
+                .location {
+                    display: flex;
+                    justify-content: start;
+                    align-items: center;
+                    height: 20px;
+                    img {
+                        height: 100%;
+                    }
+                }
+                .toolbar{
+                    width: 90%;
+                    height: 25px;
+                    text-align: center;
+                    .item {
+                        height: 100%;
+                        display: flex;
+                        width: 25%;
+                        justify-content: start;
+                        align-items: center;
+                        float: left;
+                        img{
+                            height: 100%;
+                        }
+                        .count{
+                            margin-left: 5px;
+                        }
+                    }
+                }
+                .hot-comment {
+                    .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%;
+                        }
+                    }
+                }
+            }
+            .tag {
+                color: #E6C346;
+                margin: 0 3px;
+            }
+        }
+    }
 
 </style>
diff --git a/src/components/common/Footer.vue b/src/components/common/Footer.vue
index 7157948..68f45ed 100755
--- a/src/components/common/Footer.vue
+++ b/src/components/common/Footer.vue
@@ -44,7 +44,7 @@
 
     .footer {
         border-top: 1px solid #7b7878;
-        position: absolute;
+        position: fixed;
         z-index: 2;
         bottom: 0;
         width: 100%;
diff --git a/src/components/home/Comment.vue b/src/components/home/Comment.vue
index f66e8a0..3bdb7ac 100755
--- a/src/components/home/Comment.vue
+++ b/src/components/home/Comment.vue
@@ -129,10 +129,10 @@
 
 <style lang="scss" scoped>
     .comment {
-        position: absolute;
+        position: fixed;
         bottom: 0;
         background: #fff;
-        z-index: 2;
+        z-index: 3;
         border-radius: 10px 10px 0 0;
         .title {
             position: relative;
diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue
index e73f3f6..84da759 100755
--- a/src/components/home/Home.vue
+++ b/src/components/home/Home.vue
@@ -2,7 +2,7 @@
     <div id="home">
         <div class="bg-video" v-for="(item,index) in data">
             <!--<video :src="data[0].videoUrl">-->
-            <video src="../../assets/video/吴三二的光年之外.mp4" autoplay>
+            <video src="../../assets/video/吴三二的光年之外.mp4" >
                 您的浏览器不支持 video 标签。
             </video>
             <div class="float" @click="togglePlayVideo($event)">
@@ -76,6 +76,12 @@
                         loves: 1234,
                         comments: 666,
                         shared: 999
+                    },{
+                        videoUrl: '../assets/video/吴三二的光年之外.mp4',
+                        isLoved: false,
+                        loves: 1234,
+                        comments: 666,
+                        shared: 999
                     }
                 ]
             }
@@ -160,7 +166,7 @@
                 .toolbar {
                     width: 40px;
                     position: absolute;
-                    bottom: 20px;
+                    bottom: 35px;
                     right: 20px;
                     color: #fff;
                     div {
@@ -198,7 +204,7 @@
                 .content {
                     color: #fff;
                     position: absolute;
-                    bottom: 20px;
+                    bottom: 35px;
                     width: 75%;
                     .music {
                         position: relative;
diff --git a/src/components/home/Share.vue b/src/components/home/Share.vue
index 5f6a261..144510e 100755
--- a/src/components/home/Share.vue
+++ b/src/components/home/Share.vue
@@ -125,9 +125,9 @@
 <style lang="scss" scoped>
 
     .share {
-        position: absolute;
+        position: fixed;
         bottom: 0;
-        z-index: 2;
+        z-index: 3;
         background: #eaeaea;
         border-radius: 10px 10px 0 0;
         .friends {