From f905a3521bdb4cfdd5c97a878e727f2305c64d97 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 23 Sep 2021 23:49:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/add.png            | Bin 2836 -> 0 bytes
 src/components/Video.vue               |   2 +-
 src/pages/home/LivePage.vue            | 206 +++++++++++++++++++++++--
 src/pages/people/components/People.vue |   2 +-
 4 files changed, 197 insertions(+), 13 deletions(-)
 delete mode 100644 src/assets/img/icon/add.png

diff --git a/src/assets/img/icon/add.png b/src/assets/img/icon/add.png
deleted file mode 100644
index b24b5b25a66025cd5992eacf9c2bfda03c292dc2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2836
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

diff --git a/src/components/Video.vue b/src/components/Video.vue
index 370d160..9b0df63 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -18,7 +18,7 @@
                  @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="no" src="../assets/img/icon/add-light.png" alt="">
                 <img class="yes" src="../assets/img/icon/ok-red.png" alt="">
               </div>
             </transition>
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index 78342ad..3eddd10 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="LivePage">
     <div class="live-wrapper">
-      <img src="../../assets/img/poster/6.jpg" alt="">
+      <img src="../../assets/img/poster/11.jpg" alt="">
     </div>
     <div class="float">
       <div class="top">
@@ -64,12 +64,28 @@
             </div>
           </div>
           <div class="options">
-
+            <div class="input">
+              <span>说点什么</span>
+              <img src="../../assets/img/icon/home/voice.png" alt="">
+            </div>
+            <img src="../../assets/img/icon/home/more.png" alt="" class="more">
+            <img src="../../assets/img/icon/home/love.webp" alt="" class="more">
+            <img src="../../assets/img/icon/home/gift.webp" alt="" class="gift">
+          </div>
+        </div>
+        <div class="right">
+          <div class="avatar-wrapper" :class="{followed:isFollowed}">
+            <img src="../../assets/img/icon/avatar/2.png" alt="" class="avatar">
+            <div v-if="!isFollowed" @click.stop="attention" class="options" ref="attention-option">
+              <img class="no" src="../../assets/img/icon/add-light.png" alt="">
+              <img class="yes" src="../../assets/img/icon/ok-white.png" alt="">
+            </div>
+            <img v-if="isFollowed" src="../../assets/img/icon/home/followed.webp" alt="" class="follow">
           </div>
-          <base-button @click="t">点击</base-button>
         </div>
       </div>
     </div>
+
   </div>
 </template>
 <script>
@@ -85,27 +101,81 @@ export default {
   },
   data() {
     return {
-      list: [
-        '纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱',
-        'asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff'
-      ]
+      isFollowed: false,
+      list: [],
+      barrage: []
     }
   },
   computed: {},
   created() {
   },
+  mounted() {
+    nextTick(() => {
+
+      let page = new Dom('.LivePage')
+      console.log(page)
+
+      setInterval(() => {
+
+        let template = `<div class="barrage">
+      <div class="type">管理</div>
+      <div class="text">感谢老铁送的火箭</div>
+    </div>`
+        let barrage = new Dom().create(template)
+        console.log(barrage)
+        page.append(barrage)
+      }, 1000)
+    })
+  },
   methods: {
     t() {
       this.list.push('asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff')
-      nextTick(()=>{
+      nextTick(() => {
         let comments = this.$refs['comments']
         comments.scrollTop = comments.scrollHeight - comments.clientHeight
       })
+    },
+    attention() {
+      let option = this.$refs['attention-option']
+      option.classList.toggle('attention')
+      setTimeout(() => {
+        this.isFollowed = true
+      }, 1000)
     }
   }
 }
 </script>
 
+<style lang="less">
+.barrage {
+  position: fixed;
+  top: 50%;
+  transform: translateX(100vw);
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  animation: anim 5s linear;
+
+  @keyframes anim {
+    from {
+      transform: translateX(100vw);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+
+  }
+
+  .type {
+    padding: .1rem .6rem;
+    border: 1px solid white;
+    border-radius: 2rem;
+    margin-right: .5rem;
+  }
+
+}
+
+</style>
 <style scoped lang="less">
 @import "../../assets/scss/index";
 
@@ -119,10 +189,12 @@ export default {
   .live-wrapper {
     width: 100vw;
     height: 100vh;
+    background: black;
 
     img {
       width: 100vw;
       height: 100vh;
+      color: rgb(229, 229, 229);
     }
   }
 
@@ -132,7 +204,7 @@ export default {
     width: 100vw;
     height: 100vh;
 
-    @tag-bg: rgba(58, 58, 70, .3);
+    @tag-bg: rgba(58, 58, 70, 0.3);
 
     .top {
       display: flex;
@@ -273,12 +345,15 @@ export default {
       width: 100vw;
       box-sizing: border-box;
       padding: @padding-page;
+      padding-bottom: 1rem;
+      display: flex;
 
 
       .left {
-        width: 90%;
+        width: 87%;
 
         .comments {
+          margin-bottom: 1rem;
           overflow: auto;
           height: 20vh;
 
@@ -328,13 +403,122 @@ export default {
               font-size: 1.3rem;
               color: @text-color;
             }
-            .text{
+
+            .text {
               word-break: break-all;
             }
           }
         }
+
+        .options {
+          display: flex;
+          align-items: center;
+
+          .input {
+            flex: 1;
+            color: #a2a2a2;
+            font-size: 1.2rem;
+            border-radius: 1.5rem;
+            padding: .4rem 1rem;
+            background: @tag-bg;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            img {
+              width: 2rem;
+            }
+          }
+
+          .more {
+            margin-left: 1rem;
+            width: 2rem;
+            height: 2rem;
+            padding: .5rem;
+            background: @tag-bg;
+            border-radius: 50%;
+          }
+
+          .gift {
+            margin-left: 1rem;
+            width: 3.1rem;
+          }
+        }
+      }
+
+      .right {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+
+        @width: 3.5rem;
+
+        .avatar-wrapper {
+          background: linear-gradient(to bottom, #000000, @primary-btn-color);
+          border-radius: 2rem;
+          width: calc(@width + .2rem);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          &.followed {
+            background: linear-gradient(to bottom, rgba(240, 183, 31, .2), rgb(240, 183, 31));
+          }
+
+          .avatar {
+            width: @width;
+            border-radius: 50%;
+            background: white;
+            padding: .15rem;
+          }
+
+          .follow {
+            width: 3.2rem;
+            margin-top: .5rem;
+            margin-bottom: .5rem;
+          }
+
+          .options {
+            margin-top: .8rem;
+            margin-bottom: .5rem;
+            display: flex;
+            width: 2rem;
+            height: 2rem;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              position: absolute;
+              width: 1.8rem;
+              transition: all .8s;
+            }
+
+            .yes {
+              opacity: 0;
+              transform: rotate(-180deg);
+            }
+
+            &.attention {
+
+              .no {
+                opacity: 0;
+                transform: rotate(180deg);
+              }
+
+              .yes {
+                opacity: 1;
+                transform: rotate(0deg);
+              }
+            }
+          }
+
+        }
       }
     }
+
   }
+
 }
 </style>
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index de14b93..4c3ba7d 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="People">
-    <img v-if="people.type === 6" src="../../../assets/img/icon/add.png" alt="" class="add">
+    <img v-if="people.type === 6" src="../../../assets/img/icon/add-light.png" alt="" class="add">
     <img v-else src="../../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
     <div class="content">
       <div class="left">