123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <template>
- <div :style="style+'padding-top:'+statusBarHeight+'px'" >
- <div class="xcx-title flex-center" @click.stop="controlClick" :style="'height:'+height+'px;'">
- <span class="el-icon-arrow-left" :style="fhstyle" v-if="title.fh.s"></span>
- <p class="tit" v-if="title.title.s">
- <moduleText :text="title.title" :name="name" />
- </p>
- <!-- <img src="@/assets/xcx.png" alt="" /> -->
- <moduleBg :base="title.base" />
- </div>
- </div>
- </template>
- <script>
- import moduleText from './text.vue';
- import moduleBg from './bg.vue';
- export default {
- props: {
- 'title': {
- type: Object
- },
- 'name': {
- default: ''
- },
- 'prev': {
- default: false
- }
- },
- components: {
- moduleText,
- moduleBg
- },
- data() {
- return {
- height: 50,
- statusBarHeight: 0
- }
- },
- created() {
- var _this = this;
- uni.getSystemInfo({
- success: function(e) {
- // #ifdef MP-WEIXIN
- var custom = uni.getMenuButtonBoundingClientRect();
- _this.height = custom.height+3*(custom.top-e.statusBarHeight);
- // #endif
- // 导航栏高度=状态栏高度+标题栏高度,标题栏高度=胶囊按钮高度+3*(胶囊按钮Top-状态栏高度)
- // #ifdef MP-ALIPAY
- var custom = e.titleBarHeight;
- _this.height = custom;
- // #endif
- // console.log(custom, e, "getSystemInfo")
- _this.statusBarHeight = e.statusBarHeight
- }
- })
- },
- computed: {
- style() {
- let bg = '';
- if (this.title.base.bg == 2) {
- bg = 'background:none;';
- } else if (this.title.base.bg == 3) {
- if (this.title.base.bt == 1) {
- bg = `background:${this.title.base.bc};`;
- } else if (this.title.base.bt == 2 && this.title.base.bi != '') {
- bg = `background: rgba(0,0,0,0.2);;background-size:cover;`;
- }
- }
- return bg;
- },
- fhstyle() {
- if (this.title.fh.d) {
- let style = `font-size:${this.title.fh.f}px;color:${this.title.fh.c};`;
- if (this.title.fh.b) {
- style += 'font-weight:bold;';
- }
- if (this.title.fh.i) {
- style += 'font-style:italic;';
- }
- if (this.title.fh.u) {
- style += 'text-decoration:underline;';
- }
- return style;
- }
- }
- },
- methods: {
- controlClick() {
- if (!this.prev) {
- this.$parent.controlClick(this.title.type);
- }
- }
- }
- }
- </script>
- <style>
- .xcx-title {
- height: 50px;
- position: relative;
- background: #fff;
- text-align: center;
- /* padding-top: 15px; */
- z-index: 999;
- }
- .xcx-title img {
- position: absolute;
- z-index: 1;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- width: 72px;
- height: 30px;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 30px;
- }
- .xcx-title .tit {
- font-size: 15px;
- /* line-height: 50px; */
- margin: 0;
- padding: 0;
- position: relative;
- z-index: 1;
- }
- .xcx-title .el-icon-arrow-left {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 1;
- width: 40px;
- height: 100%;
- color: #888;
- cursor: pointer;
- font-size: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- </style>
|