diangou_web
/
www


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="keyword" content="茂耀网络">
   <link id="favicon" href="./favicon.ico" rel="icon" type="image/x-icon" />
   <title>茂耀网络</title>
   <style type="text/css">
	    body,html,p{
		   padding: 0;
		   margin: 0;
		   max-width: 1920px;
		   margin: 0 auto;
	    }
		.sanling-logo{
			width: 100%;
			height: 78px;
			background-color: #fff;
			display: flex;
			align-items: center;
			position: sticky;
			top: 0;
		}
		.logo-con{
			display: flex;
			align-items: center;
			margin-left: 19%;
		}
		.logo{
			width: 30px;
			height: 30px;
			overflow: hidden;
		}
		.logo img{
			display: block;
			width: 100%;
		}
		.name{
			margin-left: 10px;
			font-size: 24px;
			font-weight: bold;
		}
		.name img{
			display: block;
			height: 100%;
		}
		.product-con{
			width: 100%;
			background-color: #fff;
			padding: 32px 0 47px 0;
		}
		.product-con img{
			width: 41%;
			display: block;
			margin: 0 auto;
		}
		.tedian{
			background-color: #F0F2F7;
			overflow: hidden;
		}
		.grid{
			width: 52.5%;
			margin: 0 auto 99px;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			grid-gap: 40px;
		}
		.grid-item{
			width: 100%;
			border-radius: 8px;
			overflow: hidden;
			background-color: #fff;
			cursor: pointer;
		}
		.grid-item img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.choce{
			padding: 69px 0 72px 0;
			background-color: #fff;
		}
		.down-box{
			width: 25%;
			margin: 60px auto 0;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap: 45px;
		}
		.down-box-item{
			width: 100%;
			border-radius: 21px;
			overflow: hidden;
			cursor: pointer;
			position: relative;
		}
		.down-box-item img{
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
		}
		.down-box-item:hover .down-img{
			transform: translate3d(-100%,100%,0);
			transition: all 0.6s ease;
		}
		.down-box-item:hover .code-box{
			transform: translate3d(0,0,0);
			transition: all 0.4s ease;
		}
		.code-box{
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 21px;
			top: 0;
			left: 0;
			transform: translate3d(-100%,100%,0);
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(0,0,0,0.5);
		}
		.code-box a{
			text-decoration: none;
			padding-top: 5px;
			color: #fff;
		}
		.code-box img{
			display: block;
			width: 120px;
			height: 120px;
		}
		.copyright{
			min-height: 93px;
			font-size: 16px;
			color: #808080;
			background-color: #FAFAFC;
			display: flex;
			align-items: center;
		}
		.copyright p{
			flex: 1;
			text-align: center;
		}
		.copyright p a{
			text-decoration: none;
			color: #808080;
		}
		@media (max-width:400px) {
			.grid{
				width: 90%;
				grid-gap: 10px;
			}
			.down-box{
				width: 80%;
				grid-gap: 15px;
			}
			.choce .choce-tit{
				width: 60%;
				height: 38px!important;
			}
			.copyright p{
				width: 100%;
				padding: 0 30px;
				margin-left: 0;
				font-size: 12px;
				text-align: center;
			}
		}
   </style>
</head>
<body>
	<div class="sanling" id="app">
		<div class="sanling-logo">
			<div class="logo-con">
				<div class="logo">
					<img src="./images/logo.png" alt="">
				</div>
				<div class="name">
					茂耀网络
					<!-- <img src="./images/name.png" alt=""> -->
				</div>
			</div>
		</div>
		<div style="width: 100%;">
			<img src="./images/banner.png" alt="" style="width: 100%;">
		</div>
		<div class="product-con">
			<img src="./images/bg1.png" alt="">
		</div>
		<div class="tedian">
			<img src="./images/tetitle.png" alt="" style="height: 58px;display: block;margin: 56px auto 72px;">
			<!-- <img src="./images/tit.png" alt=""style="height: 35px;display: block;margin: 0 auto 50px;"> -->
			<div class="grid">
				<div class="grid-item">
					<img src="./images/1.png" alt="">
				</div>
				<div class="grid-item">
					<img src="./images/2.png" alt="">
				</div>
				<div class="grid-item">
					<img src="./images/3.png" alt="">
				</div>
				<div class="grid-item">
					<img src="./images/4.png" alt="">
				</div>
			</div>
		</div>
		<div class="choce">
			<img src="./images/tit2.png" alt="" class="choce-tit" style="height: 59px;display: block;margin: 0 auto;">
			<div class="down-box">
				<a href="https://apps.apple.com/cn/app/%E5%BA%97%E5%A4%9F/id6473010779">
					<div class="down-box-item">
						<img src="./images/5.png" alt="" class="down-img">
						<div class="code-box">
							<img src="./images/qr_codeios.png" alt="">
							<div style="text-align: center;margin-top: 10px;color: #fff;">点击下载</div>
						</div>
					</div>
				</a>
				<a href="https://diangou88888.oss-cn-shanghai.aliyuncs.com/uploads/download/diangou.apk">
					<div class="down-box-item">
						<img src="./images/6.png" alt="" class="down-img">
						<div class="code-box">
							<img src="./images/d_qrcode.png" alt="">
							<div style="text-align: center;margin-top: 10px;color: #fff;">点击下载</div>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="copyright">
			<p>Coyright © 厦门茂耀源成科技发展有限公司  版权所有</p>
			<p>联系方式：<a href="tel:4008986688">4008986688</a></p>
			<p><a href="https://beian.miit.gov.cn/" target="_blank">ICP备案证书号：闽ICP备2023014234号-1</a></p>
		</div>
	</div>
	<!-- <script type="text/javascript" src="js/vue.js"></script> -->
    <script type="text/javascript">
	
    </script>
</body>
</html>