diff --git a/src/assets/img/icon/c8_.png b/src/assets/img/icon/c8_.png
deleted file mode 100644
index 1b70ab6..0000000
Binary files a/src/assets/img/icon/c8_.png and /dev/null differ
diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss
index cebd373..6113a1f 100644
--- a/src/assets/scss/utils.scss
+++ b/src/assets/scss/utils.scss
@@ -1,50 +1,50 @@
 @use "sass:math";
 
 
-/*
-
-width
-
-*/
-$width: 500;
-@while $width >= 0 {
-  .w#{$width}p {
-    width: #{$width}px !important;
-  }
-  $width: $width - 10;
-}
-
-
-$width: 100;
-@while $width >= 0 {
-  .w#{$width} {
-    //width: math.percentage($width / 100) !important;
-  }
-  $width: $width - 1;
-}
-
-/*
-
-$height
-
-*/
-$height: 500;
-@while $height >= 0 {
-  .h#{$height}p {
-    height: #{$height}px !important;
-  }
-  $height: $height - 10;
-}
-
-
-$height: 100;
-@while $height >= 0 {
-  .h#{$height} {
-    //height: math.percentage($height / 100) !important;
-  }
-  $height: $height - 1;
-}
-
+///*
+//
+//width
+//
+//*/
+//$width: 500;
+//@while $width >= 0 {
+//  .w#{$width}p {
+//    width: #{$width}px !important;
+//  }
+//  $width: $width - 10;
+//}
+//
+//
+//$width: 100;
+//@while $width >= 0 {
+//  .w#{$width} {
+//    //width: math.percentage($width / 100) !important;
+//  }
+//  $width: $width - 1;
+//}
+//
+///*
+//
+//$height
+//
+//*/
+//$height: 500;
+//@while $height >= 0 {
+//  .h#{$height}p {
+//    height: #{$height}px !important;
+//  }
+//  $height: $height - 10;
+//}
+//
+//
+//$height: 100;
+//@while $height >= 0 {
+//  .h#{$height} {
+//    //height: math.percentage($height / 100) !important;
+//  }
+//  $height: $height - 1;
+//}
+//
 
 /*
 
@@ -53,43 +53,43 @@ margin
 */
 $margin: 50;
 
-@while $margin >= 0 {
+@while $margin >= 5 {
   .ml#{$margin}p {
     margin-left: #{$margin}px !important;
   }
-  $margin: $margin - 1;
+  $margin: $margin - 5;
 }
 
 $margin: 50;
-@while $margin >= 0 {
+@while $margin >= 5 {
   .mr#{$margin}p {
     margin-right: #{$margin}px !important;
   }
-  $margin: $margin - 1;
+  $margin: $margin - 5;
 }
 
 $margin: 50;
-@while $margin >=0 {
+@while $margin >=5 {
   .mt#{$margin}p {
     margin-top: #{$margin}px !important;
   }
-  $margin: $margin - 1;
+  $margin: $margin - 5;
 }
 
 $margin: 50;
-@while $margin >= 0 {
+@while $margin >= 5 {
   .mb#{$margin}p {
     margin-bottom: #{$margin}px !important;
   }
-  $margin: $margin - 1;
+  $margin: $margin - 5;
 }
 
 $margin: 50;
-@while $margin >= 0 {
+@while $margin >= 5 {
   .m#{$margin}p {
     margin: #{$margin}px !important;
   }
-  $margin: $margin - 1;
+  $margin: $margin - 5;
 }
 
 
@@ -101,43 +101,43 @@ padding
 
 
 $padding: 50;
-@while $padding >= 0 {
+@while $padding >= 5 {
   .pl#{$padding}p {
     padding-left: #{$padding}px !important;
   }
-  $padding: $padding - 1;
+  $padding: $padding - 5;
 }
 
 $padding: 50;
-@while $padding >= 0 {
+@while $padding >= 5 {
   .pr#{$padding}p {
     padding-right: #{$padding}px !important;
   }
-  $padding: $padding - 1;
+  $padding: $padding - 5;
 }
 
 $padding: 50;
-@while $padding >= 0 {
+@while $padding >= 5 {
   .pt#{$padding}p {
     padding-top: #{$padding}px !important;
   }
-  $padding: $padding - 1;
+  $padding: $padding - 5;
 }
 
 $padding: 50;
