feat(Survey): 更新题目列表图标和样式

- 使用图片替换字体图标
- 优化题目列表布局和样式
- 添加背景渐变样式

src/assets/css/public.scss

@@ -295,3 +295,8 @@ input {
 .el-table thead th {
   font-weight: unset;
 }
+
+ .van-popup--bottom.van-popup--round{
+   background: linear-gradient( 180deg, #E8FAD7 0%, #FFFFFF 8%);
+ }
+//background: linear-gradient( 180deg, #E8FAD7 0%, #FFFFFF 100%);

src/utils/common.js

@@ -9,21 +9,37 @@ import {
   signQuestion,
   nps
 } from '@/utils/importJsons';
+
+import radioPng from '@/views/Design/images/1.png'
+import checkboxPng from '@/views/Design/images/2.png'
+import completionPng from '@/views/Design/images/4.png'
+import ratePng from '@/views/Design/images/5.png'
+import textImagePng from '@/views/Design/images/6.png'
+import martrixQuestionCheckboxPng from '@/views/Design/images/10.png'
+import martrixQuestionRadioPng from '@/views/Design/images/9.png'
+import martrixQuestionTextPng from '@/views/Design/images/8.png'
+import uploadPng from '@/views/Design/images/18.png'
+import signPng from '@/views/Design/images/22.png'
+import nspPng from '@/views/Design/images/106.png'
+
+
+
+
 const basicQuesTypeList = [
   {
-    icon: '',
+    icon: radioPng,
     name: '单选题',
     question_type: 1,
     json: radio
   },
   {
-    icon: '',
+    icon: checkboxPng,
     name: '多选题',
     question_type: 2,
     json: checkbox
   },
   {
-    icon: '',
+    icon: completionPng,
     name: '填空题',
     question_type: 4,
     json: completion
@@ -35,49 +51,49 @@ const basicQuesTypeList = [
   //   json: rate
   // },
   {
-    icon: '',
+    icon: ratePng,
     name: '数值打分',
     question_type: 5,
     json: rate
   },
   {
-    icon: '𓱿',
+    icon: martrixQuestionRadioPng,
     name: '矩阵单选',
     question_type: 9,
     json: martrixQuestion
   },
   {
-    icon: '',
+    icon:martrixQuestionCheckboxPng,
     name: '矩阵多选',
     question_type: 10,
     json: martrixQuestion
   },
   {
-    icon: '',
+    icon: martrixQuestionTextPng,
     name: '矩阵填空',
     question_type: 8,
     json: martrixQuestion
   },
   {
-    icon: '',
+    icon: uploadPng,
     name: '文件上传',
     question_type: 18,
     json: fileUpload
   },
   {
-    icon: '',
+    icon: textImagePng,
     name: '图文说明',
     question_type: 6,
     json: textWithImages
   },
   {
-    icon: '',
+    icon: signPng,
     name: '签名',
     question_type: 22,
     json: signQuestion
   },
   {
-    icon: '',
+    icon:nspPng,
     name: 'NPS',
     question_type: 106,
     json: nps

src/views/Survey/views/Create/Index.vue

@@ -99,20 +99,24 @@
           <van-col :span="6">添加题目</van-col>
         </van-row>
 
-        <van-grid :gutter="10" class="ques_list">
-          <van-grid-item
+        <div class="ques_list flex align-center " style="flex-wrap:wrap">
+          <div
+              class="icon-item"
             v-for="item in quesList"
             :key="item.type"
-            :icon="item.icon"
-            icon-color="#70b936"
-            :text="item.name"
             @click="questionEvent(item)"
           >
-            <template #icon>
-              <span class="mobilefont grid-icon" v-html="item.icon"></span>
-            </template>
-          </van-grid-item>
-        </van-grid>
+
+              <img :src="item.icon" alt="">
+              <p>{{item.name}}</p>
+<!--            <template #icon>-->
+
+
+
+<!--              <span class="mobilefont grid-icon" v-html="item.icon"></span>-->
+<!--            </template>-->
+          </div>
+        </div>
       </van-popup>
     </div>
 
@@ -382,6 +386,7 @@ import { useRoute, useRouter } from 'vue-router';
 import YLPicker from '@/components/YLPicker.vue';
 import { getPages } from '@/utils/public';
 import { showConfirmDialog, showFailToast, showToast } from 'vant';
+import {Position} from "@element-plus/icons-vue";
 
 // 获取 Store 实例
 const counterStore = useCounterStore();
@@ -1034,11 +1039,34 @@ onBeforeMount(() => {
   .ques_title {
     margin: 20px 0 10px 20px;
     font-weight: bold;
-    font-size: 16px;
+    font-size: 19px;
+    & div{
+      font-size: 19px;
+    }
   }
 
   .ques_list {
-    margin-bottom: 10px;
+    gap: 10px;
+    margin:20px 12px 30px 12px;
+    .icon-item{
+      flex: 1 1 calc(25% - 7.5px); // 每个元素占25%，减去间隙的一半（10px / 2 = 5px）
+      min-width: calc(25% - 7.5px);
+      max-width: calc(25% - 7.5px);
+      text-align: center;
+      position: relative;
+      height: 88px;
+      & p{
+
+        width:100%;
+        position: absolute;
+        bottom:11px;
+        font-size:14px;
+        text-align:center;
+        color: #000000;
+        font-weight: 500;
+
+      }
+    }
   }
 }
 
@@ -1091,6 +1119,16 @@ onBeforeMount(() => {
   }
 }
 
+
+.icon-item{
+  width:76px;
+  height:88px;
+  img{
+    width:100%;
+    height:100%
+  }
+}
+
 .survey-action {
   position: fixed;
   z-index: 1;