zhongde-website/components/home/footer.vue

<template>
	<footer class="v-footer">
		<img class="footer-logo" src="~/assets/images/home/logo_footer.png" alt="" srcset="">
		<div id="sino-footer">
			<div class="sino-footer-box">
				<div class="footer-nav">
					<div class="title">关于中德</div>
					<ul class="footer-nav-list">
						<li>
							<nuxt-link class="title" to="/product/list">产品与服务</nuxt-link>
						</li>
						<li>
							<nuxt-link class="title" to="/news">新闻资讯</nuxt-link>
						</li>
						<li>
							<nuxt-link to="/product/list">玩具教具</nuxt-link>
						</li>
						<li>
							<a href="https://course.zaojiao.net/index" target="_blank" rel="noopener noreferrer">网校中心</a>
						</li>
						<li>
							<nuxt-link to="/product/course">多端课堂</nuxt-link>
						</li>
						<li>
							<nuxt-link to="/product/course">全国校区</nuxt-link>
						</li>
						<li>
							<nuxt-link to="/about/contact">关于我们</nuxt-link>
						</li>
						<li>
							<nuxt-link to="/cooperate">加盟合作</nuxt-link>
						</li>
					</ul>
					<img class="footer_logo" src="~/assets/images/home/footer_logo@2x.png" alt="" srcset="">
				</div>
				<div class="footer-info">
					<div class="footer-kefu">
						<div class="kefu">客服电话 010-59626411</div>
						<div class="time">（周一至周日 10:00-19:00）</div>
					</div>
					<div class="footer-concat">
						<div>联系方式：</div>
						<ul class="ul-info">
							<li class="small-tel">010-59626411</li>
							<li class="small-tel">010-53608318</li>
							<li class="small-tel">010-53608322</li>
						</ul>
					</div>
				</div>
				<div class="footer-about">
					<div class="content">
						<ul>
							<li class="first">
								<div class="qr">
									<img src="~/assets/images/index/account_01.png" alt="" srcset="">
								</div>
								<div class="officle">
									<p>中德智慧教育</p>
								</div>
							</li>
							<li class="second">
								<div class="qr">
									<img src="~/assets/images/index/account_02.png" alt="" srcset="">
								</div>
								<div class="officle">
									<p>逻辑狗logico</p>
								</div>
							</li>
							<li class="three">
								<div class="qr">
									<img src="~/assets/images/index/account_03.png" alt="" srcset="">
								</div>
								<div class="officle">
									<p>逻辑狗妈咪社团</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="sino-footer-bottom">
				<p class="copyright">Copyright © 2021.北京中德智慧教育文化有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">京ICP备15045880号-2</a></p>
				<p><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502032093" target="_blank" rel="noopener noreferrer">京公网安备 11010502032093号</a></p>
			</div>
		</div>
	</footer>
</template>

<style lang="scss" scoped>
@import '~static/common/style.sass';
.v-footer {
	position: relative;
	.footer-logo {
		width: 52px;
		height: 69px;
		position: absolute;
		top: -56px;
		left: 50%;
		transform: translateX(-50%);
	}
}

#sino-footer {
	background: $theme_footer;
	padding: 34px 0 14px;
	position: relative;
	.sino-footer-box {
		display: flex;
		justify-content: space-around;
		width: 1200px;
    height: auto;
    margin: 0 auto;
		.footer-info {
			.footer-kefu {
				display: flex;
				.kefu {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 17px;
					margin-right: 9px;
				}
				.time {
					height: 14px;
					font-size: 10px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9EA1AB;
					line-height: 14px;
				}
			}
			.footer-concat {
				margin-top: 16px;
				display: flex;
				height: 14px;
				font-size: 10px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9EA1AB;
				line-height: 14px;
				.small-tel {
					margin-bottom: 10px;
				}
			}
		}
		.footer-nav {
			.title {
				height: 17px;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 17px;
			}
			.footer-nav-list {
				margin-top: 16px;
				width: 120px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				li {
					margin-bottom: 14px;
					a {
						height: 14px;
						line-height: 14px;
						font-size: 10px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9EA1AB;
					}
				}
			}
			.footer_logo {
				width: 63px;
				height: 17px;
			}
		}
		.footer-about {
			.title {
				font-size: 22px;
				font-weight: 400;
				color: #ffffff;
			}
			.content {
				ul {
					display: flex;
					li {
						// margin-right: 82px;
						position: relative;
						&:last-child {
							margin-right: 0px;
						}
						&.first {
							margin-right: 22px;
						}
						&.second {
							margin-right: 22px;
						}
						p {
							font-size: 10px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 14px;
						}
					}
					.officle {
						margin-top: 10px;
						position: relative;
					}
				}
				// .wx {
				// 	width: 57px;
				// 	height: 46px;
				// 	&:hover + .qr {
				// 		display: block;
				// 	}
				// }
				.qr {
					display: block;
					img {
						width: 80px;
						height: 80px;
						vertical-align: middle;
					}
				}
			}
			
		}
	}
	.sino-footer-bottom {
		width: 1200px;
    margin: 0 auto;
		display: flex;
		justify-content: center;
		p {
			font-size: 12px;
			line-height: 17px;
			color: #717379;
			a {
				color: #717379;
			}
		}
		.copyright {
			margin-right: 30px;
		}
	}
}

</style>

<script>
	import { mapState } from 'vuex'

	export default {
		name: 'VFooter',
		components: {},
		
		computed: {
			...mapState(['headProdNav','headNewsNav','indexLinksData'])
		},
		// mounted (){
		// 	//判断是否为首页，首页则改变友情链接控制字段，只在首页显示
		// 	let that = this
		// 	if(that.$route.params.tag === undefined && that.$route.fullPath === '/'){
		// 		that.$store.commit('setIndexShowLinks', true)
		// 	}else {
		// 		that.$store.commit('setIndexShowLinks', false)
		// 	}
		// }
	}
</script>