-@while $padding >= 0 {
+@while $padding >= 5 {
   .pb#{$padding}p {
     padding-bottom: #{$padding}px !important;
   }
-  $padding: $padding - 1;
+  $padding: $padding - 5;
 }
 
 $padding: 50;
-@while $padding >= 0 {
+@while $padding >= 5 {
   .p#{$padding}p {
     padding: #{$padding}px !important;
   }
-  $padding: $padding - 1;
+  $padding: $padding - 5;
 }
 
 
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 8043f78..eceeb18 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -11,8 +11,17 @@
       <div class="float">
         <div :style="{opacity:isMove?0:1}" class="normal">
           <div class="toolbar mb10p">
-            <img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"
-                 @click.stop="$emit('goUserInfo')">
+            <div class="avatar-ctn mb15p">
+              <img class="avatar" src="../assets/img/icon/head-image.jpeg" alt=""
+                   @click.stop="$emit('goUserInfo')">
+              <transition name="fade">
+                <div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
+                  <img class="no" src="../assets/img/icon/add.png" alt="">
+                  <img class="yes" src="../assets/img/icon/ok-red.png" alt="">
+                </div>
+              </transition>
+
+            </div>
             <div class="love mb15p" @click.stop="loved($event)">
               <div>
                 <img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved">
@@ -22,17 +31,23 @@
                 <!--                <transition name="loved">-->
                 <!--                </transition>-->
               </div>
-              <span class="f14">{{ video.loves }}</span>
+              <span>{{ video.loves }}</span>
             </div>
             <div class="message mb15p" @click.stop="$emit('showComments')">
               <img src="../assets/img/icon/message.svg" alt="" class="message-image">
-              <span class="f14">{{ video.comments }}</span>
+              <span>{{ video.comments }}</span>
             </div>
             <div class="share mb35p" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
-              <span class="f14">{{ video.shared }}</span>
+              <span>{{ video.shared }}</span>
+            </div>
+            <div class="music-ctn">
+              <img class="music1" src="../assets/img/icon/home/music1.png" alt="">
+              <img class="music2" src="../assets/img/icon/home/music2.png" alt="">
+              <div class="music-bg">
+                <img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="$nav('/music')">
+              </div>
             </div>
-            <img src="../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="$nav('/music')">
           </div>
           <div class="content ml10p mb10p" @click.stop="goUserInfo()">
             <div class="name mb10p">@TTentau</div>
@@ -134,6 +149,7 @@ export default {
       width: 0,
       isPlaying: !this.disabled,
       isCommenting: false,
+      isAttention: false,
       isSharing: false,
       line: null,
       point: null,
@@ -154,10 +170,14 @@ export default {
       v.isMove ? this.move(v.e) : this.end(v.e)
     })
   },
