|
|
@@ -0,0 +1,254 @@
|
|
|
+<!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">
|
|
|
+ <div class="down-box-item">
|
|
|
+ <img src="./images/5.png" alt="" class="down-img">
|
|
|
+ <div class="code-box">
|
|
|
+ <a href="https://apps.apple.com/cn/app/%E5%BA%97%E5%A4%9F/id6473010779">
|
|
|
+ <img src="./images/qr_codeios.png" alt="">
|
|
|
+ <div style="text-align: center;margin-top: 10px;">点击下载</div>
|
|
|
+ </a>
|
|
|
+ <!-- <a href="https://apps.apple.com/cn/app/%E5%BA%97%E5%A4%9F/id6473010779"></a> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="down-box-item">
|
|
|
+ <img src="./images/6.png" alt="" class="down-img">
|
|
|
+ <div class="code-box">
|
|
|
+ <a href="https://diangou88888.oss-cn-shanghai.aliyuncs.com/uploads/download/diangou.apk">
|
|
|
+ <img src="./images/d_qrcode.png" alt="">
|
|
|
+ <div style="text-align: center;margin-top: 10px;">点击下载</div>
|
|
|
+ </a>
|
|
|
+ <!-- <a href="">点击下载</a> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
