This commit is contained in:
2025-01-03 18:02:01 +08:00
commit 44d914b1a1
71 changed files with 825 additions and 0 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

1
README.md Normal file
View File

@@ -0,0 +1 @@
# 企业官网-模版

127
about_us.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{eyou:global name='web_keywords' /}" />
<meta name="description" content="{eyou:global name='web_description' /}" />
<title>{eyou:global name='web_title' /}_{eyou:global name='web_name' /}</title>
<link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css//header.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>
<script src="./js/ScrollToPlugin.min.js"></script>
<script src="./js/ScrollSmoother.min.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/tailwindcss.js"></script>
<script src="./js/tailwind.config.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- header -->
<nav id="navbar"
class="navbar navbar-expand-lg navbar-expand-lg tw-relative tw-z-10 tw-h-[100px] tw-box-border tw-border-b-2 tw-border-[rgba(255,255,255,.2)] tw-py-0">
<div
class="container-fluid !tw-justify-between sm:tw-gap-[80px] tw-gap-[20px] tw-h-full !tw-main-px tw-box-border">
<a class="navbar-brand tw-flex-shrink-0" href="/index.html">
<img class="tw-w-[321px] ss:tw-w-[200px] tw-object-contain"
src="./images/b20d13642-4b0a-46e6-9b6b-29c89c7f8ced.png" />
</a>
<button class="navbar-toggler tw-hidden sm:tw-block" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler tw-block sm:tw-hidden" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="sm:tw-block tw-hidden">
<div class="collapse navbar-collapse tw-flex-grow-0 tw-h-full" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 tw-gap-[80px] tw-h-full">
<!-- 选中效果 cur -->
<li class="nav-item cur tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/company_overview.html">公司概况</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-min-w-[80px] tw-text-center" aria-current="page"
href="/distributed_energy.html">分布式能源</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/business_introduction.html">业务介绍</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/contact_us.html">联系我们</a>
</li>
</ul>
<form class="d-flex" role="search">
<div class="tw-ml-[80px]">
<input class="tw-hidden" />
<img class="tw-w-[20px] tw-aspect-square" src="./images/搜索@2x.png" alt="" />
</div>
</form>
</div>
</div>
<div class="sm:tw-hidden">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">百川清能</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">技术优势</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">案例展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success tw-min-w-[60px]" type="submit">搜索</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<!-- header -->
<div class="tw-text-[red] tw-min-h-[300vh]">
123
</div>
</div>
</div>
</body>
</html>

6
css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

40
css/header.css Normal file
View File

@@ -0,0 +1,40 @@
@keyframes NavItem {
0% {
width: 0;
}
100% {
width: 80%;
}
}
.navbar-nav .cur a {
color: #1362AD;
}
.navbar-nav .cur a::after {
display: block !important;
}
.navbar-nav .nav-item a {
transition: 500ms;
}
.navbar-nav .nav-item {
position: relative;
}
.navbar-nav .nav-item:hover a::after {
display: block;
}
.navbar-nav .nav-item a::after {
content: '';
width: 0;
height: 2px;
background-color: #1362AD;
position: absolute;
bottom: -31px;
display: none;
animation: NavItem 500ms forwards;
}

4
css/index.css Normal file
View File

@@ -0,0 +1,4 @@
* {
margin: 0;
padding: 0;
}

13
css/swiper-bundle.min.css vendored Normal file

File diff suppressed because one or more lines are too long

127
index.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{eyou:global name='web_keywords' /}" />
<meta name="description" content="{eyou:global name='web_description' /}" />
<title>{eyou:global name='web_title' /}_{eyou:global name='web_name' /}</title>
<link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css//header.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>
<script src="./js/ScrollToPlugin.min.js"></script>
<script src="./js/ScrollSmoother.min.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/tailwindcss.js"></script>
<script src="./js/tailwind.config.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- header -->
<nav id="navbar"
class="navbar navbar-expand-lg navbar-expand-lg tw-relative tw-z-10 tw-h-[100px] tw-box-border tw-border-b-2 tw-border-[rgba(255,255,255,.2)] tw-py-0">
<div
class="container-fluid !tw-justify-between sm:tw-gap-[80px] tw-gap-[20px] tw-h-full !tw-main-px tw-box-border">
<a class="navbar-brand tw-flex-shrink-0" href="/index.html">
<img class="tw-w-[321px] ss:tw-w-[200px] tw-object-contain"
src="./images/b20d13642-4b0a-46e6-9b6b-29c89c7f8ced.png" />
</a>
<button class="navbar-toggler tw-hidden sm:tw-block" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler tw-block sm:tw-hidden" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="sm:tw-block tw-hidden">
<div class="collapse navbar-collapse tw-flex-grow-0 tw-h-full" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 tw-gap-[80px] tw-h-full">
<!-- 选中效果 cur -->
<li class="nav-item cur tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/company_overview.html">公司概况</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-min-w-[80px] tw-text-center" aria-current="page"
href="/distributed_energy.html">分布式能源</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/business_introduction.html">业务介绍</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/contact_us.html">联系我们</a>
</li>
</ul>
<form class="d-flex" role="search">
<div class="tw-ml-[80px]">
<input class="tw-hidden" />
<img class="tw-w-[20px] tw-aspect-square" src="./images/搜索@2x.png" alt="" />
</div>
</form>
</div>
</div>
<div class="sm:tw-hidden">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">百川清能</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">技术优势</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">案例展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success tw-min-w-[60px]" type="submit">搜索</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<!-- header -->
<div class="tw-text-[red] tw-min-h-[300vh]">
123
</div>
</div>
</div>
</body>
</html>

