feat:打分题配置

components.d.ts

@@ -14,12 +14,9 @@ declare module 'vue' {
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
-    VanCheck: typeof import('vant/es')['Check']
-    VanCheckbo: typeof import('vant/es')['Checkbo']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
-    VanDialog: typeof import('vant/es')['Dialog']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
@@ -28,6 +25,7 @@ declare module 'vue' {
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
+    VanStepper: typeof import('vant/es')['Stepper']
     VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']

src/layouts/index.vue

@@ -61,7 +61,7 @@ const table = [
   position: sticky;
   top: 0;
   z-index: 1000;
-  background-color: #A5D380;
+  background-color: #a5d380;
 
   .title {
     display: flex;

src/stores/modules/common.ts

@@ -701,9 +701,9 @@ export const useCommonStore = defineStore('common', {
             score_interval: 1.0,
             prompt_score: 2,
             prompt_array: null,
-            prompt_left: '',
+            prompt_left: 'left',
-            prompt_right: '',
+            prompt_right: 'right',
-            prompt_center: '',
+            prompt_center: 'center',
             select_random: 0,
             float_window: 0,
             float_window_content: '',
@@ -5751,7 +5751,8 @@ export const useCommonStore = defineStore('common', {
             is_repeat: 0,
             allow_repeat_num: 2,
             repeat_type: 0,
-            alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
+            alert_text:
+              '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
             is_required: 1,
             is_change_row_cell: 0,
             select_random: 0,
@@ -5943,7 +5944,8 @@ export const useCommonStore = defineStore('common', {
           question_tag: '',
           planet_id: '',
           permissions: null
-        }, {
+        },
+        {
           id: '17852528',
           title: 'Q2',
           stem: '<p>这是多选矩阵内容</p>',
@@ -5961,7 +5963,8 @@ export const useCommonStore = defineStore('common', {
             is_repeat: 0,
             allow_repeat_num: 2,
             repeat_type: 0,
-            alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
+            alert_text:
+              '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
             is_required: 1,
             is_change_row_cell: 0,
             row_random: 0,
@@ -6156,7 +6159,8 @@ export const useCommonStore = defineStore('common', {
           question_tag: '',
           planet_id: '',
           permissions: null
-        }, {
+        },
+        {
           id: '17852530',
           title: 'Q3',
           stem: '<p>这个是多选填空内容</p>',
@@ -6177,7 +6181,8 @@ export const useCommonStore = defineStore('common', {
             is_repeat: 0,
             allow_repeat_num: 2,
             repeat_type: 0,
-            alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
+            alert_text:
+              '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
             is_required: 1,
             is_change_row_cell: 0,
             row_random: 0,

src/views/Design/Index.vue

@@ -1,33 +1,50 @@
 <template>
   <div class="design-create">
     <draggable
-      v-model:data="questionInfo.questions" item-key="id" handle=".moverQues" chosenClass="chosen"
+      v-model:data="questionInfo.questions"
-      animation="300" :scroll="true"
+      item-key="id"
+      handle=".moverQues"
+      chosenClass="chosen"
+      animation="300"
+      :scroll="true"
     >
       <template #item="{ element, index }">
         <choose-question
-          :element="element" :questions="questionInfo.questions" :index="index"
+          :element="element"
-          :chooseQuestionId="chooseQuestionId" @get-choose-question-id="getChooseQuestionId"
+          :questions="questionInfo.questions"
+          :index="index"
+          :chooseQuestionId="chooseQuestionId"
+          @get-choose-question-id="getChooseQuestionId"
         >
           <!-- 选择题 -->
           <Choice
-            v-if="element.question_type === 1 || element.question_type === 2" :element="element"
+            v-if="element.question_type === 1 || element.question_type === 2"
+            :element="element"
             :active="chooseQuestionId === element.id"
           ></Choice>
           <!-- 填空题 -->
           <Completion
-            v-if="element.question_type === 4" :element="element" :active="chooseQuestionId === element.id"
+            v-if="element.question_type === 4"
+            :element="element"
+            :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           ></Completion>
 
           <martrix-question
-            v-if="element.question_type === 8 || element.question_type === 9 || element.question_type === 10"
+            v-if="
-            :element="element" :active="chooseQuestionId === element.id"
+              element.question_type === 8 ||
+              element.question_type === 9 ||
+              element.question_type === 10
+            "
+            :element="element"
+            :active="chooseQuestionId === element.id"
           />
 
           <!-- 打分题 -->
           <Rate
-            v-if="element.question_type === 5" :element="element" :active="chooseQuestionId === element.id"
+            v-if="element.question_type === 5"
+            :element="element"
+            :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           />
 
@@ -42,7 +59,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>
@@ -58,8 +79,11 @@
         <!--        {{ element.question_type }}-->
         <!--        {{questionInfo.survey.pages.length}}-->
         <paging
-          v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
+          v-if="!element.question_type && questionInfo.survey.pages.length > 1"
-          :active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop=""
+          :info="element"
+          :index="index"
+          :active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
+          @click.stop=""
         />
       </template>
     </draggable>
@@ -148,7 +172,8 @@ const actionOptions = [
         fun: 'radioAddOption'
       }
     ]
-  }, {
+  },
+  {
     question_type: [8, 9, 10],
     // 矩阵问卷逻辑处理
     actions: [
@@ -227,7 +252,7 @@ onMounted(() => {
   color: #333;
 
   .slot-actions {
-    & .action-item+.action-item {
+    & .action-item + .action-item {
       margin-left: 10px;
     }
   }

src/views/Design/components/ActionCompoents/OptionAction.vue

@@ -117,23 +117,23 @@ const openMoveModel = (item, index) => {
 // 上下移动
 const optionMove = (action) => {
   switch (action.action) {
-  case 'up':
+    case 'up':
-    if (activeIndex.value === 0) {
+      if (activeIndex.value === 0) {
-      moveShow.value = false;
+        moveShow.value = false;
-      return false;
+        return false;
-    }
+      }
-    // 向上移动
+      // 向上移动
-    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value -= 1;
+      activeIndex.value -= 1;
-    break;
+      break;
-  case 'down':
+    case 'down':
-    if (activeIndex.value === element.value.length - 1) {
+      if (activeIndex.value === element.value.length - 1) {
-      moveShow.value = false;
+        moveShow.value = false;
-      return false;
+        return false;
-    }
+      }
-    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value += 1;
+      activeIndex.value += 1;
-    break;
+      break;
   }
 };
 

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -50,6 +50,11 @@
         v-if="activeQuestion.question_type === 2"
         v-model="activeQuestion"
       ></checkbox-question-action>
+      <rate-action
+        v-if="activeQuestion.question_type === 5"
+        :config="activeQuestion.config"
+        @update-config="updateConfig"
+      ></rate-action>
     </van-cell-group>
   </van-action-sheet>
   <!--  移动 复制-->
@@ -96,6 +101,7 @@ import { ref } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
 import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue';
+import RateAction from './components/RateAction.vue';
 import { v4 as uuidv4 } from 'uuid';
 const store = useCounterStore();
 const { questionsInfo } = storeToRefs(store);
@@ -190,8 +196,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType
+      item.skip_type === skipType &&
-      && item.question_index === activeQuestion.value.question_index
+      item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }
@@ -207,16 +213,20 @@ const getSkipTypeText = (skipType) => {
 
 const questionSetting = (type) => {
   switch (type) {
-  case 'before':
+    case 'before':
-    questionBeforeShow.value = true;
+      questionBeforeShow.value = true;
 
-    break;
+      break;
-  case 'after':
+    case 'after':
-    questionBeforeShow.value = true;
+      questionBeforeShow.value = true;
-    break;
+      break;
   }
   skipType.value = type === 'before' ? 1 : 0;
 };
+
+const updateConfig = (value) => {
+  activeQuestion.value.config = { ...value };
+};
 </script>
 <style scoped lang="scss">
 .ml10 {

src/views/Design/components/ActionCompoents/components/RateAction.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <!-- <van-divider></van-divider> -->
+    <van-cell-group title="分数设置">
+      <!-- <van-field
+        v-model="localConfig.min"
+        label="最低分"
+        @blur="getPrompt(localConfig.min, 'min')"
+        input-align="right"
+        placeholder="请输入"
+      /> -->
+      <div class="score">
+        <p>最低分</p>
+        <van-stepper
+          v-model="localConfig.min"
+          button-size="22px"
+          @blur="minChange"
+          @change="minChange"
+        />
+      </div>
+      <div class="score">
+        <p>最高分</p>
+        <van-stepper
+          v-model="localConfig.max"
+          :max="maxLimit"
+          button-size="22px"
+          @blur="maxChange"
+          @change="maxChange"
+        />
+      </div>
+      <div class="score">
+        <p>分数间隔</p>
+        <van-stepper
+          v-model="localConfig.score_interval"
+          :min="0"
+          button-size="22px"
+          @blur="intervalChange"
+          @change="intervalChange"
+        />
+      </div>
+    </van-cell-group>
+    <van-cell-group title="提示文字">
+      <van-field
+        v-model="localConfig.prompt_left"
+        label="左边文字"
+        input-align="right"
+        placeholder="请输入"
+        @blur="getPrompt(localConfig.prompt_left, 'prompt_left')"
+      />
+      <van-field
+        v-model="localConfig.prompt_center"
+        label="中间文字"
+        input-align="right"
+        placeholder="请输入"
+        @blur="getPrompt(localConfig.prompt_center, 'prompt_center')"
+      />
+      <van-field
+        v-model="localConfig.prompt_right"
+        label="右边文字"
+        input-align="right"
+        placeholder="请输入"
+        @blur="getPrompt(localConfig.prompt_right, 'prompt_right')"
+      />
+    </van-cell-group>
+  </div>
+</template>
+<script setup>
+import { ref, watch, computed, defineEmits, defineProps } from 'vue';
+
+const maxRange = ref(Number(11));
+
+const props = defineProps({
+  config: {
+    type: Object
+  }
+});
+const localConfig = ref({ ...props.config });
+// 定义 emit
+const emit = defineEmits(['updateConfig']);
+watch(
+  () => props.config,
+  (newConfig) => {
+    localConfig.value = { ...newConfig };
+  },
+  { deep: true }
+);
+const getPrompt = (e, key) => {
+  localConfig.value[key] = e;
+  emit('updateConfig', localConfig.value);
+};
+
+const maxLimit = computed(() => {
+  return localConfig.value.min + (maxRange.value - 1) * localConfig.value.scoreInterval;
+});
+
+/**
+ * 设置最高分默认值
+ */
+function setDefaultMax() {
+  localConfig.value.max = localConfig.value.min + 4 * localConfig.value.scoreInterval;
+}
+
+/**
+ * 判断间隔能否为整数
+ */
+function isSurplus() {
+  if (localConfig.value.max === 0 && localConfig.value.min === 0) {
+    return false;
+  } else {
+    return (
+      parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10)) %
+        parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10)) ===
+      0
+    );
+  }
+}
+
+function emitInfo() {
+  emit('updateConfig', localConfig.value);
+}
+
+function intervalChange(value) {
+  localConfig.value.score_interval = Number(value) === 0 ? 1 : Number(value);
+  setDefaultMax();
+  emitInfo();
+}
+
+const minChange = (value) => {
+  const oldMax = Number(props.config.min);
+  localConfig.value.min = Number(value);
+  if (localConfig.value.min > localConfig.value.max) {
+    localConfig.value.min = oldMax;
+  }
+  setDefaultMax();
+  emitInfo();
+};
+
+function maxChange(value) {
+  const oldMax = Number(props.config.max);
+  localConfig.value.max = Number(value);
+  if (!isSurplus()) {
+    localConfig.value.max = oldMax;
+  }
+  if (localConfig.value.max < localConfig.value.min) {
+    localConfig.value.max = oldMax;
+  }
+  emitInfo();
+}
+</script>
+<style scoped lang="scss">
+.score {
+  display: flex;
+  justify-content: space-between;
+  margin: 4px 0;
+  padding: 8px 9px;
+  border-bottom: 1px solid #f2f3f5;
+}
+</style>

src/views/Design/components/Questions/MartrixQuestion.vue

@@ -16,14 +16,14 @@ const { element } = defineProps<{ element: MatrixSurveyQuestion }>();
  */
 const tableInputTypeMapping = (/** regx?: any */) => {
   switch (element.question_type) {
-  case 8:
+    case 8:
-    return 'text';
+      return 'text';
-  case 9:
+    case 9:
-    return 'radio';
+      return 'radio';
-  case 10:
+    case 10:
-    return 'checkbox';
+      return 'checkbox';
-  default:
+    default:
-    return 'radio';
+      return 'radio';
   }
 };
 
@@ -56,9 +56,15 @@ const vFocus: Directive = {
             <!-- 第一行内容为空 -->
             <th></th>
             <!-- 第二行内容开始填充 -->
-            <td v-for="(col) in element.options[1]" :key="col.option" ref="columnLabels">
+            <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
               <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-              <input v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false" />
+              <input
+                v-if="col.editor"
+                v-model="col.option"
+                v-focus
+                type="text"
+                @focusout="col.editor = false"
+              />
               <span v-else @click="col.editor = true" v-html="col.option"></span>
             </td>
           </tr>
@@ -67,7 +73,13 @@ const vFocus: Directive = {
           <tr v-for="row in element.options[0]" :key="row.option">
             <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
             <td>
-              <input v-if="row.editor" v-model="row.option" v-focus type="text" @focusout="row.editor = false" />
+              <input
+                v-if="row.editor"
+                v-model="row.option"
+                v-focus
+                type="text"
+                @focusout="row.editor = false"
+              />
               <span v-else @click="row.editor = true" v-html="row.option"></span>
             </td>
             <td v-for="col in element.options[1]" :key="col.option">
@@ -93,10 +105,9 @@ const vFocus: Directive = {
     border-width: 0 0 1px;
     text-align: left;
   }
-
 }
 
-input[type="text"] {
+input[type='text'] {
   width: 85%;
 }
 
@@ -112,7 +123,7 @@ input[type="text"] {
     display: flex;
     justify-content: flex-end;
 
-    &>span {
+    & > span {
       margin-right: 6px;
       font-size: 16px;
     }

src/views/Design/components/Questions/Rate.vue

@@ -22,7 +22,12 @@
               class="van-field"
               v-html="item.option"
             ></div>
-            <RateCharacter></RateCharacter>
+            <RateCharacter :config="element.config"></RateCharacter>
+            <div class="tips">
+              <p>{{ element.config.prompt_left }}</p>
+              <p>{{ element.config.prompt_center }}</p>
+              <p>{{ element.config.prompt_right }}</p>
+            </div>
           </div>
         </div>
       </template>
@@ -63,4 +68,10 @@ const chooseOption = (item) => {
 .content {
   background-color: #fff;
 }
+
+.tips {
+  display: flex;
+  justify-content: space-between;
+  color: #bfbfbf;
+}
 </style>

src/views/Design/components/Questions/RateCharacter.vue

@@ -15,7 +15,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+
 const rateItem = ref([
   {
     label: 1,
@@ -36,34 +37,48 @@ const rateItem = ref([
   {
     label: 5,
     active: false
-  },
-  {
-    label: 6,
-    active: false
-  },
-  {
-    label: 7,
-    active: false
-  },
-  {
-    label: 8,
-    active: false
-  },
-  {
-    label: 9,
-    active: false
-  },
-  {
-    label: 10,
-    active: false
   }
 ]);
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+});
+
+const renderScore = (min, max, interval) => {
+  const result = [];
+  for (let i = min; i <= max; i += interval) {
+    result.push({
+      label: i,
+      active: false
+    });
+    // 如果达到 10 条数据，停止生成
+    if (result.length === 11) {
+      break;
+    }
+  }
+  rateItem.value = result;
+};
 const getItem = (value) => {
   // chooseId.value = value.id;
   rateItem.value.forEach((item, index) => {
     rateItem.value[index].active = item.label <= value.label;
   });
 };
+
+// 监听 min、max 和 score_interval 的变化
+watch(
+  () => [props.config.min, props.config.max, props.config.score_interval],
+  (newValues) => {
+    const [newMin, newMax, newScoreInterval] = newValues;
+    // this.renderScore();
+    renderScore(newMin, newMax, newScoreInterval);
+    // 在这里可以添加对这些值变化的处理逻辑
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped lang="scss">
@@ -76,7 +91,7 @@ ul {
 .rate_item {
   margin: 0 3px;
   margin-top: 5px;
-  padding: 0 8px;
+  padding: 0 7px;
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #666;

src/views/Design/components/Questions/paging/Paging.vue

@@ -11,7 +11,8 @@
           class="iconfont active-icon"
           :style="{ marginRight: isLastPage ? '0' : '16px' }"
           @click="activePage"
-        >&#xe86c;</i>
+          >&#xe86c;</i
+        >
         <template v-if="!isLastPage">
           <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
           <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>

src/views/Design/components/Questions/types/martrix.d.ts

@@ -210,4 +210,4 @@ type MatrixSurveyQuestion = {
  */
 type MatrixSurvey = {
   question?: MatrixSurveyQuestion;
-};
+};

src/views/Home/Index.vue

@@ -3,7 +3,6 @@
 import LastSurvey from './components/LastSurvey/Index.vue';
 import Market from './components/Market/Index.vue';
 import CreateSurvey from './components/CreateSurvey/Index.vue';
-
 </script>
 
 <template>
@@ -21,15 +20,15 @@ import CreateSurvey from './components/CreateSurvey/Index.vue';
 <style scoped lang="scss">
 .container {
   padding: 0 10px 60px;
-  background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #A5D380 100%);
+  background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #a5d380 100%);
 
-  &> :first-child {
+  & > :first-child {
     display: flex;
     justify-content: space-around;
     border-radius: 6px;
     background-color: white;
 
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       width: 50px;
@@ -40,7 +39,6 @@ import CreateSurvey from './components/CreateSurvey/Index.vue';
 
       padding: 20px 10px;
     }
-
   }
 }
 </style>

src/views/Home/components/CreateSurvey/Hooks/useRequestHooks.ts

@@ -18,14 +18,17 @@ export const surveys = [
   {
     title: 'NPS调研',
     icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u22.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-  }, {
+  },
+  {
     title: '考评测试',
     icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u24.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-  }, {
+  },
+  {
     title: '表单收集',
     icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u16.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
-  }, {
+  },
+  {
     title: '消费者测试',
     icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u18.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
   }
-];
+];

src/views/Home/components/CreateSurvey/Index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { surveys } from './Hooks/useRequestHooks';
-
 </script>
 
 <template>
-  <van-cell style="position: relative;z-index: 1">
+  <van-cell style="position: relative; z-index: 1">
-    <div style="text-align: left;">新建问卷</div>
+    <div style="text-align: left">新建问卷</div>
     <van-row>
       <van-col v-for="survey in surveys" :key="survey.title" span="6" class="survey">
         <img width="45px" :src="survey.icon" alt=" " />
@@ -31,4 +30,4 @@ import { surveys } from './Hooks/useRequestHooks';
     font-size: 10px;
   }
 }
-</style>
+</style>

src/views/Home/components/LastSurvey/Index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { lastSurveys } from './hooks/useLastSurveyHooks';
-
 </script>
 
 <template>
@@ -17,17 +16,24 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
         <div class="last-survey_items_status">
           <img
             src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u249.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
-            alt=" " width="10px" height="10px"
+            alt=" "
+            width="10px"
+            height="10px"
           />
           <small> {{ survey.status }} - 100</small>
         </div>
         <div class="last-survey_items_info">
-          <small> 报名签到</small> <small>| {{ survey.platform }} | 创建时间: {{ survey.createTime }}</small>
+          <small> 报名签到</small>
+          <small>| {{ survey.platform }} | 创建时间: {{ survey.createTime }}</small>
         </div>
 
         <div class="last-survey_items_content">
-          <p><small>{{ survey.title }}</small></p>
+          <p>
-          <p><small>{{ survey.describe }}</small></p>
+            <small>{{ survey.title }}</small>
+          </p>
+          <p>
+            <small>{{ survey.describe }}</small>
+          </p>
         </div>
       </div>
     </div>
@@ -36,13 +42,13 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
 
 <style scoped lang="scss">
 .last-survey {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
     margin: 10px 0;
 
-    &>span {
+    & > span {
       color: grey;
       font-size: 10px;
     }
@@ -53,7 +59,7 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
     flex-flow: column nowrap;
     justify-content: space-around;
 
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -68,7 +74,7 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
       background-color: white;
 
       .last-survey_items_status {
-        &>small {
+        & > small {
           color: red;
           font-size: 10px;
         }
@@ -81,10 +87,8 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
 
       .last-survey_items_content {
         font-size: 12px;
-
       }
     }
-
   }
 }
 </style>

src/views/Home/components/LastSurvey/hooks/useLastSurveyHooks.ts

@@ -1,4 +1,3 @@
-
 export const lastSurveys = [
   {
     status: '已结束',
@@ -6,17 +5,19 @@ export const lastSurveys = [
     createTime: '2025-03-04',
     title: '签到报名问卷标题',
     describe: '问卷描述'
-  }, {
+  },
+  {
     status: '已结束',
     platform: '移动端',
     createTime: '2025-03-04',
     title: '签到报名问卷标题',
     describe: '问卷描述'
-  }, {
+  },
+  {
     status: '已结束',
     platform: '移动端',
     createTime: '2025-03-04',
     title: '签到报名问卷标题',
     describe: '问卷描述'
   }
-];
+];

src/views/Home/components/Market/Index.vue

@@ -4,7 +4,6 @@ import { tables } from './hooks/useMarketHooks';
 import TestComponent from './components/TestComponent.vue';
 
 const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
-
 </script>
 
 <template>
@@ -16,7 +15,9 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
     </div>
 
     <div class="market_table">
-      <div v-for="item in tables" :key="item.title" @click="activeComponet = item.component">{{ item.title }}</div>
+      <div v-for="item in tables" :key="item.title" @click="activeComponet = item.component">
+        {{ item.title }}
+      </div>
     </div>
     <van-cell class="market_items">
       <component :is="activeComponet" />
@@ -26,7 +27,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
 
 <style scoped>
 .market {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
@@ -47,7 +48,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
 
     /* padding: 10px 0; */
 
-    &>div {
+    & > div {
       padding: 0 20px;
       text-wrap: nowrap;
     }
@@ -58,7 +59,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
     flex-flow: row wrap;
     justify-content: space-around;
 
-    &>div {
+    & > div {
       display: flex;
       overflow: hidden;
       width: calc(196px / 1.2);

src/views/Home/components/Market/components/TestComponent.vue

@@ -11,23 +11,26 @@ const { cn } = defineProps({
 <template>
   <van-row :gutter="4">
     <van-col
-      v-for="item in 2" :key="item" :span="10"
+      v-for="item in 2"
-      style="display: flex; flex-direction: column; align-items: start; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);"
+      :key="item"
+      :span="10"
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
+      "
     >
-      <div style="display: flex; align-items: center; justify-content: space-evenly;width: 100%;">
+      <div style="display: flex; align-items: center; justify-content: space-evenly; width: 100%">
         <span>{{ cn }} 模板</span>
         <img
           src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u42.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
         />
       </div>
 
-      <div>
+      <div><span>引用10次</span> | <span>创建人: 张三</span></div>
-        <span>引用10次</span> | <span>创建人: 张三</span>
-      </div>
     </van-col>
   </van-row>
 </template>
 
-<style lang="sass" scoped>
+<style lang="sass" scoped></style>
-
-</style>

src/views/Home/components/Market/hooks/useMarketHooks.ts

@@ -5,20 +5,25 @@ export const tables = [
   {
     title: '报名签到',
     component: h(TestComponent, { cn: '报名签到' })
-  }, {
+  },
+  {
     title: '满意度调研',
     component: h(TestComponent, { cn: '满意度调研' })
-  }, {
+  },
+  {
     title: '快速投票',
     component: h(TestComponent, { cn: '快速投票' })
-  }, {
+  },
+  {
     title: '打分评估',
     component: h(TestComponent, { cn: '打分评估' })
-  }, {
+  },
+  {
     title: 'NPS',
     component: h(TestComponent, { cn: 'NPS' })
-  }, {
+  },
+  {
     title: '考评测试',
     component: h(TestComponent, { cn: '考评测试' })
   }
-];
+];

src/views/Market/Index.vue

@@ -3,7 +3,9 @@
     <div v-for="item in 10" :key="item" class="template">
       <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
       <span>报名/签到模板</span>
-      <span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
+      <span style="color: rgb(127, 127, 127)"
+        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
+      >
     </div>
   </div>
 </template>