 <template>
    <section :class="isNavFix ? 'nav-top fixed' : 'nav-top'">
        <div class="nav-part" :style="'background:'+bgColor">
            
            <div class="nav-title">
                <span class="nav-back" @click="goBack">
                    <img src="../../images/grey-throw.png"/>
                </span>
                {{title}}
                 <span class="nav-share" @click="goShare">
                    <img src="../../images/Shape1@2x.png"/>
                </span>
            </div>
           
        </div>
      
    </section>
</template>

<script>
    export default {
    	data(){
            return{
              // title:'测试',
              content:'',
              shareImageUrl:'',
            }
        },
        props:{
            bgColor:{//背景色
                type:String,
                default:''
            },
            title:{//标题
                type:String,
                default:''
            },
            isNavFix:{//是否fix定位
                type:Boolean,
                default:true
            }
        },

        mounted(){
            
        },
  
        methods: {

            //返回
            goBack(){
                this.$router.back(-1);
                //rocNative.backPreviousPage();
               //rocNative.goBack();
            },

            //分享
            goShare(){
                let url = location.hef,_this = this;
                rocNative.shareWechat({
                    url:url,
                    title:_this.title,
                    content:_this.content,
                    shareImageUrl:_this.shareImageUrl
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import '../../style/mixin';
	.nav-top{
        height: px2rem(65px);
       
        background: #fff;
        color: #333;
        position: relative;
        z-index: 109;
        .nav-back{
            display: inline-block;
            position: absolute;
            left:px2rem(8px);;
            top:0;
            height: px2rem(25px);
            width: px2rem(25px);
            transform:rotate(180deg);
        }
        img{
            display: block;
            width: 100%;
            height: 100%
        }
        .nav-icon{
            display: inline-block;
            width: 50px;
            height: 50px;
            svg{
                stroke: #000;
                fill: #0000ff;
            }
        }
        .nav-share{
            position: absolute;
            right: px2rem(8px);;
            top:0;
            height: px2rem(25px);
            width: px2rem(25px);

        }
        .nav-title{
            display: inline-block;
            width: 100%;
           /* padding:0 px2rem(33px);*/
            position: relative;
        }
        .nav-part{
            
            width: 100%;
           
            font-size: px2rem(18px);
            text-align: center;
            padding:  px2rem(30px) 0 px2rem(10px) 0;
           /* height: px2rem(25px);*/
            
        }
    }
    .fixed{
        .nav-part{
            position: fixed;
            top:0;
            left: 0;
           
            border-bottom: 1px solid #E7E7E7;
           
           /* height: px2rem(25px);*/
            
        }
    }
    
</style>

