div+mui+vue.js制作问卷调查单页（造的json）资源-CSDN文库

共11个文件

js：4个

css：2个

jpg：2个

vue

es6

1星需积分: 47 6 浏览量 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

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

<!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>