|
|
|
|
@ -266,7 +266,6 @@
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="form.days"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
@ -296,6 +295,141 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:is_count_days>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red; font-weight: bold; padding-right: 4px"
|
|
|
|
|
></span
|
|
|
|
|
>是否统计天数:
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="form.is_count_days"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in [{id:1,value:'是'},{id:0,value:'否'}]"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.value"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="form.type === 3" v-slot:is_count_people>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red; font-weight: bold; padding-right: 4px"
|
|
|
|
|
></span
|
|
|
|
|
>是否统计人数:
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="form.is_count_people"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in [{id:1,value:'是'},{id:0,value:'否'}]"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.value"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="form.type === 3 && form.is_count_people === 1" v-slot:history_courses>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red; font-weight: bold; padding-right: 4px"
|
|
|
|
|
></span
|
|
|
|
|
>课程人数:
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<div style="border: 1px solid #dcdfe6; border-radius: 4px; padding: 15px;">
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
|
|
|
|
|
<div style="flex: 1; min-width: 200px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">课程体系:</div>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="historyCourseForm.type"
|
|
|
|
|
placeholder="请选择课程体系"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in courseTypeOptions"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 200px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">课程名称:</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="historyCourseForm.course_name"
|
|
|
|
|
placeholder="请输入课程名称"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 150px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">培养人数(未去重):</div>
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="historyCourseForm.course_type_signs_pass"
|
|
|
|
|
:min="0"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 150px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">培养人数(去重):</div>
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="historyCourseForm.course_type_signs_pass_unique"
|
|
|
|
|
:min="0"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 150px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">课程培养人数:</div>
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="historyCourseForm.course_signs_pass"
|
|
|
|
|
:min="0"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 150px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">开始时间:</div>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="historyCourseForm.start_time"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择开始日期"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex: 1; min-width: 150px;">
|
|
|
|
|
<div style="font-weight: bold; margin-bottom: 5px;">结束时间:</div>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="historyCourseForm.end_time"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择结束日期"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
></el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:content v-if="form.type === 3">
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
@ -329,6 +463,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import { show, save,destroy } from "@/api/calendars/index.js";
|
|
|
|
|
import { index as courseIndex } from "@/api/course/index.js";
|
|
|
|
|
import { index as courseTypeIndex } from "@/api/course/courseType.js";
|
|
|
|
|
import { index as courseContentIndex } from "@/api/course/courseContent.js";
|
|
|
|
|
export default {
|
|
|
|
|
components: {},
|
|
|
|
|
@ -384,6 +519,7 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
course_content_options: [],
|
|
|
|
|
course_options: [],
|
|
|
|
|
courseTypeOptions: [],
|
|
|
|
|
canSelect: false,
|
|
|
|
|
module_options: [
|
|
|
|
|
{ id: 1, value: '第一模块' },
|
|
|
|
|
@ -411,9 +547,29 @@ export default {
|
|
|
|
|
days: 0,
|
|
|
|
|
address:'',
|
|
|
|
|
color:'',
|
|
|
|
|
|
|
|
|
|
is_count_days: 1,
|
|
|
|
|
is_count_people: 1,
|
|
|
|
|
history_courses: [],
|
|
|
|
|
content: "",
|
|
|
|
|
},
|
|
|
|
|
historyCourseForm: {
|
|
|
|
|
type: '',
|
|
|
|
|
course_name: '',
|
|
|
|
|
course_type_signs_pass: 0,
|
|
|
|
|
course_type_signs_pass_unique: 0,
|
|
|
|
|
course_signs_pass: 0,
|
|
|
|
|
start_time: '',
|
|
|
|
|
end_time: ''
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
type: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择日程类型",
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
@ -431,6 +587,57 @@ export default {
|
|
|
|
|
// message: '请选择结束时间'
|
|
|
|
|
// }],
|
|
|
|
|
},
|
|
|
|
|
historyCourseRules: {
|
|
|
|
|
type: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择课程体系",
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
course_name: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请输入课程名称",
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
course_type_signs_pass: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请输入培养人数(未去重)",
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
course_type_signs_pass_unique: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请输入培养人数(去重)",
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
course_signs_pass: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请输入课程培养人数",
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
start_time: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择开始时间",
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
end_time: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: "请选择结束时间",
|
|
|
|
|
trigger: 'change'
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
zixunList: [],
|
|
|
|
|
suppressAutoDays: false,
|
|
|
|
|
};
|
|
|
|
|
@ -438,6 +645,7 @@ export default {
|
|
|
|
|
created() {
|
|
|
|
|
this.getCourseList();
|
|
|
|
|
this.getZxList();
|
|
|
|
|
this.getCourseTypeList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
remoteMethod(query) {
|
|
|
|
|
@ -483,6 +691,24 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
this.course_options = res.data;
|
|
|
|
|
},
|
|
|
|
|
async getCourseTypeList() {
|
|
|
|
|
try {
|
|
|
|
|
const res = await courseTypeIndex({
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 999,
|
|
|
|
|
filter: [{
|
|
|
|
|
key: 'is_history',
|
|
|
|
|
op: 'eq',
|
|
|
|
|
value: 1
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
if (res && res.data) {
|
|
|
|
|
this.courseTypeOptions = res.data
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取课程体系列表失败:', error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getCourseContentList(course_id) {
|
|
|
|
|
const res = await courseContentIndex({
|
|
|
|
|
page: 1,
|
|
|
|
|
@ -590,6 +816,27 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
submit() {
|
|
|
|
|
// 手动验证主表单必填字段
|
|
|
|
|
const mainErrors = [];
|
|
|
|
|
if (!this.form.type) mainErrors.push('请选择日程类型');
|
|
|
|
|
if (!this.form.title) mainErrors.push('请输入标题');
|
|
|
|
|
if (!this.form.start_time) mainErrors.push('请选择开始时间');
|
|
|
|
|
|
|
|
|
|
// 如果日程类型是课程,验证课程字段
|
|
|
|
|
if ((this.form.type === 1 || this.form.type === 2) && !this.form.course_id) {
|
|
|
|
|
mainErrors.push('请选择课程');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果日程类型是课表,验证课表字段
|
|
|
|
|
if (this.form.type === 2 && !this.form.course_content_id) {
|
|
|
|
|
mainErrors.push('请选择课表');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (mainErrors.length > 0) {
|
|
|
|
|
this.$message.error(mainErrors[0]);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.id) {
|
|
|
|
|
this.form.id = this.id;
|
|
|
|
|
}
|
|
|
|
|
@ -599,6 +846,29 @@ export default {
|
|
|
|
|
? this.form.title + " - " + this.form.introduce
|
|
|
|
|
: this.form.title;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理历史课程数据
|
|
|
|
|
if (this.form.type === 3 && this.form.is_count_people === 1) {
|
|
|
|
|
// 验证历史课程数据
|
|
|
|
|
const errors = [];
|
|
|
|
|
if (!this.historyCourseForm.type) errors.push('请输入课程人数 - 课程体系');
|
|
|
|
|
if (!this.historyCourseForm.course_name) errors.push('请输入课程人数 - 课程名称');
|
|
|
|
|
if (this.historyCourseForm.course_type_signs_pass === null || this.historyCourseForm.course_type_signs_pass === undefined || this.historyCourseForm.course_type_signs_pass === '') errors.push('请输入课程人数 - 培养人数(未去重)');
|
|
|
|
|
if (this.historyCourseForm.course_type_signs_pass_unique === null || this.historyCourseForm.course_type_signs_pass_unique === undefined || this.historyCourseForm.course_type_signs_pass_unique === '') errors.push('请输入课程人数 - 培养人数(去重)');
|
|
|
|
|
if (this.historyCourseForm.course_signs_pass === null || this.historyCourseForm.course_signs_pass === undefined || this.historyCourseForm.course_signs_pass === '') errors.push('请输入课程人数 - 课程培养人数');
|
|
|
|
|
if (!this.historyCourseForm.start_time) errors.push('请输入课程人数 - 开始时间');
|
|
|
|
|
if (!this.historyCourseForm.end_time) errors.push('请输入课程人数 - 结束时间');
|
|
|
|
|
|
|
|
|
|
if (errors.length > 0) {
|
|
|
|
|
this.$message.error(errors[0]);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.form.history_courses = [this.historyCourseForm];
|
|
|
|
|
} else {
|
|
|
|
|
this.form.history_courses = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
save({
|
|
|
|
|
...this.form,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
@ -608,6 +878,9 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
this.$emit("refresh");
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.error('保存失败:', error);
|
|
|
|
|
this.$message.error('保存失败,请重试');
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -618,7 +891,23 @@ export default {
|
|
|
|
|
this.suppressAutoDays = true;
|
|
|
|
|
this.form = this.base.requestToForm(res, this.form);
|
|
|
|
|
this.form.is_publish = res.is_publish ? res.is_publish : 0;
|
|
|
|
|
this.form.is_count_days = res.is_count_days !== undefined ? res.is_count_days : 1;
|
|
|
|
|
this.form.is_count_people = res.is_count_people !== undefined ? res.is_count_people : 1;
|
|
|
|
|
this.form.days = this.normalizeDaysValue(res.days);
|
|
|
|
|
|
|
|
|
|
// 处理历史课程数据
|
|
|
|
|
if (res.history_courses && res.history_courses.length > 0) {
|
|
|
|
|
this.historyCourseForm = {
|
|
|
|
|
type: res.history_courses[0].type?parseInt(res.history_courses[0].type) : '',
|
|
|
|
|
course_name: res.history_courses[0].course_name || '',
|
|
|
|
|
course_type_signs_pass: res.history_courses[0].course_type_signs_pass || 0,
|
|
|
|
|
course_type_signs_pass_unique: res.history_courses[0].course_type_signs_pass_unique || 0,
|
|
|
|
|
course_signs_pass: res.history_courses[0].course_signs_pass || 0,
|
|
|
|
|
start_time: res.history_courses[0].start_time || '',
|
|
|
|
|
end_time: res.history_courses[0].end_time || ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.showTinymce = true;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.suppressAutoDays = false;
|
|
|
|
|
@ -645,6 +934,9 @@ export default {
|
|
|
|
|
return `${year}-${month}-${day} ${time}`;
|
|
|
|
|
},
|
|
|
|
|
setDefaultTimes() {
|
|
|
|
|
if (this.type === 'editor') {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!this.form.start_time) {
|
|
|
|
|
this.form.start_time = this.getDefaultDateTime("09:00:00");
|
|
|
|
|
}
|
|
|
|
|
@ -652,6 +944,7 @@ export default {
|
|
|
|
|
this.form.end_time = this.getDefaultDateTime("17:00:00");
|
|
|
|
|
}
|
|
|
|
|
this.updateDaysFromDates();
|
|
|
|
|
this.updateHistoryCourseDefaultDates();
|
|
|
|
|
},
|
|
|
|
|
updateDaysFromDates() {
|
|
|
|
|
if (!this.form.start_time || !this.form.end_time) {
|
|
|
|
|
@ -679,17 +972,45 @@ export default {
|
|
|
|
|
if (Number.isNaN(num)) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
return Math.max(0, Math.round(num));
|
|
|
|
|
// return Math.max(0, Math.round(num));
|
|
|
|
|
return value
|
|
|
|
|
},
|
|
|
|
|
updateHistoryCourseDefaultDates() {
|
|
|
|
|
if (this.form.type == 3) {
|
|
|
|
|
// 从 form.start_time 和 form.end_time 提取年月日部分,直接赋值(不检查是否为空)
|
|
|
|
|
if (this.form.start_time) {
|
|
|
|
|
this.historyCourseForm.start_time = this.form.start_time.split(' ')[0];
|
|
|
|
|
}
|
|
|
|
|
if (this.form.end_time) {
|
|
|
|
|
this.historyCourseForm.end_time = this.form.end_time.split(' ')[0];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
"form.start_time"() {
|
|
|
|
|
if (this.suppressAutoDays) return;
|
|
|
|
|
this.updateDaysFromDates();
|
|
|
|
|
this.updateHistoryCourseDefaultDates();
|
|
|
|
|
},
|
|
|
|
|
"form.end_time"() {
|
|
|
|
|
if (this.suppressAutoDays) return;
|
|
|
|
|
this.updateDaysFromDates();
|
|
|
|
|
this.updateHistoryCourseDefaultDates();
|
|
|
|
|
},
|
|
|
|
|
"form.is_count_people"(newVal) {
|
|
|
|
|
// 如果选择否,清空课程人数相关字段
|
|
|
|
|
if (newVal === 0) {
|
|
|
|
|
this.historyCourseForm = {
|
|
|
|
|
type: '',
|
|
|
|
|
course_name: '',
|
|
|
|
|
course_type_signs_pass: 0,
|
|
|
|
|
course_type_signs_pass_unique: 0,
|
|
|
|
|
course_signs_pass: 0,
|
|
|
|
|
start_time: '',
|
|
|
|
|
end_time: ''
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
isShow(newVal) {
|
|
|
|
|
if (newVal) {
|
|
|
|
|
@ -717,9 +1038,28 @@ export default {
|
|
|
|
|
days: 0,
|
|
|
|
|
address:'',
|
|
|
|
|
color:'',
|
|
|
|
|
|
|
|
|
|
is_count_days: 1,
|
|
|
|
|
is_count_people: 1,
|
|
|
|
|
history_courses: [],
|
|
|
|
|
content: "",
|
|
|
|
|
};
|
|
|
|
|
// 获取当天日期
|
|
|
|
|
const today = new Date();
|
|
|
|
|
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
|
|
|
|
|
|
|
|
|
this.historyCourseForm = {
|
|
|
|
|
type: '',
|
|
|
|
|
course_name: '',
|
|
|
|
|
course_type_signs_pass: 0,
|
|
|
|
|
course_type_signs_pass_unique: 0,
|
|
|
|
|
course_signs_pass: 0,
|
|
|
|
|
start_time: todayStr+'',
|
|
|
|
|
end_time: todayStr+''
|
|
|
|
|
};
|
|
|
|
|
this.setDefaultTimes();
|
|
|
|
|
// 确保历史课程时间也有默认值
|
|
|
|
|
this.updateHistoryCourseDefaultDates();
|
|
|
|
|
this.$refs["dialog"].reset();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -728,7 +1068,8 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
::v-deep .content {
|
|
|
|
|
::v-deep .content,
|
|
|
|
|
::v-deep .history_courses {
|
|
|
|
|
flex-basis: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|