689 lines
19 KiB
Vue
689 lines
19 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, reactive, ref, watch } from 'vue';
|
|
|
|
import { Page } from '@vben/common-ui';
|
|
import { useAccessStore } from '@vben/stores';
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
import {
|
|
deletePushTask,
|
|
newPush,
|
|
pushLogTable,
|
|
pushTaskPage,
|
|
savePushTask,
|
|
} from '#/api/legacy/message';
|
|
import { getAllowedSysOrigins } from '#/views/system/shared';
|
|
|
|
import {
|
|
Button,
|
|
Card,
|
|
DatePicker,
|
|
Form,
|
|
FormItem,
|
|
Input,
|
|
Modal,
|
|
Pagination,
|
|
Select,
|
|
Space,
|
|
TabPane,
|
|
Table,
|
|
Tabs,
|
|
Tag,
|
|
message,
|
|
} from 'antdv-next';
|
|
|
|
defineOptions({ name: 'OperatePush' });
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const APP_PLATFORM_OPTIONS = [
|
|
{ name: 'iOS', value: 'iOS' },
|
|
{ name: 'Android', value: 'Android' },
|
|
];
|
|
|
|
const DEVICE_TYPE_OPTIONS = [{ name: '谷歌', value: 'GOOGLE' }];
|
|
const PUSH_STATUS_OPTIONS = [
|
|
{ name: '成功', value: 0 },
|
|
{ name: '失败', value: 1 },
|
|
];
|
|
const SHELF_STATUS_OPTIONS = [
|
|
{ name: '下架', value: false },
|
|
{ name: '上架', value: true },
|
|
];
|
|
const LANGUAGE_OPTIONS = [
|
|
{ name: '阿拉伯语', value: 'ar' },
|
|
{ name: '土耳其语', value: 'tr' },
|
|
{ name: '其他语言', value: 'en' },
|
|
];
|
|
|
|
const appPlatformSelectOptions = APP_PLATFORM_OPTIONS.map((item) => ({
|
|
label: item.name,
|
|
value: item.value as any,
|
|
}));
|
|
|
|
const deviceTypeSelectOptions = DEVICE_TYPE_OPTIONS.map((item) => ({
|
|
label: item.name,
|
|
value: item.value as any,
|
|
}));
|
|
|
|
const pushStatusSelectOptions = PUSH_STATUS_OPTIONS.map((item) => ({
|
|
label: item.name,
|
|
value: item.value as any,
|
|
}));
|
|
|
|
const shelfStatusSelectOptions = SHELF_STATUS_OPTIONS.map((item) => ({
|
|
label: item.name,
|
|
value: item.value as any,
|
|
}));
|
|
|
|
const languageSelectOptions = LANGUAGE_OPTIONS.map((item) => ({
|
|
label: item.name,
|
|
value: item.value as any,
|
|
}));
|
|
|
|
const businessSceneOptions = [
|
|
{ label: '官方通知', value: 'OFFICIAL_MESSAGE_NOTICE' as any },
|
|
];
|
|
const PUSH_SUCCESS_VALUES = new Set(['0', 'SUCCESS', '成功']);
|
|
|
|
const accessStore = useAccessStore();
|
|
const sysOriginOptions = computed(() => {
|
|
const options = getAllowedSysOrigins(accessStore.accessCodes || []);
|
|
return options.length > 0 ? options : getAllowedSysOrigins([]);
|
|
});
|
|
|
|
const activeTab = ref('new');
|
|
const sending = ref(false);
|
|
const logLoading = ref(false);
|
|
const logTotal = ref(0);
|
|
const logList = ref<Array<Record<string, any>>>([]);
|
|
const taskLoading = ref(false);
|
|
const taskTotal = ref(0);
|
|
const taskList = ref<Array<Record<string, any>>>([]);
|
|
const taskModalOpen = ref(false);
|
|
const taskSaving = ref(false);
|
|
const logRange = ref<[Dayjs, Dayjs] | null>(null);
|
|
const fixedUidCount = ref(0);
|
|
|
|
const newPushForm = reactive({
|
|
businessScene: 'OFFICIAL_MESSAGE_NOTICE',
|
|
content: '',
|
|
deviceType: '',
|
|
fixedUserIds: '',
|
|
language: '',
|
|
platform: '',
|
|
sysOrigin: '',
|
|
title: '',
|
|
});
|
|
|
|
const logQuery = reactive({
|
|
cursor: 1,
|
|
deviceType: '',
|
|
endTime: '',
|
|
limit: 20,
|
|
platform: '',
|
|
pushStatus: undefined as any,
|
|
startTime: '',
|
|
sysOrigin: '',
|
|
});
|
|
|
|
const taskQuery = reactive({
|
|
cursor: 1,
|
|
limit: 20,
|
|
shelfStatus: undefined as any,
|
|
sysOrigin: '',
|
|
});
|
|
|
|
const taskForm = reactive(createTaskForm());
|
|
|
|
const logColumns = [
|
|
{ dataIndex: 'sendUserName', key: 'sendUserName', title: '发送者', width: 120 },
|
|
{ dataIndex: 'sysOrigin', key: 'sysOrigin', title: '系统', width: 120 },
|
|
{ dataIndex: 'platform', key: 'platform', title: '平台', width: 100 },
|
|
{ dataIndex: 'deviceType', key: 'deviceType', title: '推送平台', width: 100 },
|
|
{ dataIndex: 'businessScene', key: 'businessScene', title: '业务场景', width: 160 },
|
|
{ dataIndex: 'title', key: 'title', title: '标题', width: 220 },
|
|
{ dataIndex: 'content', key: 'content', title: '文案', width: 320 },
|
|
{ dataIndex: 'pushStatus', key: 'pushStatus', title: '状态', width: 100 },
|
|
{ dataIndex: 'successQuantity', key: 'successQuantity', title: '成功人数', width: 100 },
|
|
{ dataIndex: 'failQuantity', key: 'failQuantity', title: '失败人数', width: 100 },
|
|
{ dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
|
|
];
|
|
|
|
const taskColumns = [
|
|
{ dataIndex: 'remarks', key: 'remarks', title: '备注', width: 180 },
|
|
{ dataIndex: 'sysOrigin', key: 'sysOrigin', title: '系统', width: 100 },
|
|
{ dataIndex: 'language', key: 'language', title: '语言', width: 100 },
|
|
{ dataIndex: 'title', key: 'title', title: '标题', width: 180 },
|
|
{ dataIndex: 'content', key: 'content', title: '内容', width: 280 },
|
|
{ dataIndex: 'executeTime', key: 'executeTime', title: '执行时间', width: 200 },
|
|
{ dataIndex: 'shelfStatus', key: 'shelfStatus', title: '状态', width: 100 },
|
|
{ dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
|
|
{ dataIndex: 'actions', key: 'actions', title: '操作', width: 150 },
|
|
];
|
|
|
|
function createTaskForm() {
|
|
return {
|
|
businessScene: 'OFFICIAL_MESSAGE_NOTICE',
|
|
content: '',
|
|
days: '',
|
|
deviceType: '',
|
|
fixedUserIds: '',
|
|
hours: '',
|
|
id: '',
|
|
language: '',
|
|
minutes: '',
|
|
platform: '',
|
|
remarks: '',
|
|
shelfStatus: undefined as any,
|
|
sysOrigin: '',
|
|
title: '',
|
|
};
|
|
}
|
|
|
|
watch(
|
|
sysOriginOptions,
|
|
(options) => {
|
|
const first = String(options[0]?.value || '');
|
|
if (!newPushForm.sysOrigin) {
|
|
newPushForm.sysOrigin = first;
|
|
}
|
|
if (!logQuery.sysOrigin) {
|
|
logQuery.sysOrigin = first;
|
|
}
|
|
if (!taskQuery.sysOrigin) {
|
|
taskQuery.sysOrigin = first;
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch(logRange, (value) => {
|
|
if (!value?.length) {
|
|
logQuery.startTime = '';
|
|
logQuery.endTime = '';
|
|
return;
|
|
}
|
|
logQuery.startTime = String(value[0].valueOf());
|
|
logQuery.endTime = String(value[1].valueOf());
|
|
});
|
|
|
|
function normalizeFixedIds(value: string) {
|
|
return value
|
|
.split(',')
|
|
.map((item) => item.trim())
|
|
.filter((item) => /^\d+$/.test(item))
|
|
.slice(0, 100);
|
|
}
|
|
|
|
function updateFixedCount(value: string) {
|
|
fixedUidCount.value = normalizeFixedIds(value).length;
|
|
}
|
|
|
|
function isPushSuccess(value: unknown) {
|
|
const normalized = String(value ?? '').trim().toUpperCase();
|
|
return PUSH_SUCCESS_VALUES.has(normalized);
|
|
}
|
|
|
|
function getPushStatusLabel(value: unknown) {
|
|
return isPushSuccess(value) ? '成功' : '失败';
|
|
}
|
|
|
|
async function handleSendPush() {
|
|
if (!newPushForm.title.trim() || !newPushForm.content.trim()) {
|
|
message.warning('请填写标题和内容');
|
|
return;
|
|
}
|
|
if (!newPushForm.sysOrigin || !newPushForm.deviceType) {
|
|
message.warning('请选择系统和推送平台');
|
|
return;
|
|
}
|
|
const fixedUserIds = normalizeFixedIds(newPushForm.fixedUserIds);
|
|
sending.value = true;
|
|
try {
|
|
await newPush({
|
|
...newPushForm,
|
|
fixedUserIds: fixedUserIds.join(','),
|
|
});
|
|
message.success('发送成功');
|
|
Object.assign(newPushForm, {
|
|
businessScene: 'OFFICIAL_MESSAGE_NOTICE',
|
|
content: '',
|
|
deviceType: '',
|
|
fixedUserIds: '',
|
|
language: '',
|
|
platform: '',
|
|
sysOrigin: newPushForm.sysOrigin,
|
|
title: '',
|
|
});
|
|
fixedUidCount.value = 0;
|
|
} finally {
|
|
sending.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadLogs(reset = false) {
|
|
if (reset) {
|
|
logQuery.cursor = 1;
|
|
}
|
|
logLoading.value = true;
|
|
try {
|
|
const result = await pushLogTable({ ...logQuery });
|
|
logList.value = result.records || [];
|
|
logTotal.value = result.total || 0;
|
|
} finally {
|
|
logLoading.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadTasks(reset = false) {
|
|
if (reset) {
|
|
taskQuery.cursor = 1;
|
|
}
|
|
taskLoading.value = true;
|
|
try {
|
|
const result = await pushTaskPage({ ...taskQuery });
|
|
taskList.value = result.records || [];
|
|
taskTotal.value = result.total || 0;
|
|
} finally {
|
|
taskLoading.value = false;
|
|
}
|
|
}
|
|
|
|
function handleLogPageChange(page: number, pageSize: number) {
|
|
logQuery.cursor = page;
|
|
logQuery.limit = pageSize;
|
|
void loadLogs();
|
|
}
|
|
|
|
function handleTaskPageChange(page: number, pageSize: number) {
|
|
taskQuery.cursor = page;
|
|
taskQuery.limit = pageSize;
|
|
void loadTasks();
|
|
}
|
|
|
|
function openTaskModal(record?: Record<string, any>) {
|
|
Object.assign(taskForm, createTaskForm(), record || {}, {
|
|
businessScene: record?.businessScene || 'OFFICIAL_MESSAGE_NOTICE',
|
|
sysOrigin: record?.sysOrigin || taskQuery.sysOrigin,
|
|
});
|
|
taskModalOpen.value = true;
|
|
updateFixedCount(taskForm.fixedUserIds);
|
|
}
|
|
|
|
async function submitTask() {
|
|
if (!taskForm.title.trim() || !taskForm.content.trim()) {
|
|
message.warning('请填写标题和内容');
|
|
return;
|
|
}
|
|
if (!taskForm.sysOrigin || !taskForm.deviceType || !taskForm.platform) {
|
|
message.warning('请补全系统、平台和推送平台');
|
|
return;
|
|
}
|
|
if (!String(taskForm.hours).trim() || !String(taskForm.minutes).trim()) {
|
|
message.warning('请填写执行时间');
|
|
return;
|
|
}
|
|
taskSaving.value = true;
|
|
try {
|
|
await savePushTask({
|
|
...taskForm,
|
|
fixedUserIds: normalizeFixedIds(taskForm.fixedUserIds).join(','),
|
|
});
|
|
message.success('保存成功');
|
|
taskModalOpen.value = false;
|
|
await loadTasks(true);
|
|
} finally {
|
|
taskSaving.value = false;
|
|
}
|
|
}
|
|
|
|
function handleDeleteTask(id: number | string) {
|
|
Modal.confirm({
|
|
title: '确定删除任务吗？',
|
|
async onOk() {
|
|
await deletePushTask(id);
|
|
message.success('删除成功');
|
|
await loadTasks(true);
|
|
},
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => activeTab.value,
|
|
(tab) => {
|
|
if (tab === 'log' && logList.value.length === 0) {
|
|
void loadLogs(true);
|
|
}
|
|
if (tab === 'task' && taskList.value.length === 0) {
|
|
void loadTasks(true);
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Page title="消息推送">
|
|
<Card>
|
|
<Tabs v-model:activeKey="activeTab">
|
|
<TabPane key="new" tab="新建Push" />
|
|
<TabPane key="log" tab="Push日志" />
|
|
<TabPane key="task" tab="推送任务" />
|
|
</Tabs>
|
|
|
|
<div v-if="activeTab === 'new'" class="panel">
|
|
<Form layout="vertical">
|
|
<FormItem label="Push标题">
|
|
<Input v-model:value="newPushForm.title" :maxlength="200" placeholder="最多输入200字" />
|
|
</FormItem>
|
|
<FormItem label="Push内容">
|
|
<Input
|
|
v-model:value="newPushForm.content"
|
|
:maxlength="1000"
|
|
placeholder="最多输入500字"
|
|
/>
|
|
</FormItem>
|
|
<div class="grid-two">
|
|
<FormItem label="系统">
|
|
<SysOriginSelect
|
|
v-model:value="newPushForm.sysOrigin"
|
|
:options="sysOriginOptions"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="客户端">
|
|
<Select
|
|
v-model:value="newPushForm.platform"
|
|
allow-clear
|
|
:options="appPlatformSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="推送平台">
|
|
<Select
|
|
v-model:value="newPushForm.deviceType"
|
|
allow-clear
|
|
:options="deviceTypeSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="语言">
|
|
<Select
|
|
v-model:value="newPushForm.language"
|
|
allow-clear
|
|
:options="languageSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
</div>
|
|
<FormItem label="业务场景">
|
|
<Select
|
|
v-model:value="newPushForm.businessScene"
|
|
:options="businessSceneOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="定投UID">
|
|
<Input
|
|
v-model:value="newPushForm.fixedUserIds"
|
|
placeholder="请输入定投用户ID多个以逗号分隔 123,321"
|
|
@blur="newPushForm.fixedUserIds = normalizeFixedIds(newPushForm.fixedUserIds).join(',')"
|
|
@update:value="updateFixedCount"
|
|
/>
|
|
<div class="helper">{{ fixedUidCount }}/100 定投会忽略语言过滤条件</div>
|
|
</FormItem>
|
|
<Button :loading="sending" type="primary" @click="handleSendPush">
|
|
发送
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
|
|
<div v-else-if="activeTab === 'log'" class="panel">
|
|
<div class="toolbar">
|
|
<SysOriginSelect
|
|
v-model:value="logQuery.sysOrigin"
|
|
style="width: 140px"
|
|
:options="sysOriginOptions"
|
|
/>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="logQuery.platform"
|
|
allow-clear
|
|
placeholder="客户端"
|
|
style="width: 120px"
|
|
:options="appPlatformSelectOptions"
|
|
/>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="logQuery.deviceType"
|
|
allow-clear
|
|
placeholder="推送平台"
|
|
style="width: 120px"
|
|
:options="deviceTypeSelectOptions"
|
|
/>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="logQuery.pushStatus"
|
|
allow-clear
|
|
placeholder="状态"
|
|
style="width: 120px"
|
|
:options="pushStatusSelectOptions"
|
|
/>
|
|
<RangePicker
|
|
v-model:value="logRange"
|
|
show-time
|
|
style="width: 360px"
|
|
/>
|
|
<Button :loading="logLoading" type="primary" @click="loadLogs(true)">
|
|
搜索
|
|
</Button>
|
|
</div>
|
|
|
|
<Table
|
|
:columns="logColumns"
|
|
:data-source="logList"
|
|
:loading="logLoading"
|
|
:pagination="false"
|
|
row-key="id"
|
|
:scroll="{ x: 1600 }"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'pushStatus'">
|
|
<Tag :color="isPushSuccess(record.pushStatus) ? 'success' : 'error'">
|
|
{{ getPushStatusLabel(record.pushStatus) }}
|
|
</Tag>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
|
|
<div v-if="logTotal > 0" class="pagination">
|
|
<Pagination
|
|
:current="logQuery.cursor"
|
|
:page-size="logQuery.limit"
|
|
:total="logTotal"
|
|
show-size-changer
|
|
@change="handleLogPageChange"
|
|
@showSizeChange="handleLogPageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="panel">
|
|
<div class="toolbar">
|
|
<SysOriginSelect
|
|
v-model:value="taskQuery.sysOrigin"
|
|
style="width: 140px"
|
|
:options="sysOriginOptions"
|
|
/>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="taskQuery.shelfStatus"
|
|
allow-clear
|
|
placeholder="状态"
|
|
style="width: 120px"
|
|
:options="shelfStatusSelectOptions"
|
|
/>
|
|
<Button :loading="taskLoading" type="primary" @click="loadTasks(true)">
|
|
搜索
|
|
</Button>
|
|
<Button type="primary" @click="openTaskModal()">
|
|
新增任务
|
|
</Button>
|
|
</div>
|
|
|
|
<Table
|
|
:columns="taskColumns"
|
|
:data-source="taskList"
|
|
:loading="taskLoading"
|
|
:pagination="false"
|
|
row-key="id"
|
|
:scroll="{ x: 1500 }"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'shelfStatus'">
|
|
<Tag :color="record.shelfStatus ? 'success' : 'default'">
|
|
{{ record.shelfStatus ? '上架' : '下架' }}
|
|
</Tag>
|
|
</template>
|
|
<template v-else-if="column.key === 'actions'">
|
|
<Space>
|
|
<Button size="small" type="link" @click="openTaskModal(record)">
|
|
编辑
|
|
</Button>
|
|
<Button danger size="small" type="link" @click="handleDeleteTask(record.id)">
|
|
删除
|
|
</Button>
|
|
</Space>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
|
|
<div v-if="taskTotal > 0" class="pagination">
|
|
<Pagination
|
|
:current="taskQuery.cursor"
|
|
:page-size="taskQuery.limit"
|
|
:total="taskTotal"
|
|
show-size-changer
|
|
@change="handleTaskPageChange"
|
|
@showSizeChange="handleTaskPageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Modal
|
|
:confirm-loading="taskSaving"
|
|
:open="taskModalOpen"
|
|
destroy-on-close
|
|
:title="taskForm.id ? '编辑任务' : '新增任务'"
|
|
width="720px"
|
|
@cancel="taskModalOpen = false"
|
|
@ok="submitTask"
|
|
>
|
|
<Form layout="vertical">
|
|
<FormItem label="系统">
|
|
<SysOriginSelect
|
|
v-model:value="taskForm.sysOrigin"
|
|
:options="sysOriginOptions"
|
|
/>
|
|
</FormItem>
|
|
<div class="grid-two">
|
|
<FormItem label="客户端">
|
|
<Select
|
|
v-model:value="taskForm.platform"
|
|
:options="appPlatformSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="推送平台">
|
|
<Select
|
|
v-model:value="taskForm.deviceType"
|
|
:options="deviceTypeSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="语言">
|
|
<Select
|
|
v-model:value="taskForm.language"
|
|
allow-clear
|
|
:options="languageSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="业务场景">
|
|
<Select
|
|
v-model:value="taskForm.businessScene"
|
|
:options="businessSceneOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
<FormItem label="状态">
|
|
<Select
|
|
v-model:value="taskForm.shelfStatus"
|
|
:options="shelfStatusSelectOptions"
|
|
option-label-prop="label"
|
|
/>
|
|
</FormItem>
|
|
</div>
|
|
<FormItem label="标题">
|
|
<Input v-model:value="taskForm.title" />
|
|
</FormItem>
|
|
<FormItem label="内容">
|
|
<Input v-model:value="taskForm.content" />
|
|
</FormItem>
|
|
<FormItem label="定投UID">
|
|
<Input
|
|
v-model:value="taskForm.fixedUserIds"
|
|
placeholder="请输入定投用户ID多个以逗号分隔 123,321"
|
|
@blur="taskForm.fixedUserIds = normalizeFixedIds(taskForm.fixedUserIds).join(',')"
|
|
@update:value="updateFixedCount"
|
|
/>
|
|
<div class="helper">{{ fixedUidCount }}/100 定投会忽略语言过滤条件</div>
|
|
</FormItem>
|
|
<div class="grid-three">
|
|
<FormItem label="几号(可空)">
|
|
<Input v-model:value="taskForm.days" />
|
|
</FormItem>
|
|
<FormItem label="几时">
|
|
<Input v-model:value="taskForm.hours" />
|
|
</FormItem>
|
|
<FormItem label="几分">
|
|
<Input v-model:value="taskForm.minutes" />
|
|
</FormItem>
|
|
</div>
|
|
</Form>
|
|
</Modal>
|
|
</Page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.panel,
|
|
.toolbar {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.grid-two {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid-three {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.helper {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|