|
|
@@ -10,42 +10,51 @@
|
|
|
<span>{{ chapter.name }}</span>
|
|
|
<!-- <a-icon type="edit" @click="editChapter(chapterIndex)" />-->
|
|
|
<div>
|
|
|
- <EditOutlined style="margin-right: 20px" @click="editChapter(chapterIndex)"/>
|
|
|
+ <EditOutlined style="margin-right: 20px" @click="editChapter(chapterIndex)" />
|
|
|
<a-popover v-model:visible="popoverVisible[chapterIndex]" title="提示" trigger="click">
|
|
|
<template #content>
|
|
|
- <a-button style="margin-right: 10px" type="primary" @click="delChapter(chapterIndex)">删除
|
|
|
- </a-button>
|
|
|
- <a-button @click="()=>{ popoverVisible[chapterIndex] = false}">取消</a-button>
|
|
|
+ <a-button style="margin-right: 10px" type="primary" @click="delChapter(chapterIndex)">删除 </a-button>
|
|
|
+ <a-button
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ popoverVisible[chapterIndex] = false
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >取消</a-button
|
|
|
+ >
|
|
|
</template>
|
|
|
- <DeleteOutlined/>
|
|
|
+ <DeleteOutlined />
|
|
|
</a-popover>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
<!-- 添加课时按钮 -->
|
|
|
<a-button class="add-chapter-btn1" type="primary" size="small" @click="showAddLessonModal(chapterIndex)">
|
|
|
- <PlusOutlined/>
|
|
|
+ <PlusOutlined />
|
|
|
添加课时
|
|
|
</a-button>
|
|
|
<!-- 课时列表 -->
|
|
|
<div v-for="(lesson, lessonIndex) in chapter.classHours" :key="lessonIndex" class="lesson">
|
|
|
<!-- 视频封面 -->
|
|
|
- <img src="@/assets/images/fileImg/gif.png" alt="Video Cover" class="video-cover" style="width: 140px; height: 90px"/>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/fileImg/gif.png"
|
|
|
+ alt="Video Cover"
|
|
|
+ class="video-cover"
|
|
|
+ style="width: 140px; height: 90px"
|
|
|
+ />
|
|
|
<!-- 课时信息 -->
|
|
|
- <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100% ">
|
|
|
+ <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
|
|
|
<div>{{ lesson.name }}</div>
|
|
|
<div>
|
|
|
-<!-- <span>视频大小:{{ lesson.size }}MB</span>-->
|
|
|
+ <!-- <span>视频大小:{{ lesson.size }}MB</span>-->
|
|
|
<span>发布时间:{{ lesson.createTime }}</span>
|
|
|
<span>发布人:{{ lesson.createUserName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="display: flex; height: 100%; position: absolute; right: 15px; top: 15px">
|
|
|
+ <div style="display: flex; height: 100%; position: absolute; right: 15px; top: 15px">
|
|
|
<div>
|
|
|
- <EditOutlined class="action-icon" @click="handleEdit(lesson)"/>
|
|
|
- <DeleteOutlined class="action-icon" @click="handleDel(lesson)"/>
|
|
|
+ <EditOutlined class="action-icon" @click="handleEdit(lesson)" />
|
|
|
+ <DeleteOutlined class="action-icon" @click="handleDel(lesson)" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -54,293 +63,287 @@
|
|
|
<a-modal v-model:visible="modalVisible" :title="dialogTitle" @ok="handleOk" @cancel="handleCancel">
|
|
|
<a-form :model="formState">
|
|
|
<a-form-item label="章节名称">
|
|
|
- <a-input v-model:value="formState.chapterName" placeholder="请输入章节名称"/>
|
|
|
+ <a-input v-model:value="formState.chapterName" placeholder="请输入章节名称" />
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
<!-- 添加课时模态框 -->
|
|
|
- <addDialog ref="addDialogRef" @ok="onAddClassHoursOk" @onAddChapter="onAddChapter"/>
|
|
|
+ <addDialog ref="addDialogRef" @ok="onAddClassHoursOk" @onAddChapter="onAddChapter" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref, reactive, onMounted} from 'vue'
|
|
|
-import addDialog from './addDialog.vue'
|
|
|
-import courseProductionApi from '@/api/courseCenter/courseProduction.js'
|
|
|
-import {useRoute, useRouter} from 'vue-router'
|
|
|
-import { del , edit as editApi } from '@/api/hour/index'
|
|
|
-
|
|
|
-
|
|
|
-const router = useRouter()
|
|
|
-const route = useRoute()
|
|
|
-const popoverVisible = ref({})
|
|
|
-const modeTag = ref('add')
|
|
|
-const dialogTitle = ref('添加章节')
|
|
|
-
|
|
|
+ import { ref, reactive, onMounted } from 'vue'
|
|
|
+ import addDialog from './addDialog.vue'
|
|
|
+ import courseProductionApi from '@/api/courseCenter/courseProduction.js'
|
|
|
+ import { useRoute, useRouter } from 'vue-router'
|
|
|
+ import { del, edit as editApi } from '@/api/hour/index'
|
|
|
+
|
|
|
+ const router = useRouter()
|
|
|
+ const route = useRoute()
|
|
|
+ const popoverVisible = ref({})
|
|
|
+ const modeTag = ref('add')
|
|
|
+ const dialogTitle = ref('添加章节')
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ //课程id
|
|
|
+ courseInfoId: {
|
|
|
+ type: Number,
|
|
|
+ required: true,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 章节数据
|
|
|
+ const chapters = ref([])
|
|
|
+ const closePopover = () => {
|
|
|
+ popoverVisible.value = false
|
|
|
+ }
|
|
|
+ const handleEdit = (item) => {
|
|
|
+ addDialogRef.value.edit(item)
|
|
|
+ }
|
|
|
+ const handleDel = (item) => {
|
|
|
+ console.log('删除', item)
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- //课程id
|
|
|
- courseInfoId: {
|
|
|
- type: Number,
|
|
|
- required: true,
|
|
|
- default: null
|
|
|
+ del([{ id: item.id }]).then(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
}
|
|
|
-})
|
|
|
-// 章节数据
|
|
|
-const chapters = ref([])
|
|
|
-const closePopover = () => {
|
|
|
- popoverVisible.value = false
|
|
|
-}
|
|
|
-const handleEdit = (item) => {
|
|
|
- addDialogRef.value.edit(item)
|
|
|
-}
|
|
|
-const handleDel = (item) => {
|
|
|
- console.log('删除',item)
|
|
|
|
|
|
- del([{id : item.id}]).then(()=>{
|
|
|
- getList()
|
|
|
+ // 模态框显示状态
|
|
|
+ const modalVisible = ref(false)
|
|
|
+ const currentChapterIndex = ref(null)
|
|
|
+ const addDialogRef = ref(null)
|
|
|
+ // 表单状态
|
|
|
+ const formState = reactive({
|
|
|
+ id: '',
|
|
|
+ chapterName: ''
|
|
|
})
|
|
|
-}
|
|
|
+ const pagination = reactive({
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 50,
|
|
|
+ showTotal: (total) => `共${total}条`
|
|
|
+ })
|
|
|
+ // 显示模态框
|
|
|
+ const showModal = () => {
|
|
|
+ dialogTitle.value = '添加章节'
|
|
|
+ modeTag.value = 'add'
|
|
|
+ modalVisible.value = true
|
|
|
+ formState.chapterName = ''
|
|
|
+ }
|
|
|
|
|
|
-// 模态框显示状态
|
|
|
-const modalVisible = ref(false)
|
|
|
-const currentChapterIndex = ref(null)
|
|
|
-const addDialogRef = ref(null)
|
|
|
-// 表单状态
|
|
|
-const formState = reactive({
|
|
|
- id: '',
|
|
|
- chapterName: ''
|
|
|
-})
|
|
|
-const pagination = reactive({
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- total: 50,
|
|
|
- showTotal: (total) => `共${total}条`
|
|
|
-})
|
|
|
-// 显示模态框
|
|
|
-const showModal = () => {
|
|
|
- dialogTitle.value = '添加章节'
|
|
|
- modeTag.value = 'add'
|
|
|
- modalVisible.value = true
|
|
|
- formState.chapterName = ''
|
|
|
-}
|
|
|
+ // 确认按钮点击事件
|
|
|
+ const handleOk = () => {
|
|
|
+ let courseInfoId = props.courseInfoId
|
|
|
+ if (formState.chapterName && modeTag.value == 'add') {
|
|
|
+ courseProductionApi
|
|
|
+ .add({
|
|
|
+ courseId: courseInfoId,
|
|
|
+ name: formState.chapterName
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, '章节添加')
|
|
|
+ getList()
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ formState.chapterName = '' // 清空表单
|
|
|
+ modalVisible.value = false // 关闭模态框
|
|
|
+ }
|
|
|
+ if (formState.chapterName && modeTag.value == 'edit') {
|
|
|
+ courseProductionApi
|
|
|
+ .edit({
|
|
|
+ id: formState.id,
|
|
|
+ courseId: courseInfoId,
|
|
|
+ name: formState.chapterName
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, '章节添加')
|
|
|
+ getList()
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ formState.chapterName = '' // 清空表单
|
|
|
+ modalVisible.value = false // 关闭模态框
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 取消按钮点击事件
|
|
|
+ const handleCancel = () => {
|
|
|
+ formState.chapterName = '' // 清空表单
|
|
|
+ modalVisible.value = false // 关闭模态框
|
|
|
+ }
|
|
|
+ // 编辑章节
|
|
|
+ const editChapter = (chapterIndex) => {
|
|
|
+ // 实现编辑逻辑
|
|
|
+ let item = chapters.value[chapterIndex]
|
|
|
+ modalVisible.value = true
|
|
|
+ dialogTitle.value = '修改章节'
|
|
|
+ modeTag.value = 'edit'
|
|
|
+ formState.id = item.id
|
|
|
+ formState.chapterName = item.name
|
|
|
+ }
|
|
|
|
|
|
-// 确认按钮点击事件
|
|
|
-const handleOk = () => {
|
|
|
- let courseInfoId = props.courseInfoId
|
|
|
- if (formState.chapterName && modeTag.value == 'add') {
|
|
|
+ // 编辑课时
|
|
|
+ const editLesson = (chapterIndex, lessonIndex) => {
|
|
|
+ // 实现编辑逻辑
|
|
|
+ }
|
|
|
+ const delChapter = (chapterIndex) => {
|
|
|
+ console.log('删除', chapterIndex)
|
|
|
+ // 实现编辑逻辑
|
|
|
+ let item = chapters.value[chapterIndex]
|
|
|
+ popoverVisible.value[chapterIndex] = false
|
|
|
|
|
|
courseProductionApi
|
|
|
- .add({
|
|
|
- courseId: courseInfoId,
|
|
|
- name: formState.chapterName
|
|
|
- })
|
|
|
+ .delete([{ id: item.id }])
|
|
|
.then((res) => {
|
|
|
- console.log(res, '章节添加')
|
|
|
+ console.log('章节列表', res)
|
|
|
getList()
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err)
|
|
|
})
|
|
|
- formState.chapterName = '' // 清空表单
|
|
|
- modalVisible.value = false // 关闭模态框
|
|
|
}
|
|
|
- if (formState.chapterName && modeTag.value == 'edit') {
|
|
|
-
|
|
|
+ // 获取章节列表
|
|
|
+ const getList = () => {
|
|
|
courseProductionApi
|
|
|
- .edit({
|
|
|
- id: formState.id,
|
|
|
- courseId: courseInfoId,
|
|
|
- name: formState.chapterName
|
|
|
- })
|
|
|
+ .allList({ courseId: props.courseInfoId })
|
|
|
.then((res) => {
|
|
|
- console.log(res, '章节添加')
|
|
|
- getList()
|
|
|
+ console.log('章节列表', res)
|
|
|
+ chapters.value = res.data
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err)
|
|
|
})
|
|
|
- formState.chapterName = '' // 清空表单
|
|
|
- modalVisible.value = false // 关闭模态框
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-// 取消按钮点击事件
|
|
|
-const handleCancel = () => {
|
|
|
- formState.chapterName = '' // 清空表单
|
|
|
- modalVisible.value = false // 关闭模态框
|
|
|
-}
|
|
|
-// 编辑章节
|
|
|
-const editChapter = (chapterIndex) => {
|
|
|
- // 实现编辑逻辑
|
|
|
- let item = chapters.value[chapterIndex]
|
|
|
- modalVisible.value = true
|
|
|
- dialogTitle.value = '修改章节'
|
|
|
- modeTag.value = 'edit'
|
|
|
- formState.id = item.id
|
|
|
- formState.chapterName = item.name
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// 编辑课时
|
|
|
-const editLesson = (chapterIndex, lessonIndex) => {
|
|
|
- // 实现编辑逻辑
|
|
|
-}
|
|
|
-const delChapter = (chapterIndex) => {
|
|
|
- console.log('删除', chapterIndex)
|
|
|
- // 实现编辑逻辑
|
|
|
- let item = chapters.value[chapterIndex]
|
|
|
- popoverVisible.value[chapterIndex] = false
|
|
|
|
|
|
- courseProductionApi.delete([{id: item.id}]).then((res) => {
|
|
|
- console.log('章节列表', res)
|
|
|
+ // 删除课时
|
|
|
+ const deleteLesson = (chapterIndex, lessonIndex) => {
|
|
|
+ chapters.value[chapterIndex].lessons.splice(lessonIndex, 1)
|
|
|
+ }
|
|
|
+ // 显示课时模态框
|
|
|
+ const showAddLessonModal = (chapterIndex) => {
|
|
|
+ currentChapterIndex.value = chapterIndex
|
|
|
+ addDialogRef.value.open()
|
|
|
+ addDialogRef.value.setData(chapters.value[chapterIndex])
|
|
|
+ modeTag.value = 'add'
|
|
|
+ }
|
|
|
+ // 显示课时模态框
|
|
|
+ const onAddClassHoursOk = (data) => {
|
|
|
+ console.log(data, 'onAddClassHoursOk')
|
|
|
+ // addLessonModalVisible.value = true
|
|
|
+ }
|
|
|
+ const onAddChapter = () => {
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ console.log('有没有id呢', props.courseInfoId)
|
|
|
getList()
|
|
|
})
|
|
|
- .catch((err) => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
-
|
|
|
-}
|
|
|
-// 获取章节列表
|
|
|
-const getList = () => {
|
|
|
- courseProductionApi
|
|
|
- .allList({courseId: props.courseInfoId})
|
|
|
- .then((res) => {
|
|
|
- console.log('章节列表', res)
|
|
|
- chapters.value = res.data
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 删除课时
|
|
|
-const deleteLesson = (chapterIndex, lessonIndex) => {
|
|
|
- chapters.value[chapterIndex].lessons.splice(lessonIndex, 1)
|
|
|
-}
|
|
|
-// 显示课时模态框
|
|
|
-const showAddLessonModal = (chapterIndex) => {
|
|
|
- currentChapterIndex.value = chapterIndex
|
|
|
- addDialogRef.value.open()
|
|
|
- addDialogRef.value.setData(chapters.value[chapterIndex])
|
|
|
- modeTag.value = 'add'
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-// 显示课时模态框
|
|
|
-const onAddClassHoursOk = (data) => {
|
|
|
- console.log(data, 'onAddClassHoursOk')
|
|
|
- // addLessonModalVisible.value = true
|
|
|
-}
|
|
|
-const onAddChapter = () => {
|
|
|
- getList()
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- console.log('有没有id呢', props.courseInfoId)
|
|
|
- getList()
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.chapter {
|
|
|
- width: 80%;
|
|
|
-}
|
|
|
+ .chapter {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
|
|
|
-.course-chapter {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
+ .course-chapter {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.chapter-title {
|
|
|
- background: #f0f0f0;
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+ .chapter-title {
|
|
|
+ background: #f0f0f0;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
-.lesson {
|
|
|
- width: 100%;
|
|
|
- height: 120px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #f7f8fa;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 16px;
|
|
|
- padding: 16px 4px;
|
|
|
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
|
|
|
- transition: box-shadow 0.2s;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
+ .lesson {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 16px 4px;
|
|
|
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
|
|
|
+ transition: box-shadow 0.2s;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
-.video-cover {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
+ .video-cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
|
|
|
-.lesson-info {
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
+ .lesson-info {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
|
|
|
-.lesson-title {
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
+ .lesson-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
|
|
|
-.lesson-details {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
+ .lesson-details {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
|
|
|
-.lesson-details span {
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
+ .lesson-details span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
|
|
|
-/* 模态框内样式 */
|
|
|
-.ant-modal-content {
|
|
|
- width: 400px;
|
|
|
-}
|
|
|
+ /* 模态框内样式 */
|
|
|
+ .ant-modal-content {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
|
|
|
-.ant-modal-body {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
+ .ant-modal-body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.ant-form-item-label > label {
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
+ .ant-form-item-label > label {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
|
|
|
-.lesson-actions {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+ .lesson-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
-.action-icon {
|
|
|
- font-size: 18px;
|
|
|
- color: #347aff;
|
|
|
- margin-left: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: color 0.2s;
|
|
|
-}
|
|
|
+ .action-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #347aff;
|
|
|
+ margin-left: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color 0.2s;
|
|
|
+ }
|
|
|
|
|
|
-.action-icon:hover {
|
|
|
- color: #1d5fd6;
|
|
|
-}
|
|
|
+ .action-icon:hover {
|
|
|
+ color: #1d5fd6;
|
|
|
+ }
|
|
|
|
|
|
-.add-chapter-btn {
|
|
|
- background: #ffff;
|
|
|
- border: 1px solid #347aff;
|
|
|
- color: #347aff;
|
|
|
- border-radius: 3px;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
+ .add-chapter-btn {
|
|
|
+ background: #ffff;
|
|
|
+ border: 1px solid #347aff;
|
|
|
+ color: #347aff;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
|
|
|
-.add-chapter-btn1 {
|
|
|
- color: #ffff;
|
|
|
- border: 1px solid #347aff;
|
|
|
- background: #347aff;
|
|
|
- border-radius: 3px;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
+ .add-chapter-btn1 {
|
|
|
+ color: #ffff;
|
|
|
+ border: 1px solid #347aff;
|
|
|
+ background: #347aff;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
</style>
|