/** * @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: */ .public-nav { height: 1.2rem; margin-top: -0.6rem; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16); border-radius: 8px; background: #fff; position: relative; } .public-nav ul { overflow: hidden; height: 100%; border-radius: 8px; } .public-nav ul li { width: 25%; border-right: 1px solid rgba(112, 112, 112, 0.16); height: 100%; text-align: center; float: left; transition: border 0.2s; cursor: pointer; border-bottom: 4px solid #fff; } .public-nav ul li:hover, .public-nav ul li.active { border-bottom: 4px solid #003b90; transition: border 0.2s; } .public-nav ul li:last-child { border-right: 0; } .public-nav ul li img { display: inline-block; margin-top: 0.24rem; margin-bottom: 0.1rem; max-width: 100%; height: auto; max-height: 0.3rem; } .public-nav ul li span { display: block; font-size: 0.18rem; color: #000; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 1024px) { .public-nav ul li span { font-size: 0.3rem; } } .public-nav ul li a { display: block; height: 100%; } .left-bar { width: 2.08rem; float: left; } @media screen and (max-width: 1024px) { .left-bar { width: 100%; } } .left-bar .data-list { overflow: hidden; padding-top: 0.6rem; padding-bottom: 0.24rem; } @media screen and (max-width: 1024px) { .left-bar .data-list { padding-top: 0.3rem; } } .left-bar .data-list li { width: 2.08rem; height: 0.82rem; line-height: 0.82rem; background: url(../images/b2.png) center center no-repeat; background-size: 100% 100%; text-align: center; font-weight: bold; color: #fff; font-size: 0.18rem; margin-bottom: 0.6rem; } .left-bar .data-list li a { display: block; width: 100%; height: 100%; } @media screen and (max-width: 1024px) { .left-bar .data-list li { width: 46%; float: left; margin: 0.1rem 2%; } } .left-bar .data-list li:nth-child(3n) { margin-right: 0; } .left-bar .data-list li:hover, .left-bar .data-list li.active { background-image: url(../images/b1.png); transition: all 0.3s; } .left-bar .data-list li:hover a, .left-bar .data-list li.active a { color: #fff; } div.list-search { height: 0.44rem; margin: 0.2rem 0 0.1rem; font-size: 0; } @media screen and (max-width: 1024px) { div.list-search { height: 0.8rem; } } div.list-search input { width: calc(100% - 6.66%); background-color: #fff; display: inline-block; height: 100%; line-height: 0.44rem; border-top-left-radius: 0.08rem; border-bottom-left-radius: 0.08rem; padding-left: 0.22rem; font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #c7c7c7; border: 0 none; outline: 0 none; vertical-align: top; } @media screen and (max-width: 1024px) { div.list-search input { width: 80%; font-size: 0.28rem; line-height: 0.8rem; } } div.list-search span.search-btn { display: inline-block; height: 100%; width: 6.66%; line-height: 0.44rem; background-color: #868991; border-top-right-radius: 0.16rem; border-bottom-right-radius: 0.16rem; text-align: center; font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; cursor: pointer; } @media screen and (max-width: 1024px) { div.list-search span.search-btn { width: 20%; font-size: 0.28rem; line-height: 0.8rem; } }