vue实现移动端手机端问卷调查答题效果代码
代码语言:html
所属分类:表单美化
代码描述:vue实现移动端手机端问卷调查答题效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 阻止放大缩小 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mintui.min.css"> <style> .content { background-color: #a2c9d8; } .main-list { position: relative; } .problemList { float: left; } .subject { margin: 1rem 1.5rem; color: #fff; } .subject h3 { font-size: 0.8rem; } .subject p { font-size: 0.75rem; margin: 0.3rem 0.75rem; line-height: 1.2rem; } .option { margin: 0.3rem 0.5757rem; } .option li { margin: 0.3rem 1rem 0.5rem; width: 6.8rem; position: relative; display: inline-flex; } .option li.on { background-color: #44b1c9; color: #fff; border: 0.1rem solid #44b1c9; } .option li span { width: 6rem; text-align: center; border-radius: 0.5rem; border: 0.1rem solid #fff; color: #fff; font-size: 0.7rem; padding: 0.3rem; display: block; } .option li .on span { background-color: #44b1c9; color: #fff; border: 0.1rem solid #44b1c9; } .btn-groups { width: 100%; height: 3rem; position: fixed; bottom: 0; left: 0; background-color: rgba(162,201,216,.8); } .btn-groups-height { height: 3rem; } .submit { display: block; float: left; background-color: #44b1c9; color: #fff; width: 6rem; font-size: 0.7rem; padding: 0.5rem 0; text-align: center; border-radius: 0.15rem; margin: 0.5rem 2rem; } .submit:active { background: rgba(68,177,201,.5); } .btn-groups .prev { position: absolute; left: 0; bottom: 0; } .btn-groups .next,.btn-groups .save { position: absolute; right: 0; bottom: 0; } input[type='checkbox'] { width: 100%; height: 100%; -webkit-appearance: checkbox; position: absolute; opacity: 0; top: 0; left: 0; } input[type='radio'] { width: 100%; height: 100%; -webkit-appearance: radio; position: absolute; opacity: 0; top: 0; left: 0; } input[type='checkbox']:checked + span,input[type='radio']:checked + span { background-color: #44b1c9; color: #fff; border: 0.1rem solid #44b1c9; } /*动画*/ .slide-enter,.slide_back-enter { position: absolute; width: 100%; } .slide-leave,.slide_back-leave { position: absolute; width: 100%; } .slide-enter-active,.slide_back-enter-active { transition: all 0.3s linear; } .slide-leave-active { position: absolute; transition: all 0.3s linear; transform: translate(-100%); } .slide-enter { transform: translateX(100%); } .slide_back-leave-active { position: absolute; transition: all 0.3s linear; transform: translate(100%); } .slide_back-enter { transform: translateX(-100%); } /*修改默认placeholder中的文字 颜色*/ :-moz-placeholder { color: #9e9e9e; } ::-moz-placeholder { color: #9e9e9e; } input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #9e9e9e; } input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #9e9e9e; } /*------- RESPONSIVE -------*/ .el-menu-item.is-active { background: #f0f0f0; } .el-table__header th { background-color: #f5f7fa; color: #333; font-weight: bold; } /*app样式*/ #app { /*background: url(./static/images/bg.png) no-repeat; background-size: 100% 100%; */ background-color: #f5f5f5; } .content { min-height: 100%; overflow: hidden; height: 100vh; } .red { color: red!important; font-weight: bold; } .header .mint-header { background-color: #44b1c9; font-size: 0.9rem; height: 2rem; } .header .mint-header-title { line-height: 2rem; } .header .mint-header-button > a:active { background-color: #44b1c9!important; } .header .mint-header .mint-button { height: 2rem; } .header .mint-header .mintui { font-size: 0.7rem; } .header .mint-header .mint-button-text { font-size: 0.7rem; } .header .mint-header-height { height: 2rem; } .mint-popup .popup-ul { display: flex; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .mint-popup .popup-ul li:active { background-color: #ddd; } .picker-sure { flex: 1; width: 50%; text-align: center; line-height: 1rem; font-size: 0.8rem; padding: 0.5rem 0; background-color: #eee; color: #707274; border-right: 1px solid #ddd; } .picker-cancel { flex: 1; width: 50%; text-align: center; line-height: 1rem; font-size: 0.8rem; padding: 0.5rem 0; right: 0; background-color: #eee; color: #26a2ff; } .dataMore { text-align: center; font-size: 0.7rem; padding: 0.5rem 0 1rem; color: #1b1b1b; } .dataMore .conter { display: table; margin: 0 auto; } .dataMore .conter .icon { display: inline-block; vertical-align: middle; } .dataMore .conter .text { display: inline-block; margin-left: 5px; vertical-align: middle; } .details-popup .mint-popup { width: 100%; } .mint-footer-height { height: 55px; } .mint-loadmore-bottom { font-size: 14px; } .btn { position: relative; color: #fff; text-decoration: none; background-color: #2c65a8; font-family: "Microsoft YaHei", 微软雅黑, 宋体; font-weight: 700; font-size: 3em; display: block; padding: 4px; border-radius: 8px; /* let's use box shadows to make the button look more 3-dimensional */ box-shadow: 0px 3px 0px rgba(44,101,185, 1), 0px 9px 15px rgba(0, 0, 0, .5); margin: 100px auto; width: 160px; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; transition: all .1s ease; } .btn:active { box-shadow: 0px 3px 0px rgba(44,101,185, 0.5), 0px 3px 6px rgba(0, 0, 0, .9); position: relative; top: 1px; } .readonly { background-color: rgba(220,220,220,.5); } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rem.js"></script> </head> <body> <div id="app"> <div class="content"> <div class="header"> <header class="mint-header is-fixed"> <div class="mint-header-button is-left"> <a href="javascript:history.back(-1)" class=""> <button class="mint-button mint-button--default mint-button--normal"> <span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text">返回</label> </button> </a> </div> <h1 class="mint-header-title">健康评估量表</h1> <div class="mint-header-button is-right"> <button class="mint-button mint-button--default mint-button--normal"> <label class="mint-button-text">{{dataIndex+1}}/{{data.length}}</label> </button> </div> </header> <div class="mint-header-height"></div> </div> <div class="main"> <form id="form1" runat="server"> <div class="main-list clearfix"> <transition-group :name="transitionName"> <div class="problemList" v-show="dataIndex === index" v-for="(item, index) in data" :key="index"> <div class="subject"> <h3>{{index+1}}.{{item.subject.title}}</h3> <p> {{item.subject.describe}} </p> </div> <div class="option"> <ul class="clearfix"> <!-- 多选 --> <li v-if="item.multiSelect == 2" v-for="(li, liIndex) in item.subject.option" :key="liIndex" @click="choiceCheck(index,liIndex)"> <input type="checkbox" :value="li" v-model="item.checkbox" /> <span>{{li}}</span> </li> <!-- 单选 --> <li v-if="item.multiSelect == 0" v-for="(li, liIndex) in item.subject.option" :key="liIndex" @click="choiceRadio(index,liIndex)"> <input type="radio" :value="li" v-model="item.checkbox" /> <span>{{li}}</span> </li> <!-- 组合单选 --> <li v-if="item.multiSelect == 1" v-for="(li, liIndex) in item.subject.option" :key="liIndex" style="width: 15.6rem;"> <div v-for="(liChild, liChildIndex) in li.groups" :key="liChildIndex" :style="liChildIndex%2 == 0 ? 'margin-right: 1rem' : 'margin-left: 1rem;'" style="position: relative;" @click="choicCompose(index,liIndex,liChildIndex)" ref="childItem"> <span>{{liChild}}</span> </div> </li> </ul> </div> </div> </transition-group> </div> <div class="btn-groups-height"></div> <div class="btn-groups clearfix"> <span v-show="isPrev" class="submit prev" @click="prev">上一题</span> <span v-show="isNext" class="submit next" @click="next">下一题</span> <span v-show="isSubmit" class="submit save" @click="save">提交</span> </div> </form> </div> </div> </div> </body> </html> <script> new Vue({ el: '#app', data: { transitionName: 'slide', data: [{ subject: { title: '现患疾病', describe: '您目前是否患有下列疾病?(多选)', option: ['无', '糖尿病', '高血压', '肥胖症', '冠心病', '痛风', '偏头痛', '中风', '阻塞性肺病', '抑郁症', '胃癌', '直结肠癌', '肺癌', '脂肪肝', '其它恶性瘤'], //选项 male: ['前列腺癌'], female: ['宫颈癌', '乳腺癌', '卵巢癌', '子宫癌'], }, checkbox: [], multiSelect: 2, //2为多选、0为单选、1为组合单选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '家族病史', describe: '您的父母或祖父母等直系亲属,是否患有下列疾病?(多选)', option: ['无', '糖尿病', '高血压', '肥胖症', '冠心病', '痛风', '偏头痛', '中风', '阻塞性肺病', '抑郁症', '胃癌', '直结肠癌', '肺癌', '脂肪肝', '其它恶性瘤'], //选项 male: ['前列腺癌'], female: ['宫颈癌', '乳腺癌', '卵巢癌', '子宫癌'], }, checkbox: [], multiSelect: 2, //是否是多选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '主食摄入', describe: '您平均每天主食的摄入量是?(单选)', option: ['小于1碗', '1-2碗', '3-4碗', '5-6碗', '大于6碗',], //选项 }, checkbox: [], multiSelect: 0, //是否是多选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '饮食偏好', describe: '请选择下方您偏好的口味或食品类别(多选)', option: ['无', '甜食', '辛辣', '烫食', '咸食', '腌制', '硬食', '油腻', '煎炸', '烟熏', '高脂', '食动物内脏',]//选项 }, checkbox: [], multiSelect: 2, //是否是多选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '饮食习惯', describe: '您是否存在下列饮食习惯?(多选)', option: ['无', '经常吃宵夜', '不吃或基本不吃早餐', '暴饮暴食', '饮食速度过快', '饭后立即运动',]//选项 }, checkbox: [], multiSelect: 2, //是否是多选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '出行方式', describe: '您日常的出行方式是?(单选)', option: ['很少出行', '自行车', '步行', '乘车或开车', '公交或摩托']//选项 }, checkbox: [], multiSelect: 0, //是否是多选 isSelect: false, //判断是否选中其中一个 isFirst: true, //判断是否点击多选第一个按钮 isAddData: false, //判断是否已加载新数据 }, { subject: { title: '运动情况', describe: '您平均每周运动锻炼的时间总和是?(单选)', option: ['不锻炼', '小于1小时', '1-3小时', '4-5小时', '大于5小时']//选项 }, checkbox: [], multiSelect: 0, //是否是多选 isSelect: false, //.........完整代码请登录后点击上方下载按钮下载查看
网友评论0