Files
coursehomework-front/src/assets/styles/layout.css
T
lijing d075c4da5d
build / build (push) Successful in 6m16s
fix: 作业模块契约缺陷修复(B-01~B-09)+ 列表页状态/操作列图标化统一
契约与健壮性(明细见 bug检测与修复.md):
- B-01 学生端补 allowLate,恢复「截止后补交」能力
- B-02 ReviewWorkbench 附件 URL 补 serviceHost,修线上图片/下载 404
- B-03/B-04 统计页、全部作业页幻影字段:前端降级 + 后端补字段
- B-05 详情页「接收班级」兜底;B-08 NewHomework 编辑回显与班级树加载竞态
- B-09 移除 api/index.ts 未定义的 GlobalFetch 与硬编码 baseURL

列表页界面统一(我布置的 / 全部作业):
- 状态列统一走 Utils.HW_STATUS_META + hwStatusPill(图标 + 文字 + 同色浅底胶囊)
- 操作列改图标按钮:提交情况 icon-chakan、批阅 icon-shenpi,低频操作收进「更多」下拉(功能全保留)
- 两页操作列同宽,切页不跳列;草稿箱状态列加宽以容纳「定时 …」胶囊
- Submissions 批阅图标与列表行操作对齐

构建:npm run build 通过(exit 0)
2026-09-22 12:30:00 +08:00

