style(css): 优化问卷设计和预览样式

- 添加自定义复选框和单选按钮样式
- 调整矩阵问题表格样式
- 优化 NPS 问题布局
- 统一预览组件属性命名
-调整部分颜色变量

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

@@ -1,6 +1,7 @@
 <template>
   <input
     type="checkbox"
+    class="mobilefont"
     :name="`R${rowIndex + 1}`"
     :checked="isOptionChecked(rowIndex, colIndex)"
     @change="handleMatrixCheckboxChange(rowIndex, colIndex)"
@@ -58,3 +59,35 @@ const emitValue = (/* val: unknown */) => {
   emit('update:element', element.value);
 };
 </script>
+<style scoped lang="scss">
+@import '@/assets/css/main';
+input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ccc;
+  border-radius: 1px;
+  outline: none;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.4s ease;
+  &:checked {
+    border-color: $theme-color;
+    background: $theme-color;
+    &::after {
+      content: '\2713';
+      font-family: 'Arial', sans-serif; // 确保符号正常显示
+      color: #fff; // 勾选符号的颜色
+      font-size: 12px; // 勾选符号的大小
+      display: block;
+      position: absolute;
+      background: $theme-color;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>