newyqlm/components/sender.vue

<template>
    <view>
        <view v-if="showPanel" style="height:75px;display: block;">
        </view>
        <view class="v-sender" id="v-send">
            <view class="v-sender__control v-sender__control_t" v-if="qute && qute.id && !voice">
                <!-- #ifndef H5 -->
                <view class="emoji" style="width: 64rpx;">
                </view>
                <!-- #endif -->
                <!-- 引用 -->
                <view class=" textarea qute-wrap">
                    <!-- 文本 -->
                    <template  v-if="qute.message.type == 'text'">
                        <view class="content" v-if="qute.message.content.type && qute.message.content.type == 'remind'">
                            {{qute.sender.nickname}}: <text v-html="showCall(qute.message.content.content)"></text>
                        </view>
                        <view class="content" v-else>
                            {{qute.sender.nickname}}:{{qute.message && qute.message.content ? qute.message.content: ''}}
                        </view>
                    </template>
                    
                    <!--  -->
                   <view class="content" v-if="qute.message.type == 'emotion'">
                         {{qute.sender.nickname}}:{{qute.message && qute.message.content.content ? qute.message.content.content: ''}}
                    </view>
                    <view class="content" v-if="qute.message.type == 'image'">
                         {{qute.sender.nickname}}:[图片]
                    </view>
                    <image src="../static/img/del.png" mode="" @click="clearQute"></image>
                </view>
            </view>
            <view class="v-sender__control">
                <!-- #ifndef H5 -->
                <view class="emoji" @tap="sendVoice">
                    <text v-if="!voice && !noSpeaking" class="n-icon n-icon-voice"></text>
                    <text v-else class="n-icon n-icon-keyboard"></text>
                </view>
                <!-- #endif -->
                <block v-if="noSpeaking">
                    <view class="falseinput"
                        style="text-align: center;color: #999;margin-left: 16upx;margin-right: 20upx;margin-left:10px;">
                        {{speaking_tips}}
                    </view>
                </block>
                <block v-else>
                   <textarea   v-if="!voice" ref="shuru" id="sendbox" maxlength="99999999999" auto-height="true"
                       :class="{'textarea':true,'input':input_value && !voice}" v-model="input_value" 
                       type="text" @input="listen('input', $event.detail.value)" @confirm="set_focos()"
                       @tap="sendertap();" confirm-type='发送' adjust-position="ture" confirm-hold="true"
                       cursor-spacing="15" style="overflow-y: auto;" :focus='focusState'>
                   </textarea>
                    <view v-if="voice" :class="{'falseinput':true,'press':setting}"
                        style="text-align: center;color: #222;margin-right: 20upx;" @touchstart="startVoice"
                        @touchend="endVoice" @touchmove.stop.prevent="voiceIng" @touchcancel="voiceCancel">{{voiceTis}}
                    </view>
                    <!-- 图片/表情 -->
                    <view class="emoji" @tap="showemoji();" v-if="!emoji"><text class="n-icon n-icon-face"></text>
                    </view>
                    <view class="emoji" @tap="hideemoji();" v-if="emoji"><text class="n-icon n-icon-keyboard"></text>
                    </view>
                    <view class="btn sendbtn" v-if="input_value && !voice" @touchend.prevent="tapsender">发送</view>
                    <view class="bigbox3" v-if="!input_value && !voice">
                        <view class="emoji" @tap="show_panel();" v-if="!showPanel&&!input_value"><text>&#xe634;</text>
                        </view>
                        <view class="emoji" @tap="hide_panel();" v-else-if="showPanel&&!input_value">
                            <text>&#xe603;</text>
                        </view>
                    </view>
                </block>
            </view>
            <view class="record" :class="setting?'':'hidden'">
                <view class="ing" :class="willStop?'hidden':''">
                    <view class="icon luyin2"></view>
                </view>
                <view class="cancel" :class="willStop?'':'hidden'">
                    <view class="icon chehui"></view>
                </view>
                <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
            </view>
            <view v-if="emoji" class="face_box">
                <view style="width: 100%;">
                    <view class="emotion-box" style="height:200px">
                        <view class="emotion-box-line" v-for="(line, i) in lists" :key="i">
                            <view class="emotion-item" v-for="(item, index) in line" :key="index"
                                @click="handleEmotion(item)">
                                <image :src="'/static/emoji/'+item.name+'.gif'" style="width: 50rpx;height: 50rpx;">
                                </image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="showPanel" class="v-sender__panel">
                <view @click="sendImg('album')">
                    <view class="icons"><text class="n-icon n-icon-image"></text></view>
                    <view>图片</view>
                </view>
                <view class="box" @click="sendImg('camera')">
                    <view class="icons"><text class="n-icon n-icon-paizhao"></text></view>
                    <view>拍照</view>
                </view>
                <view class="box" @click="sendVedio('album')">
                    <view class="icons">
                        <image src="../static/img/vedio.png"></image>
                    </view>
                    <view>视频</view>
                </view>
                <view class="box" @click="sendVedio('camera')">
                    <view class="icons">
                        <image src="../static/img/camera.png"></image>
                    </view>
                    <view>录像</view>
                </view>
                <!-- <view class="box" @click="sendRedpactet()">
            	<view  class="icons"><image src="../static/img/redpacket.png" style="width: 26px;" ></image></view>
            	<view>红包</view>
            </view> -->
            </view>
        </view>
    </view>
