en-select.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <view class="select">
  3. <view class="title p-30 row-justify-sb">
  4. <view class="icon"></view>
  5. <text class="size-30 sys-weight-600">{{title}}</text>
  6. <view class="icon">
  7. <uni-icons :animation="animationData" class="dropdown-icon" type="closeempty" size="16"
  8. color="#666"></uni-icons>
  9. </view>
  10. </view>
  11. <view class="select">
  12. <scroll-view scroll-y="true" class="scroll-Y select">
  13. <view id="demo1" class="scroll-view-item" v-for="(item,index) in 5" @click="onSelect(index)">
  14. <text class="size-28 color-0FB160">回款回款回款</text>
  15. </view>
  16. </scroll-view>
  17. </view>
  18. <EnButton :is_fixed="false"></EnButton>
  19. </view>
  20. </template>
  21. <script>
  22. import EnButton from "@/components/en-utils/en-button/en-button.vue";
  23. export default {
  24. name: 'peak_chart',
  25. props: {
  26. title: {
  27. type: String,
  28. default: '选择'
  29. }
  30. },
  31. components: {
  32. EnButton
  33. },
  34. data() {
  35. return {
  36. current: 0,
  37. list: ['放款', '回款']
  38. };
  39. },
  40. methods: {
  41. onChange(e) {
  42. this.current = e
  43. },
  44. onSelect(index) {
  45. this.$emit('onChange', index)
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss">
  51. .select {
  52. height: 800rpx;
  53. }
  54. .icon {
  55. width: 40rpx;
  56. text-align: right;
  57. }
  58. .scroll-view-item {
  59. height: 90rpx;
  60. line-height: 90rpx;
  61. text-align: center;
  62. background: rgba(15, 177, 96, 0.1);
  63. border-radius: 10rpx;
  64. border: 1rpx solid #0FB160;
  65. margin: 16rpx 30rpx;
  66. }
  67. </style>