Goodgame_web/pages/part/footer.vue

<template>
	<view class="bgc-e6 footer_contnet">
		<view class="footer max-width">
			<view class="b_img">
				<image class="b_logo" src="../../static/img/index/blogos.png"></image>
				<view class="b_code">
					<view class="btext">扫码关注公众号</view>
					<image class="c_img" :src="data.mp_image"></image>
				</view>
			</view>
			<view class="footer_nav">
				<view class="f_navs">
					<text class="nav"  @tap="goPath('/news?index=1')">平台简介</text>
					<text class="nav">|</text>
					<text class="nav"  @tap="goPath('/game')">资产中心</text>
					<text class="nav">|</text>
					<text class="nav"  @tap="goPath('/invest')">投融资</text>
					<text class="nav">|</text>
					<text class="nav"  @tap="goPath('/news?index=2')">新闻中心</text>
					<text class="nav">|</text>
					<text class="nav"  @tap="goPath('/expert')">专家库</text>
					<!-- <text class="nav">|</text>
					<text class="nav"  @tap="goPath('/news?index=4')">资方信息</text>
				
					<text class="nav">|</text>
					<text class="nav"  @tap="goPath('/news?index=3')">帮助中心</text> -->
					
				</view>
				<view class="footer_nav_list">
				<text style="cursor: pointer;" @tap="active({url:'https://cogapi.scszsj.com/convention.html'})">《平台管理公约》</text>
				<text style="cursor: pointer;" @tap="active({url:'https://cogapi.scszsj.com/service.html'})">《用户服务协议》</text>
				</view>
				
				<view class="footer_nav_list">抵制不良游戏, 拒绝盗版游戏. 注意自我保护, 谨防受骗上当. 适度游戏益脑, 沉迷游戏伤身. 合理安排时间, 享受健康生活。</view>
				<!-- <view class="footer_nav_list">
					<view class="foot_url">
						<view class="url1">网络游戏出版服务平台: </view>
						<a href="https://gisp.scszsj.com/" style="color: #888888;"><view>四川游戏研发出版运营综合服务平台</view></a>
					</view>
					<view class="foot_url" style="margin-top: 6px;">
						<view class="url1">动漫游戏上链: </view>
						<a href="https://acgbanquan.scszsj.com/" style="color: #888888;"><view>四川游戏动漫版权综合服务平台</view></a>
					</view>
				</view> -->
				<view class="footer_nav_list">网站备案许可证</view>
				<view class="footer_nav_list">网站备案编号：<a href="https://beian.miit.gov.cn/" style="color: #888888;">{{data.record}}</a></view>
				<view class="footer_nav_list">网信备案编号：<a href="https://bcbeian.ifcert.cn/index" style="color: #888888;">蜀网信备51010125629049300016号</a></view>
				<view class="footer_nav_list">{{data.copyright}}</view>
				<view class="footer_nav_list">商务对接:{{data.wechat}}</view>
				<view class="footer_nav_list">投诉举报:{{data.report}}</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data:{
				type: Object,
				default: {},
			}
		},
		data(){
			return {
				
			}
		},
		created() {
		},
		methods:{
			active(e){
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	 .nav:hover {
	      text-decoration: underline;
	    }
	a:hover {
	     text-decoration: underline;
	   }	
	.foot_url{
		display: flex;
	}
	.url1{
		width: 200px;
	}
	.footer_contnet{
		width: 100%;
		// height: 341px;
		// background: #272A2C;
		background: radial-gradient( 90% 0% at 0% 0%, #111111 0%, #332B25 100%);
		// position: absolute;
		// bottom: 0;
	}
	.footer{
		width: 1130px;
		padding-top: 28px;
		display: flex;
		
		.b_img{
			width: 217px;
			text-align: center;
			margin-top: 20px;
			.b_logo{
				width: 217px;
				height: 54px;
			}
		}
		.b_code{
			margin: 10px auto;
			width: 217px;
			height: 158px;
			background: #3C3C3C;
			border-radius: 3px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			.c_img{
				margin-top: 4px;
				width: 118px;
				height: 118px;
				background: #727272;
				border-radius: 4px;
			}
			.btext{
				font-size: 14px;
				font-weight: 400;
				color: #888888;
				margin-top: -2px;
				width: 60px;
				margin-right: 10px;
			}
		}
		.footer_nav{
			margin-left: 109px;
			font-weight: 400;
			color: #888888;
			line-height: 24px;
			font-size: 14px;
			.f_navs{
				display: flex;
				align-items: center;
				margin-bottom: 12px;
				margin-top: 0px;
				.nav{
					margin-right: 12px;
					cursor: pointer;
				}
			}
			.footer_nav_list{
				margin-bottom: 12px;
			}
		}
	}
	
	@media screen and (max-width: 768px) {
		.footer_contnet{
		   height: auto !important; 
		}
		.footer{
			flex-direction: column;
			width: 85%;
		}
		.b_img{
			width: 100% !important; 
		}
		.footer .b_img .b_logo{
		    width: 150px !important;
		    height: 45px !important;
		}
		.b_code{
			width: 100px !important;
			height: 120px !important;
			flex-direction: column;
			margin-top: 10px !important;
		}
		.btext{
			font-size: 12px !important;
			width: 100% !important;
			margin-right: 0 !important;
		}
		.c_img{
			width: 90px !important;
			height: 90px !important;
			margin: 5px 0 !important;
		}
		.footer_nav{
			width: 100% !important; 
			margin-left:0 !important; 
		}
		
		.footer_nav{
			margin-left: 0px !important;
			line-height: 20px !important;
			font-size: 12px !important;
			.f_navs{
				margin-bottom: 6px !important;
				margin-top: 18px !important;
				flex-flow: wrap;
				.nav{
					margin-right: 12px !important;
				}
			}
			.footer_nav_list{
				margin-bottom: 6px !important;
			}
		}
	}
	
</style>