uniapp 写一个可以进行多样化编辑的调查问卷代码并附带好看的样式

好的，以下是一个基于uniapp的多样化编辑调查问卷的代码示例，同时附带了漂亮的样式：

<template>
  <view class="container">
    <form>
      <view v-for="(question, index) in questions" :key="index" class="question">
        <view class="title">
          <text>{{question.title}}</text>
        </view>
        <view class="answer">
          <template v-if="question.type==='text'">
            <input type="text" v-model="question.answer" placeholder="请输入" />
          </template>
          <template v-else-if="question.type==='textarea'">
            <textarea v-model="question.answer" placeholder="请输入"></textarea>
          </template>
          <template v-else-if="question.type==='radio'">
            <label v-for="(option, i) in question.options" :key="i" class="radio-option">
              <input type="radio" :name="'q'+index" :value="option" v-model="question.answer" />
              <span class="radio-label">{{option}}</span>
            </label>
          </template>
          <template v-else-if="question.type==='checkbox'">
            <label v-for="(option, i) in question.options" :key="i" class="checkbox-option">
              <input type="checkbox" :name="'q'+index" :value="option" v-model="question.answer" />
              <span class="checkbox-label">{{option}}</span>
            </label>
          </template>
          <template v-else-if="question.type==='select'">
            <select v-model="question.answer">
              <option v-for="(option, i) in question.options" :key="i" :value="option">{{option}}</option>
            </select>
          </template>
        </view>
      </view>
      <button type="submit" @click.prevent="submit" class="submit-button">提交</button>
    </form>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.question {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  width: 90%;
  max-width: 500px;
}

.title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.answer {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input[type="text"],
textarea,
select {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  cursor: pointer;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
  appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.radio-option input[type="radio"]:checked::before,
.checkbox-option input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007aff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-label,
.checkbox-label {
  cursor: pointer;
}

.submit-button {
  margin-top: 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  width: 200px;
  max-width: 90%;
  transition: background-color 0.2s ease-in-out;
}

.submit-button:hover {
  background-color: #0062cc;
}
</style>

<script>
export default {
  data() {
    return {
      questions: [
        {
          title: "您的姓名是？",
          type: "text",
          answer: ""
        },
        {
          title: "您的年龄是？",
          type: "text",
          answer: ""
        },
        {
          title: "您的性别是？",
          type: "radio",
          options: ["男", "女"],
          answer: ""
        },
        {
          title: "您的职业是？",
          type: "select",
          options: ["学生", "工程师", "教师", "医生", "其他"],
          answer: ""
        },
        {
          title: "您喜欢的颜色是？",
          type: "checkbox",
          options: ["红色", "蓝色", "绿色", "黄色", "紫色"],
          answer: []
        },
        {
          title: "您的建议是？",
          type: "textarea",
          answer: ""
        }
      ]
    };
  },
  methods: {
    submit() {
      // 在这里提交问卷数据
      console.log(this.questions);
    }
  }
};
</script>

这里我们在原有代码的基础上，增加了一些样式规则，例如整体容器样式、问题容器样式、题目样式、输入框样式、单选框和多选框样式等。同时，我们使用了一些常见的UI设计技巧，例如圆角边框、阴影效果、过渡效果等，使得整个问卷页面更加美观和易于操作。