.head{ ul{ position: relative; .to_li { position: absolute; display: block; width: 40px; height: 5px; background: #C70009; border-radius: 49px 21px 0px 0px; bottom: -34px; left: 22.5%; } } } // 分类区域 .fen{ width: 81.25rem; margin: 0 auto; // title区域 .title{ // float: left; font-size: 30px; font-family: Source Han Sans, Source Han Sans; font-weight: 900; color: #3D3D3D; line-height: 56px; display: flex; align-items: center; margin-top: 46px; &::before{ content: ""; display: inline-block; width: 6px; height: 56px; margin-right: 20px; background-color: #C70009; } } // 下方分类框 .type{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: space-between; div{ width: 22%; // height: 122.66px; margin-top: 42px; border-radius: 10px 10px 10px 10px; border: 1px solid rgba(30,43,95,0.2); transition: all linear 500ms; // box-shadow: 0px 0px 4px 14px gray; p{ text-align: center; &:first-child{ padding-top: 25px; font-size: 24px; font-family: Source Han Sans, Source Han Sans; font-weight: 900; color: #000000; line-height: 35px; } &:last-child{ padding-bottom: 34px; font-size: 16px; font-family: Source Han Sans, Source Han Sans; font-weight: 500; color: #000000; line-height: 23px; margin-top: 8px; } } &:hover{ background: url(../../imgs/product/bg1.jpg) center center no-repeat,rgba(21,31,62,0.74); background-size: 100% 100%; box-shadow: 14px 11px 80px 5px rgb(215, 215, 215); p{ color: #FFFFFF; } } } } }