detail-cell.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="detail-cell-wrap ss-flex ss-col-center ss-row-between" @tap="onClick">
  3. <view class="label-text">{{ label }}</view>
  4. <view class="cell-content ss-line-1 ss-flex-1">{{ value }}</view>
  5. <button class="ss-reset-button">
  6. <text class="_icon-forward right-forwrad-icon"></text>
  7. </button>
  8. </view>
  9. </template>
  10. <script setup>
  11. /**
  12. * 详情 cell
  13. *
  14. */
  15. const props = defineProps({
  16. label: {
  17. type: String,
  18. default: '',
  19. },
  20. value: {
  21. type: String,
  22. default: '',
  23. },
  24. });
  25. const emits = defineEmits(['click']);
  26. // 点击
  27. const onClick = () => {
  28. emits('click');
  29. };
  30. </script>
  31. <style lang="scss" scoped>
  32. .detail-cell-wrap {
  33. padding: 10rpx 20rpx;
  34. // min-height: 60rpx;
  35. .label-text {
  36. font-size: 28rpx;
  37. font-weight: 500;
  38. color: $dark-9;
  39. margin-right: 38rpx;
  40. }
  41. .cell-content {
  42. font-size: 28rpx;
  43. font-weight: 500;
  44. color: $dark-6;
  45. }
  46. .right-forwrad-icon {
  47. font-size: 28rpx;
  48. font-weight: 500;
  49. color: $dark-9;
  50. }
  51. }
  52. </style>