SettingItem.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="setting_item" @click="$emit('click')">
  3. <view class="item_left">
  4. <slot name="icon">
  5. <image :src="icon" mode=""></image>
  6. </slot>
  7. <view class="">
  8. <view>{{ title }}</view>
  9. <slot name="left"></slot>
  10. <!-- <view>纪洁、杰西</view> -->
  11. </view>
  12. </view>
  13. <view v-if="showRight" class="item_right">
  14. <slot name="right"></slot>
  15. <u-icon name="arrow-right"></u-icon>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. components: {},
  22. props: {
  23. icon: String,
  24. showRight: Boolean,
  25. title: String
  26. },
  27. data() {
  28. return {};
  29. },
  30. methods: {}
  31. };
  32. </script>
  33. <style lang="scss" scoped>
  34. .setting_item {
  35. display: flex;
  36. justify-content: space-between;
  37. align-items: center;
  38. padding: 36rpx 32rpx;
  39. background-color: #fff;
  40. border-bottom: 1px solid rgba(126, 134, 142, 0.16);
  41. .item_left {
  42. display: flex;
  43. // align-items: center;
  44. image {
  45. width: 20px;
  46. height: 20px;
  47. margin-right: 24rpx;
  48. }
  49. }
  50. .item_right {
  51. display: flex;
  52. color: #999;
  53. .u-icon {
  54. margin-left: 24rpx;
  55. }
  56. }
  57. &:last-of-type {
  58. border-width: 0;
  59. }
  60. }
  61. </style>