增加文章详情以及相关策略

2025-05-10 00:46:45 +08:00
parent d5da3a6ea8
commit 426e583fc9
13 changed files with 7846 additions and 4132 deletions
@@ -0,0 +1,114 @@
+<div style="display: flex;flex-direction: column;">
+    <div class="topbar-one">
+        <div class="container">
+            <div style="width: 70%;">
+                <ul class="list-unstyled topbar-one__info">
+                    <li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-phone-alt"></span><a
+                            href="tel:629-555-0129">(629) 555-0129</a></li>
+                    <li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-envelope"></span><a
+                            href="mailto:info@example.com">info@example.com</a></li>
+                </ul>
+            </div>
+            <div class="topbar-one__social" style="width: 30%;">
+                <a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a>
+                <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
+                <a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
+                <a href="https://www.youtube.com/"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+    </div>
+    <!-- 导航栏 -->
+    <div class="main-menu">
+        <div class="container">
+            <div class="main-menu__logo">
+                <a href="index.html"><img src="__IMAGES__/logo.png" width="186" alt="Logo"></a>
+            </div>
+            <div class="main-menu__nav">
+                <ul class="main-menu__list">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li><a href="products.html">产品服务</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                </ul>
+            </div>
+            <div class="main-menu__right">
+                <a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
+                <a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 固定导航 -->
+<div class="sticky-nav" style="display: none;">
+    <div class="container">
+        <div class="sticky-nav__logo">
+            <a href="index.html"><img src="__IMAGES__/logo.png" width="150" alt="Logo"></a>
+        </div>
+        <div class="sticky-nav__menu">
+            <ul>
+                <li><a href="index.html">首页</a></li>
+                <li><a href="about.html">关于我们</a></li>
+                <li><a href="products.html">产品服务</a></li>
+                <li><a href="contact.html">联系我们</a></li>
+            </ul>
+        </div>
+        <div class="sticky-nav__right">
+            <a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
+            <a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
+        </div>
+    </div>
+</div>
+
+<script>
+    layui.use(['carousel', 'form'], function () {
+        var carousel = layui.carousel
+            , form = layui.form;
+
+        //图片轮播
+        carousel.render({
+            elem: '#test10'
+            , width: '100%'
+            , height: '86vh'
+            , interval: 4000
+        });
+
+        var $ = layui.$, active = {
+            set: function (othis) {
+                var THIS = 'layui-bg-normal'
+                    , key = othis.data('key')
+                    , options = {};
+
+                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
+                options[key] = othis.data('value');
+                ins3.reload(options);
+            }
+        };
+
+        //监听开关
+        form.on('switch(autoplay)', function () {
+            ins3.reload({
+                autoplay: this.checked
+            });
+        });
+
+        $('.demoSet').on('keyup', function () {
+            var value = this.value
+                , options = {};
+            if (!/^\d+$/.test(value)) return;
+
+            options[this.name] = value;
+            ins3.reload(options);
+        });
+
+        // 监听滚动事件
+        $(window).scroll(function () {
+            var scrollTop = $(window).scrollTop();
+            if (scrollTop > 150) { // 当滚动超过150px时显示固定导航
+                $('.sticky-nav').fadeIn();
+            } else {
+                $('.sticky-nav').fadeOut();
+            }
+        });
+    });
+</script>