</template>

<script>
    const recorderManager = uni.getRecorderManager();

    const {
        windowWidth,
        windowHeight
    } = uni.getSystemInfoSync();

    import helper from "../library/helper.js"
    import api from "../library/index.js"
    import action from "../library/action.js"
    export default {
        name: 'v-sender',
        props: {

            placeholder: {
                type: String,
                default: '说点什么吧'
            },
            value: {
                type: String,
                default: ''
            },
            noSpeaking: {
                type: Boolean,
                default: false
            },
            speaking_tips: {

            },

            forbidRedpack: {
                type: Boolean,
                default: false
            },
            showboard: {
                type: Boolean,
                default: false
            },
            groupid: {
                type: [Number, String],
                default: 0
            },
            isgroup: {
                default: 0
            },
            sendtype: {
                type: [Number, String],
                default: 'text'
            }
        },


        data() {
            return {
                focusState: false,
                qute: {},
                showPanel: false,
                showPacket: false,
                voice: false,
                text: 'uni-app',
                voicePath: '',
                setting: false,
                emoji: false,
                faceImg: {},
                swipers: [],

                voiceTis: '按住 说话',
                recordTis: "手指上滑 取消发送",
                recording: false,
                willStop: false,
                initPoint: {
                    identifier: 0,
                    Y: 0
                },
                recordTimer: null,
                recordLength: 0,
                mids: {},
                uploadnum: 0,
                starttime: 0,
                endtime: 0,
                voice_mid: '',
                focus: false,
                input_value: '',
                area_value: '',
                inputclass: 'textarea',
                sendtime: 0,
                keyboardheight: 0,
                borderheight: 0,
                user: uni.getStorageSync('userInfo'),
                list: [
                    ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
                    ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
                    ['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
                    ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
                    ['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
                    ['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
                    ['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
                    ['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', ],
                    ['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
                    ['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
                    ['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
                    ['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
                    ['磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌'],
                    ['耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑', '嘿哈'],
                    ['鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物']
                ],
                reg: /\S{1,3}/gi,
                lists: [],
                listss: []
            }
        },


        mounted() {

            let that = this;
            // #ifdef APP-PLUS
            recorderManager.onStart((e) => {

                this.recordBegin(e);
            })
            recorderManager.onStop(res => {
                this.recordStop(res);

            });




            // #endif
            var value = '';
            this.list = this.list.map((line, index) => {
                this.listss = [];
                line = line.map((item, idx) => {

                    value = item;

                    item = item.replace(/\S{1,3}/gi, this.emotion(item));

                    this.listss.push({
                        "name": item,
                        "index": index,
                        "value": value,
                        "idx": idx
                    })

                    return item;

                })

                this.lists.push(this.listss);

                return line;
            })






        },
        computed: {

            sendShowing() {
                return this.value.length > 0
            },
        },
        methods: {
            showCall(val) {
                val = val + ''
                let str = ''
                if(val) {
                    str = val.replace(/<span.*?>|<\/span>/g, "")
                }
                return str
            },
            // 清理引用
            clearQute() {
              this.qute = {}  
            },
            // 保存引用
            setQute(item) {
                let that = this
                that.qute = item
                console.log('that.qute',that.qute);
                let data = this.$refs.shuru
               that.focusState = false
               
                this.$nextTick(()=> {
                    that.focusState = true
                })
            },
            emotion(res) {
                //let word = res.replace(/\#|\;/gi,'')

                const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶',
                    '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗',
                    '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼',
                    '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头',
                    '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱',
                    '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火',
                    '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌', '耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑',
                    '嘿哈', '鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物'
                ]
                let index = list.indexOf(res)
                var index1 = index + 100;
                return index1
            },
            showemoji() {
                this.showPanel = false;
                this.emoji = true;
                //   this.setChatHeight();
            },
            hideemoji() {
                this.showPanel = false;

                this.emoji = false;
                //  this.setChatHeight();
            },

            show_panel() {
                this.showPanel = true;
                this.emoji = false;
                this.setChatHeight();
            },
            hide_panel() {
                this.showPanel = false;
                this.emoji = false;
                this.setChatHeight();
            },

            setChatHeight() {
                // 

                //  console.log(this.sendHeight);
                var that = this;
                setTimeout(() => {

                    var that = this;
                    var query = uni.createSelectorQuery(); // 这里要加上select

                    query.in(that).select('#v-send').boundingClientRect(res => {
                        var hh = (parseInt(res.height) - 60);
                        this.$emit("senderheight", hh);

                    }).exec();

                }, 100);
            },

            sendVedio(type) {
                let that = this
                uni.chooseVideo({
                    sourceType: [type],
                    maxDuration: 15,
                    compressed: false,

                    success(re) {
                        // console.log(re.tempFilePath);
                        //console.log(re.tempFilePaths[0]);
                        that.sendertap();

                        var mids = 'm' + Math.random().toString(36).substring(2);


                        var duration = re.duration;
                        that.$emit('sendVedio', {
                            mid: mids,
                            src: re.tempFilePath,
                            time: duration
                        });
                        var _that = that;
                        helper.uploadFiles([re.tempFilePath], 'Vedio', {
                            type: 'vedio'
                        }).then(res => {

                            that.$emit('sendVedio', {
                                mid: mids,
                                src: res,
                                time: duration
                            });
                        });


                    }
                })
            },

            sendImg(type) {
                let that = this
                uni.chooseImage({
                    sourceType: [type],
                    sizeType: ['original', 'compressed'],
                    success(re) {
                        //console.log(re.tempFilePaths.length);
                        //console.log(re.tempFilePaths[0]);
                        that.sendertap();
                        that.uploadnum = 0;
                        for (var i = 0; i < re.tempFilePaths.length; i++) {
                            that.mids[i] = 'm' + Math.random().toString(36).substring(2);
                            // that.$emit('sendImage', {mid:that.mids[i],src: re.tempFilePaths[i]});
                            var _that = that;
                            //  console.log(re.tempFilePaths[i]);
                            helper.uploadFiles([re.tempFilePaths[i]], 'images', {
                                type: 'images'
                            }).then(res => {

                                that.$emit('sendImage', {
                                    mid: _that.mids[that.uploadnum],
                                    src: res
                                });
                            });
                        }

                    }
                })
            },


            sendRedpactet() {

                if (this.user.banknum < 1) {
                    uni.showModal({
                        title: '提示',
                        content: "绑定银行卡后才可以发送红包",
                        showCancel: true,
                        cancelText: '关闭',
                        confirmText: '立即绑定',
                        success: res => {
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: "/pages/mine/bank"
                                })
                            }
                        }
                    });
                    return false;
                } else {
                    uni.navigateTo({
                        url: '../friend/readpacket?isgroup=' + this.isgroup + '&id=' + this.groupid
                    })
                }

                this.hide_panel();

            },
            listen(name, eventOrValue) {

                this.$emit(name, eventOrValue);
                this.focus = false;
            },
            set_focos() {
                if (this.focus == false) this.focus = true;
            },
            getfocus(detail) {

                this.boardheight = detail.height;
                // #ifdef APP-PLUS
                if (plus.os.name == 'Android') this.$emit("keyboardheight", detail.height);
                // #endif


            },
            unfocus() {
                this.boardheight = 0;
                //   console.log('sender失去焦点')
                this.$emit("keyboardheight", 0);

            },
            unfocus1() {
                // console.log('box失去焦点')
                this.$emit("keyboardheight", 0);

            },
            sendertap() {

                this.showPanel = false;

                this.emoji = false;
                // z  uni.hideKeyboard();

            },

            setinputvalue(e) {
                this.input_value = this.input_value + e + ' ';
                this.$emit('input', this.input_value);
            },
            istap() {

            },
            tapsender() {

                //this.inputclass='textarea sending'
                if (this.input_value != '') {



                    var that = this;
                    //  setTimeout(function(){that.$emit('send',that.$event);},1000)
                    that.$emit('send', that.$event);
                    this.area_value = '';
                    this.input_value = '';
                    //that.$emit("senderheight",0);   
                    //this.keyboardheight=this.boardheight;

                    //  this.$emit("senderheight",300);
                    if (this.sendtype != 'text') {
                        this.hideemoji();
                        this.hide_panel();
                    }
                    // #ifdef APP-PLUS
                    //if(plus.os.name=="iOS") uni.hideKeyboard();
                    // #endif


                }



            },

            listen1(e) {
                //   console.log(e);
                this.input_value = e;
                this.listen('input', e);
                //   console.log(e);

            },
            clickbox(e) {
                var x = e.touches[0].clientX;
                var y = e.touches[0].clientY;
                //  console.log( windowWidth-x, windowHeight-y)
                if (windowWidth - x < 65) this.tapsender();
            },
            startVoice(e) {
                this.setting = true;
                this.willStop = false;
                this.voiceTis = '手指上滑 取消发送'
                recorderManager.start({
                    format: 'mp3',
                    numberOfChannels: 2,
                    duration: 6000
                });
                this.starttime = new Date().getTime();
                this.initPoint.Y = e.touches[0].clientY;
                this.initPoint.identifier = e.touches[0].identifier;
                console.log('start');
            },
            //录音开始UI效果
            recordBegin(e) {

                /** 暂停语音播放 */
                console.log('录音开始UI效果');
                recorderManager.pause();

                this.setting = true;
                this.voiceTis = '松开 结束';
                this.recordLength = 0;
                this.recordTimer = setInterval(() => {
                    this.recordLength++;
                }, 1000)
            },
            //录音停止   上传到服务器
            recordStop(res) {
                var that = this;
                this.endtime = new Date().getTime();
                that.voicePath = res.tempFilePath;
                if (!this.willStop) {

                    if (this.endtime - this.starttime < 1000) return that.$toast('时间太短了');
                    var duration = (this.endtime - this.starttime) / 1000;
                    this.voice_mid = 'm' + Math.random().toString(36).substring(2);
                    that.$emit('face', {
                        url: that.voicePath,
                        time: duration.toFixed(2),
                        mid: this.voice_mid
                    })
                    helper.uploadFiles([that.voicePath], 'audio', {
                        type: 'audio'
                    }).then(res => {

                        that.$emit('face', {
                            url: res,
                            time: duration.toFixed(2),
                            mid: this.voice_mid
                        })

                    });
                    action.playVoice('/static/voice/voice.mp3');
                } else {
                    console.log('取消发送录音');
                }
            },
            // 录音被打断
            voiceCancel() {
                this.setting = false;

                this.willStop = true; //不发送录音
                recorderManager.stop(); //录音结束
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送'
            },
            // 录音中(判断是否触发上滑取消发送)
            voiceIng(e) {
                if (!this.setting) {
                    return;
                }
                let touche = e.touches[0];
                //上滑一个导航栏的高度触发上滑取消发送
                if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
                    this.willStop = true;
                    this.recordTis = '松开手指 取消发送'
                } else {
                    this.willStop = false;
                    this.recordTis = '手指上滑 取消发送'
                }
            },

            endVoice() {
                this.setting = false
                recorderManager.stop();
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送';


            },
            sendVoice() {
                this.voice = !this.voice;
            },
            getEmoji() {

            },
            sendEmoji(e) {
                //this.showPanel = false;
                this.emoji = false
                this.$emit('emoji', e)
            },
            handleEmotion(item) {
                var v = item.value;

                this.input_value += '[' + v + ']';
                this.area_value = this.input_value
                this.listen1(this.input_value);

                this.$emit('handleEmotion', this.input_value);

            },
        },
        created() {
            this.getEmoji()
        },
        onLoad() {


        },
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/chat/style.scss";
    $control-height: 120upx;
    $input-height: $control-height - $uni-spacing-col-base * 2;

    .face_box {
        position: fixed;
        bottom: 60px;
        ;
        left: 1px;
        width: calc(100% - 4px);
        z-index: 99;
        background-color: #fff;
        border: 1px #ddd solid;
        padding-top: 5px;
        ;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .faceImg {
        width: 100upx;
        flex-basis: 100upx;
    }

    .n-icon {
        font-size: 33px;
        line-height: 33px;
        color: #333;
        vertical-align: middle;
    }

    .icons {
        height: 70upx;
        line-height: 70upx;
        vertical-align: middle;
    }

    .icons image {
        width: 65upx;
        height: 55upx;
        vertical-align: middle;
    }

    .bigbox {
        position: fixed;
        bottom: 0px;
        left: 110upx;
        width: calc(100vw - 100upx);
        height: 120upx;
        line-height: 120upx;
        padding: 0px;
        z-index: 0;

        border: 0px #eee solid;
        color: transparent !important;
    }

    .bigbox2 {
        position: absolute;
        top: 10px;
        right: 80upx;
        width: 84upx;
        height: 120upx;
        line-height: 120upx;
        padding: 0px;
        z-index: 10;
        border: 0px #eee solid;

    }

    .bigbox3 {
        position: absolute;
        top: 10px;
        right: 0upx;
        width: 80upx;
        height: 120upx;
        line-height: 120upx;

        padding: 0px;
        z-index: 0;
        text-align: right;
        justify-content: right;
        border: 0px #eee solid;

    }




    .sending {
        color: transparent !important;
    }

    .v-sender {
        z-index: 99999999;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 99vw;
        padding-left: 1vw;
        background-color: #fafafa;
        border-top: 1px solid #ddd;
        
        &__panel,
        
        &__control {
            position: relative;
            width: 100%;
           
            &::before {
                display: block;
                content: '\20';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                // background-color: #ddd;
                height: 1upx;
                transform: scaleY(0.5);
            }
        }

        &__panel {
            width: 100%;
            display: table;
            padding: 20upx 0;
            font-size: 28upx;
            background: #fafafa;

            >view {
                .n-icon {
                    font-size: 33px;
                    color: #999;
                }

                text-align: center;
                display: table-cell;
            }
        }

        &__control {
            height: $control-height;

            padding: $uni-spacing-col-base 0px $uni-spacing-col-base 0;

            &,
            .emoji,
            .btn {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                box-sizing: border-box;

            }

            >.emoji,
            >.btn,
            >input {
                margin-left: $uni-spacing-row-base;
            }

            view {

                height: $input-height;
                flex-shrink: 0;
            }

            .emoji {
                font-size: 64upx;
                line-height: $input-height;
            }

            input,
            .falseinput {
                flex: 1;
                height: $input-height;
                border-radius: $uni-border-radius-base;

                box-sizing: border-box;
                background-color: #ccc;
                height: 68upx;
                line-height: 68upx;
                margin-left: 10px;
                ;
            }

            .falseinput.press {
                background-color: #666;
                color: #fff !important;
            }

            .btn {
                line-height: $input-height - 10upx;
                height: $input-height - 10upx;
                color: #fff;
                text-align: center;
                background-color: $uni-color-primary;
            }
        }
        &__control_t {
            height: 80upx;
            padding: 0;
            .qute-wrap {
                border: none;
                background-color: #eaeaea;
               height: 40upx;
               font-size: 26upx;
               color: #6d6d6d;
               display: flex;
               justify-content: space-between;
               flex-wrap: nowrap;
               .content {
                flex-grow: 1;
                text-overflow:ellipsis;
                white-space:nowrap;
                overflow:hidden;
                max-width: 90%;
               }
               image {
                   flex-shrink: 0;
                   width: 28upx;
                   height: 28upx;
               }
            }
        }
    }

    .textarea,
    .textareas {
        font-size: 32upx;
        background: #fff;
        border: 1px solid #ddd;
        max-height: 80upx;
        min-height: 40upx;
        line-height: 40upx;
        padding: 12upx 10upx;
        border-radius: 3px;
        ;
    }

    .textarea {
        margin-left: 10px;
        /* #ifndef H5 */
        width: calc(100% - 290upx);
        /* #endif */


        /* #ifdef H5 */
        width: calc(100% - 210upx);
        /* #endif */

    }

    .textarea.input {
        /* #ifndef H5 */
        width: calc(100% - 360upx);
        /* #endif */


        /* #ifdef H5 */
        width: calc(100% - 280upx);
        /* #endif */
    }

    .sendbtn {

        margin-left: 16upx !important;
        padding: 0px 40upx !important;

    }

    .emotion-box {
        margin: 0 auto;
        width: calc(100% - 4px);
        box-sizing: border-box;
        padding: 2px;
        overflow: hidden;
        overflow-y: auto;
    }

    .emotion-box-line {
        display: flex;
    }

    .emotion-item {
        flex: 1;
        text-align: center;
        cursor: pointer;
    }
</style>