.fs-22 { font-size: 0.22rem !important; } .w210{ width: 2.1rem !important; } .banner-bottom{ top: 65%; left: 46%; background: rgba(0,149,255,1); cursor: pointer; color: #fff; font-size: 0.14rem; padding: 0.12rem 0.55rem; border-radius: 0.05rem; z-index: 1; } /* 应用场景 */ .applyscene { margin-top: 0.35rem; display: flex; } .applyscene .applyscene-item { position: relative; height: 3.3rem; border-radius: 0.1rem; width: calc(25% - 0.12rem); margin-left: 0.15rem; margin-top: 0.15rem; cursor: pointer; overflow: hidden; } .applyscene .applyscene-item:nth-child(4n + 1) { margin-left: 0; } .applyscene .applyscene-item .applyscene-item-info { z-index: 2; } .applyscene .applyscene-item .applyscene-item-mask { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.3); } .applyscene .applyscene-item:hover .applyscene-item-mask { background-color: rgba(0,0,0,0.1); } .applyscene .applyscene-item:hover .transitionImg { transform: scale(1.1); } .transitionImg { transition: all 0.5s; } /* 案例展示 */ .case { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0.3rem; } .case-item { margin-top: 0.2rem; cursor: pointer; width: 23.5%; transition: all 0.5s; } .case-item .case-item-image { width: 100%; height: 2.49rem; } .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-btn { padding: 0.08rem 0.25rem; color: #fff; background-color: rgba(255,255,255,0.3); border: 1px solid #fff; border-radius: 0.3rem; z-index: 1; font-size: 0.16rem; } .case-item .case-item-qrcode { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; right: 0; display: none; } .case-item .case-item-img{ overflow: hidden; } .case-item:hover { color: #0195FF; box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(0,0,0,0.2); transform: translateY(-0.1rem); } .case-item:hover .case-item-btn { display: none; } .case-item:hover .case-item-mask { display: block; } .case-item:hover .case-item-qrcode { display: block; } .case-item:hover .transitionImg { transform: scale(1.1); } @media screen and (max-width: 768px) { /* 应用场景 */ .applyscene { margin-top: 0; display: flex; overflow-x: auto; overflow-y: hidden; } .applyscene::-webkit-scrollbar { display: none; } .applyscene .applyscene-item { flex: 0 0 auto; position: relative; height: 2rem; border-radius: 0.1rem; width: 2.68rem; margin-left: 0.15rem; margin-top: 0.15rem; cursor: pointer; overflow: hidden; } .applyscene .applyscene-item ~ .applyscene-item { margin-left: 0.15rem; } .applyscene .applyscene-item .applyscene-item-info { z-index: 2; } .applyscene .applyscene-item .applyscene-item-mask { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.6); } .applyscene .applyscene-item:hover .applyscene-item-mask { background-color: rgba(0,0,0,0.3); } .applyscene .applyscene-item:hover .transitionImg { transform: scale(1.1); } .transitionImg { transition: all 0.5s; } /* 案例展示 */ .case { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0; } .case-item { margin-top: 0.15rem; cursor: pointer; width: 48%; transition: all 0.5s; } .case-item .case-item-image { width: 100%; height: 1.7rem; } .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-btn { padding: 0.05rem 0.1rem; color: #fff; background-color: rgba(255,255,255,0.3); border: 1px solid #fff; border-radius: 0.1rem; z-index: 1; font-size: 0.14rem; } .case-item .case-item-qrcode { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; right: 0; display: none; } .case-item .case-item-img { overflow: hidden; } .case-item .case-item-title { font-size: 0.16rem !important; } }