13
js/ScrollSmoother.min.js vendored Normal file

File diff suppressed because one or more lines are too long

11
js/ScrollToPlugin.min.js vendored Normal file
View File

@@ -0,0 +1,11 @@
/*!
* ScrollToPlugin 3.12.5
* https://gsap.com
*
* @license Copyright 2024, GreenSock. All rights reserved.
* Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function l(){return"undefined"!=typeof window}function m(){return f||l()&&(f=window.gsap)&&f.registerPlugin&&f}function n(e){return"string"==typeof e}function o(e){return"function"==typeof e}function p(e,t){var o="x"===t?"Width":"Height",n="scroll"+o,r="client"+o;return e===T||e===i||e===c?Math.max(i[n],c[n])-(T["inner"+o]||i[r]||c[r]):e[n]-e["offset"+o]}function q(e,t){var o="scroll"+("x"===t?"Left":"Top");return e===T&&(null!=e.pageXOffset?o="page"+t.toUpperCase()+"Offset":e=null!=i[o]?i:c),function(){return e[o]}}function s(e,t){if(!(e=y(e)[0])||!e.getBoundingClientRect)return console.warn("scrollTo target doesn't exist. Using 0")||{x:0,y:0};var o=e.getBoundingClientRect(),n=!t||t===T||t===c,r=n?{top:i.clientTop-(T.pageYOffset||i.scrollTop||c.scrollTop||0),left:i.clientLeft-(T.pageXOffset||i.scrollLeft||c.scrollLeft||0)}:t.getBoundingClientRect(),l={x:o.left-r.left,y:o.top-r.top};return!n&&t&&(l.x+=q(t,"x")(),l.y+=q(t,"y")()),l}function t(e,t,o,r,l){return isNaN(e)||"object"==typeof e?n(e)&&"="===e.charAt(1)?parseFloat(e.substr(2))*("-"===e.charAt(0)?-1:1)+r-l:"max"===e?p(t,o)-l:Math.min(p(t,o),s(e,t)[o]-l):parseFloat(e)-l}function u(){f=m(),l()&&f&&"undefined"!=typeof document&&document.body&&(T=window,c=document.body,i=document.documentElement,y=f.utils.toArray,f.config({autoKillThreshold:7}),h=f.config(),a=1)}var f,a,T,i,c,y,h,v,r={version:"3.12.5",name:"scrollTo",rawVars:1,register:function register(e){f=e,u()},init:function init(e,r,l,s,i){a||u();var p=this,c=f.getProperty(e,"scrollSnapType");p.isWin=e===T,p.target=e,p.tween=l,r=function _clean(e,t,r,l){if(o(e)&&(e=e(t,r,l)),"object"!=typeof e)return n(e)&&"max"!==e&&"="!==e.charAt(1)?{x:e,y:e}:{y:e};if(e.nodeType)return{y:e,x:e};var s,i={};for(s in e)i[s]="onAutoKill"!==s&&o(e[s])?e[s](t,r,l):e[s];return i}(r,s,e,i),p.vars=r,p.autoKill=!!r.autoKill,p.getX=q(e,"x"),p.getY=q(e,"y"),p.x=p.xPrev=p.getX(),p.y=p.yPrev=p.getY(),v=v||f.core.globals().ScrollTrigger,"smooth"===f.getProperty(e,"scrollBehavior")&&f.set(e,{scrollBehavior:"auto"}),c&&"none"!==c&&(p.snap=1,p.snapInline=e.style.scrollSnapType,e.style.scrollSnapType="none"),null!=r.x?(p.add(p,"x",p.x,t(r.x,e,"x",p.x,r.offsetX||0),s,i),p._props.push("scrollTo_x")):p.skipX=1,null!=r.y?(p.add(p,"y",p.y,t(r.y,e,"y",p.y,r.offsetY||0),s,i),p._props.push("scrollTo_y")):p.skipY=1},render:function render(e,t){for(var o,n,r,l,s,i=t._pt,c=t.target,u=t.tween,f=t.autoKill,a=t.xPrev,y=t.yPrev,d=t.isWin,g=t.snap,x=t.snapInline;i;)i.r(e,i.d),i=i._next;o=d||!t.skipX?t.getX():a,r=(n=d||!t.skipY?t.getY():y)-y,l=o-a,s=h.autoKillThreshold,t.x<0&&(t.x=0),t.y<0&&(t.y=0),f&&(!t.skipX&&(s<l||l<-s)&&o<p(c,"x")&&(t.skipX=1),!t.skipY&&(s<r||r<-s)&&n<p(c,"y")&&(t.skipY=1),t.skipX&&t.skipY&&(u.kill(),t.vars.onAutoKill&&t.vars.onAutoKill.apply(u,t.vars.onAutoKillParams||[]))),d?T.scrollTo(t.skipX?o:t.x,t.skipY?n:t.y):(t.skipY||(c.scrollTop=t.y),t.skipX||(c.scrollLeft=t.x)),!g||1!==e&&0!==e||(n=c.scrollTop,o=c.scrollLeft,x?c.style.scrollSnapType=x:c.style.removeProperty("scroll-snap-type"),c.scrollTop=n+1,c.scrollLeft=o+1,c.scrollTop=n,c.scrollLeft=o),t.xPrev=t.x,t.yPrev=t.y,v&&v.update()},kill:function kill(e){var t="scrollTo"===e,o=this._props.indexOf(e);return!t&&"scrollTo_x"!==e||(this.skipX=1),!t&&"scrollTo_y"!==e||(this.skipY=1),-1<o&&this._props.splice(o,1),!this._props.length}};r.max=p,r.getOffset=s,r.buildGetter=q,m()&&f.registerPlugin(r),e.ScrollToPlugin=r,e.default=r;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});

11
js/ScrollTrigger.min.js vendored Normal file

File diff suppressed because one or more lines are too long

7
js/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

11
js/gsap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

0
js/index.js Normal file
View File

14
js/swiper-bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

36
js/tailwind.config.js Normal file
View File

@@ -0,0 +1,36 @@
tailwind.config = {
prefix: 'tw-',
theme: {
screens: {
'ss': { 'max': '639px' },
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {}
},
plugins: [
function ({ addUtilities }) {
addUtilities({
'.custom-padding': {
paddingLeft: '12px',
paddingRight: '12px',
'@screen md': {
paddingLeft: '60px',
paddingRight: '60px',
},
'@screen lg': {
paddingLeft: '120px',
paddingRight: '120px',
},
'@screen xl': {
paddingLeft: '240px',
paddingRight: '240px',
},
},
});
},
],
}

62
js/tailwindcss.js Normal file

File diff suppressed because one or more lines are too long

50
js/utils.js Normal file
View File

@@ -0,0 +1,50 @@
const toUrl = (url, isNew = false) => {
isNew ?
window.open(url) :
window.location.href = url;
}
window.addEventListener('load', function() {
const images = document.querySelectorAll('.in-scale-image');
const options = {
root: null, // 使用 viewport 作为根
threshold: 0 // 当 10% 的元素可见时触发
};
const callback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('img-scale-in');
}
});
};
const observer = new IntersectionObserver(callback, options);
images.forEach(img => {
observer.observe(img);
});
});
/**
* 依赖于gsap、ScrollTrigger、ScrollToPlugin、ScrollSmoother
*/
window.addEventListener('load', function() {
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, ScrollSmoother);
ScrollSmoother.create({
smooth: 1,
effects: true,
smoothTouch: 0.1,
normalizeScroll: true,
});
const navToValue = new URLSearchParams(window.location.search).get('navTo');
scrollToElement(navToValue);
});
const scrollToElement = (id) => {
gsap.to(window, {
duration: 0.5,
scrollTo:{y: `#${id}`},
ease: "power2",
});
}

