|
|
<template>
|
|
|
<view class="push-message-page">
|
|
|
<TopDivBar @back="backToIndex" />
|
|
|
|
|
|
<view class="page-body">
|
|
|
<view class="tabs-bar">
|
|
|
<tn-tabs
|
|
|
v-model="currentTabIndex"
|
|
|
:bottom-shadow="false"
|
|
|
:bar="false"
|
|
|
height="40px"
|
|
|
>
|
|
|
<TnTabsItem
|
|
|
v-for="(item, index) in tabsData"
|
|
|
:key="index"
|
|
|
:title="item.text"
|
|
|
@click="currentTabIndex = index"
|
|
|
/>
|
|
|
</tn-tabs>
|
|
|
</view>
|
|
|
|
|
|
<!-- 语音 -->
|
|
|
<view v-show="currentTabIndex === 0" class="tab-panel">
|
|
|
<view class="field">
|
|
|
<text class="field-label">要呼叫的票号</text>
|
|
|
<input
|
|
|
v-model="voiceForm.ticketNo"
|
|
|
class="field-input"
|
|
|
placeholder="请输入要呼叫的票号"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="field">
|
|
|
<text class="field-label">窗口</text>
|
|
|
<input
|
|
|
v-model="voiceForm.windowNo"
|
|
|
class="field-input"
|
|
|
placeholder="请输入窗口号或窗口名称"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="actions">
|
|
|
<tn-button
|
|
|
type="primary"
|
|
|
:loading="voiceSending"
|
|
|
@click="onVoiceSend"
|
|
|
>
|
|
|
发送呼叫
|
|
|
</tn-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 信息屏 -->
|
|
|
<view v-show="currentTabIndex === 1" class="tab-panel">
|
|
|
<view class="field">
|
|
|
<text class="field-label">推送目标</text>
|
|
|
<TnCheckboxGroup v-model="screenForm.targets" class="checkbox-row">
|
|
|
<TnCheckbox label="sync" size="lg" :border="true"
|
|
|
>同步屏</TnCheckbox
|
|
|
>
|
|
|
<TnCheckbox label="composite" size="lg" :border="true"
|
|
|
>综合屏</TnCheckbox
|
|
|
>
|
|
|
</TnCheckboxGroup>
|
|
|
</view>
|
|
|
<view class="field">
|
|
|
<text class="field-label">推送内容</text>
|
|
|
<textarea
|
|
|
v-model="screenForm.content"
|
|
|
class="field-textarea"
|
|
|
placeholder="请输入要推送到信息屏的内容"
|
|
|
:maxlength="500"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="actions">
|
|
|
<tn-button
|
|
|
type="primary"
|
|
|
:loading="screenSending"
|
|
|
@click="onScreenPush"
|
|
|
>
|
|
|
推送至信息屏
|
|
|
</tn-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 短信 -->
|
|
|
<view v-show="currentTabIndex === 2" class="tab-panel">
|
|
|
<view class="field">
|
|
|
<text class="field-label">目标手机号</text>
|
|
|
<input
|
|
|
v-model="smsForm.phone"
|
|
|
class="field-input"
|
|
|
type="number"
|
|
|
maxlength="11"
|
|
|
placeholder="请输入目标手机号码"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="field">
|
|
|
<text class="field-label">短信内容</text>
|
|
|
<textarea
|
|
|
v-model="smsForm.content"
|
|
|
class="field-textarea"
|
|
|
placeholder="请输入短信内容"
|
|
|
:maxlength="500"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="actions">
|
|
|
<tn-button type="primary" :loading="smsSending" @click="onSmsSend">
|
|
|
发送短信
|
|
|
</tn-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 小票模板 -->
|
|
|
<view
|
|
|
v-show="currentTabIndex === 3"
|
|
|
class="tab-panel ticket-template-panel"
|
|
|
>
|
|
|
<view v-if="templateLoading" class="template-loading"
|
|
|
>模板加载中...</view
|
|
|
>
|
|
|
<view
|
|
|
v-else-if="!printTemplateForm.sections.length"
|
|
|
class="template-loading"
|
|
|
>
|
|
|
暂无模板数据，请点击重新加载
|
|
|
</view>
|
|
|
<view v-else class="ticket-template-layout">
|
|
|
<view class="ticket-editor">
|
|
|
<view class="section-list">
|
|
|
<view
|
|
|
v-for="(section, index) in printTemplateForm.sections"
|
|
|
:key="index"
|
|
|
class="section-card"
|
|
|
>
|
|
|
<view class="section-head">
|
|
|
<text class="section-type">{{
|
|
|
getSectionTypeLabel(section)
|
|
|
}}</text>
|
|
|
</view>
|
|
|
|
|
|
<template v-if="section.type === 'text'">
|
|
|
<view
|
|
|
v-if="isPlaceholderTextSection(section)"
|
|
|
class="section-field"
|
|
|
>
|
|
|
<text class="section-label">占位文本</text>
|
|
|
<text class="section-readonly">{{ section.content }}</text>
|
|
|
</view>
|
|
|
<view v-else class="section-field">
|
|
|
<text class="section-label">文本内容</text>
|
|
|
<input
|
|
|
v-model="section.content"
|
|
|
class="field-input section-input"
|
|
|
placeholder="请输入文本内容"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="section-field">
|
|
|
<text class="section-label">字号</text>
|
|
|
<view class="option-row">
|
|
|
<view
|
|
|
v-for="size in fontSizeOptions"
|
|
|
:key="size.value"
|
|
|
class="option-chip"
|
|
|
:class="{ active: section.fontSize === size.value }"
|
|
|
@click="section.fontSize = size.value"
|
|
|
>
|
|
|
{{ size.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="section-field">
|
|
|
<text class="section-label">对齐</text>
|
|
|
<view class="option-row">
|
|
|
<view
|
|
|
v-for="align in alignOptions"
|
|
|
:key="align.value"
|
|
|
class="option-chip"
|
|
|
:class="{ active: section.align === align.value }"
|
|
|
@click="section.align = align.value"
|
|
|
>
|
|
|
{{ align.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
v-if="section.bold !== undefined"
|
|
|
class="section-field checkbox-field"
|
|
|
>
|
|
|
<TnCheckbox v-model="section.bold" size="lg" :border="true"
|
|
|
>加粗</TnCheckbox
|
|
|
>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="section.type === 'field'">
|
|
|
<view class="section-field">
|
|
|
<text class="section-label">字段标识</text>
|
|
|
<text class="section-readonly">{{ section.key }}</text>
|
|
|
</view>
|
|
|
<view class="section-field">
|
|
|
<text class="section-label">显示标签</text>
|
|
|
<input
|
|
|
v-model="section.label"
|
|
|
class="field-input section-input"
|
|
|
placeholder="如：业务"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="section-field">
|
|
|
<text class="section-label">后缀</text>
|
|
|
<input
|
|
|
v-model="section.suffix"
|
|
|
class="field-input section-input"
|
|
|
placeholder="如： 人"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="section-field checkbox-field">
|
|
|
<TnCheckbox v-model="section.show" size="lg" :border="true"
|
|
|
>显示该字段</TnCheckbox
|
|
|
>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<view
|
|
|
v-else-if="section.type === 'line'"
|
|
|
class="section-line-tip"
|
|
|
>
|
|
|
分隔线（不可编辑）
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="ticket-preview-wrap">
|
|
|
<text class="preview-label">预览效果</text>
|
|
|
<view class="ticket-preview-ticket">
|
|
|
<rich-text :nodes="printPreviewHtml" />
|
|
|
</view>
|
|
|
<text class="preview-tip"
|
|
|
>预览数据为示例，实际打印时按取号结果填充</text
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="actions template-actions">
|
|
|
<tn-button :loading="templateLoading" @click="loadPrintTemplate"
|
|
|
>重新加载</tn-button
|
|
|
>
|
|
|
<tn-button
|
|
|
type="primary"
|
|
|
:loading="templateSaving"
|
|
|
@click="onSavePrintTemplate"
|
|
|
>
|
|
|
保存模板
|
|
|
</tn-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { getPrintTemplate, savePrintTemplate } from "@/api/print.js";
|
|
|
import TopDivBar from "@/components/TopDivBar.vue";
|
|
|
import TnCheckboxGroup from "@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox-group.vue";
|
|
|
import TnCheckbox from "@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue";
|
|
|
import TnTabsItem from "@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue";
|
|
|
import TnTabs from "@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue";
|
|
|
import {
|
|
|
buildPrintPreviewData,
|
|
|
buildPrintTemplateSaveBody,
|
|
|
getDefaultPrintTemplate,
|
|
|
getMinimalPrintTemplateForTest,
|
|
|
isPlaceholderTextSection,
|
|
|
parsePrintTemplate,
|
|
|
PRINT_SAMPLE_DATA,
|
|
|
renderPrintTemplateHtml,
|
|
|
} from "@/utils/printTemplate.js";
|
|
|
import { computed, reactive, ref, watch } from "vue";
|
|
|
|
|
|
const DEFAULT_SMS_TEMPLATE =
|
|
|
"尊敬的纳税人：【办税服务厅】提醒您尽快办理相关业务。如有疑问请致电大厅咨询。感谢您的配合！";
|
|
|
|
|
|
const PRINT_TEMPLATE_TAB_INDEX = 3;
|
|
|
// 测试开关：true 时保存极小 sections，验证是否因数据过大导致签名失败
|
|
|
const USE_MINIMAL_SECTIONS_FOR_SAVE_TEST = true;
|
|
|
|
|
|
const currentTabIndex = ref(0);
|
|
|
const tabsData = [
|
|
|
{ text: "语音" },
|
|
|
{ text: "信息屏" },
|
|
|
{ text: "短信" },
|
|
|
// { text: "小票模板" },
|
|
|
];
|
|
|
|
|
|
const fontSizeOptions = [
|
|
|
{ label: "小", value: 1 },
|
|
|
{ label: "中", value: 2 },
|
|
|
{ label: "大", value: 3 },
|
|
|
];
|
|
|
|
|
|
const alignOptions = [
|
|
|
{ label: "左", value: "left" },
|
|
|
{ label: "中", value: "center" },
|
|
|
{ label: "右", value: "right" },
|
|
|
];
|
|
|
|
|
|
const printTemplateForm = reactive({
|
|
|
cutPaper: true,
|
|
|
sections: [],
|
|
|
});
|
|
|
const templateLoading = ref(false);
|
|
|
const templateSaving = ref(false);
|
|
|
|
|
|
const printPreviewHtml = computed(() => {
|
|
|
const previewData = buildPrintPreviewData(
|
|
|
printTemplateForm,
|
|
|
PRINT_SAMPLE_DATA,
|
|
|
);
|
|
|
return renderPrintTemplateHtml(printTemplateForm, previewData);
|
|
|
});
|
|
|
|
|
|
const getSectionTypeLabel = (section) => {
|
|
|
if (section.type === "text") return "文本";
|
|
|
if (section.type === "field") return "字段";
|
|
|
if (section.type === "line") return "分隔线";
|
|
|
return section.type || "未知";
|
|
|
};
|
|
|
|
|
|
const applyPrintTemplate = (data) => {
|
|
|
const template = parsePrintTemplate(data);
|
|
|
if (!template.sections.length) {
|
|
|
return false;
|
|
|
}
|
|
|
printTemplateForm.cutPaper = template.cutPaper;
|
|
|
printTemplateForm.sections = JSON.parse(JSON.stringify(template.sections));
|
|
|
return true;
|
|
|
};
|
|
|
|
|
|
const loadPrintTemplate = async () => {
|
|
|
templateLoading.value = true;
|
|
|
try {
|
|
|
const data = await getPrintTemplate();
|
|
|
console.log("[print-template] getPrintTemplate 原始返回:", data);
|
|
|
console.log("[print-template] 返回详情:", JSON.stringify(data, null, 2));
|
|
|
const applied = applyPrintTemplate(data);
|
|
|
console.log(
|
|
|
"[print-template] 解析结果 applied:",
|
|
|
applied,
|
|
|
"sections:",
|
|
|
printTemplateForm.sections.length,
|
|
|
);
|
|
|
if (!applied) {
|
|
|
applyPrintTemplate(getDefaultPrintTemplate());
|
|
|
uni.showToast({
|
|
|
title: "模板解析失败，已使用默认模板",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log("[print-template] 获取打印模板失败:", error);
|
|
|
applyPrintTemplate(getDefaultPrintTemplate());
|
|
|
uni.showToast({
|
|
|
title: "加载失败，已使用默认模板",
|
|
|
icon: "none",
|
|
|
});
|
|
|
} finally {
|
|
|
templateLoading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const onSavePrintTemplate = async () => {
|
|
|
if (!printTemplateForm.sections.length) {
|
|
|
uni.showToast({ title: "模板区块不能为空", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
templateSaving.value = true;
|
|
|
try {
|
|
|
const saveBody = USE_MINIMAL_SECTIONS_FOR_SAVE_TEST
|
|
|
? getMinimalPrintTemplateForTest()
|
|
|
: buildPrintTemplateSaveBody(printTemplateForm);
|
|
|
console.log(
|
|
|
"[print-template] 保存请求体(测试模式:",
|
|
|
USE_MINIMAL_SECTIONS_FOR_SAVE_TEST,
|
|
|
"):",
|
|
|
saveBody,
|
|
|
);
|
|
|
await savePrintTemplate(saveBody);
|
|
|
uni.showToast({
|
|
|
title: USE_MINIMAL_SECTIONS_FOR_SAVE_TEST ? "测试保存成功" : "保存成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
} catch (error) {
|
|
|
console.log("保存打印模板失败:", error);
|
|
|
} finally {
|
|
|
templateSaving.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
watch(currentTabIndex, (index) => {
|
|
|
if (Number(index) === PRINT_TEMPLATE_TAB_INDEX) {
|
|
|
loadPrintTemplate();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const voiceForm = reactive({
|
|
|
ticketNo: "",
|
|
|
windowNo: "",
|
|
|
});
|
|
|
const voiceSending = ref(false);
|
|
|
|
|
|
const screenForm = reactive({
|
|
|
targets: [],
|
|
|
content: "",
|
|
|
});
|
|
|
const screenSending = ref(false);
|
|
|
|
|
|
const smsForm = reactive({
|
|
|
phone: "",
|
|
|
content: DEFAULT_SMS_TEMPLATE,
|
|
|
});
|
|
|
const smsSending = ref(false);
|
|
|
|
|
|
const backToIndex = () => {
|
|
|
uni.navigateBack({
|
|
|
fail: () => {
|
|
|
uni.navigateTo({ url: "/pages/index/index" });
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const onVoiceSend = () => {
|
|
|
const ticket = voiceForm.ticketNo.trim();
|
|
|
const win = voiceForm.windowNo.trim();
|
|
|
if (!ticket) {
|
|
|
uni.showToast({ title: "请输入要呼叫的票号", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
if (!win) {
|
|
|
uni.showToast({ title: "请输入窗口", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
uni.showModal({
|
|
|
title: "确认发送",
|
|
|
content: `将呼叫票号「${ticket}」至窗口「${win}」，是否继续？`,
|
|
|
success: (res) => {
|
|
|
if (!res.confirm) return;
|
|
|
voiceSending.value = true;
|
|
|
try {
|
|
|
console.log("[voice-call]", { ticketNo: ticket, windowNo: win });
|
|
|
uni.showToast({ title: "呼叫指令已提交", icon: "success" });
|
|
|
} finally {
|
|
|
voiceSending.value = false;
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const onScreenPush = () => {
|
|
|
if (!screenForm.targets.length) {
|
|
|
uni.showToast({ title: "请至少选择一种信息屏", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
if (!screenForm.content.trim()) {
|
|
|
uni.showToast({ title: "请输入推送内容", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
uni.showModal({
|
|
|
title: "确认推送",
|
|
|
content: "确定将内容推送到已选信息屏？",
|
|
|
success: (res) => {
|
|
|
if (!res.confirm) return;
|
|
|
screenSending.value = true;
|
|
|
try {
|
|
|
console.log("[screen-push]", {
|
|
|
targets: screenForm.targets,
|
|
|
content: screenForm.content,
|
|
|
});
|
|
|
uni.showToast({ title: "推送已提交", icon: "success" });
|
|
|
} finally {
|
|
|
screenSending.value = false;
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const onSmsSend = () => {
|
|
|
const phone = smsForm.phone.trim();
|
|
|
if (!phone) {
|
|
|
uni.showToast({ title: "请输入手机号码", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
if (!/^1\d{10}$/.test(phone)) {
|
|
|
uni.showToast({ title: "请输入11位有效手机号", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
if (!smsForm.content.trim()) {
|
|
|
uni.showToast({ title: "请输入短信内容", icon: "none" });
|
|
|
return;
|
|
|
}
|
|
|
uni.showModal({
|
|
|
title: "确认发送",
|
|
|
content: `将向 ${phone} 发送短信，是否继续？`,
|
|
|
success: (res) => {
|
|
|
if (!res.confirm) return;
|
|
|
smsSending.value = true;
|
|
|
try {
|
|
|
console.log("[sms-send]", { phone, content: smsForm.content });
|
|
|
uni.showToast({ title: "短信已提交", icon: "success" });
|
|
|
} finally {
|
|
|
smsSending.value = false;
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.push-message-page {
|
|
|
min-height: 100vh;
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
|
|
|
.page-body {
|
|
|
padding: calc(6vh + 64px) 24px 24px;
|
|
|
max-width: 720px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.ticket-template-panel {
|
|
|
max-width: none;
|
|
|
}
|
|
|
|
|
|
.ticket-template-layout {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
align-items: flex-start;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.ticket-editor {
|
|
|
flex: 1;
|
|
|
min-width: 320px;
|
|
|
}
|
|
|
|
|
|
.ticket-preview-wrap {
|
|
|
width: 300px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.preview-label {
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
color: #374151;
|
|
|
font-weight: 500;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.ticket-preview-ticket {
|
|
|
background: #fff;
|
|
|
border: 1px dashed #d1d5db;
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
min-height: 280px;
|
|
|
}
|
|
|
|
|
|
.preview-tip {
|
|
|
display: block;
|
|
|
margin-top: 8px;
|
|
|
font-size: 12px;
|
|
|
color: #9ca3af;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.template-loading {
|
|
|
padding: 40px 0;
|
|
|
text-align: center;
|
|
|
color: #6b7280;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.section-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.section-card {
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
padding: 12px;
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
|
|
|
.section-head {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.section-type {
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
color: #2563eb;
|
|
|
}
|
|
|
|
|
|
.section-field {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.section-label {
|
|
|
display: block;
|
|
|
font-size: 13px;
|
|
|
color: #6b7280;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.section-input {
|
|
|
height: 40px;
|
|
|
}
|
|
|
|
|
|
.section-readonly {
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
color: #111827;
|
|
|
padding: 8px 0;
|
|
|
}
|
|
|
|
|
|
.section-line-tip {
|
|
|
font-size: 13px;
|
|
|
color: #9ca3af;
|
|
|
}
|
|
|
|
|
|
.option-row {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.option-chip {
|
|
|
min-width: 48px;
|
|
|
height: 32px;
|
|
|
padding: 0 12px;
|
|
|
border: 1px solid #d1d5db;
|
|
|
border-radius: 6px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 13px;
|
|
|
color: #374151;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.option-chip.active {
|
|
|
border-color: #2563eb;
|
|
|
color: #2563eb;
|
|
|
background: #eff6ff;
|
|
|
}
|
|
|
|
|
|
.checkbox-field {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.template-actions {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.tabs-bar {
|
|
|
background: #fff;
|
|
|
border-radius: 12px;
|
|
|
padding: 8px 12px;
|
|
|
margin-bottom: 16px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
|
|
|
.tab-panel {
|
|
|
background: #fff;
|
|
|
border-radius: 12px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
|
|
|
.field {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.field-label {
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
color: #374151;
|
|
|
margin-bottom: 8px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.field-input {
|
|
|
width: 100%;
|
|
|
height: 44px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
padding: 0 12px;
|
|
|
font-size: 15px;
|
|
|
box-sizing: border-box;
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
|
|
|
.field-textarea {
|
|
|
width: 100%;
|
|
|
min-height: 140px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
padding: 12px;
|
|
|
font-size: 15px;
|
|
|
box-sizing: border-box;
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
|
|
|
.checkbox-row {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 16px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.actions {
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
</style>
|
