/** * @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.new-list-102 { background: url('../images/bg6.png') center center / cover no-repeat; } div.new-list-102-content { padding-top: 0.2rem; } div.new-list-102-content div.detail-content { float: right; padding-left: 0.4rem; width: calc(100% - 2.08rem); } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content { width: 100%; padding-left: 0; } } div.new-list-102-content div.detail-content ul.detail-list { min-height: 2rem; background-color: #fff; border-radius: 0.08rem; padding: 0 0.4rem; } div.new-list-102-content div.detail-content ul.detail-list li.list-item { *zoom: 1; padding: 0.35rem 0; padding-left: 0.35rem; border-bottom: dotted 2px #707070; } div.new-list-102-content div.detail-content ul.detail-list li.list-item:before, div.new-list-102-content div.detail-content ul.detail-list li.list-item:after { display: table; content: ' '; } div.new-list-102-content div.detail-content ul.detail-list li.list-item:after { clear: both; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item { padding-left: 0; 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; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item:last-child { border-bottom: 0 none; } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-left { float: left; width: 2.4rem; height: 1.8rem; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-left { width: 2.88rem; height: 2.16rem; float: none; display: inline-block; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-left img { display: block; max-width: 100%; height: auto; } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right { float: right; width: calc(100% - 2.4rem); padding-left: 0.48rem; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right { float: none; display: inline-block; padding-left: 0.24rem; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right h2.artile-title { font-size: 0.2rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #0355c9; margin-bottom: 0.1rem; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right h2.artile-title { font-size: 0.28rem; line-height: 1.5; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content { height: 1.44rem; overflow-y: hidden; transition: height 0.5s; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content { height: auto; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content.unfold { height: 3rem; transition: height 0.5s; } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content p { margin-bottom: 0.06rem; font-size: 0.14rem !important; color: #333333; font-family: Microsoft YaHei !important; font-weight: 400; line-height: 0.19rem; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content p { font-size: 0.24rem; line-height: 1.5; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right div.article-content p::before { content: ''; display: inline-block; width: 0.08rem; height: 0.08rem; border: 1px solid #333; vertical-align: middle; margin-right: 0.05rem; } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right p.more-btn { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #003b90; cursor: pointer; display: none; margin-top: 0.1rem; } @media screen and (max-width: 1024px) { div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right p.more-btn { display: none !important; } } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right p.more-btn.up i.icon { transform: rotate(180deg); transition: transform 0.5s; vertical-align: text-top; } div.new-list-102-content div.detail-content ul.detail-list li.list-item div.item-right p.more-btn i.icon { display: inline-block; font-weight: bold; vertical-align: middle; margin-left: 0.03rem; line-height: 1; transition: transform 0.5s; }