navTitle.vue 732 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div class="navTitle">{{navTitle}}</div>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'navTitle',
  7. data () {
  8. return {
  9. navTitle: '首页',
  10. iconLocal: 'http://oduj3utzz.bkt.clouddn.com/icon_local.png'
  11. }
  12. }
  13. }
  14. </script>
  15. <style scoped>
  16. .navTitle{
  17. width: 100%;
  18. text-align: center;
  19. padding: 0.2rem 0;
  20. background-color: #FFF;
  21. position: relative;
  22. }
  23. .navTitle::after{
  24. content: '';
  25. width: 25px;
  26. height: 25px;
  27. position: absolute;
  28. top:5px;
  29. left: 5px;
  30. background: url('http://oduj3utzz.bkt.clouddn.com/icon_local.png');
  31. background-size: 25px;
  32. background-repeat: no-repeat;
  33. /*border: 1px solid;*/
  34. }
  35. .navTitle img{
  36. display: block;
  37. width: 25px;
  38. margin-left: 15px;
  39. }
  40. </style>