*{ 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; color: gray; /* 多行文本*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; /* 首行缩进*/ text-indent: 2em; } .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 5px; justify-content: space-between; flex-wrap: wrap; } @media screen and (min-width: 1024px) { .footer-list{ padding: 15px 0; } } .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{ display: flex; justify-content: center; align-items: center; letter-spacing: 0.5rem; position: relative; cursor: default; } .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; } .mark{ color: #343434; font-weight: bold; } .mark-gold{ color: #f0ad4e; font-weight: bold; } .mark-gold:hover{ color: #f0ad4e; font-weight: bold; text-decoration: underline; } .text-b{ font-weight: bold; margin: 0 10px; } .text-m{ margin-left: 20px; } .noScroll::-webkit-scrollbar { display: none; /* Chrome Safari */ } .noScroll { scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ } /*css 变量,根据媒体查询得出 */ :root { --primary-color: #3f51b5; } .custom-btn { width: auto; color: #fff; border-radius: 5px; padding: 0 2rem; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; } /* 3 */ .btn-3 { background: rgb(0,172,238); background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; } .btn-3 span { position: relative; display: block; width: 100%; height: 100%; } .btn-3:before, .btn-3:after { position: absolute; content: ""; right: 0; top: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-3:before { height: 0%; width: 2px; } .btn-3:after { width: 0%; height: 2px; } .btn-3:hover{ background: transparent; box-shadow: none; } .btn-3:hover:before { height: 100%; } .btn-3:hover:after { width: 100%; } .btn-3 span:hover{ color: rgba(2,126,251,1); } .btn-3 span:before, .btn-3 span:after { position: absolute; content: ""; left: 0; bottom: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-3 span:before { width: 2px; height: 0%; } .btn-3 span:after { width: 0%; height: 2px; } .btn-3 span:hover:before { height: 100%; } .btn-3 span:hover:after { width: 100%; } /* 13 */ .btn-13 { background-color: #89d8d3; background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); border: none; z-index: 1; } .btn-13:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; border-radius: 5px; background-color: #4dccc6; background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; transition: all 0.3s ease; } .btn-13:hover { color: #fff; } .btn-13:hover:after { top: 0; height: 100%; } .btn-13:active { top: 2px; } .manager-con{ width: 100%; height: calc(100% - 60px); } .manager-title{ width: calc(100% - 40px); height: 50px; display: flex; align-items: center; border-radius: 6px; background-color: #fff; margin: 10px auto 0; padding: 1rem; box-sizing: border-box; font-size: 1.5rem; } .manager-show{ width: calc(100% - 40px); margin: 20px auto; height: calc(100% - 40px); overflow: auto; background-color: #fff; border-radius: 6px; position: relative; position: relative; }