refactor(layout): 优化页面布局和滚动体验

- 在 index.vue 和 redirect.vue 中添加 layout-body 类，用于控制内容区域高度和滚动 - 调整 Publish 和 Survey 组件中的样式，以适应新的布局结构 - 优化部分组件的代码格式和逻辑
2025-03-19 14:45:43 +08:00
parent ae5b36d82e
commit 5387155e06
12 changed files with 187 additions and 172 deletions
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -16,7 +16,9 @@
      </van-nav-bar>
    </header>
    <!-- content -->
-    <RouterView />
+    <div class="layout-body">
+      <RouterView />
+    </div>
  </div>
 </template>

@@ -35,7 +37,12 @@ function goBack() {
 }
 </script>
 <style scoped lang="scss">
+@import '@/assets/css/main';
+
 .common-layout {
+  overflow: hidden;
+  height: 100vh;
+
  //background-size: contain; /* 或者使用具体的尺寸，如 100% 100% */
  //background-position: center; /* 确保图片居中显示 */
  //background-repeat: no-repeat;
@@ -50,6 +57,11 @@ function goBack() {
  background-image: url('@/assets/img/home/home-pen.png');
 }

+.layout-body {
+  overflow: scroll;
+  height: calc(100vh - var(--sticky-top-height) - 5px);
+}
+
 .header {
  position: sticky;
  top: 0;
--- a/src/layouts/redirect.vue
+++ b/src/layouts/redirect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="common-layout">
+  <div class="common-layout container">
    <!-- title 标题和搜索栏 -->
    <header class="header">
      <van-nav-bar
@@ -16,7 +16,9 @@
      </van-nav-bar>
    </header>
    <!-- content -->
-    <RouterView />
+    <div class="redirect-body">
+      <RouterView />
+    </div>
  </div>
 </template>

@@ -35,16 +37,28 @@ function goBack() {
 }
 </script>
 <style scoped lang="scss">
+@import '@/assets/css/main';
+
 .common-layout {
+  overflow: hidden;
+  height: 100vh;
  background-color: white;
  color: #333;
 }

+.redirect-body {
+  overflow: scroll;
+  height: calc(100vh - var(--sticky-top-height) - 1px);
+
+  //padding: 10px 0 0 0;
+  background: transparent;
+}
+
 .header {
  position: sticky;
  top: 0;
  z-index: 1000;
-  background-color: #a5d380;
+  background-color: transparent;

  .title {
    display: flex;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,6 +48,27 @@ const router = createRouter({
            title: '模板'
          },
          component: () => import('../views/Market/Index.vue')
+        },
+        {
+          path: '/create',
+          name: 'create',
+          meta: { title: '问卷编辑' },
+          component: () => import('../views/Survey/views/Create/Index.vue')
+        },
+        {
+          path: '/preview',
+          name: 'preview',
+          meta: {
+            title: '预览'
+          },
+          component: () => import('@/views/Survey/views/Preview/Index.vue')
+        },
+
+        {
+          path: '/publish',
+          name: 'publish',
+          meta: { title: '问卷投放' },
+          component: () => import('../views/Survey/views/Publish/Index.vue')
        }
      ]
    },
@@ -56,26 +77,6 @@ const router = createRouter({
      name: 'design',
      meta: {},
      component: Design
-    },
-    {
-      path: '/preview',
-      name: 'preview',
-      meta: {
-        title: '预览'
-      },
-      component: () => import('@/views/Survey/views/Preview/Index.vue')
-    },
-    {
-      path: '/create',
-      name: 'create',
-      meta: { title: '问卷编辑' },
-      component: () => import('../views/Survey/views/Create/Index.vue')
-    },
-    {
-      path: '/publish',
-      name: 'publish',
-      meta: { title: '问卷投放' },
-      component: () => import('../views/Survey/views/Publish/Index.vue')
    }
  ]
 });
