ylrz_scrm_companyUI/src/views/qw/qwChat/qq.vue

<template>
  <div class="app-container">

    <el-tabs type="card" v-model="appKey" @tab-click="qwUserChange">
      <el-tab-pane
        v-for="item in qwUserList"
        :key="item.id"
        :label="item.qwUserId"
        :name="item.appKey"/>
    </el-tabs>

    <div class="imui-center qq-lemon-imui" v-show="showQW">
      <lemon-imui  class="lemon-slot"
                   :width="windowWidth"
                   :height="windowHeight"
                   :user="UserData"
                   ref="IMUI"
                   :contact-contextmenu="contactContextmenu"
                   :theme="theme"
                   :hide-menu="hideMenu"
                   :hide-menu-avatar="hideMenuAvatar"
                   :hide-message-name="hideMessageName"
                   :hide-message-time="hideMessageTime"
                   :messageTimeFormat="messageTimeFormat"
                   @change-menu="handleChangeMenu"
                   @pull-messages="handlePullMessages"
                   @change-contact="handleChangeContact"
                   @change-conversation="handleChangeConversation"
                   @message-click="handleMessageClick"
                   @menu-avatar-click="handleMenuAvatarClick"
                   @pick-image="handleImageClick"
                   @send="handleSend">
        <template #cover>
          <div class="cover">
            <!-- <i class="lemon-icon-message"></i>
            <p>
                <b>自定义封面 Lemon</b>IMUI
            </p> -->
          </div>
        </template>
        <template #message-title="contact">
          <div>
            <div style="display:flex;justify-content:space-between">
              <span>{{contact.displayName}}</span>
              <span style="font-size:12px;">
                <el-button size="mini" @click="showDetail">详情</el-button>
<!--                      <el-button size="mini"  @click="openDrawer('right')">侧边栏</el-button>-->
                <!--                      <span style="cursor:pointer;"  @click="openDrawer('right')">-->
                <!--                        右侧  |-->
                <!--                      </span>-->
                <!--                      <span style="cursor:pointer;" @click="openDrawer('rightInside')">-->
                <!--                        右侧内部  |-->
                <!--                      </span>-->
                <!--                      <span style="cursor:pointer;" @click="openDrawer('center')">-->
                <!--                        居中-->
                <!--                      </span>-->
                    </span>
            </div>
            <div v-if="contact.isGroup" class="slot-group-menu">
              <span>聊天</span>
              <span>公告</span>
              <span>相册</span>
              <span>文件</span>
              <span>活动</span>
              <span>设置(左键弹出菜单)</span>
            </div>
          </div>
        </template>

        <template #sidebar-contact-fixedtop="contact">
          <div class="slot-contact-fixedtop">
            <el-input size="mini" class="slot-search" placeholder="搜索通讯录" />
          </div>
        </template>

        <template #sidebar-message-fixedtop="message">
          <div class="slot-message-fixedtop">
            <el-input size="mini" v-model="contactName" class="slot-search" placeholder="搜索" />
          </div>
        </template>

        <template #message-side="contact">
          <div v-if="contact.isGroup" class="slot-group">
            <div class="slot-group-title">群通知</div>
            <div class="slot-group-notice">
              进群请改备注，格式，工作地点-姓名，请大家配合谢谢
            </div>
            <div class="slot-group-title">群成员</div>
            <div class="slot-group-panel">
              <input class="slot-search" placeholder="搜索群成员" />
              <div class="slot-group-member">
                <div class="avatar"><img src="https://p.qqan.com/up/2020-2/2020022821001845128.jpg"></div>
                <div class="name">像梦一样自由</div>
              </div>
              <div class="slot-group-member">
                <div class="avatar"><img src="https://p.qqan.com/up/2018-4/15244505348390471.jpg"></div>
                <div class="name">野火</div>
              </div>
              <div class="slot-group-member">
                <div class="avatar"><img src="https://p.qqan.com/up/2021-1/20211411391666.jpg"></div>
                <div class="name">霸王花</div>
              </div>
              <div class="slot-group-member">
                <div class="avatar"><img src="https://p.qqan.com/up/2021-1/2021113104111220.jpg"></div>
                <div class="name">森系Style</div>
              </div>

            </div>
          </div>
        </template>
      </lemon-imui>
    </div>

    <el-dialog :visible.sync="dialogVisible" append-to-body width="35%">
      <img style="width:100%;height:auto" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <el-dialog :visible.sync="dialogVideoVisible"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :width="aplayer.pWidth"
               :height="aplayer.height"
               @close="dialogVideoVisible=false"
               ref="player">
      <videoPlayer  :width="aplayer.width" :height="aplayer.height"  :videoWidth="aplayer.videoWidth"  :videoHeight="aplayer.videoHeight"   :vid="aplayer.vid"  :autoplay="true"
                    :source="dialogVideoUrl" :cover="dialogVideoCover" ref="player"></videoPlayer>
    </el-dialog>

    <!-- 用户详情 -->
    <el-drawer
      :with-header="false"
      size="75%"
      :title="detail.title" :visible.sync="detail.open">
      <userDetail ref="userDetail" />
    </el-drawer>

  </div>
