做过的许多小程序里面，有问卷调查版的，但是那是从后台调取题库，然后展示出来的，所以这一次我讲一下如何做一个自主创建的问卷小程序。
首先添加问卷的过程就是创建表单的过程。但是这个表单不仅仅是一个form表单，我先展示一下界面样式图：

创建问卷活动，首先明白步骤：需要有标题、名称介绍、活动介绍、宣传banner，以及涉及到的题目类型，单选多选填空问答，功能上要考虑增加题目，删除题目，必做还是选做。保存草稿和发布。
有了以上的这些思路，我们先来根据构思图来布置前端页面：

<view class="container form_page">
  <view class="form-inner scroll-view">
    <template is="tipItem" data="{{...tip}}" wx:if="{{tip.message}}"></template>
    <view class="form-wrap">
      <view bindtap="upload" class="img-box">
        <image class="tpm-img" mode="{{imgMode}}" src="{{attrInfo.imgSrc}}" wx:if="{{attrInfo.imgSrc}}"></image>
        <image class="tpm-img" mode="{{imgMode}}" src="../../assets/images/form/[email protected]" wx:if="{{!attrInfo.imgSrc}}"></image>
        <view class="change-img" wx:if="{{attrInfo.imgSrc}}">
          <image class="change-photo" src="../../assets/images/form/[email protected]"></image>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="info-list title-item">
        <textarea bindblur="edit" class="title-area" data-type="title" placeholder="活动名称" value="{{attrInfo.title}}"></textarea>
      </view>
      <view class="brief white_bg" wx:if="{{pageShow}}">
        <textarea autoHeight="true" bindblur="edit" bindfocus="onFocus" data-type="brief" placeholder="请填写活动介绍" value="{{attrInfo.brief}}"></textarea>
      </view>
    </view>
    <view class="section problem_list white_bg">
      <view class="info-list flex-wrp" wx:for="{{component}}" wx:key="id">
        <icon bindtap="del" class="del-icon" color="transparent" data-index="{{index}}" size="24" type="clear"></icon>
        <view bindtap="stateGo" class="flex-item" data-index="{{index}}">
          <view class="flex-wrp" wx:if="{{item.title}}">
            <view class="list-item">{{item.title}}</view>
            <view class="next-item"></view>
          </view>
          <view class="flex-wrp" wx:if="{{!item.title}}">
            <view class="list-item list-place">{{item.place}}</view>
            <view class="next-item"></view>
          </view>
        </view>
      </view>
      <picker bindchange="add" class="info-list" mode="selector" range="{{compName}}" value="{{index}}">
        <view class="picker-item">
          <image class="addicon" mode="{{imgMode}}" src="../../assets/images/form/[email protected]"></image>
          <text>增加题目</text>
        </view>
      </picker>
    </view>
    <view class="section brief bottom-brief white_bg" wx:if="{{pageShow}}">
      <input autoHeight="{{autoHeight}}" bindblur="edit" bindfocus="onFocus" data-type="footer_info" placeholder="底部描述（选填）" placeholderClass="holder-item" value="{{attrInfo.footer_info}}"></input>
    </view>
    <view class="other-wrap section ">
      <view class="other-item flex-wrp">
        <view class="flex-item">用户限制
          <span class="text">(选填)</span>
        </view>
        <picker bindchange="changeSet" data-type="userid_limit_num" mode="selector" name="userid_limit_num" range="{{limitList}}" value="{{userIndex}}">
          <view class="picker flex-wrp">
            <view class="flex-item choose-times">{{limitList[userIndex]}}</view>
            <view class="next-item"></view>
          </view>
        </picker>
      </view>
      <view class="other-item flex-wrp">
        <view class="flex-item">IP限制
          <span class="text">(选填)</span>
        </view>
        <picker bindchange="changeSet" data-type="ip_limit_num" mode="selector" name="ip_limit_num" range="{{limitList}}" value="{{IPIndex}}">
          <view class="picker flex-wrp">
            <view class="flex-item choose-times">{{limitList[IPIndex]}}</view>
            <view class="next-item"></view>
          </view>
        </picker>
      </view>
    </view>
  </view>
  <view class="button-wrap">
    <button bindtap="save" class="submit-btn" formType="submit" hoverClass="none">
      <image class="btn-icon" mode="{{imgMode}}" src="../../assets/images/[email protected]"></image>
      发布
    </button>
  </view>