--- a/src/views/Design/components/ActionCompoents/QuestionAction.vue
+++ b/src/views/Design/components/ActionCompoents/QuestionAction.vue
@@ -307,8 +307,8 @@ const getSkipTypeText = (skipType) => {
  const ls = [];
  logics.map((item) => {
    if (
-      item.skip_type === skipType &&
-      item.question_index === activeQuestion.value.question_index
+      item.skip_type === skipType
+      && item.question_index === activeQuestion.value.question_index
    ) {
      ls.push(item);
    }
@@ -324,13 +324,13 @@ const getSkipTypeText = (skipType) => {

 const questionSetting = (type) => {
  switch (type) {
-    case 'before':
-      questionBeforeShow.value = true;
+  case 'before':
+    questionBeforeShow.value = true;

-      break;
-    case 'after':
-      questionBeforeShow.value = true;
-      break;
+    break;
+  case 'after':
+    questionBeforeShow.value = true;
+    break;
  }
  skipType.value = type === 'before' ? 1 : 0;
 };
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -11,7 +11,7 @@ import appBridge from '@/assets/js/appBridge';
 const contentShow = ref(false);
 const show = ref(false);

-onMounted(async () => {
+onMounted(async() => {
  if (appBridge.isInReactNative()) {
    const appToken = utils.getSessionStorage('xToken');
    getUserInfo(appToken)
@@ -95,6 +95,7 @@ function create() {

 .container-body {
  padding: 0 10px 80px;
+
  & > :first-child {
    & > div {
      display: flex;
@@ -104,6 +105,7 @@ function create() {
      margin: 10px;
    }
  }
+
  .new_survey {
    position: fixed;
    bottom: 0;
--- a/src/views/Home/components/CreateSurvey/Index.vue
+++ b/src/views/Home/components/CreateSurvey/Index.vue
@@ -5,10 +5,10 @@ import { snQuestions, saveQuestions } from '@/api/design/index.js';
 import { useRouter } from 'vue-router';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
+import homePen from '@/assets/img/home/home-pen.png';
 // 获取 Store 实例
 const counterStore = useCounterStore();
 const store = storeToRefs(counterStore);
-import homePen from '@/assets/img/home/home-pen.png';

 const router = useRouter();
 const surveys = ref([]);
--- a/src/views/Home/components/LastSurvey/Index.vue
+++ b/src/views/Home/components/LastSurvey/Index.vue
@@ -61,7 +61,7 @@ import endPng from '@/assets/img/publish/end.png';
 const survey = ref({
  project_name: ''
 });
-const fetchSurveys = async () => {
+const fetchSurveys = async() => {
  const params = {
    page: 1,
    per_page: 10,
--- a/src/views/Home/components/Market/components/MarketItem.vue
+++ b/src/views/Home/components/Market/components/MarketItem.vue
@@ -75,7 +75,7 @@ const deleteItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await deleteTemplate(item.sn);
      if (res.data.code === 0) {
        showSuccessToast('删除成功');
@@ -88,7 +88,7 @@ const deleteItem = (item) => {
    });
 };
 const setImg = (code) => {
-  let text = 'src/assets/img/home/' + code + '.png';
+  const text = `src/assets/img/home/${code}.png`;
  return text;
 };

--- a/src/views/Survey/Index.vue
+++ b/src/views/Survey/Index.vue
@@ -134,7 +134,7 @@ const onLoad = () => {
    fetchSurveys();
  }, 500);
 };
-const fetchSurveys = async () => {
+const fetchSurveys = async() => {
  const params = {
    page: form.value.page,
    per_page: form.value.pageSize,
@@ -172,7 +172,7 @@ const deleteItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await deleteSurveys(item.sn);
      if (res.data.message) {
        showToast(res.data.message);
@@ -196,7 +196,7 @@ const copyItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await copySurveys(item.sn);
      if (res.data.code === 200 || res.data.code === 201) {
        showSuccessToast('复制成功');
@@ -237,7 +237,7 @@ const editItem = (item) => {
  });
 };
 // 保存为模板
-const saveTemplate = async (item) => {
+const saveTemplate = async(item) => {
  const data = JSON.parse(JSON.stringify(item));
  const res = await saveTemplates(item.sn, data);
  if (res.data.code === 200 || res.data.code === 201) {
@@ -272,7 +272,7 @@ onMounted(() => {

 .survey-search {
  position: sticky;
-  top: var(--sticky-top-height);
+  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 0;
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -1,18 +1,5 @@
 <template>
-  <div class="container">
-    <van-nav-bar
-      :border="false"
-      class="navbar-header"
-      :title="surveyTitle"
-      left-text=""
-      left-arrow
-      @click-left="$router.go(-1)"
-    >
-      <template #left>
-        <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
-      </template>
-    </van-nav-bar>
-
+  <div class="">
    <div class="question-title flex space-between">
      <div class="title-left">
        <!--问卷标题-->
@@ -370,7 +357,6 @@ const currentDate = ref();
 const currentType = ref();
 const route = useRoute();
 const router = useRouter();
-const surveyTitle = route.meta.title as string;
 const show = ref(false);
 // const textModel = ref(false);
 const activeId = ref(0);
--- a/src/views/Survey/views/Preview/Index.vue
+++ b/src/views/Survey/views/Preview/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout />
+  <!--  <layout />-->
  <div ref="scrollbar" class="preview-container">
    <!--    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->

@@ -529,7 +529,6 @@ import PreviewMatrixText from '@/views/Survey/views/Preview/components/questions
 import PreviewNPS from '@/views/Survey/views/Preview/components/questions/PreviewNPS.vue';
 import msg from './js/message';
 import answerMock from '@/views/Survey/views/Preview/js/mock.js';
-import Layout from '@/layouts/redirect.vue';
 // const isPreview = ref(true);

 // hooks file
@@ -670,9 +669,9 @@ async function answer(callback, callbackBeforePage) {
          question.error = translatedText.value.ThisIsARequiredQuestion;
        }
      } else if (
-        answer
-        && questionType === 1
-        && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
+        answer &&
+        questionType === 1 &&
+        Object.keys(answer).findIndex((value) => !answer[value]) !== -1
      ) {
        // 单选题
        isError = true;
@@ -847,52 +846,52 @@ async function answer(callback, callbackBeforePage) {
        const { value } = answer;
        const newValue = value.replace(/\n|\r|\r\n/g, '');
        switch (config.text_type) {
-        // 字母
-        case 3:
-          // eslint-disable-next-line
+          // 字母
+          case 3:
+            // eslint-disable-next-line
            const reg =
              /^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/;
-          isError
-              = config.include_mark === 1
-              ? !reg.test(newValue) || !newValue.length
-              : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
-          question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
-          break;
+            isError =
+              config.include_mark === 1
+                ? !reg.test(newValue) || !newValue.length
+                : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
+            question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
+            break;
          // 中文
-        case 4:
-          isError
-              = config.include_mark === 1
-              ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
-                newValue
-              ) || !newValue.length
-              : !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
-                newValue
-              ) || !newValue.length;
-          question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
-          break;
+          case 4:
+            isError =
+              config.include_mark === 1
+                ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
+                    newValue
+                  ) || !newValue.length
+                : !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
+                    newValue
+                  ) || !newValue.length;
+            question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
+            break;
          // 邮箱
-        case 5:
-          isError
-              = !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-              value
-            );
-          question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
-          break;
+          case 5:
+            isError =
+              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                value
+              );
+            question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
+            break;
          // 手机号
-        case 6:
-          isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
-          question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
-          break;
+          case 6:
+            isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
+            question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
+            break;
          // 身份证号
-        case 7:
-          isError
-              = !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
-              value
-            );
-          question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
-          break;
-        default:
-          break;
+          case 7:
+            isError =
+              !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
+                value
+              );
+            question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
+            break;
+          default:
+            break;
        }
        if (!isError && value.length < config.min && ![1, 2].includes(config.text_type)) {
          isError = true;
@@ -904,54 +903,54 @@ async function answer(callback, callbackBeforePage) {
        Object.keys(answer).forEach((key) => {
          const value = answer[key];
          switch (config.text_type) {
-          // 字母
-          case 3:
-            if (
-              !/^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/.test(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterEnglishLetters;
-            }
-            break;
+            // 字母
+            case 3:
+              if (
+                !/^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/.test(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterEnglishLetters;
+              }
+              break;
            // 中文
-          case 4:
-            if (
-              !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterChineseWords;
-            }
-            break;
+            case 4:
+              if (
+                !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterChineseWords;
+              }
+              break;
            // 邮箱
-          case 5:
-            if (
-              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterACorrectEmail;
-            }
-            break;
+            case 5:
+              if (
+                !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterACorrectEmail;
+              }
+              break;
            // 手机号
-          case 6:
-            if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
-              question.error = translatedText.value.PleaseEnterACorrectPhone;
-            }
-            break;
+            case 6:
+              if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
+                question.error = translatedText.value.PleaseEnterACorrectPhone;
+              }
+              break;
            // 身份证号
-          case 7:
-            if (
-              !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterACorrectID;
-            }
-            break;
-          default:
-            break;
+            case 7:
+              if (
+                !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterACorrectID;
+              }
+              break;
+            default:
+              break;
          }
          if (!question.error && value.length < config.min && ![1, 2].includes(config.text_type)) {
            question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
@@ -1028,14 +1027,14 @@ async function answer(callback, callbackBeforePage) {
              currentQuestions.forEach((question, index) => {
                if (index >= warnStart && index < warnEnd) {
                  if (repeat.repeat_type) {
-                    question.warning
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.warning =
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
                  } else {
-                    question.error
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.error =
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
@@ -1382,8 +1381,8 @@ function updateAnswer(auto) {
      const evt1 = {};

      if ([1].includes(question.question_type)) {
-        evt1.value
-          = Object.keys(question.answer)
+        evt1.value =
+          Object.keys(question.answer)
            .map((key) => (question.answer[key] ? key : undefined))
            .filter((i) => !!i)?.[0] || undefined;
        evt1.options = question.list.flatMap((i) => i.options);
--- a/src/views/Survey/views/Publish/Index.vue
+++ b/src/views/Survey/views/Publish/Index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <layout />
+  <div class="">
+    <!--    <layout />-->
    <div class="content">
      <div v-if="status === 1" inset>
        <div>
@@ -42,7 +42,6 @@
 </template>

 <script setup lang="ts">
-import layout from '@/layouts/index.vue';
 import { useRoute } from 'vue-router';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { showFailToast, showToast } from 'vant';
@@ -94,17 +93,17 @@ 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;
  }
 };
 // 复制链接
@@ -121,7 +120,11 @@ function copyLink() {
 function shareLink() {
  const params = {
    type: 'shareToWx',
-    title: surveyTitle.value || (publishInfo.value.download_url.title ? publishInfo.value.download_url.title.replace(/_发布二维码\.[a-zA-Z]+$/, '') : ''),
+    title:
+      surveyTitle.value ||
+      (publishInfo.value.download_url.title
+        ? publishInfo.value.download_url.title.replace(/_发布二维码\.[a-zA-Z]+$/, '')
+        : ''),
    description: publishInfo.value.desc || '填写问卷',
    thumbImageUrl: publishInfo.value.img_url,
    webpageUrl: publishInfo.value.url,
@@ -192,16 +195,13 @@ watch(status, (val) => {
    getCode();
  }
 });
-onMounted(async() => {
+onMounted(async () => {
  fetchInfo();
 });
 </script>

 <style scoped lang="scss">
 .container {
-  height: 100vh;
-  background: linear-gradient(to bottom, #70b937 5.3rem, #f2f2f2 8rem);
-
  button {
    padding: 3px 20px;
    border: none;
@@ -210,7 +210,8 @@ onMounted(async() => {

 .content {
  margin: 10px;
-  padding-bottom: 30px;
+
+  //padding-bottom: 30px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);