<!-- #include file="top.asp" -->
<%
leiid=request("lei")
fenlei1=request("fenlei")
id=request("id")
if fenlei1<>"" then fenlei=Conn.Execute("select * from fenlei Where id="&fenlei1&"")("fenlei_ca")'转成中文类别，解决utf-8
if leiid<>"" then lei="产品展示"
dim pp
 %>
<% mm=request("page") 
if mm="" then mm=1
%>
<title>脚轮产品图片展示,<%= fenlei %>,第<%=mm %>页--中山市新邦脚轮制造有限公司</title>

<style>

.gallery {
  width:100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.gallery-item {
	/*width: 350px; *//* 图片宽度固定为300px */
	box-sizing: border-box;
	text-align: center;
	position: relative; /* 为覆盖层定位 */
}
.gallery-item img {
	width: 100%; /* 图片宽度为100% */
	height: 100%; /* 图片高度固定为349px */
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡动画 */
}
.gallery-item:hover img {
	transform: scale(1.05); /* 悬停时放大 */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 悬停时阴影加深 */
}
.gallery-item p {
	margin: 10px 0 0;
	font-size: 18px; /* 编号字体大小 */
	color:#666666;
	font-weight: bold; /* 加粗 */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 立体阴影效果 */
	transition: transform 0.3s ease, text-shadow 0.3s ease; /* 添加过渡动画 */
}

/* 覆盖层样式 */
.overlay {
	position: absolute;
	top: 83%; /* 定位到图片中间 */
	left: 0;
	width: 100%; /* 宽度与图片一致 */
	background-color: rgb(128, 128, 128); /* 中灰色 */ /* #005fc9 半透明 *//
	color:#FFFFFF;
	text-align: center;
	padding: 10px 0; /* 上下内边距 */
	font-size: 16px;
	opacity: 0; /* 默认隐藏 */
	transform: translateY(-50%); /* 垂直居中 */
	transition: opacity 0.3s ease; /* 添加过渡动画 */
}
.gallery-item:hover .overlay {
	opacity: 1; /* 悬停时显示 */
}


.text-overlay {
position: absolute;
top: 10px;   /* 距离图片顶部10像素 */
left: 10px;  /* 距离图片左侧10像素 */
color: white; /* 文字颜色 */
font-size: 17px; /* 文字大小 */
padding: 1px 5px; /* 文字周围的填充，可以调整大小 */
background-color: #005fc9; /* 背景颜色为蓝色 */
border-radius: 9999px; /* 圆角边框，9999px确保边缘是圆形 */
display: inline-block; /* 使得元素呈现为行内块元素 */
box-shadow: 0 0 0 1px #10b8f6; /* 添加一个蓝色的盒子阴影，模拟圆边*/
-webkit-box-shadow: 1px 1px 2px #888;/*3D深度*/
}





/*-----------------------------------------------------------------------------------*/
/*------------------------分页组件菜单-------------------------------------------------*/
/*------------------------------------------------------------------------------------*/

/* 分页组件容器样式 */
.pagination {
     margin: 80px 0 10px 0;*/
    text-align: center; /* 内容居中对齐 */
    font-family: Arial, sans-serif; /* 使用Arial或无衬线字体 */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 分页链接基础样式 */
.pagination a {
    display: inline-block; /* 行内块显示 */
    padding: 8px 12px; /* 内边距 */
    margin: 0 5px; /* 左右间距2px */
    border: 1px solid #ddd; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角边框 */
    text-decoration: none; /* 去除下划线 */
    color: #005fc9; /* 链接文字颜色改为蓝色 */
    background-color: #fff; /* 白色背景 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 分页链接悬停状态 */
.pagination a:hover {
    background-color: #005fc9; /* 悬停背景改为淡蓝色 */
    border-color: #b3d4ff; /* 悬停边框改为更浅的蓝色*/ 
	color: white; /* 白色文字 */
}

/* 当前页样式 */
.pagination strong {
    display: inline-block; 
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid #005fc9; /* 蓝色边框 */
    border-radius: 4px;
    background-color: #005fc9; /* 蓝色背景 */
    color: white; /* 白色文字 */
    font-weight: normal; /* 正常字体粗细 */
}

/* 省略号样式 */
.pagination .ellipsis {
    padding: 8px 5px;
    margin: 0 2px;
    border: none; /* 无边框 */
    color: #666; /* 灰色文字 */
}

/* 上一页/下一页特殊样式 */
.pagination a[href*="page="]:first-child,
.pagination a[href*="page="]:last-child {
    padding: 8px 15px; /* 更大的左右内边距 */
    font-weight: bold; /* 加粗字体 */
    background-color: #f8f8f8; /* 浅灰色背景 */
}

/* 箭头图标容器 */
.pagination .arrow {
    position: relative; /* 相对定位 */
    padding: 8px 15px; /* 内边距 */
}

/* 上一页箭头图标 */
.pagination .arrow.prev::before {
    content: ""; /* 伪元素内容为空 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #005fc9; /* 蓝色左边框 */
    border-bottom: 2px solid #005fc9; /* 蓝色下边框 */
    transform: rotate(45deg); /* 旋转45度形成箭头 */
    margin-right: 3px; /* 右间距 */
}

/* 下一页箭头图标 */
.pagination .arrow.next::after {
    content: ""; /* 伪元素内容为空 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #005fc9; /* 蓝色右边框 */
    border-top: 2px solid #005fc9; /* 蓝色上边框 */
    transform: rotate(45deg); /* 旋转45度形成箭头 */
    margin-left: 3px; /* 左间距 */
}



/* 上一页/下一页箭头悬停效果 */
.pagination a[href*="page="]:first-child:hover,
.pagination a[href*="page="]:last-child:hover {
    background-color: #005fc9; /* 悬停背景色 */
    color: white; /* 白色文字 */
    border-color: #b3d4ff; /* 悬停边框色 */
}

/* 悬停时箭头颜色变为白色 */
.pagination a[href*="page="]:first-child:hover .arrow.prev::before,
.pagination a[href*="page="]:last-child:hover .arrow.next::after {
    border-left-color: white; /* 白色箭头 */
    border-bottom-color: white; /* 白色箭头 */
    border-right-color: white; /* 白色箭头 */
    border-top-color: white; /* 白色箭头 */
}
/* 响应式设计 - 在小屏幕上减少间距 */
@media (max-width: 600px) {
    .pagination a {
        padding: 6px 8px;
        margin: 0 1px;
    }
}




/*-----------------------------------------------------------------------------------*/
/*------------------------分页组件菜单END-------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

























/* 设置导航菜单的基本样式 */
.nav1 {
    list-style-type: none; /* 移除默认的列表符号 */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* 设置背景颜色为蓝色 */
    overflow: hidden; /* 清除浮动 */
    border-radius: 5px; /* 添加圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

/* 设置每个菜单项的样式 */
.nav1 li {
    float: left; /* 让菜单项水平排列 */
}

/* 设置菜单项链接的样式 */
.nav1 li a {
    display: block; /* 让链接充满整个菜单项 */
    color:#666666; /* 设置文字颜色为白色 */
    text-align: center; /* 文字居中 */
	border-radius: 4px;
    padding: 14px 20px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 16px; /* 设置字体大小 */
    transition: background-color 0.3s ease; /* 添加背景颜色过渡效果 */
	 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 设置鼠标悬停时的样式 */
.nav1 li a:hover {
    background-color: #005fc9; /* 改变背景颜色为浅蓝色 */
    color: #fff; /* 保持文字颜色为白色 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}



/* 设置当前选中菜单项的样式 */
.nav1 li a.active {
    background-color: #005fc9; /* 设置选中项的背景颜色为深蓝色 */
    color: white; /* 设置选中项的文字颜色为白色 */
	border-radius: 4px;

}

</style>



  <!-- breadrumb section start -->

     <section class="breadcrumb_section">
        <div class="container">
            <div class="row">
                <div class="breadcrumb_content">
                    <div class="row">
                        <div class="col-xl-3 col-lg-3"></div>
                        <div class="col-xl-6 col-lg-6">
                            <div class="breadcrumb_heading text-center">
                                <h2>产品展示</h2>
                                <p class="pairagraph mt-3"></p>
                            </div>
                        </div>

                        <div class="breadcrumb_list">
                            <ul class="d-flex list-unstyled p-0 m-0">
                                <li><a href="index.html">首页</a></li>
                                <li><i class="fa-solid fa-angles-right"></i></li>
                                <li><a href="products.html">产品展示</a></li>
								<% If fenlei<>"" Then %>
								<li><i class="fa-solid fa-angles-right"></i></li>
								<li><%= fenlei %></li>
								<% End If %>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- breadrumb section end -->


    <!-- case studies start -->

    <section class="pt-100">
        <div class="container">
            <div class="text-center">
      <ul class="nav1">
<% 
set rs=server.CreateObject("adodb.recordset")
rs.open "Select * From fenlei where fenid='72' order by list asc",conn,1,3 
do while not rs.eof  ' 
If rs("fenlei_ca")=fenlei Then
	activeClass = "active"
Else
	activeClass = ""
End If

%>
<li><a class="<%=activeClass%>" href="productsfenlei<%=rs("id")%>page1.html"><%= rs("fenlei_ca") %>系列</a></li>
<%
rs.movenext
loop
rs.close
set rs=nothing
%>
</ul>
	
            </div>

            <div class="row mt-5" data-aos="fade-up" data-aos-duration="3000">
			
			
			
			
			
			
			
			
			
			
			
<%	
	
	if lei<>"" and fenlei="" then 
pp="select * from Products Where lei='"&lei&"' order by time Desc"'菜单查询
Response.Write("<title>产品展示第"&request("page")&"页-中山市飞步脚轮有限公司</title>")

ElseIf fenlei<>"" Then
pp="select * from Products Where lei='"&lei&"' and fenlei='"&fenlei&"' order by time Desc"'分类查询
Response.Write("<title>"&fenlei&"第"&request("page")&"页-中山市飞步脚轮有限公司</title>")
else
    if request("search")="yes" then

    key=request("key")
    pp="select * from Products where ca_Title&en_Title&Products_ca&Products_en&number&fenlei Like '%"& key &"%'"'搜索
    Else
    pp="select * from Products  order by time Desc" '全部查看
    End If
end if



Set rs= Server.CreateObject("ADODB.Recordset")
rs.open pp,conn,1,1
rs.PageSize=16  '指定每页显示的记录数
pagecount=rs.PageCount  '用PageCount有多少页
page=int(request.QueryString ("page"))  '接收传过来的page值给于page变量
if page<=0 then page=1   '如果page<=0 则强制page=1
if request.QueryString("page")="" then  '如果接收的page=空 则强制page=1
page=1
end if


on error resume next
rs.AbsolutePage=page  '告诉AbsolutePage翻到第几页了
y=0
for i=1 to rs.PageSize  '循环 从1到指定的页数3
y=y+1
if y=9 then y=1
if rs.EOF then           '如果到了指针尾部，跳出循环
exit for 
end if
'如果没有图片，显示蓝牛网络背景图 
number=rs("number")
id=rs("id")
yifeilei=rs("fenlei")
pic_xiao=rs("pic")
ca_Title=rs("ca_Title")
jicun=rs("jicun")
pic_xiao="admin/up/"&pic_xiao
if jicun>20 then
ff="mm"
else
ff="寸"
end if
	
	
	 %>
	 


	 
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.<%= y %>s" >
	<div class="team-item" >
		<div class="gallery-item"> 
			<a href="casters<%=id%>.html" target="_blank"><img src="<%=pic_xiao%>" border="0" alt="<%= ca_Title %>"   /> </a>
			<div class="overlay" style="color:#FFFFFF";><%=yifeilei%></div>
			
			<p><%=number%></p>
		</div>
	</div>                     
</div> 






                              
 <% 		
rs.movenext
next
%>
                        
						  
						  
						  
						  
						  
						  
						  
								  

  <%
						  						  
if request("v")="jintai"  then'如果是生成静态页面
Call FenYejintai("?id="&id,rs.PageCount,rs.RecordCount,page," ")
end if
if request("v")="jintaidalei"  then  '一级分类分页
fenlei1=request("fenlei")
 Call FenYejintaidalei("?id="&id,rs.PageCount,rs.RecordCount,page,fenlei1)
end if
if request("v")=""  then'asp分页
Call FenYe("?id="&id,rs.PageCount,rs.RecordCount,page," ")
end if

'========================================================asp动态分页=======================================================================
Sub FenYe(url,pageCount,recordCount,curPage,cssstyle)
     lei="72"
     fenlei=fenlei1'传递ID,解决utf-8传
    ' 开始分页容器
    response.Write "<div class='pagination'>"
    ' 设置最多显示的页码数和当前页码前后显示的页码数
    maxDisplayPages = 7
    halfDisplayPages = maxDisplayPages \ 2 ' 计算中间显示的页码数的一半
    
    ' 上一页链接（使用左箭头符号）
    if page>1 then
        response.Write "<a href='products.asp?lei="&lei&"&fenlei="&fenlei&"&jicun="&jicun&"&page="& page-1 &"' title='上一页'>&#9664</a>"
    end if
    ' 页码数字部分
    For i = 1 To pageCount
        ' 如果当前页码是循环中的页码，直接显示数字，不加链接
        If i = page Then
            response.Write "<strong>" & i & "</strong>"
        ' 如果页码是第一个、最后一个，或者在当前页码的前后范围内，显示带链接的页码
        ElseIf i = 1 Or i = pageCount Or (i >= page - halfDisplayPages And i <= page + halfDisplayPages) Then
            response.Write "<a href='products.asp?lei="&lei&"&fenlei="&fenlei&"&jicun="&jicun&"&page="& i &"'>" & i & "</a>"
        ' 如果页码在当前页码的前后范围之外，显示省略号"..."（只显示一次）
        ElseIf i = page - halfDisplayPages - 1 Or i = page + halfDisplayPages + 1 Then
            if (i > 1 And i < pageCount) then ' 确保不会在开头或结尾显示...
                response.Write "<span class='ellipsis'>...</span>"
            end if
        End If
    Next
    ' 下一页链接（使用右箭头符号）
    if Cint(page)<>Cint(pageCount) then
        response.Write "<a href='products.asp?lei="&lei&"&fenlei="&fenlei&"&jicun="&jicun&"&page="& page+1 &"' title='下一页'>&#9654;</a>"
    end if
    ' 结束分页容器
    response.Write "</div>"
end sub 


'===================静态分页===========================================================================================
Sub FenYejintai(url,pageCount,recordCount,curPage,cssstyle)'静态分页

    ' 开始分页容器
    response.Write "<div class='pagination'>"
    ' 设置最多显示的页码数和当前页码前后显示的页码数
    maxDisplayPages = 7
    halfDisplayPages = maxDisplayPages \ 2 ' 计算中间显示的页码数的一半
    
    ' 上一页链接（使用左箭头符号）
    if curpage>1 then
        response.Write "<a href='products" & curpage-1 & ".html' title='上一页'>&#9664;</a>"
    end if
    
    ' 页码数字部分
    For i = 1 To pageCount
        ' 如果当前页码是循环中的页码，直接显示数字，不加链接
        If i = curPage Then
            response.Write "<strong>" & i & "</strong>"
        ' 如果页码是第一个、最后一个，或者在当前页码的前后范围内，显示带链接的页码
        ElseIf i = 1 Or i = pageCount Or (i >= curPage - halfDisplayPages And i <= curPage + halfDisplayPages) Then
            response.Write "<a href='products" & i & ".html'>" & i & "</a>"
        ' 如果页码在当前页码的前后范围之外，显示省略号"..."（只显示一次）
        ElseIf i = curPage - halfDisplayPages - 1 Or i = curPage + halfDisplayPages + 1 Then
            if (i > 1 And i < pageCount) then ' 确保不会在开头或结尾显示...
                response.Write "<span class='ellipsis'>...</span>"
            end if
        End If
    Next
    
    ' 下一页链接（使用右箭头符号）
    if Cint(curPage)<>Cint(pageCount) then
        response.Write "<a href='products" & curpage+1 & ".html' title='下一页'>&#9654;</a>"
    end if
    
    ' 结束分页容器
    response.Write "</div>"
End Sub

'===================静态产品分类分页===========================================================================================
Sub FenYejintaidalei(url,pageCount,recordCount,curPage,fenlei1)'静态分页
    ' 开始分页容器
    response.Write "<div class='pagination'>"
    ' 设置最多显示的页码数和当前页码前后显示的页码数
    maxDisplayPages = 7
    halfDisplayPages = maxDisplayPages \ 2 ' 计算中间显示的页码数的一半
    
    ' 上一页链接（使用左箭头符号）
    if curpage>1 then
        response.Write "<a href='productsfenlei"&fenlei1&"page"& curpage-1 &".html' title='上一页'>&#9664;</a>"
    end if
    
    ' 页码数字部分
    For i = 1 To pageCount
        ' 如果当前页码是循环中的页码，直接显示数字，不加链接
        If i = curPage Then
            response.Write "<strong>" & i & "</strong>"
        ' 如果页码是第一个、最后一个，或者在当前页码的前后范围内，显示带链接的页码
        ElseIf i = 1 Or i = pageCount Or (i >= curPage - halfDisplayPages And i <= curPage + halfDisplayPages) Then
            response.Write "<a href='productsfenlei"&fenlei1&"page"& i &".html'>" & i & "</a>"
        ' 如果页码在当前页码的前后范围之外，显示省略号"..."（只显示一次）
        ElseIf i = curPage - halfDisplayPages - 1 Or i = curPage + halfDisplayPages + 1 Then
            if (i > 1 And i < pageCount) then ' 确保不会在开头或结尾显示...
                response.Write "<span class='ellipsis'>...</span>"
            end if
        End If
    Next
    
    ' 下一页链接（使用右箭头符号）
    if Cint(curPage)<>Cint(pageCount) then
        response.Write "<a href='productsfenlei"&fenlei1&"page"& curpage+1 &".html' title='下一页'>&#9654;</a>"
    end if
    
    ' 结束分页容器
    response.Write "</div>"	
End Sub


%>




  </div> 
<% 
rs.close
set rs=nothing
 %>
	
				
			
			
			
			
			
			
			
			
		
			
			
			
			
			
			
			
			
			
			
		

				
				
				

            </div>
        </div>
    </section>

    <!-- case studies end -->

<!-- #include file="bom.asp" -->