navigationBar.vue 873 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="navigationBarBox">
  3. <view class="navigationBar">
  4. <image v-if="isBack" src="../../static/images/back_icon.png" @tap="tapHandle"></image>
  5. <text>地块管护</text>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name:"navigationBar",
  12. props: {
  13. isBack: {
  14. type: Boolean,
  15. default: false
  16. }
  17. },
  18. data() {
  19. return {
  20. };
  21. },
  22. methods: {
  23. tapHandle(){
  24. this.$emit('toBack');
  25. }
  26. }
  27. }
  28. </script>
  29. <style lang="scss">
  30. .navigationBarBox {
  31. background: #fff;
  32. border-radius: 0px 0px 0px 0px;
  33. opacity: 1;
  34. text-align: center;
  35. height: $navigation-height;
  36. position: relative;
  37. >.navigationBar {
  38. bottom: 15px;
  39. position: absolute;
  40. width: 100%;
  41. >image {
  42. position: absolute;
  43. width: 10px;
  44. height: 18px;
  45. left: 10px;
  46. top: 0px;
  47. bottom: 0px;
  48. margin: auto;
  49. }
  50. >text {
  51. }
  52. }
  53. }
  54. </style>