增加后谷咖啡页面

dev/static/font/cavan.css

@@ -6,4 +6,8 @@
 @font-face {
     font-family: 'MyFont2';
     src: url('./REGULAR.OTF') format('truetype');
+}
+@font-face {
+    font-family: 'CrimsonTextBold';
+    src: url('./CrimsonText-Bold-2.ttf') format('truetype');
 }

src/pages/HogoodCoffee/App.js

@@ -0,0 +1,218 @@
+import Swiper from 'swiper/bundle';
+import LocomotiveScroll from 'locomotive-scroll';
+import {
+    isMobile
+} from '../common/js/utils'
+
+export default class App {
+    constructor() {
+        // let common = new Common(document.querySelector('.main'), 0)   //导航菜单高亮，0是首页，后面的按顺序添加
+        this.isMobile = isMobile()
+
+        this.scroll = new LocomotiveScroll();
+        // 图片及视频资源懒加载。防止阻塞js执行
+        let lazyDoms = document.querySelectorAll(".lazy");
+        let Time = null;
+        let isMob = this.isMobile;
+        lazyDoms.forEach((item) => {
+            if (item.nodeName == "PICTURE") {
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
+            }
+            if (item.nodeName == "IMG") {
+                if (isMob) { item.setAttribute("src", item.dataset.srcm); }
+                else {
+                    item.setAttribute("src", item.dataset.src);
+                }
+
+            }
+            if (item.nodeName == "VIDEO") {
+                console.log(item, 'item---2')
+                if (isMob) { item.setAttribute("src", item.dataset.srcm); }
+                else {
+                    item.setAttribute("src", item.dataset.src);
+                }
+                // item.setAttribute("src", item.dataset.src);
+                // item.load();
+            }
+        });
+        //横屏滚动数组值
+        this.busGrouds = [];
+
+        this.headerMenu();
+        this.banner();
+        this.init();
+        this.updateMenu()
+    }
+    banner() {
+        // let isMob=this.isMobile;
+        let menuChange = true;
+        let menuType = document.querySelector(".headCon");
+        menuType.classList.add("menuType");
+        let mySwiper = new Swiper('.bannerSwiper', {
+            autoplay: false,//可选选项，自动滑动
+            // autoplay: {
+            //     delay: 1000,//1秒切换一次
+            //     disableOnInteraction: false,
+            // },
+            // autoHeight: true,
+            slidesPerView: 6,
+            slidesPerGroup: 1,
+            spaceBetween: 0,
+            allowTouchMove: true,
+            allowClickMove: true,
+            centeredSlides: true,
+            // loop: true,
+            effect: "slide",
+            speed: 1000,
+
+            // 如果需要前进后退按钮
+            navigation: {
+                nextEl: '.btn-nextB',
+                prevEl: '.btn-prevB',
+            },
+            on: {
+                slideChange: function (index) {
+                },
+            },
+        });
+
+        mySwiper.slideTo(2);
+        const slides = document.querySelectorAll('.swiper-slide');
+        slides.forEach((slide, index) => {
+            slide.addEventListener('click', function () {
+                mySwiper.slideTo(index); // 切换到对应的幻灯片
+            });
+        });
+
+        let isMob = this.isMobile;
+
+        // 获取滚动条位置并更新显示
+        function updateScrollInfo() {
+            let scrollY = window.scrollY;
+
+            if (scrollY > 110) {
+                if (menuChange) {
+                    menuChange = false;
+                    menuType.classList.remove("menuType");
+                }
+            } else if (scrollY < 110 && menuChange == false) {
+                menuChange = true;
+                if (mySwiper.activeIndex == 0) {
+                    menuType.classList.add("menuType");
+                } else {
+                    menuType.classList.remove("menuType");
+                }
+            }
+
+        }
+
+
+        // 添加滚动事件监听器
+        window.addEventListener('scroll', updateScrollInfo);
+        // 初始化显示
+        updateScrollInfo();
+
+    }
+    //产品轮播
+    init() {
+        // 获取视频元素
+        const video = document.getElementById('myVideo');
+
+        // 1. 初始化Intersection Observer
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    playOnceAndPause();
+                    observer.unobserve(entry.target); // 仅触发一次
+                }
+            });
+        }, {
+            threshold: 0.1 // 元素10%进入视口时触发
+        });
+
+        // 2. 开始观察视频元素
+        observer.observe(video);
+
+        // 3. 播放控制函数
+        function playOnceAndPause() {
+            // 重置视频到起始位置（防止重复播放残留）
+            video.currentTime = 0;
+
+            // 播放视频
+            const playPromise = video.play();
+
+            // 处理浏览器自动播放策略
+            if (playPromise !== undefined) {
+                playPromise.catch(error => {
+                    // 如果自动播放被阻止，显示播放按钮
+                    showPlayButton();
+                }).then(() => {
+                    // 播放成功后的处理
+                    video.addEventListener('ended', handleEnded);
+                });
+            }
+        }
+
+        // 4. 播放结束处理
+        function handleEnded() {
+            // 暂停在最后一帧（不同浏览器的兼容写法）
+            video.pause();
+            video.currentTime = video.duration;
+
+            // 移除事件监听
+            video.removeEventListener('ended', handleEnded);
+        }
+
+        // 可选：添加备用播放按钮（处理自动播放限制）
+    }
+
+    // 获取所有菜单项
+    // 函数用于更新菜单状态
+    updateMenu() {
+        const menuItems = document.querySelectorAll('.menuOne');
+        // 获取当前锚点
+        const currentHash = window.location.hash;
+        // 遍历所有菜单项
+        menuItems.forEach(item => {
+            // 移除所有菜单项的 menuClicked 类
+            item.classList.remove('menuClicked');
+            // 如果当前菜单项的 href 与当前锚点匹配，则添加 menuClicked 类
+            const link = item.querySelector('a').getAttribute('href');
+            // 如果当前菜单项的 href 与当前锚点匹配，则添加 menuClicked 类
+            if (link === `./HogoodCoffee.html${currentHash}`) {
+                item.classList.add('menuClicked');
+            }
+        });
+        // 监听 hashchange 事件，当锚点变化时更新菜单状态
+        window.addEventListener('hashchange', this.updateMenu);
+    }
+
+    headerMenu() {
+        let scrollyOld = 0;
+        let headerDom = document.querySelector(".headCon");
+        let careersType = document.querySelector(".careersType .titleBg");
+        let isMobile = this.isMobile;
+        function updateScrollChange() {
+            try {
+                let scrollY = window.scrollY;
+                if (scrollyOld < scrollY && !headerDom.classList.contains("hideHeader")) {
+                    // 向下滚动
+                    headerDom.classList.add("hideHeader");
+                    careersType.classList.remove("topType");
+                } else if (scrollyOld > scrollY && headerDom.classList.contains("hideHeader")) {
+                    // 向上滚动
+                    headerDom.classList.remove("hideHeader");
+                    if (careersType && !isMobile) {
+                        careersType.classList.add("topType");
+                    }
+                }
+                scrollyOld = scrollY; // 更新上一次的滚动位置
+            } catch (error) { }
+        }
+        // 添加滚动事件监听器
+        window.addEventListener('scroll', updateScrollChange);
+    }
+
+
+}

