detail-cell.vue 1.1 KB

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