优化

src/components/livedModel/livedControls.vue

@@ -39,7 +39,8 @@
         <div class="shareIcon">
           <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwElEQVR4Xu2aS6hNURjH//+RgYGRKAMDr1tmFJGBSxmIjGTgKq/rUURi5qKQkhKlLt1IHkl05VUG7r3lkW4MPMIVRXkNFMqAqL++2len45y99mPtc/bu7FWnc2qv9X3f/7fX41trHaLFC1tcP0oAZQ9ocQLlEGjxDlBOguUQKIdAixPI1RCQ1EbyZSPfSW4ASHoGYCqABwC2kBxsBIhcAJB0CsDKCsGfAKwleTNrCHkB0A9gbpXY3wDWkDyTJYQ8AxjWvY3k4awgFAGAad9PcmcWEIoCwLQfJ7nBN4QiATDtl22yJPnDF4iiATDdAwGEdz4gFBGA6bacwXrCo7QQmg5A0iQAJ2osgy5tliusInnLVTHsecMBSBoHYAaAmcG3/R6ZUITlCgbhXML2jTsPkDQdwLrgkzTeeu22kjySxGjmPSBj4ZWa95HsigshMwCSxgDYHnzixpW0fjfJjXEaZwJAkiUsJn5CnGA81b0EoIPkryj2vAKQNA3AAQALojjPsI5trlaQ/ODy4Q2ApIUAzgMY5XLaoOdPAwiPM18GJa0H0N0gYXHcWK5gPeF2vUape4CkGwDs7ee1WK6wjGRvrQBTAZB0BcCSvCqviOsNyYleAUg6CmBzAcRbiAMk270BkGTCDUBRSjtJ20X+V2IPAUnzANSdVHJIZArJV14mQUkjAPQBmJ1DodUhfQcwluRPb8ugpIMAdhRA/BDJtihxRh4CkhYDuBrFaJPr9JGcHzWGOADs4KHZKa5L12mSlRcsrvrRzgMkLQdw1mmtuRX2ktwVN4RIPUDSfQCz4hpvYP1Okj1J/DkBSOoA4Pt66huA5wCeADC4qxOcCZrePwAWpTkXjALgguXSSegGbT4HS6cJfQFgsPpcX1Ktu0GXy/c2J5E0m4lLKIDgAHMowaGlTZj3APSTvOuKLgGAhwAsu0t9QeICEGeba/tu2xz1kgzdg1cDiQngOklbkr0UF4BrNsYcnu4AOEQycY4QA0APyU4vygMjdQFIGg/gbYizj4Hw1FfXEQEkOvV1wQoDEDb7HwvEhwFy+f73PAKATSTNp/cSBuAigKU1PNq/Nk76jCQEwFe7SCFpJ72ZlDAANvtPrvI6h6TN7l5LHQC2vJl45yqSJpgwAMP/2hq2P5rklzTO6rWVtAfA7ornlheY+NdZ+Ku0GQbAgrIZ18a5HSpa4pFZkWSriN0f2tDr8rHGRwnWmQlGMVLkOiWAIr89H7GXPcAHxSLbKHtAkd+ej9jLHuCDYpFtlD2gyG/PR+wt3wP+AsW7I1AzjlUOAAAAAElFTkSuQmCC" alt="">
         </div>
