<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>问卷调查</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="js/vue.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
<style>
.mui-bar-nav{
background-color: #F94E0F;
}
.mui-bar-nav .mui-title{
color: #fff;
}
.mui-bar-nav.mui-bar .mui-icon{
color: #fff;
}
.mui-content{
position:absolute;
top:0;
bottom: 0;
height: 100%;
width: 100%;
}
.mui-input-group:after{
height: 0px !important;
}
.mui-input-group .mui-input-row::after{
left:0;
}
.mui-input-group .mui-input-row:last-child:after{
height: 0px !important;
}
.mui-input-group {
background: #fff;
}
.mui-input-row label {
width: 100%;
}
.mui-radio.mui-left label {
display: block;
padding:20px 15px 20px 28px;
white-space:normal;
text-align:justify;
}
.mui-radio.mui-left input[type='radio']{
left: 0;
}
.mui-radio input[type='radio']{
top:19px;
width:22px;
height: 22px;
}
.mui-radio input[type='radio']:before {
position: relative;
top: 2px;
width: 18px;
height: 18px;
display: inline-block;
content: '';
background: url(img/question1.jpg) no-repeat;
background-size:90%;
}
.mui-radio input[type='radio']:checked:before {
content:'';
background: url(img/question2.jpg) no-repeat;
background-size:90%;
}
.mui-checkbox{width:auto;height: auto;border:none;}
.mui-checkbox.mui-left input[type=checkbox] {
top: 12px;
}
</style>
</head>
<body style="background-color: #f7f7f7;">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-arrowadd"></a>
<h1 class="mui-title">问卷调查</h1>
</header>
<div class="mui-content mui-content-bgcolor" id="vmode">
<div class="questionnaire2">
<div id="questionnaire2-box">
<div class="questionitem" v-for="(item,index) in questionitems" :data-index="index" @click="oprev(index)">
<div class="questionbox" v-show="active === index">
<div class="questionnaire2-tit">
<p>{{index+1}}/10</p>
<p>{{item.question_title}}</p>
</div>
<div class="questionnaire2-con">
<dl class="mui-input-group">
<dd class="mui-input-row mui-radio mui-left" v-for="(items,i) in item.question_answerlist" :key='i'>
<input type="radio" name="radio2" :value="items.answer_id" v-model="answer"/><label class="advice">{{items.answer_option}}</label>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="questionnaire2-fot">
<a @click="olast">上一题</a><a @click="oNext" v-if='showNext'>下一题</a>
<input type="button" id="questionbtn" v-else @click ='subquestion' value="提交"/>
</div>
<!-- 测评结果弹框 -->
<div class="popover1 mui-popover mui-popover-question">
<h1>测评结果</h1>
<p class="martop">您的测评结果为：<span>巨蟹座{{score_level}}</span></p>
<p >十道题的答案ID为：<br>数组：{{answerArray}}<br>字符串：{{jihe}}</p>
<button @click ="goinvest" class="closebox gradient">确认</button>
<a @click="review" class="review">重新测评</a>
</div>
</div>
<script src="js/questionNaireVue.js"></script>
</body>
</html>
div+mui+vue.js 制作问卷调查单页（造的json）
1星 需积分: 47 14 浏览量
2018-12-28
16:11:08
上传
评论 1
收藏 130KB RAR 举报 
questionnaire.rar （11个子文件） 
questionnaire 
.project 668B
index.html 4KB img 
question2.jpg 2KB question1.jpg 1KB js mui.min.js 121KB questionNaireVue.js 6KB vue.min.js 84KB jquery-1.11.0.min.js 94KB fonts mui.ttf 29KB css mui.css 95KB style.css 2KB
评论2