/** * @description: 清除浮动 * @Author: * @param {type} * @return: */ /** * @description: 响应式图片 * @Author: * @param {type} * @return: */ /** * @description: 横向排列,垂直居中布局 * @Author: * @param {type} * @return: */ /** * @description: 单行文本超出隐藏 * @Author: * @param {type} * @return: */ /** * @description: 多行文本超出隐藏 * @Author: * @param {Number} num 最多要显示几行 * @return: */ /** * @description: flex 垂直居中布局 * @Author: * @param {String} cposition 水平排列方式 * @return: */ /** * @description: 设置元素尺寸 * @Author: * @param {Number} w 宽度 * @param {Number} h 高度 * @return: */ /** * @description: 2x的雪碧图缩放 * @Author: * @param {Number} spriteW 雪碧图原始宽度 * @param {Number} spriteH 雪碧图原始高度 * @param {Number} bgOffsetX 背景定位原始X轴偏移量 * @param {Number} bgOffsetY 背景定位原始Y轴偏移量 * @return: */ /** * @description: 设置字体 * @Author: * @param {type} * @return: */ /** * @description: 修改滚动条样式 * @Author: * @param {String} scrollW 滚动条宽度 * @param {String} scrollC 滚动条背景色 * @param {String} trackP 滑块背景色 * @return: */ /** * @description: 设置背景图 * @Author: * @param {String} url 图片路径 * @return: */ /** * @description: 修改输入框占位符的字体颜色 * @Author: * @param {type} * @return: */ /** * @description: 禁止选中内容 * @Author: * @param {type} * @return: */ /** * @description: 鼠标移入图片放大效果 * @Author: * @param {type} * @return: */ /** * @description: 铺满整个容器的绝对定位 * @Author: * @param {type} * @return: */ /** * @description: 绝对定位水平垂直居中 * @Author: * @param {type} * @return: */ /** * @description: 统一容器,视项目不同,数值有所不同 * @Author: * @param {type} * @return: */ /** * @description: 替代flex的inline-block * @Author: * @param {type} * @return: */ /** * @description: 首页栏目标题样式 * @Author: * @param {type} * @return: */ /** * @description: 两端对齐辅助元素 * @Author: * @param {type} * @return: */ div.fwdt div.banner { height: auto; } div.service { display: none; } div.service.active { display: block; } div.service div.service-list { min-height: 12.15rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; text-align: center; padding-top: 1rem; } div.service div.service-list ul.list { padding-top: 0.57rem; font-size: 0; text-align: left; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list { padding: 0 0.4rem; padding-top: 0.5rem; } } div.service div.service-list ul.list li.list-item { position: relative; display: inline-block; width: 5.84rem; height: 4.38rem; margin-right: 0.32rem; margin-bottom: 0.3rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item { margin-right: 0; width: 100%; height: auto; } } div.service div.service-list ul.list li.list-item:nth-child(2n) { margin-right: 0; } div.service div.service-list ul.list li.list-item div.item-img img { display: block; max-width: 100%; height: auto; width: 100%; } div.service div.service-list ul.list li.list-item div.shadow-bg { padding-top: 0.2rem; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 78, 133, 0.6); } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon { margin: 0 auto; width: 1.4rem; height: 1.35rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon { width: 1.68rem; height: 1.62rem; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-1 { background: url('../images/danye/smart1-nav-icon1.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-2 { background: url('../images/danye/smart1-nav-icon2.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-3 { background: url('../images/danye/smart1-nav-icon3.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-4 { background: url('../images/danye/smart1-nav-icon4.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg h1.nav-name { margin-top: 0.06rem; font-size: 0.3rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.4rem; color: #ffffff; text-align: center; letter-spacing: 2px; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg h1.nav-name { font-size: 0.36rem; line-height: 0.48rem; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content { width: 3.33rem; margin: 0 auto; margin-top: 0.36rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content { width: 70%; text-align: center; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p { display: inline-block; width: 50%; font-size: 0.24rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.31rem; color: #ffffff; margin-bottom: 0.16rem; } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p:nth-child(2n) { text-align: right; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p { font-size: 0.3rem; margin-right: 0 !important; width: 50%; margin-bottom: 0.3rem; } } @media screen and (max-width: 1460px) { } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p:nth-child(2n) { margin-right: 0; } div.service div.safe-list { text-align: center; min-height: 7.45rem; padding-top: 1rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; } @media screen and (max-width: 1024px) { div.service div.safe-list { padding-top: 0.5rem; } } div.service div.safe-list ul.list { padding-top: 0.49rem; font-size: 0; text-align: left; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list { padding: 0 0.4rem; padding-top: 0.5rem; } } div.service div.safe-list ul.list li.list-item { display: inline-block; width: 3.79rem; margin-right: 0.31rem; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item { margin-right: 0; width: 100%; margin-bottom: 0.3rem; } } div.service div.safe-list ul.list li.list-item:nth-child(3n) { margin-right: 0; } div.service div.safe-list ul.list li.list-item div.item-img { height: 2.84rem; overflow: hidden; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-img { height: auto; } } div.service div.safe-list ul.list li.list-item div.item-img:hover img { transform: scale(1.2); transition: transform 0.2s; } div.service div.safe-list ul.list li.list-item div.item-img img { display: block; max-width: 100%; height: auto; transition: transform 0.2s; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-img img { width: 100%; } } div.service div.safe-list ul.list li.list-item div.item-desc { padding-top: 0.18rem; padding-bottom: 0.4rem; background-color: #fff; letter-spacing: 0.02rem; } div.service div.safe-list ul.list li.list-item div.item-desc h1.title { color: #336cba; text-align: center; margin-bottom: 0.25rem; font-size: 0.36rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.48rem; } div.service div.safe-list ul.list li.list-item div.item-desc p { text-align: center; font-size: 0.22rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.34rem; color: #333333; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-desc p { font-size: 0.28rem; line-height: 0.36rem; } } div.service div.know-list { padding-top: 1rem; text-align: center; min-height: 9.19rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; } @media screen and (max-width: 1024px) { div.service div.know-list { padding-top: 0.5rem; min-height: auto; } } div.service div.know-list div.list { text-align: left; margin-top: 0.28rem; min-height: 6.23rem; background: url('../images/danye/smart3-bg.png') center center / cover no-repeat; background-size: 8.02rem auto; padding-top: 1.03rem; } @media screen and (max-width: 1024px) { div.service div.know-list div.list { background: none; padding-top: 0.5rem; padding: 0.5rem 0.4rem 0; margin-top: 0; } } div.service div.know-list div.list div.item { width: 1.65rem; text-align: center; float: left; } @media screen and (max-width: 1024px) { div.service div.know-list div.list div.item { width: 2.65rem; } } div.service div.know-list div.list div.item-right { float: right; } div.service div.know-list div.list div.item h1.title { font-size: 0.3rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.4rem; color: #4d4d4d; letter-spacing: 2px; } div.service div.know-list div.list div.item ul.list { margin-top: 0.3rem; } div.service div.know-list div.list div.item ul.list li.list-item { width: 100%; height: 0.61rem; background: #003b90; font-size: 0.2rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.61rem; color: #ffffff; margin-bottom: 0.25rem; letter-spacing: 2px; } @media screen and (max-width: 1024px) { div.service div.know-list div.list div.item ul.list li.list-item { height: 0.7rem; font-size: 0.28rem; line-height: 0.7rem; } } div.works-case { min-height: 7.89rem; background: url('../images/danye/border-bg.PNG') center center / cover no-repeat; padding-top: 0.69rem; } @media screen and (max-width: 1024px) { div.works-case { min-height: inherit; padding-bottom: 0.69rem; } } div.works-list div.tab-list { margin-bottom: 0.4rem; } div.works-list div.tab-list ul.list { padding-top: 0.79rem; white-space: nowrap; } @media screen and (max-width: 1024px) { div.works-list div.tab-list ul.list { display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: -ms-flex; display: -webkit-flex; display: flex; -moz-box-pack: space-between; -webkit-box-pack: space-between; -ms-flex-pack: space-between; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0 0.2rem; padding-top: 0.8rem; } } div.works-list div.tab-list ul.list li.list-item { display: inline-block; width: 2.05rem; height: 0.83rem; background: url('../images/danye/btn-bg-2-normal.png') center center / cover no-repeat; font-size: 0.26rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.83rem; color: #ffffff; text-align: center; margin-right: 1.23rem; letter-spacing: 2px; cursor: pointer; transition: all 0.2s; } @media screen and (max-width: 1024px) { div.works-list div.tab-list ul.list li.list-item { margin-right: 0; width: 1.64rem; height: 0.664rem; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: -ms-flex; display: -webkit-flex; display: flex; -moz-box-pack: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -o-justify-content: center; justify-content: center; -moz-box-align: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; } } div.works-list div.tab-list ul.list li.list-item span { line-height: normal; } div.works-list div.tab-list ul.list li.list-item:last-child { margin-right: 0; } div.works-list div.tab-list ul.list li.list-item:hover, div.works-list div.tab-list ul.list li.list-item.active { background: url('../images/danye/btn-bg-2.png') center center / cover no-repeat; transition: all 0.2s; } div.works-list div.swiper-container { height: 3.41rem; } div.works-list div.swiper-container.key { display: none; } div.works-list div.swiper-container.key.active { display: block; } div.works-list div.swiper-container div.swiper-slide div.img-wrapper { position: relative; width: 3.86rem; height: 2.89rem; } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper { width: auto; height: auto; } } div.works-list div.swiper-container div.swiper-slide div.img-wrapper h1.img-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; bottom: 0; left: 0; right: 0; height: 0.63rem; font-size: 0.22rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.63rem; text-align: center; color: #ffffff; letter-spacing: 1px; background-color: rgba(0, 0, 0, 0.6); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper h1.img-title { font-size: 0.24rem; } } div.works-list div.swiper-container div.swiper-slide div.img-wrapper img { display: block; max-width: 100%; height: auto; } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper img { width: 95%; margin: 0 auto; } } div.works-list div.tab-list ul.list li.list-item h3 { font-size: 0.26rem; font-weight: 600; }