</template>

<script>

import store from "@/store";
import LemonMessageVoice from "@/components/LemonUI/components/message/voice.vue";
import { getContactsByUser,getConversations,getMessageList,getConversation,sendMsg,getQwUserList} from '@/api/qw/im';
import Conversations from "@/components/LemonUI/database/conversations";
import EmojiData from "@/components/LemonUI/database/emoji";
import '@/components/LemonUI/index.css';
import VideoPlayer from '@/components/VideoPlayer/VueAliplayer.vue'
import UserDetail from "@/views/qw/qwChat/userDetail/index.vue";

let pages = {};
export default {
  name: "qqChat",
  components: {
    VideoPlayer,
    UserDetail
  },
  data() {
    return {
      contactName:'',
      appKey:null,
      qwUserId:null,
      qwUserList:[],
      theme: "default",
      IMUI:null,
      contactContextmenu: [
        {
          text: "删除该聊天",
          click: (e, instance, hide) => {
            const { IMUI, contact } = instance;
            IMUI.updateContact({
              id: contact.id,
              lastContent: null,
            });
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
        },
        {
          text: "设置备注和标签",
        },
        {
          text: "投诉",
        },
        {
          icon: "lemon-icon-message",
          text: "加入黑名单",
          render: (h, instance, hide) => {
            return (
              <div style="display:flex;justify-content:space-between;align-items:center;width:130px">
                <span>加入黑名单</span>
                <span>
                  <input type="checkbox" id="switch" />
                  <label id="switch-label" for="switch">
                    Toggle
                  </label>
                </span>
              </div>
            );
          },
        },
        {
          click(e, instance, hide) {
            const { IMUI, contact } = instance;
            IMUI.removeContact(contact.id);
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
          color: "red",
          text: "删除好友",
        },
      ],
      hideMenuAvatar: false,
      hideMenu: false,
      hideMessageName: false,
      hideMessageTime: true,
      qwUser:{},
      showQW:false,
      UserData: {
        // id: "1000",
        // displayName: "June",
        // avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
      },
      contactData:null,
      conversationData:Conversations,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVideoVisible:false,
      dialogVideoUrl:'',
      dialogVideoCover:'',
      imageArr:[],
      pickUploadImgData:null,
      aplayer: {
        vid: "bf9b7e4a36d84aea8cee769765fbc28b",
        pWidth:"1040px",
        width:"1000px",
        height:"900px",
        videoWidth:"1000px",
        videoHeight:"900px"

      },
      player: null,
      roomMembers:[],
      roomAdmins:[],
      roomInfo:null,
      windowWidth: document.documentElement.clientWidth*0.6,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight*0.7,   //实时屏幕高度
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        conversationId: null,
        userId:null
      },
      sessionId: null,
      detail: {
        title: '',
        open: false
      }
    };
  },
  created(){
    //获取企微列表
    getQwUserList().then(response => {
      this.qwUserList = response.data;
      if (this.qwUserList.length>0){
        this.qwUser = this.qwUserList[0];
        this.appKey = this.qwUser.appKey;
        this.setQwUserInfo();
        this.getConversation();
      }else {
        this.qwUser={};
      }
    });
  },
  mounted() {
    this.$watch('appKey', (newValue, oldValue) => {
      if (newValue) {
        if (!this.qwIm.hasLogin) {
          this.initSocket(this.appKey);
          console.log("appkey====",this.appKey);
        }
      }
    });
    // this.UserData.id=this.qwUser.userId;
    // this.UserData.displayName=this.qwUser.qwUserName;
    // this.UserData.avatar="https://cos.his.cdwjyyh.com/fs/20241231/22a765a96da247d1b83ea94fef438a41.png";
    this.showQW=true;

    const contactData1 = {
      id: "contact-1",
      displayName: "工作协作群",
      avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
      index: "[1]群组",
      unread: 0,
      lastSendTime: 1566047865417,
      lastContent: "2",
    };
    const contactData2 = {
      id: "contact-2",
      displayName: "自定义内容",
      avatar: "http://upload.qqbodys.com/img/weixin/20170807/jibfvfd00npin.jpg",
      //index: "Z",
      click(next) {
        next();
      },
      renderContainer: () => {
        return <h1 style="text-indent:20px">自定义页面</h1>;
      },
      lastSendTime: 1345209465000,
      lastContent: "12312",
      unread: 2,
    };
    const contactData3 = {
      id: "contact-3",
      displayName: "铁牛",
      avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg",
      index: "T",
      unread: 32,
      lastSendTime: 3,
      lastContent: "你好123",
    };
    const IMUI = this.$refs.IMUI;

    var conversationData = Conversations.filter(item => item.conversationId<=1);
    conversationData.sort((a1, a2) => {
      return a2.lastSendTime - a1.lastSendTime;
    });
    // this.getContacts();  //获取联系人信息
    // this.getConversation();   //获取会话信息

    IMUI.initMenus([
      {
        name: "messages",
      },
      {
        name: "contacts",
      },
      // {
      //   name: "custom1",
      //   title: "自定义按钮1",
      //   unread: 0,
      //   render: menu => {
      //     return <i class="lemon-icon-attah" />;
      //   },
      //   renderContainer: () => {
      //     return (
      //       <div class="article">
      //         <ul>
      //         </ul>
      //         <lemon-contact  props={{  }} style="margin:20px"/>
      //         <lemon-contact props={{  }} style="margin:20px" />
      //       </div>
      //     );
      //   },
      //   isBottom: true,
      // },
      // {
      //   name: "custom2",
      //   title: "自定义按钮2",
      //   unread: 0,
      //   click: () => {
      //     alert("拦截导航点击事件");
      //   },
      //   render: menu => {
      //     return <i class="lemon-icon-group" />;
      //   },
      //   isBottom: true,
      // },
    ]);
    IMUI.initEmoji(EmojiData);

  },

  methods: {
    initSocket(appKey) {
      let that=this;
      if(!!this.qwIm.socket){
        this.qwIm.initSocket(appKey,true);
        // 监听socket连接
        this.qwIm.socket.onopen = function() {
          console.log("socket 连接成功...");
        };
        this.qwIm.socket.onerror = function() {
          console.log("连接错误")
        };
        // 监听socket消息
        const IMUI = this.$refs.IMUI;
        this.qwIm.socket.onmessage = function(res) {
          var data=JSON.parse(res.data);
          console.log("收到服务端内容", JSON.stringify(data));
          if(data.cmd=="heartbeat"){ //收到心跳数据不处理
            console.log("heartbeat");
          }
          //接收消息
          if(data.cmd=="receiveMsg"){
            var msgData=JSON.parse(data.data);
            console.log("收到消息：>>>>>",msgData)
            if(!IMUI.hasConversation(msgData.toContactId)){  //收到新消息时是最新的会话，添加该会话
              let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.userId};
              getConversation(queryParams).then(response => {
                if(response.code==200){
                  var conversation=response.data;
                  IMUI.appendConversation(conversation);
                  that.appendMessageAction(msgData);
                }
              });
            }else{
              that.appendMessageAction(msgData);
              let conversation=IMUI.findConversation(msgData.toContactId);
              IMUI.topPopConversations(conversation);
              let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.id};
              // getConversation(queryParams).then(response => {
              //       if(response.code==200){
              //           var conversation=response.data;
              //           var unread=conversation.unread;
              //           if(!unread){
              //              conversation.unread=1;
              //           }else{
              //             conversation.unread+=1;
              //           }
              //           IMUI.topPopConversations(conversation);
              //
              //       }
              //  });
            }
          }
        };
        //监听socket重连
        this.qwIm.socket.onreconnect = function(res) {
          console.log("socket 断线重连...")
        };
      }


    },
    // 切换企微账号
    qwUserChange(tab, event){
      this.appKey = tab.name;
      let index= this.qwUserList.findIndex(item => item.appKey === tab.name);
      this.qwUser=this.qwUserList[index];
      this.getConversation();   //获取会话信息
      this.setQwUserInfo();
      this.initSocket(this.qwUser.appKey);
    },

    setQwUserInfo(){
      this.UserData.id=this.qwUser.id;
      this.UserData.displayName=this.qwUser.qwUserName;
      this.UserData.avatar="https://cos.his.cdwjyyh.com/fs/20241231/22a765a96da247d1b83ea94fef438a41.png";
    },

    getContacts(){
      getContactsByUser(this.qwUser.id).then(response => {
        this.contactData = response.data;
        this.$refs.IMUI.initContacts(this.contactData);
        //console.log("qxj request contactData:"+JSON.stringify(this.contactData));
      });
    },
    getConversation(){
      let that=this;
      const IMUI = this.$refs.IMUI;
      getConversations(this.qwUser.id).then(response => {
        this.conversationData = response.data;
        IMUI.initConversations(response.data);
        var fstConversation=this.conversationData[0];
        // console.log("qxj fstConversation:"+JSON.stringify(fstConversation));
        if(fstConversation) {
          IMUI.changeContact(fstConversation.conversationId);
          // setTimeout(() => {
          //      IMUI.changeContact(1688856679458971);
          // }, 500);
        }
        //console.log("qxj request conversation:"+JSON.stringify(response.data));
      });
    },
    messageTimeFormat(time) {
      return this.friendlyDate(time);
    },
    changeTheme() {
      this.theme = this.theme == "default" ? "blue" : "default";
    },
    scrollToTop() {
      document.body.scrollIntoView();
    },
    openDrawer(position) {
      const IMUI = this.$refs.IMUI;
      const params = {
        position,
        render: contact => {
          return (
            <div style="padding:15px">
              <h5>{contact.displayName}</h5>
              <span style="cursor:pointer;" on-click={IMUI.closeDrawer}>关闭侧边栏</span>
            </div>
          );
        },
      };
      // if (position == "center") {
      //   params.width = "50%";
      //   params.height = "50%";
      // } else if (position == "rightInside") {
      //   params.height = "90%";
      //   params.offsetY = "10%";
      // }
      IMUI.openDrawer(params);
    },
    handlePullMessages(contact, next,instance) {
      const { IMUI } = this.$refs;
      let isEnd = false;
      getMessageList(this.queryParams).then(response => {
        if(response.code==200){
          isEnd=response.data.isLastPage;
          next(response.data.list, isEnd);
          if(!isEnd){
            pages[contact.conversationId]++;
            this.queryParams.pageNum=pages[contact.conversationId];
            this.queryParams.userId = this.qwUser.id
          }
        }
      });
      // setTimeout(() => {
      //       let isEnd = true;
      //       next(MessagesData[contact.conversationId], isEnd);
      // }, 2000);

    },
    handleChangeConversation(conversation, instance) {
      //console.log("qxj ChangeConversation:"+JSON.stringify(conversation));
      this.sessionId = conversation.conversationId
      if (!pages[conversation.conversationId]){
        pages[conversation.conversationId] =1;
      }
      this.queryParams.pageNum=pages[conversation.conversationId];
      this.queryParams.conversationId=conversation.conversationId;
      this.queryParams.userId = this.qwUser.id
      if(conversation.unread>0){
        conversation.unread=0;
        instance.updateContact(conversation);
      }
      // instance.closeDrawer();
    },
    handleChangeContact(contact, instance) {
      console.log("ChangeContact:", contact, instance)
    },

    //收到消息后添加消息显示
    appendMessageAction(msgData){
      if(msgData.type=="text" || msgData.type=="image" || msgData.type=="voice"){     //文本   text  image  video  voice
        const message = {
          id: msgData.id,
          status: msgData.status,
          type: msgData.type,
          sendTime: msgData.sendTime,
          content: msgData.content,
          params1: "1",
          params2: "2",
          toContactId: msgData.toContactId,
          fromUser: msgData.fromUser,
        };
        this.appendRemoteMessage(message);
      }
      else if(msgData.type=="file"){
        const message = {
          id: msgData.id,
          status: msgData.status,
          type: msgData.type,
          sendTime: msgData.sendTime,
          content: msgData.content,
          toContactId: msgData.toContactId,
          fromUser: msgData.fromUser,
          fileName:msgData.fileName,
          fileSize:msgData.fileSize
        };
        this.appendRemoteMessage(message);
      }
      else{
        const message = {
          id: msgData.id,
          status: msgData.status,
          type: msgData.type,
          sendTime: msgData.sendTime,
          content: msgData.content,
          toContactId: msgData.toContactId,
          fromUser: msgData.fromUser,
        };
        this.appendRemoteMessage(message);
      }
    },
    //发送消息
    handleSend(message, next, file) {
      const IMUI = this.$refs.IMUI;
      var params={};
      if(message.type=="text"){  //text   image   voice   video
        params={"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":message.content};
        sendMsg(params).then(response => {
          if(response.code==200){
            var conversation=IMUI.findConversation(message.toContactId);
            conversation.lastSendTime=message.sendTime;
            conversation.lastContent=message.content;
            IMUI.topPopConversations(conversation);
            next();
          }
        });
      }
      // if(message.type=="image"){
      //     params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"materialId":this.pickUploadImgData.id};
      //     sendImageMsg(params).then(response => {
      //         if(response.code==200){
      //             var conversation=IMUI.findConversation(message.toContactId);
      //             conversation.lastSendTime=message.sendTime;
      //             conversation.lastContent="[图片]";
      //             IMUI.topPopConversations(conversation);
      //             next();
      //         }
      //     });
      // }
      // setTimeout(() => {
      //   next();
      // }, 1000);
    },
    handleMenuAvatarClick() {
      console.log("Event:menu-avatar-click");
    },
    //聊天工具栏点击图片
    handleImageClick() {
      // this.$refs.material.openMaterial(this.qwUser.deviceId);
      console.log("Event:handleImageClick");
    },
    //选择图片框确定按钮回调
    handlePickImageDone(data){
      console.log("handlePickImageDone:"+JSON.stringify(data));
      this.pickUploadImgData=data;
      const IMUI = this.$refs.IMUI;
      IMUI._handleRemoteImage(data.url);
    },
    tooglePlayVideo(data){
      this.dialogVideoVisible=true;
      this.dialogVideoUrl=data.content;
      this.dialogVideoCover=data.url;
      const player = this.$refs.player.instance
      player && player.play()
    },
    handleMessageClick(e, key, message, instance) {
      // console.log("点击了消息", e, key, message);
      //console.log("qxj message:"+JSON.stringify(message));
      if(message.type=="image"){
        var url=!!message.url?message.url:message.content;
        this.handlePicturePreview(url);
      }
      else if(message.type=="video"){
        this.tooglePlayVideo(message);
      }
      else if(message.type=="file"){

      }
      if (key == "status") {
        instance.updateMessage({
          id: message.id,
          status: "going",
          content: "正在重新发送消息...",
        });
        setTimeout(() => {
          instance.updateMessage({
            id: message.id,
            status: "succeed",
            content: "发送成功",
          });
        }, 2000);
      }
    },

    changeMenuAvatarVisible() {
      this.hideMenuAvatar = !this.hideMenuAvatar;
    },
    changeMenuVisible() {
      this.hideMenu = !this.hideMenu;
    },
    changeMessageNameVisible() {
      this.hideMessageName = !this.hideMessageName;
    },
    changeMessageTimeVisible() {
      this.hideMessageTime = !this.hideMessageTime;
    },
    removeMessage() {
      const { IMUI } = this.$refs;
      const messages = IMUI.getCurrentMessages();
      const id = messages[messages.length - 1].id;
      if (messages.length > 0) {
        IMUI.removeMessage(id);
      }
    },
    updateMessage() {
      const { IMUI } = this.$refs;
      const messages = IMUI.getCurrentMessages();
      const message = messages[messages.length - 1];
      if (messages.length > 0) {
        const update = {
          id: message.id,
          status: "succeed",
          type: "file",
          fileName: "被修改成文件了.txt",
          fileSize: "4200000",
        };
        if (message.type == "event") {
          update.fromUser = this.user;
        }
        IMUI.updateMessage(update);
        IMUI.messageViewToBottom();
      }
    },
    appendCustomMessage() {
      const { IMUI } = this.$refs;
      const message = {
        id: generateRandId(),
        status: "succeed",
        type: "voice",
        sendTime: getTime(),
        content: "语音消息",
        params1: "1",
        params2: "2",
        toContactId: "contact-1",
        fromUser: this.user,
      };
      IMUI.appendMessage(message, true);
    },
    appendMessage() {
      const { IMUI } = this.$refs;
      const contact = IMUI.currentContact;
      const message = generateMessage("contact-3");
      message.fromUser = {
        ...message.fromUser,
        ...this.user,
      };
      IMUI.appendMessage(message, true);
      console.log("🚀 ~ file: App.vue ~ line 1508 ~ appendMessage ~ message", message)
    },
    appendEventMessage() {
      const { IMUI } = this.$refs;
      const message = {
        id: generateRandId(),
        type: "event",
        content: (
          <span>
            邀请你加入群聊{" "}
            <span
              style="color:#333;cursor:pointer"
              on-click={() => alert("OK")}
            >
              接受
            </span>
          </span>
        ),
        toContactId: "contact-3",
        sendTime: getTime(),
      };
      IMUI.appendMessage(message, true);
    },
    appendRemoteMessage(message) {  //从服务端返回的消息
      const { IMUI } = this.$refs;
      IMUI.appendMessage(message, true);
    },
    updateContact() {
      this.$refs.IMUI.updateContact({
        id: "contact-3",
        unread: 10,
        displayName: generateRandWord(),
        lastSendTime: getTime(),
        lastContent: "修改昵称为随机字母",
      });
    },
    handleChangeMenu() {
      console.log("Event:change-menu");
    },
    openCustomContainer() {

    },
    handlePicturePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    // 详情
    showDetail() {
      console.log("Event:show-userDetail", this.sessionId)
      this.detail.open = true
      setTimeout(() => {
        this.$refs.userDetail.getDetail(this.sessionId);
      }, 1);
    }
  },
};
</script>