src/pages/HogoodCoffee/index.html

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>首页</title>
+    <meta name="description" content="" />
+    <meta name="Keywords" content="" />
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
+    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
+    <%= require('../common/tpl/headerLink.tpl') %>
+</head>
+
+<body>
+    <div class="headCon hg-header">
+        <div class="headerPC">
+            <div class="logo"></div>
+            <div class="menu">
+                <div class="menuOne menuClicked">
+                    <a href="./HogoodCoffee.html#m1">Company Profile</a>
+                </div>
+                <div class="menuOne">
+                    <a href="./HogoodCoffee.html#m2">Product Series</a>
+                </div>
+                <div class="menuOne">
+                    <a href="./HogoodCoffee.html#m3">Development History</a>
+                </div>
+                <div class="menuOne">
+                    <a href="./HogoodCoffee.html#m4">Future Plans</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="headerMobile hg-headerMb">
+        <div class="logo"></div>
+        <div class="navFlagBtn">
+            <div class="nav_btn_small">
+                <div class="lineTop arrowDirBase"></div>
+                <div class="lineCenter arrowDirBase" style="display: block;"></div>
+                <div class="lineBottom arrowDirBase"></div>
+            </div>
+        </div>
+        <div class="navFlag">
+            <div class="navBg"></div>
+            <div class="navMenu">
+                <div>
+                    <div class="title">
+                        <a href="./index.html">Company Profile</a></span>
+                    </div>
+                </div>
+                <div>
+                    <div class="title">
+                        <a href="./product.html">Product Series</a></span>
+                    </div>
+                </div>
+                <div>
+                    <div class="title">
+                        <a href="./news.html">Development History</a></span>
+                    </div>
+                </div>
+                <div>
+                    <div class="title">
+                        <a href="./join.html">Future Plans</a></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="main">
+        <div class="wow fadeInUp content" id="m1">
+            <div class="wow fadeInUp title" data-wow-delay="0.2s">Company Profile</div>
+            <div class="contents">
+                <p class="p1">Dehong Hogood Coffee Co., Ltd. (hereinafter referred to as "the Company") is
+                    a national key leading enterprise in agricultural industrialization, with roots tracing back
+                    to 1984 and its brand established in 2007. As a full-industry-chain specialist in China's coffee
+                    sector, it integrates coffee cultivation, processing, sales, and import/export operations.</p>
+                <p class="p1">The Company owns 12,000 hectares of coffee plantations, and its "Hogood" brand,
+                    recognized as a "China Well-Known Trademark", is the first and largest domestic coffee brand in
+                    China.</p>
+                <div class="p2">
+                    <div class="cont">
+                        <div class="p1">With proprietary technology and production processes for instant coffee
+                            powder,</div>
+                        <div class="flexBox">
+                            <div class="p3">the Company currently has an annual production capacity of</div>
+                            <div class="p4">13,000 tons</div>
+                        </div>
+                        <div class="flexBox">
+                            <div class="p3">by 2025 capacity expansion will be completed</div>
+                            <div class="p4">10,000 tons</div>
+                        </div>
+                    </div>
+                    <img src="./static/images/hgkf/cont.png" alt="">
+                </div>
+                <p class="p1">Main products include coffee beans, instant coffee powder, and the Hogood series
+                    "3-in-1" coffee. The
+                    products have obtained certifications including ISO9001:2008 International Quality Management
+                    System,
+                    GAP (Good Agricultural Practice), 4C (Common Code for the Coffee Community), UTZ (Certified
+                    Sustainable
+                    Coffee), HACCP (Hazard Analysis and Critical Control Points), Green Food, and Conversion to
+                    Organic.
+                    Currently, the products are mainly sold in domestic markets such as Shanghai, Beijing, and
+                    Shenzhen,
+                    with e-commerce channels covering Tmall、Taobao、JD、Pinduoduo、Alibaba and Douyin online
+                    marketplaces.</p>
+                <div class="flexBox">
+                    <div class="p5">Internationally, the products are exported to more than 20 countries and
+                        regions including the UK, USA, Russia, South Korea, Singapore, and Japan.
+                    </div>
+                    <div style="padding-right: 40px;">
+                        <div class="p4">>20</div>
+                        <div class="p6">countries and regions</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wow fadeInUp atlas" id="m2">
+            <div class="wow fadeInUp title">Product Series</div>
+            <div class="atlasCon">
+                <div class="tit"><span>Business clients</span></div>
+                <div class="imgCon">
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p1.png" alt="">
+                        <span>Roasted coffee beans</span>
+                    </div>
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p2.png" alt="">
+                        <span>Roasted coffee beans</span>
+                    </div>
+                </div>
+            </div>
+            <div class="atlasCon">
+                <div class="tit"><span>Mass consumers</span></div>
+                <div class="imgCon">
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p3.png" alt="">
+                        <span>Roasted coffee beans</span>
+                    </div>
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p4.png" alt="">
+                        <span>3-in-1 coffee</span>
+                    </div>
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p5.png" alt="">
+                        <span>Spray-dried coffee</span>
+                    </div>
+                    <div class="imgLi">
+                        <img src="./static/images/hgkf/p6.png" alt="">
+                        <span>Freeze-dried coffee</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="wow domInUp banner" id="m3">
+            <div class="gradientBg"></div>
+            <div class="wow fadeInUp title">Product Series</div>
+
+            <div class="swiper bannerSwiper">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">1984
+                                <div class="pop">
+                                    Started the coffee journey with <span>0.4</span> ha of coffee land</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">1995<div class="pop">Planting area reached <span>133.33</span>
+                                    ha</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">1997<div class="pop">Planting area reached <span>466.67</span>
+                                    ha</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2002<div class="pop">Awarded as a "Key Leading Enterprise in
+                                    Agricultural Industrialization Countries"</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2007<div class="pop">Dehong Hogood Coffee Co., Ltd. was
+                                    established, and the planting area reached over <span>13,333.33</span> ha</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2008<div class="pop">The first instant coffee production line
+                                    was completed, with an annual output of <span>3,000</span> tons</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2011<div class="pop">The second instant coffee production line
+                                    was completed, with an annual output of <span>10,000</span> tons</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title swiper-title2">2012<div class="pop">The Hogood brand was
+                                    awarded as Well-known Trademark in China and the company started e-commerce
+                                    business in the same year</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title swiper-title2">2013<div class="pop">Jointly established the
+                                    China Coffee Engineering Research Center with the Chinese Academy of Sciences
+                                    and the municipal government</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2016<div class="pop">Hosted the first Asian Coffee Conference
+                                    and the 26th World Coffee Science Conference</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title">2018<div class="pop">Recognized as a national enterprise
+                                    technology center by the National Development and Reform Commission</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="slideCon">
+                            <div class="swiper-title swiper-title2">2020<div class="pop">Ranked among the Top 100
+                                    Agricultural Product Processing Enterprises in China and the Top 100 in the
+                                    Chinese Food and Beverage Industry</div>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide swiper-slide2">
+                        <div class="slideCon">
+                            <div class="swiper-title">2024<div class="pop">Acquired by Zhongze Group</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="swiper-pagination swiper-paginationB"></div> -->
+            </div>
+            <div class="btn-prev btn-prevB"><span class="icon iconfont icon-left"></span></div>
+            <div class="btn-next btn-nextB"><span class="icon iconfont icon-right"></span></div>
+            <div class="bannerFooter">Click on the year with the mouse to expand more content</div>
+        </div>
+
+
+        <div class="wow fadeInUp chart" id="m4">
+            <div class="wow fadeInUp title">Future Plans</div>
+            <div class="tbGif">
+                <video class="lazy" id="myVideo" data-src="./static/images/hgkf/tb.mp4"
+                    data-srcM="./static/images/hgkf/tb.mp4" muted playsinline>
+                    <source src="" type="video/mp4">
+                    您的浏览器不支持视频标签。
+
+                </video>
+            </div>
+        </div>
+
+    </div>
+</body>
+
+</html>

