PC端预览手机效果

``![在这里插入图片描述] 效果图

在这里插入代码片
<template>
  <div class="main-con">
    <mainTopBack>
      <el-button type="primary" class="el-icon-back" v-on:click="$openPage('/wenjuandiaochaHome/newQuestionServer','replace')"> 返回</el-button>
    </mainTopBack>
    <div class="table-box">
      <div class="preview-box">
        <!-- v-for="item in allPageList" -->
        <div class="answer">
          <div class="dataList">
            <p class="fenyejieshao">第一部分</p>
            <div style="color:#0a0a0a;margin-top:15px;font-size:16px" v-for="(item,i) in 1">
              <p style="font-size:16px">
                <span style="color:red">*</span>{{i+1}}.标题
              </p>
              <div class="xuanxiang">
                <!-- 单选 -->
                <van-radio-group v-model="radio">
                  <div style="display:flex;width:100%; display: -webkit-flex;flex-wrap: wrap;margin-bottom:10px;padding-left:10px" v-for="item in 4">
                    <van-radio name="2" disabled checked-color="#217132">
                      单选框单选框单选框
                    </van-radio>
                    <input type="text" readonly style="margin-left:15px;border:1px solid #eee;padding:3px 10px;border-radius:5px" placeholder="请输入">
                  </div>
                </van-radio-group>
                <!-- 多选 -->
                <van-checkbox-group v-model="result">
                  <div style="display:flex;width:100%; display: -webkit-flex;flex-wrap: wrap;margin-bottom:10px;padding-left:10px" v-for="item in 4">
                    <van-checkbox name="a" disabled checked-color="#217132" shape="square">1</van-checkbox>
                    <input type="text" readonly style="margin-left:22px;border:1px solid #eee;padding:3px 10px;border-radius:5px" placeholder="请输入">
                  </div>
                </van-checkbox-group>
                <!-- 填空 -->
                <van-field v-model="radio2" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit style="font-size:16px;width:90%;margin-bottom:5px;border:1px solid #eee;border-radius:3px;margin-left:5%;padding:5px" />
              </div>
            </div>
          </div>
          <!-- 底部 -->
          <p style="text-align:center;font-size:14px;margin:10px 0">【1/4页】</p>
          <div class="footerDiv">下一页</div>
          <div class="footerDiv">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mainTopBack from "@/components/mainTopBack/index.vue";
import service from "@/api/wenjuan"; //
export default {
  components: {
    mainTopBack
  },
  data() {
    return {
      allPageList: JSON.parse(sessionStorage.getItem("allPageList")),
      result: ["a"],
      radio: 1,
      value: "",
      radio2: "我"
    };
  },
  mounted() {}
};
</script>

<style scoped>
.preview-box {
  width: 438px;
  margin: auto;
  height: 762px;
  background: url("/static/img/11.png") no-repeat;
  background-size: 438px 762px;
  padding: 40px 0 0 59px;
}
.answer {
  padding: 10px;
  width: 320px;
  height: 620px;
  overflow-y: auto;
}
.fenyejieshao {
  padding-bottom: 10px;
  font-size: 15px;
  text-align: center;
  border-bottom: 1px dashed #ccc;
  color: #217132;
}
.xuanxiang {
  margin-top: 10px;
  margin-left: 15px;
  padding: 10px 10px 10px 0;
  border-radius: 5px;
  border: 1px dashed #217132;
}
.footerDiv {
  width: 90%;
  margin: 10px auto;
  background: #217132;
  color: #fff;
  text-align: center;
  font-size: 18px;
  padding: 10px 0;
  border-radius: 5px;
}
</style>