diff --git a/public/index.html b/public/index.html
index 0391d2b..277192b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,8 +41,6 @@
     <script crossorigin="anonymous"
             integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
             src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
-    <script src="./jquery.danmu.min.js"></script>
-
 </head>
 <body>
 <noscript>
diff --git a/public/jquery.danmu.min.js b/public/jquery.danmu.min.js
new file mode 100644
index 0000000..a9ff718
--- /dev/null
+++ b/public/jquery.danmu.min.js
@@ -0,0 +1 @@
+!function(a){a.jQueryPlugin=function(b){a.fn[b]=function(c){var d=Array.prototype.slice.call(arguments,1);return this.length?this.each(function(){var e=a.data(this,b)||a.data(this,b,new cyntax.plugins[b](this,c)._init());"string"==typeof c&&(c=c.replace(/^_/,""),e[c]&&e[c].apply(e,d))}):void 0}}}(jQuery);var cyntax={plugins:{}};!function(){function a(){return(new Date).getTime()}var b=jQuery,c="jQuery.pause",d=1,e=b.fn.animate,f={};b.fn.animate=function(g,h,i,j){var k=b.speed(h,i,j);return k.complete=k.old,this.each(function(){this[c]||(this[c]=d++);var h=b.extend({},k);e.apply(b(this),[g,b.extend({},h)]),f[this[c]]={run:!0,prop:g,opt:h,start:a(),done:0}})},b.fn.pause=function(){return this.each(function(){this[c]||(this[c]=d++);var e=f[this[c]];e&&e.run&&(e.done+=a()-e.start,e.done>e.opt.duration?delete f[this[c]]:(b(this).stop().stop().stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),b(this).stop(),e.run=!1))})},b.fn.resume=function(){return this.each(function(){this[c]||(this[c]=d++);var g=f[this[c]];g&&!g.run&&(g.opt.duration-=g.done,g.done=0,g.run=!0,g.start=a(),e.apply(b(this),[g.prop,b.extend({},g.opt)]))})}}(),function(a){cyntax.plugins.timer=function(b,c){this.$this=a(b),this.options=a.extend({},this.defaults,c),this.timer_info={id:null,index:null,state:0}},cyntax.plugins.timer.prototype={defaults:{delay:1e3,repeat:!1,autostart:!0,callback:null,url:"",post:""},_init:function(){return this.options.autostart&&(this.timer_info.state=1,this.timer_info.id=setTimeout(a.proxy(this._timer_fn,this),this.options.delay)),this},_timer_fn:function(){"function"==typeof this.options.callback?a.proxy(this.options.callback,this.$this).call(this,++this.timer_info.index):"string"==typeof this.options.url&&(ajax_options={url:this.options.url,context:this,type:"string"==typeof this.options.post&&""!=typeof this.options.post==""?"POST":"GET",success:function(a){this.$this.html(a)}},"string"==typeof this.options.post&&""!=typeof this.options.post&&(ajax_options.data=this.options.post),a.ajax(ajax_options)),this.options.repeat&&1==this.timer_info.state&&("boolean"==typeof this.options.repeat||parseInt(this.options.repeat)>this.timer_info.index)?this.timer_info.id=setTimeout(a.proxy(this._timer_fn,this),this.options.delay):this.timer_id=null},start:function(){0==this.timer_info.state&&(this.timer_info.index=0,this.timer_info.state=1,this.timer_id=setTimeout(a.proxy(this._timer_fn,this),this.options.delay))},stop:function(){1==this.timer_info.state&&this.timer_info.id&&(clearTimeout(this.timer_info.id),this.timer_id=null),this.timer_info.state=0},pause:function(){1==this.timer_info.state&&this.timer_info.id&&clearTimeout(this.timer_info.id),this.timer_info.state=0},resume:function(){this.timer_info.state=1,this.timer_id=setTimeout(a.proxy(this._timer_fn,this),this.options.delay)}},a.jQueryPlugin("timer")}(jQuery),function(a){function b(b,d){return this.each(function(){var e=a(this),f=a.extend({},c.DEFAULTS,"object"==typeof b&&b),g=e.data("danmu"),h="string"==typeof b?b:0/0;g||e.data("danmu",g=new c(this,f)),h&&g[h](d)})}var c=function(b,c){this.$element=a(b),this.options=c,this.id=a(b).attr("id"),a(b).data("nowTime",0),a(b).data("danmuList",c.danmuList),a(b).data("opacity",c.opacity),a(b).data("paused",1),a(b).data("topSpace",0),a(b).data("bottomSpace",0),this.$element.css({position:"absolute",left:this.options.left,top:this.options.top,width:this.options.width,height:this.options.height,"z-index":this.options.zindex,color:c.defaultFontColor,overflow:"hidden"});var d=this;d.height=this.$element.height(),d.width=this.$element.width(),d.speed=1e3/c.speed,this.launched=[],this.preTime=0;var e=this.options.maxCountInScreen,f=this.options.maxCountPerSec,g=0,h=0;this.rowCount=parseInt(d.height/c.FontSizeBig),d.options.SubtitleProtection&&(d.rowCount=d.rowCount-3),this.rows=[],this.initRows=function(a){for(var b=0;b<a.rowCount;b++)a.rows[b]=0},this.initRows(this),d.getRow=function(a){for(var b=0;0!==a.rows[b];)if(b+=1,b>=a.rowCount){a.initRows(a),b=0;break}return b},d.checkRow=function(b){for(var c in b.rows)0!==b.rows[c]&&"undefined"!=typeof a("#"+b.rows[c]).position()&&a("#"+b.rows[c]).position().left<b.$element.width()-a("#"+b.rows[c]).width()&&(b.rows[c]=0)},a("<div class='danmakuTimer'></div>").appendTo(this.$element),this.$timer=a(".danmakuTimer"),this.$timer.timer({delay:100,repeat:c.sumTime,autostart:!1,callback:function(i){setTimeout(function(){d.options.danmuLoop&&a(b).data("nowTime")>=a(b).data("sumTime")&&a(b).data("nowTime",0),a(b).data("nowTime",a(b).data("nowTime")+1),d.height=a(b).height(),d.width=a(b).width(),Math.abs(a(b).data("nowTime")-(d.preTime+1))>10&&(d.launched=[]),d.preTime=a(b).data("nowTime");var j=d.rowCount;if(d.rowCount=parseInt(d.height/c.FontSizeBig),setTimeout(d.checkRow(d),0),d.options.SubtitleProtection&&(d.rowCount=d.rowCount-3),0!==j&&d.rowCount!==j&&d.initRows(d),h=0,a(b).data("danmuList")[a(b).data("nowTime")]&&d.launched.indexOf(a(b).data("nowTime"))<0){for(var k=a(b).data("nowTime"),l=a(b).data("danmuList")[k],m=l.length-1;m>=0;m--){setTimeout(d.checkRow(d),0);var n="<span class='danmaku' id='"+d.id+"tempDanmaku'></span>";a(b).append(n);var o=l[m];if(a("#"+d.id+"tempDanmaku").text(o.text).css({color:o.color,"text-shadow":" 0px 0px 2px #000000","-moz-opacity":a(b).data("opacity"),opacity:a(b).data("opacity"),"white-space":"nowrap","font-weight":"bold","font-family":"SimHei","font-size":c.FontSizeBig}),o.color<"#777777"&&a("#"+d.id+"tempDanmaku").css({"text-shadow":" 0px 0px 2px #FFFFFF"}),o.hasOwnProperty("isnew")&&a("#"+d.id+"tempDanmaku").css({border:"2px solid "+o.color}),0==o.size&&a("#"+d.id+"tempDanmaku").css("font-size",c.fontSizeSmall),0==o.position){var p=d.id+"fly"+parseInt((new Date).getTime()).toString();if(a("#"+d.id+"tempDanmaku").attr("id",p),e>=g&&f>=h){d.checkRow(d);var q=d.getRow(d);d.rows[q]=p,o.row=q;var r=q*c.FontSizeBig;o.width=a("#"+p).width();var s=a("#"+d.id).width();a("#"+p).css({width:a("#"+p).width(),position:"absolute",top:r,left:s});var t=(a(b).width()+400)/d.speed;g++,h++,a("#"+p).animate({left:-(a("#"+p).width()+400)},t,function(){a(this).remove(),g--,h--})}else a("#"+p).remove()}else if(1==o.position){var u=d.id+"top"+parseInt(1e4*Math.random()).toString();a("#"+d.id+"tempDanmaku").attr("id",u),a("#"+u).css({width:"100%","text-align":"center",position:"absolute",top:a(b).data("topSpace"),left:"0"}),a(b).data("topSpace",a(b).data("topSpace")+c.FontSizeBig),a("#"+u).fadeTo(c.topBottomDanmuTime,a(b).data("opacity"),function(){a(this).remove(),a(b).data("topSpace",a(b).data("topSpace")-c.FontSizeBig)})}else if(2==o.position){var v=d.id+"bottom"+parseInt(1e4*Math.random()).toString();a("#"+d.id+"tempDanmaku").attr("id",v),a("#"+v).css({width:c.width,left:"0","text-align":"center",position:"absolute",bottom:0+a(b).data("bottomSpace")}),a(b).data("bottomSpace",a(b).data("bottomSpace")+c.FontSizeBig),a("#"+v).fadeTo(c.topBottomDanmuTime,a(b).data("opacity"),function(){a(this).remove(),a(b).data("bottomSpace",a(b).data("bottomSpace")-c.FontSizeBig)})}l[m]=o}a(b).data("danmuList")[k]=l}d.launched.push(a(b).data("nowTime")),i==c.sumTime&&c.isLoop&&(d.$timer.timer("stop"),d.$timer.timer("start"))})}})};c.DEFAULTS={left:0,top:0,height:360,width:640,zindex:100,speed:8e3,sumTime:65535,danmuLoop:!1,danmuList:{},defaultFontColor:"#FFFFFF",fontSizeSmall:16,FontSizeBig:24,opacity:"0.9",topBottomDanmuTime:6e3,SubtitleProtection:!1,positionOptimize:!1,maxCountInScreen:40,maxCountPerSec:10},c.prototype.danmuStart=function(){this.$timer.timer("start"),this.$element.data("paused",0)},c.prototype.danmuStop=function(){this.$timer.timer("stop"),a("#"+this.id+" .danmaku").remove(),nowTime=0,this.$element.data("paused",1),this.$element.data("nowTime",0)},c.prototype.danmuPause=function(){this.$timer.timer("pause"),a("#"+this.id+" .danmaku").pause(),this.$element.data("paused",1)},c.prototype.danmuResume=function(){this.$timer.timer("resume"),a("#"+this.id+" .danmaku").resume(),this.$element.data("paused",0)},c.prototype.danmuHideAll=function(){a("#"+this.id+" .danmaku").css({opacity:0}),this.initRows(this)},c.prototype.setTime=function(b){a("#"+this.id+" .danmaku").remove(),this.$element.data("nowTime",b)},c.prototype.setOpacity=function(b){a("#"+this.id+" .danmaku").css("opacity",b),this.$element.data("opacity",b)},c.prototype.addDanmu=function(a){if(a instanceof Array)for(var b in a)this.$element.data("danmuList")[a[b].time]?this.$element.data("danmuList")[a[b].time].push(a[b]):(this.$element.data("danmuList")[a[b].time]=[],this.$element.data("danmuList")[a[b].time].push(a[b]));else this.$element.data("danmuList")[a.time]?this.$element.data("danmuList")[a.time].push(a):(this.$element.data("danmuList")[a.time]=[],this.$element.data("danmuList")[a.time].push(a))},a.fn.danmu=b,a.fn.danmu.Constructor=c}(jQuery);
\ No newline at end of file
diff --git a/src/assets/img/icon/home/followed.webp b/src/assets/img/icon/home/followed.webp
new file mode 100644
index 0000000..8450d45
Binary files /dev/null and b/src/assets/img/icon/home/followed.webp differ
diff --git a/src/assets/img/icon/home/gift.webp b/src/assets/img/icon/home/gift.webp
new file mode 100644
index 0000000..4db6ea4
Binary files /dev/null and b/src/assets/img/icon/home/gift.webp differ
diff --git a/src/assets/img/icon/home/hcm.webp b/src/assets/img/icon/home/hcm.webp
new file mode 100644
index 0000000..344a682
Binary files /dev/null and b/src/assets/img/icon/home/hcm.webp differ
diff --git a/src/assets/img/icon/home/hy4.webp b/src/assets/img/icon/home/hy4.webp
new file mode 100644
index 0000000..0ba584c
Binary files /dev/null and b/src/assets/img/icon/home/hy4.webp differ
diff --git a/src/assets/img/icon/home/love.webp b/src/assets/img/icon/home/love.webp
new file mode 100644
index 0000000..1efebe1
Binary files /dev/null and b/src/assets/img/icon/home/love.webp differ
diff --git a/src/assets/img/icon/home/more.png b/src/assets/img/icon/home/more.png
new file mode 100644
index 0000000..ca0ef9c
Binary files /dev/null and b/src/assets/img/icon/home/more.png differ
diff --git a/src/assets/img/icon/home/voice.png b/src/assets/img/icon/home/voice.png
new file mode 100644
index 0000000..ea4e6e0
Binary files /dev/null and b/src/assets/img/icon/home/voice.png differ
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index 5ca0b60..8f4fa5c 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="LivePage">
+  <div class="LivePage" ref="page">
     <div class="live-wrapper">
       <img src="../../assets/img/poster/11.jpg" alt="">
     </div>
