zhongde-website/components/home/footer.vue

<template>
	<footer class="v-footer">
		<div id="sino-footer">
			<div class="sino-footer-box">
				<div class="footer-info">
					<ul class="ul-info">
						<li class="tel">400-6807300</li>
						<li class="small-tel">010-59626411</li>
						<li class="small-tel">010-53608318</li>
						<li class="small-tel">010-53608322</li>
						<li class="time">周一至周日10:00-19:00</li>
						<li class="foote-logo">
							<img src="~/assets/images/index/logo2.png" alt="" srcset="">
						</li>
					</ul>
					<div class="left_circle">
						<img src="~/assets/images/index/left_circle.png" alt="" srcset="">
					</div>
				</div>
				<div class="footer-nav">
					<ul class="footer-nav-parent">
						<li class="footer-nav-list">
							<nuxt-link class="title" to="/">产品与服务</nuxt-link>
							<ul class="footer-nav-child">
								<li>
									<nuxt-link to="/product/list">产品商城</nuxt-link>
								</li>
								<li>
									<nuxt-link to="/product/course">多端课堂</nuxt-link>
								</li>
							</ul>
						</li>
						<li class="footer-nav-list">
							<nuxt-link class="title" to="/">关于我们</nuxt-link>
							<ul class="footer-nav-child">
								<li>
									<nuxt-link to="/about/brand">品牌故事</nuxt-link>
								</li>
								<li>
									<nuxt-link to="/about/team">专家团队</nuxt-link>
								</li>
								<li>
									<nuxt-link to="/about/contact">联系我们</nuxt-link>
								</li>
								<li>
									<nuxt-link to="/">线下门店</nuxt-link>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="footer-about">
					<div class="title">关注我们</div>
					<div class="content">
						<ul>
							<li class="first">
								<img class="wx" src="~/assets/images/index/wechat.png" alt="" srcset="~/assets/images/index/wechat.png 1x, ~/assets/images/index/wechat@2x.png 2x">
								<div class="officle">
									<p>逻辑狗</p>
									<p>中德智慧教育</p>
								</div>
								<div class="qr">
									<img src="~/assets/images/index/account_01.png" alt="" srcset="">
								</div>
							</li>
							<li class="second">
								<img class="wx" src="~/assets/images/index/wechat.png" alt="" srcset="~/assets/images/index/wechat.png 1x, ~/assets/images/index/wechat@2x.png 2x">
								<div class="officle">
									<p>逻辑狗</p>
									<p>logico</p>
								</div>
								<div class="qr">
									<img src="~/assets/images/index/account_02.png" alt="" srcset="">
								</div>
							</li>
							<li class="three">
								<img class="wx" src="~/assets/images/index/wechat.png" alt="" srcset="~/assets/images/index/wechat.png 1x, ~/assets/images/index/wechat@2x.png 2x">
								<div class="officle">
									<p>逻辑狗</p>
									<p>妈咪社团</p>
								</div>
								<div class="qr">
									<img src="~/assets/images/index/account_03.png" alt="" srcset="">
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="sino-footer-bottom">
				<p class="copyright">Copyright © 2020.北京中德智慧教育文化有限公司 <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';

#sino-footer {
	background: $theme_footer;
	padding: 68px 0 28px;
	.sino-footer-box {
		display: flex;
		justify-content: space-around;
		width: 1200px;
    height: auto;
    margin: 0 auto 73px;
		.footer-info {
			position: relative;
			// margin-right: 130px;
			// background-image: url("~assets/images/index/left_circle.png");
			// background-repeat: no-repeat;
			// background-position: top 8px left 0px;
			// background-size: 137px 137px;
			.ul-info {
				position: relative;
				z-index: 10;
			}
			.tel {
				color: #FFFFFF;
				font-size: 46px;
				line-height: 46px;
				font-family: PingFangSC-Medium, sans-serif;
				font-weight: 500;
			}
			.small-tel {
				color: #9EA1AB;
				margin: 8px 0;
			}
			.time {
				color: #9EA1AB;
				line-height: 20px;
				margin-bottom:62px;
			}
			.foote-logo {
				width: 190px;
				background: #FFFFFF;
				border-radius: 10px;
				opacity: 0.5;
				img {
					border-radius: 10px;
					height: 60px;
				}
			}
			.left_circle {
				position: absolute;
				z-index: 1;
				top: 8px;
				left: -124px;
				width: 137px;
				height: 137px;
				// background: linear-gradient(239deg, #171D31 0%, #252A3E 100%);
				font-size: 0;
				border-radius: 50%;
				img {
					width: 137px;
					height: 137px;
				}
			}
		}
		.footer-nav {
			.footer-nav-parent {
				display: flex;
				.footer-nav-list {
					margin-right: 105px;
					.title {
						font-size: 22px;
						font-weight: 400;
						color: #ffffff;
					}
					.footer-nav-child {
						margin-top: 55px;
						li {
							margin-bottom: 20px;
							&:last-child {
								margin-bottom: 0px;
							}
							a {
								color: #9EA1AB;
								font-size: 14px;
							}
						}

					}
				}
			}
		}
		.footer-about {
			.title {
				font-size: 22px;
				font-weight: 400;
				color: #ffffff;
			}
			.content {
				margin-top: 64px;
				ul {
					display: flex;
					li {
						// margin-right: 82px;
						position: relative;
						&:last-child {
							margin-right: 0px;
						}
						&.first {
							margin-right: 62px;
						}
						&.second {
							margin-right: 95px;
						}
						p {
							color: #858893;
							font-size:12px;
							line-height:17px;
						}
						&:hover {
							.qr {
								display: block;
							}
						}
					}
					.officle {
						margin-top: 27px;
						position: relative;
					}
				}
				// .wx {
				// 	width: 57px;
				// 	height: 46px;
				// 	&:hover + .qr {
				// 		display: block;
				// 	}
				// }
				.qr {
					display: none;
					position: absolute;
					left: 50%;
					top: 0;
					transform: translateX(-50%);
					img {
						width: 148px;
						height: 144px;
						vertical-align: middle;
					}
				}
			}
			
		}
	}
	.sino-footer-bottom {
		width: 1200px;
    margin: 0 auto;
		display: flex;
		p {
			font-size: 12px;
			line-height: 17px;
			color: #717379;
			a {
				color: #717379;
			}
		}
		.copyright {
			margin-right: 330px;
		}
	}
}

</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>