</view>

注意：前端的页面我们同样是按块来组合的，调取小程序的相机功能API来完成图片上传更换，使用text功能组件来完成名称标题创建，使用picker组件来完成题目的创建，同样需要使用数据绑定和列表渲染来完成创建的问卷的ID获取。
这里的IP限制是建立在用户必须使用微信号登陆，登陆失败不能进行任何操作。
页面的JS就要根据我们在构思图中所布置的功能板块来对应添加，需要一一对应，否则最后不能保存不能发布。

var t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
    return typeof t;
  } : function(t) {
    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
  },
  a = require("../../../config/config.js"),
  e = require("../../../config/define.js"),
  i = require("../../../utils/util.js");

Page({
  data: {
    count: 10,
    page: 1,
    mark: e.mark,
    valid: a.define.valid,
    imgMode: e.imgMode,
    compName: [],
    compList: [],
    component: [],
    attrInfo: {
      footer_info: ""
    },
    tid: "",
    id: "",
    type: "",
    autoHeight: false,
    userid_limit_num: 0,
    is_ip: 0,
    ip_limit_num: 0,
    is_login: 0,
    save_loading: "",
    tip: {
      message: "",
      tipType: ""
    },
    pageShow: false,
    add: false,
    userIndex: 0,
    IPIndex: 0,
    limitList: e.limitList,
    info: {},
    times: 0
  },
  onLoad: function(t) {
    console.log("form.js",t)
    this.setData({
      id: t.id,
      tid: t.tid,
      type: t.mark
    });
    var a = i.storage.get(e.curStorage);
    a && this.handleData(a.data);
  },
  onReady: function(t) {
    if (this.getComponet(), !this.data.id) return this.getPreset(), false;
    this.getDetail();
  },
  handleData: function(t) {
    var a = this,
      e = i.formatTime();
    if (this.data.startDate = e.split(" ")[0], a.data.afterSetting)
      for (var r in a.data.afterSetting) a.data.afterName.push(a.data.afterSetting[r].key);
    if (t) {
      if (t.userid_limit_num)
        for (var o in a.data.limitList) a.data.limitList[o] == t.userid_limit_num && (a.data.userIndex = o);
      else a.data.userIndex = 0;
      if (parseInt(t.result_page) && 4 != parseInt(t.result_page) || (t.result_page = 3),
        t.result_page = parseInt(t.result_page), t.ip_limit_num)
        for (var s in a.data.limitList) a.data.limitList[s] == t.ip_limit_num && (a.data.IPIndex = s);
      else a.data.IPIndex = 0;
      if (t.scope_limit && 2 == t.scope_limit && (a.data.authCheck = 1), !t.start_time) {
        var n = i.formatTime("", "yyyy-mm-dd");
        t.start_time = n;
      }
      if (!t.end_time) {
        var d = Date.parse(new Date()) + 6048e5;
        d = i.formatTime(d, "yyyy-mm-dd"), t.end_time = d;
      }
      t.share_link = t.share_link || "", t.other_page = t.other_page || "", this.setData({
        info: t,
        IPIndex: a.data.IPIndex,
        userIndex: a.data.userIndex,
        authCheck: a.data.authCheck,
        afterName: a.data.afterName
      });
    }
  },
  changeSet: function(t) {
    if (t.target.dataset.type && t.detail.value) {
      var a = t.target.dataset.type;
      switch (a) {
        case "userid_limit_num":
          this.data.info[a] = this.data.limitList[t.detail.value], this.setData({
            userIndex: t.detail.value
          }), 0 !== parseInt(t.detail.value) ? this.setData({
            userid_limit_num: t.detail.value,
            is_login: 1
          }) : this.setData({
            userid_limit_num: "0",
            is_login: 0
          });
          break;

        case "ip_limit_num":
          this.data.info[a] = this.data.limitList[t.detail.value], this.setData({
            IPIndex: t.detail.value
          }), 0 !== parseInt(t.detail.value) ? this.setData({
            ip_limit_num: t.detail.value,
            is_ip: 1
          }) : this.setData({
            ip_limit_num: "0",
            is_ip: 0
          });
          break;

        case "result_page":
          this.data.info[a] = this.data.afterSetting[t.detail.value].value, this.setData({
            afterIndex: t.detail.value,
            info: this.data.info
          });
      }
    }
  },
  onShow: function() {
    var t = i.storage.get(e.curStorage);
    return !!t && ("component" == t.type && this.data.component ? (!t.data.index && 0 != t.data.index || "edit" != t.set ? this.data.component.push(t.data) : (this.data.component[t.data.index] = t.data,
      delete this.data.component[t.data.index].index), this.setData({
      component: this.data.component
    }), i.storage.remove(e.curStorage), false) : void("attrInfo" == t.type && this.data.attrInfo && (this.setData({
      attrInfo: t.data
    }), i.storage.remove(e.curStorage))));
  },
  onFocus: function() {
    this.setData({
      autoHeight: true
    });
  },
  getPreset: function() {
    var t = this;
    wx.showToast({
      icon: "loading",
      title: "加载中",
      duration: 400
    });
    var e = [a.define.plat, this.data.mark, "preset", this.data.tid].join("_"),
      r = i.storage.get(e);
    if (r && t.data.tid) t.setData({
      attrInfo: r.preset,
      component: r.component
    }), setTimeout(function() {
      t.setData({
        pageShow: true
      });
    }, 200), wx.hideToast();
    else if ("154" === t.data.tid) {
      var o = [{
          form_type: "radio",
          place: "单选题",
          node: "survey",
          type: "standard",
          options: []
        }, {
          form_type: "checkbox",
          node: "survey",
          place: "多选题",
          type: "standard",
          options: []
        }, {
          form_type: "input",
          node: "survey",
          place: "填空题",
          type: "standard",
          options: []
        }, {
          form_type: "textarea",
          node: "survey",
          place: "问答题",
          type: "standard",
          options: []
        }],
        s = {
          brief: "",
          title: "",
          footer_info: "",
          node: "survey"
        };
      t.setData({
        attrInfo: s,
        component: o
      }), wx.hideToast();
    }
    i.http(a.getUrl("template_preset", "public"), {
      template_id: t.data.tid,
      mark: t.data.mark,
      is_app: 1
    }, {
      success: function(a) {
        if (wx.hideToast(), 200 == a.statusCode) {
          var r = a.data;
          (r.ErrorText || r.ErrorCode) && t.toptip(r.ErrorText, "error"), r && r.preset && (r.preset.imgSrc = i.createImgsrc(r.preset.indexpic, {
              width: 750
            }), "154" === r.preset.tid && r.component && !r.component[0] && (r.component = t.data.component),
            r.preset.footer_info = r.preset.footer_info || "", t.setData({
              attrInfo: r.preset,
              component: r.component
            }), setTimeout(function() {
              t.setData({
                pageShow: true
              });
            }, 200), i.storage.set(e, r, t.data.valid));
        }
      }
    });
  },
  getDetail: function() {
    var t = this;
    wx.showToast({
      icon: "loading",
      title: "加载中",
      duration: 400
    }), i.http(a.getUrl("detail", "form"), {
      id: this.data.id,
      mark: this.data.mark,
      is_app: 1
    }, {
      success: function(a) {
        if (200 == a.statusCode) {
          var e = a.data;
          (e.ErrorText || e.ErrorCode) && (t.toptip(e.ErrorText, "error"), wx.hideToast()),
          e && e.id && (e.imgSrc = i.createImgsrc(e.indexpic[0], {
              width: 750
            }), e.footer_info = e.footer_info ? e.footer_info : "", "0" === e.is_ip && (e.ip_limit_num = 0),
            t.setData({
              attrInfo: e,
              IPIndex: e.ip_limit_num,
              userIndex: e.userid_limit_num,
              ip_limit_num: e.ip_limit_num,
              userid_limit_num: e.userid_limit_num
            }), t.getProblems());
        }
      }
    });
  },
  getComponet: function() {
    var e = this,
      r = [a.define.plat, e.data.mark, "component", e.data.tid].join("_"),
      o = i.storage.get(r);
    if (o && o.standard) {
      if ("object" == t(o.standard))
        for (var s in o.standard) e.data.compName.push(o.standard[s].name),
          e.data.compList.push(o.standard[s]);
      return e.setData({
        compList: e.data.compList,
        compName: e.data.compName
      }), false;
    }
    i.http(a.getUrl("template_component", "public"), {
      template_id: e.data.tid,
      mark: e.data.mark,
      need_other: 1
    }, {
      success: function(a) {
        if (200 == a.statusCode) {
          var o = a.data;
          if ((o.ErrorText || o.ErrorCode) && e.toptip(o.ErrorText, "error"), o && o.standard) {
            if ("object" == t(o.standard))
              for (var s in o.standard) e.data.compName.push(o.standard[s].name),
                e.data.compList.push(o.standard[s]);
            e.setData({
              compName: e.data.compName
            }), i.storage.set(r, o, e.data.valid);
          }
        }
      }
    });
  },
  getProblems: function() {
    var t = this;
    i.http(a.getUrl("problems", "form"), {
      id: this.data.id,
      mark: this.data.mark
    }, {
      success: function(a) {
        if (200 == a.statusCode) {
          var e = a.data;
          (e.ErrorText || e.ErrorCode) && (t.toptip(e.ErrorText, "error"), wx.hideToast()),
          e && e.data && e.data[0] && (t.setData({
            component: e.data
          }), setTimeout(function() {
            t.setData({
              pageShow: true
            });
          }, 200), wx.hideToast());
        }
      }
    });
  },
  upload: function() {
    var a = this;
    wx.chooseImage({
      success: function(e) {
        var r = e.tempFilePaths,
          o = {
            mark: a.data.mark
          };
        i.fileUpload(r, o, function(e) {
          e && "object" == (void 0 === e ? "undefined" : t(e)) ? e.obj && e.obj.filename && (a.data.attrInfo.indexpic = e.obj,
            a.data.attrInfo.imgSrc = i.createImgsrc(e.obj, {
              width: 750
            }), a.setData({
              attrInfo: a.data.attrInfo
            })) : a.toptip(e, "error");
        });
      }
    });
  },
  del: function(t) {
    var a = this;
    if (this.data.component.length < 3) return a.toptip("题目个数不能少于2个", "warnning"), false;
    wx.showModal({
      title: "删除提醒",
      content: "您确定要删除该题？",
      cancelColor: "#666",
      confirmColor: "#ff637c",
      success: function(e) {
        if (e.confirm) {
          var i = t.target.dataset.index;
          a.data.component.splice(i, 1), a.setData({
            component: a.data.component
          });
        }
      }
    });
  },
  add: function(t) {
    var a = this;
    t.detail.value && i.storage.remove(e.curStorage, function(e) {
      if (e && a.data.compList) {
        var i = a.data.compList[t.detail.value];
        wx.navigateTo({
          url: "../" + i.form_type + "/" + i.form_type + "?form_type=" + i.form_type
        });
      }
    });
  },
  edit: function(t) {
    this.data.tip.message && this.data.tip.curType == t.target.dataset.type && this.setData({
      tip: {
        message: "",
        tipType: "",
        curType: ""
      }
    }), this.data.attrInfo[t.target.dataset.type] = t.detail.value;
  },
  stateGo: function(t) {
    var a = t.currentTarget.dataset.index,
      r = this,
      o = this.data.component[a];
    this.data.component[a].index = a;
    var s = {
      data: this.data.component[a],
      set: "edit",
      type: "component"
    };
    i.storage.set(e.curStorage, s), wx.navigateTo({
      url: "../" + o.form_type + "/" + o.form_type + "?id=" + r.data.id
    });
  },
  setting: function() {
    var t = {
      data: this.data.attrInfo,
      set: "edit",
      type: "attrInfo"
    };
    i.storage.set(e.curStorage, t), wx.navigateTo({
      url: "../setting/setting"
    });
  },
  save: function() {
    var t, e = this;
    if (0 === this.data.times) this.setData({
      times: 1
    });
    else if (1 === this.data.times) return;
    if (!this.data.attrInfo.title) return this.toptip("标题不能为空", "error", "title"), this.setData({
      times: 0
    }), false;
    this.setData({
      save_loading: true
    }), this.data.id ? (t = a.getUrl("update", "form"), this.data.attrInfo.mark = this.data.attrInfo.mark || this.data.mark,
      this.data.attrInfo.id.length < 10 && wx.getStorage({
        key: "id",
        success: function(t) {
          e.data.attrInfo.id = t.data;
        }
      })) : (t = a.getUrl("create", "form"), this.data.attrInfo.template_id = this.data.attrInfo.tid,
      this.data.attrInfo.mark = this.data.attrInfo.node || this.data.mark), this.data.attrInfo.problems = this.data.component;
    for (var r = this.data.attrInfo.problems.length - 1; r >= 0; r--) this.data.attrInfo.problems[r].title || this.data.attrInfo.problems.splice(r, 1);
    if (this.data.attrInfo.is_login = this.data.is_login, this.data.attrInfo.userid_limit_num = this.data.userid_limit_num,
      this.data.attrInfo.ip_limit_num = this.data.ip_limit_num, this.data.attrInfo.is_ip = this.data.is_ip,
      this.data.attrInfo.template_id || (this.data.attrInfo.template_id = "153"), this.data.attrInfo.problems.length < 2) return this.toptip("最少两个题目", "error", "title"), false;
    wx.showToast({
      icon: "loading",
      title: "创建中",
      duration: 400
    }), i.http(t, this.data.attrInfo, {
      method: "post",
      success: function(t) {
        if (200 == t.statusCode) {
          var a = t.data;
          (a.ErrorText || a.ErrorCode) && (wx.hideToast(), "TITLE" === a.ErrorCode && (a.ErrorText = "请填写"),
            e.toptip(a.ErrorText || "访问错误", "error"), e.setData({
              save_loading: false
            })), a && a.id && (e.setData({
            id: a.id
          }), e.issue(e.data.attrInfo));
        }
      }
    });
  },
  issue: function(t) {
    var e = this;
    wx.showToast({
      icon: "loading",
      title: "发布中",
      duration: 400
    }), i.http(a.getUrl("survey_generate", "form"), {
      id: this.data.id,
      mark: t.mark,
      stop: 0,
      is_wxapplet: 1
    }, {
      success: function(t) {
        if (200 == t.statusCode) {
          var a = t.data;
          if ((a.ErrorText || a.ErrorCode) && (e.toptip(a.ErrorText || "访问错误", "error"), e.setData({
              save_loading: false
            })), a && a.url) {
            e.setData({
              save_loading: false,
              times: 0
            });
            var i = "title=" + e.data.attrInfo.title + "&imgUrl=" + e.data.attrInfo.imgSrc + "&mark=" + e.data.attrInfo.mark + "&id=" + e.data.id + "&url=" + a.url;
            wx.navigateTo({
              url: "../result/result?" + i
            });
          }
        }
      }
    });
  },
  onShareAppMessage: function() {
    return {
      title: this.data.attrInfo.title,
      desc: this.data.attrInfo.brief,
      path: "pages/form/form/index?tid=" + this.data.tid + "mark=" + this.data.mark
    };
  },
  toptip: function(t, a, e) {
    this.setData({
      tip: {
        message: t,
        tipType: a,
        curType: e
      },
      times: 300
    });
    var i = this;
    setTimeout(function() {
      i.setData({
        tip: {
          message: "",
          tipType: "",
          curType: ""
        }
      });
    }, 600);
  }
});

