selectVariety.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="select-variety">
  3. <div class="select-variety__content">
  4. <!-- 选择种植品种 -->
  5. 种植品种
  6. </div>
  7. <div class="custom-bottom-fixed-btns">
  8. <div class="bottom-btn secondary-btn" @click="emit('prev')">上一步</div>
  9. <div class="bottom-btn primary-btn" @click="emit('confirm')">确定信息</div>
  10. </div>
  11. </div>
  12. </template>
  13. <script setup>
  14. const emit = defineEmits(["prev", "confirm"]);
  15. </script>
  16. <style lang="scss" scoped>
  17. .select-variety {
  18. flex: 1;
  19. display: flex;
  20. flex-direction: column;
  21. overflow: hidden;
  22. padding-bottom: 80px;
  23. &__content {
  24. flex: 1;
  25. overflow-y: auto;
  26. }
  27. .custom-bottom-fixed-btns {
  28. gap: 12px;
  29. background: transparent;
  30. box-shadow: none;
  31. .bottom-btn {
  32. flex: 1;
  33. padding: 12px 0;
  34. font-size: 16px;
  35. border-radius: 25px;
  36. }
  37. .secondary-btn {
  38. color: #2199f8;
  39. background: #fff;
  40. border: 1px solid #2199f8;
  41. }
  42. .primary-btn {
  43. background: #2199f8;
  44. color: #fff;
  45. }
  46. }
  47. }
  48. </style>