src/pages/HogoodCoffee/index.js

@@ -0,0 +1,15 @@
+import "./../common/css/common.less";
+import "./index.less";
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
+import App from './App.js';
+
+// swiper的css目前环境解析不出来，放static下，不走webpack 
+//import 'swiper/swiper-bundle.css';
+
+vhCheck();
+//禁止浏览器刷新后回到上一个页面滚动位置
+if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+}
+
+new App();

src/pages/HogoodCoffee/index.less

@@ -0,0 +1,626 @@
+//pc端样式
+.hg-header {
+
+    width: 100%;
+    position: fixed;
+    z-index: 9;
+    transition: all 0.3s ease-in-out;
+    background-color: #fff;
+    .headerPC {
+        height: 120px;
+        box-shadow: 0px 1px 1px 0px #00000040;
+        padding: 0 114px;
+    }
+
+    .logo {
+        width: 339px;
+        height: 106px;
+        background: url("../common/images/hgkf.png") no-repeat center;
+        background-size: 339px 106px;
+    }
+
+    .menu {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &>div {
+            display: inline-block;
+            padding: 0 30px;
+            position: relative;
+            height: 70px;
+            cursor: pointer;
+
+            &>a {
+                line-height: 70px;
+                z-index: 11;
+                transition: all .3s ease;
+                font-size: 26px;
+            }
+
+            &:hover {
+                &>a {
+                    color: #4D048C;
+                }
+            }
+        }
+
+        .menuClicked {
+            &::before {
+                display: none;
+            }
+
+            &>a {
+                color: #4D048C;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.hg-headerMb {
+    .logo {
+        display: none;
+    }
+}
+
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+
+    .content {
+        .title {
+            font-size: 70px;
+            color: #000000;
+            text-align: center;
+            font-family: 'CrimsonTextBold';
+            padding: 210px 0 50px 0;
+        }
+        .contents{
+            width: 1300px;
+            margin: 0 auto;
+            line-height: 1.5;
+            font-size: 26px;
+            color: #000;
+            .flexBox{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 50px;
+            }
+            .p1{
+                margin-bottom: 50px;
+                line-height: 50px;
+            }
+            .p2{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 65px;
+                .cont{
+                    flex: 1;
+                    margin-right: 44px;
+                }
+                img{
+                    width: 568px;
+                    height: 386px;
+                }
+            }
+            .p3{
+                width: 380px;
+            }
+            .p4{
+                font-size: 51px;
+                font-weight: bold;
+                text-align: center;
+                font-family: DIN, DIN;
+            }
+            .p5{
+                width: 898px;
+            }
+
+            .p6{
+                font-size: 26px;
+                font-weight: 700;
+            }
+        }
+    }
+
+    .atlas {
+        .title {
+            font-size: 70px;
+            color: #000000;
+            text-align: center;
+            font-family: 'CrimsonTextBold';
+            padding: 90px 0 50px 0;
+        }
+
+        .atlasCon {
+            width: 1300px;
+            margin: 0 auto 85px;
+
+            .tit {
+                width: 100%;
+                font-size: 30px;
+                text-align: center;
+                margin-bottom: 35px;
+
+                span {
+                    position: relative;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50px;
+                        background-color: #4D048C;
+                        left: -15px;
+                        top: 50%;
+                        margin-top: -5px;
+                    }
+                }
+            }
+
+            .imgCon {
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+
+                .imgLi {
+                    width: 640px;
+                    height: 450px;
+                    position: relative;
+                    margin-bottom: 20px;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+
+                    span {
+                        font-size: 20px;
+                        width: 100%;
+                        text-align: center;
+                        position: absolute;
+                        bottom: 15px;
+                        left: 0;
+                        -webkit-user-select: none;
+                        -moz-user-select: none;
+                        -ms-user-select: none;
+                        user-select: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .chart {
+        width: 100%;
+        height: 1000px;
+        max-width: 1920px;
+        background: url("../common/images/tbBj.png") no-repeat center;
+        background-size: 1920px 838px;
+        background-position: 0 0;
+
+        .title {
+            font-size: 70px;
+            color: #000000;
+            text-align: center;
+            font-family: 'CrimsonTextBold';
+            padding: 150px 0 0 0;
+        }
+
+        .tbGif {
+            width: 1600px;
+            height: 660px;
+            margin: 0 auto;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+
+            video {
+                width: 100%;
+                height: 100%;
+
+            }
+        }
+    }
+}
+
+p{
+    margin: 0;
+    padding: 0;
+}
+.banner {
+
+    width: 100%;
+    height: 1079px;
+    background: url("../common/images/bannerBj.jpg") no-repeat center;
+    background-size: 100% 1079px;
+    position: relative;
+    .title {
+        font-size: 70px;
+        color: #000000;
+        text-align: center;
+        font-family: 'CrimsonTextBold';
+        padding: 120px 0 50px 0;
+        z-index: 2;
+        position: relative;
+    }
+    .gradientBg{
+        width: 100%;
+        height: 458px;
+        background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+    }
+    .bannerSwiper {
+        width: 1100px;
+        height: 400px;
+        margin: 0 auto;
+        position: relative;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .bannerS1 {
+            img {
+                display: none;
+            }
+        }
+
+        .title {
+            text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.28);
+        }
+
+       
+
+        .swiper-button-disabled {
+            cursor: no-drop;
+            background: transparent;
+            color: #ecf6fb;
+            opacity: 0.6;
+
+            &:hover {
+                color: #ecf6fb;
+                background: transparent;
+            }
+        }
+
+    }
+    .btn-prev,
+    .btn-next {
+        position: absolute;
+        top: 258px;
+        left: 50%;
+
+        width: 85px;
+        height: 85px;
+        z-index: 2;
+        text-align: center;
+        color: #000000;
+        background: transparent;
+        transition: all .3s ease-in-out;
+        cursor: pointer;
+        border-radius: 45px;
+        line-height: 85px;
+        box-sizing: border-box;
+        border: 1px solid #000000;
+
+        span {
+            font-size: 32px;
+            display: inline-block;
+            line-height: 85px;
+            // transform: rotate(90deg);
+        }
+
+        &:hover {
+            color: #fff;
+            background: #4D048C;
+        }
+    }
+
+    .btn-prev {
+        margin-left: -650px;
+    }
+
+    .btn-next {
+        margin-left: 575px;
+    }
+    .swiper-slide{
+        height: 100%;
+    }
+    .swiper-slide-active{
+        .slideCon{
+            .swiper-title{
+                background-color: #4D048C;
+                color: #fff;
+                border-radius: 50%;
+                position: relative;
+                &::after{
+                    content: '';
+                    position: absolute;
+                    left: -6px;
+                    top: -6px;
+                    width: 90px;
+                    height: 90px;
+                    border: 1px solid #4D048C;
+                    border-radius: 50%;
+                }
+                &::before{
+                    content: '';
+                    position: absolute;
+                    left: 50%;
+                    top: 86px;
+                    width: 1px;
+                    height: 100px;
+                    background-color: #4D048C;
+                }
+                .pop{
+                    // display: block;
+                    opacity: 1;
+                    visibility: visible; /* 使元素可见 */
+                }
+             }   
+        }
+     
+    }
+
+    .slideCon {
+        // width: 175px;
+        max-width: 1300px;
+        height: 100%;
+        box-sizing: border-box;
+        margin: 0 auto;
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #fff;
+        display: flex;
+        padding-top: 12px;
+        // align-items: center;
+        // justify-content: center;
+        cursor: pointer;
+        .swiper-title {
+            width: 80px;
+            height: 80px;
+            font-size: 26px;
+            color: #000;
+            margin-right: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            .pop{
+                // display: none;
+                width: 725px;
+                height: auto;
+                background-color: #4D048C;
+                color: #fff;
+                line-height: 1.5;
+                padding: 20px 10px;
+                border-radius: 15px;
+                position: absolute;
+                left: -328.5px;
+                top: 193px;
+                box-sizing: border-box;
+                font-size: 26px;
+                opacity: 0;
+                visibility: hidden; /* 使元素不可见 */
+                transition: opacity .2s linear, visibility .2s linear; /* 添加过渡效果 */
+                &::after{
+                    content: '';
+                    position: absolute;
+                    left: -7px;
+                    top: -7px;
+                    width: 737px;
+                    height: calc(100% + 12px);
+                    border: 1px solid #4D048C;
+                    border-radius: 22px;
+                }
+                span{
+                    font-weight: 700;
+                }
+            }
+        }
+        .swiper-title2{
+            .pop{
+                width: 725px;
+                height: 160px;
+                &::after{
+                    content: '';
+                    position: absolute;
+                    left: -7px;
+                    top: -7px;
+                    width: 737px;
+                    height: 172px;
+                    border: 1px solid #4D048C;
+                    border-radius: 22px;
+                }
+            }
+        }
+        
+    }
+    .line{
+        width: 80px;
+        height: 1px;
+        background-color: #000;
+        margin-top: 40.5px;
+    }
+
+    .bannerFooter{
+        width: 100%;
+        height: 115px;
+        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        font-weight: bold;
+        font-size: 24px;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 115px;
+    }
+}
+
+
+
+@media screen and (min-width: 1300px) and (max-width: 1600px) {
+    .banner {
+        // .slideCon {
+        //     padding: 180px 10px 0px;
+        //     box-sizing: border-box;
+        // }
+    }
+}
+
+@media screen and (min-width: 801px) and (max-width: 1300px) {
+    .banner {
+        // .slideCon {
+        //     padding: 120px 10px 0px;
+        //     box-sizing: border-box;
+        // }
+    }
+
+}
+
+// @media screen and (min-width:800px) {
+
+//     .goTop {
+//         .goTopBtn {
+//             background: #ffffff;
+
+//             .btnShow {
+//                 .btnIcon {
+//                     background-color: #0056A7;
+//                 }
+//             }
+
+//             &:hover {
+//                 background: #ffffff;
+
+//             }
+//         }
+//     }
+// }
+
+.mTxt {
+    display: none;
+}
+
+//移动端样式
+// @media screen and (max-width:800px) {
+//     .pcTxt {
+//         display: none;
+//     }
+
+//     .mTxt {
+//         display: block;
+//     }
+
+//     .banner {
+//         width: 100%;
+//         height: 100vh;
+
+//         .swiper {
+//             width: 100%;
+//             height: 100%;
+//         }
+
+//         .slideCon {
+//             padding: 0 15px;
+//             padding-top: 130px;
+//             height: auto;
+
+//             .title {
+//                 font-size: 30px;
+//                 line-height: 48px;
+
+//                 br {
+//                     display: block;
+//                 }
+//             }
+//         }
+
+//         .btn-prev,
+//         .btn-next {
+//             display: none;
+//         }
+
+//         .bannerSwiper {
+//             .bannerS1 {
+//                 img {
+//                     display: block;
+//                 }
+
+//                 video {
+//                     display: none;
+//                 }
+//             }
+
+//             .swiper-pagination {
+//                 display: block;
+//                 bottom: 60px;
+
+//                 .swiper-pagination-bullet {
+//                     width: 6px;
+//                     height: 6px;
+//                     margin: 0 6px;
+
+//                     &::before {
+//                         left: -3px;
+//                         top: -3px;
+//                         width: 10px;
+//                         height: 10px;
+//                     }
+//                 }
+//             }
+//         }
+//     }
+
+
+//     .society {
+//         padding-bottom: 110px;
+//         display: flex;
+//         flex-direction: column-reverse;
+
+//         .societyCon {
+//             position: relative;
+//             color: #231F20;
+//             padding-top: 0px;
+//             padding-left: 15px;
+//             padding-right: 15px;
+//             box-sizing: border-box;
+
+//             .text {
+//                 margin-top: 40px;
+//                 margin-bottom: 30px;
+//             }
+
+//             .btn {
+//                 display: none;
+//             }
+//         }
+
+//         &>.btn {
+//             display: block;
+//             margin-top: 80px;
+//         }
+//     }
+// }

src/pages/common/js/Common.js

@@ -237,11 +237,14 @@ export default class Common {
     let searchClose=document.querySelector(".searchClose");
     let searchDw=document.querySelector(".searchDw");
     let newsType=document.querySelector(".searchDw .newsType");
-    searchDiv.addEventListener("click",(e)=>{
-      // newsType.innerHTML='';
-      searchCon.classList.add("searchConShow");
+    if(searchDiv){
 
-    });
+      searchDiv.addEventListener("click",(e)=>{
+        // newsType.innerHTML='';
+        searchCon.classList.add("searchConShow");
+       
+      });
+    }
     searchClose.addEventListener("click",(e)=>{
       searchCon.classList.remove("searchConShow");
       newsType.innerHTML='';

src/pages/common/tpl/header.tpl

@@ -1,37 +1,38 @@
 <header>
-    <div class="headCon"><div class="headerPC">
-        <div class="logo"></div>
-        <div class="menu">
-            <div class="menuOne">
-                <a href="./index.html">走进中泽</a>
-                <div class="menuSon">
-                    <div class="menuUp"></div>
-                    <a href="./index.html#jtjs"><span>集团介绍</span></a>
-                    <a href="./index.html#fzlc"><span>发展历程</span></a>
-                    <a href="./index.html#qyxw"><span>企业文化</span></a>
-                    <a href="./index.html#xwdt"><span>新闻动态</span></a>
+    <div class="headCon">
+        <div class="headerPC">
+            <div class="logo"></div>
+            <div class="menu">
+                <div class="menuOne">
+                    <a href="./index.html">走进中泽</a>
+                    <div class="menuSon">
+                        <div class="menuUp"></div>
+                        <a href="./index.html#jtjs"><span>集团介绍</span></a>
+                        <a href="./index.html#fzlc"><span>发展历程</span></a>
+                        <a href="./index.html#qyxw"><span>企业文化</span></a>
+                        <a href="./index.html#xwdt"><span>新闻动态</span></a>
+                    </div>
                 </div>
-            </div>
-            <div class="menuOne">
-                <a href="./product.html">产业布局</a>
-                <div class="menuSon">
-                    <div class="menuUp"></div>
-                    <a href="./product.html#hxbk"><span>核心板块</span></a>
-                    <a href="./product.html#cyhl"><span>产业互联</span></a>
-                    <a href="./product.html#cyml"><span>成员名录</span></a>
+                <div class="menuOne">
+                    <a href="./product.html">产业布局</a>
+                    <div class="menuSon">
+                        <div class="menuUp"></div>
+                        <a href="./product.html#hxbk"><span>核心板块</span></a>
+                        <a href="./product.html#cyhl"><span>产业互联</span></a>
+                        <a href="./product.html#cyml"><span>成员名录</span></a>
+                    </div>
                 </div>
-            </div>
-            <div class="menuOne">
-                <a href="./news.html">新闻动态</a>
-                <div class="menuSon">
-                    <div class="menuUp"></div>
-                    <a href="./news.html#point"><span>集团新闻</span></a>
-                    <a href="./news.html#point"><span>行业资讯</span></a>
-                    <a href="./partyBuilding.html"><span>党建工作</span></a>
-                    <a href="./socialResponsibility.html"><span>社会责任</span></a>
+                <div class="menuOne">
+                    <a href="./news.html">新闻动态</a>
+                    <div class="menuSon">
+                        <div class="menuUp"></div>
+                        <a href="./news.html#point"><span>集团新闻</span></a>
+                        <a href="./news.html#point"><span>行业资讯</span></a>
+                        <a href="./partyBuilding.html"><span>党建工作</span></a>
+                        <a href="./socialResponsibility.html"><span>社会责任</span></a>
+                    </div>
                 </div>
-            </div>
-            <!--<div class="menuOne">
+                <!--<div class="menuOne">
                 <a href="./partyBuilding.html">党建工作</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
@@ -47,63 +48,68 @@
                     <a href="./socialResponsibility.html#p2"><span>绿色转型</span></a>
                 </div>
             </div>-->
-            <div class="menuOne">
-                <a href="./join.html">加入中泽</a>
-                <div class="menuSon">
-                    <div class="menuUp"></div>
-                    <a href="./join.html#careersInfo"><span>招聘信息</span></a>
-                    <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                <div class="menuOne">
+                    <a href="./join.html">加入中泽</a>
+                    <div class="menuSon">
+                        <div class="menuUp"></div>
+                        <a href="./join.html#careersInfo"><span>招聘信息</span></a>
+                        <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                    </div>
+                </div>
+                <div class="menuOne">
+                    <a href="./HogoodCoffee.html">后谷咖啡</a>
                 </div>
             </div>
-        </div>
-        <div class="language menuOne">
-            <div class="btn2 btnW searchDiv"><span class="iconfont icon-search"></span></div>
-            <!--<span class="line" style="display:none"></span>
+            <div class="language menuOne">
+                <div class="btn2 btnW searchDiv"><span class="iconfont icon-search"></span></div>
+                <!--<span class="line" style="display:none"></span>
             <a href="./join.html#contactUs" class="aborder">联系我们</a>-->
-        </div>
-    </div>
-    <div class="headerMobile">
-        <div class="logo"></div>
-        <div class="navFlagBtn">
-            <div class="nav_btn_small">
-                <div class="lineTop arrowDirBase"></div>
-                <div class="lineCenter arrowDirBase" style="display: block;"></div>
-                <div class="lineBottom arrowDirBase"></div>
             </div>
         </div>
-        <div class="navFlag">
-            <div class="navBg"></div>
-            <div class="navMenu">
-                <!--<div>
+        <div class="headerMobile">
+            <div class="logo"></div>
+            <div class="navFlagBtn">
+                <div class="nav_btn_small">
+                    <div class="lineTop arrowDirBase"></div>
+                    <div class="lineCenter arrowDirBase" style="display: block;"></div>
+                    <div class="lineBottom arrowDirBase"></div>
+                </div>
+            </div>
+            <div class="navFlag">
+                <div class="navBg"></div>
+                <div class="navMenu">
+                    <!--<div>
                     <a class="title" href="./index.html">首页</a>
                 </div>-->
-                <div>
-                    <div class="title"><a href="./index.html">走进中泽</a><span class="iconfont icon-xiala"></span></div>
-                    <div class="menuSon">
-                        <a href="./index.html#jtjs"><span>集团介绍</span></a>
-                        <a href="./index.html#fzlc"><span>发展历程</span></a>
-                        <a href="./index.html#qywh"><span>企业文化</span></a>
-                        <a href="./index.html#xwdt"><span>新闻动态</span></a>
+                    <div>
+                        <div class="title"><a href="./index.html">走进中泽</a><span class="iconfont icon-xiala"></span>
+                        </div>
+                        <div class="menuSon">
+                            <a href="./index.html#jtjs"><span>集团介绍</span></a>
+                            <a href="./index.html#fzlc"><span>发展历程</span></a>
+                            <a href="./index.html#qywh"><span>企业文化</span></a>
+                            <a href="./index.html#xwdt"><span>新闻动态</span></a>
+                        </div>
                     </div>
-                </div>
-                <div>
-                    <div class="title"><a href="./product.html">产业布局</a><span class="iconfont icon-xiala"></span></div>
-                    <div class="menuSon">
-                        <a href="./product.html#hxbk"><span>核心板块</span></a>
-                        <a href="./product.html#cyhl"><span>产业互联</span></a>
-                        <a href="./product.html#cyml"><span>成员名录</span></a>
+                    <div>
+                        <div class="title"><a href="./product.html">产业布局</a><span class="iconfont icon-xiala"></span>
+                        </div>
+                        <div class="menuSon">
+                            <a href="./product.html#hxbk"><span>核心板块</span></a>
+                            <a href="./product.html#cyhl"><span>产业互联</span></a>
+                            <a href="./product.html#cyml"><span>成员名录</span></a>
+                        </div>
                     </div>
-                </div>
-                <div>
-                    <div class="title"><a href="./news.html">新闻动态</a><span class="iconfont icon-xiala"></span></div>
-                    <div class="menuSon">
-                        <a href="./news.html#point"><span>集团新闻</span></a>
-                        <a href="./news.html#point"><span>行业资讯</span></a>
-                        <a href="./partyBuilding.html"><span>党建工作</span></a>
-                        <a href="./socialResponsibility.html"><span>社会责任</span></a>
+                    <div>
+                        <div class="title"><a href="./news.html">新闻动态</a><span class="iconfont icon-xiala"></span></div>
+                        <div class="menuSon">
+                            <a href="./news.html#point"><span>集团新闻</span></a>
+                            <a href="./news.html#point"><span>行业资讯</span></a>
+                            <a href="./partyBuilding.html"><span>党建工作</span></a>
+                            <a href="./socialResponsibility.html"><span>社会责任</span></a>
+                        </div>
                     </div>
-                </div>
-                <!--<div>
+                    <!--<div>
                     <div class="title"><a href="./partyBuilding.html">党建工作</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
                         <a href="./partyBuilding.html#p1"><span>企业党建</span></a>
@@ -117,20 +123,20 @@
                         <a href="./socialResponsibility.html#p2"><span>绿色转型</span></a>
                     </div>
                 </div>-->
-                <div>
-                    <div class="title"><a href="./join.html">加入中泽</a><span class="iconfont icon-xiala"></span></div>
-                    <div class="menuSon">
-                        <a href="./join.html#careersInfo"><span>招聘信息</span></a>
-                        <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                    <div>
+                        <div class="title"><a href="./join.html">加入中泽</a><span class="iconfont icon-xiala"></span></div>
+                        <div class="menuSon">
+                            <a href="./join.html#careersInfo"><span>招聘信息</span></a>
+                            <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <!--<div class="language">
+                <!--<div class="language">
                 <a href=""><span class="iconfont icon-search"></span></a>
                 <div></div>
                 <a href="">联系我们</a>
             </div>-->
+            </div>
         </div>
-    </div></div>
-</header>
-
+    </div>
+</header>

src/pages/index/App.js

@@ -253,14 +253,14 @@ export default class App {
                 on:{
                     slideChange: function(){
                         let index0=this.realIndex;
-                        scrollLeft(index0)
-                        productCks.forEach((item,index)=>{
-                            if(index==index0){
-                                item.classList.add("productCk");
-                            }else{
-                                item.classList.remove("productCk");
-                            }
-                        });
+                        // scrollLeft(index0)
+                        // productCks.forEach((item,index)=>{
+                        //     if(index==index0){
+                        //         item.classList.add("productCk");
+                        //     }else{
+                        //         item.classList.remove("productCk");
+                        //     }
+                        // });
                     },
                 },
         });