| | |
| | | <template> |
| | | <el-dialog |
| | | <FormDialog |
| | | v-model="dialogVisible" |
| | | :title="operationType === 'add' ? '新建工资表' : '编辑工资表'" |
| | | width="90%" |
| | | :close-on-click-modal="false" |
| | | destroy-on-close |
| | | @close="closeDia" |
| | | > |
| | | <template #footer> |
| | | <el-button type="info" @click="saveDraft">保存草稿</el-button> |
| | | <el-button type="primary" @click="submitForm">确认提交</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | </template> |
| | | <div class="form-dia-body"> |
| | | <!-- 基础资料 --> |
| | | <el-card class="form-card" shadow="never"> |
| | |
| | | <el-form ref="formRef" :model="form" :rules="rules" label-position="top"> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="工资主题" prop="title"> |
| | | <el-form-item label="工资主题" prop="salaryTitle"> |
| | | <el-input |
| | | v-model="form.title" |
| | | v-model="form.salaryTitle" |
| | | placeholder="请输入" |
| | | clearable |
| | | maxlength="20" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="选择部门" prop="deptId"> |
| | | <el-form-item label="选择部门" prop="deptIds"> |
| | | <el-select |
| | | v-model="form.deptId" |
| | | v-model="form.deptIds" |
| | | placeholder="请选择" |
| | | clearable |
| | | multiple |
| | | collapse-tags-tooltip |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="选择工资月份" prop="payMonth"> |
| | | <el-form-item label="选择工资月份" prop="salaryMonth"> |
| | | <el-date-picker |
| | | v-model="form.payMonth" |
| | | v-model="form.salaryMonth" |
| | | type="month" |
| | | value-format="YYYY-MM" |
| | | format="YYYY-MM" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="支付银行" prop="payBank"> |
| | | <el-select |
| | | v-model="form.payBank" |
| | | placeholder="请选择" |
| | | clearable |
| | | filterable |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="b in bankOptions" |
| | | :key="b" |
| | | :label="b" |
| | | :value="b" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="审核人" prop="auditUserId"> |
| | | <el-select |
| | | v-model="form.auditUserId" |
| | | placeholder="请选择审核人" |
| | | clearable |
| | | filterable |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in userList" |
| | | :key="item.userId" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-card> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <div class="toolbar"> |
| | | <el-button type="primary" @click="handleGenerate">生成工资表</el-button> |
| | | <el-button @click="handleExport">导出</el-button> |
| | | <el-button @click="handleImport">导入</el-button> |
| | | <el-button @click="handleClear">清空</el-button> |
| | | <el-button @click="openAddPerson">新增人员</el-button> |
| | | <el-button @click="handleBatchDelete">删除</el-button> |
| | | <el-button @click="handleTaxForm">个税表</el-button> |
| | | </div> |
| | |
| | | > |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column label="员工姓名" prop="staffName" minWidth="100" /> |
| | | <el-table-column label="角色" prop="roleName" minWidth="100" /> |
| | | <el-table-column label="部门" prop="deptName" minWidth="100" /> |
| | | <el-table-column label="基本工资" minWidth="110"> |
| | | <template #default="{ row }"> |
| | |
| | | <el-table-column label="计件工资" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.pieceworkSalary" |
| | | v-model.number="row.pieceSalary" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.pieceworkSalary = parseNum(row.pieceworkSalary)" |
| | | @input="row.pieceSalary = parseNum(row.pieceSalary)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <el-table-column label="社保个人" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.socialSecurityIndividuals" |
| | | v-model.number="row.socialPersonal" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.socialSecurityIndividuals = parseNum(row.socialSecurityIndividuals)" |
| | | @input="row.socialPersonal = parseNum(row.socialPersonal)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="公积金个人" minWidth="120"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.providentFundIndividuals" |
| | | v-model.number="row.fundPersonal" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.providentFundIndividuals = parseNum(row.providentFundIndividuals)" |
| | | @input="row.fundPersonal = parseNum(row.fundPersonal)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="其他支出" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.otherDeduct" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.otherDeduct = parseNum(row.otherDeduct)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="工资个税" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.salaryTax" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.salaryTax = parseNum(row.salaryTax)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="应发工资" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.grossSalary" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.grossSalary = parseNum(row.grossSalary)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="应扣工资" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.deductSalary" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.deductSalary = parseNum(row.deductSalary)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="实发工资" minWidth="110"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model.number="row.netSalary" |
| | | type="number" |
| | | placeholder="0" |
| | | size="small" |
| | | @input="row.netSalary = parseNum(row.netSalary)" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="备注" minWidth="120"> |
| | | <template #default="{ row }"> |
| | | <el-input |
| | | v-model="row.remark" |
| | | placeholder="请输入" |
| | | size="small" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <div v-if="!employeeList.length" class="table-empty">暂无数据</div> |
| | | <div v-else class="salary-total"> |
| | | <span class="total-label">工资总额:</span> |
| | | <span class="total-value">¥ {{ totalSalary.toFixed(2) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | <el-button type="primary" @click="submitForm">确定</el-button> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <!-- 新增人员弹窗 --> |
| | | <el-dialog |
| | |
| | | /> |
| | | </el-table> |
| | | </el-dialog> |
| | | </el-dialog> |
| | | </FormDialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, toRefs, computed, getCurrentInstance, nextTick } from "vue"; |
| | | import { ArrowUp } from "@element-plus/icons-vue"; |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import { listDept } from "@/api/system/dept.js"; |
| | | import { staffOnJobList } from "@/api/personnelManagement/monthlyStatistics.js"; |
| | | import { bankList } from "@/api/personnelManagement/bank.js"; |
| | | import { |
| | | monthlyStatisticsAdd, |
| | | monthlyStatisticsUpdate, |
| | | monthlyStatisticsGet, |
| | | } from "@/api/personnelManagement/monthlyStatistics.js"; |
| | | staffSalaryMainAdd, |
| | | staffSalaryMainUpdate, |
| | | staffSalaryMainCalculateSalary, |
| | | } from "@/api/personnelManagement/staffSalaryMain.js"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | |
| | | |
| | | const emit = defineEmits(["update:modelValue", "close"]); |
| | | const props = defineProps({ |
| | |
| | | const deptStaffTree = ref([]); |
| | | const employeeList = ref([]); |
| | | const selectedEmployees = ref([]); |
| | | const bankOptions = ref([]); |
| | | const userList = ref([]); |
| | | const taxTableData = ref([ |
| | | { level: 1, range: "不超过36000元", rate: 3, quickDeduction: 0 }, |
| | | { level: 2, range: "超过36000-144000元", rate: 10, quickDeduction: 2520 }, |
| | |
| | | const data = reactive({ |
| | | form: { |
| | | id: undefined, |
| | | title: "", |
| | | deptId: undefined, |
| | | payMonth: "", |
| | | salaryTitle: "", |
| | | deptIds: [], |
| | | salaryMonth: "", |
| | | remark: "", |
| | | payBank: "", |
| | | auditUserId: undefined, |
| | | }, |
| | | rules: { |
| | | title: [{ required: true, message: "请输入工资主题", trigger: "blur" }], |
| | | deptId: [{ required: true, message: "请选择部门", trigger: "change" }], |
| | | payMonth: [{ required: true, message: "请选择工资月份", trigger: "change" }], |
| | | salaryTitle: [{ required: true, message: "请输入工资主题", trigger: "blur" }], |
| | | deptIds: [{ required: true, message: "请选择部门", trigger: "change" }], |
| | | salaryMonth: [{ required: true, message: "请选择工资月份", trigger: "change" }], |
| | | auditUserId: [{ required: true, message: "请选择审核人", trigger: "change" }], |
| | | }, |
| | | }); |
| | | const { form, rules } = toRefs(data); |
| | | |
| | | // 计算工资总额(所有员工实发工资之和) |
| | | const totalSalary = computed(() => { |
| | | return employeeList.value.reduce((sum, e) => sum + parseNum(e.netSalary), 0); |
| | | }); |
| | | |
| | | // 根据审核人ID获取审核人名称 |
| | | const auditUserName = computed(() => { |
| | | if (!form.value.auditUserId) return ""; |
| | | const user = userList.value.find(u => u.userId === form.value.auditUserId); |
| | | return user ? user.nickName : ""; |
| | | }); |
| | | |
| | | const loadBankOptions = () => { |
| | | return bankList().then((res) => { |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | bankOptions.value = list |
| | | .map((b) => (b?.bankName == null ? "" : String(b.bankName).trim())) |
| | | .filter((v) => v !== ""); |
| | | }); |
| | | }; |
| | | |
| | | const loadUserList = () => { |
| | | return userListNoPageByTenantId().then((res) => { |
| | | userList.value = res.data || []; |
| | | }); |
| | | }; |
| | | |
| | | // 扁平化部门树供下拉使用 |
| | | function flattenDept(tree, list = []) { |
| | |
| | | const openDialog = (type, row) => { |
| | | nextTick(() => { |
| | | loadDeptOptions(); |
| | | loadBankOptions(); |
| | | loadUserList(); |
| | | employeeList.value = []; |
| | | Object.assign(form.value, { |
| | | id: undefined, |
| | | title: "", |
| | | deptId: undefined, |
| | | payMonth: "", |
| | | salaryTitle: "", |
| | | deptIds: [], |
| | | salaryMonth: "", |
| | | remark: "", |
| | | payBank: "", |
| | | auditUserId: undefined, |
| | | }); |
| | | // 编辑:列表页已返回主表字段;这里只做回显(明细由“生成工资表/计算工资”得到) |
| | | if (type === "edit" && row?.id) { |
| | | monthlyStatisticsGet(row.id).then((res) => { |
| | | const d = res.data || {}; |
| | | form.value.id = d.id; |
| | | form.value.title = d.title ?? d.payDateStr ?? ""; |
| | | form.value.deptId = d.deptId; |
| | | form.value.payMonth = d.payMonth ?? d.payDate ?? d.payDateStr ?? ""; |
| | | form.value.remark = d.remark ?? ""; |
| | | employeeList.value = (d.detailList || d.employeeList || []).map((e) => ({ |
| | | ...e, |
| | | form.value.id = row.id; |
| | | form.value.salaryTitle = row.salaryTitle ?? ""; |
| | | // deptIds 后端是字符串(多个用逗号分隔);当前表单仍是单选 deptId |
| | | form.value.deptIds = row.deptIds |
| | | ? String(row.deptIds).split(",").map((id) => Number(id.trim())).filter(Boolean) |
| | | : []; |
| | | form.value.salaryMonth = row.salaryMonth ?? ""; |
| | | form.value.remark = row.remark ?? ""; |
| | | form.value.payBank = row.payBank ?? ""; |
| | | form.value.auditUserId = row.auditUserId ?? undefined; |
| | | |
| | | // 如果有员工明细数据,直接反显 |
| | | if (row.staffSalaryDetailList && row.staffSalaryDetailList.length > 0) { |
| | | employeeList.value = row.staffSalaryDetailList.map((e) => ({ |
| | | staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id, |
| | | id: e.staffOnJobId ?? e.staffId ?? e.id, |
| | | staffName: e.staffName ?? "", |
| | | postName: e.postName ?? "", |
| | | deptName: e.deptName ?? "", |
| | | basicSalary: parseNum(e.basicSalary), |
| | | pieceworkSalary: parseNum(e.pieceworkSalary), |
| | | pieceSalary: parseNum(e.pieceSalary), |
| | | hourlySalary: parseNum(e.hourlySalary), |
| | | otherIncome: parseNum(e.otherIncome), |
| | | socialSecurityIndividuals: parseNum(e.socialSecurityIndividuals), |
| | | providentFundIndividuals: parseNum(e.providentFundIndividuals), |
| | | socialPersonal: parseNum(e.socialPersonal), |
| | | fundPersonal: parseNum(e.fundPersonal), |
| | | otherDeduct: parseNum(e.otherDeduct), |
| | | salaryTax: parseNum(e.salaryTax), |
| | | grossSalary: parseNum(e.grossSalary), |
| | | deductSalary: parseNum(e.deductSalary), |
| | | netSalary: parseNum(e.netSalary), |
| | | remark: e.remark ?? "", |
| | | })); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | |
| | | if (existIds.has(id)) return; |
| | | existIds.add(id); |
| | | employeeList.value.push({ |
| | | staffId: id, |
| | | id: id, |
| | | staffOnJobId: id, |
| | | id, |
| | | staffName: node.label, |
| | | roleName: node.roleName ?? node.role ?? "", |
| | | postName: node.postName ?? node.post ?? "", |
| | | deptName: node.deptName ?? "", |
| | | basicSalary: 0, |
| | | pieceworkSalary: 0, |
| | | pieceSalary: 0, |
| | | hourlySalary: 0, |
| | | otherIncome: 0, |
| | | socialSecurityIndividuals: 0, |
| | | providentFundIndividuals: 0, |
| | | socialPersonal: 0, |
| | | fundPersonal: 0, |
| | | otherDeduct: 0, |
| | | salaryTax: 0, |
| | | grossSalary: 0, |
| | | deductSalary: 0, |
| | | netSalary: 0, |
| | | remark: "", |
| | | }); |
| | | }); |
| | | addPersonVisible.value = false; |
| | |
| | | |
| | | const removeEmployee = (row) => { |
| | | employeeList.value = employeeList.value.filter( |
| | | (e) => (e.staffId || e.id) !== (row.staffId || row.id) |
| | | (e) => (e.staffOnJobId || e.id) !== (row.staffOnJobId || row.id) |
| | | ); |
| | | }; |
| | | |
| | |
| | | proxy.$modal.msgWarning("请先勾选要删除的员工"); |
| | | return; |
| | | } |
| | | const ids = new Set(selectedEmployees.value.map((e) => e.staffId || e.id)); |
| | | const ids = new Set(selectedEmployees.value.map((e) => e.staffOnJobId || e.id)); |
| | | employeeList.value = employeeList.value.filter( |
| | | (e) => !ids.has(e.staffId || e.id) |
| | | (e) => !ids.has(e.staffOnJobId || e.id) |
| | | ); |
| | | }; |
| | | |
| | | const handleGenerate = () => { |
| | | proxy.$modal.msgInfo("生成工资表功能需对接后端"); |
| | | }; |
| | | |
| | | const handleExport = () => { |
| | | proxy.$modal.msgInfo("导出功能需对接后端"); |
| | | }; |
| | | |
| | | const handleImport = () => { |
| | | proxy.$modal.msgInfo("导入功能需对接后端"); |
| | | if (!form.value.deptIds?.length) { |
| | | proxy.$modal.msgWarning("请先选择部门"); |
| | | return; |
| | | } |
| | | if (!form.value.salaryMonth) { |
| | | proxy.$modal.msgWarning("请先选择工资月份"); |
| | | return; |
| | | } |
| | | const payload = { |
| | | ids: form.value.deptIds, |
| | | date: form.value.salaryMonth, |
| | | }; |
| | | staffSalaryMainCalculateSalary(payload).then((res) => { |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | if (!list.length) { |
| | | proxy.$modal.msgWarning("未计算到工资数据"); |
| | | return; |
| | | } |
| | | employeeList.value = list.map((e) => ({ |
| | | ...e, |
| | | staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id, |
| | | staffName: e.staffName, |
| | | postName: e.postName, |
| | | deptName: e.deptName, |
| | | basicSalary: parseNum(e.basicSalary), |
| | | pieceSalary: parseNum(e.pieceSalary), |
| | | hourlySalary: parseNum(e.hourlySalary), |
| | | otherIncome: parseNum(e.otherIncome), |
| | | socialPersonal: parseNum(e.socialPersonal), |
| | | fundPersonal: parseNum(e.fundPersonal), |
| | | otherDeduct: parseNum(e.otherDeduct), |
| | | salaryTax: parseNum(e.salaryTax), |
| | | grossSalary: parseNum(e.grossSalary), |
| | | deductSalary: parseNum(e.deductSalary), |
| | | netSalary: parseNum(e.netSalary), |
| | | remark: e.remark ?? "", |
| | | })); |
| | | proxy.$modal.msgSuccess("生成成功"); |
| | | }); |
| | | }; |
| | | |
| | | const handleClear = () => { |
| | |
| | | const submitForm = () => { |
| | | formRef.value?.validate((valid) => { |
| | | if (!valid) return; |
| | | const payload = { |
| | | ...form.value, |
| | | detailList: employeeList.value.map((e) => ({ |
| | | staffId: e.staffId ?? e.id, |
| | | staffName: e.staffName, |
| | | basicSalary: parseNum(e.basicSalary), |
| | | pieceworkSalary: parseNum(e.pieceworkSalary), |
| | | hourlySalary: parseNum(e.hourlySalary), |
| | | otherIncome: parseNum(e.otherIncome), |
| | | socialSecurityIndividuals: parseNum(e.socialSecurityIndividuals), |
| | | providentFundIndividuals: parseNum(e.providentFundIndividuals), |
| | | })), |
| | | }; |
| | | if (props.operationType === "add") { |
| | | monthlyStatisticsAdd(payload).then(() => { |
| | | proxy.$modal.msgSuccess("新增成功"); |
| | | closeDia(); |
| | | }); |
| | | } else { |
| | | monthlyStatisticsUpdate(payload).then(() => { |
| | | proxy.$modal.msgSuccess("修改成功"); |
| | | closeDia(); |
| | | }); |
| | | } |
| | | saveData(3); // 确认提交,状态为3(待审核) |
| | | }); |
| | | }; |
| | | |
| | | const saveDraft = () => { |
| | | formRef.value?.validate((valid) => { |
| | | if (!valid) return; |
| | | saveData(1); // 保存草稿,状态为1(草稿) |
| | | }); |
| | | }; |
| | | |
| | | const saveData = (status) => { |
| | | const payload = { |
| | | id: form.value.id, |
| | | salaryTitle: form.value.salaryTitle, |
| | | deptIds: form.value.deptIds?.length ? form.value.deptIds.join(",") : "", |
| | | salaryMonth: form.value.salaryMonth, |
| | | remark: form.value.remark, |
| | | payBank: form.value.payBank, |
| | | auditUserId: form.value.auditUserId, |
| | | auditUserName: auditUserName.value, |
| | | totalSalary: totalSalary.value, |
| | | staffSalaryDetailList: employeeList.value.map((e) => ({ |
| | | staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id, |
| | | staffName: e.staffName, |
| | | postName: e.postName ?? "", |
| | | deptName: e.deptName ?? "", |
| | | basicSalary: parseNum(e.basicSalary), |
| | | pieceSalary: parseNum(e.pieceSalary), |
| | | hourlySalary: parseNum(e.hourlySalary), |
| | | otherIncome: parseNum(e.otherIncome), |
| | | socialPersonal: parseNum(e.socialPersonal), |
| | | fundPersonal: parseNum(e.fundPersonal), |
| | | otherDeduct: parseNum(e.otherDeduct), |
| | | salaryTax: parseNum(e.salaryTax), |
| | | grossSalary: parseNum(e.grossSalary), |
| | | deductSalary: parseNum(e.deductSalary), |
| | | netSalary: parseNum(e.netSalary), |
| | | remark: e.remark ?? "", |
| | | })), |
| | | }; |
| | | if (props.operationType === "add") { |
| | | staffSalaryMainAdd({ ...payload, status }).then(() => { |
| | | proxy.$modal.msgSuccess(status === 1 ? "草稿保存成功" : "提交成功"); |
| | | closeDia(); |
| | | }); |
| | | } else { |
| | | staffSalaryMainUpdate({ ...payload, status }).then(() => { |
| | | proxy.$modal.msgSuccess(status === 1 ? "草稿保存成功" : "提交成功"); |
| | | closeDia(); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const closeDia = () => { |
| | |
| | | .dialog-footer { |
| | | text-align: right; |
| | | } |
| | | .salary-total { |
| | | margin-top: 16px; |
| | | padding: 12px 16px; |
| | | background-color: #f5f7fa; |
| | | border-radius: 4px; |
| | | text-align: right; |
| | | font-size: 16px; |
| | | } |
| | | .salary-total .total-label { |
| | | color: #606266; |
| | | margin-right: 8px; |
| | | } |
| | | .salary-total .total-value { |
| | | color: #f56c6c; |
| | | font-weight: bold; |
| | | font-size: 18px; |
| | | } |
| | | </style> |