main
kgdxpr 2 years ago
parent 65a63252d3
commit 9439fbfb4f

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

@ -39,6 +39,29 @@
background-clip: padding-box; background-clip: padding-box;
} }
.legend {
display: flex;
justify-content: space-around;
align-items: center;
}
.legend a {
margin: 10px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
}
.legend span {
font-size: 14px;
}
.mui-content-padded a .mui-icon { .mui-content-padded a .mui-icon {
margin-top: 12px; margin-top: 12px;
} }
@ -76,29 +99,25 @@
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<p style="text-align: center;">答题卡</p> <p style="text-align: center;">答题卡</p>
<div class="flex-container"> <div class="flex-container" id="answers"></div>
<a class="already">1</a> <script id="answersTemplate" type="text/x-jsrender">
<a class="already">2</a> {{if flag == 1}}
<a class="already">3</a> <a class="already">{{:order_id}}</a>
<a class="already">4</a> {{else}}
<a class="already">5</a> <a>{{:order_id}}</a>
<a>6</a> {{/if}}
<a>7</a> </script>
<a>8</a> </div>
<a>9</a> <div class="legend">
<a class="already">10</a> <div class="legend"><a class="already"></a><span>已做</span></div>
</div> <div class="legend"><a></a><span>未做</span></div>
</div> </div>
<!-- <div class="mui-content-padded">
<div class="flex-container"><a class="already"></a>已做</div>
<div class="flex-container"><a></a>未做</div>
</div> -->
</div> </div>
<!-- 菜单具体展示内容 --> <!-- 菜单具体展示内容 -->
<button id="closeMenu" type="button" class="mui-btn mui-btn-danger mui-btn-block" <button id="closeMenu" type="button" class="mui-btn mui-btn-danger mui-btn-block"
style="padding: 5px 20px;">关闭侧滑菜单</button> style="padding: 5px 20px;margin-top: 10px;">关闭</button>
</div> </div>
</div> </div>
</aside> </aside>
@ -176,10 +195,6 @@
$(function () { $(function () {
var orderId = 1; var orderId = 1;
if ($.cookie('order_id')) { if ($.cookie('order_id')) {
orderId = $.cookie('order_id'); orderId = $.cookie('order_id');
@ -190,8 +205,12 @@
// 获取一共有多少道题 // 获取一共有多少道题
var queCount = getExamInfo(); var queCount = getExamInfo();
//获取题的信息
getQuestionInfo(orderId); getQuestionInfo(orderId);
//获取答题卡信息
getAnswerSheet();
// 右上角增加提交按钮 // 右上角增加提交按钮
var header = document.getElementById("header"); var header = document.getElementById("header");
var submitBtn = document.createElement('button'); var submitBtn = document.createElement('button');
@ -200,11 +219,14 @@
header.appendChild(submitBtn); header.appendChild(submitBtn);
submitBtn.addEventListener('tap', function () { submitBtn.addEventListener('tap', function () {
//提交的事件 //提交的事件
console.log("!23123");
}); });
// 侧边栏对象 // 侧边栏对象
var offCanvasWrapper = mui('#offCanvasWrapper'); var offCanvasWrapper = mui('#offCanvasWrapper');
document.getElementById("showMenu").addEventListener("tap", function () { document.getElementById("showMenu").addEventListener("tap", function () {
//获取答题卡信息
getAnswerSheet();
offCanvasWrapper.offCanvas('show'); offCanvasWrapper.offCanvas('show');
}); });
document.getElementById("closeMenu").addEventListener("tap", function () { document.getElementById("closeMenu").addEventListener("tap", function () {
@ -233,7 +255,8 @@
}); });
mui(".mui-content").on("tap", "a", function () { mui(".mui-content").on("tap", "a", function () {
orderId = this.textContent;
getQuestionInfo(this.textContent); getQuestionInfo(this.textContent);
offCanvasWrapper.offCanvas('close'); offCanvasWrapper.offCanvas('close');
}) })
@ -278,6 +301,21 @@
}); });
}; };
// 获取答题卡信息
function getAnswerSheet() {
$.ajax({
url: "/FengHuang/exam/getPersonAllInfo",
async: false,
type: 'GET',
success: function (res) {
var template = $.templates('#answersTemplate');
var htmlOutput = template.render(res);
$('#answers').html(htmlOutput);
}
});
}
function getExamInfo() { function getExamInfo() {
var queCount = 0; var queCount = 0;
$.ajax({ $.ajax({

@ -1,59 +1,31 @@
<!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <html>
<head> <head>
<meta charset="utf-8"> <title>Untitled</title>
</head> </head>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.child {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body> <body>
<div class="parent">
<div class="child">1</div>
<label>AAAA</label> <div class="child">2</div>
<div class="child">3</div>
a<input name="options" value="A" type="checkbox"> </div>
b<input name="options" value="B" type="checkbox">
c<input name="options" value="C" type="checkbox">
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
$('input[type="checkbox"]').change(function () {
console.log("123123");
// $('input[type="checkbox"]').each(function () {
// if (this.checked) {
// console.log(this.value);
// }
// });
// if ($(this).is(':checked')) {
// console.log("123123");
// // 如果复选框被选中,则获取它的值并处理
// var value = $(this).val();
// // 处理复选框选中的值
// }
});
});
</script>
</body> </body>
</html> </html>
Loading…
Cancel
Save