|
@@ -2,20 +2,22 @@
|
|
|
<div>
|
|
<div>
|
|
|
<a-modal
|
|
<a-modal
|
|
|
v-model:visible="modalVisible"
|
|
v-model:visible="modalVisible"
|
|
|
- :title="modeTag.value == 'add'?'添加课时':'修改课时'"
|
|
|
|
|
|
|
+ :title="modeTag == 'add'?'添加课时':'修改课时'"
|
|
|
:footer="null"
|
|
:footer="null"
|
|
|
- width="700px"
|
|
|
|
|
|
|
+ width="900px"
|
|
|
class="add-class-hours-modal"
|
|
class="add-class-hours-modal"
|
|
|
>
|
|
>
|
|
|
<a-tabs v-model:activeKey="activeKey" type="card" @change="handleChange">
|
|
<a-tabs v-model:activeKey="activeKey" type="card" @change="handleChange">
|
|
|
<a-tab-pane key="1" tab="课时">
|
|
<a-tab-pane key="1" tab="课时">
|
|
|
- <addClassHours ref="addClassHoursRef" @handlerSelect="handlerSelect" @handlerUpSelect="handlerUpSelect"></addClassHours>
|
|
|
|
|
|
|
+ <addClassHours ref="addClassHoursRef" @handlerSelect="handlerSelect"
|
|
|
|
|
+ @handlerUpSelect="handlerUpSelect" @handlerEx="handlerEx"
|
|
|
|
|
+ @handlerExs="handlerExs"></addClassHours>
|
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="作业" >
|
|
|
|
|
- <div>这里是作业的内容</div>
|
|
|
|
|
|
|
+ <a-tab-pane key="2" tab="作业">
|
|
|
|
|
+ <exList v-if="activeKey == '2'" ref="exListRef" @handlerEx="handlerEx"></exList>
|
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="3" tab="考试" >
|
|
|
|
|
- <div>这里是考试的内容</div>
|
|
|
|
|
|
|
+ <a-tab-pane key="3" tab="考试">
|
|
|
|
|
+ <exLists v-if="activeKey == '3'" ref="exListsRef" @handlerExs="handlerExs"></exLists>
|
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
</a-tabs>
|
|
|
<div class="footer-btns">
|
|
<div class="footer-btns">
|
|
@@ -25,177 +27,299 @@
|
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
|
|
|
|
<resListDialog ref="resListDialogRef" @handleSelectFile="handleSelectFile"></resListDialog>
|
|
<resListDialog ref="resListDialogRef" @handleSelectFile="handleSelectFile"></resListDialog>
|
|
|
- <resourceUpload ref="resourceUploadRef"></resourceUpload>
|
|
|
|
|
|
|
+ <resourceUpload ref="resourceUploadRef" @onSub="onSub"></resourceUpload>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
- import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
|
|
|
|
|
- import { message } from 'ant-design-vue'
|
|
|
|
|
- import addClassHours from './addClassHours.vue'
|
|
|
|
|
- import resListDialog from './resListDialog.vue'
|
|
|
|
|
- import resourceUpload from './resourceUpload.vue'
|
|
|
|
|
- import { add } from '@/api/hour/index'
|
|
|
|
|
-
|
|
|
|
|
- const addClassHoursRef = ref(null)
|
|
|
|
|
- const resListDialogRef = ref(null)
|
|
|
|
|
- const resourceUploadRef = ref(null)
|
|
|
|
|
- const activeKey = ref('1')
|
|
|
|
|
- const modeTag = ref('add')
|
|
|
|
|
-
|
|
|
|
|
- const emit = defineEmits(['update:visible', 'ok','onAddChapter'])
|
|
|
|
|
-
|
|
|
|
|
- const props = defineProps({
|
|
|
|
|
- //课程id
|
|
|
|
|
- courseInfoId: {
|
|
|
|
|
- type: Number,
|
|
|
|
|
- required: true,
|
|
|
|
|
- default: null
|
|
|
|
|
- },
|
|
|
|
|
- // visible: Boolean
|
|
|
|
|
|
|
+import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
|
|
|
|
|
+import {message} from 'ant-design-vue'
|
|
|
|
|
+import addClassHours from './addClassHours.vue'
|
|
|
|
|
+import resListDialog from './resListDialog.vue'
|
|
|
|
|
+import resourceUpload from './resourceUpload.vue'
|
|
|
|
|
+import exList from './exList.vue'
|
|
|
|
|
+import exLists from './exLists.vue'
|
|
|
|
|
+import {add, edit as editApi} from '@/api/hour/index'
|
|
|
|
|
+
|
|
|
|
|
+const addClassHoursRef = ref(null)
|
|
|
|
|
+const resListDialogRef = ref(null)
|
|
|
|
|
+const resourceUploadRef = ref(null)
|
|
|
|
|
+const exListRef = ref(null)
|
|
|
|
|
+const exListsRef = ref(null)
|
|
|
|
|
+const exListRefData = ref(null)
|
|
|
|
|
+const exListsRefData = ref(null)
|
|
|
|
|
+const exListRefCount = ref(0)
|
|
|
|
|
+const exListsRefCount = ref(0)
|
|
|
|
|
+const activeKey = ref('1')
|
|
|
|
|
+const modeTag = ref('add')
|
|
|
|
|
+
|
|
|
|
|
+const emit = defineEmits(['update:visible', 'ok', 'onAddChapter'])
|
|
|
|
|
+
|
|
|
|
|
+const props = defineProps({
|
|
|
|
|
+ //课程id
|
|
|
|
|
+ courseInfoId: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ default: null
|
|
|
|
|
+ },
|
|
|
|
|
+ // visible: Boolean
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const form = ref({
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ courseId: ''
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+const modalVisible = ref(false)
|
|
|
|
|
+// watch(
|
|
|
|
|
+// () => props.visible,
|
|
|
|
|
+// (v) => {
|
|
|
|
|
+// modalVisible.value = v
|
|
|
|
|
+// }
|
|
|
|
|
+// )
|
|
|
|
|
+// watch(modalVisible, (v) => {
|
|
|
|
|
+// emit('update:visible', v)
|
|
|
|
|
+// })
|
|
|
|
|
+
|
|
|
|
|
+const open = () => {
|
|
|
|
|
+ exListRefCount.value = 0
|
|
|
|
|
+ exListsRefCount.value = 0
|
|
|
|
|
+ modalVisible.value = true
|
|
|
|
|
+ activeKey.value = '1'
|
|
|
|
|
+ modeTag.value = 'add'
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ addClassHoursRef.value.reset()
|
|
|
|
|
+ addClassHoursRef.value.open()
|
|
|
})
|
|
})
|
|
|
|
|
+}
|
|
|
|
|
+const handleChange = (activeKey) => {
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ if (activeKey == '1' && addClassHoursRef.value) {
|
|
|
|
|
+ if (modeTag.value == 'add') {
|
|
|
|
|
+ addClassHoursRef.value.reset()
|
|
|
|
|
+ addClassHoursRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ if (modeTag.value == 'edit') {
|
|
|
|
|
+ addClassHoursRef.value.edit()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if (activeKey == '2' && exListRef.value) {
|
|
|
|
|
+ if (modeTag.value == 'add') {
|
|
|
|
|
+ exListRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ if (modeTag.value == 'edit') {
|
|
|
|
|
+ console.log('走没走1', exListRefData.value)
|
|
|
|
|
+ if(exListRefData.value && exListRefData.value[0]&& exListRefData.value[0].relateId){
|
|
|
|
|
+ exListRef.value.edit(exListRefData.value[0].relateId)
|
|
|
|
|
+ }else if(exListRefData.value && exListRefData.value[0]&& exListRefData.value[0].id){
|
|
|
|
|
+ exListRef.value.edit(exListRefData.value[0].id)
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('走没走2', exListRefData.value)
|
|
|
|
|
+ if(exListRefData.value == null){
|
|
|
|
|
+ exListRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- const form = ref({
|
|
|
|
|
- id : ''
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ if (activeKey == '3' && exListsRef.value) {
|
|
|
|
|
+ if (modeTag.value == 'add') {
|
|
|
|
|
+ exListsRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ if (modeTag.value == 'edit') {
|
|
|
|
|
+ console.log('走没走3', exListsRefData.value)
|
|
|
|
|
+ if(exListsRefData.value && exListsRefData.value[0]&& exListsRefData.value[0].relateId){
|
|
|
|
|
+ exListsRef.value.edit(exListsRefData.value[0].relateId)
|
|
|
|
|
+ }else if(exListRefData.value && exListRefData.value[0]&& exListRefData.value[0].id){
|
|
|
|
|
+ exListRef.value.edit(exListRefData.value[0].id)
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('走没走4', exListsRefData.value)
|
|
|
|
|
+ if(exListsRefData.value == null){
|
|
|
|
|
+ exListsRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+}
|
|
|
|
|
+const setData = (data) => {
|
|
|
|
|
+ console.log('进来的章节信息添加的时候', data)
|
|
|
|
|
+ form.value.id = data.id
|
|
|
|
|
+}
|
|
|
|
|
+const edit = (item) => {
|
|
|
|
|
+ exListRefCount.value = 0
|
|
|
|
|
+ exListsRefCount.value = 0
|
|
|
|
|
+ activeKey.value = '1'
|
|
|
|
|
+ modalVisible.value = true
|
|
|
|
|
+ console.log('修改进来的', item)
|
|
|
|
|
+ form.value.id = item.id
|
|
|
|
|
+ form.value.chapterId = item.courseId
|
|
|
|
|
|
|
|
- const modalVisible = ref(false)
|
|
|
|
|
- // watch(
|
|
|
|
|
- // () => props.visible,
|
|
|
|
|
- // (v) => {
|
|
|
|
|
- // modalVisible.value = v
|
|
|
|
|
- // }
|
|
|
|
|
- // )
|
|
|
|
|
- // watch(modalVisible, (v) => {
|
|
|
|
|
- // emit('update:visible', v)
|
|
|
|
|
- // })
|
|
|
|
|
|
|
+ modeTag.value = 'edit'
|
|
|
|
|
+ console.log('有没有', addClassHoursRef.value)
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ addClassHoursRef.value.edit(item)
|
|
|
|
|
+ })
|
|
|
|
|
|
|
|
- const open = () =>{
|
|
|
|
|
- activeKey.value = '1'
|
|
|
|
|
- modalVisible.value = true
|
|
|
|
|
- modeTag.value = 'add'
|
|
|
|
|
- }
|
|
|
|
|
- const handleChange = (activeKey) =>{
|
|
|
|
|
|
|
+}
|
|
|
|
|
+const handlerEx = (item) => {
|
|
|
|
|
+ console.log('有没有1 ', item)
|
|
|
|
|
+ exListRefData.value = item
|
|
|
|
|
+ // exListRef.value.setData(item)
|
|
|
|
|
+}
|
|
|
|
|
+const handlerExs = (item) => {
|
|
|
|
|
+ exListsRefData.value = item
|
|
|
|
|
+ // exListsRef.value.setData(item)
|
|
|
|
|
+}
|
|
|
|
|
+const handlerSelect = () => {
|
|
|
|
|
+ resListDialogRef.value.open()
|
|
|
|
|
+}
|
|
|
|
|
+const handlerUpSelect = () => {
|
|
|
|
|
+ resourceUploadRef.value.open()
|
|
|
|
|
+}
|
|
|
|
|
+const handleSelectFile = (item) => {
|
|
|
|
|
+ resListDialogRef.value.close()
|
|
|
|
|
+ addClassHoursRef.value.setFile(item)
|
|
|
|
|
+}
|
|
|
|
|
+const onSub = (list) => {
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
- const setData = (data) => {
|
|
|
|
|
- console.log('进来的章节信息',data)
|
|
|
|
|
- form.value.id = data.id
|
|
|
|
|
- }
|
|
|
|
|
- const edit = (item) => {
|
|
|
|
|
- activeKey.value = '1'
|
|
|
|
|
- console.log('进来的章节信息',item)
|
|
|
|
|
- // form.value.id = data.id
|
|
|
|
|
- modalVisible.value = true
|
|
|
|
|
- modeTag.value = 'edit'
|
|
|
|
|
- console.log('有没有',addClassHoursRef.value)
|
|
|
|
|
- nextTick(()=>{
|
|
|
|
|
- addClassHoursRef.value.edit(item)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ console.log('上传的id', list)
|
|
|
|
|
+ // resListDialogRef.value.close()
|
|
|
|
|
+ addClassHoursRef.value.setFile(list)
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // addClassHoursRef.value.close()
|
|
|
|
|
+}
|
|
|
|
|
+const handleOk = () => {
|
|
|
|
|
|
|
|
- const handlerSelect = () =>{
|
|
|
|
|
- resListDialogRef.value.open()
|
|
|
|
|
- }
|
|
|
|
|
- const handlerUpSelect = () =>{
|
|
|
|
|
- resourceUploadRef.value.open()
|
|
|
|
|
- }
|
|
|
|
|
- const handleSelectFile = (item) =>{
|
|
|
|
|
- resListDialogRef.value.close()
|
|
|
|
|
- addClassHoursRef.value.setFile(item)
|
|
|
|
|
- }
|
|
|
|
|
- const handleOk = () =>{
|
|
|
|
|
|
|
|
|
|
- console.log('有没有',addClassHoursRef)
|
|
|
|
|
- addClassHoursRef.value.getData((data)=>{
|
|
|
|
|
- //设置章节id
|
|
|
|
|
- data.chapterId = form.value.id
|
|
|
|
|
- // props.courseInfoId
|
|
|
|
|
- console.log('提交的参数',data)
|
|
|
|
|
|
|
+ addClassHoursRef.value.getData((data) => {
|
|
|
|
|
|
|
|
- add(data).then((res)=>{
|
|
|
|
|
|
|
+ let exlist = exListRefData.value
|
|
|
|
|
+ if (exlist && exlist.length == 1) {
|
|
|
|
|
+ if(exlist[0].id){
|
|
|
|
|
+ data.courseRelates.push({funcType: 4, relateId: exlist[0].id})
|
|
|
|
|
+ }else if(exlist[0].relateId){
|
|
|
|
|
+ data.courseRelates.push({funcType: 4, relateId: exlist[0].relateId})
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ let exlists = exListsRefData.value
|
|
|
|
|
+ if (exlists &&exlists.length == 1) {
|
|
|
|
|
+ if(exlists[0].id){
|
|
|
|
|
+ data.courseRelates.push({funcType: 5, relateId: exlists[0].id})
|
|
|
|
|
+ }else if(exlist[0].relateId){
|
|
|
|
|
+ data.courseRelates.push({funcType: 5, relateId: exlists[0].relateId})
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //设置章节id
|
|
|
|
|
+ data.chapterId = form.value.id
|
|
|
|
|
+ // props.courseInfoId
|
|
|
|
|
+ console.log('提交的参数', data)
|
|
|
|
|
+ if (modeTag.value == 'add') {
|
|
|
|
|
+ add(data).then((res) => {
|
|
|
modalVisible.value = false
|
|
modalVisible.value = false
|
|
|
emit('onAddChapter')
|
|
emit('onAddChapter')
|
|
|
|
|
+ resourceUploadRef.value.close()
|
|
|
}).catch((err) => {
|
|
}).catch((err) => {
|
|
|
|
|
|
|
|
})
|
|
})
|
|
|
|
|
+ }
|
|
|
|
|
+ if (modeTag.value == 'edit') {
|
|
|
|
|
+ data.id = form.value.id
|
|
|
|
|
+ data.chapterId = form.value.chapterId
|
|
|
|
|
+ editApi(data).then((res) => {
|
|
|
|
|
+ modalVisible.value = false
|
|
|
|
|
+ emit('onAddChapter')
|
|
|
|
|
+ }).catch((err) => {
|
|
|
|
|
|
|
|
- })
|
|
|
|
|
- // formRef.value.validate().then(() => {
|
|
|
|
|
- // emit('ok', { ...form })
|
|
|
|
|
- // modalVisible.value = false
|
|
|
|
|
- // })
|
|
|
|
|
- }
|
|
|
|
|
- function handleCancel() {
|
|
|
|
|
- modalVisible.value = false
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- defineExpose({ open ,setData,edit})
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+ // formRef.value.validate().then(() => {
|
|
|
|
|
+ // emit('ok', { ...form })
|
|
|
|
|
+ // modalVisible.value = false
|
|
|
|
|
+ // })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleCancel() {
|
|
|
|
|
+ modalVisible.value = false
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+defineExpose({open, setData, edit})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
- .add-class-hours-modal {
|
|
|
|
|
- .ant-modal-content {
|
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-modal-header {
|
|
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-form-item {
|
|
|
|
|
- margin-bottom: 24px;
|
|
|
|
|
- }
|
|
|
|
|
- .video-select-row {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
- .cover-upload-row {
|
|
|
|
|
|
|
+.add-class-hours-modal {
|
|
|
|
|
+ .ant-modal-content {
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-modal-header {
|
|
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-form-item {
|
|
|
|
|
+ margin-bottom: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .video-select-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cover-upload-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .cover-upload-box {
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ height: 120px;
|
|
|
|
|
+ background: #f7f8fa;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- .cover-upload-box {
|
|
|
|
|
- width: 120px;
|
|
|
|
|
- height: 120px;
|
|
|
|
|
- background: #f7f8fa;
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin-right: 24px;
|
|
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+
|
|
|
|
|
+ .cover-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ object-fit: cover;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cover-placeholder {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- margin-right: 24px;
|
|
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- .cover-img {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- object-fit: cover;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- }
|
|
|
|
|
- .cover-placeholder {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- color: #bbb;
|
|
|
|
|
- font-size: 32px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .cover-tip {
|
|
|
|
|
- color: #888;
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ color: #bbb;
|
|
|
|
|
+ font-size: 32px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .upload-tip {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .cover-tip {
|
|
|
color: #888;
|
|
color: #888;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
- margin-left: 12px;
|
|
|
|
|
- }
|
|
|
|
|
- .footer-btns {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: flex-end;
|
|
|
|
|
- gap: 16px;
|
|
|
|
|
- margin-top: 24px;
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .upload-tip {
|
|
|
|
|
+ color: #888;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ margin-left: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .footer-btns {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ gap: 16px;
|
|
|
|
|
+ margin-top: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|