From ebc1bf5c343dcb407465108cff56cb34b1036c77 Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Mon, 17 Mar 2025 15:57:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E8=A7=88=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 订正预览样式内容
- 分页逻辑变更
- style lint
---
 components.d.ts                               |   2 +
 src/stores/Questions/useQuestionStore.ts      |   2 +-
 .../Design/components/Questions/Choice.vue    |   4 -
 .../components/Questions/MartrixQuestion.vue  |  27 +-
 .../components/Questions/MatrixRadio.vue      |   2 +-
 .../Home/components/LastSurvey/Index.vue      |   2 +-
 src/views/Home/components/Market/Index.vue    |   4 +-
 src/views/Survey/views/Create/Index.vue       |  48 +---
 src/views/Survey/views/Preview/Index.vue      | 260 +++++++++---------
 .../components/PfePagination/Index.vue        | 133 ++-------
 .../components/questions/PreviewChoice.vue    |  37 +--
 .../Preview/components/questions/QLast.vue    |   8 +-
 .../Preview/components/questions/Question.vue | 215 +++------------
 src/views/Survey/views/Publish/Index.vue      |  50 ++--
 14 files changed, 243 insertions(+), 551 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 8457d1e..fbd6036 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,11 +9,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElText: typeof import('element-plus/es')['ElText']
