github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-27 20:30:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 调整消息标签位置

Browse Source
This commit is contained in:
kuaifan 2022-07-04 14:35:36 +08:00
parent 2cf68e96c3
commit e5cbeb032e
13 changed files with 178 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/js/components/UserAvatar.vue
View File

@ -10,6 +10,7 @@
<p>{{$L('昵称')}}: {{user.nickname}}</p>
<p>{{$L('职位/职称')}}: {{user.profession || '-'}}</p>
<p v-if="user.disable_at"><strong>{{$L('离职时间')}}: {{user.disable_at}}</strong></p>
<slot name="end"/>
<div v-if="userId != userid && showIconMenu" class="avatar-icons">
<Icon type="ios-chatbubbles" @click="openDialog"/>
</div>

115
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -25,7 +25,11 @@
<Icon v-else class="icon-avatar" type="ios-people" />
</template>
<div v-else-if="dialogData.dialog_user" class="user-avatar">
<UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
<UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="44">
<p v-if="dialogData.type === 'user' && dialogData.online_state !== true" slot="end">
{{$L(dialogData.online_state)}}
</p>
</UserAvatar>
</div>
<Icon v-else class="icon-avatar" type="md-person" />
</div>
@ -37,17 +41,24 @@
<h2>{{dialogData.name}}</h2>
<em v-if="peopleNum > 0">({{peopleNum}})</em>
</div>
<template v-if="dialogData.type === 'group'">
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
</div>
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
</div>
</template>
<div v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
{{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
</div>
<ul class="title-desc">
<li v-if="dialogData.type === 'user'" :class="[dialogData.online_state === true ? 'online' : 'offline']">
{{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
</li>
</ul>
<ul v-if="msgTags.length > 1" class="title-tags scrollbar-hidden">
<li
v-for="item in msgTags"
:key="item.type"
:class="{
[item.type || 'msg']: true,
active: msgType === item.type,
}"
@click="onMsgType(item.type)">
<i class="no-dark-content"></i>
<span>{{$L(item.label)}}</span>
</li>
</ul>
</div>
</div>
@ -64,23 +75,6 @@
<i class="taskfont dialog-create" @click="openCreateGroup">&#xe646;</i>
</ETooltip>
</div>
<transition name="fade">
<div v-if="navTagShow" class="nav-tags scrollbar-hidden">
<ul>
<li
v-for="item in msgTags"
:key="item.type"
:class="{
[`tag-${item.type||'msg'}`]: true,
active: msgType === item.type,
}"
@click="msgType=item.type">
<i class="no-dark-content"></i>
<span>{{$L(item.label)}}</span>
</li>
</ul>
</div>
</transition>
</slot>
</div>
@ -489,19 +483,25 @@ export default {
msgTags() {
const array = [
{icon: '&#xe6eb;', type: '', label: '消息'},
{type: '', label: '消息'},
];
if (this.dialogData.has_tag) {
array.push({icon: '&#xe61e;', type: 'tag', label: '标注'})
array.push({type: 'tag', label: '标注'})
}
if (this.dialogData.has_image) {
array.push({icon: '&#xe7bc;', type: 'image', label: '图片'})
array.push({type: 'image', label: '图片'})
}
if (this.dialogData.has_file) {
array.push({icon: '&#xe7c0;', type: 'file', label: '文件'})
array.push({type: 'file', label: '文件'})
}
if (this.dialogData.has_link) {
array.push({icon: '&#xe786;', type: 'link', label: '链接'})
array.push({type: 'link', label: '链接'})
}
if (this.dialogData.group_type === 'project') {
array.push({type: 'project', label: '打开项目'})
}
if (this.dialogData.group_type === 'task') {
array.push({type: 'task', label: '打开任务'})
}
return array
},
@ -513,12 +513,8 @@ export default {
return null
},
navTagShow() {
return this.dialogMsgList.length > 10 && this.msgTags.length > 1 && this.windowScrollY === 0
},
scrollerClass() {
return !this.$slots.head && this.navTagShow ? 'default-header' : null
return !this.$slots.head && this.msgTags.length > 1 ? 'default-header' : null
},
pasteWrapperClass() {
@ -742,10 +738,6 @@ export default {
});
} else {
// 发送
this.msgType = '';
this.onActive();
this.onToBottom();
//
const tempId = $A.randNum(1000000000, 9999999999);
const tempMsg = {
id: tempId,
@ -762,7 +754,10 @@ export default {
tempMsg.type = 'loading';
tempMsg.msg = { };
}
this.tempMsgs.push(tempMsg);
this.tempMsgs.push(tempMsg)
this.msgType = ''
this.onActive();
this.$nextTick(this.onToBottom)
//
this.$store.dispatch("call", {
url: 'dialog/msg/sendtext',
@ -786,10 +781,6 @@ export default {
* @param msg {base64, duration}
*/
sendRecord(msg) {
this.msgType = '';
this.onActive();
this.onToBottom();
//
const tempId = $A.randNum(1000000000, 9999999999);
const tempMsg = {
id: tempId,
@ -800,7 +791,10 @@ export default {
userid: this.userId,
msg,
}
this.tempMsgs.push(tempMsg);
this.tempMsgs.push(tempMsg)
this.msgType = ''
this.onActive()
this.$nextTick(this.onToBottom)
//
this.$store.dispatch("call", {
url: 'dialog/msg/sendrecord',
@ -990,9 +984,6 @@ export default {
chatFile(type, file) {
switch (type) {
case 'progress':
this.onActive();
this.onToBottom();
//
this.tempMsgs.push({
id: file.tempId,
dialog_id: this.dialogData.id,
@ -1000,7 +991,9 @@ export default {
type: 'loading',
userid: this.userId,
msg: { },
});
})
this.onActive()
this.$nextTick(this.onToBottom)
break;
case 'error':
@ -1269,6 +1262,22 @@ export default {
}
},
onMsgType(type) {
switch (type) {
case 'project':
this.openProject()
break;
case 'task':
this.openTask()
break;
default:
this.msgType = type
break;
}
},
onLongpress({event, el, msgData}) {
this.operateVisible = this.operateItem.id === msgData.id;
this.operateItem = $A.isJson(msgData) ? msgData : {};

247
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -94,9 +94,9 @@
.user-avatar,
.icon-avatar {
width: 42px;
height: 42px;
margin: 2px;
width: 44px;
height: 44px;
margin-right: 2px;
flex-grow: 0;
flex-shrink: 0;
}
@ -170,26 +170,98 @@
}
}
.sub-title {
flex-shrink: 0;
font-size: 12px;
line-height: 20px;
padding-top: 2px;
color: #aaaaaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.title-desc {
display: none;
align-items: center;
&.pointer {
cursor: pointer;
> li {
font-size: 12px;
list-style: none;
line-height: 16px;
padding-top: 2px;
color: #aaaaaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
transform: scale(0.9);
&:hover {
color: #888888;
&.online {
color: $primary-color;
}
}
}
&.online {
color: $primary-color;
.title-tags {
display: flex;
align-items: center;
> li {
font-size: 12px;
list-style: none;
line-height: 22px;
margin-top: 5px;
margin-right: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 5px;
color: $primary-title-color;
border-radius: 5px;
> i {
flex-shrink: 0;
width: 14px;
height: 14px;
line-height: 14px;
font-size: 14px;
margin-right: 3px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
> span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.file i {
background-image: url("../images/dialog/file.svg");
}
&.image i {
background-image: url("../images/dialog/image.svg");
}
&.link i {
background-image: url("../images/dialog/link.svg");
}
&.msg i {
background-image: url("../images/dialog/msg.svg");
}
&.tag i {
background-image: url("../images/dialog/tag.svg");
}
&.project i {
background-image: url("../images/dialog/project.svg");
}
&.task i {
background-image: url("../images/dialog/task.svg");
}
&.active {
color: $primary-color;
background-color: rgba($primary-color, 0.18);
}
}
}
}
@ -207,111 +279,6 @@
display: none;
}
}
.nav-tags {
position: absolute;
top: 68px;
left: 12px;
right: 12px;
z-index: 2;
height: 56px;
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: auto;
background-color: #ffffff;
> ul {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
> li {
list-style: none;
display: flex;
align-items: center;
margin: 0 8px;
padding: 4px 8px;
color: $primary-title-color;
background-color: #F2F2F2;
border: 1px solid #F2F2F2;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
box-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
@media (max-width: 640px) {
margin: 0 6px;
}
@media (max-width: 375px) {
margin: 0 4px;
}
> i {
width: 14px;
height: 14px;
margin-right: 4px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
> span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.tag-file i {
background-image: url("../images/dialog/file.svg");
}
&.tag-image i {
background-image: url("../images/dialog/image.svg");
}
&.tag-link i {
background-image: url("../images/dialog/link.svg");
}
&.tag-msg i {
background-image: url("../images/dialog/msg.svg");
}
&.tag-tag i {
background-image: url("../images/dialog/tag.svg");
}
&.active {
color: #ffffff;
background-color: $primary-color;
border-color: $primary-color;
&.tag-file i {
background-image: url("../images/dialog/file-white.svg");
}
&.tag-image i {
background-image: url("../images/dialog/image-white.svg");
}
&.tag-link i {
background-image: url("../images/dialog/link-white.svg");
}
&.tag-msg i {
background-image: url("../images/dialog/msg-white.svg");
}
&.tag-tag i {
background-image: url("../images/dialog/tag-white.svg");
}
}
}
}
}
}
.dialog-scroller {
@ -319,10 +286,6 @@
position: relative;
padding: 16px 32px 0;
&.default-header {
padding-top: 56px;
}
.dialog-shake {
animation: ani-dialog-shake 600ms ease-in-out;
animation-delay: 200ms;
@ -850,7 +813,6 @@
height: 20px;
box-sizing: content-box;
justify-content: center;
padding-top: 16px;
.common-loading {
margin: 0;
@ -1338,17 +1300,30 @@
.main-title {
justify-content: center;
}
.sub-title {
line-height: 18px;
.title-desc {
display: flex;
justify-content: center;
}
.title-tags {
position: absolute;
left: 0;
right: 0;
top: 48px;
z-index: 1;
padding: 0 8px;
background-color: #f8f8f8;
height: 32px;
align-items: flex-start;
overflow-x: auto;
> li {
flex-shrink: 0;
line-height: 24px;
}
}
}
}
}
.nav-tags {
top: 52px;
height: 46px;
}
}
.dialog-scroller {
padding-right: 14px;
@ -1358,7 +1333,7 @@
background-color: #ffffff;
&.default-header {
padding-top: 46px;
margin-top: 30px;
}
.dialog-item {

BIN
resources/assets/statics/public/css/fonts/taskfont.ttf
View File

Binary file not shown.

BIN
resources/assets/statics/public/css/fonts/taskfont.woff
View File

Binary file not shown.

BIN
resources/assets/statics/public/css/fonts/taskfont.woff2
View File

Binary file not shown.

16
resources/assets/statics/public/images/dialog/file-white.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.5;fill:#FFFFFF;}
.st1{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M220.3,750h583.6c37.4,0,68-30.6,68-68V290c0-37.4-30.6-68-68-68H220.3c-37.4,0-68,30.6-68,68v392
C152.2,719.4,182.8,750,220.3,750z"/>
<path class="st1" d="M850,871.8H174c-48.2,0-87.2-39.1-87.2-87.2V239.4c0-48.2,39.1-87.2,87.2-87.2h274.4
c37.4,0,70.7,23.9,82.6,59.3l24.7,73c12,35.4,45.2,59.3,82.6,59.3h211.2c48.1,0,87.2,39,87.2,87.1l0.5,353.6
C937.3,832.7,898.2,871.8,850,871.8z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 865 B

12
resources/assets/statics/public/images/dialog/image-white.svg
View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M821.4,109.5H202.6c-51.4,0-93.1,41.8-93.1,93.1v618.8c0,51.4,41.8,93.1,93.1,93.1h618.8
c51.4,0,93.1-41.8,93.1-93.1V202.6C914.5,151.3,872.7,109.5,821.4,109.5z M622.4,310.3c50.3,0,91.3,40.9,91.3,91.3
s-40.9,91.3-91.3,91.3s-91.3-41-91.3-91.3S572.1,310.3,622.4,310.3z M852.4,821.4c0,17.1-13.9,31-31,31H202.6c-17.1,0-31-13.9-31-31
v-73.2l163.1-163.1c31.4-31.4,82.2-31.4,113.6,0l167.9,167.9l58.7-58.7c31.4-31.4,82.2-31.4,113.6,0l64,64V821.4z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 877 B

24
resources/assets/statics/public/images/dialog/link-white.svg
View File

@ -1,24 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<path class="st0" d="M591.3,685.1c-27.9,0-56.1-5.5-83.1-16.7c-24.9-10.3-47.6-25.7-67.5-45.5l-39.6-39.6
c-13.1-13.1-13.1-34.4,0-47.5c13.1-13.1,34.4-13.1,47.5,0l39.6,39.6c13.6,13.6,29,24.1,45.8,31c55.3,23,118,10.9,160-31
l110.8-110.8c56.7-56.7,56.7-149,0-205.8l-39.6-39.6c-56.8-56.8-149.1-56.7-205.8,0c-13.1,13.1-34.4,13.1-47.5,0
c-13.1-13.1-13.1-34.4,0-47.5c82.9-82.9,217.8-83,300.7,0l39.6,39.6c82.9,82.9,82.9,217.8,0,300.7L741.5,622.8
C700.8,663.5,646.7,685.1,591.3,685.1z"/>
</g>
<g>
<path class="st0" d="M361.6,914.5c-54.5,0-108.9-20.7-150.4-62.2l-39.6-39.6c-82.9-82.9-82.9-217.8,0-300.7l110.6-110.6
c61.3-61.3,152.8-79.1,233.3-45.6c24.9,10.3,47.6,25.7,67.5,45.6l39.6,39.5c13.1,13.1,13.1,34.4,0,47.5
c-13.1,13.1-34.4,13.1-47.5,0l-39.6-39.6c-13.6-13.7-29.1-24.1-45.8-31c-55.3-23.2-118-10.8-160,31L219.2,559.5
c-56.7,56.7-56.7,149,0,205.8l39.6,39.6c56.8,56.8,149,56.8,205.8,0c13.1-13.1,34.4-13.1,47.5,0c13.1,13.1,13.1,34.4,0,47.5
C470.6,893.8,416.1,914.5,361.6,914.5z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

15
resources/assets/statics/public/images/dialog/msg-white.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M852.2,116.8H171.8c-47,0-85,38.1-85,85v662.7c0,37.9,45.8,56.9,72.6,30.1l86.4-86.4
c16-16,37.6-24.9,60.1-24.9h546.3c47,0,85-38.1,85-85V201.9C937.2,154.9,899.1,116.8,852.2,116.8z M356.6,494.6
c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S380.1,494.6,356.6,494.6z M526.7,494.6
c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S550.2,494.6,526.7,494.6z M696.8,494.6
c-23.5,0-42.7-19-42.7-42.5s18.8-42.5,42.3-42.5h0.4c23.5,0,42.5,19,42.5,42.5S720.3,494.6,696.8,494.6z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 976 B

2
resources/assets/statics/public/images/dialog/project.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656913775634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8737" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M516.266667 640c-21.333333 0-38.4-4.266667-59.733334-17.066667l-337.066666-192c-21.333333-8.533333-38.4-34.133333-38.4-59.733333 0-25.6 12.8-51.2 38.4-64l337.066666-192c34.133333-21.333333 81.066667-21.333333 115.2 0L900.266667 298.666667c25.6 12.8 38.4 38.4 38.4 68.266666 0 29.866667-17.066667 55.466667-38.4 68.266667l-328.533334 187.733333c-17.066667 12.8-38.4 17.066667-55.466666 17.066667z m366.933333-230.4z" p-id="8738" fill="#6E99EB"></path><path d="M516.266667 785.066667c-25.6 0-55.466667-8.533333-81.066667-21.333334l-332.8-187.733333c-17.066667-8.533333-21.333333-29.866667-12.8-42.666667 8.533333-17.066667 29.866667-21.333333 42.666667-12.8l332.8 187.733334c29.866667 17.066667 64 17.066667 93.866666 0l332.8-187.733334c17.066667-8.533333 34.133333-4.266667 42.666667 12.8 8.533333 17.066667 4.266667 34.133333-12.8 42.666667l-332.8 187.733333c-21.333333 17.066667-46.933333 21.333333-72.533333 21.333334z" p-id="8739" fill="#6E99EB"></path><path d="M516.266667 925.866667c-34.133333 0-68.266667-8.533333-98.133334-25.6L102.4 725.333333c-17.066667-8.533333-21.333333-29.866667-12.8-42.666666 8.533333-17.066667 29.866667-21.333333 42.666667-12.8l311.466666 174.933333c42.666667 25.6 93.866667 25.6 136.533334 0l311.466666-174.933333c17.066667-8.533333 34.133333-4.266667 42.666667 12.8 8.533333 17.066667 4.266667 34.133333-12.8 42.666666l-311.466667 174.933334c-25.6 17.066667-59.733333 25.6-93.866666 25.6z" p-id="8740" fill="#6E99EB"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

12
resources/assets/statics/public/images/dialog/tag-white.svg
View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M913.8,405.3L618.7,110.2c-31.1-31.1-81.9-31.1-113.1,0L110.2,505.6l0,0c-15.9,15.9-24.4,37.9-23.3,60.3
l13.4,281.7c2,41.4,34.7,74,76.1,76l281.7,13.4c1.2,0,2.5,0.1,3.7,0.1c21.1,0,41.6-8.4,56.6-23.4l395.4-395.4
C945,487.2,945,436.5,913.8,405.3z M390,736.1c-56.3,0-102.1-45.8-102.1-102.1S333.7,531.9,390,531.9c56.3,0,102,45.8,102,102.1
S446.3,736.1,390,736.1z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 797 B

2
resources/assets/statics/public/images/dialog/task.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656913800388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8906" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M362.666667 648.533333m-34.133334 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" p-id="8907" fill="#9B96DF"></path><path d="M776.533333 85.333333H247.466667C179.2 85.333333 128 136.533333 128 204.8v618.666667C128 887.466667 179.2 938.666667 247.466667 938.666667h533.333333c64 0 119.466667-51.2 119.466667-119.466667V204.8C896 136.533333 844.8 85.333333 776.533333 85.333333zM362.666667 746.666667c-51.2 0-93.866667-42.666667-93.866667-93.866667s42.666667-93.866667 93.866667-93.866667 93.866667 42.666667 93.866666 93.866667-42.666667 93.866667-93.866666 93.866667zM469.333333 332.8l-106.666666 106.666667c-4.266667 4.266667-12.8 8.533333-21.333334 8.533333s-17.066667-4.266667-21.333333-8.533333l-42.666667-42.666667c-12.8-12.8-12.8-34.133333 0-46.933333s34.133333-12.8 46.933334 0l17.066666 21.333333 85.333334-85.333333c12.8-12.8 34.133333-12.8 46.933333 0s8.533333 34.133333-4.266667 46.933333z m256 349.866667h-170.666666c-17.066667 0-34.133333-12.8-34.133334-34.133334s12.8-34.133333 34.133334-34.133333h170.666666c17.066667 0 34.133333 12.8 34.133334 34.133333s-17.066667 34.133333-34.133334 34.133334z m0-298.666667h-170.666666c-17.066667 0-34.133333-12.8-34.133334-34.133333s12.8-34.133333 34.133334-34.133334h170.666666c17.066667 0 34.133333 12.8 34.133334 34.133334s-17.066667 34.133333-34.133334 34.133333z" p-id="8908" fill="#9B96DF"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB