feat[home]: 主页样式优化

- 减少内容嵌套
- 样式内容使用 grid 约束新建问卷图标
- 最新问卷内容格式略微调整
- 清除无用的主页代码

src/views/Home/Index.vue

@@ -48,17 +48,8 @@ onMounted(async () => {
       <Market />
       <!--底部新建问卷-->
       <NewSurvey></NewSurvey>
-      <!--      <div class="new_survey">-->
-      <!--        <van-button type="primary" block color="#70B937" @click="create">-->
-      <!--          <span class="fw-bold">+</span> 新建问卷-->
-      <!--        </van-button>-->
-      <!--      </div>-->
     </div>
   </div>
-  <!--  <van-popup v-model:show="show" round closeable position="bottom">-->
-  <!--    &lt;!&ndash;    <CreateSurvey :createdNewPage="true"></CreateSurvey>&ndash;&gt;-->
-  <!--    <create-question :createdNewPage="false"></create-question>-->
-  <!--  </van-popup>-->
 </template>
 
 <style scoped lang="scss">

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

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { consoleSurveys, getQuestionList, useTemplate } from '@/api/home/index.js';
-import { snQuestions, saveQuestions } from '@/api/design/index.js';
+import { saveQuestions, snQuestions } from '@/api/design/index.js';
 import { useRouter } from 'vue-router';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
@@ -111,18 +111,15 @@ onMounted(() => {
     <div class="home-pen">
       <img :src="homePen" alt="" />
     </div>
-    <div>
-      <div class="flex align-center space-between warp">
-        <div
-          v-for="survey in surveys"
-          :key="survey.title"
-          span="6"
-          class="survey"
-          @click="createdQuestion(survey)"
-        >
-          <img :src="survey.h5Image" alt="" width="40" />
-          <span>{{ survey.h5Title }}</span>
-        </div>
+    <div class="surveys">
+      <div
+        v-for="survey in surveys"
+        :key="survey.title"
+        class="survey"
+        @click="createdQuestion(survey)"
+      >
+        <img :src="survey.h5Image" alt="" width="40" />
+        <span>{{ survey.h5Title }}</span>
       </div>
     </div>
   </div>
@@ -173,27 +170,30 @@ onMounted(() => {
   }
 }
 
-.survey {
-  display: flex;
+//全部问卷容器
+.surveys {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  // 单个问卷
+  .survey {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 
-  //margin-right: 30px;
-  flex-direction: column;
-  align-items: center;
+    img {
+      width: 50px;
+      height: 50px;
+    }
 
-  //flex: 1;
-  width: 25%;
-
-  //margin: 0 16px;
-  text-align: center;
-
-  //justify-content: space-around;
-
-  span {
-    margin-top: 8px;
-    margin-bottom: 18px;
-    color: #000;
-    font-weight: 400;
-    font-size: 0.34rem;
+    span {
+      margin-top: 8px;
+      margin-bottom: 10px;
+      color: #000;
+      font-weight: 400;
+      font-size: 0.34rem;
+    }
   }
 }
 </style>

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

@@ -29,7 +29,7 @@
                 alt="Content Icon"
                 style="width: 15px; height: 15px"
               />
-              {{ survey.scene_name }} |
+              {{ survey.scene_name }}  | 
             </div>
             <div class="flex align-center">
               <img
@@ -38,7 +38,7 @@
                 alt=""
               />
               <img v-else src="../../../../assets/img/publish/pc.png" alt="" />
-              {{ survey.source === 1 ? '移动端' : 'PC端' }} |
+              {{ survey.source === 1 ? '移动端' : 'PC端' }} &nbsp;| &nbsp;
             </div>
             <div class="flex align-center">
               <img src="../../../../assets/img/publish/time.png" alt="" />
@@ -128,7 +128,7 @@ const setImg = (code) => {
   color: #fff;
 
   .survey_header {
-    padding: 0 15px;
+    padding: 0 10px;
     font-size: 15px;
 
     & .survey-all {