red-dot.vue 570 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <view class="u-cell-text">
  3. <view>{{text}}</view>
  4. <view class="dot-round"></view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'RedDot',
  10. props:{
  11. text: {
  12. type: String,
  13. default: ""
  14. },
  15. required: {
  16. type: Boolean,
  17. default: false
  18. }
  19. }
  20. }
  21. </script>
  22. <style lang="scss" scoped>
  23. .u-cell-text {
  24. font-size: 32rpx;
  25. }
  26. .u-cell-text {
  27. display: flex;
  28. align-items: center;
  29. .dot-round{
  30. margin-left: 15rpx;
  31. width: 10rpx;
  32. height: 10rpx;
  33. border-radius: 1000px;
  34. background-color: #fa541C;
  35. }
  36. }
  37. </style>