2020-12-31 09:32:25 +08:00
|
|
|
|
<template>
|
2021-03-11 18:09:26 +08:00
|
|
|
|
<div style="position: relative;">
|
2021-01-05 13:56:51 +08:00
|
|
|
|
<div class="back_box">
|
|
|
|
|
<el-button type="text" @click="goBack">返回</el-button>
|
|
|
|
|
</div>
|
2021-03-11 18:09:26 +08:00
|
|
|
|
<div style="width: 100%;margin: 20px 0 50px;text-align: center;font-size: 28px;font-weight: bold;">{{ $store.state.user.companyName + '教学管理' }}</div>
|
|
|
|
|
<div style="width: 80%;margin: 0 auto;overflow: hidden;">
|
|
|
|
|
<el-menu
|
|
|
|
|
default-active="1"
|
|
|
|
|
style="width: 200px;float: left;"
|
|
|
|
|
active-text-color="#00BFFF"
|
|
|
|
|
@open="handleOpen"
|
|
|
|
|
@close="handleClose"
|
|
|
|
|
>
|
|
|
|
|
<el-menu-item index="1" @click="clickMenu">
|
|
|
|
|
<img :src="classIcon" style="width: 20px;height: 20px;margin-right: 10px;">
|
|
|
|
|
<span style="font-size: 20px;">班级管理</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-submenu index="2">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<img :src="lessonIcon" style="width: 20px;height: 20px;margin-right: 10px;">
|
|
|
|
|
<span style="font-size: 20px;">课程管理</span>
|
|
|
|
|
</template>
|
|
|
|
|
<el-menu-item-group>
|
|
|
|
|
<el-menu-item index="2-1" style="font-size: 18px;" @click="clickMenu">发布课程管理</el-menu-item>
|
|
|
|
|
<el-menu-item index="2-2" style="font-size: 18px;" @click="clickMenu">草稿课程管理</el-menu-item>
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
<el-menu-item index="3" @click="clickMenu">
|
|
|
|
|
<img :src="examIcon" style="width: 20px;height: 20px;margin-right: 10px;">
|
|
|
|
|
<span slot="title" style="font-size: 20px;">考试管理</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="4" @click="clickMenu">
|
|
|
|
|
<img :src="ruleIcon" style="width: 20px;height: 20px;margin-right: 10px;">
|
|
|
|
|
<span slot="title" style="font-size: 20px;">评价管理</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
<div style="width: calc(100% - 200px);margin-left: 200px;">
|
|
|
|
|
<div v-if="defaultActive === '1'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-form :inline="true" :model="classFormModel" size="small">
|
|
|
|
|
<el-form-item label="班级名称:">
|
|
|
|
|
<el-input v-model="classFormModel.className" placeholder="班级名称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="classQuery">班级查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="classCreate">新建班级</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="classData" border style="width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-table-column prop="name" label="班级" />
|
|
|
|
|
<el-table-column prop="num" label="人数" />
|
|
|
|
|
<el-table-column prop="createDate" label="创建日期" />
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="small">导入学生</el-button>
|
|
|
|
|
<el-button type="text" size="small">查看名册</el-button>
|
|
|
|
|
<el-button type="text" size="small">删除</el-button>
|
|
|
|
|
<el-button type="text" size="small"> 评价查询</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
2021-01-07 15:14:58 +08:00
|
|
|
|
</div>
|
2021-03-11 18:09:26 +08:00
|
|
|
|
<div v-if="defaultActive === '2-1'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-form :inline="true" :model="lessonFormModel" size="small">
|
|
|
|
|
<el-form-item label="学年:">
|
|
|
|
|
<el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in academicYearList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="学期:">
|
|
|
|
|
<el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in semesterList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="lessonQuery">课程查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="lessonData" border style="width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-table-column prop="name" label="课程名称" />
|
|
|
|
|
<el-table-column prop="className" label="授课班级" />
|
|
|
|
|
<el-table-column prop="createDate" label="创建日期" />
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="small">删除</el-button>
|
|
|
|
|
<el-button type="text" size="small">修改课程</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="defaultActive === '2-2'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-form :inline="true" :model="lessonFormModel" size="small">
|
|
|
|
|
<el-form-item label="学年:">
|
|
|
|
|
<el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in academicYearList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="学期:">
|
|
|
|
|
<el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in semesterList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="lessonQuery">课程查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<QueryListPage
|
|
|
|
|
ref="queryListPage"
|
|
|
|
|
:query-form="draftLessonQueryForm"
|
|
|
|
|
:pager-config="pagerConfig"
|
|
|
|
|
:query-list="draftLessonQueryList"
|
|
|
|
|
style="width:80%;margin: 0 auto;"
|
2021-01-06 13:23:16 +08:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2021-03-11 18:09:26 +08:00
|
|
|
|
<div v-if="defaultActive === '3'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-form :inline="true" :model="examFormModel" size="small">
|
|
|
|
|
<el-form-item label="学年:">
|
|
|
|
|
<el-select v-model="examFormModel.academicYear" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in academicYearList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="学期:">
|
|
|
|
|
<el-select v-model="examFormModel.semester" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in semesterList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="examQuery">考试查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="examCreate">新建考试</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="examData" border style="width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-table-column prop="name" label="试卷名称" />
|
|
|
|
|
<el-table-column prop="className" label="考试班级" />
|
|
|
|
|
<el-table-column prop="createDate" label="创建日期" />
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="small">成绩查询</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="defaultActive === '4'">
|
|
|
|
|
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-form :inline="true" :model="ruleFormModel" size="small">
|
|
|
|
|
<el-form-item label="学年:">
|
|
|
|
|
<el-select v-model="ruleFormModel.academicYear" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in academicYearList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="学期:">
|
|
|
|
|
<el-select v-model="ruleFormModel.semester" placeholder="请选择" :clearable="true">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in semesterList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="ruleQuery">规则查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-button type="primary" size="small" style="width: 100px;height: 32px;" @click="ruleCreate">新建评价规则</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="ruleData" border style="width: 80%;margin: 0 auto;">
|
|
|
|
|
<el-table-column type="index" width="50" />
|
|
|
|
|
<el-table-column prop="content" label="规则内容" />
|
|
|
|
|
<el-table-column prop="createDate" label="创建日期" />
|
|
|
|
|
<el-table-column prop="className" label="适用班级" />
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="small">删除</el-button>
|
|
|
|
|
<el-button type="text" size="small">修改</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-12-31 16:40:13 +08:00
|
|
|
|
</div>
|
2020-12-31 09:32:25 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2021-03-11 18:09:26 +08:00
|
|
|
|
import ClassIcon from '@/assets/teachManage/class.png';
|
|
|
|
|
import LessonIcon from '@/assets/teachManage/lesson.png';
|
|
|
|
|
import ExamIcon from '@/assets/teachManage/exam.png';
|
|
|
|
|
import RuleIcon from '@/assets/teachManage/rule.png';
|
|
|
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
|
|
|
|
import { getLessonDrftList } from '@/api/jmap/lessondraft';
|
2020-12-31 09:32:25 +08:00
|
|
|
|
export default {
|
|
|
|
|
name: 'Organization',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2021-03-11 18:09:26 +08:00
|
|
|
|
classIcon: ClassIcon,
|
|
|
|
|
lessonIcon: LessonIcon,
|
|
|
|
|
examIcon: ExamIcon,
|
|
|
|
|
ruleIcon: RuleIcon,
|
|
|
|
|
defaultActive: '1',
|
|
|
|
|
classData: [{ name: '测试班级', num: 30, createDate: '2021.03.11' }],
|
|
|
|
|
lessonData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
|
|
|
|
|
examData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
|
|
|
|
|
ruleData: [{ content: '平时考勤30%,考试成绩70%', createDate: '2021.03.11', className: '测试班级' }],
|
|
|
|
|
academicYearList: [],
|
|
|
|
|
semesterList: [{ label: '上学期', value: 'top' }, { label: '下学期', value: 'down' }],
|
|
|
|
|
classFormModel: {
|
|
|
|
|
className: ''
|
|
|
|
|
},
|
|
|
|
|
lessonFormModel: {
|
|
|
|
|
academicYear: '',
|
|
|
|
|
semester: ''
|
2021-01-07 15:14:58 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
examFormModel: {
|
|
|
|
|
academicYear: '',
|
|
|
|
|
semester: ''
|
|
|
|
|
},
|
|
|
|
|
ruleFormModel: {
|
|
|
|
|
academicYear: '',
|
|
|
|
|
semester: ''
|
|
|
|
|
},
|
|
|
|
|
pagerConfig: {
|
|
|
|
|
pageSize: 'pageSize',
|
|
|
|
|
pageIndex: 'pageNum'
|
|
|
|
|
},
|
|
|
|
|
draftLessonQueryForm: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
draftLessonQueryList: {
|
|
|
|
|
query: getLessonDrftList,
|
|
|
|
|
selectCheckShow: false,
|
|
|
|
|
indexShow: true,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
title: this.$t('lesson.courseName'),
|
|
|
|
|
prop: 'name'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: this.$t('lesson.courseDescription'),
|
|
|
|
|
prop: 'remarks'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: this.$t('global.status'),
|
|
|
|
|
prop: 'status',
|
|
|
|
|
type: 'tag',
|
|
|
|
|
columnValue: (row) => {
|
|
|
|
|
return this.$convertField(row.status, ConstConfig.ConstSelect.releaseReview, ['value', 'label']);
|
|
|
|
|
},
|
|
|
|
|
tagType: (row) => { return 'success'; }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'button',
|
|
|
|
|
title: this.$t('global.operate'),
|
|
|
|
|
width: '400',
|
|
|
|
|
buttons: [
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('lesson.courseDetails'),
|
|
|
|
|
handleClick: this.goDetail,
|
|
|
|
|
type: 'primary',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status !== '1';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('lesson.contentSorting'),
|
|
|
|
|
handleClick: this.treeSort,
|
|
|
|
|
type: 'primary',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status !== '1';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('global.release'),
|
|
|
|
|
handleClick: this.publish,
|
|
|
|
|
type: 'primary',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status === '0' && this.hasRelease;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('lesson.applicationForRelease'),
|
|
|
|
|
handleClick: this.publish,
|
|
|
|
|
type: 'primary',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status === '0' && !this.hasRelease;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('lesson.review'),
|
|
|
|
|
handleClick: this.review,
|
|
|
|
|
type: 'primary',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status === '1';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('global.delete'),
|
|
|
|
|
handleClick: this.deleteLesson,
|
|
|
|
|
type: 'danger',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status !== '1';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: this.$t('lesson.withdraw'),
|
|
|
|
|
handleClick: this.revertLesson,
|
|
|
|
|
type: 'danger',
|
|
|
|
|
showControl: (row) => {
|
|
|
|
|
return row.status === '1';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2020-12-31 09:32:25 +08:00
|
|
|
|
};
|
|
|
|
|
},
|
2021-01-06 13:23:16 +08:00
|
|
|
|
computed: {
|
2021-03-11 18:09:26 +08:00
|
|
|
|
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
|
|
|
|
mounted() {
|
2021-03-11 18:09:26 +08:00
|
|
|
|
this.academicYearList = [];
|
|
|
|
|
const nowYear = new Date().getFullYear();
|
|
|
|
|
for (let i = 2020; i < nowYear + 1; i++) {
|
|
|
|
|
this.academicYearList.push({ label: `${i}-${i + 1}学年`, value: i });
|
|
|
|
|
}
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
methods:{
|
|
|
|
|
handleOpen(val) {
|
|
|
|
|
console.log(val, '1111');
|
2021-01-07 15:14:58 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
handleClose(val) {
|
|
|
|
|
console.log(val, '2222');
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
clickMenu(val) {
|
|
|
|
|
this.defaultActive = val.index;
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
goBack() {
|
|
|
|
|
this.$router.go(-1);
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
classQuery() {
|
|
|
|
|
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
classCreate() {
|
|
|
|
|
|
2021-01-07 15:14:58 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
lessonQuery() {
|
|
|
|
|
|
2021-01-07 15:14:58 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
lessonCreate() {
|
|
|
|
|
|
2021-01-07 15:14:58 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
examQuery() {
|
|
|
|
|
|
2021-01-06 13:23:16 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
examCreate() {
|
|
|
|
|
|
2021-01-05 13:56:51 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
ruleQuery() {
|
|
|
|
|
|
2021-01-05 13:56:51 +08:00
|
|
|
|
},
|
2021-03-11 18:09:26 +08:00
|
|
|
|
ruleCreate() {
|
|
|
|
|
|
2020-12-31 09:32:25 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
2021-01-05 13:56:51 +08:00
|
|
|
|
.back_box {
|
2021-03-11 18:09:26 +08:00
|
|
|
|
height: 20px;
|
2021-01-05 13:56:51 +08:00
|
|
|
|
z-index: 36;
|
2021-01-12 10:19:43 +08:00
|
|
|
|
width: 40px;
|
2021-01-05 13:56:51 +08:00
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
2021-03-11 18:09:26 +08:00
|
|
|
|
right: 20px;
|
|
|
|
|
top: -20px;
|
2021-01-06 13:23:16 +08:00
|
|
|
|
}
|
2020-12-31 09:32:25 +08:00
|
|
|
|
</style>
|