header.vue 817 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="header">
  3. <view class="back" @click="back"></view>
  4. <view class="title">
  5. <slot></slot>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. backTo: {
  13. type: String,
  14. required: false,
  15. default: null,
  16. }
  17. },
  18. data() {
  19. return {
  20. }
  21. },
  22. methods: {
  23. back() {
  24. this.$emit('back')
  25. }
  26. }
  27. }
  28. </script>
  29. <style lang="scss" scoped>
  30. .header {
  31. background: url('~@/static/login-bg-top.jpg') no-repeat;
  32. color: white;
  33. height: 80px;
  34. display: flex;
  35. flex-direction: row;
  36. justify-content: flex-start;
  37. align-items: center;
  38. font-size: 20px;
  39. .title {
  40. width: 100%;
  41. text-align: center;
  42. }
  43. .back {
  44. background: url('~@/static/back.png') no-repeat;
  45. background-size: 100% 100%;
  46. height: 15px;
  47. width: 15px;
  48. margin-left: 10px;
  49. }
  50. }
  51. </style>