-        <div class="heardIcon" @click="addLike(1)">
+        <div class="heardIcon">
+          <div class="clickEl" @click="addLike(1)"></div>
           <img class="like" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADu0lEQVR4Xu2aTYhOURjH//+VspRSksiKKRsjWShT2FE2jK80xAj5CpHkI8nkm8aYwZiGGTORDQsKzcpqZomtmixsWCnZPHpypl5v8957zrnnfrzve596N+99znP+z+8+5957PogmNzZ5/igBlBXQ5ATKIdDkBVA+BMshkHQIiMhiAGsBLAIwx/y+A9DfJwAvSP7w6UdEFgBYDaClIvYvE1vjPyI56RN7qo13BYhIO4AjAFZYCBgCMELytYUvHGOPABiyjV3dvzMAEVkK4DQABeBqrwD01RKbZuxaQp0AiMhmADcAzHXNvMr/Fsmjlf+lGTtKqzUAETkP4FzCxCubvyOpzw4t+dRix+m1AiAiXQBOxgXzuK6Jq4aQYKdkXCGpQzXSYgGIyA4Ag3GBCnr9AkmFXNNsAIwDWFbQBG1ktZKc8HoIisheAL02vRTYR986nb4APgJYWeDkbKUtJPl1OueaQ0BE5gFI9JVlqy4Dvw6SA64AtgAYzkBcFl0MkOxwBXAVwPEs1GXQxzjJ5a4A9NWnr8BGsEmS810BvAWwrhGyB/CH5AxXAC8BbGwQAD9JznIF0ANgX4MA+EJyiSuA0BOUPFmOkWxzBaAfQPoh1AhWc04QORcQkW8B5v5FANhGcsypAtRZRHQeoPOBerYJkq21EoirAJ0F6mywnq2TZJ8XgAaogsi7r/nZrAfMBvCmDtcEfqtmkp+jyjcWgKmCVQbCzDoaCy1xyVtVwFTCIrIJwGidAFhD8r2NVqsKqICgewHPbALn6LOBpO4/WJkTADMctupOjFX07J3aSTpVqTMAA2E7gCfZ5xfZ4y6Sj101eQEwEHYCmHaZyVVEAP8DJO/5xPEGYCDoMlO/T8cB25wgec03XiIABsJuAA99BSRsd47kxSQxEgMwEPborm8SIR5tu0ie8mj3X5MgAAwE3Xy4n1SQZfs7JA9b+ka6BQNgIOwH0B1CWESMbpIHQ/URFICBoOLuhhJYFaeHpEIOZsEBGAiHANwOpvJfoF6SwdcoUwFgIOj5oZuBIDwgmcrCTGoADIRjAK4nhNBPUl+1qViqAAwE3V7TbTYfq7mn5xNsujapAzAQ9HiNHrNxsUGS+rmdqmUCwEDQ8zqXLbN5SjKTfcnMABgIZwBcioEwTHKbJajEbpkCMBDOAqj1/T5K0ucApjeIzAEYCHosrvr01nOSuuyWqeUCwEDQMb4egB5+/kAylwWW3ABkepsjOisBFOVO5KWjrIC8yBel37ICinIn8tJRVkBe5IvS71/x8QxQBHuXTgAAAABJRU5ErkJggg==" alt="">
           <p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
           <div class="box">
@@ -55,11 +56,13 @@
         </div>
       </template>
       <template v-else>
-        <div class="sendOut">
+        <div class="sendOut" :style="{'bottom':getBottom}">
           <input
             class="sendIpt"
+            :adjust-position="false"
             :focus="getFocus"
             type="text"
+            @focus="onFocus"
             @blur="onblur"
             v-model="sendVal"
             placeholder="和主播说点什么吧~"
@@ -106,7 +109,8 @@ export default {
       isSend: false, //显示评论输入框
       sendVal: "", //输入内容
       getFocus: false, //获取焦点
-      imgAni: false //给点赞元素加动画
+      imgAni: false, //给点赞元素加动画
+      getBottom:0,//动态绑定输入框位置
     };
   },
   components: {
@@ -243,6 +247,10 @@ export default {
         this.sendVal = "";
       }, 300);
     },
+    // 获取焦点
+    onFocus(e){
+      this.getBottom=(e.mp.detail.height-10)+'px';
+    },
     // 点击发送留言
     toSend() {
       console.log("点击按钮-------------------200");
@@ -266,7 +274,7 @@ export default {
   display: flex;
 }
 .livedControls {
-  position: absolute;
+  position: fixed;
   bottom: 20px;
   left: 0;
   width: 100vw;
@@ -351,6 +359,14 @@ export default {
       }
     }
     .heardIcon {
+      .clickEl{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 99;
+      }
       .like {
         position: absolute;
         top: 0;
@@ -359,10 +375,10 @@ export default {
       }
       .heardNum {
         text-align: center;
-        transform: translateY(-18px);
+        transform: translateY(-20px);
         background: rgba(#e60012, 0.5);
         border-radius: 8px;
-        padding: 1px 2px;
+        padding: 0 2px;
         font-size: 12px;
         color: #fff;
         min-width: 30px;
@@ -419,20 +435,21 @@ export default {
       }
     }
     .sendOut {
+      position: absolute;
+      bottom: 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
       background: rgba(#000, 0.4);
-      padding: 0 6px;
-      width: 100%;
+      width: 96vw;
       height: 40px;
       border-radius: 40px;
       line-height: 40px;
       font-size: 16px;
       .sendIpt {
-        width: 60vw;
+        width: 70vw;
         color: #999;
-        padding-left: 10px;
+        margin-left: 10px;
       }
       .send {
         color: #fff;
@@ -442,6 +459,7 @@ export default {
         line-height: 30px;
         border-radius: 30px;
         background: linear-gradient(to right, #ff877d, #fb566d);
+        margin-right: 6px;
       }
       .noSendVal {
         background: #ababa9;