From 85f9a091c94144c0642fd5c082a9d27d72ff1414 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 8 Feb 2022 09:42:48 +0800
Subject: [PATCH] scss

---
 pages/im/components/sentPopups.nvue |  42 ++++----
 pages/im/components/sentText.nvue   |  57 +++++-----
 pages/im/components/sentVoice.nvue  |  95 +++++++++--------
 pages/im/components/showImage.nvue  |   4 +-
 pages/im/components/showText.nvue   |   2 +-
 pages/im/components/showVoice.nvue  |  12 +--
 pages/im/private/call.nvue          | 143 +++++++++++++------------
 pages/im/private/chat.nvue          | 159 ++++++++++++++--------------
 8 files changed, 260 insertions(+), 254 deletions(-)

diff --git a/pages/im/components/sentPopups.nvue b/pages/im/components/sentPopups.nvue
index ac3aa5a..2a3566d 100644
--- a/pages/im/components/sentPopups.nvue
+++ b/pages/im/components/sentPopups.nvue
@@ -1,28 +1,28 @@
 <template>
     <view class="sent--popups u-border-top" v-if="show">
-        <view class="sent--popups--item" @click="onPopupsItem('picture')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
-            <text class="sent--popups--text">相册</text>
+        <view class="item" @click="onPopupsItem('picture')">
+            <image class="icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
+            <text class="text">相册</text>
         </view>
-        <view class="sent--popups--item" @click="onPopupsItem('camera')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
-            <text class="sent--popups--text">拍摄</text>
+        <view class="item" @click="onPopupsItem('camera')">
+            <image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
+            <text class="text">拍摄</text>
         </view>
-        <view class="sent--popups--item" @click="onPopupsItem('video')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
-            <text class="sent--popups--text">视频通话</text>
+        <view class="item" @click="onPopupsItem('video')">
+            <image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
+            <text class="text">视频通话</text>
         </view>
-        <view class="sent--popups--item" @click="onPopupsItem('location')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
-            <text class="sent--popups--text">位置</text>
+        <view class="item" @click="onPopupsItem('location')">
+            <image class="icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
+            <text class="text">位置</text>
         </view>
-        <view class="sent--popups--item" @click="onPopupsItem('redpacket')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
-            <text class="sent--popups--text">红包</text>
+        <view class="item" @click="onPopupsItem('redpacket')">
+            <image class="icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
+            <text class="text">红包</text>
         </view>
-        <view class="sent--popups--item" @click="onPopupsItem('file')">
-            <image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
-            <text class="sent--popups--text">文件</text>
+        <view class="item" @click="onPopupsItem('file')">
+            <image class="icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
+            <text class="text">文件</text>
         </view>
 
         <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
@@ -143,19 +143,19 @@
         flex-wrap: wrap;
         flex-direction: row;
 
