* { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: .1rem; } html,body{ width: 100%; background: url('//p3.lefile.cn/fes/cms/2022/04/27/kuuy5a93xvqqf9yfedbs3ynrh0x14e657137.png') 100% 100%; } img { display: block; } header { width: 7.5rem; height: 3rem; } header img { width: 100%; height: 100%; } .main { width: 7.5rem; padding: 0 1rem; } .success-box { width: 5.85rem; height: 5rem; } .success-box .title { position: absolute; top: 2.3rem; left: 1rem; width: 1rem; height: .3rem; } .success-box .title img { width: 100%; height: 100%; } .success-box .content { position: relative; width: 100%; height: 4.82rem; padding-top: 2.4rem; background: url('//p3.lefile.cn/fes/cms/2022/04/27/ju7po6la57yv3oaaakouapsqjqfvca263584.png') no-repeat 0% 0%; background-size: 6.8rem 3.7rem; } .success-box .z { display: none; width: 5.2rem; height: 9.12rem; margin: 0 auto; margin-bottom: .5rem; } .success-box .z .more-z { width: 100%; height: 100%; } .success-box .z-btn { position: absolute; top: 2.08rem; left: .28rem; width: .48rem; height: .14rem; } .success-box .z .z-btn img{ width: 100%; height: 100%; } .success-box .zbtn { position: absolute; top: 11.36rem; left: 50%; transform: translateX(-50%); width: .48rem; height: .14rem; } .success-box .z .zbtn img{ width: 100%; height: 100%; } .success-box .swiper { width: 100%; height: 1.83rem; font-size: 16px; } .success-box .swiper .swiper-slide { width: 1.44rem; height: 1.83rem; padding: 0 .14rem; } .success-box .swiper .swiper-slide .nr { position: relative; width: 1.16rem; height: 100%; } @keyframes hover { 0% { opacity: .3; } 100% { opacity: 1; } } .success-box .swiper .swiper-slide .nr1 { width: 100%; height: 100%; } .success-box .swiper .swiper-slide .nr2 { width: 100%; height: 100%; } .success-box .swiper .swiper-slide .nr3 { width: 100%; height: 100%; } .success-box .swiper .swiper-slide .nr4 { width: 100%; height: 100%; } .success-box .swiper .swiper-slide .more-btn { position: absolute; bottom: .06rem; left: .1rem; width: .48rem; height: .14rem; } .more-btn img { width: 100%; height: 100%; } .success-box .swiper-button-prev { position: absolute; top: 2.28rem; left: 5rem; color: #fff; --swiper-navigation-size: 16px; } .success-box .swiper-button-next { position: absolute; top: 2.28rem; left: 5.2rem; color: #fff; --swiper-navigation-size: 16px; } .content .more-box { display: none; position: relative; width: 100%; padding-top: .4rem; } .content .more-box .more-nr { width: 5.68rem; margin: 0 auto; } .content .more-box .more-nr img { width: 100%; } .content .more-box .sq { position: absolute; left: 50%; bottom: -0.06rem; width: .56rem; height: .12rem; transform: translateX(-50%); } .content .more-box .sq img { width: 100%; height: 100%; } .main .products .title { width: 1.28rem; height: .34rem; } .main .products .title img { width: 100%; height: 100%; } .products .content { position: relative; width: 100%; height: 2.48rem; padding: .36rem 0; } .products .swiper1 { overflow: hidden; width: 100%; height: 1.84rem; font-size: 16px; } .products .swiper1 .swiper-slide { width: 1.44rem; height: 1.64rem; padding: 0 .14rem; } .products .swiper1 .swiper-slide .nr { position: relative; width: 1.16rem; height: 100%; background-color: #acd7ff; border-radius: 25px; } .products .swiper1 .swiper-slide .pic { width: 1.16rem; height: .96rem; border-radius: 25px; background-color: #fff; } .nr .name { color: #174374; padding: 0 .08rem; font-size: .08rem; font-weight: 700; margin-top: .16rem; } .products .swiper1 .swiper-slide .pic img { width: 100%; height: 100%; border-radius: 25px; } .products .swiper1 .swiper-slide .more-btn { position: absolute; bottom: .06rem; left: .1rem; width: .48rem; height: .14rem; background: url('//p3.lefile.cn/fes/cms/2022/04/27/qvy4qh4bsqinn20xsxcjmn64xz84fx331862.png') no-repeat 100% 100%; text-align: center; line-height: .14rem; font-size: 16px; color: #141f4b; font-weight: 700; cursor: pointer; border-radius: 10px; } .more-btn img { width: 100%; height: 100%; } .products .swiper-button-next1 { position: absolute; top: 50%; left: 0px; width: .2rem; height: .52rem; transform: translateY(-50%); z-index: 100; } .products .swiper-button-next1 img { width: 100%; height: 100%; z-index: 99; } .products .swiper-button-prev1 { position: absolute; top: 50%; right: 0px; width: .2rem; height: .52rem; transform: translateY(-50%); z-index: 100; } .products .swiper-button-prev1 img { width: 100%; height: 100%; z-index: 99; }