995 lines
19 KiB
CSS
995 lines
19 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.justify-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 原生上传组件样式 */
|
|
.native-upload {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 120px;
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: border-color 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.native-upload:hover {
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
.upload-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.upload-plus-icon {
|
|
font-size: 32px;
|
|
color: #999;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upload-text {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.image-delete-icon:hover {
|
|
background-color: rgba(0,0,0,0.7);
|
|
}
|
|
|
|
/* 主容器 */
|
|
.course-create-page {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
position: relative;
|
|
min-height: 1712px;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.course-form-container {
|
|
min-height: 1211px;
|
|
height: auto;
|
|
background-size: 100% 100%;
|
|
/* width: 1565px; */
|
|
position: relative;
|
|
}
|
|
|
|
/* 第一行：课程名称和分类 */
|
|
.course-basic-info-row {
|
|
width: 1307px;
|
|
height: 43px;
|
|
margin: 30px 0 0 102px;
|
|
}
|
|
|
|
.course-name-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.required-asterisk {
|
|
color: rgba(255, 77, 79, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.label-text {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.course-name-input-wrapper {
|
|
height: 42px;
|
|
background-size: 562px 44px;
|
|
margin-left: 2px;
|
|
width: 560px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.course-input::placeholder {
|
|
color: rgba(153, 153, 153, 1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.course-category-section {
|
|
height: 42px;
|
|
width: 522px;
|
|
position: relative;
|
|
margin: 1px 0 0 134px;
|
|
}
|
|
|
|
.course-category-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.course-category-select-wrapper {
|
|
height: 42px;
|
|
background-size: 562px 44px;
|
|
width: 560px;
|
|
position: absolute;
|
|
left: 87px;
|
|
top: 0;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-select {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 第二行：主讲老师 */
|
|
.instructor-sort-row {
|
|
width: 1340px;
|
|
height: 42px;
|
|
margin: 29px 0 0 102px;
|
|
}
|
|
|
|
.instructor-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.instructor-select-wrapper {
|
|
width: 560px;
|
|
height: 42px;
|
|
background-size: 562px 44px;
|
|
margin-left: 2px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.instructor-select {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 主讲老师选择区域样式已整合到 .instructor-select 中 */
|
|
|
|
.course-sort-section {
|
|
height: 42px;
|
|
margin-left: 159px;
|
|
width: 630px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.course-sort-label {
|
|
width: 57px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 排序输入框 */
|
|
.course-sort-input-wrapper {
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 560px;
|
|
height: 42px;
|
|
background-size: 562px 44px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sort-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.sort-input::placeholder {
|
|
color: rgba(153, 153, 153, 1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 第三行：时间选择 */
|
|
.course-time-row {
|
|
width: 1463px;
|
|
height: 49px;
|
|
margin: 30px 0 0 71px;
|
|
}
|
|
|
|
.start-time-label {
|
|
width: 121px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.start-time-picker-wrapper, .end-time-picker-wrapper {
|
|
width: 560px;
|
|
height: 42px;
|
|
background-size: 562px 44px;
|
|
margin-left: 1px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.group_12 {
|
|
margin: 7px 0 0 6px;
|
|
}
|
|
|
|
.form-datepicker {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.end-time-label {
|
|
width: 121px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin: 16px 0 0 94px;
|
|
}
|
|
|
|
/* 参与学员 */
|
|
.student-selection-row {
|
|
width: 312px;
|
|
height: 18px;
|
|
margin: 23px 0 0 103px;
|
|
}
|
|
|
|
.student-selection-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.student-type-radio-group {
|
|
margin-left: 3px;
|
|
align-items: center;
|
|
}
|
|
|
|
.radio-option {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-right: 38px;
|
|
}
|
|
|
|
.radio-circle {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid #d9d9d9;
|
|
border-radius: 50%;
|
|
background: white;
|
|
margin-right: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.radio-circle.active {
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
.radio-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #1890ff;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.radio-text {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-left: 7px;
|
|
}
|
|
|
|
/* 班级选择 */
|
|
.class-selection-row {
|
|
width: 560px;
|
|
height: 44px;
|
|
margin: 16px 0 0 192px;
|
|
}
|
|
|
|
.class-select-wrapper {
|
|
width: 560px;
|
|
height: 44px;
|
|
background-size: 100% 100%;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 0 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.class-select {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 课程封面 */
|
|
.course-cover-row {
|
|
width: 312px;
|
|
height: 128px;
|
|
margin: 30px 0 0 41px;
|
|
}
|
|
|
|
.course-cover-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.cover-upload-area {
|
|
width: 160px;
|
|
height: 128px;
|
|
border: 2px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.cover-upload-area:hover {
|
|
border-color: #1890ff;
|
|
background-color: #f0f8ff;
|
|
}
|
|
|
|
.upload-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cover-upload {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.upload-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.upload-plus-icon {
|
|
font-size: 28px;
|
|
color: #999;
|
|
margin-bottom: 8px;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
display: block;
|
|
}
|
|
|
|
.upload-text {
|
|
color: rgba(102, 102, 102, 1);
|
|
display: block;
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.upload-text-label {
|
|
width: 32px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
color: rgba(102, 102, 102, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
/* 课程简介整体区域 */
|
|
.course-description-section {
|
|
width: 1452px;
|
|
margin: 42px 0 0 41px;
|
|
}
|
|
|
|
/* 课程简介标题 */
|
|
.course-description-header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 20px;
|
|
margin-bottom: -30px;
|
|
}
|
|
|
|
.course-description-label {
|
|
width: 89px;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
}
|
|
|
|
|
|
|
|
.toolbar-icon-btn {
|
|
background: #f5f5f5;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.toolbar-icon-btn:hover {
|
|
background: #e6f7ff;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
/* 富文本编辑器区域 */
|
|
.description-editor-container {
|
|
height: 336px;
|
|
background-size: 100% 100%;
|
|
width: 1340px;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
margin-left: 129px;
|
|
border-radius: 8px;
|
|
padding: 13px 19px;
|
|
background: white;
|
|
}
|
|
|
|
|
|
|
|
.toolbar-btn {
|
|
background: #f5f5f5;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.toolbar-btn:hover {
|
|
background: #e6f7ff;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
|
|
.rich-text-editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
background: white;
|
|
}
|
|
|
|
/* 确保 QuillEditor 内部的边框正常显示 */
|
|
.rich-text-editor :deep(.ql-container) {
|
|
border-bottom: 1px solid #e0e0e0;
|
|
border-left: 1px solid #e0e0e0;
|
|
border-right: 1px solid #e0e0e0;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.rich-text-editor :deep(.ql-toolbar) {
|
|
border-top: 1px solid #e0e0e0;
|
|
border-left: 1px solid #e0e0e0;
|
|
border-right: 1px solid #e0e0e0;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
/* 设置选项区域 */
|
|
.course-settings-section {
|
|
margin: 30px 0 0 41px;
|
|
width: 1400px;
|
|
}
|
|
|
|
.stop-on-leave-setting {
|
|
width: 350px;
|
|
height: 24px;
|
|
margin: 20px 0 0 31px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.setting-control {
|
|
width: 100%;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.setting-label {
|
|
width: auto;
|
|
height: 18px;
|
|
overflow-wrap: break-word;
|
|
font-size: 0;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin-top: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.video-speed-setting {
|
|
width: 350px;
|
|
height: 24px;
|
|
margin: 20px 0 0 63px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.video-text-setting {
|
|
width: 350px;
|
|
height: 24px;
|
|
margin: 20px 0 0 63px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* 积分设置 */
|
|
.points-setting-row {
|
|
width: 800px;
|
|
height: 40px;
|
|
margin: 21px 0 40px 95px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.points-setting-control {
|
|
width: auto;
|
|
height: 24px;
|
|
margin-top: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.points-setting-control .setting-label {
|
|
width: 89px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.points-description-text {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 18px;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.earn-points-input-container, .required-points-input-container {
|
|
width: 80px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
background: white;
|
|
}
|
|
|
|
/* 蓝色开关样式 */
|
|
.toggle-switch {
|
|
--n-rail-color: #e0e0e0 !important;
|
|
--n-rail-color-active: #1890ff !important;
|
|
--n-button-color: #ffffff !important;
|
|
--n-button-color-active: #ffffff !important;
|
|
--n-button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.blue-switch .n-switch__rail {
|
|
background-color: #e0e0e0 !important;
|
|
}
|
|
|
|
.blue-switch .n-switch__rail--active {
|
|
background-color: #1890ff !important;
|
|
}
|
|
|
|
/* 原生开关按钮样式 */
|
|
.toggle-button {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 22px;
|
|
border-radius: 11px;
|
|
background-color: #e0e0e0;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
outline: none;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: 0; /* 隐藏文字 */
|
|
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
margin-left: 0;
|
|
}
|
|
|
|
.toggle-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
transition: all 0.3s;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.toggle-button-active {
|
|
background-color: #1890ff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.toggle-button-active::after {
|
|
left: calc(100% - 20px);
|
|
}
|
|
|
|
/* 积分输入框样式 */
|
|
.points-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
color: #333;
|
|
text-align: center;
|
|
outline: none;
|
|
}
|
|
|
|
.points-input:focus {
|
|
background: rgba(240, 248, 255, 0.3);
|
|
}
|
|
|
|
|
|
|
|
/* 底部按钮区域 */
|
|
.form-action-buttons {
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 91px;
|
|
background-size: 1920px 139px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 100px;
|
|
gap: 15px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.button-spacer {
|
|
width: 66px;
|
|
height: 32px;
|
|
}
|
|
|
|
.cancel-button {
|
|
height: 32px;
|
|
width: 80px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
background-color: white;
|
|
}
|
|
|
|
.cancel-button:hover {
|
|
border-color: #40a9ff;
|
|
color: #40a9ff;
|
|
}
|
|
|
|
.submit-button {
|
|
height: 32px;
|
|
width: 80px;
|
|
background-color: #1890ff;
|
|
border: 1px solid #1890ff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.submit-button:hover {
|
|
background-color: #40a9ff;
|
|
border-color: #40a9ff;
|
|
}
|
|
|
|
.button-text {
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 16px;
|
|
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.cancel-button .button-text {
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 响应式设计 - 保持原有布局不变，只在特定屏幕尺寸下优化 */
|
|
|
|
/* 大屏幕优化 (≥1920px) - 让表单居中显示 */
|
|
@media (min-width: 1920px) {
|
|
.course-create-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.course-form-container {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
padding: 40px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕 (1400px-1919px) - 保持原有布局 */
|
|
@media (max-width: 1919px) and (min-width: 1400px) {
|
|
.course-create-page {
|
|
width: 100%;
|
|
min-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕适配 (1200px-1399px) */
|
|
@media (max-width: 1399px) and (min-width: 1200px) {
|
|
.course-create-page {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.course-form-container {
|
|
min-width: 1200px;
|
|
}
|
|
|
|
/* 稍微缩小一些元素的宽度 */
|
|
.course-basic-info-row {
|
|
width: 1100px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.instructor-sort-row {
|
|
width: 1150px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.course-time-row {
|
|
width: 1250px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.course-description-section {
|
|
width: 1250px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.description-editor-container {
|
|
width: 1150px;
|
|
margin-left: 80px;
|
|
}
|
|
}
|
|
|
|
/* 平板适配 (768px-1199px) */
|
|
@media (max-width: 1199px) and (min-width: 768px) {
|
|
.course-create-page {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.course-form-container {
|
|
min-width: 800px;
|
|
position: relative;
|
|
transform: scale(0.8);
|
|
transform-origin: top left;
|
|
}
|
|
}
|
|
|
|
/* 移动端适配 (≤767px) */
|
|
@media (max-width: 767px) {
|
|
.course-create-page {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.course-form-container {
|
|
min-width: 600px;
|
|
position: relative;
|
|
transform: scale(0.6);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
/* 调整一些关键元素以适应移动端 */
|
|
.form-action-buttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border-top: 1px solid #e0e0e0;
|
|
z-index: 1000;
|
|
transform: none;
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 15px;
|
|
}
|
|
|
|
.cancel-button,
|
|
.submit-button {
|
|
transform: scale(1.2);
|
|
}
|
|
} |