div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json
生活随笔
收集整理的這篇文章主要介紹了
div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
div+mui+vue.js 制作問卷調(diào)查單頁 ——題目答案是造的json
先來看一下效果圖:
主要就是用讀取json題目和答案,記錄答案ID。 一次性去讀10道題目,vue.js控制當(dāng)前題目的顯示影藏。上一題 記錄 已選擇,下一題判斷 是否選擇了。最后彈出框 顯示 ,然后按后臺需求提交。
css:
/*toast信息提示*/ .mui-toast-container {bottom: 50% !important;}/* 問卷調(diào)查2 */ .questionnaire2{margin:40px 20px 0 ;background-color: #fff;}.questionnaire2-tit{background-color: #06b5ff;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:10px 0;} .questionnaire2-tit p{ color: #fff;font-size: 18px;text-align: center;margin-bottom: 0;padding:0 10px;} .questionnaire2-tit p:nth-of-type(2){text-align: left;padding-top:10px;min-height:33px;max-height:73px;overflow: hidden;}.questionnaire2-con{padding:0 10px;background-color: #fff;} .questionnaire2-con dl{margin:0;} .questionnaire2-con dl dd{margin:0;height:auto!important;} .questionnaire2-con dl dd:last-child{border-bottom: 0;}.questionnaire2-fot{margin-left: 20px;margin-right: 20px; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;overflow: hidden;background-color: #fff;box-sizing: border-box;border-top:1px solid #f4f4f4;} .questionnaire2-fot a{display: inline-block;float: left; width:50%;padding:15px 0;text-align: center; color: #999;} .questionnaire2-fot a:first-child{border-right:1px solid #f4f4f4;} .questionnaire2-fot #next.w{width:100%;}.questionnaire2-fot #questionbtn{width:50%;border:none;font-size: 17px;padding:15px 0; color: #007aff; }.mui-popover-question{width:86%!important;top:50%;left:50%;transform: translate(-50%,-50%)!important;padding:20px;height:260px;} .mui-popover-question.minheight{height:200px;} .mui-popover-question.minheight2{height:180px;} .mui-popover-question h1{font-size:16px; text-align: center;color: #333;font-weight: normal;line-height: 24px;padding-bottom: 10px;margin:0;} .mui-popover-question h1 img{width:20px;height: 20px;margin-left: 10px;margin-top:1px;} .mui-popover-question h2{font-size:14px;color: #999;padding:5px 0;font-weight: normal;text-align: center;} .mui-popover-question p{font-size:14px;color: #999;text-align: center;} .mui-popover-question p.martop2{padding:15px 0;} .mui-popover-question p.martop span{color: #007aff;font-size:18px;padding:0 3px;} .mui-popover-question .closebox{display: block; width:90px;border:none;border-radius: 5px;color: #fff;background-color: #f68644;margin-left:auto;margin-right:auto;} .mui-popover-question .review{font-size: 12px; display: block;text-align: center;padding-top: 10px;color:#999;}不想復(fù)制的朋友,可以到這里下載個demo看看
總結(jié)
以上是生活随笔為你收集整理的div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AI, 区块链,云计算哪个方向更好呢
- 下一篇: 数据偏度介绍和处理方法