714 lines
20 KiB
Vue
714 lines
20 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 {
|
||
Button,
|
||
Card,
|
||
Input,
|
||
InputNumber,
|
||
message,
|
||
Modal,
|
||
Space,
|
||
Spin,
|
||
Switch,
|
||
Tag,
|
||
TextArea,
|
||
} from 'antdv-next';
|
||
|
||
import {
|
||
getResidentInviteConfig,
|
||
saveResidentInviteConfig,
|
||
} from '#/api/legacy/resident-activity';
|
||
import ActivityResourceGroupSelectDrawer from '#/views/props/components/activity-resource-group-select-drawer.vue';
|
||
import { getAllowedSysOrigins } from '#/views/system/shared';
|
||
|
||
defineOptions({ name: 'ResidentInviteConfigPage' });
|
||
|
||
function createReward() {
|
||
return {
|
||
goldAmount: 0,
|
||
id: null,
|
||
rewardGroupId: null,
|
||
rewardGroupName: '',
|
||
};
|
||
}
|
||
|
||
function createRule(threshold = 1) {
|
||
return {
|
||
enabled: true,
|
||
goldAmount: 0,
|
||
id: null,
|
||
rewardGroupId: null,
|
||
rewardGroupName: '',
|
||
threshold,
|
||
};
|
||
}
|
||
|
||
const accessStore = useAccessStore();
|
||
const sysOriginOptions = computed(() => {
|
||
const options = getAllowedSysOrigins(accessStore.accessCodes || []);
|
||
return options.length > 0 ? options : getAllowedSysOrigins([]);
|
||
});
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const groupPickerOpen = ref(false);
|
||
|
||
const pickerTarget = reactive({
|
||
listKey: '',
|
||
rowIndex: -1,
|
||
});
|
||
|
||
const form = reactive<Record<string, any>>({
|
||
antiCheat: {
|
||
sameDeviceOnce: true,
|
||
sameIpOnce: true,
|
||
},
|
||
downloadUrl: '',
|
||
enabled: false,
|
||
inviteeBindReward: createReward(),
|
||
inviteeRechargeRules: [],
|
||
inviterBindReward: createReward(),
|
||
inviterTotalRechargeRules: [],
|
||
inviterValidCountRules: [],
|
||
serviceContact: '',
|
||
shareDesc: '',
|
||
shareTitle: '',
|
||
sysOrigin: '',
|
||
timezone: 'Asia/Riyadh',
|
||
});
|
||
|
||
const statusMeta = computed(() => (
|
||
form.enabled
|
||
? { color: 'success', text: '已启用' }
|
||
: { color: 'default', text: '已关闭' }
|
||
));
|
||
|
||
const summaryCards = computed(() => [
|
||
{
|
||
label: '邀请方首邀奖励',
|
||
value: formatRewardSummary(form.inviterBindReward),
|
||
},
|
||
{
|
||
label: '被邀请方注册礼包',
|
||
value: `${formatRewardSummary(form.inviteeBindReward)} / H5 固定展示 +1000 金币`,
|
||
},
|
||
{
|
||
label: '被邀请人充值阶梯',
|
||
value: formatRuleSummary('inviteeRechargeRules'),
|
||
},
|
||
{
|
||
label: '邀请方任务阶梯',
|
||
value: [
|
||
`人数 ${formatRuleSummary('inviterValidCountRules')}`,
|
||
`充值 ${formatRuleSummary('inviterTotalRechargeRules')}`,
|
||
].join(' / '),
|
||
},
|
||
]);
|
||
|
||
function formatRewardSummary(reward: Record<string, any>) {
|
||
const parts: string[] = [];
|
||
const goldAmount = Number(reward?.goldAmount || 0);
|
||
if (goldAmount > 0) {
|
||
parts.push(`${goldAmount} 金币`);
|
||
}
|
||
if (reward?.rewardGroupName) {
|
||
parts.push(String(reward.rewardGroupName));
|
||
}
|
||
return parts.length > 0 ? parts.join(' + ') : '未配置';
|
||
}
|
||
|
||
function formatRuleSummary(listKey: string) {
|
||
const list = (form[listKey] || []) as Array<Record<string, any>>;
|
||
if (list.length === 0) {
|
||
return '0 个阶梯';
|
||
}
|
||
const enabledCount = list.filter((item) => item.enabled !== false).length;
|
||
return `${enabledCount}/${list.length} 启用`;
|
||
}
|
||
|
||
function normalizeReward(value: null | Record<string, any> | undefined) {
|
||
return {
|
||
goldAmount: Number(value?.goldAmount || 0),
|
||
id: value?.id ?? null,
|
||
rewardGroupId: value?.rewardGroupId ?? null,
|
||
rewardGroupName: value?.rewardGroupName || '',
|
||
};
|
||
}
|
||
|
||
function normalizeRuleList(list: Array<Record<string, any>> | null | undefined) {
|
||
return (list || []).map((item) => ({
|
||
enabled: item?.enabled !== false,
|
||
goldAmount: Number(item?.goldAmount || 0),
|
||
id: item?.id ?? null,
|
||
rewardGroupId: item?.rewardGroupId ?? null,
|
||
rewardGroupName: item?.rewardGroupName || '',
|
||
threshold: Number(item?.threshold || 0),
|
||
}));
|
||
}
|
||
|
||
function normalizeConfig(result: null | Record<string, any> | undefined) {
|
||
const value = result ?? {};
|
||
form.sysOrigin = String(value.sysOrigin || form.sysOrigin || sysOriginOptions.value[0]?.value || '');
|
||
form.enabled = Boolean(value.enabled);
|
||
form.downloadUrl = String(value.downloadUrl || '');
|
||
form.shareTitle = String(value.shareTitle || '');
|
||
form.shareDesc = String(value.shareDesc || '');
|
||
form.serviceContact = String(value.serviceContact || '');
|
||
form.timezone = String(value.timezone || 'Asia/Riyadh');
|
||
form.antiCheat.sameIpOnce = value?.antiCheat?.sameIpOnce !== false;
|
||
form.antiCheat.sameDeviceOnce = value?.antiCheat?.sameDeviceOnce !== false;
|
||
form.inviterBindReward = normalizeReward(value.inviterBindReward);
|
||
form.inviteeBindReward = normalizeReward(value.inviteeBindReward);
|
||
form.inviteeRechargeRules = normalizeRuleList(value.inviteeRechargeRules);
|
||
form.inviterValidCountRules = normalizeRuleList(value.inviterValidCountRules);
|
||
form.inviterTotalRechargeRules = normalizeRuleList(value.inviterTotalRechargeRules);
|
||
}
|
||
|
||
async function loadData() {
|
||
if (!form.sysOrigin) {
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
try {
|
||
const result = await getResidentInviteConfig(form.sysOrigin);
|
||
normalizeConfig(result);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
watch(
|
||
sysOriginOptions,
|
||
(options) => {
|
||
if (!form.sysOrigin) {
|
||
form.sysOrigin = String(options[0]?.value || '');
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
watch(
|
||
() => form.sysOrigin,
|
||
(value) => {
|
||
if (value) {
|
||
void loadData();
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
function addRule(listKey: string) {
|
||
const list = form[listKey] as Array<Record<string, any>>;
|
||
const nextThreshold = list.length > 0 ? Number(list[list.length - 1]?.threshold || 0) + 1 : 1;
|
||
list.push(createRule(nextThreshold));
|
||
}
|
||
|
||
function normalizeRowIndex(index: number | string) {
|
||
return typeof index === 'number' ? index : Number(index || 0);
|
||
}
|
||
|
||
function removeRule(listKey: string, index: number | string) {
|
||
(form[listKey] as Array<Record<string, any>>).splice(normalizeRowIndex(index), 1);
|
||
}
|
||
|
||
function openRewardPicker(listKey: string, rowIndex: number | string = -1) {
|
||
pickerTarget.listKey = listKey;
|
||
pickerTarget.rowIndex = normalizeRowIndex(rowIndex);
|
||
groupPickerOpen.value = true;
|
||
}
|
||
|
||
function clearRewardGroup(listKey: string, rowIndex: number | string = -1) {
|
||
const normalizedRowIndex = normalizeRowIndex(rowIndex);
|
||
const target = normalizedRowIndex >= 0
|
||
? (form[listKey] as Array<Record<string, any>>)[normalizedRowIndex]
|
||
: form[listKey];
|
||
target.rewardGroupId = null;
|
||
target.rewardGroupName = '';
|
||
}
|
||
|
||
function handleRewardGroupSelect(row: Record<string, any>) {
|
||
const target = pickerTarget.rowIndex >= 0
|
||
? (form[pickerTarget.listKey] as Array<Record<string, any>>)[pickerTarget.rowIndex]
|
||
: form[pickerTarget.listKey];
|
||
target.rewardGroupId = row.id;
|
||
target.rewardGroupName = row.name;
|
||
groupPickerOpen.value = false;
|
||
}
|
||
|
||
async function submitForm() {
|
||
saving.value = true;
|
||
try {
|
||
await saveResidentInviteConfig({
|
||
antiCheat: { ...form.antiCheat },
|
||
downloadUrl: String(form.downloadUrl || '').trim(),
|
||
enabled: Boolean(form.enabled),
|
||
inviteeBindReward: { ...form.inviteeBindReward },
|
||
inviteeRechargeRules: (form.inviteeRechargeRules || []).map((item: Record<string, any>) => ({
|
||
enabled: Boolean(item.enabled),
|
||
goldAmount: Number(item.goldAmount || 0),
|
||
id: item.id ?? null,
|
||
rewardGroupId: item.rewardGroupId ?? null,
|
||
threshold: Number(item.threshold || 0),
|
||
})),
|
||
inviterBindReward: { ...form.inviterBindReward },
|
||
inviterTotalRechargeRules: (form.inviterTotalRechargeRules || []).map((item: Record<string, any>) => ({
|
||
enabled: Boolean(item.enabled),
|
||
goldAmount: Number(item.goldAmount || 0),
|
||
id: item.id ?? null,
|
||
rewardGroupId: item.rewardGroupId ?? null,
|
||
threshold: Number(item.threshold || 0),
|
||
})),
|
||
inviterValidCountRules: (form.inviterValidCountRules || []).map((item: Record<string, any>) => ({
|
||
enabled: Boolean(item.enabled),
|
||
goldAmount: Number(item.goldAmount || 0),
|
||
id: item.id ?? null,
|
||
rewardGroupId: item.rewardGroupId ?? null,
|
||
threshold: Number(item.threshold || 0),
|
||
})),
|
||
serviceContact: String(form.serviceContact || '').trim(),
|
||
shareDesc: String(form.shareDesc || '').trim(),
|
||
shareTitle: String(form.shareTitle || '').trim(),
|
||
sysOrigin: form.sysOrigin,
|
||
timezone: String(form.timezone || '').trim(),
|
||
});
|
||
message.success('保存成功');
|
||
await loadData();
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
|
||
function handleSubmit() {
|
||
Modal.confirm({
|
||
async onOk() {
|
||
await submitForm();
|
||
},
|
||
title: '确认覆盖当前系统的整套邀请活动配置？',
|
||
});
|
||
}
|
||
|
||
const rewardSections = [
|
||
{ key: 'inviteeRechargeRules', title: '被邀请人充值达标奖励', thresholdLabel: '充值金币阈值' },
|
||
{ key: 'inviterValidCountRules', title: '邀请有效人数任务', thresholdLabel: '邀请人数阈值' },
|
||
{ key: 'inviterTotalRechargeRules', title: '邀请名下累计充值任务', thresholdLabel: '累计充值金币阈值' },
|
||
];
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height title="邀请活动配置">
|
||
<div class="invite-config-page">
|
||
<Card :bordered="false" class="overview-card">
|
||
<div class="toolbar">
|
||
<Space align="end" wrap>
|
||
<div class="toolbar-item">
|
||
<div class="field-label">系统</div>
|
||
<SysOriginSelect
|
||
v-model:value="form.sysOrigin"
|
||
:options="sysOriginOptions"
|
||
style="width: 180px"
|
||
/>
|
||
</div>
|
||
<Tag :color="statusMeta.color">
|
||
{{ statusMeta.text }}
|
||
</Tag>
|
||
</Space>
|
||
<Button :loading="saving" type="primary" @click="handleSubmit">
|
||
保存配置
|
||
</Button>
|
||
</div>
|
||
|
||
<div class="summary-grid">
|
||
<div
|
||
v-for="item in summaryCards"
|
||
:key="item.label"
|
||
class="summary-item"
|
||
>
|
||
<div class="summary-label">{{ item.label }}</div>
|
||
<div class="summary-value" :title="item.value">{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<Spin :spinning="loading">
|
||
<div class="content-grid">
|
||
<Card :bordered="false" class="config-card basic-card" title="基础设置">
|
||
<div class="form-grid">
|
||
<div class="field compact-field">
|
||
<div class="field-label">活动开关</div>
|
||
<Switch v-model:checked="form.enabled" />
|
||
</div>
|
||
<div class="field">
|
||
<div class="field-label">时区</div>
|
||
<Input v-model:value="form.timezone" />
|
||
</div>
|
||
<div class="field field-span-2">
|
||
<div class="field-label">下载地址</div>
|
||
<Input v-model:value="form.downloadUrl" />
|
||
</div>
|
||
<div class="field">
|
||
<div class="field-label">分享标题</div>
|
||
<Input v-model:value="form.shareTitle" />
|
||
</div>
|
||
<div class="field">
|
||
<div class="field-label">客服联系方式</div>
|
||
<Input v-model:value="form.serviceContact" />
|
||
</div>
|
||
<div class="field field-span-2">
|
||
<div class="field-label">分享描述</div>
|
||
<TextArea
|
||
v-model:value="form.shareDesc"
|
||
:auto-size="{ minRows: 2, maxRows: 4 }"
|
||
/>
|
||
</div>
|
||
<div class="anti-cheat field-span-2">
|
||
<div class="switch-row">
|
||
<span class="field-label">同 IP 只计一次</span>
|
||
<Switch v-model:checked="form.antiCheat.sameIpOnce" />
|
||
</div>
|
||
<div class="switch-row">
|
||
<span class="field-label">同设备只计一次</span>
|
||
<Switch v-model:checked="form.antiCheat.sameDeviceOnce" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<div class="reward-card-list">
|
||
<Card :bordered="false" class="config-card" title="邀请方首邀奖励">
|
||
<div class="reward-row">
|
||
<div class="field amount-field">
|
||
<div class="field-label">金币</div>
|
||
<InputNumber
|
||
v-model:value="form.inviterBindReward.goldAmount"
|
||
:min="0"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div class="field field-grow">
|
||
<div class="field-label">奖励组</div>
|
||
<div class="reward-group-box">
|
||
<Tag v-if="form.inviterBindReward.rewardGroupName" color="blue">
|
||
{{ form.inviterBindReward.rewardGroupName }}
|
||
</Tag>
|
||
<span v-else class="placeholder">未选择奖励组</span>
|
||
</div>
|
||
</div>
|
||
<Space class="reward-actions" wrap>
|
||
<Button @click="openRewardPicker('inviterBindReward')">选择奖励组</Button>
|
||
<Button @click="clearRewardGroup('inviterBindReward')">清空</Button>
|
||
</Space>
|
||
</div>
|
||
</Card>
|
||
|
||
<Card :bordered="false" class="config-card" title="被邀请方注册礼包（可不填，H5 固定展示 +1000 金币）">
|
||
<div class="reward-row">
|
||
<div class="field amount-field">
|
||
<div class="field-label">金币</div>
|
||
<InputNumber
|
||
v-model:value="form.inviteeBindReward.goldAmount"
|
||
:min="0"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div class="field field-grow">
|
||
<div class="field-label">奖励组</div>
|
||
<div class="reward-group-box">
|
||
<Tag v-if="form.inviteeBindReward.rewardGroupName" color="blue">
|
||
{{ form.inviteeBindReward.rewardGroupName }}
|
||
</Tag>
|
||
<span v-else class="placeholder">未选择奖励组</span>
|
||
</div>
|
||
</div>
|
||
<Space class="reward-actions" wrap>
|
||
<Button @click="openRewardPicker('inviteeBindReward')">选择奖励组</Button>
|
||
<Button @click="clearRewardGroup('inviteeBindReward')">清空</Button>
|
||
</Space>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rule-section-list">
|
||
<Card
|
||
v-for="section in rewardSections"
|
||
:key="section.key"
|
||
:bordered="false"
|
||
class="config-card"
|
||
:title="section.title"
|
||
>
|
||
<template #extra>
|
||
<Button type="dashed" @click="addRule(section.key)">新增阶梯</Button>
|
||
</template>
|
||
|
||
<div v-if="(form[section.key] || []).length === 0" class="empty-box">
|
||
暂无配置
|
||
</div>
|
||
|
||
<div
|
||
v-for="(item, index) in form[section.key]"
|
||
:key="`${section.key}-${index}`"
|
||
class="rule-item"
|
||
>
|
||
<div class="field amount-field">
|
||
<div class="field-label">{{ section.thresholdLabel }}</div>
|
||
<InputNumber v-model:value="item.threshold" :min="1" style="width: 100%" />
|
||
</div>
|
||
<div class="field amount-field">
|
||
<div class="field-label">金币</div>
|
||
<InputNumber v-model:value="item.goldAmount" :min="0" style="width: 100%" />
|
||
</div>
|
||
<div class="field field-grow">
|
||
<div class="field-label">奖励组</div>
|
||
<div class="reward-group-box">
|
||
<Tag v-if="item.rewardGroupName" color="blue">
|
||
{{ item.rewardGroupName }}
|
||
</Tag>
|
||
<span v-else class="placeholder">未选择奖励组</span>
|
||
</div>
|
||
</div>
|
||
<div class="field switch-field">
|
||
<div class="field-label">启用</div>
|
||
<Switch v-model:checked="item.enabled" />
|
||
</div>
|
||
<Space class="rule-actions" wrap>
|
||
<Button @click="openRewardPicker(section.key, index)">选择奖励组</Button>
|
||
<Button @click="clearRewardGroup(section.key, index)">清空</Button>
|
||
<Button danger @click="removeRule(section.key, index)">删除</Button>
|
||
</Space>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
|
||
<ActivityResourceGroupSelectDrawer
|
||
:open="groupPickerOpen"
|
||
:sys-origin="form.sysOrigin"
|
||
@close="groupPickerOpen = false"
|
||
@select="handleRewardGroupSelect"
|
||
/>
|
||
</Page>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.invite-config-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.overview-card,
|
||
.config-card {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.toolbar-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.field-label {
|
||
color: #475569;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.summary-item {
|
||
min-width: 0;
|
||
padding: 12px;
|
||
background: #f8fafc;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.summary-label {
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.summary-value {
|
||
margin-top: 6px;
|
||
overflow: hidden;
|
||
color: #0f172a;
|
||
font-weight: 600;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.content-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
|
||
gap: 16px;
|
||
align-items: start;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.reward-card-list,
|
||
.rule-section-list {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.rule-section-list {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.field {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.compact-field {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.field-span-2 {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.anti-cheat {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.switch-row {
|
||
min-height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px;
|
||
background: #f8fafc;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 6px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.reward-row {
|
||
display: grid;
|
||
grid-template-columns: 160px minmax(220px, 1fr) auto;
|
||
gap: 12px;
|
||
align-items: end;
|
||
}
|
||
|
||
.rule-item {
|
||
display: grid;
|
||
grid-template-columns: 160px 160px minmax(240px, 1fr) 88px auto;
|
||
gap: 12px;
|
||
align-items: end;
|
||
padding: 12px;
|
||
background: #fbfdff;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.rule-item + .rule-item {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.amount-field {
|
||
width: 160px;
|
||
}
|
||
|
||
.field-grow {
|
||
min-width: 0;
|
||
}
|
||
|
||
.switch-field {
|
||
width: 88px;
|
||
}
|
||
|
||
.reward-group-box {
|
||
min-height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
padding: 0 11px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.reward-actions,
|
||
.rule-actions {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.empty-box {
|
||
color: #94a3b8;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
@media (max-width: 1280px) {
|
||
.content-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.rule-item {
|
||
grid-template-columns: 160px 160px minmax(240px, 1fr);
|
||
}
|
||
|
||
.switch-field,
|
||
.rule-actions {
|
||
width: auto;
|
||
grid-column: span 1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.toolbar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.summary-grid,
|
||
.form-grid,
|
||
.anti-cheat,
|
||
.reward-row,
|
||
.rule-item {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.field-span-2 {
|
||
grid-column: span 1;
|
||
}
|
||
|
||
.amount-field,
|
||
.switch-field {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|