qiun-title-bar.vue 722 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="qiun-title-bar">
  3. <view class="qiun-title-dot"></view>
  4. <view class="qiun-title-text">{{title}}</view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. name: "title-bar",
  10. props: {
  11. title: {
  12. type: String,
  13. default: ''
  14. },
  15. },
  16. mounted() {
  17. },
  18. methods:{
  19. }
  20. }
  21. </script>
  22. <style>
  23. .qiun-title-bar{
  24. display: flex;
  25. flex-direction: row !important;
  26. flex-wrap: nowrap;
  27. align-items: center;
  28. height: 40px;
  29. }
  30. .qiun-title-dot {
  31. border-radius: 10px;
  32. background-color: #409EFF;
  33. width: 5px;
  34. height: 16px;
  35. margin-left: 8px;
  36. }
  37. .qiun-title-text {
  38. font-size: 17px;
  39. color: #666666;
  40. margin-left: 8px;
  41. line-height: 22px;
  42. height: 22px;
  43. font-weight: bold;
  44. }
  45. </style>