contitle.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div :style="style+'padding-top:'+statusBarHeight+'px'" >
  3. <div class="xcx-title flex-center" @click.stop="controlClick" :style="'height:'+height+'px;'">
  4. <span class="el-icon-arrow-left" :style="fhstyle" v-if="title.fh.s"></span>
  5. <p class="tit" v-if="title.title.s">
  6. <moduleText :text="title.title" :name="name" />
  7. </p>
  8. <!-- <img src="@/assets/xcx.png" alt="" /> -->
  9. <moduleBg :base="title.base" />
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import moduleText from './text.vue';
  15. import moduleBg from './bg.vue';
  16. export default {
  17. props: {
  18. 'title': {
  19. type: Object
  20. },
  21. 'name': {
  22. default: ''
  23. },
  24. 'prev': {
  25. default: false
  26. }
  27. },
  28. components: {
  29. moduleText,
  30. moduleBg
  31. },
  32. data() {
  33. return {
  34. height: 50,
  35. statusBarHeight: 0
  36. }
  37. },
  38. created() {
  39. var _this = this;
  40. uni.getSystemInfo({
  41. success: function(e) {
  42. // #ifdef MP-WEIXIN
  43. var custom = uni.getMenuButtonBoundingClientRect();
  44. _this.height = custom.height+3*(custom.top-e.statusBarHeight);
  45. // #endif
  46. // 导航栏高度=状态栏高度+标题栏高度,标题栏高度=胶囊按钮高度+3*(胶囊按钮Top-状态栏高度)
  47. // #ifdef MP-ALIPAY
  48. var custom = e.titleBarHeight;
  49. _this.height = custom;
  50. // #endif
  51. // console.log(custom, e, "getSystemInfo")
  52. _this.statusBarHeight = e.statusBarHeight
  53. }
  54. })
  55. },
  56. computed: {
  57. style() {
  58. let bg = '';
  59. if (this.title.base.bg == 2) {
  60. bg = 'background:none;';
  61. } else if (this.title.base.bg == 3) {
  62. if (this.title.base.bt == 1) {
  63. bg = `background:${this.title.base.bc};`;
  64. } else if (this.title.base.bt == 2 && this.title.base.bi != '') {
  65. bg = `background: rgba(0,0,0,0.2);;background-size:cover;`;
  66. }
  67. }
  68. return bg;
  69. },
  70. fhstyle() {
  71. if (this.title.fh.d) {
  72. let style = `font-size:${this.title.fh.f}px;color:${this.title.fh.c};`;
  73. if (this.title.fh.b) {
  74. style += 'font-weight:bold;';
  75. }
  76. if (this.title.fh.i) {
  77. style += 'font-style:italic;';
  78. }
  79. if (this.title.fh.u) {
  80. style += 'text-decoration:underline;';
  81. }
  82. return style;
  83. }
  84. }
  85. },
  86. methods: {
  87. controlClick() {
  88. if (!this.prev) {
  89. this.$parent.controlClick(this.title.type);
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style>
  96. .xcx-title {
  97. height: 50px;
  98. position: relative;
  99. background: #fff;
  100. text-align: center;
  101. /* padding-top: 15px; */
  102. z-index: 999;
  103. }
  104. .xcx-title img {
  105. position: absolute;
  106. z-index: 1;
  107. right: 12px;
  108. top: 50%;
  109. transform: translateY(-50%);
  110. width: 72px;
  111. height: 30px;
  112. background: rgba(0, 0, 0, 0.2);
  113. border-radius: 30px;
  114. }
  115. .xcx-title .tit {
  116. font-size: 15px;
  117. /* line-height: 50px; */
  118. margin: 0;
  119. padding: 0;
  120. position: relative;
  121. z-index: 1;
  122. }
  123. .xcx-title .el-icon-arrow-left {
  124. position: absolute;
  125. left: 0;
  126. top: 0;
  127. z-index: 1;
  128. width: 40px;
  129. height: 100%;
  130. color: #888;
  131. cursor: pointer;
  132. font-size: 20px;
  133. display: flex;
  134. justify-content: center;
  135. align-items: center;
  136. }
  137. </style>