|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
|
|
|
|
|
|
|
|
<!--标准mui.css-->
|
|
|
|
|
|
<link rel="stylesheet" href="../css/mui.min.css">
|
|
|
|
|
|
<!--App自定义的css-->
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../css/app.css" />
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.flex-container {
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
-webkit-flex-flow: row wrap;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-content-padded {
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-content-padded a {
|
|
|
|
|
|
margin: 10px;
|
|
|
|
|
|
width: 35px;
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
|
border-radius: 25px;
|
|
|
|
|
|
background-clip: padding-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-content-padded a .mui-icon {
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-spinner,
|
|
|
|
|
|
.mui-spinner-white {
|
|
|
|
|
|
margin-top: 12px
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.active .mui-spinner-indicator {
|
|
|
|
|
|
background: #007AFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-content a {
|
|
|
|
|
|
color: #8F8F94;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mui-content a.already {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
border: 1px solid #E73A30;
|
|
|
|
|
|
background-color: #E73A30;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 侧滑导航根容器 -->
|
|
|
|
|
|
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 菜单容器 -->
|
|
|
|
|
|
<aside class="mui-off-canvas-left">
|
|
|
|
|
|
<div class="mui-scroll-wrapper">
|
|
|
|
|
|
<div class="mui-scroll">
|
|
|
|
|
|
<div class="mui-content">
|
|
|
|
|
|
<div class="mui-content-padded">
|
|
|
|
|
|
<p style="text-align: center;">答题卡</p>
|
|
|
|
|
|
<div class="flex-container">
|
|
|
|
|
|
<a class="already">1</a>
|
|
|
|
|
|
<a class="already">2</a>
|
|
|
|
|
|
<a class="already">3</a>
|
|
|
|
|
|
<a class="already">4</a>
|
|
|
|
|
|
<a class="already">5</a>
|
|
|
|
|
|
<a>6</a>
|
|
|
|
|
|
<a>7</a>
|
|
|
|
|
|
<a>8</a>
|
|
|
|
|
|
<a>9</a>
|
|
|
|
|
|
<a class="already">10</a>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 菜单具体展示内容 -->
|
|
|
|
|
|
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block"
|
|
|
|
|
|
style="padding: 5px 20px;">关闭侧滑菜单</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主页面容器 -->
|
|
|
|
|
|
<div class="mui-inner-wrap">
|
|
|
|
|
|
<!-- 主页面标题 -->
|
|
|
|
|
|
<header id="header" class="mui-bar mui-bar-nav">
|
|
|
|
|
|
<h1 class="mui-title">党史党建知识问答</h1>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<div class="mui-content mui-scroll-wrapper">
|
|
|
|
|
|
<div class="mui-card">
|
|
|
|
|
|
<div class="mui-card-header" style="font-size:18px">1921年7月23日至8月初，中国共产党第一次全国代表大会先后在（      ）召开。</div>
|
|
|
|
|
|
<div class="mui-card-content" style="font-size:16px">
|
|
|
|
|
|
<div class="mui-card-content-inner">
|
|
|
|
|
|
<form class="mui-input-group">
|
|
|
|
|
|
<div class="mui-input-row mui-checkbox mui-left">
|
|
|
|
|
|
<label>A.上海、天津</label>
|
|
|
|
|
|
<input name="checkbox" value="Item 1" type="checkbox">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mui-input-row mui-checkbox mui-left">
|
|
|
|
|
|
<label>B.上海、嘉兴</label>
|
|
|
|
|
|
<input name="checkbox" value="Item 2" type="checkbox">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mui-input-row mui-checkbox mui-left">
|
|
|
|
|
|
<label>C.北京、上海</label>
|
|
|
|
|
|
<input name="checkbox" value="Item 2" type="checkbox">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mui-input-row mui-checkbox mui-left">
|
|
|
|
|
|
<label>D.北京、天津</label>
|
|
|
|
|
|
<input name="checkbox" value="Item 2" type="checkbox">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="mui-bar mui-bar-tab">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="mui-tab-item" href="#" id="showMenu">
|
|
|
|
|
|
<span class="mui-icon mui-icon-bars"></span>
|
|
|
|
|
|
<span class="mui-tab-label"></span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a class="mui-tab-item" href="#" id="next">
|
|
|
|
|
|
<span class="mui-icon mui-icon-arrowthinleft"></span>
|
|
|
|
|
|
<span class="mui-tab-label">上一题</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a class="mui-tab-item" href="#" id="previous">
|
|
|
|
|
|
<span class="mui-icon mui-icon-arrowthinright"></span>
|
|
|
|
|
|
<span class="mui-tab-label">下一题</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
<!-- 遮罩 -->
|
|
|
|
|
|
<div class="mui-off-canvas-backdrop"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../js/mui.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 右上角增加提交按钮
|
|
|
|
|
|
var header = document.getElementById("header");
|
|
|
|
|
|
var submitBtn = document.createElement('button');
|
|
|
|
|
|
submitBtn.className = 'mui-btn mui-btn-blue mui-btn-link mui-pull-right';
|
|
|
|
|
|
submitBtn.innerText = '提交';
|
|
|
|
|
|
header.appendChild(submitBtn);
|
|
|
|
|
|
submitBtn.addEventListener('tap', function () {
|
|
|
|
|
|
offCanvasWrapper.offCanvas('show');
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var offCanvasWrapper = mui('#offCanvasWrapper');
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('showMenu').addEventListener('tap', function () {
|
|
|
|
|
|
offCanvasWrapper.offCanvas('show');
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('offCanvasHide').addEventListener('tap', function () {
|
|
|
|
|
|
offCanvasWrapper.offCanvas('close');
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
