|
@@ -0,0 +1,642 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="imui-center qq-lemon-imui" v-show="showQW">
|
|
|
+ <lemon-imui class="lemon-slot"
|
|
|
+ :width="windowWidth"
|
|
|
+ :height="windowHeight"
|
|
|
+ :user="UserData"
|
|
|
+ ref="IMUI"
|
|
|
+ :contextmenu="contextmenu"
|
|
|
+ :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"
|
|
|
+ @message-click="handleMessageClick"
|
|
|
+ @menu-avatar-click="handleMenuAvatarClick"
|
|
|
+ @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;">
|
|
|
+ <span>打开抽屉:</span>
|
|
|
+ <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">
|
|
|
+ <input 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>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import store from "@/store";
|
|
|
+import { getQrCode } from '@/api/qw/login';
|
|
|
+import { getDeviceId} from '@/api/qw/account';
|
|
|
+import { getContacts} from '@/api/qw/im';
|
|
|
+import LemonMessageVoice from "@/components/LemonUI/components/lemon-message-voice";
|
|
|
+import ContactsData from "@/components/LemonUI/database/contacts";
|
|
|
+import MessagesData from "@/components/LemonUI/database/messages";
|
|
|
+import EmojiData from "@/components/LemonUI/database/emoji";
|
|
|
+import '@/components/LemonUI/index.css';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "qqChat",
|
|
|
+ components: { },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ theme: "default",
|
|
|
+ contactData:[],
|
|
|
+ deviceId:'4eea1292408044beb49c02d3197871b0',
|
|
|
+ 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: "删除好友",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ contextmenu: [
|
|
|
+ {
|
|
|
+ click: (e, instance, hide) => {
|
|
|
+ const { IMUI, message } = instance;
|
|
|
+ const data = {
|
|
|
+ id: generateRandId(),
|
|
|
+ type: "event",
|
|
|
+ //使用 jsx 时 click必须使用箭头函数(使上下文停留在vue内)
|
|
|
+ content: (
|
|
|
+ <div>
|
|
|
+ <span>
|
|
|
+ 你撤回了一条消息{" "}
|
|
|
+ <span
|
|
|
+ v-show={message.type == "text"}
|
|
|
+ style="color:#333;cursor:pointer"
|
|
|
+ content={message.content}
|
|
|
+ on-click={e => {
|
|
|
+ IMUI.setEditorValue(e.target.getAttribute("content"));
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 重新编辑
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ toContactId: message.toContactId,
|
|
|
+ sendTime: getTime(),
|
|
|
+ };
|
|
|
+ IMUI.removeMessage(message.id);
|
|
|
+ IMUI.appendMessage(data, true);
|
|
|
+ hide();
|
|
|
+ },
|
|
|
+ visible: instance => {
|
|
|
+ return instance.message.fromUser.id == this.user.id;
|
|
|
+ },
|
|
|
+ text: "撤回消息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ visible: instance => {
|
|
|
+ return instance.message.fromUser.id != this.user.id;
|
|
|
+ },
|
|
|
+ text: "举报",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "转发",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ visible: instance => {
|
|
|
+ return instance.message.type == "text";
|
|
|
+ },
|
|
|
+ text: "复制文字",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ visible: instance => {
|
|
|
+ return instance.message.type == "image";
|
|
|
+ },
|
|
|
+ text: "下载图片",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ visible: instance => {
|
|
|
+ return instance.message.type == "file";
|
|
|
+ },
|
|
|
+ text: "下载文件",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ click: (e, instance, hide) => {
|
|
|
+ const { IMUI, message } = instance;
|
|
|
+ IMUI.removeMessage(message.id);
|
|
|
+ hide();
|
|
|
+ },
|
|
|
+ icon: "lemon-icon-folder",
|
|
|
+ color: "red",
|
|
|
+ text: "删除",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ hideMenuAvatar: false,
|
|
|
+ hideMenu: false,
|
|
|
+ hideMessageName: false,
|
|
|
+ hideMessageTime: true,
|
|
|
+ qwUser:store.getters.qwUser,
|
|
|
+ showQW:false,
|
|
|
+ UserData: {
|
|
|
+ id: "1000",
|
|
|
+ displayName: "June",
|
|
|
+ avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
|
|
|
+ },
|
|
|
+ windowWidth: document.documentElement.clientWidth*0.65, //实时屏幕宽度
|
|
|
+ windowHeight: document.documentElement.clientHeight*0.7, //实时屏幕高度
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ //this.getContacts();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if(!this.qwUser){
|
|
|
+ this.$message.error('未登录企微账号');
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }, 2000);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("qxj qwUser:"+JSON.stringify(this.qwUser));
|
|
|
+ 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;
|
|
|
+ IMUI.initContacts(this.contactData);
|
|
|
+
|
|
|
+ var conversationData = ContactsData.filter(item => item.id<=7);
|
|
|
+ conversationData.sort((a1, a2) => {
|
|
|
+ return a2.lastSendTime - a1.lastSendTime;
|
|
|
+ });
|
|
|
+ IMUI.initConversations(conversationData);
|
|
|
+ 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>
|
|
|
+ <li class="article-item">
|
|
|
+ <h2>人民日报谈网红带货:产品真的值得买吗?</h2>
|
|
|
+ </li>
|
|
|
+ <li class="article-item">
|
|
|
+ 甘肃夏河县发生5.7级地震 暂未接到人员伤亡报告
|
|
|
+ </li>
|
|
|
+ <li class="article-item">
|
|
|
+ 北方多地风力仍强沙尘相伴,东北内蒙古等地迎雨雪
|
|
|
+ </li>
|
|
|
+ <li class="article-item">
|
|
|
+ 英货车案:越南警方采集疑死者家属DNA作比对
|
|
|
+ </li>
|
|
|
+ <li class="article-item">
|
|
|
+ 知名连锁咖啡店的蛋糕吃出活虫 曝光内幕太震惊
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <lemon-contact props={{ contact: contactData1 }} style="margin:20px"/>
|
|
|
+ <lemon-contact props={{ contact: contactData3 }} 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);
|
|
|
+ IMUI.changeContact(13);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getContacts(){
|
|
|
+ getContacts(this.deviceId).then(response => {
|
|
|
+ this.contactData = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ messageTimeFormat(time) {
|
|
|
+ console.log("qxj 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;
|
|
|
+ console.log("qxj instance:"+instance.getMessages(instance.currentContactId));
|
|
|
+ setTimeout(() => {
|
|
|
+ var tmessages=MessagesData[contact.id];
|
|
|
+ let messages= tmessages.sort((c1, c2) => c1.sendTime - c2.sendTime);
|
|
|
+ var currentMsgs=instance.getMessages(instance.currentContactId);
|
|
|
+ var sorMsgs=[];
|
|
|
+ var num=0
|
|
|
+ for (let index = currentMsgs.length; index < messages.length; index++) {
|
|
|
+ const item = messages[index];
|
|
|
+ if(num>=5){
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ sorMsgs.push(item);
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ let isEnd = false;
|
|
|
+ if (currentMsgs.length+sorMsgs.length>=messages.length){
|
|
|
+ isEnd = true;
|
|
|
+ }
|
|
|
+ next(MessagesData[contact.id], isEnd);
|
|
|
+ }, 3000);
|
|
|
+ },
|
|
|
+ handleChangeContact(contact, instance) {
|
|
|
+ console.log("qxj contact:"+JSON.stringify(contact));
|
|
|
+ //instance.updateContact(contact);
|
|
|
+ instance.closeDrawer();
|
|
|
+ },
|
|
|
+ handleSend(message, next, file) {
|
|
|
+ console.log(message, next, file);
|
|
|
+ setTimeout(() => {
|
|
|
+ next();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ handleMenuAvatarClick() {
|
|
|
+ console.log("Event:menu-avatar-click");
|
|
|
+ },
|
|
|
+
|
|
|
+ handleMessageClick(e, key, message, instance) {
|
|
|
+ console.log("点击了消息", e, key, message);
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ updateContact() {
|
|
|
+ this.$refs.IMUI.updateContact({
|
|
|
+ id: "contact-3",
|
|
|
+ unread: 10,
|
|
|
+ displayName: generateRandWord(),
|
|
|
+ lastSendTime: getTime(),
|
|
|
+ lastContent: "修改昵称为随机字母",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleChangeMenu() {
|
|
|
+ console.log("Event:change-menu");
|
|
|
+ },
|
|
|
+ openCustomContainer() {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .imui-center{
|
|
|
+ margin-bottom:"60px";
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 80vh;
|
|
|
+ }
|
|
|
+ .lemon-wrapper{
|
|
|
+ border:"1px solid #ddd";
|
|
|
+ height: "60%" !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;
|
|
|
+ }
|
|
|
+
|
|
|
+</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>
|