<template>
	<Layout :index="5" :titles="'我要版权'" :title_content="'我要版权'">
 <view >
  <view class="content">
       <view class="content_top">
          <view class="banner">
			   <image class="banner_img" src="../static/imgs/need/bq_banner.png"></image>
			   <image class="banner_title" src="../static/imgs/need/bq_title.png"></image>
			   <image class="pr" src="../static/imgs/p_r.png"></image>
			   <image class="pl" src="../static/imgs/p_l.png"></image>
			   <view class="banner_desc">“COG 好游戏计划”联合版权部门、执法部门、律师事务所等开展跨区域、跨平台打击侵权盗版，维护企业合法权益</view>
           </view>
		  </view>
	   <!--content_bottom -->
        <view class="content_bottom">
			 <view class="content_box">
					<view class="title_box">
						<view class="index_title">
							<view><image class="t_l" src="../static/imgs/tl.png"></image></view>
							<h5>登记证书</h5>
							<view><image class="t_l" src="../static/imgs/tr.png"></image></view>
						</view> 
					</view>
					<view class="one_cert">
						<image class="cert_img" src="../static/imgs/need/bq_cert.png"></image>
						<view class="cert_desc">
							<view class="cert_title">作品登记证书</view>
							<view class="cert_content">颁发由“国家版权局统一监制”，省版权局签章全国有效的作品登记证书。<br/>
四川省版权局授权官方版权工作站，专业权威，捍卫创作者合法权益。</view>
							<view class="apply" @tap="need()">了解更多</view>
						</view>
						
					</view> 
					
			 </view>
			 
			
        </view>

    </view>
	</view>
	</Layout>
</template>

<script>
	/**
	 * 程序启动页
	 * */
	import Layout from './part/layouts.vue';
	export default {
		components: {
			Layout, 
		},
		data() {
			return {  
				activeIndex: 0, // 当前激活的选项卡索引
				Customer_service:false,
				comment:false,
				Inv:0,
				codeTime:0,
				FormData: {
					phone: '', 
					name:'',
					content:'',
				},
				close:true,
				articles:[],
				msg: '',
				active_num:0,
				
			}
		},
		onLoad() {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('pageData', data => {
			// 	console.log(data,3333)
			// 	// data即传过来的参数
			// })
		},
		
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop); 
		},
		onShow(params) {
			// this.getIndex();
		},
		methods: {
			onClickItem(index){
				   this.active_num = index;
			},
			handleMouseEnter(index){
				   this.activeIndex = index;
			},
			handleMouseLeave(){
				 this.activeIndex = 0;
			},
			del_btn(){
				this.Customer_service=false
			},
			del_comment(){
				this.comment=false
			},
			need(){
				window.open('https://acgbanquan.scszsj.com/', '_blank');
			},		
			goNews(e){
				uni.navigateTo({
					url: '/news'
				})
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family:"Source Han Sans CN", sans-serif;
		background-color: #ffffff;
	}
	.banner_title{
		width: 355px !important;
		height: 133px !important;
		position: absolute;
		top: 100px;
		left: 350px;
	}
	.pr{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 183px;
		left: 344px;
	}
	.pl{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 98px;
		left: 656px;
	}
	.banner_desc{
		width: 480px;
		position: absolute;
		top: 301px;
		left: 355px;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
	}
	.content_box{
		overflow: hidden;
	}
	
	.content{
	    width:100%;
	    margin: 0 auto;
	}
	.content_top{
	    width: 100%;
	    display: flex;
	    margin:0 auto;
	}
	.banner{
	    width: 100%;
	    height: 480px;
		overflow: hidden;
		position: relative;
	}
	.banner uni-swiper {
	    display: block;
	      height: 480px;
	}
	.banner .banner_img{
		width: 100%;
		height: 480px;
	}
	.slide-image {
	  width: 100%;
		height: 480px;
	}
	.index_title{
	    text-align: center;
	}
	.index_title h4{
	    font-size: 36px;
	    font-weight: inherit;
	    color: #333333;
	    margin: 40px auto 0;
	}
	.title_box p{
	    font-size: 16px;
	    color: #666;
		text-align: center;
	}
	
	>>>.uni-list-item__container{
		    padding:0!important; 
			padding-left: 0!important; 
	}
	.index_title {
		  height: 40px;
		  line-height: 40px;
		  display: flex;
		  justify-content: center;
		  margin-top: 49px;
	}
	  .index_title h5{
			font-weight: 700;
			font-size: 30px;
			color: #3D3D3D;
			margin: 0 10px;
		}
		.index_title view{
			height: 40px;
			line-height: 40px;
		}
	.index_title .t_l{
		  width: 39px;
		  height: 39px;
		  vertical-align: middle;
	}
	.content_bottom{
	    width: 100%;
	    margin:  0 auto;
		background: url(../static/imgs/need/bq_bg.png) no-repeat;
		background-size: 100% 100%;
	}
	/* add */
	.one_cert{
		width: 1050px;
		 height: 380px;
		 margin: 0 auto;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 margin: 0 auto;
		 margin-top:88px;
		 margin-bottom: 152px;
	}
	.cert_img{
		width: 494px;
		height: 378px;
	}
	.cert_desc{
		width: 463px;
		height: 260px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.cert_title{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 26px;
		color: #3D3D3D;
		line-height: 22px;
	}
   .cert_content{
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 28px;
   }
   .apply{
   	width: 134px;
   	height: 46px;
   	background: url(../static/imgs/need/bq_more.png) no-repeat;
   	background-size: 100% 100%;
	font-weight: 400;
	font-size: 16px;
	color: #ED6300;
	text-align: center;
	line-height: 46px;
	cursor: pointer;
   }
   .apply:hover{
   		opacity: 0.8;
   }
   @media screen and (max-width: 768px) {
   	  .banner_desc{
   		  line-height: 12px !important;
   		  width: 190px !important;
   	  }
   	.banner{
   	    height: 130px !important;
   	}
   	.banner uni-swiper {
   	       height: 130px !important;
   	}
   	.banner .banner_img{
   		  height: 130px !important;
   	}
   .index_title{
   	  margin-top: 20px; 
   }
   .index_title h5{
   	font-size: 14px !important;
   }
   .one_cert{
	   flex-direction: column;
	   width: 200px !important;
	   height: 280px !important;
	   justify-content: flex-start;
   }
   .cert_img{
	   width: 200px !important;
	   height: 153px !important;
   }
   .cert_desc{
	   margin-top: 10px;
	   width: 200px !important;
   }
   .cert_title{
	   font-size: 12px !important;
	   line-height: 22px !important;
   }
   .cert_content{
	   font-size: 10px !important;
	   line-height: 16px !important;
   }
   
   	.apply{
   		width: 100px;
   		height: 22px;
   		border-radius: 22px;
   		line-height: 22px;
   		font-size: 10px !important;
		margin: 10px auto !important;
   	}
   	.b20{
   		width: 100%;
   		height: 20px;
   	}
   }
</style> 
