master

分支 (1)

管理

管理

master

mysite-31
/
shiyan17.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轻松批</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
    <link rel="stylesheet" href="css/Animate.css">
</head>

<body>
 <div class="shop">
            <div class="content">
                <div class="shop_header">
                    <div class="active shop_header_content">云商店</div>
                    <div class="shop_header_content">进销存</div>
                    <div class="shop_header_content">商米v1</div>
                </div>
                <div class="three_cont">
                    <div class="cont three_cont1">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>你独有的网店<span>-轻松批云商店</span></h1>
                                <p>轻松批展示店专为批发商进行开发，让您拥有独立的、安全的展示空间，所有数据直接在APP上即可进行编辑，提供全面的展示、交易、售后服务，为您的批发事业插上互联网的翅膀！
                                </p>
                                <p><span>无限容量空间</span><br><span>一键生成二维码</span><br><span>免费公众号服务</span></p>
                                <button>进入示范店铺</button>
                            </div>
                            <img src="img/p11.png" alt="">
                        </div>
                    </div>
                    <div class="cont three_cont2">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>管店无忧<span>-轻松批进销存</span></h1>
                                <p>一套专为批发设计的进销存软件，为您实时监控您店铺的营业情况，并为您的店员提供最快速、专业的开单工具，从此不再为账务和库存担忧，随时随地轻松管店！</p>
                                <p><span>全面支持离线操作</span><br><span>有网实时数据同步</span><br><span>专为批发优化流程</span></p>
                                <button>了解更多</button>
                            </div>
                            <img src="img/p1.png" alt="">
                        </div>
                    </div>
                    <div class="cont three_cont3">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>开单小王子<span>-商米V1</span></h1>
                                <p>由小米制造商专业设计开发并生产，集开单、打印、联网于一体的商业专用设备，搭载商业版安卓系统和轻松批进销存软件，一台设备集成开店所需的所有功能，让店铺更加整洁，让管理更加专业！
                                </p>
                                <p><span>超大电量—充满电用3天</span><br><span>超速打印技术—10秒/米</span><br><span>安全稳定—无故障使用三年</span>
                                </p>
                                <button>了解更多</button>
                            </div>
                            <img src="img/p10.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $('.shop_header').on('mouseover', '.shop_header_content', function () {
                var currentIndex = $(this).index() + 1;
                hideAll();
                hideAllTop();
                $(this).css('background-color', 'rgb(150, 130, 130)');
                $('.three_cont' + currentIndex).show();
            });


            function hideAll() {
                for (var i = 1; i < 4; i++) {
                    $('.three_cont' + i).hide();
                }
            }

            function hideAllTop() {
                for (var i = 0; i < 3; i++) {
                    $('.shop_header_content').eq(i).css('background-color', 'rgb(240, 60, 60)');
                }
            }
        </script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
            $(function () {
                var bt = $('#toolBackTop');
                var sw = $(document.body)[0].clientWidth;

                var limitsw = (sw - 840) / 2 - 80; //距离右侧距离
                if (limitsw > 0) {
                    limitsw = parseInt(limitsw);
                    bt.css("right", limitsw / 8);
                }

                $(window).scroll(function () {
                    var st = $(window).scrollTop();
                    if (st > 30) {
                        bt.show();
                    } else {
                        bt.hide();
                    }
                });
            });
        </script>
        <script type="text/javascript">
            var tit = document.getElementById("nav");
            //alert(tit);
            //占位符的位置
            var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
            var inser = document.createElement("div");
            tit.parentNode.replaceChild(inser, tit);
            inser.appendChild(tit);
            inser.style.height = rect.height + "px";

            //获取距离页面顶端的距离
            var titleTop = tit.offsetTop;
            //滚动事件
            document.onscroll = function () {
                //获取当前滚动的距离
                var btop = document.body.scrollTop || document.documentElement.scrollTop;
                //如果滚动距离大于导航条据顶部的距离
                if (btop > titleTop) {
                    //为导航条设置fix
                    tit.className = "clearfix fix";
                } else {
                    //移除fixed
                    tit.className = "clearfix";
                }
            }
        </script>
</body>
</html>