-        &--item {
+        .item {
             width: 150rpx;
             margin: 15rpx;
         }
 
-        &--text {
+        .text {
             text-align: center;
             font-size: 26rpx;
             color: #555;
             padding-top: 15rpx;
         }
 
-        &--icon {
+        .icon {
             width: 110rpx;
             height: 110rpx;
             margin: 0 20rpx;
diff --git a/pages/im/components/sentText.nvue b/pages/im/components/sentText.nvue
index b0305b7..916ffc2 100644
--- a/pages/im/components/sentText.nvue
+++ b/pages/im/components/sentText.nvue
@@ -1,5 +1,5 @@
 <template>
-    <view class="text">
+    <view class="sent--text">
         <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
         <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
     </view>
@@ -56,35 +56,34 @@
     }
 </script>
 
-<style scoped>
-    .text {
+<style scoped lang="less">
+    .sent--text {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .input {
-        background: #F3F6FB;
-        height: 70rpx;
-        width: 460rpx;
-        border-radius: 10rpx;
-        margin-right: 15rpx;
-        padding: 0 20rpx;
-    }
-
-    .button {
-        border: none;
-        background: #34CE98;
-        color: white;
-        width: 120rpx;
-        line-height: 70rpx;
-        text-align: center;
-        border-radius: 10rpx;
-        font-size: 30rpx;
-        font-weight: bold;
-    }
-
-    .button[disabled] {
-        background-color: #555555;
+        justify-content: space-between;
+        
+        .input {
+            background: #F3F6FB;
+            height: 70rpx;
+            width: 460rpx;
+            border-radius: 10rpx;
+            margin-right: 15rpx;
+            padding: 0 20rpx;
+        }
+        
+        .button {
+            border: none;
+            background: #34CE98;
+            color: white;
+            width: 120rpx;
+            line-height: 70rpx;
+            text-align: center;
+            border-radius: 10rpx;
+            font-size: 30rpx;
+            font-weight: bold;
+        }
+        // .button[disabled] {
+        //     background-color: #555555;
+        // }
     }
 </style>
diff --git a/pages/im/components/sentVoice.nvue b/pages/im/components/sentVoice.nvue
index a0d9d73..197d54a 100644
--- a/pages/im/components/sentVoice.nvue
+++ b/pages/im/components/sentVoice.nvue
@@ -1,12 +1,12 @@
 <template>
-    <view>
+    <view class="send--voice">
         <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
             <text class="button">按住说话</text>
         </view>
         <!-- 录音中提示 -->
-        <view class="audio-transcribe" v-if="showRecordTip">
-            <image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
-            <text class="audio-transcribe-text">录音中 {{recordTime}} s</text>
+        <view class="modal" v-if="showRecordTip">
+            <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+            <text class="text">录音中 {{recordTime}} s</text>
         </view>
     </view>
 </template>
@@ -29,14 +29,14 @@
         data() {
             return {
                 showRecordTip: false,
-                recordTime: 60,
-                interval: 0,
-                maxRecordTime: 60,
+                recordTime: 60,
+                interval: 0,
+                maxRecordTime: 60,
                 recorderManager: null
             }
-        },
-        created() {
-            this.recorderManager = uni.getRecorderManager()
+        },
+        created() {
+            this.recorderManager = uni.getRecorderManager()
         },
         methods: {
             // 检查安卓录制权限
@@ -79,7 +79,8 @@
                 clearInterval(this.interval)
                 // 监听录音结束
                 this.recorderManager.onStop(res => {
-                    im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime - this
+                    im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
+                        this
                         .recordTime), () => {
                         setTimeout(() => {
                             this.$emit('success')
@@ -93,44 +94,46 @@
     }
 </script>
 
-<style scoped>
-    .voice {
-        background: #F3F6FB;
-        height: 70rpx;
-        line-height: 70rpx;
-        justify-content: center;
-        align-items: center;
-        width: 460rpx;
-        border-radius: 10rpx;
-        margin-right: 15rpx;
-    }
+<style scoped lang="scss">
+    .send--voice {
+        .voice {
+            background: $window-color;
+            height: 70rpx;
+            line-height: 70rpx;
+            justify-content: center;
+            align-items: center;
+            width: 460rpx;
+            border-radius: 10rpx;
+            margin-right: 15rpx;
 
-    .button {
-        font-size: 30rpx;
-        color: #333;
-    }
+            .button {
+                font-size: 30rpx;
+                color: #333;
+            }
+        }
 
-    .audio-transcribe {
-        background: rgba(0, 0, 0, .6);
-        position: fixed;
-        height: 200rpx;
-        width: 300rpx;
-        border-radius: 10rpx;
-        z-index: 99;
-        top: 550rpx;
-        left: 225rpx;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
+        .modal {
+            background: rgba(0, 0, 0, .6);
+            position: fixed;
+            height: 200rpx;
+            width: 300rpx;
+            border-radius: 10rpx;
+            z-index: 99;
+            top: 550rpx;
+            left: 225rpx;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
 
-    .audio-transcribe-src {
-        width: 88rpx;
-        height: 88rpx;
-    }
+            .icon {
+                width: 88rpx;
+                height: 88rpx;
+            }
 
-    .audio-transcribe-text {
-        font-size: 28rpx;
-        color: #FFFFFF;
+            .text {
+                font-size: 28rpx;
+                color: #FFFFFF;
+            }
+        }
     }
 </style>
diff --git a/pages/im/components/showImage.nvue b/pages/im/components/showImage.nvue
index 1b3dd9d..bdbb5be 100644
--- a/pages/im/components/showImage.nvue
+++ b/pages/im/components/showImage.nvue
@@ -1,5 +1,5 @@
 <template>
-    <view class="im--image" :class="guest ? 'right': 'left'">
+    <view class="msg--image" :class="guest ? 'right': 'left'">
         <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
     </view>
 </template>
@@ -39,7 +39,7 @@
 </script>
 
 <style scoped lang="scss">
-    .im--image {
+    .msg--image {
         padding: 20rpx;
 
         &.left {
diff --git a/pages/im/components/showText.nvue b/pages/im/components/showText.nvue
index ed25dfa..27fd7fd 100644
--- a/pages/im/components/showText.nvue
+++ b/pages/im/components/showText.nvue
@@ -1,5 +1,5 @@
 <template>
-    <view class="im--box">
+    <view class="msg--text">
         <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
     </view>
 </template>
diff --git a/pages/im/components/showVoice.nvue b/pages/im/components/showVoice.nvue
index 61b7c6d..159e467 100644
--- a/pages/im/components/showVoice.nvue
+++ b/pages/im/components/showVoice.nvue
@@ -1,10 +1,8 @@
 <template>
-    <view>
-        <view class="im--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
-            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <text class="duration">{{msg.duration}}"</text>
-            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
-        </view>
+    <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
+        <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+        <text class="duration">{{msg.duration}}"</text>
+        <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
     </view>
 </template>
 
@@ -58,7 +56,7 @@
 </script>
 
 <style scoped lang="scss">
-    .im--voice {
+    .msg--voice {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
diff --git a/pages/im/private/call.nvue b/pages/im/private/call.nvue
index 47926d6..464a048 100644
--- a/pages/im/private/call.nvue
+++ b/pages/im/private/call.nvue
@@ -1,5 +1,5 @@
 <template>
-    <view class="call-page">
+    <view class="call">
         <view class="video">
             <RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}"
                 class="bigVideoView">
@@ -9,9 +9,11 @@
         </view>
 
         <view class="status" v-if="!connected || mediaType == 0">
-            <view class="call-user">
-                <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96" bgColor="#fff" />
-                <u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square" :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
+            <view class="remote">
+                <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96"
+                    bgColor="#fff" />
+                <u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square"
+                    :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
                 <view><text class="nickname">{{userInfo.name}}</text></view>
                 <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
                 <view v-if="connected"><text class="mediaType">已接通</text></view>
@@ -163,85 +165,88 @@
     }
 </script>
 
-<style scoped>
-    .call-page {
+<style scoped lang="scss">
+    .call {
         display: flex;
         flex: 1;
         flex-direction: column;
         position: relative;
-    }
 
-    .bigVideoView {
-        background: #000;
-    }
+        .video {
+            .bigVideoView {
+                background: #000;
+            }
 
-    .smallVideoView {
-        background: blue;
-        position: absolute;
-        right: 100rpx;
-        top: 100rpx;
-        width: 180rpx;
-        height: 320rpx;
-    }
+            .smallVideoView {
+                background: blue;
+                position: absolute;
+                right: 100rpx;
+                top: 100rpx;
+                width: 180rpx;
+                height: 320rpx;
+            }
+        }
 
-    .buttons {
-        position: fixed;
-        bottom: 100rpx;
-        width: 750rpx;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-    }
+        .status {
+            flex: 1;
+            background: #666;
+            width: 750rpx;
+            position: fixed;
+            bottom: 0;
+            top: 0;
 
-    .btn {
-        align-items: center;
-    }
+            .remote {
+                flex: 1;
+                width: 750rpx;
+                display: flex;
+                align-items: center;
+                top: 300rpx;
 
-    .icon {
-        background: #34CE98;
-        width: 132rpx;
-        height: 132rpx;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+                .mediaType {
+                    font-size: 32rpx;
+                    color: #aaa;
+                }
 
-    .btn .text {
-        margin-top: 16rpx;
-        color: #FFFFFF;
-        font-size: 32rpx;
-    }
+                .nickname {
+                    margin: 30rpx;
+                    font-size: 44rpx;
+                    color: #ffffff;
+                }
+            }
+        }
 
-    .icon.hangup {
-        background: #dd524d;
-    }
+        .buttons {
+            position: fixed;
+            bottom: 100rpx;
+            width: 750rpx;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+        }
 
-    .status {
-        flex: 1;
-        background: #666;
-        width: 750rpx;
-        position: fixed;
-        bottom: 0;
-        top: 0;
-    }
 
-    .call-user {
-        flex: 1;
-        width: 750rpx;
-        display: flex;
-        align-items: center;
-        top: 300rpx;
-    }
+        .btn {
+            align-items: center;
 
-    .mediaType {
-        font-size: 32rpx;
-        color: #aaa;
-    }
+            &.hangup {
+                background: $text-price;
+            }
 
-    .nickname {
-        margin: 30rpx;
-        font-size: 44rpx;
-        color: #ffffff;
+            .icon {
+                background: $main-color;
+                width: 132rpx;
+                height: 132rpx;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .text {
+                margin-top: 16rpx;
+                color: #FFFFFF;
+                font-size: 32rpx;
+            }
+        }
     }
 </style>
diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
index 8808851..59a20cd 100644
--- a/pages/im/private/chat.nvue
+++ b/pages/im/private/chat.nvue
@@ -1,13 +1,13 @@
 <template>
     <view class="chat">
         <!-- chat -->
-        <list class="chat-scroll" :show-scrollbar="false">
+        <list class="body" :show-scrollbar="false">
             <cell class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="cell-time">
-                    <text class="cell-time-text">{{ customCN(item.sentTime) }}</text>
+                <view class="time">
+                    <text class="text">{{ customCN(item.sentTime) }}</text>
                 </view>
                 <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
-                    <image class="active" :src="userInfo.portraitUrl" mode="aspectFill"
+                    <image class="avatar" :src="userInfo.portraitUrl" mode="aspectFill"
                         @click="showUser(targetId, item.messageDirection)"></image>
                     <view class="msg">
                         <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
@@ -25,11 +25,11 @@
             <cell class="cell-footer" ref="chatBottom"></cell>
         </list>
         <!-- footer -->
-        <view class="chat-footer">
+        <view class="footer">
             <view class="msg-type" @click="changeMessageType">
-                <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
+                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
                 </image>
-                <image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
+                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
                 </image>
             </view>
             <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@@ -37,7 +37,7 @@
             <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
                 @success="getMessageList" />
             <view class="msg-type msg-push" @click="showPopups = !showPopups">
-                <image class="msg-type-icon" src="@/static/icon/popups-icon.png"></image>
+                <image class="icon" src="@/static/icon/popups-icon.png"></image>
             </view>
         </view>
         <!-- 弹出层 -->
@@ -159,95 +159,96 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
     /* 窗口 */
     .chat {
-        background: #F3F6FB;
+        background: $window-color;
         flex: 1;
-    }
 
-    .chat-scroll {
-        flex: 1;
-    }
 
-    .cell {
-        padding: 10rpx 30rpx;
-    }
+        .body {
+            flex: 1;
 
-    .cell-time {
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 20rpx;
-    }
+            .cell {
+                padding: 10rpx 30rpx;
 
-    .cell-time-text {
-        background: #fff;
-        font-size: 24rpx;
-        color: #666;
-        line-height: 40rpx;
-        padding: 0 20rpx;
-        border-radius: 10rpx;
-    }
+                .time {
+                    justify-content: center;
+                    align-items: center;
+                    padding-bottom: 20rpx;
 
-    .cell-item {
-        width: 690rpx;
-        justify-content: flex-start;
-    }
+                    .text {
+                        background: #fff;
+                        font-size: 24rpx;
+                        color: #666;
+                        line-height: 40rpx;
+                        padding: 0 20rpx;
+                        border-radius: 10rpx;
+                    }
+                }
 
-    .cell-footer {
-        height: 20rpx;
-    }
+                .cell-item {
+                    width: 690rpx;
+                    justify-content: flex-start;
 
-    .active {
-        width: 78rpx;
-        height: 78rpx;
-        background-color: white;
-        border-radius: 10rpx;
-    }
 
-    .msg {
-        margin: 0 20rpx;
-    }
+                    &.left {
+                        flex-direction: row;
+                    }
 
-    .state {
-        padding-top: 10rpx;
-    }
+                    &.right {
+                        flex-direction: row-reverse;
+                        
+                        .state {
+                            flex-direction: row;
+                            justify-content: flex-end;
+                        }
+                    }
 
-    .state-text {
-        font-size: 24rpx;
-        color: #666;
-    }
+                    .avatar {
+                        width: 78rpx;
+                        height: 78rpx;
+                        background-color: white;
+                        border-radius: 10rpx;
+                    }
 
-    .cell-item.left {
-        flex-direction: row;
-    }
+                    .msg {
+                        margin: 0 20rpx;
 
-    .cell-item.right {
-        flex-direction: row-reverse;
-    }
+                        .state {
+                            padding-top: 10rpx;
 
-    .cell-item.right .state {
-        flex-direction: row;
-        justify-content: flex-end;
-    }
+                            .state-text {
+                                font-size: 24rpx;
+                                color: #666;
+                            }
+                        }
+                    }
+                }
 
-    /* footer */
-    .chat-footer {
-        background: white;
-        padding: 20rpx 30rpx;
-        display: flex;
-        justify-content: space-between;
-        flex-direction: row;
-    }
+                .cell-footer {
+                    height: 20rpx;
+                }
+            }
+        }
 
-    .msg-type {
-        width: 70rpx;
-        height: 70rpx;
-    }
+        .footer {
+            background: white;
+            padding: 20rpx 30rpx;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row;
 
-    .msg-type>.msg-type-icon {
-        margin: 5rpx;
-        width: 60rpx;
-        height: 60rpx;
+            .msg-type {
+                width: 70rpx;
+                height: 70rpx;
+
+                .icon {
+                    margin: 5rpx;
+                    width: 60rpx;
+                    height: 60rpx;
+                }
+            }
+        }
     }
 </style>