graceSup.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template name="graceSup">
  2. <view class="grace-sup">
  3. <view class="text"
  4. :style="{'font-size':textSize, 'color':textColor,'font-weight':isBold ? '700' : '400'}">
  5. {{text}}
  6. </view>
  7. <view class="sup"
  8. :style="{'font-size':supSize, 'line-height':supSize, 'color':supColor}">{{sup}}</view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. props: {
  14. text:{
  15. type : String,
  16. default : "..."
  17. },
  18. textSize : {
  19. type : String,
  20. default : "30upx"
  21. },
  22. textColor : {
  23. type : String,
  24. default : "#0E151D"
  25. },
  26. sup:{
  27. type : String,
  28. default : "..."
  29. },
  30. supSize : {
  31. type : String,
  32. default : "22upx"
  33. },
  34. supColor : {
  35. type : String,
  36. default : "#A5A7B2"
  37. },
  38. isBold:{
  39. type : Boolean,
  40. default : false
  41. }
  42. }
  43. }
  44. </script>
  45. <style scoped>
  46. .grace-sup{padding:0; display:flex; flex-wrap:nowrap; align-items:flex-start;}
  47. .grace-sup .text{font-size:32upx; line-height:56upx;}
  48. .grace-sup .sup{font-size:26upx; line-height:26upx; margin-left:10upx; margin-top:6upx;}
  49. </style>