@@ -85,8 +85,9 @@
         </div>
       </div>
     </div>
-    <div id="danmu"></div>
 
+
+    <!--    <base-button @click="sendGift">点击</base-button>-->
   </div>
 </template>
 <script>
@@ -97,64 +98,123 @@ import {nextTick} from "vue";
 export default {
   name: "LivePage",
   components: {BaseButton},
-  props: {
-    modelValue: false
-  },
+  props: {},
   data() {
     return {
       isFollowed: false,
-      list: [],
-      barrage: []
+      list: [
+        'asdfasdf',
+        'asdfasdf',
+        'asdfasdf',
+      ],
+      barrage: [],
+      barrageTemplate: () => {
+        return `
+        <div class="barrage">
+          <div class="type">管理</div>
+          <div class="text">感谢老铁送的火箭</div>
+        </div>
+        `
+      },
+      userJoinedTemplate: () => {
+        let src = require('../../assets/img/icon/home/level.webp')
+        return `
+        <div class="user-joined">
+          <div class="level">
+            <div class="wrapper">
+              <img src="${src}" alt="">
+              <span>30</span>
+            </div>
+          </div>
+          <span class="name">嘻嘻哈哈</span>
+          <span class="text">加入了直播间</span>
+        </div>
+        `
+      },
+      sendGiftTemplate: () => {
+        let avatar = require('../../assets/img/icon/avatar/3.png')
+        let gift = require('../../assets/img/icon/home/love.webp')
+        return `
+        <div class="send-gift">
+          <div class="left">
+            <img src="${avatar}" alt="" class="avatar">
+            <div class="desc">
+              <div class="name">哈哈哈哈哈哈哈哈哈</div>
+              <div class="sendto">
+                <span class="send">送</span>
+                <span class="to">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span>
+              </div>
+            </div>
+            <div class="gift-wrapper">
+              <img src="${gift}" alt="" class="gift-icon">
+            </div>
+          </div>
+          <div class="right">
+            x339
+          </div>
+        </div>
+        `
+      },
+      page: null,
     }
   },
   computed: {},
   created() {
   },
   mounted() {
-    nextTick(() => {
-      $("#danmu").danmu({
-        height: 360,  //弹幕区高度
-        width: 300,   //弹幕区宽度
-        zindex :100,   //弹幕区域z-index属性
-        speed:7000,      //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间（毫秒）
-        sumTime:65535,   //弹幕流的总时间
-        danmuLoop:false,   //是否循环播放弹幕
-        defaultFontColor:"#FFFFFF",   //弹幕的默认颜色
-        fontSizeSmall:16,     //小弹幕的字号大小
-        FontSizeBig:24,       //大弹幕的字号大小
-        opacity:"0.9",			//默认弹幕透明度
-        topBottonDanmuTime:6000,   // 顶部底部弹幕持续时间（毫秒）
-        SubtitleProtection:false,     //是否字幕保护
-        positionOptimize:false,         //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分
-
-        maxCountInScreen: 40,   //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。
-        maxCountPerSec: 10      //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。
-      });
-      $("#danmu").danmu("addDanmu",[
-        { text:"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
-        ,{ text:"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
-        ,{ text:"这是底部弹幕" , color:"red" ,size:1,position:2,time:3}
-      ])
-      $('#danmu').danmu('danmuStart');
-      //
-    //   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)
-    })
+    this.page = this.$refs.page
+    setInterval(async () => {
+      this.sendGift()
+      await this.$sleep(300)
+      this.sendGift()
+      this.joinUser()
+    }, 3000)
+    setInterval(async () => {
+      this.sendBarrage()
+    }, 5100)
+    // setInterval(async () => {
+    //   this.sendComment()
+    // }, 500)
   },
   methods: {
-    t() {
-      this.list.push('asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff')
+    sendGift() {
+      let page = new Dom(this.page)
+      let sendGift = new Dom().create(this.sendGiftTemplate())
+      sendGift.on('animationend', () => {
+        sendGift.remove()
+      })
+      let oldSendGift = new Dom('.send-gift')
+      let top = document.body.clientHeight * .6
+      if (oldSendGift.els.length !== 0) {
+        top = sendGift.removePx(oldSendGift.css('top')) - 70
+      }
+      sendGift.css('top', top)
+      page.append(sendGift)
+    },
+    joinUser() {
+      let page = new Dom(this.page)
+      let user = new Dom().create(this.userJoinedTemplate())
+      user.on('animationend', () => {
+        user.remove()
+      })
+      page.append(user)
+    },
+    sendBarrage() {
+      let page = new Dom(this.page)
+      let barrage = new Dom().create(this.barrageTemplate())
+      barrage.on('animationend', () => {
+        barrage.remove()
+      })
+      let oldBarrages = new Dom('.barrage')
+      let top = document.body.clientHeight * .35
+      if (oldBarrages.els.length !== 0) {
+        top = barrage.removePx(oldBarrages.css('top')) + 20
+      }
+      barrage.css('top', top)
+      page.append(barrage)
+    },
+    sendComment() {
+      this.list.push('评论评论评论评论评论评论评论评论评论评论' + this.list.length)
       nextTick(() => {
         let comments = this.$refs['comments']
         comments.scrollTop = comments.scrollHeight - comments.clientHeight
@@ -172,6 +232,84 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../assets/scss/index";
+
+.send-gift {
+  position: fixed;
+  top: 63vh;
+  left: 1.5rem;
+  display: flex;
+  align-items: flex-end;
+  animation: send-gift-anim 2s linear;
+
+  @keyframes send-gift-anim {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    10% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    80% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(0);
+    }
+  }
+
+  .left {
+    background: linear-gradient(to right, @primary-btn-color, rgba(252, 47, 86, .2));
+    padding: .5rem;
+    border-radius: 5rem;
+    display: flex;
+    align-items: center;
+
+    .avatar {
+      margin-right: .5rem;
+      width: 4rem;
+      border-radius: 50%;
+    }
+
+    .desc {
+      width: 20vw;
+
+      .name, .sendto {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .name {
+        font-size: 1.4rem;
+      }
+
+      .sendto {
+        font-size: 1.2rem;
+        color: yellow;
+      }
+
+      .to {
+        color: yellow;
+      }
+    }
+
+    .gift-icon {
+      width: 4rem;
+    }
+
+  }
+
+  .right {
+    font-size: 2.3rem;
+    font-weight: bold;
+    font-style: oblique;
+  }
+}
+
 .barrage {
   position: fixed;
   top: 50%;
@@ -188,7 +326,6 @@ export default {
     to {
       transform: translateX(-100%);
     }
-
   }
 
   .type {
@@ -200,6 +337,70 @@ export default {
 
 }
 
+.user-joined {
+  @tag-bg: rgba(58, 58, 70, 0.3);
+  font-size: 1.2rem;
+  position: absolute;
+  top: 70vh;
+  left: 1.5rem;
+  padding: .4rem .8rem;
+  border-radius: 2rem;
+  background: rgba(115, 114, 181, .7);
+  margin-bottom: .5rem;
+  animation: user-joined-anim 3s linear;
+
+  @keyframes user-joined-anim {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    10% {
+      opacity: 1;
+      transform: translateX(3rem);
+    }
+    90% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-100%);
+    }
+  }
+
+  @text-color: rgb(164, 234, 253);
+
+  .level {
+    display: inline-block;
+
+    .wrapper {
+      display: flex;
+      @color: rgb(130, 133, 185);
+      align-items: center;
+      font-size: 1rem;
+      border-radius: 1rem;
+      margin-right: 0.5rem;
+      padding: 0 .6rem;
+      background: @color;
+
+      img {
+        margin-right: 0.3rem;
+        width: 1.2rem;
+      }
+    }
+  }
+
+  .name {
+    margin-right: 0.5rem;
+    font-size: 1.3rem;
+    color: @text-color;
+  }
+
+  .text {
+    word-break: break-all;
+  }
+}
+
 </style>
 <style scoped lang="less">
 @import "../../assets/scss/index";
diff --git a/src/utils/dom.js b/src/utils/dom.js
index b15a644..c785680 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -31,7 +31,7 @@ export default class Dom {
 
   create(template) {
     let tempNode = document.createElement('div');
-    tempNode.innerHTML = template;
+    tempNode.innerHTML = template.trim();
     this.els = [tempNode.firstChild]
     return this;
   }
@@ -62,7 +62,7 @@ export default class Dom {
     if (args.length === 1) {
       //情况一：获取样式
       if (typeof args[0] === 'string') {
-        return window.getComputedStyle(this.els[0], null)[args[0]]
+        return window.getComputedStyle(this.els[this.els.length - 1], null)[args[0]]
         // return globalMethods.$getCss2
         // return this.els[0].style[args[0]]
       } else {
@@ -122,8 +122,11 @@ export default class Dom {
       if (typeof value === 'number') {
         return value + 'px'
       }
-    } else {
-      return value
     }
+    return value
+  }
+
+  removePx(val) {
+    return parseInt(val)
   }
 }
\ No newline at end of file
