<template> <view :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 999;"> <view class="head" :style="{ height: height + 'px', background:background}"> <view class="back" @click="back" v-if="backShow" :style="{ top: top + 'px', color:color }"> <image v-if="worksid == 1" src="../../../static/recommend/house.png" mode="aspectFit" style="width: 39upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image> <image v-if="worksid == 0" src="../../../static/recommend/icon_back.png" mode="aspectFit" style="width: 23upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image> </view> <view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view> </view> </view> </template> <script> export default { props: { worksid:{ type: Number, default: 0 }, title: { type: String, default: '自定义标题' }, size:{ type: String, default: '32' }, color:{ type: String, default: '#000' }, titleShow: { type: Boolean, default: true }, backShow: { type: Boolean, default: true }, background:{ type: String, default: "linear-gradient(to right, #43e97b 0%, #38f9d7 100%)" } }, data() { return { height :0, top:0, } }, mounted() { }, created() { this.height = 60 this.top = 10 }, methods: { back(){ if(this.worksid > 0){ uni.reLaunch({ url: '../index/mall' }); }else{ uni.navigateBack(); } } }, onLoad(options) { }, onShow() { } } </script> <style> .head{ position: fixed; width: 750rpx; z-index: 888; align-items: center; } .title{ position: fixed; width: 750rpx; text-align: center; line-height: 32px; height: 32px; } .back{ position: fixed; width: 81rpx; text-align: center; line-height: 32px; height: 32px; font-size: 32rpx; font-weight: 900; z-index: 9; align-items: center; } </style>