/* 导航效果 */ nav.navbar.bootsnav { margin-bottom: 0; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; background-color: rgba(255, 255, 255, 0); /* 初始背景透明 */ border: none; border-bottom: solid 0px #e0e0e0; z-index: 9; transition: background-color 0.3s ease; /* 添加过渡效果 */ } nav.navbar.bootsnav:hover { background-color: rgba(255, 255, 255, 1) !important; /* 鼠标悬停时背景颜色为白色,使用 !important 确保优先级 */ } /* 电话效果 */ /* 电脑端 */ @media screen and (min-width: 769px) { #r-dh {padding-top:8px;} #r-dh .btn_lx{color:#ff9600;font-size:19px;text-decoration:none;font-weight:400;width:155px;height:35px; letter-spacing: -1px; /* 减小字间距 */} #r-dh .btn_lx:hover{color:#ff9600;text-decoration:none;} #r-dh .btn_lx i{padding-right:6px;font-size:28px;font-weight:700;} #r-dh a{color:#ff9600;text-decoration:none;} #r-dh a:hover{color:#ff9600;text-decoration:none;} } /* 手机端 */ @media screen and (max-width: 768px) { #r-dh {padding-top:8px;} #r-dh .btn_lx{color:#ff9600;font-size:14px;font-weight:400;width:155px;height:40px;} #r-dh .btn_lx:hover{color:#ff9600;text-decoration:none;} #r-dh .btn_lx i{padding-right:6px;font-size:20px;font-weight:700;padding-left:20px;} #r-dh a{color:#ff9600;text-decoration:none;} #r-dh a:hover{color:#ff9600;text-decoration:none;} } /* Banner 效果 */ .carousel-inner > .item > img { width: 100%; /* 图片宽度为容器宽度的100% */ height: auto; /* 图片高度自动调整 */ } /* 去除所有箭头和图片侧边的悬停灰色效果 */ .carousel-control.left, .carousel-control.right { background-image: none; /* 去除背景渐变效果 */ } .carousel-control { background-color: transparent; /* 清除背景色 */ opacity: 1; /* 设置透明度为完全不透明 */ } /* 去除悬停时的样式 */ .carousel-control:hover, .carousel-control:focus { color: inherit; /* 继承原本的文字颜色,或设为你希望的颜色 */ background-color: transparent; /* 确保悬停背景透明 */ opacity: 1; /* 去除悬停时的透明度变化 */ } #image1920 { display: none; } #image2560 { display: none; } @media screen and (max-width: 1920px) { #image1920 { display: block; } } @media screen and (min-width: 1921px) { #image2560 { display: block; } } /* 产品下拉 */ .title-pro-juli1 {margin:0;padding:0;padding-top:65px;padding-bottom:0;font-size:22px;font-weight:600;} .title-pro-juli {margin:0;padding:0;padding-top:0;padding-bottom:6px;font-size:16px;font-weight:600;} .menu-col li{float:left;padding-top:6px;} #xialali{margin:0;padding:0;} #xiala-a{margin:0;padding:0;padding-top:5px;padding-bottom:5px;font-size:14px;font-weight:400;color:#787870;} /* 方案下拉 */ #font14{font-size:14px} #li-menu-new-w-add{width:50%;float:left;} /* 首页产品tabs选项卡 效果 */ .nav-tabs { border-bottom: none; /* 去掉底部实线 */ } .tab-pane img { height: auto; } @media (max-width: 767px) { .nav-tabs-responsive .nav-tabs > li { width: 50%; float: left; } .nav-tabs li{padding:6px;} .nav-tabs li a { font-size: 14px; } } @media (min-width: 768px) { .nav-tabs { display: flex; justify-content: center; /* 水平居中对齐 电脑端一行显示 */ } .nav-tabs li{padding:10px;} .nav-tabs li a { font-size: 18px; } .nav-tabs-responsive .nav-tabs > li { width: auto; float: none; } } /* 隐藏横向滚动条 */ body { overflow-x: hidden; } .swiper-slide { text-align: center; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .cp-wz-h{position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(241, 241, 241, 0.5); color: #585a58; padding: 5px; text-align: center;padding-top:18px;padding-bottom:18px;} .cp-wz-h a{text-decoration:none;color: #585a58;transition: color 0.3s; /* 添加过渡效果 */} .cp-wz-h a:hover{text-decoration:none;color: #white;} .swiper-slide:hover .cp-wz-h { background-color: #1c95d9; color: white; /* 文字颜色改为白色 */ } .swiper-slide:hover .cp-wz-h a { color: white; /* 鼠标悬停时超链接文字颜色变为白色 */ } /* 手机端 产品选项卡 内容 效果 */ .m-cp-wz-h{width: 100%; background-color: rgba(241, 241, 241, 0.5); color: #585a58; padding: 5px; text-align: center;padding-top:18px;padding-bottom:18px;margin-top:-50px;} .m-cp-wz-h a{text-decoration:none;color: #585a58;transition: color 0.3s; /* 添加过渡效果 */} .m-cp-wz-h a:hover{text-decoration:none;color: #white;} .m-sy-cp-list:hover .m-cp-wz-h { background-color: #1c95d9; color: white; /* 文字颜色改为白色 */ } .m-sy-cp-list:hover .m-cp-wz-h a { color: white; /* 鼠标悬停时超链接文字颜色变为白色 */ } /* 首页方案 效果 */ .fangan-wz-title1{ display: block; position: absolute; left: 10%; top: 5%; height: 100%; z-index:999; background:#3c474f; color:#ffffff; width:150px; height:30px; line-height:30px; font-size:15px; border-radius:8px; } .fangan-wz-title1 a{text-decoration:none;color:#ffffff;} .fangan-wz-title1 a:hover{text-decoration:none;color:#ffffff;} .fangan-wz-title021{ display: block; position: absolute; left: 10%; top: 5%; width: 100%; height: 100%; z-index:999; background:#3c474f; color:#ffffff; width:150px; height:30px; line-height:30px; font-size:15px; border-radius:8px; } .fangan-wz-title021 a{text-decoration:none;color:#ffffff;} .fangan-wz-title021 a:hover{text-decoration:none;color:#ffffff;} /* 首页新闻图片 大小 效果 */ .new-img { max-height: 335px; } /* 产品中心页面 面包屑导航 效果 */ .fangan-daohang-style82{ height:82px;line-height:82px; border-bottom: 1px solid #e5e5e5;} .fangan-daohang-title16 {font-size:16px;color:#666666;} .fangan-daohang-title16 a{text-decoration:none;color:#666666;} .fangan-daohang-title16 a:hover{text-decoration:underline;color:#666666;} .fangan-daohang-title16 i{font-size:16px;color:#666666;} /*产品中心 效果*/ .cp-page-bg{background:#f5f5f5;} .cp-left-title { background-image: url('../images/cp-left-title.jpg'); background-size: cover; background-repeat: no-repeat; height: 137px; text-align: center; border: 1px solid #e4e4e4; /* 添加1像素边框,颜色为#e4e4e4 */ box-shadow: 0 0 5px #e4e4e4; /* 设置阴影颜色为#e4e4e4 */ margin-bottom:20px; } .cp-left-title h2 { color: #000000; font-size: 28px; font-weight: 600; margin-top: 30px; margin-bottom: 0; } .cp-left-title p { color: #000000; font-size: 14px; font-weight: 400; margin-top: 2px; } .cp-left-big-title { background-color: #deeefe; /* 设置背景颜色为 #deeefe */ height: 65px; /* 设置高度为 55px */ padding-left: 25px; /* 左侧留出空间给文字图标 */ line-height: 65px; /* 垂直居中文字 */ font-size: 18px; /* 设置文字大小为 16px */ font-weight:400; color: #2a2d30; /* 设置文字颜色为 #2a2d30 */ text-align: left; /* 文字左对齐 */ border-radius: 5px; /* 设置圆角半径为 5px */ } .cp-left-big-title::before { content: "\e72d"; /* Unicode 文字图标 */ font-family: "iconfont"; /* 使用 emoji 字体 */ margin-right: 8px; /* 与文字之间的间距 */ color:#0a59ff; font-weight:400; font-size:25px; } .cp-left-big-title a{text-decoration:none;color: #2a2d30;} .cp-left-big-title a:hover{text-decoration:underline;color: #2a2d30;} .cp-left-small { background-color: #fafafa; height: 48px; line-height:48px; } .cp-left-small-title { font-size: 16px; color: #3f3f3f; display: inline-block; /* 将标题和图标设置为内联显示 */ padding-left:12px; font-weight:400; } .cp-left-small-title-icon { color: #bfbfbf; margin-right: 15px; /* 可选:调整图标和标题之间的间距 */ vertical-align: middle; /* 使图标在垂直方向上与文本对齐 */ } .cp-left-small-title-icon i{ font-size:16px;font-weight:400; } .cp-left-small-title a{ text-decoration:none;color: #3f3f3f; } .cp-left-small-title a:hover{ text-decoration:underline;color: #3f3f3f; } .cp-left-small-kong{background:#fafafa;height:10px;} /* 定义自定义样式 */ .cp-right-grid { height: 42px; padding: 10px; /* 可选:根据需要调整内边距 */ display: flex; /* 使用 flexbox 布局 */ align-items: center; /* 垂直居中 */ } .cp-right-divider { width: 4px; height: 27px; background-color: #349fdb; /* 背景颜色为 #349fdb */ margin-right: 15px; /* 可选:根据需要调整竖条与标题之间的间距 */ } .cp-right-title { font-size: 22px; /* 标题大小为 22px */ font-weight: bold; /* 加粗 */ color: #000000; /* 颜色为黑色 */ padding-top:10px; } /* 定义自定义样式 */ .cp-right-list-grid { position: relative; /* 相对定位 */ display: flex; /* 使用 Flex 布局 */ flex-direction: column; /* 垂直方向布局 */ justify-content: center; /* 主轴居中对齐 */ align-items: center; /* 交叉轴居中对齐 */ background-color: #ffffff; /* 默认白色背景 */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */ padding: 10px; transition: background-color 0.3s ease; /* 添加过渡效果 */ z-index: 1; /* 确保内容位于覆盖层上方 */ margin-top:20px; margin-bottom:20px; } .cp-right-list-grid:hover { background-color: rgba(63, 183, 250, 0.2); /* 悬停时的覆盖颜色 */ height: auto !important; /* 自动高度 */ padding: 10px; /* 保持原始内边距 */ } .cp-right-list-grid:hover .cp-right-list-title, .cp-right-list-grid:hover .cp-right-list-description { color: #ffffff; /* 悬停时标题和描述变为白色 */ } .cp-right-list-title { font-size: 18px; /* 标题大小为 18px */ color: #000000; /* 标题颜色为黑色 */ font-weight: bold; /* 加粗 */ margin-bottom: 10px; /* 底部边距 */ transition: color 0.3s ease; /* 添加过渡效果 */ position: relative; z-index: 1; /* 确保标题在覆盖层上方 */ margin:0; padding:0; } .cp-right-list-description { font-size: 14px; /* 描述大小为 14px */ color: #666666; /* 描述颜色为灰色 */ margin-bottom: 20px; /* 底部边距 */ transition: color 0.3s ease; /* 添加过渡效果 */ position: relative; z-index: 1; /* 确保描述在覆盖层上方 */ margin:0; padding:0; padding-bottom:12px; } .cp-right-list-button { border: 1px solid #ffffff; /* 1像素白色边框 */ border-radius: 50px; /* 圆角矩形 */ background-color: transparent; /* 背景透明 */ padding: 10px 20px; /* 内边距 */ font-size: 15px; /* 文字大小为 16px */ color: #ffffff; /* 文字颜色为白色 */ display: none; /* 默认隐藏 */ position: relative; z-index: 1; /* 确保按钮在覆盖层上方 */ } .cp-right-list-button:hover { background-color: #136593; /* 悬停时背景变为白色 */ color: #ffffff; /* 文字颜色变为覆盖颜色 */ transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */ border: 1px solid #136593; /* 1像素白色边框 */ } .cp-right-list-grid:hover .cp-right-list-button { display: inline-block; /* 悬停时显示 */ } .cp-right-list-icon { color: #ffffff; /* 文字图标颜色为白色 */ margin-left: 5px; /* 左边距 */ } .cp-right-list-icon i{font-size:20px} .cp-right-list-icon:hover { color: #ffffff; /* 悬停时颜色变为覆盖颜色 */ transition: color 0.3s ease; /* 添加过渡效果 */ } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(63, 183, 250, 0.2); border-radius: 10px; transition: background-color 0.3s ease; pointer-events: none; /* 让覆盖层不影响鼠标事件,确保可以点击底层内容 */ z-index: 0; /* 覆盖层位于所有内容下方 */ opacity: 0; /* 默认隐藏 */ } .cp-right-list-grid:hover .overlay { background-color: rgba(63, 183, 250, 0.5); /* 悬停时的覆盖颜色 */ opacity: 1; /* 悬停时显示 */ } .cp-right-list-title, .cp-right-list-description, .cp-right-list-button { position: relative; /* 相对定位 */ z-index: 1; /* 确保位于顶层 */ text-align: center; /* 居中对齐 */ } .cp-right-list-grid:hover .cp-right-list-title, .cp-right-list-grid:hover .cp-right-list-description, .cp-right-list-grid:hover .cp-right-list-button { top: 50%; /* 悬停时上边距为父元素的50% */ left: 0; /* 悬停时左边距为父元素的50% */ z-index: 2; /* 悬停时位于覆盖层上方 */ } .contentzw { display: none; /* 默认隐藏 */ } .cp-right-list-grid:hover .contentzw { display: block; /* 悬停时显示 */ } .cp-right-list-grid .content a{text-decoration:none;} /* 电脑端样式 */ @media (min-width: 768px) { .cp-right-list-grid:hover .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } } /* 手机端样式 */ @media (max-width: 767px) { .cp-right-list-grid:hover .content { } } .sy-al-p-tx{ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分以省略号表示 */ }