*{ margin: 0; padding: 0; } .noScroll::-webkit-scrollbar { display: none; /* Chrome Safari */ } .noScroll { scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ } .header{ width: 100%; height: 110px; position: fixed; top: 0; left: 0; z-index: 999; /*mix-blend-mode: difference;*/ background-color: #ffffffad; } .content{ width: 100%; position: relative; /*top: 110px;*/ } .conBox{ width: 1320px; margin: 0 auto; } .dropMap{ position: absolute; top: 100%; background-color: #fff; box-shadow: 1px 0 4px #c2bfbf; color: black; } .drop-default{ width: 740px; height: 340px; display: flex; } .drop-default .drop-menus{ width: 250px; height: 100%; /*border-right: 1px solid darkgray;*/ padding: 5px; box-sizing: border-box; box-shadow: 1px 0 1px gray; } .drop-default .drop-menus .menu{ width: 100%; height: 50px; display: flex; align-items: center; padding: 0 5px; font-size: 1.1em; cursor: default; } .drop-default .drop-menus .now { background-color: #b9b7b7; color: white; } .drop-default .drop-view{ width: 540px; box-sizing: border-box; padding: 5px; overflow: auto; cursor: default; } .drop-default .drop-view .sub-item{ width: 100%; height: 110px; display: flex; align-items: center; } .drop-default .drop-view .now-sub{ background-color: #f3f3f3; } .drop-default .drop-view .sub-item .con{ width: 100%; height: 90px; display: flex; } .drop-default .drop-view .sub-item .img-box{ display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; box-sizing: border-box; padding: 5px; border-radius: 3px; box-shadow: 1px 1px 3px beige; flex-shrink: 0; } .img-box img{ display: block; max-width: 100%; max-height: 100%; } .drop-default .drop-view .sub-item .text-box{ width: 420px; } .drop-default .drop-view .sub-item .text-box .name{ } .drop-default .drop-view .sub-item .text-box .remark{ font-size: 0.9em; } .blurImg{ width: 100%; height: 100%; display: block; z-index: 1; position: absolute; left: 0; top: 0; } .blur{ -webkit-filter: blur(5px); /* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .footer{ box-shadow: 1px 1px 3px black; margin-top: 20px; } .footer-list{ display: flex; padding: 15px 0; justify-content: space-between; } .footer-list .footerItem{ /*width: calc(1320px / 5);*/ } .footer-list .footerItem .title{ font-size: 1.4em; color: black; padding-top: 10px; padding-bottom: 20px; } .footer-list .footerItem .footer-list-item{ display: block; height: 35px; } .footer-list .footerItem .footer-list-item:hover{ color: #1e45e7; } .big-title{ height: 80px; font-size: 2.5em; display: flex; justify-content: center; align-items: center; margin-top: 70px; margin-bottom: 70px; letter-spacing: 0.5rem; position: relative; } .big-title .hr{ width: 80px; height: 4px; background-color: orangered; position: absolute; bottom: 5px; } /** 图片框,可以加上动态效果 */ .imgBox{ display: block; position: relative; overflow: hidden; } .imgBox > img{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .5s; }