contact.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <view class="container">
  3. <view class="input-container">
  4. <textarea class="text" placeholder="请输入反馈内容" v-model="inputValue" />
  5. </view>
  6. <button class="submit-button" @click="submit">提交</button>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. inputValue: '' // 绑定输入框的v-model
  14. };
  15. },
  16. methods: {
  17. submit() {
  18. // 处理提交逻辑
  19. console.log('提交的内容:', this.inputValue);
  20. // 这里可以添加代码将输入的内容发送到服务器或者进行其他处理
  21. }
  22. }
  23. };
  24. </script>
  25. <style scoped>
  26. .container {
  27. display: flex;
  28. flex-direction: column;
  29. height: 100%;
  30. font-size: 60px;
  31. display: flex;
  32. flex-direction: column;
  33. align-items: center;
  34. padding: 20px;
  35. background-color: #f0efef;
  36. }
  37. .input-container {
  38. margin-bottom: 20px;
  39. }
  40. .text{
  41. border: 1px solid #bbbaba;
  42. border-radius: 8px;
  43. padding: 10px;
  44. font-size: 20px;
  45. background-color: white;
  46. }
  47. .submit-button {
  48. background-color: #9ee493;
  49. color: white;
  50. width: 200px;
  51. font-size: 30px;
  52. border: none;
  53. border-radius: 4px;
  54. cursor: pointer;
  55. }
  56. .submit-button:active {
  57. background-color: #9ee493;
  58. }
  59. </style>