/** * @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.aside-right { cursor: pointer; position: fixed; top: 65%; right: 0.1rem; z-index: 10000001; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; margin-top: -1rem; } @media screen and (max-width: 1024px) { div.aside-right { display: none; } } div.aside-right.active { right: 0.1rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } div.aside-right i::before { content: '<'; font-weight: bold; color: #fff; font-size: 0.3rem; display: inline-block; font-family: cursive; } div.aside-right div.aside-to-left { position: absolute; right: 100%; top: 50%; margin-top: -0.75rem; width: 0.25rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 0.08rem; background-color: #0033b2; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } div.aside-right div.aside-to-left.hide { opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } div.aside-right ul.aside-list { position: relative; } div.aside-right ul.aside-list .mobile { color: #333; } div.aside-right ul.aside-list div.aside-top-right { width: 100%; height: 25px; border-radius: 3px; background-color: #0033b2; text-align: center; line-height: 25px; color: #fff; cursor: pointer; } div.aside-right ul.aside-list div.aside-top-right i::before { content: '>'; font-size: 0.2rem; } div.aside-right ul.aside-list li { position: relative; } div.aside-right ul.aside-list li:hover a { color: #fff; } div.aside-right ul.aside-list li:hover div.aside-item { transition: all 0.5s; display: block; } div.aside-right ul.aside-list li div.aside-item { position: absolute; top: 0; right: 0.65rem; display: none; transition: all 0.5s; background-color: #0033b2; border-radius: 4px; } div.aside-right ul.aside-list li div.aside-item.text { top: 50%; margin-top: -0.2rem; width: 1.6rem; text-align: center; padding: 0.1rem; color: #fff; font-size: 0.16rem; line-height: 1.5; } div.aside-right ul.aside-list li div.aside-item.pic { width: 1.5rem; height: 1.5rem; background-color: #0033b2; padding: 5px; } div.aside-right ul.aside-list li div.aside-item.pic img { display: block; width: 100%; height: auto; } div.aside-right ul.aside-list li, div.aside-right ul.aside-list div.to-top { width: 0.58rem; height: 0.58rem; line-height: 0.58rem; background-color: #0033b2; margin: 1px 0; border-radius: 0.1rem; text-align: center; } div.aside-right ul.aside-list li img, div.aside-right ul.aside-list div.to-top img { display: inline-block; width: 0.3rem; height: 0.3rem; vertical-align: middle; } .bottom-window { display: none; } @media screen and (max-width: 1024px) { .bottom-window { display: block; width: 100%; height: 1.1rem; position: fixed; left: 0; bottom: 0; z-index: 90; } .bottom-window ul { display: flex; height: 1.1rem; align-items: center; justify-content: space-between; background-color: #0033b2; } .bottom-window ul li { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; border-right: 1px solid #fff; color: #fff; font-size: 0.28rem; text-align: center; } .bottom-window ul li img { width: 0.4rem; height: auto; } .bottom-window ul li span { display: inline-block; width: 100%; color: #fff; margin-top: 0.1rem; } .bottom-window ul li:last-child { border-right: 0; } .bottom-window ul li:nth-child(2) img { margin-top: 0.05rem; margin-bottom: 0.05rem; } }