u-class.vue 787 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="u-class">
  3. <view class="title" :title="title">
  4. {{title}}
  5. <image class="icon" src="/static/index/card-title-icon.png"></image>
  6. </view>
  7. <view class="content">
  8. <slot />
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name:"u-class",
  15. props: {
  16. title: {
  17. type: String,
  18. default: ''
  19. },
  20. },
  21. data() {
  22. return {
  23. };
  24. }
  25. }
  26. </script>
  27. <style lang="scss" scoped>
  28. .u-class {
  29. .title {
  30. font-size: 36rpx;
  31. font-weight: bold;
  32. color: #333333;
  33. padding: 0 32rpx 0 40rpx;
  34. position: relative;
  35. .icon {
  36. width: 7rpx;
  37. height: 30rpx;
  38. position: absolute;
  39. left: 0;
  40. top: 50%;
  41. transform: translateY(-50%);
  42. }
  43. }
  44. .content {
  45. padding: 16rpx 0;
  46. margin-bottom: 32rpx;
  47. }
  48. }
  49. </style>