<style lang="scss" scoped>
.imui-center{
  margin-top:30px;
  align-items: center;
  justify-content: center;
  height: 80vh;
}
.lemon-wrapper{
  border:1px solid #ddd;
  //height: !important;
}
.lemon-drawer{
  border:1px solid #ddd;
  border-left:0;
}
.more {
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #f1f1f1;
  display: inline-block;
  border-radius: 4px;
  background: #111;
  padding: 0 8px;
}

/deep/.el-dialog__headerbtn{
  top:10px;
}

/deep/.el-dialog:not(.is-fullscreen) {
  margin-top: 0 !important;
}

</style>


<style lang="stylus">
.lemon-container__title{
  padding-bottom:10px;
}
.slot-group{
  width:200px;
}

.slot-group-title{
  padding:0 0 10px 0;
}

.slot-group-notice{
  padding: 10px 10px;
}


.slot-search{
  width:calc(100% - 20px) ;
  margin:5px 10px;
  padding:3px 0px;
}


.slot-group-member{
  display: flex;
  padding: 5px 0;
  flex:1;
  font-size: 14px;
  align-items: center;
}

.avatar{
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-right:5px;
}

.img{
  vertical-align: middle;
  border-style: none;
  width: 100%;
  height: 100%;
  line-height: 30px;
  border-radius: 50%;
}




</style>