customCard.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="custom-card">
  3. <view class="custom-card-header">
  4. <view class="custom-card-action" @tap="BackPage">
  5. <u-icon name="arrow-left" color="#333333" size="32rpx" />
  6. <view class="custom-card-action-text">
  7. <slot name="backText"></slot>
  8. </view>
  9. </view>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'custom-card',
  16. props: {},
  17. data() {
  18. return {};
  19. },
  20. methods: {
  21. BackPage() {
  22. uni.navigateBack({
  23. delta: 1,
  24. });
  25. },
  26. },
  27. };
  28. </script>
  29. <style scoped lang="scss">
  30. .custom-card {
  31. border-radius: 16upx;
  32. opacity: 1;
  33. }
  34. .custom-card-header {
  35. padding: 0 23upx;
  36. height: 90rpx;
  37. color: #333333;
  38. font-size: 27upx;
  39. font-weight: 600;
  40. font-family: 'PingFang SC';
  41. line-height: 44upx;
  42. .custom-card-action {
  43. display: flex;
  44. align-items: center;
  45. height: 90rpx;
  46. line-height: 90rpx;
  47. .custom-card-action-text {
  48. width: 90%;
  49. text-align: center;
  50. color: #042118;
  51. font-size: 34rpx;
  52. }
  53. }
  54. }
  55. </style>