新增公告
This commit is contained in:
WindowBird
parent
fe0f251c71
commit
753dc1a044
763
pages/notice/create/index.vue
Normal file
763
pages/notice/create/index.vue
Normal file
|
|
@ -0,0 +1,763 @@
|
|||
<template>
|
||||
<view class="notice-create-page">
|
||||
<scroll-view class="content-scroll" scroll-y>
|
||||
<view class="form-card">
|
||||
<view class="section-title">公告信息</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label required">标题</text>
|
||||
<input
|
||||
v-model.trim="formData.title"
|
||||
class="text-input"
|
||||
placeholder="请输入公告标题"
|
||||
placeholder-style="color:#999;"
|
||||
maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label required">类型</text>
|
||||
<view class="pill-group">
|
||||
<view
|
||||
class="pill-item"
|
||||
v-for="type in typeOptions"
|
||||
:key="type.value"
|
||||
:class="{ active: formData.type === type.value }"
|
||||
@click="selectType(type.value)"
|
||||
>
|
||||
{{ type.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label required">重要程度</text>
|
||||
<view class="pill-group">
|
||||
<view
|
||||
class="pill-item priority"
|
||||
v-for="level in levelOptions"
|
||||
:key="level.value"
|
||||
:class="{ active: formData.level === level.value }"
|
||||
@click="selectLevel(level.value)"
|
||||
>
|
||||
{{ level.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item switch-item">
|
||||
<text class="form-label required">置顶</text>
|
||||
<uv-switch v-model="formData.top" activeColor="#2979ff" inactiveColor="#dcdfe6"></uv-switch>
|
||||
</view>
|
||||
|
||||
<view class="form-item align-start">
|
||||
<text class="form-label required">内容</text>
|
||||
<textarea
|
||||
v-model.trim="formData.content"
|
||||
class="textarea-input"
|
||||
placeholder="请输入公告内容，最多1000字"
|
||||
placeholder-style="color:#999;"
|
||||
:maxlength="1000"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="section-title">附件</view>
|
||||
<AttachmentImageUploader v-model="formData.images" title="上传图片" icon="🖼️" />
|
||||
<AttachmentFileUploader v-model="formData.files" title="上传文件" icon="📎" />
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="section-title">接收对象</view>
|
||||
|
||||
<view class="form-item align-start">
|
||||
<text class="form-label">接收用户</text>
|
||||
<view class="selector-body">
|
||||
<view class="chip-list" v-if="formData.receiveUsers.length">
|
||||
<view
|
||||
class="chip-item"
|
||||
v-for="user in formData.receiveUsers"
|
||||
:key="user.userId"
|
||||
>
|
||||
<text class="chip-name">{{ user.userName }}</text>
|
||||
<text class="chip-remove" @click.stop="removeUser(user.userId)">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else class="placeholder">请选择接收用户，可多选</text>
|
||||
</view>
|
||||
<view class="picker-trigger" @click="openUserModal">
|
||||
<text>{{ formData.receiveUsers.length ? '调整' : '选择' }}</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item align-start">
|
||||
<text class="form-label">接收部门</text>
|
||||
<view class="selector-body">
|
||||
<view class="chip-list" v-if="formData.receiveDepts.length">
|
||||
<view
|
||||
class="chip-item dept"
|
||||
v-for="dept in formData.receiveDepts"
|
||||
:key="dept.deptId"
|
||||
>
|
||||
<text class="chip-name">{{ dept.deptName }}</text>
|
||||
<text class="chip-remove" @click.stop="removeDept(dept.deptId)">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else class="placeholder">请选择接收部门，可多选</text>
|
||||
</view>
|
||||
<view class="picker-trigger" @click="openDeptModal">
|
||||
<text>{{ formData.receiveDepts.length ? '调整' : '选择' }}</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="receive-tip">
|
||||
至少选择接收用户或接收部门中的任意一项。
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="submit-bar">
|
||||
<uv-button
|
||||
type="primary"
|
||||
:disabled="!canSubmit || submitting"
|
||||
:loading="submitting"
|
||||
loadingText="提交中..."
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交公告
|
||||
</uv-button>
|
||||
</view>
|
||||
|
||||
<view class="selection-modal" v-if="showUserModal">
|
||||
<view class="modal-mask" @click="closeUserModal"></view>
|
||||
<view class="modal-panel">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">选择接收用户</text>
|
||||
<text class="modal-close" @click="closeUserModal">✕</text>
|
||||
</view>
|
||||
<view class="search-box">
|
||||
<input
|
||||
v-model.trim="userKeyword"
|
||||
class="search-input"
|
||||
placeholder="搜索姓名或部门"
|
||||
placeholder-style="color:#999;"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="options-list" scroll-y>
|
||||
<view
|
||||
class="option-item"
|
||||
v-for="user in filteredUserOptions"
|
||||
:key="user.userId"
|
||||
@click="toggleUser(user.userId)"
|
||||
>
|
||||
<view class="option-info">
|
||||
<text class="option-name">{{ user.userName }}</text>
|
||||
<text class="option-desc" v-if="user.deptName">{{ user.deptName }}</text>
|
||||
</view>
|
||||
<view class="select-indicator" :class="{ active: selectedUserIds.includes(user.userId) }"></view>
|
||||
</view>
|
||||
<view class="empty-tip" v-if="!filteredUserOptions.length">
|
||||
暂无可选人员
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="modal-actions">
|
||||
<uv-button @click="closeUserModal">取消</uv-button>
|
||||
<uv-button type="primary" @click="confirmUserSelection">确定</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="selection-modal" v-if="showDeptModal">
|
||||
<view class="modal-mask" @click="closeDeptModal"></view>
|
||||
<view class="modal-panel">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">选择接收部门</text>
|
||||
<text class="modal-close" @click="closeDeptModal">✕</text>
|
||||
</view>
|
||||
<view class="search-box">
|
||||
<input
|
||||
v-model.trim="deptKeyword"
|
||||
class="search-input"
|
||||
placeholder="搜索部门名称"
|
||||
placeholder-style="color:#999;"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view class="options-list" scroll-y>
|
||||
<view
|
||||
class="option-item"
|
||||
v-for="dept in filteredDeptOptions"
|
||||
:key="dept.deptId"
|
||||
@click="toggleDept(dept.deptId)"
|
||||
>
|
||||
<view class="option-info">
|
||||
<text class="option-name">{{ dept.deptName }}</text>
|
||||
</view>
|
||||
<view class="select-indicator" :class="{ active: selectedDeptIds.includes(dept.deptId) }"></view>
|
||||
</view>
|
||||
<view class="empty-tip" v-if="!filteredDeptOptions.length">
|
||||
暂无可选部门
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="modal-actions">
|
||||
<uv-button @click="closeDeptModal">取消</uv-button>
|
||||
<uv-button type="primary" @click="confirmDeptSelection">确定</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { createNotice, getUserList } from '@/api';
|
||||
import AttachmentImageUploader from '@/components/task/AttachmentImageUploader.vue';
|
||||
import AttachmentFileUploader from '@/components/task/AttachmentFileUploader.vue';
|
||||
|
||||
const formData = ref({
|
||||
title: '',
|
||||
type: '1',
|
||||
level: '1',
|
||||
top: false,
|
||||
content: '',
|
||||
images: [],
|
||||
files: [],
|
||||
receiveUsers: [],
|
||||
receiveDepts: []
|
||||
});
|
||||
|
||||
const submitting = ref(false);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
const typeOptions = [
|
||||
{ label: '通知', value: '1' },
|
||||
{ label: '公告', value: '2' }
|
||||
];
|
||||
|
||||
const levelOptions = [
|
||||
{ label: '一般', value: '1' },
|
||||
{ label: '重要', value: '2' },
|
||||
{ label: '紧急', value: '3' }
|
||||
];
|
||||
|
||||
const userOptions = ref([]);
|
||||
const userKeyword = ref('');
|
||||
const showUserModal = ref(false);
|
||||
const selectedUserIds = ref([]);
|
||||
|
||||
const deptKeyword = ref('');
|
||||
const showDeptModal = ref(false);
|
||||
const selectedDeptIds = ref([]);
|
||||
|
||||
const deptOptions = computed(() => {
|
||||
const map = new Map();
|
||||
userOptions.value.forEach((user) => {
|
||||
if (user.deptId && user.deptName && !map.has(user.deptId)) {
|
||||
map.set(user.deptId, {
|
||||
deptId: String(user.deptId),
|
||||
deptName: user.deptName
|
||||
});
|
||||
}
|
||||
});
|
||||
return Array.from(map.values());
|
||||
});
|
||||
|
||||
const filteredUserOptions = computed(() => {
|
||||
if (!userKeyword.value.trim()) {
|
||||
return userOptions.value;
|
||||
}
|
||||
const keyword = userKeyword.value.trim().toLowerCase();
|
||||
return userOptions.value.filter((user) => {
|
||||
const name = (user.userName || '').toLowerCase();
|
||||
const dept = (user.deptName || '').toLowerCase();
|
||||
return name.includes(keyword) || dept.includes(keyword);
|
||||
});
|
||||
});
|
||||
|
||||
const filteredDeptOptions = computed(() => {
|
||||
if (!deptKeyword.value.trim()) {
|
||||
return deptOptions.value;
|
||||
}
|
||||
const keyword = deptKeyword.value.trim().toLowerCase();
|
||||
return deptOptions.value.filter((dept) => {
|
||||
const name = (dept.deptName || '').toLowerCase();
|
||||
return name.includes(keyword);
|
||||
});
|
||||
});
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return Boolean(
|
||||
formData.value.title.trim() &&
|
||||
formData.value.content.trim() &&
|
||||
formData.value.type &&
|
||||
formData.value.level &&
|
||||
(formData.value.receiveUsers.length > 0 || formData.value.receiveDepts.length > 0)
|
||||
);
|
||||
});
|
||||
|
||||
const selectType = (value) => {
|
||||
formData.value.type = value;
|
||||
};
|
||||
|
||||
const selectLevel = (value) => {
|
||||
formData.value.level = value;
|
||||
};
|
||||
|
||||
const openUserModal = () => {
|
||||
selectedUserIds.value = formData.value.receiveUsers.map((item) => item.userId);
|
||||
userKeyword.value = '';
|
||||
showUserModal.value = true;
|
||||
};
|
||||
|
||||
const closeUserModal = () => {
|
||||
showUserModal.value = false;
|
||||
};
|
||||
|
||||
const toggleUser = (userId) => {
|
||||
const index = selectedUserIds.value.indexOf(userId);
|
||||
if (index >= 0) {
|
||||
selectedUserIds.value.splice(index, 1);
|
||||
} else {
|
||||
selectedUserIds.value.push(userId);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmUserSelection = () => {
|
||||
const selected = userOptions.value.filter((user) =>
|
||||
selectedUserIds.value.includes(user.userId)
|
||||
);
|
||||
formData.value.receiveUsers = selected.map((user) => ({
|
||||
userId: user.userId,
|
||||
userName: user.userName,
|
||||
deptName: user.deptName
|
||||
}));
|
||||
closeUserModal();
|
||||
};
|
||||
|
||||
const removeUser = (userId) => {
|
||||
formData.value.receiveUsers = formData.value.receiveUsers.filter(
|
||||
(user) => user.userId !== userId
|
||||
);
|
||||
};
|
||||
|
||||
const openDeptModal = () => {
|
||||
selectedDeptIds.value = formData.value.receiveDepts.map((item) => item.deptId);
|
||||
deptKeyword.value = '';
|
||||
showDeptModal.value = true;
|
||||
};
|
||||
|
||||
const closeDeptModal = () => {
|
||||
showDeptModal.value = false;
|
||||
};
|
||||
|
||||
const toggleDept = (deptId) => {
|
||||
const index = selectedDeptIds.value.indexOf(deptId);
|
||||
if (index >= 0) {
|
||||
selectedDeptIds.value.splice(index, 1);
|
||||
} else {
|
||||
selectedDeptIds.value.push(deptId);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDeptSelection = () => {
|
||||
const selected = deptOptions.value.filter((dept) =>
|
||||
selectedDeptIds.value.includes(dept.deptId)
|
||||
);
|
||||
formData.value.receiveDepts = selected.map((dept) => ({
|
||||
deptId: dept.deptId,
|
||||
deptName: dept.deptName
|
||||
}));
|
||||
closeDeptModal();
|
||||
};
|
||||
|
||||
const removeDept = (deptId) => {
|
||||
formData.value.receiveDepts = formData.value.receiveDepts.filter(
|
||||
(dept) => dept.deptId !== deptId
|
||||
);
|
||||
};
|
||||
|
||||
const normalizeUser = (item) => ({
|
||||
userId: String(item.userId || item.id),
|
||||
userName: item.nickName || item.userName || '',
|
||||
deptName: item.dept?.deptName || item.deptName || '',
|
||||
deptId: String(item.dept?.deptId || item.deptId || '')
|
||||
});
|
||||
|
||||
const loadUserOptions = async () => {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const res = await getUserList({
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
status: 0,
|
||||
delFlag: 0
|
||||
});
|
||||
const rows = Array.isArray(res?.rows) ? res.rows : Array.isArray(res?.data) ? res.data : [];
|
||||
userOptions.value = rows.map((item) => normalizeUser(item)).filter((user) => user.userId);
|
||||
} catch (error) {
|
||||
console.error('加载用户列表失败:', error);
|
||||
uni.showToast({
|
||||
title: '加载用户列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const buildAttachmentsPayload = () => {
|
||||
const imageAttachments = formData.value.images.map((url) => ({
|
||||
url,
|
||||
name: url.split('/').pop() || '图片'
|
||||
}));
|
||||
const fileAttachments = formData.value.files.map((file) => ({
|
||||
url: file.path,
|
||||
name: file.name || '附件',
|
||||
size: file.size || 0
|
||||
}));
|
||||
return [...imageAttachments, ...fileAttachments];
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!canSubmit.value) {
|
||||
uni.showToast({
|
||||
title: '请完善必填信息',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
title: formData.value.title.trim(),
|
||||
type: formData.value.type,
|
||||
level: formData.value.level,
|
||||
top: formData.value.top,
|
||||
content: formData.value.content.trim(),
|
||||
receiveUserIds: formData.value.receiveUsers.map((user) => user.userId),
|
||||
receiveDeptIds: formData.value.receiveDepts.map((dept) => dept.deptId),
|
||||
attaches: JSON.stringify(buildAttachmentsPayload())
|
||||
};
|
||||
|
||||
submitting.value = true;
|
||||
try {
|
||||
await createNotice(payload);
|
||||
uni.showToast({
|
||||
title: '发布成功',
|
||||
icon: 'success'
|
||||
});
|
||||
uni.$emit('notice:updated');
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 800);
|
||||
} catch (error) {
|
||||
console.error('新增公告失败:', error);
|
||||
uni.showToast({
|
||||
title: error?.message || '发布失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadUserOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-create-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
margin-bottom: 0;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.required::before {
|
||||
content: '*';
|
||||
color: #f56c6c;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input {
|
||||
flex: 1;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pill-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill-item {
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #dcdfe6;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
border-color: #2979ff;
|
||||
color: #2979ff;
|
||||
background: rgba(41, 121, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.pill-item.priority {
|
||||
&.active {
|
||||
background: rgba(255, 152, 0, 0.12);
|
||||
border-color: #ff9800;
|
||||
color: #ff9800;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.textarea-input {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.selector-body {
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(41, 121, 255, 0.12);
|
||||
color: #2979ff;
|
||||
font-size: 12px;
|
||||
|
||||
&.dept {
|
||||
background: rgba(56, 182, 73, 0.12);
|
||||
color: #38b649;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-remove {
|
||||
font-size: 12px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.picker-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #2979ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.receive-tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.submit-bar {
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.selection-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
background: #fff;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f7f8fa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.options-list {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.option-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
&.active {
|
||||
background: #2979ff;
|
||||
border-color: #2979ff;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 20px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user