<template>
	 <div class="xcx-page-topimg" @click.stop="controlClick">	 
			<p class="pic">
				<img :src="item.img" v-if="item.img">
			</p> 
			<p class="tit" v-if="item.title.s"><moduleText :text="item.title" /></p>
			<div class="note" v-if="item.note.s"><moduleText :text="item.note" /></div>
			<moduleBg class="bg" :base="item.base.dbg" />
			<moduleBg :base="item.base.ubg" />
	 </div>
</template>

<script>	
	import moduleText from './text.vue';
	import moduleBg from './bg.vue';
	export default{
		 name:'conTopimg',
		 props:{
			 'item':{type:Object},
			 'prev':{default:false}
		 },
		 components:{moduleText,moduleBg},
		 data(){
			 return{				 
			 }
		 },	
		 methods:{
			  controlClick(){
					if(!this.prev){
						this.$parent.controlClick(this.item.type);
					}
			  }
		 }
	}
</script>

<style>
	 .xcx-page-topimg {
	  position: relative;
	  padding: 0 12px;
	  overflow: hidden;
	  padding-top: 65px;
	  padding-bottom: 12px;
	}
	 .xcx-page-topimg .module-background.bg {
	  z-index: 1;
	  height: 100px;
	  width: 110%;
	  left: -5%;
	  background-color: #29c8a1;
	  border-bottom-left-radius: 50%;
	  border-bottom-right-radius: 50%;
	}
	 .xcx-page-topimg .pic {
	  width: 68px;
	  position: relative;
	  z-index: 2;
	  border-radius: 50%;
	  overflow: hidden;
	  height: 68px;
	  border: 2px solid rgba(255, 255, 255, 0.2);
	  background: rgba(255, 255, 255, 0.5);
	  margin: 0 auto;
	}
	 .xcx-page-topimg .pic img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
	 .xcx-page-topimg .tit {
	  font-size: 14px;
	  position: relative;
	  text-align: center;
	  z-index: 2;
	  display: block;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  padding-top: 5px;
	}
	 .xcx-page-topimg .note {
	  color: #999;
	  position: relative;
	  z-index: 2;
	  font-size: 12px;
	  line-height: 22px;
	  padding-top: 5px;
	}
	
</style>