127
product_list.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{eyou:global name='web_keywords' /}" />
<meta name="description" content="{eyou:global name='web_description' /}" />
<title>{eyou:global name='web_title' /}_{eyou:global name='web_name' /}</title>
<link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css//header.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>
<script src="./js/ScrollToPlugin.min.js"></script>
<script src="./js/ScrollSmoother.min.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/tailwindcss.js"></script>
<script src="./js/tailwind.config.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- header -->
<nav id="navbar"
class="navbar navbar-expand-lg navbar-expand-lg tw-relative tw-z-10 tw-h-[100px] tw-box-border tw-border-b-2 tw-border-[rgba(255,255,255,.2)] tw-py-0">
<div
class="container-fluid !tw-justify-between sm:tw-gap-[80px] tw-gap-[20px] tw-h-full !tw-main-px tw-box-border">
<a class="navbar-brand tw-flex-shrink-0" href="/index.html">
<img class="tw-w-[321px] ss:tw-w-[200px] tw-object-contain"
src="./images/b20d13642-4b0a-46e6-9b6b-29c89c7f8ced.png" />
</a>
<button class="navbar-toggler tw-hidden sm:tw-block" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler tw-block sm:tw-hidden" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="sm:tw-block tw-hidden">
<div class="collapse navbar-collapse tw-flex-grow-0 tw-h-full" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 tw-gap-[80px] tw-h-full">
<!-- 选中效果 cur -->
<li class="nav-item cur tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/company_overview.html">公司概况</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-min-w-[80px] tw-text-center" aria-current="page"
href="/distributed_energy.html">分布式能源</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/business_introduction.html">业务介绍</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/contact_us.html">联系我们</a>
</li>
</ul>
<form class="d-flex" role="search">
<div class="tw-ml-[80px]">
<input class="tw-hidden" />
<img class="tw-w-[20px] tw-aspect-square" src="./images/搜索@2x.png" alt="" />
</div>
</form>
</div>
</div>
<div class="sm:tw-hidden">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">百川清能</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">技术优势</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">案例展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success tw-min-w-[60px]" type="submit">搜索</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<!-- header -->
<div class="tw-text-[red] tw-min-h-[300vh]">
123
</div>
</div>
</div>
</body>
</html>

