添加语音通话

src/pages/message/chat/Chat.vue

@@ -8,7 +8,8 @@
           <span>zzzz</span>
         </div>
         <div class="right">
-          <img style="transform: scale(1.1)" src="../../../assets/img/icon/message/video-white.png" alt="">
+          <img @click="isShowAudioCall = true" style="transform: scale(1.1)"
+               src="../../../assets/img/icon/message/video-white.png" alt="">
           <img src="../../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat/detail')">
         </div>
       </div>
@@ -120,7 +121,7 @@
     </div>
 
     <!--  红包  -->
-    <transition name="tooltip">
+    <transition name="scale">
       <div class="red-packet" v-if="isShowOpenRedPacket">
         <Mask @click="isShowOpenRedPacket = false"/>
         <div class="content">
@@ -160,6 +161,48 @@
     </transition>
 
     <Loading v-if="loading"/>
+
+    <div class="call-float">
+      <!--      <span>对方手机可能不在身边，建议稍后再试</span>-->
+      <!--      <span>对方无应答</span>-->
+      <img src="@/assets/img/icon/message/chat/call-float.png" alt="">
+      <span>呼叫中</span>
+    </div>
+
+    <transition name="scale">
+      <div class="audio-call" v-if="isShowAudioCall">
+        <div class="float">
+          <div class="header">
+            <img @click="isShowAudioCall = false" src="../../../assets/img/icon/message/chat/narrow.png" alt=""
+                 class="left">
+            <div class="center">
+              <img src="../../../assets/img/icon/avatar/2.png" alt="" class="avatar">
+              <span>等待对方接听...</span>
+            </div>
+            <div class="right">
+              <div class="option">
+                <img src="../../../assets/img/icon/message/chat/disabled-camera.png" alt="">
+                <span>摄像头</span>
+              </div>
+              <div class="option">
+                <img src="../../../assets/img/icon/message/chat/able-volume.png" alt="">
+                <span>免提</span>
+              </div>
+              <div class="option">
+                <back mode="light" img="back" class="shrink"/>
+                <!--              <img src="../../../assets/img/icon/message/chat/narrow.png" alt="">-->
+              </div>
+            </div>
+          </div>
+          <img src="../../../assets/img/icon/avatar/2.png" alt="" class="big-avatar">
+          <div class="footer">
+            <img @click="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png">
+            <span>挂断</span>
+          </div>
+        </div>
+      </div>
+    </transition>
+
   </div>
 </template>
 <script>
@@ -448,6 +491,7 @@ export default {
           }
         },
       ],
+      isShowAudioCall: false,
       typing: false,
       loading: false,
       opening: false,
@@ -525,13 +569,13 @@ export default {
 </script>
 
 <style>
-.tooltip-enter-active,
-.tooltip-leave-active {
+.scale-enter-active,
+.scale-leave-active {
   transition: transform .2s ease;
 }
 
-.tooltip-enter-from,
-.tooltip-leave-to {
+.scale-enter-from,
+.scale-leave-to {
   transform: scale(0);
 }
 </style>
@@ -549,7 +593,7 @@ export default {
   font-size: 1.4rem;
 
   .chat-content {
-    .header {
+    > .header {
       z-index: 2;
       background: @main-bg;
       width: 100%;
@@ -891,6 +935,125 @@ export default {
 
   }
 
+
+  .audio-call {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    //background: black;
+    background: linear-gradient(to bottom, #262626, black);
+
+    .float {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+
+      > .header {
+        width: 100vw;
+        padding: @padding-page;
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+
+        img {
+          width: 2.4rem;
+          height: 2.4rem;
+        }
+
+        .center {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 2rem;
+            height: 2rem;
+            background: white;
+            padding: .2rem;
+            border-radius: 50%;
+          }
+
+          span {
+            margin-left: .5rem;
+          }
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          font-size: 1rem;
+
+          .option {
+            margin-bottom: 2.4rem;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+
+            span {
+              margin-top: 1rem;
+            }
+          }
+
+          .shrink {
+            transform: rotate(90deg) scale(.6) !important;
+          }
+        }
+      }
+
+      .big-avatar {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        width: 10rem;
+        border-radius: 50%;
+      }
+
+      .footer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 1.2rem;
+        margin-bottom: 4rem;
+
+        img {
+          width: 5rem;
+          margin-bottom: .5rem;
+        }
+
+      }
+
+
+    }
+
+  }
+
+  .call-float {
+    position: fixed;
+    top: 20vh;
+    left: @padding-page;
+    background: white;
+    display: flex;
+    align-items: center;
+    border-radius: .6rem;
+    justify-content: center;
+    flex-direction: column;
+    color: #14BF5F;
+    padding: 1rem;
+
+    img {
+      width: 3rem;
+      margin-bottom: .2rem;
+    }
+  }
 }
 
 </style>