36 lines
15 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
.fl{float:left}.fr{float:right}.fix{*zoom:1}.fix:after{display:table;content:"";clear:both}.pr{position:relative}.pa{position:absolute}.pf{position:fixed}.align-middle{position:relative;top:50%;transform:translateY(-50%)}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-btn-wrap{position:fixed;top:67px;right:15px;max-width:200px;z-index:100}*{font-family:"微软雅黑","Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif}.header-container{background:transparent;transition:all 300ms;box-shadow:0 10px 20px 0 rgba(203,203,203,0.09);height:56px;position:fixed;top:0;left:0;width:100%;z-index:5}.header-container .icon-box{margin:0 24px 0 24px;cursor:pointer;background-repeat:no-repeat;background-position:30px center;background-size:14px}.header-container .icon-btn{background:transparent;height:24px;width:24px;line-height:24px;box-sizing:border-box;border-radius:2px;transition:all 500ms}.header-container .icon-btn i{color:#fff;font-size:22px;font-weight:100}.header-container .icon-btn.active{transform:rotate(90deg)}.header-container .delimiter{width:2px;border-left:1px solid rgba(255,255,255,0.5);height:20px}.header-container h4{font-size:19px;color:#fff;margin-left:12px;font-weight:bold;font-family:SimSun}.header-container .school-bg{position:absolute;top:0;height:100%;width:100%;left:0;right:0;z-index:-1}.header-container .header-aside{max-width:260px;height:56px}.header-container .header-aside img{float:left;width:28px;height:28px;border-radius:50%;cursor:pointer}.header-container .header-aside .name{max-width:90px;color:#fff;margin:0 32px 0 14px}.header-container .header-aside a{outline:none}.header-container .header-aside a:hover{opacity:.8}.header-container .header-aside .logout{padding:5px;margin:0 25px 0}.header-container .header-aside .logout i{color:#fff;font-size:18px}.left-menu{position:fixed;background:#fff;color:#272829;width:200px;left:0;top:56px;bottom:0px;display:flex;flex-direction:column;z-index:9;overflow:auto}.left-menu .menu-top-box{height:10px;border-right:1px solid #EBEEF4}.left-menu li{height:50px;transition:border 200ms;border-left:0px solid transparent;position:relative}.left-menu li a{color:#272829;width:100%;display:block;padding-left:35px;line-height:50px;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right:1px solid #EBEEF4;transition:none}.left-menu li.active{background:#f8f8f8;border-left:4px solid transparent;border-right:none}.left-menu li.active a{border-right:1px none;border-right:none}.left-menu li:hover{background:#f8f8f8}.left-menu li:hover a{border-right:none}.left-menu li .icon-box{line-height:1;height:20px;position:relative;top:25px;margin-top:-6px;padding-right:10px;font-size:14px;color:#656667}.left-menu .clear-box{flex:1;border-right:1px solid #EBEEF4}.path-nav{height:56px;width:calc(100% - 200px);position:relative;top:56px;left:200px;line-height:20px;font-size:12px;background:#fff;color:#969799;z-index:4;padding:16px 0 20px 24px}.path-nav .ivu-breadcrumb a{color:#848C98}.path-nav .ivu-breadcrumb a:hover{color:#6a727f}.path-nav .ivu-breadcrumb-item-link{font-size:14px}.path-nav .icon-category{color:#848C98;position:relative;top:1px}.app-panel{position:fixed;top:56px;margin-top:-6px;left:14px;background:#fff;z-index:10;transition:all 200ms;border-radius:8px;box-shadow:0 10px 20px 0 rgba(0,0,0,0.06);padding:20px 20px 0}.app-panel .tips-box{position:absolute;top:-5px;left:13px;width:0;height:0;border-right:5px solid transparent;border-bottom:7px solid #fff;border-left:5px solid transparent;z-index:1}.app-panel ul{padding-bottom:20px;border-bottom:1px solid #EBEEF4}.app-panel li{width:100px;margin-left:15px;text-align:center}.app-panel li a{display:block;color:#656667;padding:15px 0;border-radius:5px;transition:all 500ms;outline:none}.app-panel li a:hover{background:#eee}.app-panel li .icon-box{width:46px;height:46px;margin:0 auto 15px}.app-panel li .icon-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.app-panel li:first-child{margin-left:0}.app-panel .link-panel{height:60px;line-height:60px}.app-panel .link-panel i{margin-left:8px;position:relative;top:-1px}.app-panel .no-used-box{min-width:300px;text-align:center;height:110px;border-bottom:1px dashed #EBEEF4;line-height:30px;padding:40px 0}.no-authority-wrap{width:600px;height:320px;background:#fff;border-radius:15px;text-align:center;left:50%;position:relative;top:50%;transform:translateX(-50%) translateY(-50%);color:#272829;background-image:url(../image/no-authority.png);background-repeat:no-repeat;background-size:280px 152px;background-position:center 50px;overflow:hidden}.no-authority-wrap h3{font-size:18px;font-weight:500;margin-top:220px}.no-authority-wrap h6{font-size:12px;font-weight:500;margin-top:10px}.arrow-down{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAjUlEQVQYV2MsKSnh/vj1q+Xs6dP3MGAB2dnZ8v/+/RNhrK+vZ3r24tUsBsb/22fPmLEWWW16errWfwaGXob/nEmMIAlsitPSss0ZGP9UMzMxxU+fPv09WCG6Yqb//z/9Y2BMY/wvET9rVsM3kDxcIbJixv//WRgYDFNnzUr/DTMIRSFMMYhubGz8h+xeANRcRMpSDyHXAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:10px 6px;background-position:90% center;transition:all 400ms;width:10px;height:6px;position:absolute;right:8%;top:22px}.arrow-up{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAjUlEQVQYV2MsKSnh/vj1q+Xs6dP3MGAB2dnZ8v/+/RNhrK+vZ3r24tUsBsb/22fPmLEWWW16errWfwaGXob/nEmMIAlsitPSss0ZGP9UMzMxxU+fPv09WCG6Yqb//z/9Y2BMY/wvET9rVsM3kDxcIbJixv//WRgYDFNnzUr/DTMIRSFMMYhubGz8h+xeANRcRMpSDyHXAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:10px 6px;background-position:90% center;transition:all 400ms;width:10px;height:6px;position:absolute;right:8%;top:22px;transform:rotate(180deg)}.child-item-wrap{transition:all 500ms linear;overflow:hidden}.child-item-wrap li.child-item{border-left:transparent}.child-item-wrap li.child-item a{margin-left:24px;padding-left:35px}.fade_apps-enter-active,.fade_apps-leave-active{transition:all 1ms;transform:translateY(5px)}.fade_apps-leave-to{opacity:0}.fade_child_ul-enter-active{transition:all .5s ease-in-out}.fade_child_ul-leave-active{transition:all .5s ease-out}.fade_child_ul-enter{max-height:0}.fade_child_ul-enter-to{max-height:100%}.fade_child_ul-leave{max-height:100%}.fade_child_ul-leave-to{max-height:0}.base-wrap-main{padding:56px 0 0 200px;height:calc(100% - 56px);position:relative;background:#fff}.base-wrap-main .main-wrapper{min-width:760px;min-height:100%;position:relative;width:100%;box-sizing:border-box}.base-wrap-main .main-container{background:#ffffff;box-sizing:border-box;padding:0 24px;padding-bottom:24px;overflow:hidden}.base-wrap-main .default-wrapper{min-width:760px;min-height:100%;position:relative;width:100%;box-sizing:border-box}.base-wrap-main .page-wrapper{min-width:760px;min-height:100%;position:relative;width:100%;box-sizing:border-box}.base-wrap-main .tree-wrapper{height:100%}.base-wrap-main .tree-wrapper .tree-container{width:240px;float:left;border:1px solid #eeeeee;background:#ffffff;padding:10px;overflow:auto;margin-left:24px;height:calc(100% - 20px);border-radius:3px}.base-wrap-main .tree-wrapper .main-container{height:100%;margin-left:264px;overflow:auto}.base-wrap-main .tree-wrapper .page-panel{left:288px}.base-wrap-main .page-panel{height:72px;position:absolute;margin:0 auto;left:24px;right:24px;bottom:0;padding:20px 0;background:#fff}.base-wrap-main .page-panel .ivu-page li:hover{border-color:#5979ea}.base-wrap-main .page-panel .ivu-page li:hover a,.base-wrap-main .page-panel .ivu-page li:hover i{color:#5979ea}.base-wrap-main .page-panel .ivu-page-item-active{background:#5979ea;border-color:#5979ea}.base-wrap-main .page-panel .ivu-page-item-active a,.base-wrap-main .page-panel .ivu-page-item-active a:hover{color:#fff !important}.base-wrap-main .page-panel .ivu-page-disabled{border-color:#dcdee2}.base-wrap-main .page-panel .ivu-page-options-sizer{margin-right:0}.base-wrap-main .page-panel::after{display:block;position:relative;content:'';background:#eee;height:1px;width:100%;position:absolute;top:0}.base-wrap-main .tabs-panel{margin:0 24px 12px}.base-wrap-main .tabs-panel.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab{border-radius:0;background:#fff;margin-right:-1px;border-color:#EBEEF5 !important;height:39px;line-height:28px}.base-wrap-main .tabs-panel.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab.ivu-tabs-tab-active{color:#5979EA !important;height:40px}.base-wrap-main .tabs-panel.ivu-tabs.ivu-tabs-card .ivu-tabs-bar{border-color:#EBEEF5 !important;margin-bottom:0}.base-wrap-main .tabs-panel.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar.ivu-tabs-tab-active{border-top:1px solid #EBEEF5}.base-wrap-main .tabs-panel.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-nav-container{height:40px}.base-wrap-main .btn-panel{margin-left:28px}.base-wrap-main.alone-page{padding-left:0}.search-wrap{background:#f7f7f7;padding:10px 16px;height:52px}.search-wrap_date .ivu-date-picker{width:150px}.search-wrap_sel{width:150px;float:left}.search-wrap_input{width:200px;float:left}.public-custom-switch .ivu-radio-wrapper-checked{background:#6b8cf4 !important;border-color:#6b8cf4 !important}.public-custom-switch .ivu-radio-group-item{width:90px;text-align:center}.public-upload-img li{width:100px;height:100px;border:1px solid #eee;border-radius:2px;padding:4px;position:relative;float:left;margin:0 10px 10px 0}.public-upload-img li img{width:100%;height:100%;object-fit:contain}.public-upload-img li:hover .upload-list-cover{display:block}.public-upload-img li .upload-list-cover{position:absolute;top:4px;bottom:4px;left:4px;right:4px;background:rgba(0,0,0,0.6);text-align:center;display:none;transition:all .3s}.public-upload-img li .upload-list-cover i{color:#fff;position:relative;top:50%;cursor:pointer;transform:translateY(-50%)}.public-upload-img li.add-li{border:none;padding:0;width:100px;height:100px}.public-upload-img li .add-box i{line-height:100px}.ivu-btn{font-size:14px;line-height:20px}.ivu-btn span{margin:0 3px}.ivu-btn-large{height:36px}a.ivu-btn-large{line-height:36px}.ivu-btn-primary{border-color:#5979EA;background:#5979EA}.ivu-btn-primary:hover{background:#708bed;border-color:#708bed}.ivu-btn-primary:active{background:#2c54e4;border-color:#2c54e4}.ivu-btn-primary.ivu-btn-ghost{background-color:#fff;color:#5979EA;border-color:#5979EA}.ivu-btn-success{border-color:#45B972;background:#45B972}.ivu-btn-success:hover{background:#57c080;border-color:#57c080}.ivu-btn-success:active{background:#37945b;border-color:#37945b}.ivu-btn-success.ivu-btn-ghost{background-color:#fff;color:#45B972;border-color:#45B972}.ivu-btn-error{border-color:#ed4d4d;background:#ed4d4d}.ivu-btn-error:hover{background:#ef6464;border-color:#ef6464}.ivu-btn-error:active{background:#e81f1f;border-color:#e81f1f}.ivu-btn-error.ivu-btn-ghost{background-color:#fff;color:#ed4d4d;border-color:#ed4d4d}.ivu-input-search{border-color:#5979EA !important;background:#5979EA !important}.ivu-input-search:hover{background:#708bed !important;border-color:#708bed !important}.ivu-input-search:active{background:#2c54e4 !important;border-color:#2c54e4 !important}.ivu-input-search.ivu-btn-ghost{background-color:#fff !important;color:#5979EA !important;border-color:#5979EA !important}.ivu-table-wrapper{border:none}.ivu-table::after{background:none}.ivu-table::before{background:none}.ivu-table-header th,.ivu-table-fixed-header th{height:48px !important;color:#595959;font-size:14px;background:#fff;border:none}.ivu-table td{height:48px;border:none;border-top:1px solid #ecedf3}.ivu-table td span{font-size:14px;font-family:"Microsoft YaHei","微软雅黑" !important}.ivu-table td .ivu-icon{font-family:'Ionicons' !important}.ivu-tabs-bar{margin-bottom:10px;border-bottom:1px solid #EBEEF5}.ivu-tabs-bar .ivu-tabs-ink-bar{background:#5979EA}.ivu-tabs-bar .ivu-tabs-tab-active,.ivu-tabs-bar .ivu-tabs-tab:hover,.ivu-tabs-bar .ivu-tabs-tab:active,.ivu-tabs-bar .ivu-tabs-tab-focused{color:#5979EA}.ivu-form-item{margin-bottom:20px}.ivu-form-item-error-tip{font-size:13px;padding-top:4px}.ivu-alert{margin-bottom:12px !important}.ivu-modal-wrap{display:flex;align-items:center;transform:translateY(0%)}.ivu-modal-wrap .ivu-form-item:last-child{margin-bottom:0px}.ivu-modal{top:0 !important}.ivu-modal-body{max-height:550px;overflow:auto}.ivu-table-cell .operating-btn{width:32px;height:32px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;color:gray;font-size:18px;line-height:1;cursor:pointer;transition:background-color .2s,color .2s}.ivu-table-cell .operating-btn:before{flex:none}.ivu-table-cell .operating-btn:hover{background:#9e89cf;color:#fff}.ivu-table-cell .operating-btn.disabled{color:#c5c8ce;opacity:.3;cursor:not-allowed}.ivu-table-cell .operating-btn.disabled:hover{background:#fff}.ivu-table-cell .operating-link{display:inline-block;color:#2d8cf0;cursor:pointer;padding-right:10px}.ivu-table-cell .operating-link.disabled{color:#aaa;cursor:default}.status-shenhe span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin:auto 10px auto 0px;background-color:#e8a54c}.status-tongguo span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin:auto 10px auto 0px;background-color:#45B972}.status-chexiao span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin:auto 10px auto 0px;background-color:#bfbfbf}.status-jujue span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin:auto 10px auto 0px;background-color:#ed4d4d}.header-container{background:#577afb}.header-container .school-bg{display:none}.left-menu{background:#F6F8F9}.left-menu li:hover{background:#EFF4FF}.left-menu li.active{background:#EFF4FF;border-left:none ;border-right:4px solid #577afb}
/* ============================================================
菜单高亮闪烁修复(本地化后追加,优先级最高)
问题:原 .left-menu li 设了 transition:border 200ms,
切换 A→B 时 active 的 border-left(border-right) 在
transparent/none 与 4px #577afb 之间做 200ms 动画,
导致离开的项左侧出现一闪而逝的淡蓝边框。
修复:仅过渡 background-color,边框变化即时生效;
明确 active 仅保留右侧 4px 蓝边、无左侧边框。
============================================================ */
.left-menu li {
border-left: 0 solid transparent;
border-right: 0 solid transparent;
transition: background-color 200ms;
}
.left-menu li a {
border-right: 1px solid #EBEEF4;
transition: none;
}
.left-menu li.active {
background: #EFF4FF;
border-left: 0;
border-right: 4px solid #577afb;
}
.left-menu li.active a {
border-right: none;
}
.left-menu li:hover {
background: #EFF4FF;
}
.left-menu li:hover a {
border-right: none;
}
/* tabs 页根容器(bsch 应用页规范 §1:tabs-wrapper + Tabs type=card,与 page-wrapper 同级盒模型) */
.base-wrap-main .tabs-wrapper{min-width:760px;min-height:100%;position:relative;width:100%;box-sizing:border-box}