当然，以上的只是简化的创建思路和编写思路，如果各位需要深入探讨，可以在评论区回复，最后附上样式表：

.form_page {
  position: relative;
}

.form_page .form-inner {
  background-color: #f8f8f8;
  font-size: 32rpx;
}

.form_page .tpm-img, .img-box {
  width: 100%;
  height: 420rpx;
  overflow: hidden;
  position: relative;
}

.change-img {
  width: 95rpx;
  height: 95rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: absolute;
  right: 30rpx;
  bottom: 15rpx;
}

.change-photo {
  width: 58rpx;
  height: 42rpx;
  margin-top: 24rpx;
}

.addicon {
  width: 35rpx;
  height: 35rpx;
  margin-right: 20rpx;
  position: absolute;
  left: 10rpx;
  top: 40rpx;
}

.btn-icon {
  width: 35rpx;
  height: 43rpx;
  margin-top: 4rpx;
}

.img_defalue {
  width: 100%;
  height: 377rpx;
  background: no-repeat #f5f9fa;
  background-position: center;
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/max_default-2x.png");
  background-size: auto 250rpx;
}

rich-text {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-img {
  width: 100%;
  height: 420rpx;
}

.form_page .flex-wrp .flex-item {
  width: 100%;
  height: 100%;
}

.section {
  padding: 0 30rpx;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.choose-times {
  color: #999;
}

.other-wrap {
  border-bottom: none;
  padding-bottom: 125rpx;
}

.title {
  background-color: #fff;
}

.info-list.title-item {
  font-size: 36rpx;
  border-top: 1px solid #eee;
}

.title-area {
  padding: 10rpx;
}

.info-list {
  height: 114rpx;
  line-height: 40rpx;
}

.brief {
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #999;
  border-top: 1px solid #eee;
}

.bottom-brief {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  min-height: 100rpx;
  color: #333;
  font-size: 30rpx;
  padding: 30rpx;
}

.problem_list .info-list {
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7eb;
}

.problem_list .del-icon, .del-icon:focus {
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/form/del-2x.png");
  background-image: -webkit-image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/del-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/del-3x.png") 3x);
  background-image: image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/del-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/del-3x.png") 3x);
  background-size: 38rpx;
  background-repeat: no-repeat;
  background-position: center;
}

.problem_list .del-icon:focus {
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/form/del_hover-2x.png");
  background-image: -webkit-image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/del_hover-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/del_hover-3x.png") 3x);
  background-image: image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/del_hover-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/del_hover-3x.png") 3x);
}

.problem_list .info-list .list-item {
  height: 100%;
  line-height: 114rpx;
  flex: 1;
  padding-left: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  max-width: 588rpx;
}

.list-place {
  color: #999;
}

.other-item {
  height: 120rpx;
  line-height: 120rpx;
  border-bottom: 1px solid #eee;
  font-size: 32rpx;
  color: #333;
}

.other-item:last-child {
  border-bottom: none;
}

.text {
  font-size: 24rpx;
  color: #999;
  margin-left: 15rpx;
}

.picker {
  width: 100%;
  text-align: right;
  padding-right: 80rpx;
}

.next-item {
  height: 115rpx;
  width: 80rpx;
  text-align: center;
  line-height: 115rpx;
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/form/next-2x.png");
  background-image: -webkit-image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/next-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/next-3x.png") 3x);
  background-image: image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/next-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/next-3x.png") 3x);
  background-size: 16rpx;
  background-repeat: no-repeat;
  background-position: 26rpx center;
  position: absolute;
  right: 17rpx;
}

.problem_list picker.info-list {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  height: 124rpx;
}

.picker-item {
  color: #48ace8;
  width: 100%;
  padding-left: 65rpx;
  position: relative;
  line-height: 124rpx;
}

.holder-item {
  color: #b5b5b5;
}

.dark {
  color: #999;
}

.button-wrap {
  font-size: 36rpx;
}

button, button::after {
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

button::after {
  width: 40rpx !important;
  height: 40rpx !important;
}

.setting-icon, .issue-icon {
  vertical-align: middle;
  width: 40rpx;
  height: 40rpx;
  margin-top: -7rpx;
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/form/setting-2x.png");
  background-image: -webkit-image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/setting-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/setting-3x.png") 3x);
  background-image: image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/setting-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/setting-3x.png") 3x);
  background-size: 40rpx;
  background-repeat: no-repeat;
  background-position: center;
}

.issue-icon {
  background-image: url("//pimg.ixiuzan.cn/wxadoc/images/form/issue-2x.png");
  background-image: -webkit-image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/issue-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/issue-3x.png") 3x);
  background-image: image-set(url("//pimg.ixiuzan.cn/wxadoc/images/form/issue-2x.png") 2x, url("//pimg.ixiuzan.cn/wxadoc/images/form/issue-3x.png") 3x);
}