-  unmounted() {
-    console.log('unmounted')
-  },
   methods: {
+    attention() {
+      let option = this.$refs['attention-option']
+      option.classList.add('attention')
+      setTimeout(() => {
+        this.isAttention = true
+      }, 1000)
+    },
     //划动到下一个视频
     swipingVideo() {
       let videos = this.$refs.video
@@ -224,9 +244,9 @@ export default {
       this.$stopPropagation(e)
     },
     end(e) {
-      setTimeout(()=>{
+      setTimeout(() => {
         this.isMove = false
-      },1000)
+      }, 1000)
       let video = this.$refs.video
       video.currentTime = this.currentTime
       video.play()
@@ -238,6 +258,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: transform 0.1s linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: scale(0);
+}
 .bg-video {
   position: relative;
   background: black;
@@ -282,30 +311,78 @@ export default {
         position: relative;
 
         .toolbar {
-          width: 40px;
+          //width: 40px;
           position: absolute;
           bottom: 0;
-          right: 20px;
+          right: 5px;
           color: #fff;
 
-          div {
-            text-align: center;
-          }
+          .avatar-ctn {
+            position: relative;
 
-          img {
-            width: 90%;
-            height: 90%;
-          }
+            .avatar {
+              width: 55px;
+              height: 55px;
+              border-radius: 50%;
+            }
+
+            .options {
+              position: absolute;
+              border-radius: 50%;
+              margin: auto;
+              left: 0;
+              right: 0;
+              bottom: -5px;
+              background: red;
+              //background: black;
+              width: 18px;
+              height: 18px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              transition: all 1s;
+
+              img {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                transition: all 1s;
+              }
+
+              .yes {
+                opacity: 0;
+                transform: rotate(-180deg);
+              }
+
+              &.attention {
+                background: white;
 
-          .head-image, .music {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
+                .no {
+                  opacity: 0;
+                  transform: rotate(180deg);
+                }
+
+                .yes {
+                  opacity: 1;
+                  transform: rotate(0deg);
+                }
+              }
+            }
           }
 
-          .love {
+          .love, .message, .share {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
             img {
+              width: 40px;
+              height: 40px;
+            }
 
+            span {
+              font-size: 11px;
             }
           }
 
@@ -313,8 +390,46 @@ export default {
             background: red;
           }
 
-          .music {
-            animation: animations 4s linear forwards infinite;
+          .music-ctn {
+            position: relative;
+
+            .music-bg {
+              background-image: linear-gradient(black, #424242, black);
+              border-radius: 50%;
+              width: 50px;
+              height: 50px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              animation: animations 5s linear forwards infinite;
+              //display: none;
+
+              .music {
+                //display: none;
+                width: 25px;
+                height: 25px;
+                border-radius: 50%;
+              }
+            }
+
+
+            .music1, .music2 {
+              //display: none;
+              position: absolute;
+              width: 18px;
+              height: 18px;
+              top: 10px;
+            }
+
+            .music1 {
+              animation: anim-music1 2s linear forwards infinite;
+            }
+
+            .music2 {
+              animation: anim-music1 2s linear forwards infinite;
+              animation-delay: 1s;
+            }
+
           }
 
           @keyframes animations {
@@ -325,6 +440,32 @@ export default {
               transform: rotate(360deg);
             }
           }
+          @keyframes anim-music1 {
+            0% {
+              transform: translate3d(0, 0, 0);
+              opacity: 0;
+            }
+            20% {
+              transform: translate3d(-8px, 0px, 0) rotate(30deg);
+              opacity: .3;
+            }
+            40% {
+              transform: translate3d(-16px, -5px, 0) rotate(15deg);
+              opacity: .5;
+            }
+            60% {
+              transform: translate3d(-24px, -15px, 0) rotate(0deg);
+              opacity: 1;
+            }
+            80% {
+              transform: translate3d(-32px, -30px, 0) rotate(-15deg);
+              opacity: 1;
+            }
+            100% {
+              transform: translate3d(-32px, -50px, 0) rotate(-30deg);
+              opacity: 0;
+            }
+          }
         }
 
         .content {
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 7f052c7..0bff876 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -1,218 +1,337 @@
 <template>
-    <div id="attention" >
-        <div class="items p10p">
-            <div class="item mb20p pb20p" v-for="(item,index) of items" :key="index" >
-                <div class="header mb10p">
-                    <img src="../../assets/img/icon/head-image.jpeg" alt="">
-                    <span class="ml5p">TTentau</span>
-                </div>
-                <div class="my-comment mb10p">
-                    最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <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/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
-                    <div class="music">
-                        <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
-                        <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
-                        <img src="../../assets/img/icon/play.svg" alt="" class="play">
-                        <img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false">
-                    </div>
-                </div>
-                <div class="location mb10p">
-                    <img src="../../assets/img/icon/location.svg" alt="">
-                    <span class="ml5p">东方明珠</span>
-                </div>
-                <div class="toolbar mb10p">
-                    <div class="item">
-                        <img src="../../assets/img/icon/love.svg" alt="">
-                        <img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
-                        <span class="count">555</span>
-                    </div>
-                    <div class="item">
-                        <img src="../../assets/img/icon/message.svg" alt="">
-                        <span class="count">555</span>
-                    </div>
-                    <div class="item">
-                        <img src="../../assets/img/icon/love.svg" alt="">
-                        <span class="count">555</span>
-                    </div>
-                    <div class="item">
-                        <img src="../../assets/img/icon/love.svg" alt="">
-                        <span class="count">555</span>
-                    </div>
-                </div>
-                <div class="hot-comment pr15p mb5p  oh">
-                    <div class="content pull-left ">
-                        <img src="../../assets/img/icon/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/icon/love-gray.svg" alt="" class="love-image">
-                        <img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
-                        <span class="f14 block">3453</span>
-                    </div>
-                </div>
-                <span class="time">11小时前</span>
+  <div id="attention">
+    <header>
+      <span>双流</span>
+      <div class="arrow"></div>
+    </header>
+    <div class="ad">
+      <div class="title">超值卖场 次日达</div>
+      <div class="good-ctn">
+        <div class="left">
+          <div class="left-title">
+            <span>限量秒杀</span>
+            <div>低至0.99元</div>
+          </div>
+          <div class="goods">
+            <div class="good">
+              <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+              <div class="name">每日坚果5包</div>
+              <div class="price">￥0.99</div>
             </div>
+            <div class="good">
+              <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+              <div class="name">每日坚果5包</div>
+              <div class="price">￥0.99</div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="goods">
+            <div class="good">
+              <div class="notice">
+                <div class="ad-name">低价疯抢</div>
+                <div class="ad-desc">统一方便面</div>
+              </div>
+              <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+            </div>
+            <div class="good">
+              <div class="notice">
+                <div class="ad-name">低价疯抢</div>
+                <div class="ad-desc">统一方便面</div>
+              </div>
+              <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="item" v-for="item in left">
+          <img class="poster" :src="item.src"/>
+          <div class="location">
+            <div class="top">
+              <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+              <div class="name">电子科技大学沙河校区</div>
+            </div>
+            <div class="bottom">
+              <div class="type">大学</div>
+              <div class="line"></div>
+              <div class="other">1399人想去</div>
+            </div>
+          </div>
         </div>
-        <Footer v-bind:init-tab="2"  style="position: fixed;" />
+      </div>
+      <div class="right">
+        <div class="item" v-for="item in right">
+          <img class="poster" :src="item.src"/>
+          <div class="location">
+            <div class="top">
+              <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+              <div class="name">电子科技大学沙河校区</div>
+            </div>
+            <div class="bottom">
+              <div class="type">大学</div>
+              <div class="line"></div>
+              <div class="other">1399人想去</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+    <Footer v-bind:init-tab="2" style="position: fixed;"/>
+  </div>
 </template>
 
 <script>
 
-    import Footer from '../../components/Footer.vue';
-
-    export default {
-        name: "Attention",
-        components: {
-            Footer
-        },
-        data(){
-            return {
-                items:[
-                    {},{},{}
-                ],
-                height:0,
-                width:0,
-                footerHeight:0
-            }
-        },
-        created() {
-            this.height = document.body.clientHeight;
-            this.width = document.body.clientWidth;
-        },
-        mounted() {
-        }
+//TODO 还差个点击，返回后，定位到当前item最高点
+import Footer from '../../components/Footer.vue';
+
+export default {
+  name: "Attention",
+  components: {
+    Footer
+  },
+  data() {
+    return {
+      items: [],
+      height: 0,
+      width: 0,
+      footerHeight: 0
+    }
+  },
+  created() {
+    this.height = document.body.clientHeight;
+    this.width = document.body.clientWidth;
+  },
+  computed: {
+    left() {
+      return this.items.filter((v, i) => {
+        return i % 2 === 0
+      })
+    },
+    right() {
+      return this.items.filter((v, i) => {
+        return i % 2 !== 0
+
+      })
     }
+  },
+  mounted() {
+    for (let i = 1; i < 12; i++) {
+      this.items.push({
+        src: require(`../../assets/img/poster/${i}.jpg`)
+      })
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
-    #attention {
-        position: fixed;
-        /*background: rgb(22，24，34);*/
-        /*background: #161822;*/
-        //抖音原色，感觉很暗
-        background: #2e3244;
-        color: #b8b9c1;
-        .items {
-            >.item {
-                border-bottom: 1px solid #494950;
-                .header {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    img {
-                        width: 40px;
-                        height: 40px;
-                        border-radius: 50%;
-                    }
-                }
-                .other-comment {
-                    display: none;
-                    background: #15161b;
-                    border-radius: 10px 10px 0 0;
-                }
-                .video-container {
-                    position: relative;
-                    width: 80%;
-                    video {
-                        border-radius: 10px 10px  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: flex-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: flex-start;
-                        align-items: center;
-                        float: left;
-                        img{
-                            height: 100%;
-                        }
-                        .count{
-                            margin-left: 5px;
-                        }
-                    }
-                }
-                .hot-comment {
-                    .content {
-                        float: left;
-                        width: 85%;
-                        .head-image {
-                            width: 40px;
-                            border-radius: 50%;
-                            float: left;
-                        }
-                        .comment-container {
-                            width: 85%;
-                            .time {
-                                color: gray;
-                            }
-                        }
-
-                    }
-                    .love {
-                        text-align: center;
-                        .love-image {
-                            width: 30px;
-                            border-radius: 50%;
-                        }
-                    }
-                }
+#attention {
+  /*background: rgb(22，24，34);*/
+  /*background: #161822;*/
+  //抖音原色，感觉很暗
+  $douyin-bg: #2e3244;
+  background: $douyin-bg;
+  color: #b8b9c1;
+
+  header {
+    font-size: 1.5rem;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    $arrow-width: 5px;
+
+    .arrow {
+      position: relative;
+      top: 3px;
+      left: 5px;
+      width: 0;
+      height: 0;
+      border-top: $arrow-width solid white;
+      border-right: $arrow-width solid transparent;
+      border-bottom: $arrow-width solid transparent;
+      border-left: $arrow-width solid transparent;
+    }
+  }
+
+  .ad {
+    padding: 10px;
+    color: white;
+
+    .title {
+      margin-bottom: 15px;
+      font-size: 1.8rem;
+      font-weight: bold;
+    }
+
+    .good-ctn {
+      display: flex;
+      justify-content: space-between;
+
+      .left, .right {
+        width: calc(50% - 3px);
+      }
+
+
+      .left {
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 5px;
+        background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
+
+
+        .left-title {
+          font-weight: bold;
+          font-size: 1.7rem;
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          div {
+            background: linear-gradient(to top right, #e37c7c, #bd5959);
+            padding: 0 4px 2px 4px;
+            border-radius: 3px;
+            font-size: 1rem;
+            font-weight: lighter;
+            margin-left: 5px;
+          }
+        }
+
+        .goods {
+          display: flex;
+          justify-content: space-between;
+
+          .good {
+            width: calc(50% - 5px);
+
+            .good-img {
+              width: 100%;
+              height: 50px;
+              border-radius: 5px;
+            }
+
+            .name {
+              margin-top: 5px;
+            }
+
+            .price {
+              font-size: 1rem;
+            }
+          }
+        }
+      }
+
+      .right {
+        .goods {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .good {
+            height: calc(50% - 3px);
+            border-radius: 5px;
+            box-sizing: border-box;
+            padding: 10px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
+
+            &:nth-child(2){
+              background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
             }
-            .tag {
-                color: #E6C346;
-                margin: 0 3px;
+
+            .notice {
+              display: flex;
+              justify-content: center;
+              flex-direction: column;
+              .ad-name {
+                font-weight: bold;
+              }
+
+              .ad-desc {
+                font-size: 1rem;
+                color: darkgray;
+              }
+            }
+
+            .good-img {
+              width: 50px;
+              height: 50px;
+              border-radius: 5px;
             }
+
+
+          }
+        }
+      }
+    }
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    overflow: auto;
+    background: black;
+    box-sizing: border-box;
+    padding: 0 3px;
+
+    .left, .right {
+      width: calc(50% - 1.5px);
+    }
+
+    .item {
+      width: 100%;
+      box-sizing: border-box;
+      margin-bottom: 3px;
+
+      .poster {
+        width: 100%;
+        max-height: 50vh;
+        display: block;
+      }
+
+      .location {
+        padding: 8px 10px 10px 10px;
+        background: $douyin-bg;
+
+        .top, .bottom {
+          font-size: 1.4rem;
+          display: flex;
+          align-items: center;
+
+          .logo {
+            height: 12px;
+            width: 12px;
+            margin-right: 8px;
+          }
+
+          .name {
+            color: white;
+          }
+
+          .line {
+            margin: 0 4px;
+            width: 1px;
+            height: .8rem;
+            background: gray;
+          }
+        }
+
+        .bottom {
+          margin-top: 2px;
+          font-size: 1rem;
         }
+      }
     }
+  }
+}
 
 </style>
diff --git a/src/pages/home/我的动态.vue b/src/pages/home/我的动态.vue
new file mode 100644
index 0000000..dd61a43
--- /dev/null
+++ b/src/pages/home/我的动态.vue
@@ -0,0 +1,266 @@
+<template>
+  <div id="attention">
+    <header>
+      <span>双流</span>
+      <div class="arrow"></div>
+    </header>
+    <div class="items p10p">
+      <div class="item mb20p pb20p" v-for="(item,index) of items" :key="index">
+        <div class="header mb10p">
+          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+          <span class="ml5p">TTentau</span>
+        </div>
+        <div class="my-comment mb10p">
+          最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <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/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
+          <div class="music">
+            <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
+            <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
+            <img src="../../assets/img/icon/play.svg" alt="" class="play">
+            <img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false">
+          </div>
+        </div>
+        <div class="location mb10p">
+          <img src="../../assets/img/icon/location.svg" alt="">
+          <span class="ml5p">东方明珠</span>
+        </div>
+        <div class="toolbar mb10p">
+          <div class="item">
+            <img src="../../assets/img/icon/love.svg" alt="">
+            <img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
+            <span class="count">555</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/message.svg" alt="">
+            <span class="count">555</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/love.svg" alt="">
+            <span class="count">555</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/img/icon/love.svg" alt="">
+            <span class="count">555</span>
+          </div>
+        </div>
+        <div class="hot-comment pr15p mb5p  oh">
+          <div class="content pull-left ">
+            <img src="../../assets/img/icon/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/icon/love-gray.svg" alt="" class="love-image">
+            <img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
+            <span class="f14 block">3453</span>
+          </div>
+        </div>
+        <span class="time">11小时前</span>
+      </div>
+    </div>
+    <Footer v-bind:init-tab="2" style="position: fixed;"/>
+  </div>
+</template>
+
+<script>
+
+import Footer from '../../components/Footer.vue';
+
+export default {
+  name: "Attention",
+  components: {
+    Footer
+  },
+  data() {
+    return {
+      items: [
+        {}, {}, {}
+      ],
+      height: 0,
+      width: 0,
+      footerHeight: 0
+    }
+  },
+  created() {
+    this.height = document.body.clientHeight;
+    this.width = document.body.clientWidth;
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#attention {
+  /*background: rgb(22，24，34);*/
+  /*background: #161822;*/
+  //抖音原色，感觉很暗
+  background: #2e3244;
+  color: #b8b9c1;
+
+  header {
+    font-size: 1.5rem;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    $arrow-width: 5px;
+
+    .arrow {
+      position: relative;
+      top: 3px;
+      left: 5px;
+      width: 0;
+      height: 0;
+      border-top: $arrow-width solid white;
+      border-right: $arrow-width solid transparent;
+      border-bottom: $arrow-width solid transparent;
+      border-left: $arrow-width solid transparent;
+    }
+  }
+
+  .items {
+    > .item {
+      border-bottom: 1px solid #494950;
+
+      .header {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+      }
+
+      .other-comment {
+        display: none;
+        background: #15161b;
+        border-radius: 10px 10px 0 0;
+      }
+
+      .video-container {
+        position: relative;
+        width: 80%;
+
+        video {
+          border-radius: 10px 10px 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: flex-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: flex-start;
+          align-items: center;
+          float: left;
+
+          img {
+            height: 100%;
+          }
+
+          .count {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .hot-comment {
+        .content {
+          float: left;
+          width: 85%;
+
+          .head-image {
+            width: 40px;
+            border-radius: 50%;
+            float: left;
+          }
+
+          .comment-container {
+            width: 85%;
+
+            .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/test.html b/src/test.html
index 5379a10..e453784 100644
--- a/src/test.html
+++ b/src/test.html
@@ -5,53 +5,25 @@
     <title>Title</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-        html, body {
-            padding: 0;
-            margin: 0;
-            width: 100%;
-            height: 100%;
-        }
+        .test {
+            width: 400px;
+            height: 600px;
 
-       .Me{
-           position: fixed;
-           font-size: 1.6rem;
-           width: 100%;
-           height: 100%;
-           overflow: hidden;
-       }
+        }
 
-       .wrapper{
-           position: relative;
-           display: flex;
-           width: 100%;
-           height: 100%;
-       }
-       .left{
-           left: 0;
-           top: 0;
-           position: absolute;
-           height: 100%;
-           width: 100%;
-           background: #333;
-           overflow-y: scroll;
-       }
+        img{
+            display: block;
+            width: 400px;
+            height: 600px;
+        }
 
-       .right{
-           top: 0;
-           left: 100%;
-           position: absolute;
-           height: 100%;
-           width: 70%;
-           color: white;
-           background: #2e3244;
-       }
     </style>
 </head>
 <body>
-<div class="Me">
-    <div class="wrapper">
-        <div class="left"></div>
-        <div class="right"></div>
+<div class="test">
+    <img class="poster" src="./assets/img/poster/1.jpg"/>
+    <div>
+        123
     </div>
 </div>
 </body>