diff --git a/src/stores/Questions/useQuestionStore.ts b/src/stores/Questions/useQuestionStore.ts
index f10748c..50705f9 100644
--- a/src/stores/Questions/useQuestionStore.ts
+++ b/src/stores/Questions/useQuestionStore.ts
@@ -7,7 +7,7 @@ export const useQuestionStore = defineStore('questionStore', () => {
   // styleInfo 主题样式
   const styleInfo = computed(() => questionsData.value?.survey?.style || {});
   // 当前页数
-  const page = ref(0);
+  const page = ref(1);
   // 分页
   const pages = computed(() => questionsData.value?.answer?.pages || []);
   // 加载
diff --git a/src/views/Design/components/Questions/Choice.vue b/src/views/Design/components/Questions/Choice.vue
index cd79316..de1dee7 100644
--- a/src/views/Design/components/Questions/Choice.vue
+++ b/src/views/Design/components/Questions/Choice.vue
@@ -137,10 +137,6 @@ const emitValue = () => {
 };
 </script>
 <style scoped lang="scss">
-.choice-html {
-  width: 100%;
-}
-
 .base-select {
   & .van-checkbox-group,
   .van-radio-group {
diff --git a/src/views/Design/components/Questions/MartrixQuestion.vue b/src/views/Design/components/Questions/MartrixQuestion.vue
index 45e068e..38c6df3 100644
--- a/src/views/Design/components/Questions/MartrixQuestion.vue
+++ b/src/views/Design/components/Questions/MartrixQuestion.vue
@@ -6,7 +6,7 @@ const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
 // 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
 // 类型 AI 生成 切勿盲目相信，以实际为准
 const props = defineProps<{
-  element: Any;
+  element: any;
   index: number;
   active: boolean;
 }>();
@@ -40,9 +40,7 @@ const emitValue = () => {
 
 <template>
   <van-field
-    v-model="element.stem"
-    :label="element.stem"
-    :required="element.config.is_required === 1"
+    v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
     label-align="top"
   >
     <template #left-icon>
@@ -62,11 +60,7 @@ const emitValue = () => {
             <th></th>
             <!-- 第二行内容开始填充 -->
             <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
-              <contenteditable
-                v-model="col.option"
-                :active="active"
-                @blur="emitValue"
-              ></contenteditable>
+              <contenteditable v-model="col.option" :active="active" @blur="emitValue"></contenteditable>
             </td>
 
             <th></th>
@@ -76,11 +70,7 @@ const emitValue = () => {
           <tr v-for="row in element.options[0]" :key="row.option">
             <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
             <td>
-              <contenteditable
-                v-model="row.option"
-                :active="active"
-                @blur="emitValue"
-              ></contenteditable>
+              <contenteditable v-model="row.option" :active="active" @blur="emitValue"></contenteditable>
             </td>
             <td v-for="col in element.options[1]" :key="col.option" class="td-input">
               <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
@@ -88,11 +78,8 @@ const emitValue = () => {
             </td>
 
             <td v-if="element.config.is_limit_right_content === 1">
-              <contenteditable
-                v-model="row.option_config.limit_right_content"
-                :active="active"
-                @blur="emitValue"
-              ></contenteditable>
+              <contenteditable v-model="row.option_config.limit_right_content" :active="active" @blur="emitValue">
+              </contenteditable>
             </td>
           </tr>
         </tbody>
@@ -150,7 +137,7 @@ input[type='radio'] {
     display: flex;
     justify-content: flex-end;
 
-    & > span {
+    &>span {
       margin-right: 6px;
       font-size: 16px;
     }
diff --git a/src/views/Design/components/Questions/MatrixRadio.vue b/src/views/Design/components/Questions/MatrixRadio.vue
index 0dd8f5b..79b2110 100644
--- a/src/views/Design/components/Questions/MatrixRadio.vue
+++ b/src/views/Design/components/Questions/MatrixRadio.vue
@@ -22,7 +22,7 @@
         <th v-html="row.option"></th>
         <td v-for="(col, colIndex) in cols" :key="colIndex">
           <input
-            type="radio"
+            type="     "
             :name="`R${rowIndex + 1}`"
             :value="`${rowIndex + 1}_${colIndex + 1}`"
             :checked="isOptionChecked(rowIndex, colIndex)"
diff --git a/src/views/Home/components/LastSurvey/Index.vue b/src/views/Home/components/LastSurvey/Index.vue
index 8e92d01..f2fe084 100644
--- a/src/views/Home/components/LastSurvey/Index.vue
+++ b/src/views/Home/components/LastSurvey/Index.vue
@@ -46,7 +46,7 @@ import { getSurveysPage } from '@/api/home/index.js';
 const survey = ref({
   project_name: ''
 });
-const fetchSurveys = async () => {
+const fetchSurveys = async() => {
   const params = {
     page: 1,
     per_page: 10,
diff --git a/src/views/Home/components/Market/Index.vue b/src/views/Home/components/Market/Index.vue
index e3e27a7..d415552 100644
--- a/src/views/Home/components/Market/Index.vue
+++ b/src/views/Home/components/Market/Index.vue
@@ -20,7 +20,7 @@ const marketList = ref([]);
 const active = ref(null);
 const marketInfo = ref([]);
 
-const getTableList = async () => {
+const getTableList = async() => {
   const res = await getListScene();
   if (res.data.code === 0) {
     res.data.data.forEach((item) => {
@@ -31,7 +31,7 @@ const getTableList = async () => {
     getMarketInfo(marketList.value[0]);
   }
 };
-const getMarketInfo = async (item) => {
+const getMarketInfo = async(item) => {
   const data = marketList.value.filter((market, index) => item === index)[0];
   if (data) {
     const params = {
diff --git a/src/views/Survey/views/Create/Index.vue b/src/views/Survey/views/Create/Index.vue
index 1e0a2ca..52f2477 100644
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="container">
     <van-nav-bar
-      class="navbar-header"
-      :title="surveyTitle"
-      left-text=""
-      left-arrow
-      @click-left="$router.go(-1)"
+      class="navbar-header" :title="surveyTitle" left-text="" left-arrow :border="false" @click-left="$router.go(-1)"
     >
       <template #left>
         <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
@@ -15,17 +11,11 @@
     <div class="question-title flex space-between">
       <div class="title-left">
         <!--问卷标题-->
-        <contenteditable
-          v-model="questionInfo.survey.title"
-          className="content-title"
-          :active="true"
-          @blur="saveTitle"
-        ></contenteditable>
+        <contenteditable v-model="questionInfo.survey.title" className="content-title" :active="true" @blur="saveTitle">
+        </contenteditable>
         <!--          问卷标注-->
         <contenteditable
-          v-model="questionInfo.survey.introduction"
-          className="introduction"
-          :active="true"
+          v-model="questionInfo.survey.introduction" className="introduction" :active="true"
           @blur="saveTitle"
         ></contenteditable>
       </div>
@@ -62,9 +52,7 @@
               <img :src="emptyImage" alt="" class="empty-image" />
             </div>
             <van-button
-              v-if="questionInfo.questions.length === 0"
-              class="theme-background"
-              size="small"
+              v-if="questionInfo.questions.length === 0" class="theme-background" size="small"
               @click="show = true"
             >
               + 添加题目
@@ -75,11 +63,7 @@
       <!--      <van-button @click="show = true">添加题目</van-button>-->
       <!--   弹出的新增题目弹窗-->
       <van-popup
-        v-model:show="show"
-        round
-        :closeable="true"
-        position="bottom"
-        :style="{ maxHeight: '50%' }"
+        v-model:show="show" round :closeable="true" position="bottom" :style="{ maxHeight: '50%' }"
         title="添加题目"
       >
         <van-row class="ques_title">
@@ -88,12 +72,8 @@
 
         <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)"
+            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>
@@ -604,10 +584,6 @@ onMounted(async () => {
   }
 }
 
-::v-deep .van-hairline--bottom::after {
-  display: none;
-}
-
 .container {
   //height: 100vh;
   background-color: #f5f5f5;
@@ -657,7 +633,7 @@ onMounted(async () => {
   margin: 10px 5px;
   padding: 5px;
 
-  & > div {
+  &>div {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -684,7 +660,7 @@ onMounted(async () => {
   .design-button {
     text-align: center;
 
-    & > button {
+    &>button {
       padding: 0.5rem;
       border-radius: 8px;
       background: rgba(240, 248, 235, 1);
@@ -707,7 +683,7 @@ onMounted(async () => {
       margin-top: 40px;
     }
 
-    & > button {
+    &>button {
       margin-top: 40px;
       padding: 0.5rem;
       border-radius: 5px;
@@ -795,7 +771,7 @@ onMounted(async () => {
     justify-content: space-between;
     margin-left: 8px;
 
-    & .van-button + .van-button {
+    & .van-button+.van-button {
       margin-left: 10px;
     }
   }
diff --git a/src/views/Survey/views/Preview/Index.vue b/src/views/Survey/views/Preview/Index.vue
index 6c0a500..3e61bea 100644
--- a/src/views/Survey/views/Preview/Index.vue
+++ b/src/views/Survey/views/Preview/Index.vue
@@ -1,24 +1,37 @@
 <template>
-  <div ref="scrollbar" class="container">
-    <van-nav-bar title="预览" left-arrow />
+  <van-nav-bar
+    left-arrow style="background-color: var(--primary-color);" :border="false" class="preview-nav"
+    @click-left="$route.go(-1)"
+  >
+    <template #left>
+      <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: white" />
+    </template>
+    <template #title>
+      <el-text style="color: white;">预览</el-text>
+    </template>
+  </van-nav-bar>
+  <div ref="scrollbar" class="preview-container">
     <!--    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->
 
     <!--     进度条 -->
-    <div v-if="styleInfo.is_progress" class="progress-bar">
+    <!-- <div v-if="styleInfo.is_progress" class="progress-bar">
       <progress-bar :percent="(page / (pages.length + 1)) * 100" :color="styleInfo.button_color" />
-    </div>
+    </div> -->
 
     <!-- 头图 -->
     <!--    <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"-->
     <!--         :src="styleInfo.head_img_url" />-->
     <!-- LOGO -->
-    <van-cell-group v-if="page !== 0 && page !== pages.length + 1">
-      <van-cell-group>
-        <van-field :label="getDomString(questionsData?.survey?.title)" label-align="top">
-          <template #input>{{ getDomString(questionsData?.survey?.introduction) }}</template>
-        </van-field>
-      </van-cell-group>
-    </van-cell-group>
+    <van-field v-if="page !== 0 && page !== pages.length + 1" label-align="top" class="preview-info">
+      <template #label>
+        <h1 class="preview-info-header">
+          <div v-html="questionsData?.survey?.title"></div>
+        </h1>
+      </template>
+      <template #input>
+        <div class="preview-info-header-desc" v-html="questionsData?.survey?.introduction"></div>
+      </template>
+    </van-field>
     <div v-if="styleInfo.logo_status && styleInfo.logo_url" class="example-logo" :style="[
       {
         'justify-content':
@@ -37,25 +50,28 @@
     ]">
       <img class="logo" :src="styleInfo.logo_url" alt="logo" />
     </div>
+
     <!-- 问题 -->
     <!-- eslint-disable-next-line  -->
-    <div class="questions" :style="`min-height: ${styleInfo.head_img_status ? 'calc(100% - 240px)' : '100%'};${styleInfo.background_status
-      ? `background-color: ${styleInfo.background_color};background-image: url(${styleInfo.background_url})`
-      : ''
-      }`">
+    <div class="questions">
       <!-- 提前终止和正常完成 -->
-      <q-last v-if="page === pages.length + 1" :code="questionsData.action?.code" :action="questionsData.action"
-        :survey="questionsData.survey" :isAnswer="isAnswer" :isTemplate="isTemplate" />
+      <q-last v-if="page === pages.length + 1" :code="questionsData?.action?.code" :action="questionsData?.action"
+        :survey="questionsData?.survey" :isAnswer="isAnswer" :isTemplate="isTemplate" />
       <!-- 问卷名和描述 -->
-      <q-first v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
+      <!-- <q-first v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
         :desc="questionsData?.survey?.introduction" :questions="questionsData?.questions" :isAnswer="isAnswer"
-        :showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title" />
+        :showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title" /> -->
       <!-- 题-mobile -->
-      <question v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
+      <!-- <question v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
         :key="question.question_index" class="question" :tip="question.tip" :stem="question.stem"
         :title="question.title" :error="question.error" :warning="question.warning" :questions="questionsData.questions"
         :questionType="question.question_type" :questionIndex="question.question_index"
-        :showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer">
+        :showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer"> -->
+
+      <div
+        v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
+        :key="question.question_index" class="question"
+      >
         <!--        <q-radio-->
         <!--          v-if="question.question_type === 1"-->
         <!--          :list="question.list"-->
@@ -383,37 +399,45 @@
           :isAnswer="isAnswer" :questionIndex="question.question_index" :label="question.title" :loading="loading"
           :isTemplate="isTemplate" :showTitle="styleInfo.is_question_number" :question="question" @previous="previous"
           @next="next" @change-answer="onRelation($event, question)" />
-      </question>
-      <!-- 分页 -->
-      <!-- eslint-disable max-len -->
-      <div v-show="showPage" class="footer-page">
-        <pfe-pagination class="pagination" :page="page" :pages="pages.length + 1" :min="styleInfo.is_home ? 0 : 1"
-          :loading="loading" :showPrevious="styleInfo.is_up_button" :showStart="styleInfo.is_start_button"
-          :startText="styleInfo.start_button_text" :showSubmit="styleInfo.is_submit_button" :submitText="localPageTimer.is_show && localPageTimer.short_time
-            ? `${localPageTimer.short_time}S`
-            : styleInfo.submit_button_text
-            " :buttonTextColor="styleInfo.button_text_color" :buttonColor="styleInfo.button_color" :nextText="localPageTimer.is_show && localPageTimer.short_time
-              ? `${localPageTimer.short_time}S`
-              : ''
-              " :nextDisabled="localPageTimer.short_time" isMobile @previous="previous" @next="next" />
       </div>
-      <!-- eslint-enable max-len -->
-      <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
-        class="footer" />
+      <div style="margin: 10px 0;color: rgba(75, 75, 89, 1); text-align: center">
+        <el-text>
+          由数字科技中心YIP提供支持
+        </el-text>
+      </div>
+      <!--       <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
+        class="footer" /> -->
     </div>
+
+    <!-- 分页 -->
+    <!-- eslint-disable max-len -->
+    <div v-show="showPage" class="footer-page">
+      <pfe-pagination
+        class="pagination" :page="page" :pages="pages.length + 1" :min="styleInfo.is_home ? 0 : 1"
+        :loading="loading" :showPrevious="styleInfo.is_up_button" :showStart="styleInfo.is_start_button"
+        :startText="styleInfo.start_button_text" :showSubmit="styleInfo.is_submit_button" :submitText="localPageTimer.is_show && localPageTimer.short_time
+          ? `${localPageTimer.short_time}S`
+          : styleInfo.submit_button_text
+        " :buttonTextColor="styleInfo.button_text_color" :buttonColor="styleInfo.button_color" :nextText="localPageTimer.is_show && localPageTimer.short_time
+          ? `${localPageTimer.short_time}S`
+          : ''
+        " :nextDisabled="localPageTimer.short_time" isMobile @previous="previous" @next="next"/>
+
+    </div>
+    <!-- eslint-enable max-len -->
   </div>
 </template>
 
 <script setup>
 import { useTemplateRef } from 'vue';
-import LangTranslate from './components/LangTranslate.vue';
+// import LangTranslate from './components/LangTranslate.vue';
 import QLast from '@/views/Survey/views/Preview/components/questions/QLast.vue';
-import Question from '@/views/Survey/views/Preview/components/questions/Question.vue';
-import QFirst from '@/views/Survey/views/Preview/components/questions/QFirst.vue';
+// import Question from '@/views/Survey/views/Preview/components/questions/Question.vue';
+// import QFirst from '@/views/Survey/views/Preview/components/questions/QFirst.vue';
 import PfePagination from './components/PfePagination/Index.vue';
 import { storeToRefs } from 'pinia';
 import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
-import ProgressBar from './components/ProcessBar/Index.vue';
+// import ProgressBar from './components/ProcessBar/Index.vue';
 import { AnswerApi } from './js/api';
 import { useRoute, useRouter } from 'vue-router';
 import { getLanguage } from '@/views/Survey/views/Preview/js/language';
@@ -488,11 +512,11 @@ async function getQuestions () {
 }
 
 // 获取 DOM 的内容
-function getDomString (htmlString) {
-  if (typeof htmlString !== 'string') return;
-  const match = htmlString.match(/<.*>(.*?)<\/.*>/);
-  if (match) return match[1];
-}
+// function getDomString (htmlString) {
+//   if (typeof htmlString !== 'string') return;
+//   const match = htmlString.match(/<.*>(.*?)<\/.*>/);
+//   if (match) return match[1];
+// }
 
 // 上一页
 async function previous () {
@@ -1363,108 +1387,70 @@ function onRelation (
 }
 </script>
 <style lang="scss" scoped>
-.main {
-  position: relative;
+::v-deep .van-cell::after {
+  display: none;
+}
+
+.preview-container {
   overflow: hidden;
-  width: 1200px;
-  height: calc(100vh - 78px);
-  margin: 0 auto;
-  border-radius: 6px;
-  background-color: #fff;
-
-  .progress-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-  }
-
-  .bg {
-    width: 100%;
-    height: 100%;
-
-    // object-fit: cover;
-  }
-
-  .example-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .main-scrollbar {
-    //overflow: overlay;
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-  }
-
-  .head-img {
-    object-fit: cover;
-    width: 100%;
-    height: 248px;
-  }
-
-  .example-logo {
-    top: 0;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-top: 24px;
-
-    .logo {
-      object-fit: cover;
-      width: 60px;
-      height: 60px;
-      border-radius: 5px;
-    }
-  }
+  min-height: calc(100vh - 100px);
+  padding: 10px;
+  background: linear-gradient(to bottom, #71b73c 200px, #f2f2f2 300px);
 
   .questions {
-    padding: 40px 80px;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-
-    .q-last {
-      margin-bottom: -72px;
-    }
+    overflow: hidden;
+    padding-bottom: 50px;
 
     .question {
-      margin-bottom: 40px;
+      overflow: hidden;
+      margin-top: 10px;
+      padding: 10px;
+      border: 1px solid #e5e5e5;
+      border-radius: 16px;
+      background-color: white;
     }
+  }
 
-    .pagination {
-      margin-top: 72px;
-    }
+  .footer-page {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 50px;
+    padding-top: 8px;
+    border-radius: 16px 16px 0 0;
+    background-color: white;
   }
 }
 
-.default {
-  background-position: calc(100% - 10px) 24px;
-  background-size: 224px 118px;
-  background-repeat: no-repeat;
+.preview-info {
+  margin: 0;
+  background-color: transparent;
 
-  //background-image: url('../../../assets/img/answer/pc-bg.png');
-}
+  @mixin preview-info-header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    width: 100%;
+  }
 
-.footer {
-  position: fixed;
-  bottom: 5px;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
-  color: #a3a3a3;
-  font-size: 14px;
-  line-height: 20px;
+  .preview-info-header {
+    @include preview-info-header;
+
+    color: white;
+    font-size: 16px;
+
+    &> :first-child {
+      max-width: 70%;
+    }
+  }
+
+  .preview-info-header-desc {
+    @include preview-info-header;
+
+    font-size: 12px;
+    line-height: 18px;
+  }
 }
 </style>
diff --git a/src/views/Survey/views/Preview/components/PfePagination/Index.vue b/src/views/Survey/views/Preview/components/PfePagination/Index.vue
index 6d8bf85..8acc73e 100644
--- a/src/views/Survey/views/Preview/components/PfePagination/Index.vue
+++ b/src/views/Survey/views/Preview/components/PfePagination/Index.vue
@@ -1,40 +1,25 @@
 <template>
-  <div class="pagination-mob">
+  <van-row class="pagination-mob" :gutter="10">
     <!-- mob端 -->
-    <div v-show="showPrevious && page > min && page < pages">
-      <div
-        class="pfe-button btn previous my-btn"
-        :style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
-        @click="previous"
-      >
-        <i class="iconfont">&#xe67f;</i>
-        <span>preview button</span>
-        <span>{{ prevButtonText }}</span>
-      </div>
-    </div>
-    <div v-show="page < pages">
-      <div
-        class="pfe-button btn next my-btn"
-        :class="nextDisabled ? 'disabled' : ''"
-        :style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
-        @click="next"
-      >
-        <span>start button</span>
-
-        <span>{{
-          showStart && page === 0
-            ? startText
-            : showSubmit && page + 1 === pages
-              ? submitText
-              : nextText || nextButtonText
-        }}</span>
-        <i v-show="page + 1 !== pages" class="iconfont">&#xe670;</i>
-      </div>
-    </div>
-  </div>
+    <van-col :span="12">
+      <van-button v-show="showLastButton" color="#71b73c" @click="previous">
+        {{ prevButtonText }}
+      </van-button>
+    </van-col>
+    <van-col :span="showLastButton ? 12 : 24">
+      <van-button v-show="page < pages" color="#71b73c" @click="next">
+        {{ showStart && page === 0
+          ? startText
+          : showSubmit && page + 1 === pages
+            ? submitText
+            : nextText || nextButtonText }}
+      </van-button>
+    </van-col>
+  </van-row>
 </template>
 
 <script>
+
 import { computed, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
@@ -143,93 +128,29 @@ export default defineComponent({
       }
     }
 
+    const showLastButton = computed(() => props.showPrevious && props.page > props.min && props.page < props.pages - 1);
     return {
       prevButtonText,
       nextButtonText,
       previous,
-      next
+      next,
+      showLastButton
     };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .p-btn {
-    min-width: 96px;
-    margin: 0 12px;
-    border: 0;
-
-    :deep(span) {
-      white-space: pre;
-    }
-  }
-}
-
 .pagination-mob {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: end;
+  justify-content: space-between;
+  padding: 0 10px;
 
-  .spin {
-    width: calc(50% - 30px);
-
-    .btn {
-      width: 100%;
-    }
+  .van-button {
+    width: 100%;
+    height: 35px;
+    border-radius: 8px;
   }
-
-  .prev-spin {
-    margin-right: 20px;
-  }
-
-  .btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: calc(50% - 30px);
-    height: 44px;
-    border-radius: 4px;
-    font-size: 16px;
-    cursor: pointer;
-
-    .iconfont {
-      font-size: 16px;
-    }
-  }
-
-  .previous {
-    background-color: #fff;
-    color: #70b936;
-
-    // border: 1px solid $yili-default-color;
-    //margin-right: 20px;
-
-    .iconfont {
-      margin-right: 8px;
-    }
-  }
-
-  .next {
-    background: #70b936;
-    color: #fff;
-
-    .iconfont {
-      margin-left: 8px;
-    }
-  }
-}
-
-.my-btn:not(.disabled):active {
-  opacity: 0.8;
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
 </style>
diff --git a/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue b/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
index 2ffc839..6e691f6 100644
--- a/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
@@ -42,39 +42,4 @@ watch(
     emit('changeAnswer', res);
   }
 );
-</script>
-<style scoped lang="scss">
-.choice-html {
-  width: 100%;
-}
-
-.base-select {
-  & .van-checkbox-group,
-  .van-radio-group {
-    width: 100%;
-
-    & .van-checkbox,
-    .van-radio {
-      width: 100%;
-
-      & ::v-deep .van-checkbox__label {
-        width: 100%;
-      }
-
-      & ::v-deep .van-radio__label {
-        width: 100%;
-      }
-    }
-  }
-
-  & .other-input {
-    width: 100px;
-    height: 20px;
-    margin-left: 20px;
-    padding: 3px 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    outline: none;
-  }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/Survey/views/Preview/components/questions/QLast.vue b/src/views/Survey/views/Preview/components/questions/QLast.vue
index 81e734f..8b47847 100644
--- a/src/views/Survey/views/Preview/components/questions/QLast.vue
+++ b/src/views/Survey/views/Preview/components/questions/QLast.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="question-concluse-wrapper">
     <div class="content">
-      <div v-if="isTemplate" v-html="survey.success_end_content" />
+      <div v-if="isTemplate" v-html="survey?.success_end_content" />
 
-      <div v-if="code === 20004" v-html="survey.screening_end_content" />
-      <div v-else-if="code === 20011" v-html="survey.success_end_content" />
-      <div v-else-if="code === 20016" v-html="survey.quota_end_content" />
+      <div v-if="code === 20004" v-html="survey?.screening_end_content" />
+      <div v-else-if="code === 20011" v-html="survey?.success_end_content" />
+      <div v-else-if="code === 20016" v-html="survey?.quota_end_content" />
     </div>
     <div v-if="!isAnswer" class="comment">
       <!--      <Remark v-if="code === 20004" title="结束语提前结束评论" :type="6" />-->
diff --git a/src/views/Survey/views/Preview/components/questions/Question.vue b/src/views/Survey/views/Preview/components/questions/Question.vue
index f568b02..f9950b4 100644
--- a/src/views/Survey/views/Preview/components/questions/Question.vue
+++ b/src/views/Survey/views/Preview/components/questions/Question.vue
@@ -1,39 +1,41 @@
 <template>
-  <div class="question">
-    <!-- 高级题型不显示 -->
-    <div v-if="questionType <= 100" class="question-inner-wrapper">
-      <div class="title" :style="`color: ${themeColor.stemColor}`">
-        <span v-if="showTitle" class="question-inner-span" v-html="title"></span>
-        <!--   question.stem      -->
-        <div class="stem">
-          <rich-text :nodes="`${newTitle}${tip}`" isPreview :isMobile="isMobile" />
-        </div>
-      </div>
-      <!--      <Remark-->
-      <!--        :title="title + '问题评论'"-->
-      <!--        :type="3"-->
-      <!--        :questionIndex="questionIndex"-->
-      <!--        v-if="!isAnswer"-->
-      <!--        style="margin-bottom: 22px"-->
-      <!--      />-->
-    </div>
-    <LangTranslate v-if="error && questionType <= 100" :full-text="error" class="error" />
-    <LangTranslate v-if="warning" :full-text="warning" class="error warning" />
-    <!-- 题 -->
-    <slot />
-  </div>
+  <slot style=""></slot>
+  <!-- <div class="question"> -->
+  <!-- 高级题型不显示 -->
+  <!-- <div v-if="questionType <= 100" class="question-inner-wrapper"> -->
+  <!-- <div class="title" :style="`color: ${themeColor.stemColor}`"> -->
+  <!-- <span v-if="showTitle" class="question-inner-span" v-html="title"></span> -->
+  <!--   question.stem      -->
+  <!-- <div class="stem"> -->
+  <!-- <rich-text :nodes="`${newTitle}${tip}`" isPreview :isMobile="isMobile" /> -->
+  <!-- </div> -->
+  <!-- </div> -->
+  <!--      <Remark-->
+  <!--        :title="title + '问题评论'"-->
+  <!--        :type="3"-->
+  <!--        :questionIndex="questionIndex"-->
+  <!--        v-if="!isAnswer"-->
+  <!--        style="margin-bottom: 22px"-->
+  <!--      />-->
+  <!-- </div> -->
+  <!-- <LangTranslate v-if="error && questionType <= 100" :full-text="error" class="error" /> -->
+  <!-- <LangTranslate v-if="warning" :full-text="warning" class="error warning" /> -->
+  <!-- 题 -->
+
+  <!-- </div> -->
 </template>
 
 <script>
-import RichText from '@/components/RichText.vue';
+
+// import RichText from '@/components/RichText.vue';
 import { computed, defineComponent } from 'vue';
 // import Remark from '../components/Remark/index.vue';
-import LangTranslate from '../LangTranslate.vue';
+// import LangTranslate from '../LangTranslate.vue';
 import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
 import { storeToRefs } from 'pinia';
 
 export default defineComponent({
-  components: { RichText, /* Remark, */ LangTranslate },
+  components: {/*  RichText, */ /* Remark, */ /* LangTranslate */ },
   props: {
     // 标题
     stem: {
@@ -142,8 +144,8 @@ export default defineComponent({
         // 替换文本
         let replacement = '';
         // 查找引用问题
-        const question =
-          props.questions.find((question) => {
+        const question
+          = props.questions.find((question) => {
             // 矩阵题
             if (question.question_type >= 8 && question.question_type <= 11) {
               return question.title === value.split('_R')[0].split('_C')[0];
@@ -153,8 +155,8 @@ export default defineComponent({
               return question.title === value.split('_A')[0];
             }
             return question.title === value;
-          }) ||
-          props.questions.find((question) => {
+          })
+          || props.questions.find((question) => {
             // 矩阵题
             if (question.question_type >= 8 && question.question_type <= 11) {
               return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
@@ -182,8 +184,8 @@ export default defineComponent({
                 replacement = answer[option.option_key];
               }
             } else if (
-              question.question_type === 2 &&
-              Object.keys(answer).length >= question.config.min_select
+              question.question_type === 2
+              && Object.keys(answer).length >= question.config.min_select
             ) {
               // 查找引用选项(多选)
               options.forEach((option) => {
@@ -285,7 +287,7 @@ export default defineComponent({
     min-height: 24px;
     margin-bottom: 24px;
 
-    > span {
+    >span {
       flex-shrink: 0;
     }
 
@@ -310,149 +312,4 @@ export default defineComponent({
     margin-bottom: 0;
   }
 }
-
-// .question-inner-span {
-//   width: 100%;
-// }
-</style>
-
-<style lang="scss" scoped>
-:deep(.theme-hover-default) {
-  &:hover {
-    background-color: v-bind(hoverbackgroundcolor);
-    cursor: pointer;
-  }
-}
-
-:deep(.ant-radio-inner) {
-  border-color: v-bind(answercolor) !important;
-  background-color: transparent;
-}
-
-:deep(.ant-radio-inner::after) {
-  background-color: v-bind(answercolor);
-}
-
-:deep(.ant-checkbox-inner) {
-  border-color: v-bind(answercolor) !important;
-  background-color: transparent;
-}
-
-:deep(.ant-checkbox-checked .ant-checkbox-inner) {
-  background-color: v-bind(answercolor);
-}
-
-:deep(.ant-input) {
-  border-color: v-bind(answerborder) !important;
-  background-color: transparent;
-  color: v-bind(answercolor);
-}
-
-:deep(.ant-input-number) {
-  border-color: v-bind(answerborder) !important;
-  background-color: transparent;
-  color: v-bind(answercolor);
-}
-
-:deep(.ant-select-selector) {
-  border-color: v-bind(answerborder) !important;
-  background-color: transparent !important;
-  color: v-bind(answercolor);
-}
-
-:deep(.ant-input:hover) {
-  border-color: v-bind(answercolor);
-}
-
-:deep(.ant-input::placeholder) {
-  color: v-bind(answerplaceholder) !important;
-}
-
-:deep(.ant-select-selection-placeholder) {
-  color: v-bind(answerplaceholder) !important;
-}
-
-// :deep(.ant-rate) {
-//   color: v-bind(answerColor) !important;
-// }
-
-// :deep(.ant-rate-star-zero .ant-rate-star-second) {
-//   color: v-bind(answerColor30);
-// }
-
-// 打分组件样式 start
-:deep(.num-item),
-// 旧的组件的样式
-:deep(.rate-wrapper .number-item .content) {
-  border-color: v-bind(answercolor) !important;
-  color: v-bind(answercolor) !important;
-}
-
-:deep(.num-item-active),
-// 旧的组件的样式
-:deep(.rate-wrapper .number-item.active .content) {
-  border-color: v-bind(answercolor) !important;
-  background-color: v-bind(answercolor) !important;
-  color: #fff !important;
-}
-
-:deep(.rich-rate-item-active) {
-  border-color: v-bind(answercolor) !important;
-  background-color: v-bind(answercolor) !important;
-}
-
-:deep(.step-inner) {
-  border-color: v-bind(answercolor) !important;
-}
-
-:deep(.ant-slider-track),
-// 旧的组件的样式
-:deep(.slider-bar::before) {
-  background-color: v-bind(answercolor) !important;
-}
-
-:deep(.slider-step .slider-dot.selected .content::before) {
-  border-color: v-bind(answercolor) !important;
-}
-
-:deep(.ant-slider-handle) {
-  border-color: v-bind(answercolor) !important;
-}
-
-:deep(.ant-slider-dot-active) {
-  border-color: v-bind(answercolor) !important;
-}
-
-:deep(.ant-slider-mark-text) {
-  color: v-bind(answercolor);
-}
-
-// 打分组件样式 end
-
-:deep(.ant-upload) {
-  border-color: v-bind(answerborder) !important;
-  background-color: v-bind(answercolor10) !important;
-}
-
-:deep(.pfe-button) {
-  background-color: v-bind(buttoncolor) !important;
-  color: v-bind(buttontextcolor) !important;
-}
-
-// 公共样式
-:deep(.answer-color) {
-  color: v-bind(answercolor) !important;
-}
-
-:deep(.answer-border) {
-  border-color: v-bind(answerborder) !important;
-}
-
-:deep(.answer-background30) {
-  background-color: v-bind(answercolor30) !important;
-}
-
-:deep(.answer-background10) {
-  background-color: v-bind(answercolor10) !important;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/Survey/views/Publish/Index.vue b/src/views/Survey/views/Publish/Index.vue
index 9aa1cd4..018bac0 100644
--- a/src/views/Survey/views/Publish/Index.vue
+++ b/src/views/Survey/views/Publish/Index.vue
@@ -9,8 +9,8 @@
         <div class="qrcode">
           <img :src="publishInfo?.img_url" alt="" width="100px" height="100px" />
           <div class="tit">
-            <div>{{ surveyTitle }}</div>
-            <div>扫码填写问卷</div>
+            <div>{{ publishInfo?.download_url?.title || '' }}</div>
+            <div style="font-weight: 600;font-size: 14px;">扫码填写问卷</div>
           </div>
         </div>
         <div class="tip">移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
@@ -58,8 +58,8 @@ import downloadIcon from '@/assets/img/publish/download_icon.png';
 
 const route = useRoute();
 const sn = route.query.sn;
-const surveyTitle = ref('');
-const status = ref<number>(0); // `0`: 编辑中 `1`: 投放中 `2`: 已结束
+// `0`: 编辑中 `1`: 投放中 `2`: 已结束
+const status = ref<number>(0);
 const publishType = ref(0);
 const operateList = reactive([
   {
@@ -94,21 +94,21 @@ type OperateItem = (typeof operateList)[0];
 
 const operateBtn = (item: OperateItem) => {
   switch (item.type) {
-    case 'shareLink':
-      shareLink();
-      break;
-    case 'copyLink':
-      copyLink();
-      break;
-    case 'qrCode':
-      downLoadImg();
-      break;
-    default:
-      break;
+  case 'shareLink':
+    shareLink();
+    break;
+  case 'copyLink':
+    copyLink();
+    break;
+  case 'qrCode':
+    downLoadImg();
+    break;
+  default:
+    break;
   }
 };
 // 复制链接
-function copyLink() {
+function copyLink () {
   const input = document.createElement('input');
   input.value = publishInfo.value.url;
   document.body.appendChild(input);
@@ -118,22 +118,24 @@ function copyLink() {
   showToast('复制成功');
 }
 // 分享链接
-function shareLink() {
+function shareLink () {
   const params = {
     type: 'shareToWx',
     title: publishInfo.value.download_url.title,
     description: publishInfo.value.desc || '',
     thumbImageUrl: publishInfo.value.img_url,
     webpageUrl: publishInfo.value.url,
-    scene: 0 // 朋友圈1  微信好友0
+    // 朋友圈1  微信好友0
+    scene: 0
   };
-  console.log('shareUrl', publishInfo.value.url);
-  // eslint-disable-next-line
-  appBridge.shareToWeChat(params, () => {});
+  // console.log('shareUrl', publishInfo.value.url);
+  appBridge.shareToWeChat(params, () => {
+    // 分享成功
+  });
 }
 
 // 下载二维码
-function downLoadImg() {
+function downLoadImg () {
   const { title, url } = publishInfo.value.download_url;
   if (utils.getSessionStorage('xToken')) {
     appBridge.save2Album(url, () => {
@@ -190,7 +192,7 @@ watch(status, (val) => {
     getCode();
   }
 });
-onMounted(async () => {
+onMounted(async() => {
   // status.value = 1;
   // publishInfo.value.img_url
   //   = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
@@ -206,7 +208,7 @@ onMounted(async () => {
 <style scoped lang="scss">
 .container {
   height: 100vh;
-  background: linear-gradient(to bottom, #70b937 5.3rem, #f2f2f2 8rem);
+  background: linear-gradient(to bottom, #70B937 5.3rem, #F2F2F2 8rem);
 
   button {
     padding: 3px 20px;