diff --git a/package.json b/package.json index 737e7ec9..5e7179a7 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "benz-amr-recorder": "^1.1.5", "bpmn-js-token-simulation": "^0.10.0", "camunda-bpmn-moddle": "^7.0.1", - "components": "link:@/components", "cropperjs": "^1.6.1", "crypto-js": "^4.2.0", "dayjs": "^1.11.10", @@ -51,6 +50,7 @@ "fast-xml-parser": "^4.3.2", "highlight.js": "^11.9.0", "jsencrypt": "^3.3.2", + "lodash": "^4.17.21", "lodash-es": "^4.17.21", "min-dash": "^4.1.1", "mitt": "^3.0.1", @@ -63,6 +63,7 @@ "url": "^0.11.3", "video.js": "^7.21.5", "vue": "3.4.20", + "vue-at": "3.0.0-alpha.2", "vue-dompurify-html": "^4.1.4", "vue-i18n": "9.9.1", "vue-router": "^4.3.0", diff --git a/src/assets/imgs/avatar/inform.png b/src/assets/imgs/avatar/inform.png new file mode 100644 index 00000000..ec3166a5 Binary files /dev/null and b/src/assets/imgs/avatar/inform.png differ diff --git a/src/assets/imgs/avatar/jiaqun2x.png b/src/assets/imgs/avatar/jiaqun2x.png new file mode 100644 index 00000000..ecf6f155 Binary files /dev/null and b/src/assets/imgs/avatar/jiaqun2x.png differ diff --git a/src/assets/imgs/avatar/theme2x.png b/src/assets/imgs/avatar/theme2x.png new file mode 100644 index 00000000..9e3d59cc Binary files /dev/null and b/src/assets/imgs/avatar/theme2x.png differ diff --git a/src/components/UserStatus/index.vue b/src/components/UserStatus/index.vue new file mode 100644 index 00000000..404e6f70 --- /dev/null +++ b/src/components/UserStatus/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/constant/emojis.js b/src/constant/emojis.js new file mode 100644 index 00000000..c2e20198 --- /dev/null +++ b/src/constant/emojis.js @@ -0,0 +1,322 @@ +const emojis = [ + '😀', + '😃', + '😄', + '😁', + '😆', + '😅', + '🤣', + '😂', + '🙂', + '🙃', + '😉', + '😊', + '😇', + '😍', + '🤩', + '😘', + '😗', + '😚', + '😙', + '😋', + '😛', + '😜', + '🤪', + '😝', + '🤑', + '🤗', + '🤭', + '🤫', + '🤔', + '🤐', + '🤨', + '😐', + '😑', + '😶', + '😏', + '😒', + '🙄', + '😬', + '🤥', + '😌', + '😔', + '😪', + '🤤', + '😴', + '😷', + '🤒', + '🤕', + '🤢', + '🤮', + '🤧', + '😵', + '🤯', + '🤠', + '😎', + '🤓', + '🧐', + '😕', + '😟', + '🙁', + '😮', + '😯', + '😲', + '😳', + '😦', + '😧', + '😨', + '😰', + '😥', + '😢', + '😭', + '😱', + '😖', + '😣', + '😞', + '😓', + '😩', + '😫', + '😤', + '😡', + '😠', + '🤬', + '😈', + '👿', + '💀', + '💩', + '🤡', + '👹', + '👺', + '👻', + '👽', + '👾', + '🤖', + '😺', + '😸', + '😹', + '😻', + '😼', + '😽', + '🙀', + '😿', + '😾', + '💋', + '👋', + '🤚', + '🖐', + '✋', + '🖖', + '👌', + '🤞', + '🤟', + '🤘', + '🤙', + '👈', + '👉', + '👆', + '🖕', + '👇', + '👍', + '👎', + '✊', + '👊', + '🤛', + '🤜', + '👏', + '🙌', + '👐', + '🤲', + '🤝', + '🙏', + '💅', + '🤳', + '💪', + '👂', + '👃', + '🧠', + '👀', + '👁', + '👅', + '👄', + '👶', + '🧒', + '👦', + '👧', + '🧑', + '👱', + '👨', + '🧔', + '👱‍', + '👨‍', + '👨‍', + '👩', + '👱‍', + '👩‍', + '👩‍', + '👩‍', + '👩‍', + '🧓', + '👴', + '👵', + '🙍', + '🙅', + '🙆', + '💁', + '🙋', + '🙇', + '🙇‍', + '🙇‍', + '🤦', + '🤷', + '🤷‍', + '🤷‍', + '👨‍⚕️', + '👩‍⚕️', + '👨‍🎓', + '👩‍🎓', + '👨‍🏫', + '👩‍🏫', + '👨‍⚖️', + '👩‍⚖️', + '👨‍🌾', + '👩‍🌾', + '👨‍🍳', + '👩‍🍳', + '👨‍🔧', + '👩‍🔧', + '👨‍🏭', + '👩‍🏭', + '👨‍💼', + '👩‍💼', + '👨‍🔬', + '👩‍🔬', + '👨‍💻', + '👩‍💻', + '👨‍🎤', + '👩‍🎤', + '👨‍🎨', + '👩‍🎨', + '👨‍✈️', + '👩‍✈️', + '👨‍🚀', + '👩‍🚀', + '👨‍🚒', + '👩‍🚒', + '👮', + '👮‍♂️', + '👮‍♀️', + '🕵', + '🕵️‍♂️', + '🕵️‍♀️', + '💂', + '💂‍', + '💂‍', + '👷', + '👷‍', + '👷‍', + '🤴', + '👸', + '👳', + '👳‍', + '👳‍', + '👲', + '🧕', + '🤵', + '👰', + '🤰', + '🤱', + '👼', + '🎅', + '🤶', + '🧙', + '🧚', + '🧛', + '🧜', + '🧝', + '🧞', + '🧟', + '💆', + '💇', + '🚶', + '🏃', + '💃', + '🕺', + '🕴', + '👯', + '🧖', + '🧖‍', + '🧖‍', + '🧘', + '👭', + '👫', + '👬', + '💏', + '👨‍', + '👩‍', + '💑', + '👨‍', + '👩‍', + '👪', + '👨‍👩‍👦', + '👨‍👩‍👧', + '👨‍👩‍👧‍👦', + '👨‍👩‍👦‍👦', + '👨‍👩‍👧‍👧', + '👨‍👨‍👦', + '👨‍👨‍👧', + '👨‍👨‍👧‍👦', + '👩‍👩‍👦', + '👩‍👩‍👧', + '👩‍👩‍👧‍👦', + '👩‍👩‍👦‍👦', + '👩‍👩‍👧‍👧', + '👨‍👦', + '👨‍👦‍👦', + '👨‍👧', + '👨‍👧‍👦', + '👨‍👧‍👧', + '👩‍👦', + '👩‍👦‍👦', + '👩‍👧', + '👩‍👧‍👦', + '👩‍👧‍👧', + '🗣', + '👤', + '👥', + '👣', + '🌂', + '☂', + '👓', + '🕶', + '👔', + '👕', + '👖', + '🧣', + '🧤', + '🧥', + '🧦', + '👗', + '👘', + '👙', + '👚', + '👛', + '👜', + '👝', + '🎒', + '👞', + '👟', + '👠', + '👡', + '👢', + '👑', + '👒', + '🎩', + '🎓', + '🧢', + '⛑', + '💄', + '💍', + '💼', +] + +export default emojis diff --git a/src/constant/errorCode.js b/src/constant/errorCode.js new file mode 100644 index 00000000..afea9a83 --- /dev/null +++ b/src/constant/errorCode.js @@ -0,0 +1,77 @@ +// const ERROR_TYPE = { +// login: 1, +// }; + +export default { + /* 登陆相关 + */ + 0: { + 'none': '未知错误！' + }, + 1: { + 'invalid password': '密码错误！', + 'login failed': '登陆失败！', + 'user not found': '该用户不存在！', + }, + 17: { + 'duplicate_unique_property_exists': 'id已存在！', + 'resource_limited': '注册已达上限请开通企业版！', + 'unauthorized': '未开放授权注册！', + 'resource_not_found': '账号不存在！', + }, + 28: { + 'appkey or token error': '未登录！', + }, + 101: { + 'file exceeding maximum limit': '文件大小超出限制（默认10M）！', + 'none': '文件相关未知错误！' + }, + 217: { + 'the user was kicked by other device': '其他端踢出了该账号！', + }, + /* 群组相关 */ + 602: { + 'not in group or chatroom': '已不再该群组中！', + }, + 605: { + 'The chat room dose not exist.': '此群不存在！', + }, + /* 消息相关 */ + 221: { + 'not contact': '非好友关系,不可发送消息！', + }, + 400: { + 'UserId password error.': '用户密码错误！', + 'Please wait a moment while trying to send.': '验证码在有效期内，请勿重复发送！', + 'Image verification code error.': '图片验证码错误，请更换验证码或重新输入！', + 'Image code id cannot be empty.': '请填入图片验证码！', + 'Phone number cannot be empty.': '获取图片验证码请填入手机号！', + 'UserId hfp already exists.': '用户已注册！', + 'phone number illegal': '手机号不合法！', + 'Please send SMS to get mobile phone verification code.': '请发送短信获取手机验证码！', + 'SMS verification code error.': '验证码错误！' + }, + 603: { + 'blocked': '对方已将您加入黑名单！', + 'blacklist': '已在该群黑名单当中！无法加入该群。', + 'already': '已加入该群！' + }, + 504: { + 'exceed recall time limit': '消息超过可撤回时间！', + }, + 507: { + 'muted': '已被禁言！' + }, + 508: { + 'moderation': '内容审核不通过！请检查发送内容。' + } + // e.type === '603' 被拉黑 + // e.type === '605' 群组不存在 + // e.type === '602' 不在群组或聊天室中 + // e.type === '504' 撤回消息时超出撤回时间 + // e.type === '505' 未开通消息撤回 + // e.type === '506' 没有在群组或聊天室白名单 + // e.type === '501' 消息包含敏感词 + // e.type === '502' 被设置的自定义拦截捕获 + // e.type === '503' 未知错误 +} diff --git a/src/constant/index.js b/src/constant/index.js new file mode 100644 index 00000000..5457b403 --- /dev/null +++ b/src/constant/index.js @@ -0,0 +1,14 @@ +import errorCode from './errorCode' +import onLineStatus from './onLineStatus' +import messageType from './messageType' +import informType from './informType' +import emojis from './emojis' +import warningText from './warningText' +export { + errorCode, + onLineStatus, + messageType, + informType, + emojis, + warningText, +} diff --git a/src/constant/informType.js b/src/constant/informType.js new file mode 100644 index 00000000..a979573a --- /dev/null +++ b/src/constant/informType.js @@ -0,0 +1,52 @@ +const INFORM_NAME = { + FRIEND_INVITE: '好友申请', + FRIEND_BUILD: '已成为好友', + FRIEND_DELETED: '好友关系解除', + FRIEND_APPLY_REFUSE: '好友申请被拒绝', + FRIEND_APPLY_AGREE: '好友申请已通过', + GROUP_JOIN_SUCCESS: '成员入群成功', + GROUP_QUIT_SUCCESS: '成员退出群组成功', + GROUP_INVITE_JOIN: '邀请加入群组', + GROUP_REQUESTTOJOIN: '申请加入群组', + GROUP_REMOVE_MEMBER: '移出了群成员', + GROUP_DIRECT_MEMBER: '被直接拉入群组', + GROUP_UPDATE_ANNOUNCEMENT: '更新了群组公告', + GROUP_SET_ADMIN: '设定为管理员', + GROUP_REMOVE_ADMIN: '移除管理员', + GROUP_MUTE_MEMBER: '禁言成员', + GROUP_UNMUTE_MEMBER: '移除成员禁言', + GROUP_DESTORY: '解散群组', + GROUP_ACCEPTREQUEST: '同意入群申请', + GROUP_UPDATE_INFO: '更新群组信息', + GROUP_UPDATE_MEMBER_ATTRIBUTES: '群组成员属性更新' +} +const INFORM_TYPE = { + subscribe: INFORM_NAME.FRIEND_INVITE, + subscribed: INFORM_NAME.FRIEND_BUILD, + unsubscribed: INFORM_NAME.FRIEND_DELETED, + other_person_refuse: INFORM_NAME.FRIEND_APPLY_REFUSE, + other_person_agree: INFORM_NAME.FRIEND_APPLY_AGREE, + memberPresence: INFORM_NAME.GROUP_JOIN_SUCCESS, + memberAbsence: INFORM_NAME.GROUP_QUIT_SUCCESS, + inviteToJoin: INFORM_NAME.GROUP_INVITE_JOIN, + removeMember: INFORM_NAME.GROUP_REMOVE_MEMBER, + directJoined: INFORM_NAME.GROUP_DIRECT_MEMBER, + updateAnnouncement: INFORM_NAME.GROUP_UPDATE_ANNOUNCEMENT, + setAdmin: INFORM_NAME.GROUP_SET_ADMIN, + removeAdmin: INFORM_NAME.GROUP_REMOVE_ADMIN, + muteMember: INFORM_NAME.GROUP_MUTE_MEMBER, + unmuteMember: INFORM_NAME.GROUP_UNMUTE_MEMBER, + destroy: INFORM_NAME.GROUP_DESTORY, + requestToJoin: INFORM_NAME.GROUP_REQUESTTOJOIN, + acceptRequest: INFORM_NAME.GROUP_ACCEPTREQUEST, + updateInfo: INFORM_NAME.GROUP_UPDATE_INFO, + memberAttributesUpdate: INFORM_NAME.GROUP_UPDATE_MEMBER_ATTRIBUTES +} +const INFORM_FROM = { + FRIEND: 'friend', + GROUP: 'group' +} +export default { + INFORM_TYPE, + INFORM_FROM +} diff --git a/src/constant/messageType.js b/src/constant/messageType.js new file mode 100644 index 00000000..4164797d --- /dev/null +++ b/src/constant/messageType.js @@ -0,0 +1,43 @@ +const SESSION_MESSAGE_TYPE = { + img: '[图片]', + file: '[文件]', + audio: '[语音]', + loc: '[位置]' +} + +const CUSTOM_TYPE = { + userCard: '个人名片' +} +const ALL_MESSAGE_TYPE = { + TEXT: 'txt', + IMAGE: 'img', + AUDIO: 'audio', + LOCAL: 'loc', + VIDEO: 'video', + FILE: 'file', + CUSTOM: 'custom', + CMD: 'cmd', + INFORM: 'inform' //这个类型不在环信消息类型内，属于自己定义的一种系统通知类的消息。 +} +const CHAT_TYPE = { + SINGLE: 'singleChat', + GROUP: 'groupChat' +} + +const MENTION_ALL = { + TEXT: '所有人', + VALUE: 'ALL' +} +const CHANGE_MESSAGE_BODAY_TYPE = { + RECALL: 0, + DELETE: 1, + MODIFY: 2 +} +export default { + SESSION_MESSAGE_TYPE, + CUSTOM_TYPE, + ALL_MESSAGE_TYPE, + CHAT_TYPE, + MENTION_ALL, + CHANGE_MESSAGE_BODAY_TYPE +} diff --git a/src/constant/onLineStatus.js b/src/constant/onLineStatus.js new file mode 100644 index 00000000..19b5e70b --- /dev/null +++ b/src/constant/onLineStatus.js @@ -0,0 +1,11 @@ +const onLineStatus = { + Online: { label: '在线', style: 'background-color:#49FD1D' }, + Leave: { label: '离开', style: 'background-color:#4E4239' }, + Cloaking: { + label: '勿扰', + style: 'background-color:#F27014', + }, + Offline: { label: '离线', style: 'background-color:#BEC1BD' }, +} + +export default onLineStatus diff --git a/src/constant/warningText.js b/src/constant/warningText.js new file mode 100644 index 00000000..536864c3 --- /dev/null +++ b/src/constant/warningText.js @@ -0,0 +1,39 @@ +const SWINDLER_GO_DIE = [ + '时刻绷紧防范之弦，谨防新型电信诈骗。', + '号码陌⽣勿轻接，虚拟电话设陷阱。', + '飞来⼤奖莫惊喜，让您掏钱洞⽆底。', + '不存贪婪⼼，诈骗难得逞。', + '提⾼防骗意识，增强防范能⼒，构筑电信诈骗“防⽕墙。', + '骗⼈之⼼不可有，防骗之⼼不可⽆。', + '⽹上汇款需警惕，电话核实莫⼤意。', + '执法办案有规范，怎会汇款到个⼈。', + '不明电话及时挂，可疑短信不要回。', + '⽹络购物便利多，⽀付流程要仔细。', + '投资理财和股票，多是骗⼦设的套。', + '不信陌⽣短信，拒接陌⽣来电，让骗⼦⽆从下⼿。', + '⼀不贪⼆不占，诈骗再诡玩不转。', + '遇到恐吓要淡定，说你违法莫慌张，⼀旦难分真与假，警方电话110。', + '陌⽣来电要提防，多⽅确认防上当。', + '致富⼗年功，诈骗⼀场空。', + '积极加强⾃我防范意识，共同提⾼识骗防骗能⼒。', + '防范⽹络的骗术，不贪便宜要记住。', + ' 和谐⽹络你我共享，电信诈骗⼤家共防。', + '真假⽹店难分辨，购物不慎就被骗。', + '个⼈信息顶重要，密码账号保管好。', + '飞来⼤奖莫惊喜，让你掏钱洞⽆底。', + '安全账户⼦虚有，⼤额汇款要三思。', + '异地刷卡消费现，不要着急忙给钱。', + '电话通知接传票，实为骗钱设圈套。', + '刷卡消费莫离眼，防⽌盗刷盯着点。', + '⼼中⽆贪念，骗局远⾝边。', + '转账汇款须谨慎，万元以上到柜⾯。', + '陌⽣电话勿轻信，对⽅⾝份要核清。', + '电信诈骗不难防，不给不要不上当。', + '陌⽣信息不要理，以防害⼈⼜害⼰。', +] + +const EASEIM_HINT = + '【安全提示】本应用仅用于环信产品功能开发测试，请勿用于非法用途。任何涉及转账、汇款、裸聊、网恋、网购退款、投资理财等统统都是诈骗，请勿相信！' + +const WARM_TIP = '【温馨提示】该群仅供试用，72小时后将被删除！' +export default { SWINDLER_GO_DIE, EASEIM_HINT, WARM_TIP } diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 64148b83..d4e129f3 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -593,7 +593,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ children: [ { // 会话详情 - path: 'informdetails', + path: 'informDetails', name: 'InformDetails', meta: { title: '通知详情', diff --git a/src/styles/iconfont/demo.css b/src/styles/iconfont/demo.css new file mode 100644 index 00000000..a67054a0 --- /dev/null +++ b/src/styles/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/styles/iconfont/demo_index.html b/src/styles/iconfont/demo_index.html new file mode 100644 index 00000000..763e2737 --- /dev/null +++ b/src/styles/iconfont/demo_index.html @@ -0,0 +1,345 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    emoji
    +
    
    +
    • + +
  • + 󰈃 +
    3.1电话
    +
    󰈃
    +
    • + +
  • + +
    语音
    +
    
    +
    • + +
  • + +
    视频
    +
    
    +
    • + +
  • + +
    垃圾桶
    +
    
    +
    • + +
  • + +
    文件
    +
    
    +
    • + +
  • + +
    图库
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1654496599109') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + emoji +
    +
    .icon-emoji +
    +
    • + +
  • + +
    + 3.1电话 +
    +
    .icon-31dianhua +
    +
    • + +
  • + +
    + 语音 +
    +
    .icon-01 +
    +
    • + +
  • + +
    + 视频 +
    +
    .icon-video +
    +
    • + +
  • + +
    + 垃圾桶 +
    +
    .icon-lajitong +
    +
    • + +
  • + +
    + 文件 +
    +
    .icon-wenjian +
    +
    • + +
  • + +
    + 图库 +
    +
    .icon-tuku +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    emoji
    +
    #icon-emoji
    +
    • + +
  • + +
    3.1电话
    +
    #icon-31dianhua
    +
    • + +
  • + +
    语音
    +
    #icon-01
    +
    • + +
  • + +
    视频
    +
    #icon-video
    +
    • + +
  • + +
    垃圾桶
    +
    #icon-lajitong
    +
    • + +
  • + +
    文件
    +
    #icon-wenjian
    +
    • + +
  • + +
    图库
    +
    #icon-tuku
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/styles/iconfont/iconfont.css b/src/styles/iconfont/iconfont.css new file mode 100644 index 00000000..3ebf9f52 --- /dev/null +++ b/src/styles/iconfont/iconfont.css @@ -0,0 +1,41 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1654496599109') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-emoji:before { + content: "\e64a"; +} + +.icon-31dianhua:before { + content: "\f0203"; +} + +.icon-01:before { + content: "\e610"; +} + +.icon-video:before { + content: "\e61f"; +} + +.icon-lajitong:before { + content: "\e615"; +} + +.icon-wenjian:before { + content: "\e69f"; +} + +.icon-tuku:before { + content: "\e712"; +} + diff --git a/src/styles/iconfont/iconfont.js b/src/styles/iconfont/iconfont.js new file mode 100644 index 00000000..979bc037 --- /dev/null +++ b/src/styles/iconfont/iconfont.js @@ -0,0 +1,73 @@ +/* eslint-disable */ +!(function (c) { + var t, + e, + l, + o, + n, + a = + '', + i = (i = document.getElementsByTagName('script'))[ + i.length - 1 + ].getAttribute('data-injectcss'), + h = function (c, t) { + t.parentNode.insertBefore(c, t) + } + if (i && !c.__iconfont__svg__cssinject__) { + c.__iconfont__svg__cssinject__ = !0 + try { + document.write( + '' + ) + } catch (c) { + console && console.log(c) + } + } + function d() { + n || ((n = !0), l()) + } + function s() { + try { + o.documentElement.doScroll('left') + } catch (c) { + return void setTimeout(s, 50) + } + d() + } + ;(t = function () { + var c, + t = document.createElement('div') + ;(t.innerHTML = a), + (a = null), + (t = t.getElementsByTagName('svg')[0]) && + (t.setAttribute('aria-hidden', 'true'), + (t.style.position = 'absolute'), + (t.style.width = 0), + (t.style.height = 0), + (t.style.overflow = 'hidden'), + (t = t), + (c = document.body).firstChild + ? h(t, c.firstChild) + : c.appendChild(t)) + }), + document.addEventListener + ? ~['complete', 'loaded', 'interactive'].indexOf( + document.readyState + ) + ? setTimeout(t, 0) + : ((e = function () { + document.removeEventListener('DOMContentLoaded', e, !1), + t() + }), + document.addEventListener('DOMContentLoaded', e, !1)) + : document.attachEvent && + ((l = t), + (o = c.document), + (n = !1), + s(), + (o.onreadystatechange = function () { + 'complete' == o.readyState && + ((o.onreadystatechange = null), d()) + })) +})(window) +/* eslint-disable */ diff --git a/src/styles/iconfont/iconfont.json b/src/styles/iconfont/iconfont.json new file mode 100644 index 00000000..5ef211ee --- /dev/null +++ b/src/styles/iconfont/iconfont.json @@ -0,0 +1,58 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "29929", + "name": "emoji", + "font_class": "emoji", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "201577", + "name": "3.1电话", + "font_class": "31dianhua", + "unicode": "f0203", + "unicode_decimal": 983555 + }, + { + "icon_id": "1236846", + "name": "语音", + "font_class": "01", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "3878694", + "name": "视频", + "font_class": "video", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "7587956", + "name": "垃圾桶", + "font_class": "lajitong", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "20710439", + "name": "文件", + "font_class": "wenjian", + "unicode": "e69f", + "unicode_decimal": 59039 + }, + { + "icon_id": "27334037", + "name": "图库", + "font_class": "tuku", + "unicode": "e712", + "unicode_decimal": 59154 + } + ] +} diff --git a/src/styles/iconfont/iconfont.ttf b/src/styles/iconfont/iconfont.ttf new file mode 100644 index 00000000..76f389da Binary files /dev/null and b/src/styles/iconfont/iconfont.ttf differ diff --git a/src/views/im/Conversation/components/ConversationList.vue b/src/views/im/Conversation/components/ConversationList.vue index d1c35400..54da7555 100644 --- a/src/views/im/Conversation/components/ConversationList.vue +++ b/src/views/im/Conversation/components/ConversationList.vue @@ -1,31 +1,49 @@ + diff --git a/src/views/im/Message/components/inputBox/index.scss b/src/views/im/Message/components/inputBox/index.scss new file mode 100644 index 00000000..4cb5c384 --- /dev/null +++ b/src/views/im/Message/components/inputBox/index.scss @@ -0,0 +1,107 @@ +.chat_func_box { + position: relative; + display: flex; + align-items: center; + height: 42px; + width: 100%; + background-color: #f7f7f7; + border-top: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; + line-height: 12px; + + .chat_func_icon { + width: 25px; + height: 25px; + } + + .emojis_box { + position: absolute; + left: 15px; + top: -180px; + width: 330px; + height: 150px; + border-radius: 5px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + background: #fff; + padding: 15px 5px; + + .emoji { + display: inline-block; + width: 25px; + height: 25px; + text-align: center; + line-height: 25px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + } + + .loading_box { + position: absolute; + right: 5px; + top: 0; + width: 50px; + height: 100%; + font-size: 15px; + } +} + +/* loading svg大小调整 */ +::v-deep .circular { + margin-top: 8px; + width: 25px; + height: 25px; +} + +.chat_content_editable { + font-family: 'PingFang SC'; + width: 100%; + box-sizing: border-box; + min-height: 100px; + border: none; + background: none; + letter-spacing: 0.5px; + resize: none; + padding: 10px 20px; + font-size: 14px; + line-height: 10px; +} + +.no_content_send_btn { + position: absolute; + bottom: 20px; + right: 20px; + width: 80px; + opacity: 0.5; +} + +.chat_send_btn { + position: absolute; + bottom: 20px; + right: 20px; + width: 80px; +} + +.iconfont { + margin-right: 12px; + transition: all 0.3s ease; + cursor: pointer; + + &:hover { + transform: scale(1.2); + color: #1b83f9; + } +} + +.record_box { + width: 250px; + height: 180px; +} diff --git a/src/views/im/Message/components/inputBox/index.vue b/src/views/im/Message/components/inputBox/index.vue new file mode 100644 index 00000000..7ea2d2ee --- /dev/null +++ b/src/views/im/Message/components/inputBox/index.vue @@ -0,0 +1,453 @@ + + + + diff --git a/src/views/im/Message/components/messageList/index.scss b/src/views/im/Message/components/messageList/index.scss new file mode 100644 index 00000000..da1d2102 --- /dev/null +++ b/src/views/im/Message/components/messageList/index.scss @@ -0,0 +1,303 @@ +.messageList_box { + width: 100%; + + .message_box_item { + position: relative; + display: flex; + margin: 32px auto; + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.4px; + color: #333333; + + .message_item_time { + position: absolute; + top: -25px; + left: 0; + right: 0; + margin: auto; + width: 74px; + height: 20px; + color: #adadad; + font-weight: 400; + font-size: 10px; + line-height: 20px; + } + + .message_item_avator { + width: 38px; + height: 38px; + } + .message_box_card { + display: flex; + flex-direction: column; + max-width: 50%; + min-height: 34px; + } + .message_box_nickname { + font-size: 14px; + line-height: 20px; + letter-spacing: 0.4px; + color: #9a9a9a; + margin: 0 10px; + } + .message_box_content { + display: flex; + align-items: center; + margin: 0 6px; + word-break: break-all; + /* 通用音频播放样式 */ + .message_box_content_audio { + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 250px; + min-width: 80px; + font-size: 12px; + + .audio_length_text { + font-family: 'Avenir'; + font-style: normal; + font-weight: 400; + font-size: 12px; + } + } + + /* 对方音频播放样式 */ + .message_box_content_audio_other { + flex-direction: row; + + @keyframes other_play_icon { + 0% { + background: url('@/assets/images/playAudio/msg_recv_audio02@3x.png') + no-repeat; + + background-size: 100% 100%; + } + + 50% { + background: url('@/assets/images/playAudio/msg_recv_audio01@3x.png') + no-repeat; + + background-size: 100% 100%; + } + + 100% { + background: url('@/assets/images/playAudio/msg_recv_audio@3x.png') + no-repeat; + background-size: 100% 100%; + } + } + + .play_audio_icon_other { + width: 30px; + height: 30px; + background: url('@/assets/images/playAudio/msg_recv_audio@3x.png') + no-repeat; + margin-right: 10px; + } + + .start_play_audio { + animation: other_play_icon 2s; + animation-iteration-count: infinite; + } + } + + /* 己方音频播放样式 */ + .message_box_content_audio_mine { + flex-direction: row-reverse; + + @keyframes mine_play_icon { + 0% { + background: url('@/assets/images/playAudio/msg_send_audio02@3x.png') + no-repeat; + + background-size: 100% 100%; + } + + 50% { + background: url('@/assets/images/playAudio/msg_send_audio01@3x.png') + no-repeat; + + background-size: 100% 100%; + } + + 100% { + background: url('@/assets/images/playAudio/msg_send_audio@3x.png') + no-repeat; + background-size: 100% 100%; + } + } + + .play_audio_icon_mine { + width: 30px; + height: 30px; + background-size: 100% 100%; + background: url('@/assets/images/playAudio/msg_send_audio@3x.png') + no-repeat; + margin-left: 10px; + } + + .start_play_audio { + animation: mine_play_icon 2s; + animation-iteration-count: infinite; + } + } + + /* 文件消息样式 */ + .message_box_content_file { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 200px; + min-height: 60px; + max-height: 120px; + padding: 10px; + + .file_text_box { + width: 75%; + height: 80%; + display: flex; + flex-direction: column; + justify-content: space-around; + + .file_name { + width: 120px; + white-space: wrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 15px; + font-weight: bold; + } + + .file_size { + font-size: 13px; + } + + .file_download { + width: 100%; + color: #333333; + font-size: 13px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + transform: scale(0.9); + } + } + } + + .icon-wenjian { + font-size: 50px; + color: #8d8a8a; + } + } + + /* 自定义消息 */ + .message_box_content_custom { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 200px; + min-height: 60px; + max-height: 120px; + padding: 10px; + overflow: hidden; + + .user_card_main { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + color: #333333; + font-size: 17px; + + .nickname { + display: inline-block; + // width: 100%; + margin-left: 10px; + height: 35px; + line-height: 35px; + } + } + } + + /* 个人名片 */ + } + .quote_msg_avtive { + animation: twinkle 0.4s infinite alternate; + } + .quote_msg_avtive ::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 5px; + background-color: rgba(247, 169, 35, 0.5); + } + @keyframes twinkle { + 0% { + opacity: 0.3; + } + 50% { + opacity: 0.6; + } + 100% { + opacity: 0.9; + } + } + .message_box_content_other { + background: #fff; + border-radius: 8px 8px 8px 0px; + } + + .message_box_content_mine { + background: #c1e3fc; + border-radius: 8px 0px 8px 8px; + } + } + + /* 撤回或者系统通知类消息 */ + .recall_style, + .inform_style { + height: 60px; + text-align: center; + color: #aaaaaa; + font-size: 10px; + margin: 5px 0; + + .reEdit { + color: #3e91fa; + margin-left: 3px; + cursor: pointer; + } + } +} +.message_quote_box { + padding: 5px 10px; + font-size: 7px; + background-color: #e7e7e7; + border-radius: 5px; + margin-top: 5px; + color: #a0a0a0; + cursor: pointer; + p { + word-break: break-all; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } +} +:deep(.el-input__wrapper) { + border-radius: 5px; +} + +:deep(.el-dialog__header) { + background: #f2f2f2; + margin: 0; +} diff --git a/src/views/im/Message/components/messageList/index.vue b/src/views/im/Message/components/messageList/index.vue new file mode 100644 index 00000000..ae992f32 --- /dev/null +++ b/src/views/im/Message/components/messageList/index.vue @@ -0,0 +1,303 @@ + + + + diff --git a/src/views/im/Message/components/suit/audio.vue b/src/views/im/Message/components/suit/audio.vue new file mode 100644 index 00000000..6d4e6b72 --- /dev/null +++ b/src/views/im/Message/components/suit/audio.vue @@ -0,0 +1,237 @@ + + + + diff --git a/src/views/im/Message/components/suit/modifyMessage.vue b/src/views/im/Message/components/suit/modifyMessage.vue new file mode 100644 index 00000000..61c3b942 --- /dev/null +++ b/src/views/im/Message/components/suit/modifyMessage.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/views/im/Message/components/suit/msgQuote.vue b/src/views/im/Message/components/suit/msgQuote.vue new file mode 100644 index 00000000..98e3a9a5 --- /dev/null +++ b/src/views/im/Message/components/suit/msgQuote.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/src/views/im/Message/components/suit/previewSendImg.vue b/src/views/im/Message/components/suit/previewSendImg.vue new file mode 100644 index 00000000..e4538c4c --- /dev/null +++ b/src/views/im/Message/components/suit/previewSendImg.vue @@ -0,0 +1,68 @@ + + + + diff --git a/src/views/im/Message/components/suit/reportMessage.vue b/src/views/im/Message/components/suit/reportMessage.vue new file mode 100644 index 00000000..c4b0db70 --- /dev/null +++ b/src/views/im/Message/components/suit/reportMessage.vue @@ -0,0 +1,145 @@ + + + + + + \ No newline at end of file diff --git a/src/views/im/Message/index.scss b/src/views/im/Message/index.scss new file mode 100644 index 00000000..90941a55 --- /dev/null +++ b/src/views/im/Message/index.scss @@ -0,0 +1,129 @@ +.app_container { + height: 100%; + border-left: 1px solid #e6e6e6; +} + +.chat_message_header { + position: relative; + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + height: 61px; + background: #f9f9f9; + border-radius: 0 3px 0 0; + border-bottom: 1px solid #e6e6e6; + + .chat_user_box { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + height: 20px; + max-width: 80%; + + .chat_user_name { + font-family: 'PingFang SC'; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-style: normal; + font-weight: 400; + font-size: 17px; + line-height: 20px; + letter-spacing: 0.3px; + color: #333333; + } + } + + .more { + display: flex; + width: 35px; + height: 100%; + align-items: center; + justify-content: center; + font-size: 20px; + cursor: pointer; + transition: all 0.3s; + + &:hover { + transform: scale(1.1); + } + } +} + +.easeim_safe_tips { + position: relative; + padding: 12px 20px; + background-color: #fff4e6; + color: #ff8c39; + line-height: 18px; + font-family: PingFang SC; + font-style: normal; + font-weight: 400; + text-align: justify; + font-size: 12px; + border: none; + + .easeim_close_tips { + position: absolute; + right: 10px; + top: 10px; + } +} + +.chat_message_main { + padding: 0; + background: #f9f9f9; + + .main_container { + padding: 0 20px; + height: 100%; + // overflow-y: scroll; + + .chat_message_tips { + margin-top: 5px; + width: 100%; + height: 30px; + text-align: center; + line-height: 30px; + + .load_more_msg { + width: 200px; + height: 30px; + border-radius: 20px; + margin: 0 auto; + background: rgba(114, 112, 112, 0.143); + font-size: 13px; + letter-spacing: 0.5px; + // box-shadow: 1px 1px 1px 1px rgba(128, 128, 128, 0.193); + } + } + } +} + +.chat_message_inputbar { + position: relative; + width: 100%; + height: 25%; + padding: 0; + background-color: #f9f9f9; + border-radius: 0 0 3px 0; +} + +::v-deep .el-drawer { + margin-top: 60px; + width: 150px; + height: calc(100% - 60px); + border-radius: 5px 0 0 5px; + + .el-drawer__header { + margin-bottom: 0; + padding-top: 0; + } + + .el-drawer__body { + padding: 0; + // padding-left: 16px; + } +} diff --git a/src/views/im/Message/index.vue b/src/views/im/Message/index.vue index 63cf316b..9af02c23 100644 --- a/src/views/im/Message/index.vue +++ b/src/views/im/Message/index.vue @@ -1,11 +1,182 @@