/* 轮播 */ .banner-index .banner-pagination .swiper-pagination-bullet { width: 0.35rem; height: 0.05rem; border-radius: 0; } /* 大分类 */ .cate .cate-item { color: #999; border-bottom: 0.02rem solid rgba(0,0,0,0); } .cate .cate-item ~ .cate-item { margin-left: 0.5rem; } .cate .cate-item:hover { color: #333; border-bottom: 0.02rem solid #333; } .cate .cate-item.active { color: #333; border-bottom: 0.02rem solid #333; } .cate .cate-search-icon { width: 0.36rem; height: 0.36rem; padding: 0.1rem; position: absolute; z-index: 1; right: 0.1rem; top: 0.02rem; font-size: 0.18rem; color: #666; cursor: pointer; } .cate .el-input__inner { border-radius: 0.2rem; padding-right: 0.46rem; } .searchInput .el-input__inner:focus { border-color: #DCDFE6 !important; } .cate .cate-left{ border-bottom: 1px solid #eee; } /* 小分类 */ .subcate .subcate-item { color: #999; border-bottom: 0.02rem solid rgba(0,0,0,0); } .subcate .subcate-item ~ .subcate-item { margin-left: 0.4rem; } .subcate .subcate-item:hover { color: #333; } .subcate .subcate-item.active { color: #333; } /* 列表 */ .pagecontainer { padding: 0.3rem; } .case-item { cursor: pointer; width: calc(20% - 0.2rem); margin-left: 0.25rem; margin-top: 0.2rem; } /* 分页 */ .case-pagination .btn-next { background-color: #fff !important } .case-pagination .btn-prev { background-color: #fff !important } .cate .cate-search { position: absolute; top: 0; right: 13.541666666666666%; } @media screen and (min-width: 769px) { .case-item:nth-child(5n + 1) { margin-left: 0; } } .case-item .case-item-mask { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.5); display: none; } .case-item .case-item-vr { z-index: 2; display: none; width: 0.54rem; height: 0.34rem; } .case-item .case-item-opera { position: absolute; z-index: 2; right: 0.1rem; top: 0.1rem; display: none; } .case-item .case-item-opera .case-item-opera-praise { background-color: rgba(255,255,255,0.3); padding: 0.05rem 0.1rem; border-radius: 0.1rem; } .case-item .case-item-opera .case-item-opera-praise .case-item-opera-praise-image { height: 0.12rem; width: 0.14rem; } .case-item .case-item-opera .case-item-opera-share { background-color: rgba(255,255,255,0.3); border-radius: 50%; padding: 0.05rem; width: 0.22rem; height: 0.22rem; } .case-item .case-item-opera .case-item-opera-share .case-item-opera-share-image { height: 0.12rem; width: 0.13rem; } .case-item .case-item-opera .case-item-opera-share:hover { background-color: rgba(255,255,255,0.5); } .case-item .case-item-qrcode { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; right: 0; } .case-item .case-item-image { width: 13.5vw; height: 13.5vw; overflow: hidden; } .case-item .case-item-avatar { width: 0.24rem; height: 0.24rem; } .case-item:hover .case-item-mask { display: block; } .case-item:hover .case-item-vr { display: block; } .case-item:hover .case-item-opera { display: block; } .case-item:hover .title-text { color: #007aff; } .transitionImg { transition: all 0.5s; } .case-item:hover .transitionImg { transform: scale(1.1); } @media screen and (max-width: 768px) { .subcate .subcate-box { display: -webkit-box; } .subcate .subcate-item { height: 0.4rem !important; width: 1rem !important; } .cate .cate-item { height: 0.5rem !important; } .cate { display: block; } .cate .cate-left { width: 100%; border-bottom: 1px solid #ebeef5; } .cate .cate-search { margin: 0 auto !important; display: none; } /* 列表 */ .pagecontainer { padding: 0.15rem; } .case-item { width: 45vw; margin-left: 2vw; margin-top: 0.15rem; } .case-item:nth-child(2n + 1) { margin-left: 0; } .case-item .case-item-info{ width: 45vw; } .case-item .case-item-opera .case-item-opera-share { display: none !important; } .case-item .case-item-image { width: 45vw; height: 45vw; overflow: hidden; } .case-item .title-text { font-size: 0.16rem !important; } .case-item:hover .case-item-mask { display: none; } .case-item:hover .case-item-vr { display: none; } .case-item:hover .case-item-opera { display: block; } .case-item:hover .title-text { color: #333; } .transitionImg { transition: all 0.2s; } .case-item:hover .transitionImg { transform: scale(1); } .subcate .subcate-item ~ .subcate-item { margin-left: 0; } }