uniapp写一个可以自定义问题并有好看样式的调查问卷代码

以下是一个 uniapp 调查问卷代码，使用了 vant UI 组件和自定义样式，可以自定义问题和样式：

<template>
  <view class="questionnaire">
    <van-form ref="form" v-model="form" label-width="80px">
      <van-field
        v-for="(question, index) in questions"
        :key="index"
        :name="'question' + (index + 1)"
        :label="question.text"
        :rules="[{ required: true, message: 'Answer is required' }]"
        placeholder="Answer here"
        autosize
        type="textarea"
        :class="question.className"
      />
    </van-form>
    <van-button type="primary" @click="submit">Submit</van-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      questions: [
        { text: 'What is your favorite color?', className: 'red' },
        { text: 'What is your favorite animal?', className: 'blue' },
        { text: 'What is your favorite food?', className: 'green' },
      ],
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('Form submitted:', this.form);
        } else {
          console.log('Form validation failed');
        }
      });
    },
  },
};
</script>

<style>
.questionnaire {
  padding: 20rpx;
}

.van-field__control {
  border-color: #dddddd;
  border-radius: 5rpx;
  padding: 20rpx;
}

.questionnaire .van-field__label {
  color: #666666;
  font-size: 32rpx;
  font-weight: bold;
}

.questionnaire .van-field__error-message {
  color: #f44336;
  font-size: 24rpx;
}

.questionnaire .red .van-field__label {
  color: #f44336;
}

.questionnaire .blue .van-field__label {
  color: #2196f3;
}

.questionnaire .green .van-field__label {
  color: #4caf50;
}
</style>

你可以根据需要自定义 questions 数组中的问题和类名，并在样式中为每个类名指定颜色和其他样式。