page,.uni-app, uni-page, uni-page-wrapper, uni-page-body { font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif!important; text-size-adjust: 100%!important; -webkit-text-size-adjust: 100%!important; overflow: hidden; /* #ifdef MP-WEIXIN */ overflow: auto; /* #endif */ /* #ifdef APP */ overflow: auto; /* #endif */ // overflow-y: auto; } uni-page-body{ height: 100%; overflow-x: hidden; overflow-y: auto; } .page_login { width: 100%; height: 100%; background-image: url('@/static/image/bg/login_bg.jpg'); background-size: 100% 320px; background-repeat: no-repeat; background-position: 0 0; .login_weclome { width: calc(100% - 48px); margin: auto; height: auto; font-size: 18px; font-weight: 400; color:#ffffff; padding-top: 68px; } .login_title { width: calc(100% - 48px); margin: auto; font-size: 28px; font-weight: 500; color:#ffffff; line-height: 40px; height: 180px; margin-top: 8px; } .login_content { width: 100%; height: calc(100vh - 300px); background: #fff; box-shadow: 0px -20px 40px 0px rgba(4,112,255,0.2); border-radius: 20px 20px 0px 0px; padding-top:32px; box-sizing: border-box; .user_name { width: calc(100% - 48px); margin: auto; height: 48px; line-height: 48px; position: relative; background-color: #ffffff; .input_name { width: 100%; height: 100%; // box-shadow: 0px -10px 20px 0px rgba(4,112,255,0.2); border-radius: 10px 10px 10px 10px; border:1px solid #EBEEF5; text-indent: 40px; background-image: url('@/static/image/icon/login_acount.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 16px 50%; } .clear_icon { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background-image: url('@/static/image/icon/clear_icon.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 16px 50%; } } .user_pass { width: calc(100% - 48px); margin: auto; height: 48px; line-height: 48px; margin-top: 24px; position: relative; .input_name { width: 100%; height: 100%; // box-shadow: 0px -10px 20px 0px rgba(4,112,255,0.2); border-radius: 10px 10px 10px 10px; border:1px solid #EBEEF5; text-indent: 40px; background-image: url('@/static/image/icon/login_pass.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 16px 50%; } .eye_icon { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background-image: url('@/static/image/icon/login_eye.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 16px 50%; } .eyes_icon { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background-image: url('@/static/image/icon/login_eyes.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 16px 50%; } } .login_button { width: calc(100% - 48px); margin: auto; margin-top: 24px; height:48px ; background: #2E64FA; border-radius: 8px 8px 8px 8px; font-weight: 500; font-size: 16px; color: #FFFFFF; text-align: center; line-height: 48px; } .agreement{ width: 100%; display: flex; justify-content: center; align-items: center; padding:20px 24px; box-sizing: border-box; font-size: 24rpx; .uni-radio-input{ width: 24rpx; height: 24rpx; margin-right: 4rpx; svg{ font-size: 18rpx; transform: translate(-50%, -48%) scale(0.5); } } .text{ display: inline-flex; align-items: center; .color_999{ color: #999999; margin:0 4rpx } .color_blue{ color:#2E64FA; } } } } } //阅卷页 .page_mark_paper { width: 100%; // height: calc(100vh - 300rpx); height: auto; // height: auto; overflow: hidden; /* 防止内容溢出 */ // overflow-y: auto; background: #F8F9FD; padding-bottom: env(safe-area-inset-bottom); /* 处理底部安全区域 */ //顶部标题栏 .mark_paper_header { //竖屏 @media screen and (orientation: portrait) { width: 100%; height: 44px; line-height: 44px; background-color: #ffffff; display: flex; justify-content: space-between; .header_left { width: auto; font-weight: 400; font-size: 16px; color: #333333; margin-left: 12px; } .header_right { margin-right: 12px; font-weight: 400; font-size: 14px; // color: #2E64FA; display: flex; align-items: center; } .left_list_icon { text-indent: 30px; background-image: url('@/static/image/icon/package_list.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 0 50%; } } //横屏 @media screen and (orientation: landscape) { width: 100%; height: 44px; line-height: 44px; background-color: #ffffff; display: flex; justify-content: space-between; position: fixed; bottom: 0px; left:30px; z-index: 9; .header_left { width: auto; font-weight: 400; font-size: 16px; color: #333333; margin-left: 12px; } .header_right { margin-right: 12px; font-weight: 400; font-size: 14px; // color: #2E64FA; display: flex; align-items: center; } .left_list_icon { text-indent: 30px; background-image: url('@/static/image/icon/package_list.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 0 50%; } } } // 顶部操作区 .paper_header_tool { width: 100%; height: 44px; display: flex; justify-content: space-between; .tool_left { font-weight: 400; font-size: 16px; color: #333333; } .tool_right { display: flex; justify-content: flex-end; } } .mark_task_item { width: calc(100% - 1.5rem); margin: auto; margin-top: 8px; .task_title { font-weight: 500; font-size: 16px; color: #000000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 设置最多显示的行数 */ overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* 确保单词可以在任何字符断开 */ height: auto; /* 根据字体大小调整高度 */ // line-height: 1.5em; /* 每行的高度 */ } .task_date { font-weight: 400; font-size: 13px; color: #999999; line-height: 2em; } .task_question_item { width: calc(100% - 30px); margin-top: 6px; background-color: #fff; border-radius: 10px; padding: 5px 12px 5px 12px; .question_title { font-weight: 500; font-size: 12px; color: #333333; text-indent: 22px; line-height: 30px; background-image: url('@/static/image/icon/question_icon.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 0 50%; } // 进度 .question_progress { width:100%; margin: auto; display: flex; align-items: center; height: 20px; justify-content: space-between; .progress_title { width: 50px; font-weight: 400; font-size: 12px; color: #666666; } .progress_percent { width: 45px; font-weight: 500; font-size: 12px; color: #333333; } .progress_content { width: calc(100% - 160px); } .progress_count { width: 60px; font-weight: 500; font-size: 12px; color: #333333; text-align: right; } } .question_button { width:100%; margin: auto; margin-top: 15px; margin-bottom: 8px; display: flex; gap: 12px; .button_abnormal_paper { width: calc(50% - 6px); height: 36px; font-weight: 500; font-size: 12px; color: #F56C6C; line-height: 36px; text-align: center; border: 1px solid #F56C6C; border-radius: 6px 6px 6px 6px; } .button_enter_paper { width: calc(50% - 6px); height: 36px; font-weight: 500; font-size: 12px; color: #2E64FA; line-height: 36px; text-align: center; border: 1px solid #2E64FA; border-radius: 6px 6px 6px 6px; } .button_enter_paper_100 { width: 100%; height: 34px; font-weight: 500; font-size: 12px; color: #2E64FA; line-height: 34px; text-align: center; border: 1px solid #2E64FA; border-radius: 6px 6px 6px 6px; } } } } .mark_paper_list { width: 100%; height: calc(100vh - 44px); overflow-y: auto; } //试卷区域 .mark_paper_canvas { width: 100%; // height: calc(100vh - 100px); background-color: #F8F9FD; //竖屏 @media screen and (orientation: portrait) { width: 100%; // height: calc(100vh - 100px); background-color: #F8F9FD; } //横屏 @media screen and (orientation: landscape) { width: calc(100% - 120px); // height: calc(100vh - 100px); background-color: #F8F9FD; } } //阅卷给分板区域 .mark_paper_board { // width: 100%; // // min-height: 188px; // position: fixed; // padding-bottom: 10px; // background-color: #E1E2E7; // bottom: env(safe-area-inset-bottom); /* 处理底部安全区域 */ // z-index: 19; // ========================================== // 情况 1: 长 > 宽 (竖屏 / Portrait) // 即: height > width // ========================================== @media screen and (orientation: portrait) { width: 100%; // min-height: 188px; position: fixed; padding-bottom: 10px; background-color: #E1E2E7; bottom: env(safe-area-inset-bottom); /* 处理底部安全区域 */ z-index: 19; .board_point_list { width: 100%; margin: auto; height: 44px; background-color: green; display: none; .list_content { width: calc(100% - 16px); margin-left: 8px; height: 44px; gap: 8px; display: flex; justify-content: flex-start; align-items: center; } .point_item { width: 61px; height: 28px; background: #ffffff; border-radius: 4px 4px 4px 4px; text-align: center; line-height: 28px; font-weight: 400; font-size: 14px; color: #999999; } .point_item_cur { min-width: 61px; width:auto; height: 28px; background: #2E64FA; border-radius: 4px 4px 4px 4px; text-align: center; line-height: 28px; font-weight: 400; font-size: 14px; color: #ffffff; overflow: hidden; } } .board_tool { display: flex; width: calc(100% - 16px); margin: auto; height: 56px; display: flex; align-items: center; justify-content:space-between; // background-color: red; .give_type { width: 32px; height: 32px; background-image: url('@/static/image/icon/give_type.png'); background-size: 32px 32px; background-repeat: no-repeat; background-position: 50% 50%; } .button_item { width: calc((100% - 32px)/5 - 10px); height: 30px; background: rgba(245,108,108,0.1); border-radius: 4px 4px 4px 4px; border: 1px solid #F56C6C; line-height: 30px; text-align: center; font-weight: 400; font-size: 12px; color: #FFFFFF; } //优秀答案 .good_answer { border: 1px solid #2E64FA; color:#2E64FA; } .good_answer_cur { background: #2E64FA; border: 1px solid #2E64FA; color:#ffffff; } //典型错误 .typical_error { border: 1px solid #F56C6C; color:#F56C6C; } .typical_error_cur { background: #F56C6C; border: 1px solid #F56C6C; color:#ffffff; } //标记异常 .mark_abnormal { border: 1px solid #F56C6C;; color:#F56C6C; } //其余全错 .other_no { background: #F56C6C; border: 1px solid #F56C6C; color:#ffffff; } //其余全对 .other_yes { background: #24C790; border: 1px solid #24C790; color:#ffffff; } } // 直接给分板 .zjgfb_content { width: calc(100% - 16px); margin: auto; height: auto; max-height: 135px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 8px; .board_item { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; } .board_paixu { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 14px; color: #2E64FA; display: flex; align-items: center; justify-content: center; // text-align: center; line-height: 40px; text-align: center; image { width: 16px; height: 16px; margin-left: 5px; } // background-image: url('@/static/image/icon/switching_scores.png'); // background-size: 16px 16px; // background-repeat: no-repeat; // background-position: 80% 50%; // text-indent: 10px; } .board_item{ transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ } } //数字键盘给分方式 .szjp_content { width: calc(100% - 16px); margin: auto; height: auto; .szjp_score { width: 100%; height: 40px; background-color: #f3f3f3; border-radius: 4px; font-weight: 500; font-size: 20px; color: #EB2B20; line-height: 40px; text-align: center; } .szjp_board { width: 100%; height: auto; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 8px; .board_item { width: calc((100% - 24px)/4); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } .board_delete { width: calc((100% - 24px)/4); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; line-height: 40px; text-align: center; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } // background-image: url("../static/image/icon/board_delete.png"); // background-repeat: no-repeat; // background-position: 10px 50%; // background-size: 23px 22px; // text-indent: 40px; } .board_delete:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } } .szjp_buttom { width: 100%; height: 40px; line-height: 40px; background: #2E64FA; box-shadow: 0px 2px 0px 0px #1646CE; border-radius: 4px 4px 4px 4px; border-radius: 4px; font-weight: 500; font-size: 16px; color: #FCFCFE; text-align: center; margin-top: 8px; } } //累计扣分板 .ljkfb_content { width: calc(100% - 16px); margin: auto; height: auto; .ljkfb_score { width: 100%; height: 40px; background-color: #f3f3f3; border-radius: 4px; font-weight: 500; font-size: 20px; color: #EB2B20; line-height: 40px; text-align: center; } .ljkfb_board { width: 100%; height: auto; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 8px; .board_item { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .item_cur { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ font-size: 20px; color: #fff; } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } .board_delete { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; line-height: 40px; text-align: center; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } // background-image: url("../static/image/icon/board_delete.png"); // background-repeat: no-repeat; // background-position: 10px 50%; // background-size: 23px 22px; // text-indent: 40px; } .board_delete:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } } .ljkfb_buttom { width: 100%; height: 40px; margin-top: 8px; display: flex; justify-content: space-between; .button_delete { width: 138px; line-height: 40px; border-radius: 4px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } } .button_enter { width: calc(100% - 146px); line-height: 40px; background: #2E64FA; box-shadow: 0px 2px 0px 0px #1646CE; border-radius: 4px 4px 4px 4px; border-radius: 4px; font-weight: 500; font-size: 16px; color: #FCFCFE; text-align: center; } } } // 给分方式 .board_type { width: calc(100% - 16px); margin: auto; height: auto; display: flex; height: auto; padding-top: 5px; justify-content: space-between; // justify-content: space-around; align-items: center; animation: fadeInOut 10s; .type_item { width: calc(25% - 6px); height: auto; min-height:97px ; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .board_zjgfb { background-image: url("../static/image/icon/giveType/zjgfb_bg.png"); } .board_zjgfb_cur { background-image: url("../static/image/icon/giveType/zjgfb_cur.png"); } .board_szjb { background-image: url("../static/image/icon/giveType/szjb_bg.png"); } .board_szjb_cur { background-image: url("../static/image/icon/giveType/szjb_cur.png"); } .board_ljkfb { background-image: url("../static/image/icon/giveType/ljkfb_bg.png"); } .board_ljkfb_cur { background-image: url("../static/image/icon/giveType/ljkfb_cur.png"); } .board_ljjfb { background-image: url("../static/image/icon/giveType/ljjfb_bg.png"); } .board_ljjfb_cur { background-image: url("../static/image/icon/giveType/ljjfb_cur.png"); } } } // ========================================== // 情况 2: 长 < 宽 (横屏 / Landscape) // 即: width > height // ========================================== @media screen and (orientation: landscape) { width: 120px; height: calc(100% - 100px); // min-height: 188px; top:44px; position: fixed; right: 0; padding-bottom: 10px; background-color: #E1E2E7; bottom: env(safe-area-inset-bottom); /* 处理底部安全区域 */ z-index: 19; display: flex; justify-content: space-between; //切换题的 .board_point_list { width: 100%; margin: auto; height: 44px; background-color: green; display: none; .list_content { width: calc(100% - 16px); margin-left: 8px; height: 44px; gap: 8px; display: flex; justify-content: flex-start; align-items: center; } .point_item { width: 61px; height: 28px; background: #ffffff; border-radius: 4px 4px 4px 4px; text-align: center; line-height: 28px; font-weight: 400; font-size: 14px; color: #999999; } .point_item_cur { min-width: 61px; width:auto; height: 28px; background: #2E64FA; border-radius: 4px 4px 4px 4px; text-align: center; line-height: 28px; font-weight: 400; font-size: 14px; color: #ffffff; overflow: hidden; } } .board_tool { width:50%; margin: auto; height: 100%; display: flex; align-items: center; justify-content:space-between; flex-wrap: nowrap;//禁止换行 overflow-y: auto; padding-left: 0px; padding-top: 15px; box-sizing: border-box; display: flex; flex-direction: column; /* 核心:垂直排列 */ justify-content: flex-start; gap: 10px; .give_type { width: 32px; height: 32px; background-image: url('@/static/image/icon/give_type.png'); background-size: 32px 32px; background-repeat: no-repeat; background-position: 50% 50%; } .button_item { width: calc(100% - 20px); max-width: 35px; height:auto; background: rgba(245,108,108,0.1); border-radius: 4px 4px 4px 4px; border: 1px solid #F56C6C; text-align: center; font-weight: 400; font-size: 12px; color: #FFFFFF; padding: 5px 2px; } //优秀答案 .good_answer { border: 1px solid #2E64FA; color:#2E64FA; } .good_answer_cur { background: #2E64FA; border: 1px solid #2E64FA; color:#ffffff; } //典型错误 .typical_error { border: 1px solid #F56C6C; color:#F56C6C; } .typical_error_cur { background: #F56C6C; border: 1px solid #F56C6C; color:#ffffff; } //标记异常 .mark_abnormal { border: 1px solid #F56C6C;; color:#F56C6C; } //其余全错 .other_no { background: #F56C6C; border: 1px solid #F56C6C; color:#ffffff; } //其余全对 .other_yes { background: #24C790; border: 1px solid #24C790; color:#ffffff; } } // 直接给分板 .zjgfb_content { width: 50%; height: 100%; display: flex; overflow-y: auto; justify-content: flex-start; padding-left: 0px; padding-top: 15px; flex-direction: column; /* 核心:垂直排列 */ flex-wrap: nowrap;//禁止换行 box-sizing: border-box; gap: 8px; .board_item { width: 50px; height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; } .board_paixu { width: 50px; height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 10px; color: #2E64FA; display: flex; align-items: center; justify-content: center; // text-align: center; line-height: 40px; text-align: center; image { width: 16px; height: 16px; margin-left: 5px; } // background-image: url('@/static/image/icon/switching_scores.png'); // background-size: 16px 16px; // background-repeat: no-repeat; // background-position: 80% 50%; // text-indent: 10px; } .board_item{ transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ } } //数字键盘给分方式 .szjp_content { width: calc(100% - 16px); margin: auto; height: auto; .szjp_score { width: 100%; height: 40px; background-color: #f3f3f3; border-radius: 4px; font-weight: 500; font-size: 20px; color: #EB2B20; line-height: 40px; text-align: center; } .szjp_board { width: 100%; height: auto; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 8px; .board_item { width: calc((100% - 24px)/4); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } .board_delete { width: calc((100% - 24px)/4); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; line-height: 40px; text-align: center; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } // background-image: url("../static/image/icon/board_delete.png"); // background-repeat: no-repeat; // background-position: 10px 50%; // background-size: 23px 22px; // text-indent: 40px; } .board_delete:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } } .szjp_buttom { width: 100%; height: 40px; line-height: 40px; background: #2E64FA; box-shadow: 0px 2px 0px 0px #1646CE; border-radius: 4px 4px 4px 4px; border-radius: 4px; font-weight: 500; font-size: 16px; color: #FCFCFE; text-align: center; margin-top: 8px; } } //累计扣分板 .ljkfb_content { width: calc(100% - 16px); margin: auto; height: auto; .ljkfb_score { width: 100%; height: 40px; background-color: #f3f3f3; border-radius: 4px; font-weight: 500; font-size: 20px; color: #EB2B20; line-height: 40px; text-align: center; } .ljkfb_board { width: 100%; height: auto; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 8px; .board_item { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 500; font-size: 20px; color: #000000; text-align: center; line-height: 40px; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } .item_cur { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ font-size: 20px; color: #fff; } .board_item:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } .board_delete { width: calc((100% - 32px)/5); height: 40px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; line-height: 40px; text-align: center; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } // background-image: url("../static/image/icon/board_delete.png"); // background-repeat: no-repeat; // background-position: 10px 50%; // background-size: 23px 22px; // text-indent: 40px; } .board_delete:active { border-radius: 4px 4px 4px 4px; background: #2E64FA;/* 点击时背景颜色变深 */ transform: scale(0.98); /* 点击时轻微缩放 */ // box-shadow: 0px 2px 0px 0px #1646CE; /* 添加阴影效果 */ } } .ljkfb_buttom { width: 100%; height: 40px; margin-top: 8px; display: flex; justify-content: space-between; .button_delete { width: 138px; line-height: 40px; border-radius: 4px; background: #FCFCFE; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1); border-radius: 4px 4px 4px 4px; font-weight: 400; font-size: 16px; color: #F56C6C; display: flex; align-items: center; justify-content: center; image{ width: 23px; height: 22px; margin-right: 5px; } } .button_enter { width: calc(100% - 146px); line-height: 40px; background: #2E64FA; box-shadow: 0px 2px 0px 0px #1646CE; border-radius: 4px 4px 4px 4px; border-radius: 4px; font-weight: 500; font-size: 16px; color: #FCFCFE; text-align: center; } } } // 给分方式 .board_type { width: calc(100% - 16px); margin: auto; height: auto; display: flex; height: auto; padding-top: 5px; justify-content: space-between; // justify-content: space-around; align-items: center; animation: fadeInOut 10s; .type_item { width: calc(25% - 6px); height: auto; min-height:97px ; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .board_zjgfb { background-image: url("../static/image/icon/giveType/zjgfb_bg.png"); } .board_zjgfb_cur { background-image: url("../static/image/icon/giveType/zjgfb_cur.png"); } .board_szjb { background-image: url("../static/image/icon/giveType/szjb_bg.png"); } .board_szjb_cur { background-image: url("../static/image/icon/giveType/szjb_cur.png"); } .board_ljkfb { background-image: url("../static/image/icon/giveType/ljkfb_bg.png"); } .board_ljkfb_cur { background-image: url("../static/image/icon/giveType/ljkfb_cur.png"); } .board_ljjfb { background-image: url("../static/image/icon/giveType/ljjfb_bg.png"); } .board_ljjfb_cur { background-image: url("../static/image/icon/giveType/ljjfb_cur.png"); } } } } } //全局图标按钮 .button_icon { gap: 20px; //编辑 .button_editor { width: 24px; height: 44px; background-image: url('@/static/image/icon/mark_editor.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 100% 50%; } //旋转 .button_rotate { width: 24px; height: 44px; background-image: url('@/static/image/icon/screens_change.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 100% 50%; } .tool_select { width: 100px; .uni-select { width: 100px; background-image: url('@/static/image/icon/mark_editor.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 70% 50%; border:none; .uni-icons { display: none; } } } } .mark_paper { // 确保 drawer 的内容区域占满高度并使用 flex 布局 .left_package_list { width: 100%; height: calc(100vh - 40px); z-index: 9; .item_student_abnormal { width: 44px; height: 24px; background: rgba(235,43,32,0.1); font-weight: 400; font-size: 14px; color: #EB2B20; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } .list_item { width: 100%; height: 54px; border-bottom: 1px solid #f6f6f6; //已经阅了 .item_yes_read { width: calc(100% - 24px); margin: auto; height: 54px; display: flex; justify-content: space-between; align-items: center; .item_student_name { width: 60px; font-weight: 400; font-size: 16px; color: #333333; } .item_student_score { width: 60px; font-weight: 500; font-size: 16px; color: #2BC644; text-align: center; } .item_student_state { width: 44px; height: 24px; background-color:#EAF9EC ; font-weight: 400; font-size: 14px; color: #2BC644; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } } //未阅 .item_not_read { width: calc(100% - 24px); margin: auto; height: 54px; display: flex; justify-content: space-between; align-items: center; .item_student_name { width: 60px; font-weight: 400; font-size: 16px; color: #999999; } .item_student_score { width: 60px; font-weight: 500; font-size: 16px; color: #2BC644; text-align: center; } .item_student_state { width: 44px; height: 24px; background-color:#F3F3F3 ; font-weight: 400; font-size: 14px; color: #999999; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } } } .list_item_cur { width: 100%; height: 54px; background: #EAF0FF; border-bottom: 1px solid #f6f6f6; .item_student_read { width: 44px; height: 24px; background-color:#D7E2FF ; font-weight: 400; font-size: 14px; color: #2E64FA; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } .item_yes_read { width: calc(100% - 24px); margin: auto; height: 54px; display: flex; justify-content: space-between; align-items: center; .item_student_name { width: 60px; font-weight: 400; font-size: 16px; color: #333333; } .item_student_score { width: 60px; font-weight: 500; font-size: 16px; color: #2BC644; text-align: center; } .item_student_state { width: 44px; height: 24px; background-color:#D7E2FF ; font-weight: 400; font-size: 14px; color: #999999; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } } //未阅 .item_not_read { width: calc(100% - 24px); margin: auto; height: 54px; display: flex; justify-content: space-between; align-items: center; .item_student_name { width: 60px; font-weight: 400; font-size: 16px; color: #333333; } .item_student_score { width: 60px; font-weight: 500; font-size: 16px; color: #2BC644; text-align: center; } .item_student_state { width: 44px; height: 24px; background-color:#F3F3F3 ; font-weight: 400; font-size: 14px; color: #999999; text-align: center; line-height: 24px; border-radius: 4px 4px 4px 4px; } } } .uni-drawer__content { top:100px !important; } } } .page_jg_20 { height: 20rpx; } //我的页面 .page_my { width: 100%; height: 100%; position: relative; background: linear-gradient(180deg, #C7E0FF 0%, #F8F9FD 88.1%); .my_bg{ width: 100%; height: 360rpx; position: absolute; left: 0rpx; top: 0rpx; z-index: 1; } .page_my_content{ position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; padding: 0 48rpx; box-sizing: border-box; } .user_info { width:100%; height: 250rpx; margin-top: 60rpx; display: flex; align-items: center; .user_image { width:160rpx; height: 160rpx; margin-right: 40rpx; background-size: 50%; background-repeat: no-repeat; background-position: 0 50%; flex-shrink: 0; } .default_user { width:160rpx; height:160rpx; } .user_info_content { flex: 1; .user_name { width: 100%; font-weight: 500; font-size: 56rpx; color: #000000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* 设置最多显示的行数 */ overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* 确保单词可以在任何字符断开 */ // height: auto; /* 根据字体大小调整高度 */ // line-height: 1.5em; /* 每行的高度 */ } // .user_school // { // width: 100%; // font-weight: 400; // font-size: 32rpx; // color: #666666; // } .user_account { margin-top: 20rpx; width: 100%; font-weight: 400; font-size: 32rpx; color: #666666; } } } .user_menu { width: 100%; height: 140rpx; margin-top: 40rpx; padding: 0 48rpx; box-sizing: border-box; background: #F9FBFF; border-radius: 20rpx; display: flex; justify-content: space-between; align-items: center; &.top{ margin-top: 0; } .menu_left { flex:1; display: flex; align-items: center; } .iconfont { font-size: 36rpx; } .menu_icon{ width: 40rpx; height: 40rpx; } .menu_text{ font-weight: 400; font-size: 32rpx; margin-left: 16rpx; color: #333333; } .menu_right { font-size: 40rpx !important; color: #999999 !important; } } } // 分析报告 成绩分析 .page_report{ width: 100%; min-height: 100%; // overflow-y: auto; background-color:#F8F9FD; // .page_content{ // position: relative; // width: 100%; // // min-height: 100%; // // &::before{ // // content: ''; // // background: linear-gradient(180deg, #CDD9FC 0%, #F8F9FD 100%); // // width: 100%; // // height: 268rpx; // // position: absolute; // // left: 0; // // top:0; // // } // } .page_module{ padding-top: 20rpx; padding-bottom: 10rpx; box-sizing: border-box; .report_module{ margin:0 24rpx 20rpx; box-sizing: border-box; background-color: #fff; border-radius: 20rpx; &.only_table{//成绩单切换表格只显示table margin:0 24rpx; .module_table{ padding:0; // .zb-table{ // border-radius: 20rpx; // } } } .module_title{ width: 100%; padding:20rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; .title_left{ font-weight: 600; font-size:28rpx; line-height: 40rpx; color: #333333; } .title_right{ &.tab_list{ display: inline-flex; align-items: center; color: #666666; font-size: 24rpx; line-height: 40rpx; .tab_item{ margin-left: 20rpx; position: relative; &.active{ color: #2E64FA; &::after{ position: absolute; left:50%; transform: translateX(-50%); content: ''; bottom: 0; background-color: #2E64FA; height: 4rpx; width: 40rpx; border-radius: 6rpx; } } } } } } .module_chart{ width:100%; padding:0 20rpx; box-sizing: border-box; min-height: 362rpx; .no_data{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 362rpx; .no_data_img{ width: 464rpx; height: 278rpx; } .no_data_text{ color: #999999; font-weight: 400; font-size: 24rpx; line-height: 36rpx; } } } .module_table{ width:100%; padding:0 20rpx 20rpx; box-sizing: border-box; // .zb-table{ // border-left: 1rpx solid #EBEEF5; // border-right: 1rpx solid #EBEEF5; // } .uni_table{ // border: 1px #EBEEF5 solid; border-right: none; // min-height: 792rpx; // min-height: 278rpx; &.border_round{ border-radius: 20rpx; .uni-table{ border-radius: 20rpx; } } .uni-table{ border-radius: 0; table-layout: fixed; } .uni-table-tr{ &.table_th{ background-color: #F4F6F8; &:nth-child(2n+2){ background-color: #F4F6F8 !important; } } .uni-table-td{ &.fixed_left{ position: sticky; background-color: #ffffff; } &.fixed_right{ position: sticky; background-color: #ffffff; &.table--border{ border-left: 1rpx #ebeef5 solid; } } } &:nth-child(2n+2){ background-color: #ffffff !important; } &:nth-child(2n+3){ background-color: #fafafa !important; .uni-table-td{ &.fixed_left{ background-color: #fafafa !important; } &.fixed_right{ background-color: #fafafa !important; } } } } .uni-table-th{ padding: 12rpx 10rpx; box-sizing: border-box; height: 66rpx; color: #303133; font-weight: 500; font-size: 24rpx; // position: sticky; // top: 0; // z-index: 20; // background-color: #F4F6F8; &.fixed_left{ position: sticky; background-color: #F4F6F8; } &.fixed_right{ position: sticky; background-color: #F4F6F8; &.table--border{ border-left: 1rpx #ebeef5 solid; } } } .uni-table-td{ padding: 8rpx 10rpx; box-sizing: border-box; height: 66rpx; color: #606266; font-weight: 400; font-size: 24rpx; line-height: 30rpx; vertical-align: middle; // white-space: nowrap; // overflow: hidden; // text-overflow: ellipsis; } } //自定义表格样式 .my_table_scroll{ width: 100%; overflow-x: auto; } .my_table_border{ border: 1px #ebeef5 solid; border-right: none; } .my_border_none{ border-bottom: none; } .my_table{ border-right: none; .table{ position: relative; width: 100%; background-color: #fff; box-sizing: border-box; display: table; border-radius: 0; table-layout: fixed; overflow-x: auto; .table_th{ background-color: #F4F6F8; th{ padding: 12rpx 10rpx; box-sizing: border-box; height: 66rpx; color: #303133; font-weight: 500; font-size: 24rpx; display: table-cell; border-bottom: 1px #ebeef5 solid; border-right: 1px #ebeef5 solid; } } tr{ display: table-row; transition: all 0.3s; box-sizing: border-box; th{ &.fixed_left{ position: sticky; background-color: #F4F6F8; } &.fixed_right{ position: sticky; background-color: #F4F6F8; } } &:nth-child(2n+3){ background-color: #fafafa !important; td{ &.fixed_left{ background-color: #fafafa !important; } &.fixed_right{ background-color: #fafafa !important; } } } td{ padding: 8rpx 10rpx; box-sizing: border-box; height: 66rpx; color: #606266; font-weight: 400; font-size: 24rpx; line-height: 30rpx; vertical-align: middle; border-right: 1px #EBEEF5 solid; border-bottom: 1px #EBEEF5 solid; word-break: break-all; &.fixed_left{ position: sticky; background-color: #ffffff; } &.fixed_right{ position: sticky; background-color: #ffffff; &.table--border{ border-left: 1rpx #ebeef5 solid; } } } } } } } .module_qita{ width:100%; padding: 0 20rpx; box-sizing: border-box; } } uni-button[type='primary']{ background-color: #2E64FA; font-weight: 400; } .page_tab{ display: flex; height: 46rpx; position: relative; margin-top: 40rpx; .tab_item{ color:#666666; font-size: 28rpx; line-height: 32rpx; font-weight: 400; margin-right: 30rpx; position: relative; white-space: nowrap; &:last-child{ margin-right: 0; } &.active{ color:#333333; &::after{ position: absolute; left:50%; transform: translateX(-50%); content: ''; bottom: 0; background-color: #2E64FA; height: 4rpx; width: 40rpx; } } } } } .back_to_top{ width: 96rpx !important; height: 96rpx !important; bottom: 280rpx !important; right:24rpx !important; .uv-back-top{ // background-color: #2E64FA; } .uv-icon__icon{ color: #ffffff !important; } } .color_blue{ color:#2E64FA; } } //表单样式 .forms_style{ .uni-forms-item{ margin-bottom: 30rpx !important; &:last-child{ margin-bottom: 0 !important; } .uni-forms-item__label{ color: #333333; font-size: 28rpx; height: 72rpx; padding: 0 8rpx 0 0; } .uni-forms-item__content{ font-size: 28rpx; color: #333333; //输入框 .uni-easyinput{ .is-input-border{ border:1px solid #EBEEF5; border-radius: 8rpx; } .is-disabled{ background-color: #F5F7FA !important; color: #333333; } .uni-easyinput__content-input{ height: 72rpx; font-size: 28rpx; .uni-easyinput__placeholder-class{ font-size: 28rpx; } } .content-clear-icon{ font-size: 40rpx !important; padding: 0 10rpx; } } //单选框 .uni-stat__select{ .uni-select{ font-size: 28rpx; border:1px solid #EBEEF5; border-radius: 8rpx; height: 72rpx; min-height: 72rpx; box-sizing: border-box; padding:0 10rpx; .uni-select__input-box{ height: 72rpx; .uni-select__input-text{ font-size: 28rpx !important; color: #333333; &.uni-select__input-placeholder{ font-size: 28rpx; color: #999999; } } .tag-calss{ font-size: 24rpx; border-radius: 8rpx; height: 48rpx; line-height: 44rpx; padding: 0 4rpx 0 8rpx; margin:4rpx 12rpx 4rpx 0; .text{ font-size: 24rpx; line-height: 44rpx; } } .uniui-clear{ font-size: 40rpx !important; } } .uniui-top,.uniui-bottom{ color: #C0C4CC !important; font-size: 32rpx !important; } //下拉框样式 .uni-select__selector{ .uni-select__selector-item{ font-size: 24rpx; color: #666666; line-height: 60rpx; padding:0 20rpx; } .uni-select_selector-item_active{ background-color: #fff; color: #2E64FA; font-weight: 400; } } } } //日期选择框 .uni-date{ .uni-date-x--border{ border:1px solid #EBEEF5; border-radius: 8rpx; .uni-date-x{ font-size: 28rpx; color: #333333; border-radius: 8rpx; .uniui-calendar{ font-size: 32rpx !important; } .uni-date__x-input{ height: 72rpx; line-height: 72rpx; font-size: 28rpx; } } .uni-date__icon-clear{ padding-right: 10rpx; } .uniui-clear{ font-size: 40rpx !important; } } } } } } // 提示框样式 .uni-popup-dialog{ width:310px !important; border-radius: 20rpx; background: linear-gradient(180deg, #DAE4FF 0%, #FFFFFF 35.1%); &.white{ background:#FFFFFF; } .uni-dialog-title{ display: none !important; } .uni-dialog-content{ flex-direction: column !important; padding: 0 !important; } //自定义标题样式 .dialog_title{ height: 96rpx; padding: 0 40rpx; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; .dialog_title_lt{ display: inline-flex; align-items: center; .title{ margin-left: 16rpx; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #303133; font-weight: bold; font-size: 32rpx; } } } //自定义弹框内容 .dialog_content{ min-height: 160rpx; height: auto; display: flex; // overflow: auto; justify-content: center; align-items: center; color: #666666; font-size: 28rpx; width:100%; box-sizing: border-box; padding: 0 10rpx; flex-wrap: wrap; line-height: 40rpx; text-align: center; } .uni-dialog-button-group{ border-top-width:0!important; padding:40rpx 44rpx 28rpx; box-sizing: border-box; .uni-dialog-button{ height: 72rpx; background-color: #F0F2F9; border-radius: 12rpx; font-size: 28rpx; &:first-child{ margin-right: 20rpx; .uni-dialog-button-text{ color: #606266 !important; } } &:last-child{ margin-left: 20rpx; .uni-dialog-button-text{ color: #FFFFFF !important; } background-color: #2E64FA; } &.uni-border-left{ border-left-width:0; } } } } // 提示框样式 .uni-tooltip-popup{ padding:8rpx 12rpx !important; max-width: 300rpx; // width: 120rpx; min-width: 100rpx; box-sizing: border-box; border-radius: 16rpx !important; line-height: 28rpx !important; font-size: 24rpx !important; text-align: center !important; white-space: nowrap; } .dialog_content { width: 100%; height: auto; background-color: #fff; z-index: 1009; border-radius: 20px 20px 0 0; padding:15px 11px; box-sizing: border-box; } .dialog_contents { width: 100%; height: auto; background-color: #fff; z-index: 1009; border-radius: 40rpx 40rpx 0 0; box-sizing: border-box; } .more_menu { width: 100%; height: auto; .menu_item { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 44px; .menu_item_title { font-weight: 400; font-size: 18px; color: #333333; text-indent: 20px; i { font-size: 18px; } } .abnormal_title { color:#F56C6C; } .menu_item_icon { color:#333333; } .icon_xiangyou { color:#333 } } } .review_back { width: 100%; height: auto; .dialog_title { font-size:18px; font-weight: 500; width: calc(100% - 20px); margin:auto; height: 44px; line-height: 44px; display: flex; justify-content: flex-start; margin-top: 5px; .title_left { width: 50px; } .title_center { width: calc(100% - 100px); text-align: center; font-weight: 500; font-size: 18px; color: #000000; } .title_right { width: 50px; text-align: right; .close_icon { i{ font-size: 25px; } } } } .review_list { width: 100%; max-height: calc(100vh - 150px); margin-top: 10px; overflow-y: scroll; padding-left: 11px; padding-right: 0px; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 11px; .review_item { //竖屏 @media screen and (orientation: portrait) { width: calc(50% - 11px); height: auto; background: #FFFFFF; border-radius: 10px 10px 10px 10px; padding: 6px 10px; box-sizing: border-box; position: relative; .item_states_1 { position: absolute; top: 0px; right: 0px; width: 50px; height: 26px; line-height:26px; text-align: center; background: #2BC644; border-radius: 0px 10px 0px 4px; font-weight: 400; font-size: 12px; color: #FFFFFF; } .item_states_2 { position: absolute; top: 0px; right: 0px; width: 50px; height: 26px; line-height: 26px; text-align: center; background: #2E64FA; border-radius: 0px 10px 0px 4px; font-weight: 400; font-size: 12px; color: #FFFFFF; } .item_title { font-weight: 500; font-size: 14px; color: #333333; line-height: 30px; } .item_count { font-weight: 400; font-size: 14px; color: #666666; line-height: 30px; display: flex; justify-content: flex-start; gap: 10px; .abnormal_count { color:#F56C6C; } } .item_time { font-weight: 400; font-size: 12px; color: #B3B3B3; line-height: 20px; } } //横屏 @media screen and (orientation: landscape) { width: calc(25% - 11px); max-height: 60vh; background: #FFFFFF; border-radius: 10px 10px 10px 10px; padding: 6px 10px; box-sizing: border-box; position: relative; .item_states_1 { position: absolute; top: 0px; right: 0px; width: 50px; height: 26px; line-height:26px; text-align: center; background: #2BC644; border-radius: 0px 10px 0px 4px; font-weight: 400; font-size: 12px; color: #FFFFFF; } .item_states_2 { position: absolute; top: 0px; right: 0px; width: 50px; height: 26px; line-height: 26px; text-align: center; background: #2E64FA; border-radius: 0px 10px 0px 4px; font-weight: 400; font-size: 12px; color: #FFFFFF; } .item_title { font-weight: 500; font-size: 14px; color: #333333; line-height: 20px; } .item_count { font-weight: 400; font-size: 14px; color: #666666; line-height: 20px; display: flex; justify-content: flex-start; gap: 10px; .abnormal_count { color:#F56C6C; } } .item_time { font-weight: 400; font-size: 12px; color: #B3B3B3; line-height: 20px; } } } .states_1 { border: 1px solid #2BC644; } .states_0 { border: 1px solid #2E64FA; } } .review_row { width: calc(100% - 20px); margin: auto; display: flex; justify-content: space-between; align-items: center; line-height: 40px; height: 40px; margin-top: 10px; .row_label { width: 80px; font-weight: 400; font-size: 16px; color: #333333; text-align: right; } .row_value { width: calc(100% - 80px); } } .review_button { width: calc(100% - 20px); margin: auto; background: #2E64FA; border-radius: 8px 8px 8px 8px; line-height: 48px; font-weight: 500; font-size: 16px; color: #FFFFFF; margin-top: 10px; text-align: center; } }