diff --git a/components.d.ts b/components.d.ts
index f15d4ea..edf019e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,11 +19,18 @@ declare module 'vue' {
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
+    VanDatePicker: typeof import('vant/es')['DatePicker']
+    VanDatetimePicker: typeof import('vant/es')['DatetimePicker']
     VanDialog: typeof import('vant/es')['Dialog']
     VanDivider: typeof import('vant/es')['Divider']
+    VanFiel: typeof import('vant/es')['Fiel']
     VanField: typeof import('vant/es')['Field']
+    VanGrid: typeof import('vant/es')['Grid']
+    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPicker: typeof import('vant/es')['Picker']
+    VanPikcer: typeof import('vant/es')['Pikcer']
     VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
@@ -33,6 +40,8 @@ declare module 'vue' {
     VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTimePicker: typeof import('vant/es')['TimePicker']
+    YLPicker: typeof import('./src/components/YLPicker.vue')['default']
     YLSelect: typeof import('./src/components/YLSelect.vue')['default']
   }
 }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 9c41435..603da52 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,6 +1,7 @@
 @import 'base';
 @import '../../fonts/iconfont.css';
 @import 'vant';
+@import '../../fonts/moblie/iconfont.css';
 
 a,
 .green {
diff --git a/src/components/YLPicker.vue b/src/components/YLPicker.vue
new file mode 100644
index 0000000..9cabea6
--- /dev/null
+++ b/src/components/YLPicker.vue
@@ -0,0 +1,698 @@
+<!-- vant的picker组件只支持年月日，有些情况下需要一个能支持选择年月日时分秒的picker组件 -->
+<!-- 本组件可支持“年月日时分秒”任意格式（dateFormat） -->
+<template>
+  <!-- 弹出层 -->
+  <van-picker
+    ref="dateTimePicker"
+    v-model="data.selectedValues"
+    :title="title"
+    :columns="data.columns"
+    swipe-duration="500"
+    @cancel="cancelOn"
+    @confirm="onConfirm"
+    @change="onChange"
+  />
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+
+// 所有可能用到的日期格式
+type dateFormat =
+  | 'YYYY'
+  | 'YYYY-MM'
+  | 'YYYY-MM-DD'
+  | 'YYYY-MM-DD HH'
+  | 'YYYY-MM-DD HH:mm'
+  | 'YYYY-MM-DD HH:mm:ss';
+/** 声明props类型 */
+interface Props {
+  // 传入的显示隐藏状态
+  showPicker: boolean;
+  // picker标题
+  title?: string;
+  // 传入的日期值
+  values: string;
+  // 自定义格式
+  format?: dateFormat;
+  // 自定义单位
+  units?: string[];
+  // 最小日期时间
+  minDate?: string;
+  // 最大日期时间
+  maxDate?: string;
+}
+
+interface IntColumnsItem {
+  text: string;
+  value: string;
+  children?: IntColumnsItem[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showPicker: false,
+  title: '请选择日期',
+  values: '',
+  format: 'YYYY-MM-DD HH:mm',
+  units: () => [],
+  minDate: '',
+  maxDate: ''
+});
+
+// 定义要向父组件传递的事件
+const emit = defineEmits(['cancel', 'confirm']);
+
+const dateTimePicker = ref(null);
+
+// 定义数据
+const data = reactive<{
+  isPicker: boolean;
+  columns: IntColumnsItem[];
+  selectedValues: any[];
+  tempSelectedValues: any[];
+}>({
+  // 是否显示弹出层
+  isPicker: false,
+  // 所有时间列
+  columns: [],
+  // 控件选择的时间值
+  selectedValues: [],
+  // 临时数据,数据变化过程中选中的值
+  tempSelectedValues: []
+});
+// 获取数据类型
+const getType = (v: any) => {
+  return Object.prototype.toString.call(v).slice(8, -1).toLowerCase();
+};
+// 返回指定格式的日期时间
+const getDateByFormat = (date: Date | string, fmt: dateFormat) => {
+  const thisDateType = getType(date);
+  if (date === '' || (thisDateType !== 'date' && thisDateType !== 'string')) {
+    date = new Date();
+  } else if (thisDateType === 'string') {
+    date = new Date((date as string).replace(/-/g, '/'));
+  } else {
+    date = new Date(date);
+  }
+  const Y = date.getFullYear();
+  const M = date.getMonth() + 1;
+  const D = date.getDate();
+  const h = date.getHours();
+  const m = date.getMinutes();
+  const s = date.getSeconds();
+  // 个位数补0
+  // 月份比实际获取的少1，所以要加1
+  const _M = M < 10 ? `0${M}` : M.toString();
+  const _D = D < 10 ? `0${D}` : D.toString();
+  const _h = h < 10 ? `0${h}` : h.toString();
+  const _m = m < 10 ? `0${m}` : m.toString();
+  const _s = s < 10 ? `0${s}` : s.toString();
+  return fmt
+    .replace(/YYYY/g, Y.toString())
+    .replace('MM', _M)
+    .replace('DD', _D)
+    .replace('HH', _h)
+    .replace('mm', _m)
+    .replace('ss', _s);
+};
+
+// 比较两个日期大小
+const dateRangeLegal = (sDate: string | Date, eDate: string | Date) => {
+  if (!sDate || !eDate) {
+    return false;
+  }
+  // 补全模板
+  const complateStr = '0000-01-01 00:00:00';
+  // 兼容ios
+  if (typeof sDate === 'string') {
+    sDate = (sDate + complateStr.slice(sDate.length)).replace(/-/g, '/');
+  }
+  if (typeof eDate === 'string') {
+    eDate = (eDate + complateStr.slice(eDate.length)).replace(/-/g, '/');
+  }
+  return new Date(sDate) <= new Date(eDate);
+};
+
+/**
+ * 空闲位自动补全0
+ * @param num 数据
+ * @param len 设定长度
+ */
+const autoFillZero = (num: number, len: number) => {
+  return (Array(len).join('0') + num).slice(-len);
+};
+
+// 获取某年某月有多少天
+const getCountDays = (year: number, month: number) => {
+  // 获取某年某月多少天
+  const day = new Date(year, month, 0);
+  return day.getDate();
+};
+
+// 获取最小时间范围
+const getMinDateLimit = computed(() => {
+  return getDateByFormat(
+    props.minDate && props.minDate.length >= 0
+      ? props.minDate
+      : `${new Date().getFullYear() - 10}-01-01 00:00:00`,
+    props.format
+  );
+});
+
+// 获取最大时间范围
+const getMaxDateLimit = computed(() => {
+  const thisMax = getDateByFormat(
+    props.maxDate && props.maxDate.length >= 0
+      ? props.maxDate
+      : `${new Date().getFullYear() + 10}-12-31 23:59:59`,
+    props.format
+  );
+  const tempStr = '0000-12-31 23:59:59';
+  const result =
+    props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
+      ? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
+      : thisMax;
+  return result.slice(0, props.format.length);
+});
+
+function onChange({
+  selectedValues,
+  columnIndex
+}: {
+  // 所有列选中值
+  selectedValues: any[];
+  // 当前变化列索引
+  columnIndex: number;
+}) {
+  // 更新渲染变化的列之后的所有列（columnIndex）
+  const splitArr = ['-', '-', ' ', ':', ':'];
+  let iiindex = -1;
+  const changeValue = selectedValues.reduce((a, b) => {
+    iiindex += 1;
+    return a + splitArr[iiindex] + b;
+  });
+  // 当前列变化后此时此刻时间
+  // 更新当前列之后的所有列（包括当前列）
+  const updateColumns: function[] = [
+    renderYearColumns,
+    renderMonthColumns,
+    renderDayColumns,
+    renderHourColumns,
+    renderMinuteColumns,
+    renderSecondColumns
+  ];
+  updateColumns[columnIndex] &&
+    updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
+}
+
+// 渲染全部列
+const getcolumns = () => {
+  // 先清空全部列
+  data.columns = [];
+  // 清空年月日时分秒时间值
+  data.tempSelectedValues = [];
+  data.selectedValues = [];
+  // 获取props.values转换成指定格式后的日期时间
+  const defaultDateTime = getDateByFormat(props.values, props.format);
+  let usefullDateTime = defaultDateTime;
+  if (!dateRangeLegal(getMinDateLimit.value, defaultDateTime)) {
+    usefullDateTime = getMinDateLimit.value;
+  } else if (!dateRangeLegal(defaultDateTime, getMaxDateLimit.value)) {
+    usefullDateTime = getMaxDateLimit.value;
+  }
+  // 渲染修正“年”列
+  renderYearColumns(usefullDateTime, getMinDateLimit.value, getMaxDateLimit.value, true);
+};
+/**
+ * 渲染年所在列，并自动修正在“年”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderYearColumns = (v: string, s: string, e: string, isFirst: boolean) => {
+  // 设置年范围
+  // 获取前后十年数组
+  const listArr: any = [];
+  const Currentday = new Date().getFullYear();
+  // 最小月份
+  let forStart = 2020;
+  // 最小月份
+  let forEnd = 2040;
+  if (s && e) {
+    const startYearLimit = s.slice(0, 4);
+    const endYearLimit = e.slice(0, 4);
+    // 如果最小、最大日期设定的范围错误
+    if (!dateRangeLegal(s, e)) {
+      forStart = Currentday - 10;
+      forEnd = Currentday + 10;
+    } else {
+      if (startYearLimit === endYearLimit) {
+        forStart = Number(startYearLimit);
+        forEnd = Number(startYearLimit);
+      } else {
+        forStart = Number(startYearLimit);
+        forEnd = Number(endYearLimit);
+      }
+    }
+  } else if (s) {
+    const startYearLimit = s.slice(0, 4);
+    if (Currentday <= Number(startYearLimit)) {
+      forStart = Number(startYearLimit);
+      forEnd = Number(startYearLimit) + 10;
+    } else {
+      forStart = Number(startYearLimit);
+      forEnd = Currentday + 10;
+    }
+  } else if (e) {
+    const endYearLimit = e.slice(0, 4);
+    if (Currentday <= Number(endYearLimit)) {
+      forStart = Currentday - 10;
+      forEnd = Number(endYearLimit);
+    } else {
+      forStart = Number(endYearLimit) - 10;
+      forEnd = Number(endYearLimit);
+    }
+  } else {
+    forStart = Currentday - 10;
+    forEnd = Currentday + 10;
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: `${m}${props.units[0] || ''}`,
+      value: m.toString()
+    });
+  }
+
+  // 判断当前“年”是否在以上合理范围之内
+  const thisYear = Number(v.slice(0, 4));
+  // 当前定位到的年份
+  let vmValue: string | number = '';
+  if (thisYear < forStart) {
+    vmValue = forStart;
+  } else if (thisYear > forEnd) {
+    vmValue = forEnd;
+  } else {
+    // 范围正确
+    vmValue = thisYear;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 4));
+  } else {
+    data.columns[0] = listArr;
+    data.tempSelectedValues[0] = autoFillZero(vmValue, 4);
+  }
+
+  if (props.format.length >= 7) {
+    // 至少是“YYYY-MM”格式，则渲染“月”
+    // 根据当前年渲染“月”这一列
+    renderMonthColumns(autoFillZero(vmValue, 4) + v.slice(4), s, e, isFirst);
+  } else {
+    // 确定选择结果
+    data.selectedValues = [...data.tempSelectedValues];
+  }
+};
+/**
+ * 渲染月所在列，并自动修正在“月”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderMonthColumns = (
+  v: string,
+  s: string,
+  e: string,
+  isFirst: boolean,
+  outRange: boolean = false
+) => {
+  const thisY = Number(v.slice(0, 4)); // 获取当前月
+  const thisM = Number(v.slice(5, 7)); // 获取当前月
+  const minY = Number(s.slice(0, 4)); // 最小年份
+  const maxY = Number(e.slice(0, 4)); // 最大年份
+  const listArr: any = []; // 获取月份数组
+  let forStart = -1; // 最小月份
+  let forEnd = -1; // 最小月份
+  if (thisY === minY && thisY === maxY) {
+    forStart = Number(s.slice(5, 7));
+    forEnd = Number(e.slice(5, 7));
+  } else if (thisY === minY) {
+    forStart = Number(s.slice(5, 7));
+    forEnd = 12;
+  } else if (thisY === maxY) {
+    forStart = 1;
+    forEnd = Number(e.slice(5, 7));
+  } else {
+    forStart = 1;
+    forEnd = 12;
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: autoFillZero(m, 2) + (props.units[1] || ''),
+      value: autoFillZero(m, 2)
+    });
+  }
+  // 判断当前月是否在此范围之内
+  let vmValue: string | number = '';
+  if (thisM < forStart || outRange) {
+    vmValue = forStart;
+    outRange = true;
+  } else if (thisM > forEnd) {
+    vmValue = forEnd;
+    outRange = true;
+  } else {
+    // 范围正确
+    vmValue = thisM;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 2));
+  } else {
+    data.columns[1] = listArr;
+    data.tempSelectedValues[1] = autoFillZero(vmValue, 2);
+  }
+
+  if (props.format.length >= 10) {
+    // 至少是“YYYY-MM-DD”格式，则渲染“日”
+    // 根据当前年渲染“日”这一列
+    renderDayColumns(v.slice(0, 5) + autoFillZero(vmValue, 2) + v.slice(7), s, e, isFirst);
+  } else {
+    // 确定选择结果
+    data.selectedValues = [...data.tempSelectedValues];
+  }
+};
+/**
+ * 渲染日所在列，并自动修正在“日”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderDayColumns = (
+  v: string,
+  s: string,
+  e: string,
+  isFirst: boolean,
+  outRange: boolean = false
+) => {
+  const thisYM = v.slice(0, 7); // 获取当前年月
+  const thisD = Number(v.slice(8, 10)); // 获取当前日
+  const startYM = s.slice(0, 7); // 开始时间临界值
+  const endYM = e.slice(0, 7); // 结束时间临界值
+  const listArr: any = []; // 获取月份数组
+  let forStart = -1; // 最小月份
+  let forEnd = -1; // 最小月份
+  if (thisYM === startYM && thisYM === endYM) {
+    forStart = Number(s.slice(8, 10)); // 开始时间的天临界值
+    forEnd = Number(e.slice(8, 10)); // 结束时间的天临界值
+  } else if (thisYM === startYM) {
+    forStart = Number(s.slice(8, 10));
+    forEnd = getCountDays(Number(v.slice(0, 4)), Number(v.slice(5, 7)));
+  } else if (thisYM === endYM) {
+    forStart = 1;
+    forEnd = Number(e.slice(8, 10)); // 结束时间的天临界值
+  } else {
+    forStart = 1;
+    forEnd = getCountDays(Number(v.slice(0, 4)), Number(v.slice(5, 7)));
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: autoFillZero(m, 2) + (props.units[2] || ''),
+      value: autoFillZero(m, 2)
+    });
+  }
+  // 判断当前日是否在此范围之内
+  let vmValue: string | number = '';
+  if (thisD < forStart || outRange) {
+    vmValue = forStart;
+    outRange = true;
+  } else if (thisD > forEnd) {
+    vmValue = forEnd;
+    outRange = true;
+  } else {
+    // 范围正确
+    vmValue = thisD;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 2));
+  } else {
+    data.columns[2] = listArr;
+    data.tempSelectedValues[2] = autoFillZero(vmValue, 2);
+  }
+
+  if (props.format.length >= 13) {
+    // 至少是“YYYY-MM-DD HH”格式，则渲染“时”
+    // 根据当前年渲染“日”这一列
+    renderHourColumns(v.slice(0, 8) + autoFillZero(vmValue, 2) + v.slice(10), s, e, isFirst);
+  } else {
+    // 确定选择结果
+    data.selectedValues = [...data.tempSelectedValues];
+  }
+};
+/**
+ * 渲染小时所在列，并自动修正在“时”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderHourColumns = (
+  v: string,
+  s: string,
+  e: string,
+  isFirst: boolean,
+  outRange: boolean = false
+) => {
+  const thisYMD = v.slice(0, 10); // 获取当前年月日
+  const startYMD = s.slice(0, 10); // 开始时间临界值
+  const endYMD = e.slice(0, 10); // 结束时间临界值
+  const thisH = Number(v.slice(11, 13)); // 获取当前小时
+  const listArr: any = []; // 获取小时数组
+  let forStart = -1; // 最小月份
+  let forEnd = -1; // 最小月份
+  if (thisYMD === startYMD && thisYMD === endYMD) {
+    forStart = Number(s.slice(11, 13)); // 开始时间的小时临界值
+    forEnd = Number(e.slice(11, 13)); // 结束时间的小时临界值
+  } else if (thisYMD === startYMD) {
+    forStart = Number(s.slice(11, 13));
+    forEnd = 23;
+  } else if (thisYMD === endYMD) {
+    forStart = 0;
+    forEnd = Number(e.slice(11, 13));
+  } else {
+    forStart = 0;
+    forEnd = 23;
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: autoFillZero(m, 2) + (props.units[3] || ''),
+      value: autoFillZero(m, 2)
+    });
+  }
+  // 判断当前小时是否在此范围之内
+  let vmValue: string | number = '';
+  if (thisH < forStart || outRange) {
+    vmValue = forStart;
+    outRange = true;
+  } else if (thisH > forEnd) {
+    vmValue = forEnd;
+    outRange = true;
+  } else {
+    // 范围正确
+    vmValue = thisH;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 2));
+  } else {
+    data.columns[3] = listArr;
+    data.tempSelectedValues[3] = autoFillZero(vmValue, 2);
+  }
+
+  if (props.format.length >= 16) {
+    // 至少是“YYYY-MM-DD HH:mm”格式，则渲染“分”
+    // 根据当前年渲染“分”这一列
+    renderMinuteColumns(v.slice(0, 11) + autoFillZero(vmValue, 2) + v.slice(13), s, e, isFirst);
+  } else {
+    // 确定选择结果
+    data.selectedValues = [...data.tempSelectedValues];
+  }
+};
+/**
+ * 渲染分钟所在列，并自动修正在“分”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderMinuteColumns = (
+  v: string,
+  s: string,
+  e: string,
+  isFirst: boolean,
+  outRange: boolean = false
+) => {
+  const thisYMDH = v.slice(0, 13); // 获取当前年月日小时
+  const startYMDH = s.slice(0, 13); // 开始时间临界值
+  const endYMDH = e.slice(0, 13); // 结束时间临界值
+  const thisM = Number(v.slice(14, 16)); // 获取当前分钟
+  const listArr: any = []; // 获取数组
+  let forStart = -1; // 循环最小值
+  let forEnd = -1; // 循环最大值
+  if (thisYMDH === startYMDH && thisYMDH === endYMDH) {
+    forStart = Number(s.slice(14, 16));
+    forEnd = Number(e.slice(14, 16));
+  } else if (thisYMDH === startYMDH) {
+    forStart = Number(s.slice(14, 16));
+    forEnd = 59;
+  } else if (thisYMDH === endYMDH) {
+    forStart = 0;
+    forEnd = Number(e.slice(14, 16));
+  } else {
+    forStart = 0;
+    forEnd = 59;
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: autoFillZero(m, 2) + (props.units[4] || ''),
+      value: autoFillZero(m, 2)
+    });
+  }
+  // 判断当前小时是否在此范围之内
+  let vmValue: string | number = '';
+  if (thisM < forStart || outRange) {
+    vmValue = forStart;
+    outRange = true;
+  } else if (thisM > forEnd) {
+    vmValue = forEnd;
+    outRange = true;
+  } else {
+    // 范围正确
+    vmValue = thisM;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 2));
+  } else {
+    data.columns[4] = listArr;
+    data.tempSelectedValues[4] = autoFillZero(vmValue, 2);
+  }
+
+  if (props.format.length === 19) {
+    // 至少是“YYYY-MM-DD HH:mm:ss”格式，则渲染“秒”
+    // 根据当前年渲染“秒”这一列
+    renderSecondColumns(v.slice(0, 14) + autoFillZero(vmValue, 2) + v.slice(16), s, e, isFirst);
+  } else {
+    // 确定选择结果
+    data.selectedValues = [...data.tempSelectedValues];
+  }
+};
+/**
+ * 渲染秒钟所在列，并自动修正在“秒”这一列列范围之外的数据
+ * @param v 需要做比较的数据，dateFormat格式
+ * @param s 比较条件，开始时间临界值，dateFormat格式
+ * @param e 比较条件，结束时间临界值，dateFormat格式
+ * @param isFirst 是否是第一次渲染,需要定位到当前
+ * @param outRange 是否超出范围之外
+ */
+const renderSecondColumns = (
+  v: string,
+  s: string,
+  e: string,
+  isFirst: boolean,
+  outRange: boolean = false
+) => {
+  const thisYMDHM = v.slice(0, 16); // 获取当前年月日小时
+  const startYMDHM = s.slice(0, 16); // 开始时间临界值
+  const endYMDHM = e.slice(0, 16); // 结束时间临界值
+  const thisS = Number(v.slice(17, 19)); // 获取当前分钟
+  const listArr: any = []; // 获取数组
+  let forStart = -1; // 循环最小值
+  let forEnd = -1; // 循环最大值
+  if (thisYMDHM === startYMDHM && thisYMDHM === endYMDHM) {
+    forStart = Number(s.slice(17, 19));
+    forEnd = Number(e.slice(17, 19));
+  } else if (thisYMDHM === startYMDHM) {
+    forStart = Number(s.slice(17, 19));
+    forEnd = 59;
+  } else if (thisYMDHM === endYMDHM) {
+    forStart = 0;
+    forEnd = Number(e.slice(17, 19));
+  } else {
+    forStart = 0;
+    forEnd = 59;
+  }
+  for (let m = forStart; m <= forEnd; m++) {
+    listArr.push({
+      text: autoFillZero(m, 2) + (props.units[5] || ''),
+      value: autoFillZero(m, 2)
+    });
+  }
+  // 判断当前小时是否在此范围之内
+  let vmValue: string | number = '';
+  if (thisS < forStart || outRange) {
+    vmValue = forStart;
+    outRange = true;
+  } else if (thisS > forEnd) {
+    vmValue = forEnd;
+    outRange = true;
+  } else {
+    // 范围正确
+    vmValue = thisS;
+  }
+  // 插入/更新到data中
+  if (isFirst) {
+    data.columns.push(listArr);
+    data.tempSelectedValues.push(autoFillZero(vmValue, 2));
+  } else {
+    data.columns[5] = listArr;
+    data.tempSelectedValues[5] = autoFillZero(vmValue, 2);
+  }
+  // 确定选择结果
+  data.selectedValues = [...data.tempSelectedValues];
+};
+
+watch(
+  () => props.showPicker,
+  (val) => {
+    data.isPicker = val;
+    if (val) {
+      // console.log("当前最大最小值判断结果", getMinDateLimit.value, getMaxDateLimit.value);
+      // 每次显示前重新渲染全部列
+      getcolumns();
+    }
+  },
+  {
+    immediate: true // 立即监听--进入就会执行一次 监听显影状态
+  }
+);
+
+// 时间选择器关闭 值不改变并关闭弹框
+function cancelOn() {
+  emit('cancel');
+}
+
+// 时间选择器确定 值改变
+function onConfirm() {
+  // 注意：data.selectedValues比selectedValues更准确
+  // 拼接数据
+  const splitArr = ['-', '-', ' ', ':', ':'];
+  let iiindex = -1;
+  const changeValue = data.selectedValues.reduce((a, b) => {
+    iiindex += 1;
+    return a + splitArr[iiindex] + b;
+  });
+  emit('confirm', changeValue);
+}
+</script>
diff --git a/src/components/contenteditable.vue b/src/components/contenteditable.vue
index 78e2ecd..01338d2 100644
--- a/src/components/contenteditable.vue
+++ b/src/components/contenteditable.vue
@@ -86,7 +86,11 @@ onMounted(() => {
   editor.value.addEventListener('focus', () => {
     showAction.value = true;
   });
-
+  editor.value.addEventListener('blur', () => {
+    setTimeout(() => {
+      showAction.value = false;
+    });
+  });
   document.addEventListener('resize', () => {
     showAction.value = false;
   });
diff --git a/src/fonts/demo.css b/src/fonts/demo.css
index 12ec742..7df7d71 100644
--- a/src/fonts/demo.css
+++ b/src/fonts/demo.css
@@ -9,6 +9,14 @@
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
     format('svg');
+  src:
+    url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.woff2?t=1741575060989') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.woff?t=1741575060989') format('woff'),
+    url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.ttf?t=1741575060989') format('truetype');
+}
+
+@font-face {
+  font-family: '';
 }
 
 .logo {
diff --git a/src/fonts/moblie/demo.css b/src/fonts/moblie/demo.css
new file mode 100644
index 0000000..12ec742
--- /dev/null
+++ b/src/fonts/moblie/demo.css
@@ -0,0 +1,548 @@
+/* Logo 字体 */
+@font-face {
+  font-family: 'iconfont logo';
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src:
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
+    format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
+    format('svg');
+}
+
+.logo {
+  font-style: normal;
+  font-size: 160px;
+  font-family: 'iconfont logo';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  color: #666;
+  line-height: 42px;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  position: relative;
+  z-index: 1;
+  width: 100px;
+  height: 40px;
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  color: #666;
+  font-size: 16px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  width: 960px;
+  margin: 0 auto;
+  padding: 30px 100px;
+}
+
+.main .logo {
+  overflow: hidden;
+  height: 110px;
+  margin-top: -50px;
+  margin-bottom: 30px;
+  color: #333;
+  line-height: 1;
+  text-align: left;
+  *zoom: 1;
+}
+
+.main .logo a {
+  color: #333;
+  font-size: 160px;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  overflow: auto;
+  margin: 10px 0;
+  padding: 20px;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+}
+
+.icon_lists {
+  overflow: hidden;
+  width: 100% !important;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  list-style: none !important;
+  text-align: center;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  margin: 10px auto;
+  color: #333;
+  font-size: 42px;
+  line-height: 100px;
+  -webkit-transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
+  -moz-transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
+  transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentcolor;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  margin-bottom: 24px;
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  clear: both;
+  margin: 1.6em 0 0.6em;
+  color: #404040;
+  font-weight: 500;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  clear: both;
+  height: 1px;
+  margin: 16px 0;
+  border: 0;
+  background: #e9e9e9;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #eee;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  width: 95%;
+  margin-bottom: 24px;
+  border: 1px solid #e9e9e9;
+  border-spacing: 0;
+  border-collapse: collapse;
+  empty-cells: show;
+}
+
+.markdown > table th {
+  color: #333;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.markdown > table th,
+.markdown > table td {
+  padding: 8px 16px;
+  border: 1px solid #e9e9e9;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #f7f7f7;
+}
+
+.markdown blockquote {
+  margin: 1em 0;
+  padding-left: 0.8em;
+  border-left: 4px solid #e9e9e9;
+  color: #999;
+  font-size: 90%;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  margin-left: 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  display: inline-block;
+  opacity: 1;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: #333;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  background-color: #eaffea;
+  color: #55a532;
+}
+
+.hljs-deletion {
+  background-color: #ffecec;
+  color: #bd2c00;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*='language-'],
+pre[class*='language-'] {
+  background: none;
+  color: black;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+  text-align: left;
+  text-shadow: 0 1px white;
+  white-space: pre;
+  word-spacing: normal;
+  word-wrap: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+@media print {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  overflow: auto;
+  margin: 0.5em 0;
+  padding: 1em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  background: hsla(0deg, 0%, 100%, 0.5);
+  color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
diff --git a/src/fonts/moblie/iconfont.css b/src/fonts/moblie/iconfont.css
new file mode 100644
index 0000000..e9186ca
--- /dev/null
+++ b/src/fonts/moblie/iconfont.css
@@ -0,0 +1,75 @@
+@font-face {
+  font-family: mobilefont; /* Project id 4841764 */
+  src:
+    url('iconfont.woff2?t=1741575354833') format('woff2'),
+    url('iconfont.woff?t=1741575354833') format('woff'),
+    url('iconfont.ttf?t=1741575354833') format('truetype');
+}
+
+.mobilefont {
+  font-style: normal;
+  font-size: 18px;
+  font-family: mobilefont !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-radiobox::before {
+  content: '\e75b';
+}
+
+.icon-juzhendafen::before {
+  content: '\e641';
+}
+
+.icon-checkbox-checked::before {
+  content: '\e6c3';
+}
+
+.icon-nps::before {
+  content: '\e6b0';
+}
+
+.icon-input::before {
+  content: '\e6fd';
+}
+
+.icon-juzhentiankong::before {
+  content: '\e62e';
+}
+
+.icon-wenjianshangchuan::before {
+  content: '\e631';
+}
+
+.icon-qianming::before {
+  content: '\e661';
+}
+
+.icon-tuwen::before {
+  content: '\e62c';
+}
+
+.icon-juzhenduoxuan::before {
+  content: '\e818';
+}
+
+.icon-juzhendanxuan::before {
+  content: '\13c7f';
+}
+
+.icon-edit2::before {
+  content: '\e630';
+}
+
+.icon-copy::before {
+  content: '\e632';
+}
+
+.icon-delete::before {
+  content: '\e63f';
+}
+
+.icon-sort::before {
+  content: '\e6a0';
+}
diff --git a/src/fonts/moblie/iconfont.js b/src/fonts/moblie/iconfont.js
new file mode 100644
index 0000000..00018eb
--- /dev/null
+++ b/src/fonts/moblie/iconfont.js
@@ -0,0 +1,67 @@
+(window._iconfont_svg_string_4841764 =
+  '<svg><symbol id="icon-radiobox" viewBox="0 0 1024 1024"><path d="M512 65.984C266.08 65.984 65.984 266.08 65.984 512c0 245.952 200.064 446.016 446.016 446.016 245.952 0 446.016-200.064 446.016-446.016C958.016 266.08 757.952 65.984 512 65.984zM512 894.016C301.344 894.016 129.984 722.624 129.984 512 129.984 301.344 301.344 129.984 512 129.984c210.624 0 382.016 171.36 382.016 382.016C894.016 722.624 722.624 894.016 512 894.016z" fill="#5E6570" ></path><path d="M512 352c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160S600.224 352 512 352z" fill="#5E6570" ></path></symbol><symbol id="icon-juzhendafen" viewBox="0 0 1024 1024"><path d="M113.28 103.104 0 103.104l60.864-100.48L113.28 103.104z" fill="#231815" ></path><path d="M113.28 916.032 0 916.032l60.864 100.48L113.28 916.032z" fill="#231815" ></path><path d="M45.504 208.512l30.144 0 0 602.176L45.504 810.688 45.504 208.512z" fill="#231815" ></path><path d="M467.008 283.776 406.784 283.776 406.784 9.024 271.296 37.504l0 50.56 75.264-18.816 0 214.528L271.296 283.776 271.296 328.96l195.712 0L467.008 283.776 467.008 283.776z" fill="#231815" ></path><path d="M638.272 328.96c37.184 0 65.344-13.888 85.12-41.6 19.84-27.84 29.696-67.328 29.696-118.592 0-104-36.16-156.032-108.672-156.032-38.144 0-67.008 14.144-86.976 41.856-20.224 28.032-30.144 68.48-30.144 121.216C527.232 277.888 564.096 328.96 638.272 328.96L638.272 328.96zM641.984 57.92c33.856 0 50.88 37.888 50.88 113.152 0 75.328-17.408 112.704-52.224 112.704-35.52 0-53.12-36.416-53.12-109.376C587.52 96.768 605.568 57.92 641.984 57.92L641.984 57.92z" fill="#231815" ></path><path d="M909.248 328.96c37.12 0 65.344-13.888 85.12-41.6C1014.144 259.52 1024 220.032 1024 168.768c0-104-36.16-156.032-108.608-156.032-38.144 0-67.072 14.144-87.04 41.856-20.16 28.032-30.08 68.48-30.08 121.216C798.272 277.888 835.136 328.96 909.248 328.96L909.248 328.96zM913.024 57.92c33.856 0 50.816 37.888 50.816 113.152 0 75.328-17.408 112.704-52.16 112.704-35.584 0-53.184-36.416-53.184-109.376C858.432 96.768 876.48 57.92 913.024 57.92L913.024 57.92z" fill="#231815" ></path><path d="M909.248 1021.44c37.12 0 65.344-13.888 85.12-41.6C1014.144 952 1024 912.512 1024 861.248c0-104-36.16-156.032-108.608-156.032-38.144 0-67.072 14.144-87.04 41.856-20.16 28.032-30.08 68.48-30.08 121.216C798.272 970.368 835.136 1021.44 909.248 1021.44L909.248 1021.44zM913.024 750.464c33.856 0 50.816 37.888 50.816 113.152 0 75.328-17.408 112.704-52.16 112.704-35.584 0-53.184-36.416-53.184-109.376C858.432 789.248 876.48 750.464 913.024 750.464L913.024 750.464z" fill="#231815" ></path><path d="M361.664 374.08l30.08 0 0 301.12-30.08 0L361.664 374.08z" fill="#231815" ></path><path d="M963.84 374.08l30.144 0 0 301.12L963.84 675.2 963.84 374.08z" fill="#231815" ></path><path d="M662.72 374.08l30.144 0 0 301.12-30.144 0L662.72 374.08z" fill="#231815" ></path></symbol><symbol id="icon-checkbox-checked" viewBox="0 0 1024 1024"><path d="M128 128l0 768 768 0L896 128 128 128zM424.704 768 198.464 541.696 288.96 451.2l135.744 135.744 316.8-316.8L832 360.704 424.704 768z" fill="#666666" ></path></symbol><symbol id="icon-nps" viewBox="0 0 1024 1024"><path d="M519.9 349.9h-38.7V499h38.7c30.5-1.5 46.1-26.3 46.9-74.6-0.8-48.2-16.4-73-46.9-74.5zM896.1 97.5h-768c-35.3 0-64 28.7-64 64v702.1c0 35.3 28.7 64 64 64h768c35.3 0 64-28.7 64-64V161.5c0-35.4-28.6-64-64-64zM384 761.1h-59.8l-102-311.8c-7-22.6-11.7-38.4-14.1-47.4 0.8 22.6 1.2 51.2 1.2 85.9v273.4h-55.1V261.7h63.3L316 569c7 19.6 11.7 36.2 14.1 49.7v-2.3c-0.8-16.6-1.2-42.2-1.2-76.8V261.7H384v499.4z m140.6-176.3h-43.4V761h-58.6V261.7h107.8c62.5 3 94.9 55.7 97.3 158.2 0.8 110-33.6 164.9-103.1 164.9zM766 770.1c-66.4 1.5-105.5-54.2-117.2-167.2l57.4-20.3c4.7 67.8 24.2 101.7 58.6 101.7 25.8-1.5 39.4-21.1 41-58.7 0-28.6-9-49.7-27-63.3-18.8-12-35.9-21.8-51.6-29.4-47.7-19.6-70.7-67-69.1-142.3 4.7-84.3 36.3-129.5 94.9-135.6 60.9-1.5 96.9 45.2 107.8 140.1l-57.4 22.6c-3.9-49.7-19.9-74.6-48-74.6-22.7 1.5-34.8 17.3-36.3 47.4-1.6 28.6 13.7 49.7 45.7 63.3 22.7 9 43 22.6 60.9 40.7 27.3 27.1 41.4 69.3 42.2 126.5-2.3 96.4-36.3 146.1-101.9 149.1z"  ></path></symbol><symbol id="icon-input" viewBox="0 0 1024 1024"><path d="M85.333333 170.666667v682.666666h853.333334V170.666667H85.333333zM0 85.333333h1024v853.333334H0V85.333333z m298.666667 640h42.666666v42.666667H213.333333v-42.666667h42.666667V298.666667H213.333333V256h128v42.666667H298.666667v426.666666z" fill="#525A65" ></path></symbol><symbol id="icon-juzhentiankong" viewBox="0 0 1024 1024"><path d="M983.917714 541.257143H578.925714a38.912 38.912 0 0 0-38.765714 38.765714v405.211429a38.912 38.912 0 0 0 38.765714 38.765714h405.211429a38.912 38.912 0 0 0 38.765714-38.765714V580.022857a38.912 38.912 0 0 0-38.985143-38.765714z m-111.835428 369.152a20.260571 20.260571 0 0 1 0 40.448h-180.662857a20.260571 20.260571 0 0 1 0-40.448h70.729142V658.285714h-70.144a20.260571 20.260571 0 0 1 0-40.448h180.662858a20.260571 20.260571 0 1 1 0 40.448h-69.924572v252.123429h69.412572zM446.098286 0H40.886857a38.912 38.912 0 0 0-38.765714 38.765714v405.211429a38.912 38.912 0 0 0 38.765714 38.765714h405.211429a38.912 38.912 0 0 0 38.765714-38.765714V38.765714a38.838857 38.838857 0 0 0-38.765714-38.765714zM334.262857 369.152a20.260571 20.260571 0 0 1 0 40.448h-180.662857a20.260571 20.260571 0 0 1 0-40.448h70.729143V117.028571h-70.144a20.260571 20.260571 0 0 1 0-40.448h180.662857a20.260571 20.260571 0 0 1 0 40.448h-69.924571v252.123429z m0 0L989.037714 25.819429a9.142857 9.142857 0 0 1 8.996572 8.996571v415.378286a9.142857 9.142857 0 0 1-8.996572 8.996571H573.659429a9.142857 9.142857 0 0 1-8.996572-8.996571V34.816a9.142857 9.142857 0 0 1 8.996572-8.996571h415.378285m0-24.722286H573.659429a33.792 33.792 0 0 0-33.645715 33.645714v415.378286a33.792 33.792 0 0 0 33.645715 33.645714h415.378285a33.792 33.792 0 0 0 33.645715-33.645714V34.816a33.792 33.792 0 0 0-33.645715-33.718857zM450.194286 565.979429a9.142857 9.142857 0 0 1 8.996571 8.996571v415.378286a9.142857 9.142857 0 0 1-8.996571 8.996571H34.742857a9.142857 9.142857 0 0 1-8.996571-8.996571V574.902857a9.142857 9.142857 0 0 1 8.996571-8.996571h415.451429m0-24.722286H34.742857a33.792 33.792 0 0 0-33.645714 33.645714v415.524572a33.792 33.792 0 0 0 33.645714 33.645714h415.451429a33.792 33.792 0 0 0 33.645714-33.645714V574.902857a33.792 33.792 0 0 0-33.645714-33.645714z" fill="#999999" ></path></symbol><symbol id="icon-wenjianshangchuan" viewBox="0 0 1157 1024"><path d="M408.194429 510.222366h81.523133v133.529269a44.564877 44.564877 0 0 0 44.482196 44.482196h89.047073a44.564877 44.564877 0 0 0 44.482196-44.482196V510.222366h80.779007c28.69019 0 34.395155-4.712798 9.838999-29.765039L623.329512 345.522487c-45.391683-45.060961-44.812919-45.226322-90.039242 0L398.438111 480.457327c-24.886879 25.052241-16.453452 29.765038 9.756318 29.765039z" fill="#999999" ></path><path d="M1024 133.529269H489.717562A133.61195 133.61195 0 0 0 356.188292 0H133.529269A133.61195 133.61195 0 0 0 0 133.529269v756.858781a133.61195 133.61195 0 0 0 133.529269 133.529269h890.470731A133.61195 133.61195 0 0 0 1157.529269 890.38805V267.141219a133.61195 133.61195 0 0 0-133.529269-133.61195z m44.482196 756.858781a44.564877 44.564877 0 0 1-44.482196 44.482196H133.529269a44.564877 44.564877 0 0 1-44.482196-44.482196V267.141219a44.564877 44.564877 0 0 1 44.482196-44.482196h890.470731a44.564877 44.564877 0 0 1 44.482196 44.482196v623.246831z" fill="#999999" ></path><path d="M756.858781 712.293904a44.564877 44.564877 0 0 1-44.482196 44.482196H445.235365a44.564877 44.564877 0 0 1-44.482196-44.482196v-44.482196H311.954138v44.482196a133.61195 133.61195 0 0 0 133.529269 133.529269h267.14122a133.61195 133.61195 0 0 0 133.529269-133.529269v-44.482196H757.106823z" fill="#999999" ></path></symbol><symbol id="icon-qianming" viewBox="0 0 1137 1024"><path d="M829.573458 305.578582l109.283526-109.255081L827.866792 85.33331l-109.283525 109.226636 110.990191 110.990191z m-68.86398 68.835536L649.719286 263.452371 161.043866 751.985569c-20.366217 20.337772-45.767098 67.64087-51.569763 96.056862l-17.18044 83.683532 83.740421-17.180439c28.728881-5.887998 75.434646-31.061325 96.028418-51.655097l488.618531-488.476309z m9.102219-350.151014a81.720866 81.720866 0 0 1 116.138635 0l114.06219 113.976858a82.147533 82.147533 0 0 1 0 116.138634L331.710486 922.53841c-32.085324 32.028436-93.582196 65.336871-138.723517 74.581313l-125.439966 25.713771A56.206207 56.206207 0 0 1 1.186133 956.501068l25.713771-125.383077c9.130664-44.543988 42.495988-106.666637 74.581312-138.751961L769.783253 24.23466zM951.40098 824.88866c-6.428443 39.082656-30.378658 74.382202-68.209759 102.20086 77.596423 4.977776 136.419518-20.764439 180.565284-77.141312a41.585766 41.585766 0 0 1 58.055095-7.224887c18.033773 13.937774 21.304883 39.736878 7.281775 57.656873-75.71909 96.711084-186.282615 129.25152-323.982132 97.848862a234.012379 234.012379 0 0 1-50.119097-17.351106C640.048178 1009.635275 534.91754 1023.999716 439.657122 1023.999716A41.244433 41.244433 0 0 1 398.270467 982.897505a41.244433 41.244433 0 0 1 41.386655-41.073767c73.528868 0 154.282624-9.415108 242.261266-28.302214-16.298662-30.407103-20.764439-65.991093-12.287996-103.167971 17.863106-78.307534 88.689753-137.557295 166.684398-126.293299 77.795534 11.207108 126.663076 70.826647 115.114635 140.799961z m-201.102166 3.612443c-5.660443 24.917326-0.199111 47.047098 18.119106 63.800871 119.096856-35.83999 130.133297-116.252412 55.978651-126.94752-31.402658-4.522665-65.080871 23.665771-74.069313 63.146649z" fill="#2A2A2A" ></path></symbol><symbol id="icon-tuwen" viewBox="0 0 1024 1024"><path d="M157.5 98.23V928.3h708.79V98.23H157.5z m644.79 766.06H221.5V162.23h580.79v702.06z" fill="#333333" ></path><path d="M530.31 216l-91.53 168-54.71-53-96.86 88H624z" fill="#333333" ></path><path d="M287.729742 262.018632a39.67 39.67 0 1 0 78.316511-12.702743 39.67 39.67 0 1 0-78.316511 12.702743Z" fill="#333333" ></path><path d="M284.12 482.27H624v62.78H284.12zM284.12 608.63h461.1v62.78h-461.1zM284.12 737.3h461.1v62.78h-461.1z" fill="#333333" ></path></symbol><symbol id="icon-juzhenduoxuan" viewBox="0 0 1024 1024"><path d="M896 64a64 64 0 0 1 64 64v512a64 64 0 0 1-64 64h-128v185.6a70.4 70.4 0 0 1-70.4 70.4H134.4A70.4 70.4 0 0 1 64 889.6V326.4A70.4 70.4 0 0 1 134.4 256H320V128a64 64 0 0 1 64-64h512z m-212.48 276.48H148.48v535.04h535.04V340.48zM534.08 474.048l51.904 56.512-180.864 166.208-25.728 23.68-25.984-23.424-104-93.76 51.392-57.088 78.08 70.4 155.2-142.528zM883.2 140.8H396.8V256h300.8A70.4 70.4 0 0 1 768 326.4v300.8h115.2V140.8z"  ></path></symbol><symbol id="icon-juzhendanxuan" viewBox="0 0 1024 1024"><path d="M295.7312 219.392a357.8368 357.8368 0 0 1 296.6016-117.9136c197.248 16.4352 343.8592 189.6448 327.424 386.8928-10.5984 127.3344-86.528 233.5488-192.0768 288.4352A357.4784 357.4784 0 0 1 460.8 896c-197.9392 0-358.4-160.4608-358.4-358.4 0-138.4192 78.464-258.4832 193.3312-318.208z m504.2176 434.3808l4.608-5.7088c12.8-16.3584 23.8848-34.048 33.3056-53.0432a304.4608 304.4608 0 0 0 30.8736-110.8992 304.4864 304.4864 0 0 0-12.1088-114.4576 304.0256 304.0256 0 0 0-59.5456-109.4656 304.0256 304.0256 0 0 0-98.0992-76.8 304.512 304.512 0 0 0-110.8992-30.8992 304.512 304.512 0 0 0-114.4832 12.1344c-14.208 4.3008-27.904 9.5232-41.1136 15.6672A363.264 363.264 0 0 1 460.8 179.2c197.9392 0 358.4 160.4608 358.4 358.4 0 40.6528-6.784 79.744-19.2512 116.1728z m-121.9328-333.3888a304.0512 304.0512 0 0 0-104.1408-68.4032A304.512 304.512 0 0 0 460.8 230.4c-39.0656 0-76.7488 7.168-113.0752 21.5808-39.424 15.616-74.1632 38.4-104.1408 68.4032a304.0256 304.0256 0 0 0-68.4032 104.1408A304.512 304.512 0 0 0 153.6 537.6c0 39.0656 7.168 76.7488 21.5808 113.0752 15.616 39.424 38.4 74.1632 68.4032 104.1408a304.0256 304.0256 0 0 0 104.1408 68.4288c36.3264 14.3616 74.0096 21.5552 113.0752 21.5552 39.0656 0 76.7488-7.168 113.0752-21.5808 39.424-15.616 74.1632-38.4 104.1408-68.4032a304.0512 304.0512 0 0 0 68.4032-104.1408C760.832 614.3488 768 576.6656 768 537.6c0-39.0656-7.168-76.7488-21.5808-113.0752-15.616-39.424-38.4-74.1632-68.4032-104.1408zM563.2 537.6a102.144 102.144 0 0 1-23.2448 64.9728 102.0928 102.0928 0 0 1-59.1872 35.456 102.912 102.912 0 0 1-49.6896-2.432 101.9648 101.9648 0 0 1-49.4336-33.024 102.3232 102.3232 0 0 1 22.272-150.1184A102.0928 102.0928 0 0 1 460.8 435.2a102.144 102.144 0 0 1 64.9728 23.2448A102.4512 102.4512 0 0 1 563.2 537.6z"  ></path></symbol><symbol id="icon-edit2" viewBox="0 0 1024 1024"><path d="M119.928832 959.681536l643.183616 0c30.886912 0 55.929856-25.04192 55.929856-55.927808L819.042304 494.19776l-55.929856 53.395456 0 356.160512L119.928832 903.753728 119.928832 204.638208l392.909824 0 56.544256-54.480896-1.462272-1.447936L119.928832 148.709376c-30.885888 0-55.928832 25.042944-55.928832 55.928832l0 699.114496C64 934.639616 89.042944 959.681536 119.928832 959.681536zM915.935232 100.775936c-25.233408-24.196096-53.088256-36.458496-82.80064-36.458496-46.507008 0-80.42496 30.040064-89.65632 39.230464-13.080576 12.916736-383.789056 383.0784-383.789056 383.0784-2.90816 2.963456-5.03808 6.582272-6.117376 10.609664-10.036224 37.113856-60.366848 201.856-60.858368 203.493376-2.593792 8.43776-0.273408 17.642496 5.940224 23.786496 4.46464 4.48 10.418176 6.85568 16.52224 6.85568 2.403328 0 4.819968-0.356352 7.195648-1.093632 1.707008-0.572416 171.718656-55.545856 199.697408-63.901696 3.687424-1.091584 7.046144-3.086336 9.803776-5.789696 17.655808-17.424384 358.391808-352.874496 385.974272-381.35808 28.510208-29.412352 42.684416-59.998208 42.1376-90.966016C959.465472 157.687808 944.582656 128.234496 915.935232 100.775936zM877.674496 240.325632c-15.565824 16.057344-137.418752 136.46336-362.186752 357.885952l-17.205248 16.958464c-25.765888 7.975936-87.471104 27.8016-134.115328 42.848256 15.020032-49.59232 33.04448-109.507584 41.07264-137.841664 48.036864-47.96928 365.628416-365.0816 377.699328-376.988672 2.349056-2.349056 23.786496-22.939648 50.194432-22.939648 14.993408 0 29.438976 6.841344 44.10368 20.905984 17.532928 16.822272 26.571776 32.989184 26.817536 48.091136C904.329216 204.782592 895.453184 221.959168 877.674496 240.325632z" fill="#272636" ></path></symbol><symbol id="icon-copy" viewBox="0 0 1024 1024"><path d="M672 832 224 832c-52.928 0-96-43.072-96-96L128 160c0-52.928 43.072-96 96-96l448 0c52.928 0 96 43.072 96 96l0 576C768 788.928 724.928 832 672 832zM224 128C206.368 128 192 142.368 192 160l0 576c0 17.664 14.368 32 32 32l448 0c17.664 0 32-14.336 32-32L704 160c0-17.632-14.336-32-32-32L224 128zM800 960 320 960c-17.664 0-32-14.304-32-32s14.336-32 32-32l480 0c17.664 0 32-14.336 32-32L832 256c0-17.664 14.304-32 32-32s32 14.336 32 32l0 608C896 916.928 852.928 960 800 960zM544 320 288 320c-17.664 0-32-14.336-32-32s14.336-32 32-32l256 0c17.696 0 32 14.336 32 32S561.696 320 544 320zM608 480 288.032 480c-17.664 0-32-14.336-32-32s14.336-32 32-32L608 416c17.696 0 32 14.336 32 32S625.696 480 608 480zM608 640 288 640c-17.664 0-32-14.304-32-32s14.336-32 32-32l320 0c17.696 0 32 14.304 32 32S625.696 640 608 640z" fill="#272636" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M608 768c-17.696 0-32-14.304-32-32L576 384c0-17.696 14.304-32 32-32s32 14.304 32 32l0 352C640 753.696 625.696 768 608 768zM416 768c-17.696 0-32-14.304-32-32L384 384c0-17.696 14.304-32 32-32s32 14.304 32 32l0 352C448 753.696 433.696 768 416 768zM928 224l-160 0L768 160c0-52.928-42.72-96-95.264-96L352 64C299.072 64 256 107.072 256 160l0 64L96 224C78.304 224 64 238.304 64 256s14.304 32 32 32l832 0c17.696 0 32-14.304 32-32S945.696 224 928 224zM320 160c0-17.632 14.368-32 32-32l320.736 0C690.272 128 704 142.048 704 160l0 64L320 224 320 160zM736.128 960 288.064 960c-52.928 0-96-43.072-96-96L192.064 383.52c0-17.664 14.336-32 32-32s32 14.336 32 32L256.064 864c0 17.664 14.368 32 32 32l448.064 0c17.664 0 32-14.336 32-32L768.128 384.832c0-17.664 14.304-32 32-32s32 14.336 32 32L832.128 864C832.128 916.928 789.056 960 736.128 960z" fill="#272636" ></path></symbol><symbol id="icon-sort" viewBox="0 0 1024 1024"><path d="M922.345786 372.183628l-39.393195 38.687114L676.138314 211.079416l0 683.909301-54.713113 0L621.425202 129.010259l53.320393 0L922.345786 372.183628zM349.254406 894.989741 101.654214 651.815349l39.393195-38.687114 206.814276 199.792349L347.861686 129.010259l54.713113 0 0 765.978459L349.254406 894.988718z" fill="#272636" ></path></symbol></svg>'),
+  ((l) => {
+    var a = (t = (t = document.getElementsByTagName('script'))[t.length - 1]).getAttribute(
+        'data-injectcss'
+      ),
+      t = t.getAttribute('data-disable-injectsvg');
+    if (!t) {
+      var c,
+        i,
+        e,
+        h,
+        o,
+        n = function (a, t) {
+          t.parentNode.insertBefore(a, t);
+        };
+      if (a && !l.__iconfont__svg__cssinject__) {
+        l.__iconfont__svg__cssinject__ = !0;
+        try {
+          document.write(
+            '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>'
+          );
+        } catch (a) {
+          console && console.log(a);
+        }
+      }
+      (c = function () {
+        var a,
+          t = document.createElement('div');
+        (t.innerHTML = l._iconfont_svg_string_4841764),
+          (t = t.getElementsByTagName('svg')[0]) &&
+            (t.setAttribute('aria-hidden', 'true'),
+            (t.style.position = 'absolute'),
+            (t.style.width = 0),
+            (t.style.height = 0),
+            (t.style.overflow = 'hidden'),
+            (t = t),
+            (a = document.body).firstChild ? n(t, a.firstChild) : a.appendChild(t));
+      }),
+        document.addEventListener
+          ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
+            ? setTimeout(c, 0)
+            : ((i = function () {
+                document.removeEventListener('DOMContentLoaded', i, !1), c();
+              }),
+              document.addEventListener('DOMContentLoaded', i, !1))
+          : document.attachEvent &&
+            ((e = c),
+            (h = l.document),
+            (o = !1),
+            s(),
+            (h.onreadystatechange = function () {
+              'complete' == h.readyState && ((h.onreadystatechange = null), d());
+            }));
+    }
+    function d() {
+      o || ((o = !0), e());
+    }
+    function s() {
+      try {
+        h.documentElement.doScroll('left');
+      } catch (a) {
+        return void setTimeout(s, 50);
+      }
+      d();
+    }
+  })(window);
diff --git a/src/fonts/moblie/iconfont.json b/src/fonts/moblie/iconfont.json
new file mode 100644
index 0000000..f9f4e22
--- /dev/null
+++ b/src/fonts/moblie/iconfont.json
@@ -0,0 +1,114 @@
+{
+  "id": "4841764",
+  "name": "yl",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "240132",
+      "name": "radio_box",
+      "font_class": "radiobox",
+      "unicode": "e75b",
+      "unicode_decimal": 59227
+    },
+    {
+      "icon_id": "844024",
+      "name": "矩阵打分",
+      "font_class": "juzhendafen",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "1176868",
+      "name": "checkbox-checked",
+      "font_class": "checkbox-checked",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "8766356",
+      "name": "nps",
+      "font_class": "nps",
+      "unicode": "e6b0",
+      "unicode_decimal": 59056
+    },
+    {
+      "icon_id": "11215250",
+      "name": "input",
+      "font_class": "input",
+      "unicode": "e6fd",
+      "unicode_decimal": 59133
+    },
+    {
+      "icon_id": "15969322",
+      "name": "矩阵填空",
+      "font_class": "juzhentiankong",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "15969340",
+      "name": "文件上传",
+      "font_class": "wenjianshangchuan",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "17269853",
+      "name": "签名",
+      "font_class": "qianming",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "17373529",
+      "name": "图文",
+      "font_class": "tuwen",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "36443758",
+      "name": "矩阵多选",
+      "font_class": "juzhenduoxuan",
+      "unicode": "e818",
+      "unicode_decimal": 59416
+    },
+    {
+      "icon_id": "38465935",
+      "name": "矩阵单选",
+      "font_class": "juzhendanxuan",
+      "unicode": "13c7f",
+      "unicode_decimal": 81023
+    },
+    {
+      "icon_id": "1160114",
+      "name": "edit-2",
+      "font_class": "edit2",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "1160116",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "1160129",
+      "name": "delete",
+      "font_class": "delete",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "1160227",
+      "name": "sort",
+      "font_class": "sort",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    }
+  ]
+}
diff --git a/src/fonts/moblie/iconfont.ttf b/src/fonts/moblie/iconfont.ttf
new file mode 100644
index 0000000..ec87c07
Binary files /dev/null and b/src/fonts/moblie/iconfont.ttf differ
diff --git a/src/fonts/moblie/iconfont.woff b/src/fonts/moblie/iconfont.woff
new file mode 100644
index 0000000..33c8376
Binary files /dev/null and b/src/fonts/moblie/iconfont.woff differ
diff --git a/src/fonts/moblie/iconfont.woff2 b/src/fonts/moblie/iconfont.woff2
new file mode 100644
index 0000000..6b0fc4c
Binary files /dev/null and b/src/fonts/moblie/iconfont.woff2 differ
diff --git a/src/stores/modules/common.ts b/src/stores/modules/common.ts
index 5c74ada..1989863 100644
--- a/src/stores/modules/common.ts
+++ b/src/stores/modules/common.ts
@@ -9,8 +9,9 @@ export const useCommonStore = defineStore('common', {
   state: () => ({
     questionsInfo: {
       survey: {
-        id: 8721,
-        introduction: '<p><span style="color: #e03e2d;">【样本量要求&ge;60】</span></p>',
+        id: '',
+        introduction:
+          '<p>为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！（此提示语为默认提示语，您可选择自行输入本问卷的提示语）</p>',
         pages: [
           [24, 27, 26, 1],
           [2, 3, 4, 5, 6, 7],
@@ -18,24 +19,17 @@ export const useCommonStore = defineStore('common', {
           [15, 16, 17, 18, 19, 20, 21],
           [28, 22]
         ],
-        sn: '8YXK4kW5',
+        sn: '',
         status: 0,
-        title:
-          '<p><span style="font-size: 24px;"><span style="font-family: \'PingFang SC Regular\';">液态奶产品研究标准化问卷</span><span style="font-family: \'Arial Unicode MS\';">-</span><span style="font-family: \'PingFang SC Regular\';">概念测试（内测标准版）</span></span></p>',
-        detail_pages: [
-          [24, 27, 26, 1],
-          [2, 3, 4, 5, 6, 7],
-          [8, 9, 10, 11, 12, 13, 14],
-          [15, 16, 17, 18, 19, 20, 21],
-          [28, 22]
-        ],
+        title: '<p>问卷标题</p>',
+        detail_pages: [],
         group_pages: [],
         is_one_page_one_question: 0,
         last_question_index: 0,
         is_three_d_permissions: 0,
         is_dept: 1,
         last_title: 'Q5',
-        project_name: '概念诊断问卷示例-0227',
+        project_name: '',
         quota_end_content:
           '<p style="text-align:center"><img style="width:220px;margin-top:30px;margin-bottom: 40px;" src="https://cxp-pubcos.yili.com/prod-yls/theme/XxgQ98WN/1693807609602_962_error.png"></p>\n<p style="text-align:center;font-size: 16px;font-weight: 500;padding-bottom: 12px;/* margin-bottom: 10px; */">很抱歉，本次调研不太适合您的情况，感谢您的参与！</p>',
         quota_end_url: '',
diff --git a/src/utils/QuestionJsons/FileUpload.js b/src/utils/QuestionJsons/FileUpload.js
new file mode 100644
index 0000000..868a7a8
--- /dev/null
+++ b/src/utils/QuestionJsons/FileUpload.js
@@ -0,0 +1,29 @@
+export default {
+  id: '',
+  question_type: 18,
+  question_index: 41,
+  stem: '请上传文件',
+  title: 'Q14',
+  options: [],
+  last_option_index: 0,
+  config: {
+    is_required: 1,
+    quick_type: 0,
+    is_show: [],
+    select_random: 0,
+    min_number: 1,
+    max_number: 1,
+    min_size: 0,
+    max_size: 1,
+    is_file: 0,
+    file_type: '0'
+  },
+  associate: [],
+  question_code: '',
+  logic_config: {
+    order: 0,
+    type: 0,
+    expect: '',
+    stay_time: ''
+  }
+};
diff --git a/src/utils/QuestionJsons/MartrixQuestion.js b/src/utils/QuestionJsons/MartrixQuestion.js
index 5da73ce..583eccf 100644
--- a/src/utils/QuestionJsons/MartrixQuestion.js
+++ b/src/utils/QuestionJsons/MartrixQuestion.js
@@ -1,14 +1,14 @@
 export default {
   // JSON 需要修改
   id: '',
-  question_type: 5,
+  question_type: '',
   question_index: '',
-  stem: '请完成打分',
+  stem: '请每行选择一个选项',
   title: '',
   options: [
     [
       {
-        id: 'e46f51b1-bfd8-4d9c-becc-4fb7d175a6f4',
+        id: '',
         is_fixed: 0,
         is_other: 0,
         is_remove_other: 0,
@@ -25,6 +25,83 @@ export default {
         type: 0,
         cascade: [],
         config: []
+      },
+      {
+        id: '',
+        is_fixed: 0,
+        is_other: 0,
+        is_remove_other: 0,
+        option: '<p>选项2</p>',
+        option_config: {
+          image_url: [],
+          title: '',
+          instructions: [],
+          option_type: 0,
+          limit_right_content: ''
+        },
+        option_index: 1,
+        parent_id: 0,
+        type: 0,
+        cascade: [],
+        config: []
+      }
+    ],
+    [
+      {
+        option: '<p style="text-align:center">列标签1</p>',
+        id: '1049201',
+        type: 2,
+        is_other: 0,
+        is_fixed: 0,
+        is_remove_other: 0,
+        created_at: null,
+        created_user_id: null,
+        parent_id: null,
+        option_index: 3,
+        list_id: 74491,
+        option_code: '',
+        option_config: {
+          title: '',
+          instructions: [],
+          price: 0,
+          gradient: '',
+          image_url: [],
+          option_type: 0,
+          type: 0,
+          limit_right_content: '',
+          child_area: null,
+          binding_goods_id: ''
+        },
+        disable_option_update: null,
+        cascade: []
+      },
+      {
+        option: '<p style="text-align:center">列标签2</p>',
+        id: '1049202',
+        type: 2,
+        is_other: 0,
+        is_fixed: 0,
+        is_remove_other: 0,
+        created_at: null,
+        created_user_id: null,
+        parent_id: null,
+        option_index: 4,
+        list_id: 74491,
+        option_code: '',
+        option_config: {
+          title: '',
+          instructions: [],
+          price: 0,
+          gradient: '',
+          image_url: [],
+          option_type: 0,
+          type: 0,
+          limit_right_content: '',
+          child_area: null,
+          binding_goods_id: ''
+        },
+        disable_option_update: null,
+        cascade: []
       }
     ]
   ],
diff --git a/src/utils/QuestionJsons/NPS.js b/src/utils/QuestionJsons/NPS.js
new file mode 100644
index 0000000..0f305ef
--- /dev/null
+++ b/src/utils/QuestionJsons/NPS.js
@@ -0,0 +1,54 @@
+export default {
+  id: '',
+  question_type: 106,
+  question_index: 0,
+  stem: '您向朋友或同事推荐我们的可能性多大？',
+  title: '',
+  options: [
+    [
+      {
+        id: 'b68d45eb-d833-4b25-b0aa-2fde1310e88d',
+        is_fixed: 0,
+        is_other: 0,
+        is_remove_other: 0,
+        option: '<p>选项1</p>',
+        option_config: {
+          image_url: [],
+          title: '',
+          instructions: [],
+          option_type: 0,
+          limit_right_content: ''
+        },
+        option_index: 1,
+        parent_id: 0,
+        type: 0,
+        cascade: [],
+        config: []
+      }
+    ]
+  ],
+  last_option_index: 0,
+  config: {
+    is_required: 1,
+    quick_type: 0,
+    is_show: [],
+    version: 2,
+    prompt_left: '不可能',
+    prompt_right: '极有可能',
+    prompt_center: '',
+    max: 10,
+    min: 0,
+    score_interval: 1,
+    score_type: 0,
+    score_way: 1,
+    prompt_score: 2
+  },
+  associate: [],
+  question_code: '',
+  logic_config: {
+    order: 0,
+    type: 0,
+    expect: '',
+    stay_time: ''
+  }
+};
diff --git a/src/utils/QuestionJsons/SignQuestion.js b/src/utils/QuestionJsons/SignQuestion.js
new file mode 100644
index 0000000..c8e11da
--- /dev/null
+++ b/src/utils/QuestionJsons/SignQuestion.js
@@ -0,0 +1,37 @@
+export default {
+  id: '17852690',
+  title: 'Q7',
+  stem: '请留下您的姓名',
+  other: '',
+  question_index: 10,
+  question_type: 22,
+  config: {
+    is_required: 1,
+    select_random: 0,
+    float_window: 0,
+    float_window_content: '',
+    popup_window: 0,
+    popup_window_content: '',
+    is_show: [],
+    quick_type: 0
+  },
+  created_at: '2025-03-06T15:51:13',
+  created_user_id: 1281,
+  updated_user_id: null,
+  survey_id: 9482,
+  logic_config: {
+    expect: '',
+    order: 0,
+    type: 0,
+    stay_time: ''
+  },
+  options: [],
+  associate: [],
+  logics_has: null,
+  last_option_index: 0,
+  question_code: '',
+  question_value: '',
+  question_tag: '',
+  planet_id: '',
+  permissions: null
+};
diff --git a/src/utils/QuestionJsons/TextWithImages.js b/src/utils/QuestionJsons/TextWithImages.js
new file mode 100644
index 0000000..1c8d613
--- /dev/null
+++ b/src/utils/QuestionJsons/TextWithImages.js
@@ -0,0 +1,22 @@
+export default {
+  id: '',
+  question_type: '',
+  question_index: 0,
+  stem: '请认真阅读以下内容',
+  title: '',
+  options: [],
+  last_option_index: 0,
+  config: {
+    is_required: 1,
+    quick_type: 0,
+    is_show: []
+  },
+  associate: [],
+  question_code: '',
+  logic_config: {
+    order: 0,
+    type: 0,
+    expect: '',
+    stay_time: ''
+  }
+};
diff --git a/src/utils/importJsons.js b/src/utils/importJsons.js
index b952229..66ff0ab 100644
--- a/src/utils/importJsons.js
+++ b/src/utils/importJsons.js
@@ -4,3 +4,7 @@ export { default as checkbox } from './QuestionJsons/Checkbox.js';
 export { default as completion } from './QuestionJsons/Completion.js';
 export { default as rate } from './QuestionJsons/Rate.js';
 export { default as martrixQuestion } from './QuestionJsons/MartrixQuestion.js';
+export { default as fileUpload } from './QuestionJsons/FileUpload.js';
+export { default as textWithImages } from './QuestionJsons/TextWithImages.js';
+export { default as signQuestion } from './QuestionJsons/SignQuestion.js';
+export { default as nps } from './QuestionJsons/NPS.js';
diff --git a/src/views/Design/Index.vue b/src/views/Design/Index.vue
index dbc3f3e..4e30306 100644
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -87,7 +87,11 @@
           <template #action="{ element: el }">
             <div class="flex slot-actions">
               <template v-for="(item, optionIndex) in actionOptions">
-                <div v-if="item.question_type.includes(el.question_type)" :key="optionIndex" class="flex">
+                <div
+                  v-if="item.question_type.includes(el.question_type)"
+                  :key="optionIndex"
+                  class="flex"
+                >
                   <template v-for="(act, actIndex) in item.actions" :key="actIndex">
                     <div class="flex align-center action-item" @click="actionEvent(act, el)">
                       <van-icon :name="act.icon"></van-icon>
@@ -104,8 +108,11 @@
         <!--        {{questionInfo.survey.pages.length}}-->
         <div v-if="!filterGap">
           <paging
-            v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
-            :active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop=""
+            v-if="!element.question_type && questionInfo.survey.pages.length > 1"
+            :info="element"
+            :index="index"
+            :active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
+            @click.stop=""
           />
         </div>
       </template>
@@ -114,7 +121,7 @@
 </template>
 <script setup>
 import { v4 as uuidv4 } from 'uuid';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
 import Draggable from './components/Draggable.vue';
@@ -130,6 +137,27 @@ import FileUpload from './components/Questions/FileUpload.vue';
 import NPS from '@/views/Design/components/Questions/NPS.vue';
 
 const activeIndex = ref(-1);
+
+// 获取所有的 question 列表内容
+const { filterGap, activeId } = defineProps({
+  filterGap: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  activeId: {
+    type: String,
+    default: ''
+  }
+});
+
+watch(
+  () => activeId,
+  (newVal) => {
+    chooseQuestionId.value = newVal;
+  }
+);
+
 /**
  * 工具函数
  */
@@ -176,15 +204,6 @@ function util() {
   };
 }
 
-// 获取所有的 question 列表内容
-const { filterGap } = defineProps({
-  filterGap: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-});
-
 const { pageIsActive } = util();
 // 获取 Store 实例
 const counterStore = useCounterStore();
diff --git a/src/views/Design/components/Questions/Choice.vue b/src/views/Design/components/Questions/Choice.vue
index fb22bc7..6e58f9b 100644
--- a/src/views/Design/components/Questions/Choice.vue
+++ b/src/views/Design/components/Questions/Choice.vue
@@ -13,9 +13,13 @@
       <contenteditable v-model="element.stem" :active="active"></contenteditable>
     </template>
     <template #input>
-      <template v-for="(item, index) in element.options" :key="index">
+      <template v-for="(item, optionIndex) in element.options" :key="item.id">
         <van-radio-group v-if="element.question_type === 1">
-          <option-action v-model:data="element.options[index]" :active="active" :question="element">
+          <option-action
+            v-model:data="element.options[optionIndex]"
+            :active="active"
+            :question="element"
+          >
             <template #item="{ element: it, index: itIndex }">
               <van-radio
                 :key="itIndex"
diff --git a/src/views/Design/components/Questions/NPS.vue b/src/views/Design/components/Questions/NPS.vue
index dad0aad..808ef23 100644
--- a/src/views/Design/components/Questions/NPS.vue
+++ b/src/views/Design/components/Questions/NPS.vue
@@ -19,12 +19,11 @@
       </template>
       <template #input>
         <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
-          <div v-for="(item, index) in optionItem" :key="index" @click="chooseOption(item)">
-            <!--            <div-->
-            <!--              :contenteditable="item.id === chooseId"-->
-            <!--              class="van-field"-->
-            <!--              v-html="item.option"-->
-            <!--            ></div>-->
+          <div
+            v-for="(item, optionIndex) in optionItem"
+            :key="optionIndex"
+            @click="chooseOption(item)"
+          >
             <RateCharacter :config="element.config"></RateCharacter>
             <div class="tips">
               <p>{{ element.config.prompt_left }}</p>
diff --git a/src/views/Design/components/Questions/Rate.vue b/src/views/Design/components/Questions/Rate.vue
index cedcc02..642c8b3 100644
--- a/src/views/Design/components/Questions/Rate.vue
+++ b/src/views/Design/components/Questions/Rate.vue
@@ -19,7 +19,11 @@
       </template>
       <template #input>
         <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
-          <div v-for="(item, index) in optionItem" :key="index" @click="chooseOption(item)">
+          <div
+            v-for="(item, optionIndex) in optionItem"
+            :key="optionIndex"
+            @click="chooseOption(item)"
+          >
             <div
               :contenteditable="item.id === chooseId"
               class="van-field"
diff --git a/src/views/Design/components/Questions/SignQuestion.vue b/src/views/Design/components/Questions/SignQuestion.vue
index 9bb1526..98afe23 100644
--- a/src/views/Design/components/Questions/SignQuestion.vue
+++ b/src/views/Design/components/Questions/SignQuestion.vue
@@ -15,7 +15,12 @@ const currentStep = ref(-1);
 // 保存当前状态
 const saveState = () => {
   if (!ctx || !signatureCanvas.value) return;
-  const imageData = ctx.getImageData(0, 0, signatureCanvas.value.width, signatureCanvas.value.height);
+  const imageData = ctx.getImageData(
+    0,
+    0,
+    signatureCanvas.value.width,
+    signatureCanvas.value.height
+  );
   currentStep.value += 1;
   // 移除当前步骤之后的所有状态（处理在撤销后又进行了新的绘制的情况）
   undoStack.value.splice(currentStep.value);
@@ -58,15 +63,13 @@ onMounted(() => {
 
   // 触摸开始，开始绘制适用于移动设备
   signatureCanvas.value?.addEventListener('touchstart', (e) => {
-    e.preventDefault(); // 防止页面滚动
+    // 防止页面滚动
+    e.preventDefault();
     isDrawing = true;
     const rect = signatureCanvas.value!.getBoundingClientRect();
     const touch = e.touches[0];
     ctx.beginPath();
-    ctx.moveTo(
-      touch.clientX - rect.left,
-      touch.clientY - rect.top
-    );
+    ctx.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
   });
 
   signatureCanvas.value?.addEventListener('touchmove', (e) => {
@@ -74,10 +77,7 @@ onMounted(() => {
     if (!isDrawing) return;
     const rect = signatureCanvas.value!.getBoundingClientRect();
     const touch = e.touches[0];
-    ctx.lineTo(
-      touch.clientX - rect.left,
-      touch.clientY - rect.top
-    );
+    ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
     ctx.stroke();
   });
 
@@ -97,19 +97,13 @@ onMounted(() => {
     isDrawing = true;
     const rect = signatureCanvas.value!.getBoundingClientRect();
     ctx.beginPath();
-    ctx.moveTo(
-      e.clientX - rect.left,
-      e.clientY - rect.top
-    );
+    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
   });
 
   signatureCanvas.value?.addEventListener('mousemove', (e) => {
     if (!isDrawing) return;
     const rect = signatureCanvas.value!.getBoundingClientRect();
-    ctx.lineTo(
-      e.clientX - rect.left,
-      e.clientY - rect.top
-    );
+    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
     ctx.stroke();
   });
 
@@ -162,11 +156,13 @@ const undo = () => {
   <van-cell>
     <div class="sign-question">
       <canvas
-        ref="signatureCanvas" :width="canvasWidth" :height="canvasHeight"
-        style="border: 1px solid #ccc; border-radius: 4px;"
+        ref="signatureCanvas"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        style="border: 1px solid #ccc; border-radius: 4px"
       >
       </canvas>
-      <div class="sign-text" :class="{ 'show': showSignText }">
+      <div class="sign-text" :class="{ show: showSignText }">
         <span @click="clearCanvas">清空</span>
         <span @click="undo">撤销</span>
         <span @click="togglePen">{{ isEraser ? '画笔' : '橡皮擦' }}</span>
@@ -222,4 +218,4 @@ const undo = () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Survey/views/Create/Index.vue b/src/views/Survey/views/Create/Index.vue
index d6b9402..aeb0ec7 100644
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -8,10 +8,16 @@
 
     <van-cell-group inset class="result-cell">
       <div>
-        <div>请输入问卷标题</div>
         <div>
-          为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！ (此
-          提示语为默认提示语，您可选择自行输入本问卷的提示语）
+          <!--问卷标题-->
+          <contenteditable v-model="questionInfo.survey.title" :active="true"></contenteditable>
+        </div>
+        <div>
+          <!--          问卷标注-->
+          <contenteditable
+            v-model="questionInfo.survey.introduction"
+            :active="true"
+          ></contenteditable>
         </div>
 
         <button @click="show = true">添加题目</button>
@@ -20,36 +26,43 @@
 
     <div class="ques">
       <!--      题目-->
-      <Design @get-active-question="getActiveQuestion"></Design>
-      <van-button @click="show = true">添加题目</van-button>
+      <Design :active-id="activeId" @get-active-question="getActiveQuestion"></Design>
+      <!--      <van-button @click="show = true">添加题目</van-button>-->
       <!--   弹出的新增题目弹窗-->
-      <van-popup v-model:show="show" round position="bottom" :style="{ height: '50%' }">
+      <van-popup
+        v-model:show="show"
+        round
+        :closeable="true"
+        position="bottom"
+        :style="{ maxHeight: '50%' }"
+        title="添加题目"
+      >
         <van-row class="ques_title">
           <van-col :span="6">添加题目</van-col>
-          <van-col :span="6" :offset="12" @click="show = false">
-            <van-icon name="close" />
-          </van-col>
         </van-row>
-        <ul>
-          <li v-for="item in quesList" :key="item.type" @click="questionEvent(item)">
-            <div>
-              <van-icon :name="item.icon" size="20" />
-              <p>{{ item.name }}</p>
-            </div>
-          </li>
-        </ul>
+
+        <van-grid :gutter="10" class="ques_list">
+          <van-grid-item
+            v-for="item in quesList"
+            :key="item.type"
+            :icon="item.icon"
+            icon-color="#70b936"
+            :text="item.name"
+            @click="questionEvent(item)"
+          >
+            <template #icon>
+              <span class="mobilefont grid-icon" v-html="item.icon"></span>
+            </template>
+          </van-grid-item>
+        </van-grid>
       </van-popup>
     </div>
 
-    <van-cell-group inset class="thanks-cell">
-      <div>您已完成本次调研，感谢您的参与！</div>
-    </van-cell-group>
-
     <!-- 底部功能性按钮 -->
     <div class="survey-action">
-      <div class="survey-action_setting">
-        <van-icon name="setting" size="18" />
-        <span>设置</span>
+      <div class="survey-action_setting" @click="openSettingAction">
+        <van-icon name="setting" size="18" class="grid-icon" />
+        <span>投放设置</span>
       </div>
       <div class="survey-action_btn">
         <van-button size="small">预览</van-button>
@@ -58,6 +71,186 @@
       </div>
     </div>
   </div>
+
+  <!--  投放设置-->
+
+  <van-action-sheet v-model:show="showSetting" title="">
+    <template #description>
+      <div class="flex flex-start">设置</div>
+    </template>
+    <van-cell-group :border="false" class="ml10">
+      <van-cell title="每页一题" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_page_one_question"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-divider></van-divider>
+      <van-cell title="投放数量" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_publish_number"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-cell-group
+        v-if="questionInfo.survey.is_publish_number === 1"
+        class="child-group"
+        :border="false"
+      >
+        <van-field label="投放数量最大为" input-align="right">
+          <template #right-icon> 份 </template>
+        </van-field>
+      </van-cell-group>
+      <van-divider></van-divider>
+      <van-cell title="有效期" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_time"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <!--有效期-->
+      <van-cell-group v-if="questionInfo.survey.is_time === 1" class="child-group" :border="false">
+        <van-field
+          v-model="questionInfo.survey.startTime"
+          is-link
+          label="起始时间"
+          input-align="right"
+          readonly
+          @click="showTimePicker('start', questionInfo.survey.startTime)"
+        >
+        </van-field>
+        <van-field
+          v-model="questionInfo.survey.endTime"
+          is-link
+          label="截至时间"
+          input-align="right"
+          readonly
+          @click="showTimePicker('end', questionInfo.survey.endTime)"
+        >
+        </van-field>
+      </van-cell-group>
+
+      <van-cell title="断点续答" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_breakpoint"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+
+      <van-cell
+        title="企微身份获取(开启后仅支持私有化企业环境作答)"
+        :border="false"
+        label-align="left"
+      >
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.wework_status"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-divider></van-divider>
+      <van-cell title="IP答题次数限制" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_ip_number"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-cell-group v-if="questionInfo.survey.is_ip_number === 1" class="child-group">
+        <van-field
+          v-model="questionInfo.survey.is_number"
+          label="同一个IP地址只能作答"
+          :border="false"
+          input-align="right"
+        >
+          <template #right-icon> 次 </template>
+        </van-field>
+      </van-cell-group>
+      <van-cell title="设备答题次数限制" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="questionInfo.survey.is_browser_number"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-cell-group
+        v-if="questionInfo.survey.is_browser_number === 1"
+        class="child-group"
+        :border="false"
+      >
+        <van-field
+          v-model="questionInfo.survey.browser_number"
+          label="同一个浏览器只能作答"
+          :border="false"
+          input-align="right"
+        >
+          <template #right-icon> 次 </template>
+        </van-field>
+      </van-cell-group>
+      <van-divider></van-divider>
+      <van-field
+        v-model="endText"
+        label="结束语"
+        :border="false"
+        readonly
+        label-align="left"
+        input-align="right"
+        is-link
+        @click="openEndTextModel"
+      >
+      </van-field>
+    </van-cell-group>
+  </van-action-sheet>
+
+  <!--时间选择-->
+  <van-popup v-model:show="timePickerModel" position="bottom" round>
+    <YLPicker
+      title=""
+      :showPicker="timePickerModel"
+      :values="currentDate"
+      format="YYYY-MM-DD HH:mm:ss"
+      :units="['年', '月', '日', '时', '分', '秒']"
+      @cancel="timePickerModel = false"
+      @confirm="onConfirmDate"
+    ></YLPicker>
+  </van-popup>
+
+  <!-- 结束语选择-->
+  <van-popup v-model:show="textModel" position="bottom" round>
+    <van-picker :columns="columns" @confirm="onConfirm"></van-picker>
+  </van-popup>
 </template>
 
 <script setup lang="ts">
@@ -66,8 +259,19 @@ import Design from '@/views/Design/Index.vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
 import { v4 as uuidv4 } from 'uuid';
-import { radio, checkbox, completion, rate, martrixQuestion } from '@/utils/importJsons';
+import {
+  radio,
+  checkbox,
+  completion,
+  rate,
+  martrixQuestion,
+  fileUpload,
+  textWithImages,
+  signQuestion,
+  nps
+} from '@/utils/importJsons';
 import { useRoute } from 'vue-router';
+import YLPicker from '@/components/YLPicker.vue';
 
 // 获取 Store 实例
 const counterStore = useCounterStore();
@@ -78,9 +282,62 @@ const questionInfo = ref(store.questionsInfo.value);
 
 const activeQuestionIndex = ref(-1);
 
+const currentDate = ref();
+const currentType = ref();
 const route = useRoute();
 const surveyTitle = route.meta.title as string;
 const show = ref(false);
+const textModel = ref(false);
+const activeId = ref(0);
+
+const showSetting = ref(false);
+const timePickerModel = ref(false);
+
+// picker 结束语选择器
+
+const columns = ref([
+  {
+    text: '成功完成',
+    value: '1'
+  },
+  {
+    text: '题前终止',
+    value: '2'
+  },
+  {
+    text: '配额超限',
+    value: '3'
+  }
+]);
+
+const endText = ref('');
+const onConfirm = (ev) => {
+  endText.value = columns.value[ev.selectedValues[0] - 1].text;
+  textModel.value = false;
+};
+
+const openSettingAction = () => {
+  showSetting.value = true;
+};
+
+const showTimePicker = (type, value) => {
+  timePickerModel.value = true;
+  currentType.value = type;
+  currentDate.value = value;
+};
+
+const openEndTextModel = () => {
+  textModel.value = true;
+};
+
+const onConfirmDate = (e) => {
+  if (currentType.value === 'start') {
+    questionInfo.value.survey.startTime = e;
+  } else {
+    questionInfo.value.survey.endTime = e;
+  }
+  timePickerModel.value = false;
+};
 
 // 获取选中的题目
 const getActiveQuestion = (activeQues) => {
@@ -95,21 +352,21 @@ const getActiveQuestion = (activeQues) => {
 
 const quesList = ref([
   {
-    icon: 'location-o',
+    icon: '&#xe75b;',
     name: '单选题',
     question_type: '1',
     json: radio
   },
   {
-    icon: 'like-o',
+    icon: '&#xe6c3;',
     name: '多选题',
-    question_type: '2',
+    question_type: 2,
     json: checkbox
   },
   {
-    icon: 'star-o',
+    icon: '&#xe6fd;',
     name: '填空题',
-    question_type: '3',
+    question_type: 4,
     json: completion
   },
   // {
@@ -119,89 +376,75 @@ const quesList = ref([
   //   json: rate
   // },
   {
-    icon: 'cart-o',
+    icon: '&#xe641;',
     name: '数值打分',
-    question_type: '4',
+    question_type: 5,
     json: rate
   },
   {
-    icon: 'comment-o',
+    icon: '&#x13c7f;',
     name: '矩阵单选',
-    question_type: '8',
+    question_type: 9,
     json: martrixQuestion
   },
   {
-    icon: 'bag-o',
+    icon: '&#xe818;',
     name: '矩阵多选',
-    question_type: '9',
+    question_type: 10,
     json: martrixQuestion
   },
   {
-    icon: 'gift-o',
+    icon: '&#xe62e;',
     name: '矩阵填空',
-    question_type: '10',
+    question_type: 8,
     json: martrixQuestion
   },
   {
-    icon: 'bag-o',
+    icon: '&#xe631;',
     name: '文件上传',
-    question_type: '9'
+    question_type: 18,
+    json: fileUpload
   },
   {
-    icon: 'bag-o',
+    icon: '&#xe62c;',
+    name: '图文说明',
+    question_type: 6,
+    json: textWithImages
+  },
+  {
+    icon: '&#xe661;',
+    name: '签名',
+    question_type: 22,
+    json: signQuestion
+  },
+  {
+    icon: '&#xe6b0;',
     name: 'NPS',
-    question_type: '106'
+    question_type: 106,
+    json: nps
   }
 ]);
 
 const questionEvent = (item) => {
   let questionJson = {};
-  // switch (item.question_type) {
-  //   // 单选 多选
-  //   case '1':
-  //   case '2':
-  //
-  //
-  //     break;
-  //   //   填空
-  //   case '3':
-  //     questionJson = JSON.parse(
-  //       JSON.stringify({
-  //         ...item.json,
-  //         id: uuidv4(),
-  //         question_index: questionInfo.value.survey.last_question_index + 1
-  //       })
-  //     );
-  //     break;
-  //   //   图形打分
-  //   case '4':
-  //     questionJson = JSON.parse(
-  //       JSON.stringify({
-  //         ...item.json,
-  //         id: uuidv4(),
-  //         question_index: questionInfo.value.survey.last_question_index + 1
-  //       })
-  //     );
-  //     break
-  // }
-
+  const id = uuidv4();
   questionJson = JSON.parse(
     JSON.stringify({
       ...item.json,
-      id: uuidv4(),
+      id,
       question_type: Number(item.question_type),
       question_index: questionInfo.value.survey.last_question_index + 1,
       options:
         item.json.options.length > 0
           ? item.json.options.map((item) => {
-              return item.map((it) => {
-                return {
-                  ...it,
-                  // 主键生成
-                  id: uuidv4()
-                };
-              });
-            })
+            return item.map((it) => {
+              return {
+                ...it,
+                // 主键生成
+                id: uuidv4()
+              };
+            });
+          })
           : []
     })
   );
@@ -213,6 +456,8 @@ const questionEvent = (item) => {
   }
   // 更新题目索引
   questionInfo.value.survey.last_question_index += 1;
+  activeId.value = id;
+  show.value = false;
 };
 
 const init = () => {
@@ -257,34 +502,41 @@ defineExpose({ init });
 }
 
 .thanks-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 70px;
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
+  //height: 70px;
   margin: 10px 5px;
 }
 
+.grid-icon {
+  color: #70b936;
+  font-size: 25px;
+}
+
 .ques {
   .ques_title {
-    margin: 20px 0 10px;
+    margin: 20px 0 10px 20px;
     font-weight: bold;
     font-size: 16px;
   }
 
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 10px;
+  .ques_list {
+    margin-bottom: 10px;
+  }
+}
 
-    li {
-      width: 80px;
-      margin: 5px;
-      padding: 10px;
-      background-color: #f7fbf5;
-      font-weight: bold;
-      font-size: 14px;
-    }
+.child-group {
+  & ::v-deep .van-field__label {
+    width: 140px;
+    color: #bfbfbf;
+    font-size: 12px;
+  }
+
+  & ::v-deep .van-cell__title {
+    width: 140px;
+    color: #bfbfbf;
+    font-size: 12px;
   }
 }
 
@@ -294,9 +546,11 @@ defineExpose({ init });
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-around;
+  justify-content: space-between;
   width: 100%;
   height: 50px;
+
+  //margin: 0 10px;
   background-color: white;
 
   .survey-action_setting {
@@ -304,14 +558,20 @@ defineExpose({ init });
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 10%;
+    margin-left: 10px;
+
+    //width: 10%;
   }
 
   .survey-action_btn {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
-    width: 60%;
+    justify-content: space-between;
+    margin-right: 10px;
+
+    & .van-button + .van-button {
+      margin-left: 10px;
+    }
   }
 }
 </style>