消息
This commit is contained in:
pengxiaolong
@@ -0,0 +1,50 @@
|
||||
import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
|
||||
|
||||
const groupIntroConfig = [
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
|
||||
label: '陌生人社交群（Public）',
|
||||
type: TUIChatEngine.TYPES.GRP_PUBLIC,
|
||||
detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
|
||||
src: '产品文档',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
|
||||
label: '临时会议群（Meeting）',
|
||||
type: TUIChatEngine.TYPES.GRP_MEETING,
|
||||
detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
|
||||
src: '产品文档',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
|
||||
label: '好友工作群（Work）',
|
||||
type: TUIChatEngine.TYPES.GRP_WORK,
|
||||
detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
|
||||
src: '产品文档',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
|
||||
label: '直播群（AVChatroom）',
|
||||
type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
|
||||
detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
|
||||
src: '产品文档',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
|
||||
label: '社群（Community）',
|
||||
type: TUIChatEngine.TYPES.GRP_COMMUNITY,
|
||||
detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
|
||||
src: '产品文档',
|
||||
},
|
||||
];
|
||||
|
||||
const findGroupIntroConfig = (type: string) => {
|
||||
return groupIntroConfig.filter((item: any) => {
|
||||
return item.type === type;
|
||||
})[0];
|
||||
};
|
||||
|
||||
export {
|
||||
groupIntroConfig,
|
||||
findGroupIntroConfig,
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<ul class="group-introduction-list select">
|
||||
<li
|
||||
v-for="(item, index) in type"
|
||||
:key="index"
|
||||
class="select-item"
|
||||
:class="[selectType === item.type && 'selected']"
|
||||
@click="selected(item)"
|
||||
>
|
||||
<main class="select-item-type">
|
||||
<div class="select-item-header">
|
||||
<aside class="left">
|
||||
<Icon
|
||||
class="icon"
|
||||
:file="item.icon"
|
||||
/>
|
||||
<span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
|
||||
</aside>
|
||||
<Icon
|
||||
v-if="selectType === item.type"
|
||||
:file="selectedIcon"
|
||||
/>
|
||||
</div>
|
||||
<span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
|
||||
<a
|
||||
class="link"
|
||||
:href="documentLink.product.url"
|
||||
target="_blank"
|
||||
@click="openUrl(documentLink.product.url)"
|
||||
>{{
|
||||
TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
|
||||
</main>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect } from '../../../../adapter-vue';
|
||||
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import documentLink from '../../../../utils/documentLink';
|
||||
import Icon from '../../../common/Icon.vue';
|
||||
import selectedIcon from '../../../../assets/icon/selected.svg';
|
||||
import { groupIntroConfig } from './config';
|
||||
import { isUniFrameWork } from '../../../../utils/env';
|
||||
|
||||
const props = defineProps({
|
||||
groupType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const type = groupIntroConfig;
|
||||
|
||||
const selectType = ref();
|
||||
|
||||
const emit = defineEmits(['selectType']);
|
||||
|
||||
watchEffect(() => {
|
||||
selectType.value = props.groupType;
|
||||
});
|
||||
|
||||
const selected = (item: any) => {
|
||||
selectType.value = item.type;
|
||||
emit('selectType', item.type);
|
||||
};
|
||||
|
||||
const openUrl = (link: string) => {
|
||||
if (!isUniFrameWork) {
|
||||
TUIGlobal?.open(link);
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped src="../style/index.scss"></style>
|
||||
3
TUIKit/components/TUIGroup/create-group/index.ts
Normal file
3
TUIKit/components/TUIGroup/create-group/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import CreateGroup from './index.vue';
|
||||
|
||||
export default CreateGroup;
|
||||
297
TUIKit/components/TUIGroup/create-group/index.vue
Normal file
297
TUIKit/components/TUIGroup/create-group/index.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show="true"
|
||||
:isH5="!isPC"
|
||||
:isHeaderShow="false"
|
||||
:isFooterShow="false"
|
||||
:background="false"
|
||||
@update:show="closeCreated"
|
||||
>
|
||||
<div
|
||||
class="group"
|
||||
:class="[!isPC ? 'group-h5' : '']"
|
||||
>
|
||||
<div class="group-box">
|
||||
<header class="group-box-header">
|
||||
<Icon
|
||||
:file="isPC ? closeIcon : backIcon"
|
||||
class="icon-close"
|
||||
size="16px"
|
||||
@onClick="closeCreated"
|
||||
/>
|
||||
<h1 class="group-box-header-title">
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
</header>
|
||||
<ul
|
||||
v-if="!groupInfo.isEdit"
|
||||
class="group-list"
|
||||
>
|
||||
<li class="group-list-item">
|
||||
<label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
|
||||
<Avatar :url="groupInfo.profile.avatar" />
|
||||
</li>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in createInfo"
|
||||
:key="index"
|
||||
class="group-list-item"
|
||||
>
|
||||
<label class="group-list-item-label">{{ item.name }}</label>
|
||||
<input
|
||||
v-if="isPC"
|
||||
v-model="groupInfo.profile[item.key]"
|
||||
type="text"
|
||||
:placeholder="item.placeholder"
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="group-h5-list-item-content"
|
||||
@click="edit(item.key)"
|
||||
>
|
||||
<p class="content">{{ groupInfo.profile[item.key] }}</p>
|
||||
<Icon :file="rightIcon" />
|
||||
</span>
|
||||
</li>
|
||||
<li class="group-list-introduction">
|
||||
<div class="group-list-item">
|
||||
<label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
|
||||
<GroupIntroduction
|
||||
v-if="isPC"
|
||||
:groupType="groupInfo.profile.type"
|
||||
@selectType="selected"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="group-h5-list-item-content"
|
||||
@click="edit('type')"
|
||||
>
|
||||
<p class="content">{{ groupTypeDetail.label }}</p>
|
||||
<Icon :file="rightIcon" />
|
||||
</span>
|
||||
</div>
|
||||
<article
|
||||
v-if="!isPC"
|
||||
class="group-h5-list-item-introduction"
|
||||
>
|
||||
<label class="introduction-name">{{ groupTypeDetail.label }}：</label>
|
||||
<span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
|
||||
<a
|
||||
:href="documentLink.product.url"
|
||||
target="view_window"
|
||||
>
|
||||
{{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
|
||||
</a>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<!-- Edit Group Name -->
|
||||
<div
|
||||
v-else
|
||||
class="group-list group-list-edit"
|
||||
>
|
||||
<input
|
||||
v-if="groupInfo.groupConfig.type === 'input'"
|
||||
v-model="groupInfo.groupConfig.value"
|
||||
class="group-name-input"
|
||||
type="text"
|
||||
:placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)"
|
||||
>
|
||||
<GroupIntroduction
|
||||
v-else
|
||||
class="group-introduction-list"
|
||||
:groupType="groupInfo.groupConfig.value"
|
||||
@selectType="selected"
|
||||
/>
|
||||
</div>
|
||||
<footer class="group-profile-footer">
|
||||
<button
|
||||
v-if="isPC && !groupInfo.isEdit"
|
||||
class="btn-default"
|
||||
@click="closeCreated"
|
||||
>
|
||||
{{ TUITranslateService.t('TUIGroup.取消') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn-submit"
|
||||
:disabled="submitDisabledStatus"
|
||||
@click="submit"
|
||||
>
|
||||
{{ TUITranslateService.t('TUIGroup.确认') }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TUIChatEngine, {
|
||||
TUITranslateService,
|
||||
TUIGroupService,
|
||||
TUIStore,
|
||||
StoreName,
|
||||
} from '@tencentcloud/chat-uikit-engine';
|
||||
import { computed, reactive, watchEffect } from '../../../adapter-vue';
|
||||
import documentLink from '../../../utils/documentLink';
|
||||
import { isPC } from '../../../utils/env';
|
||||
import Icon from '../../common/Icon.vue';
|
||||
import backIcon from '../../../assets/icon/back.svg';
|
||||
import closeIcon from '../../../assets/icon/icon-close.svg';
|
||||
import rightIcon from '../../../assets/icon/right-icon.svg';
|
||||
import GroupIntroduction from './group-introduction/index.vue';
|
||||
import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
|
||||
import Dialog from '../../common/Dialog/index.vue';
|
||||
import { Toast, TOAST_TYPE } from '../../common/Toast/index';
|
||||
import Avatar from '../../common/Avatar/index.vue';
|
||||
import Server from '../server';
|
||||
import { IUserProfile } from '../../../interface';
|
||||
const TUIGroupServer = Server.getInstance();
|
||||
const TUIConstants = TUIGroupServer.constants;
|
||||
|
||||
const groupInfo = reactive<any>({
|
||||
profile: {
|
||||
groupID: '',
|
||||
name: '',
|
||||
type: groupIntroConfig[0].type,
|
||||
avatar: groupIntroConfig[0].icon,
|
||||
introduction: '',
|
||||
notification: '',
|
||||
// joinOption: '',
|
||||
memberList: [],
|
||||
isSupportTopic: false,
|
||||
},
|
||||
groupConfig: {
|
||||
title: '',
|
||||
value: '',
|
||||
key: '',
|
||||
type: '',
|
||||
placeholder: '',
|
||||
},
|
||||
isEdit: false,
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
|
||||
groupInfo.profile.memberList = params.memberList;
|
||||
groupInfo.groupConfig.title = params.title;
|
||||
});
|
||||
|
||||
const groupTypeDetail = computed(() => {
|
||||
return findGroupIntroConfig(groupInfo.profile.type);
|
||||
});
|
||||
|
||||
const headerTitle = computed(() => {
|
||||
let name = '添加群聊';
|
||||
if (groupInfo.isEdit) {
|
||||
name = groupInfo.groupConfig.title;
|
||||
}
|
||||
return TUITranslateService.t(`TUIGroup.${name}`);
|
||||
});
|
||||
|
||||
const createInfo = computed(() => {
|
||||
const groupNameInput = {
|
||||
name: TUITranslateService.t('TUIGroup.群名称'),
|
||||
key: 'name',
|
||||
placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
|
||||
};
|
||||
const groupIDInput = {
|
||||
name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
|
||||
key: 'groupID',
|
||||
placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
|
||||
};
|
||||
return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
|
||||
? [groupNameInput]
|
||||
: [groupNameInput, groupIDInput];
|
||||
});
|
||||
|
||||
const submitDisabledStatus = computed(() => {
|
||||
return groupInfo.profile.name === '' && !groupInfo.isEdit;
|
||||
});
|
||||
|
||||
const selected = (type: any) => {
|
||||
if (groupInfo.profile.type !== type) {
|
||||
groupInfo.profile.type = type;
|
||||
groupInfo.profile.avatar = findGroupIntroConfig(type).icon;
|
||||
if (groupInfo.isEdit) {
|
||||
groupInfo.groupConfig.value = type;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const createGroup = async (options: any) => {
|
||||
try {
|
||||
options.memberList = options.memberList.map((item: IUserProfile) => {
|
||||
return { userID: item.userID };
|
||||
});
|
||||
if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
|
||||
delete options.groupID;
|
||||
}
|
||||
const res = await TUIGroupService.createGroup(options);
|
||||
const { type } = res.data.group;
|
||||
if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
|
||||
await TUIGroupService.joinGroup({
|
||||
groupID: res.data.group.groupID,
|
||||
applyMessage: '',
|
||||
});
|
||||
}
|
||||
handleCompleteCreate(res.data.group);
|
||||
Toast({
|
||||
message: TUITranslateService.t('TUIGroup.群组创建成功'),
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
});
|
||||
} catch (err: any) {
|
||||
Toast({
|
||||
message: err.message,
|
||||
type: TOAST_TYPE.ERROR,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const { profile } = groupInfo;
|
||||
if (groupInfo.isEdit) {
|
||||
groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
|
||||
return groupInfo.isEdit = !groupInfo.isEdit;
|
||||
} else {
|
||||
createGroup(profile);
|
||||
}
|
||||
};
|
||||
|
||||
const closeCreated = () => {
|
||||
if (groupInfo.isEdit) {
|
||||
return groupInfo.isEdit = !groupInfo.isEdit;
|
||||
}
|
||||
handleCompleteCreate(null);
|
||||
};
|
||||
|
||||
const edit = (label: string) => {
|
||||
groupInfo.isEdit = !groupInfo.isEdit;
|
||||
groupInfo.groupConfig.key = label;
|
||||
groupInfo.groupConfig.value = (groupInfo.profile as any)[label];
|
||||
switch (label) {
|
||||
case 'name':
|
||||
groupInfo.groupConfig.title = '设置群名称';
|
||||
groupInfo.groupConfig.placeholder = '请输入群名称';
|
||||
groupInfo.groupConfig.type = 'input';
|
||||
break;
|
||||
case 'groupID':
|
||||
groupInfo.groupConfig.title = '设置群ID';
|
||||
groupInfo.groupConfig.placeholder = '请输入群ID';
|
||||
groupInfo.groupConfig.type = 'input';
|
||||
break;
|
||||
case 'type':
|
||||
groupInfo.groupConfig.title = '选择群类型';
|
||||
groupInfo.groupConfig.type = 'select';
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompleteCreate = (group: any) => {
|
||||
TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
|
||||
const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
|
||||
callback && callback(group);
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped src="./style/index.scss"></style>
|
||||
104
TUIKit/components/TUIGroup/create-group/style/color.scss
Normal file
104
TUIKit/components/TUIGroup/create-group/style/color.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
.group {
|
||||
background: #FFF;
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
background: #FFF;
|
||||
|
||||
label {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid rgba(131, 137, 153, 0.40);
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&-edit {
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
&-profile-footer {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
&-h5 {
|
||||
background: #F7F8FA;
|
||||
|
||||
&-list-item-introduction {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
|
||||
a {
|
||||
color: #006EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
color: #006EFF;
|
||||
}
|
||||
|
||||
&-item {
|
||||
border: 1px solid rgba(131, 137, 153, 0.40);
|
||||
|
||||
&-header {
|
||||
.left {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&-detail {
|
||||
color: #4F4F4F;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 1px solid #006EFF;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background: #FFF;
|
||||
|
||||
h1 {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: #3370FF;
|
||||
border: 0 solid #2F80ED;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:disabled {
|
||||
background: #e8e8e9;
|
||||
border: 1px solid #DDD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
97
TUIKit/components/TUIGroup/create-group/style/h5.scss
Normal file
97
TUIKit/components/TUIGroup/create-group/style/h5.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
.group-h5 {
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
|
||||
.group-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.group-box-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 16px 18px;
|
||||
|
||||
.icon-close {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
.group-introduction-list{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
|
||||
&-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-list-edit {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.group-name-input {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-profile-footer {
|
||||
box-shadow: inset 0 1px 0 0 #eee;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-list-item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
&-list-item-introduction {
|
||||
padding: 12px 18px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.select-item-type {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
4
TUIKit/components/TUIGroup/create-group/style/index.scss
Normal file
4
TUIKit/components/TUIGroup/create-group/style/index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import '../../../../assets/styles/common';
|
||||
@import './color';
|
||||
@import './web';
|
||||
@import './h5';
|
||||
106
TUIKit/components/TUIGroup/create-group/style/web.scss
Normal file
106
TUIKit/components/TUIGroup/create-group/style/web.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.group {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
width: 750px;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
|
||||
.group-box {
|
||||
.group-box-header {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
|
||||
.group-box-header-title {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
|
||||
&-label {
|
||||
width: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 10px;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
flex: 1;
|
||||
|
||||
&-item {
|
||||
padding: 12px 20px !important;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 20px !important;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
.icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-selected {
|
||||
position: relative;
|
||||
left: 12px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-type {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-detail {
|
||||
padding-top: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-profile-footer {
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
width: 82px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 82px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
Reference in New Issue
Block a user