127
product_view.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{eyou:global name='web_keywords' /}" />
<meta name="description" content="{eyou:global name='web_description' /}" />
<title>{eyou:global name='web_title' /}_{eyou:global name='web_name' /}</title>
<link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css//header.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>
<script src="./js/ScrollToPlugin.min.js"></script>
<script src="./js/ScrollSmoother.min.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/tailwindcss.js"></script>
<script src="./js/tailwind.config.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- header -->
<nav id="navbar"
class="navbar navbar-expand-lg navbar-expand-lg tw-relative tw-z-10 tw-h-[100px] tw-box-border tw-border-b-2 tw-border-[rgba(255,255,255,.2)] tw-py-0">
<div
class="container-fluid !tw-justify-between sm:tw-gap-[80px] tw-gap-[20px] tw-h-full !tw-main-px tw-box-border">
<a class="navbar-brand tw-flex-shrink-0" href="/index.html">
<img class="tw-w-[321px] ss:tw-w-[200px] tw-object-contain"
src="./images/b20d13642-4b0a-46e6-9b6b-29c89c7f8ced.png" />
</a>
<button class="navbar-toggler tw-hidden sm:tw-block" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler tw-block sm:tw-hidden" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="sm:tw-block tw-hidden">
<div class="collapse navbar-collapse tw-flex-grow-0 tw-h-full" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 tw-gap-[80px] tw-h-full">
<!-- 选中效果 cur -->
<li class="nav-item cur tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/company_overview.html">公司概况</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-min-w-[80px] tw-text-center" aria-current="page"
href="/distributed_energy.html">分布式能源</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/business_introduction.html">业务介绍</a>
</li>
<li class="nav-item tw-flex tw-items-center tw-justify-center tw-box-border">
<a class="nav-link tw-w-[80px] tw-text-center" aria-current="page"
href="/contact_us.html">联系我们</a>
</li>
</ul>
<form class="d-flex" role="search">
<div class="tw-ml-[80px]">
<input class="tw-hidden" />
<img class="tw-w-[20px] tw-aspect-square" src="./images/搜索@2x.png" alt="" />
</div>
</form>
</div>
</div>
<div class="sm:tw-hidden">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">百川清能</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">技术优势</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">案例展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success tw-min-w-[60px]" type="submit">搜索</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<!-- header -->
<div class="tw-text-[red] tw-min-h-[300vh]">
123
</div>
</div>
</div>
</body>
</html>

38
tailwind.config.js Normal file
View File

@@ -0,0 +1,38 @@
export default {
prefix: 'tw-',
theme: {
screens: {
'ss': { 'max': '639px' },
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {
// 可根据需要自行配置,空配置项可以正常使用
},
},
plugins: [
function ({ addUtilities }) {
addUtilities({
'.custom-padding': {
paddingLeft: '12px',
paddingRight: '12px',
'@screen md': {
paddingLeft: '60px',
paddingRight: '60px',
},
'@screen lg': {
paddingLeft: '120px',
paddingRight: '120px',
},
'@screen xl': {
paddingLeft: '240px',
paddingRight: '240px',
},
},
});
},
],
}