@media screen and (min-width: 769px) { /* 轮播 */ .banner-index .banner-pagination .swiper-pagination-bullet { width: 0.35rem; height: 0.05rem; border-radius: 0; } .banner-index .swiper-wrapper{ min-height: 5.45rem; background: #f5f6f8; } .banner-bottom{ top: 75%; left: 30%; background: rgba(0,149,255,0.9); cursor: pointer; color: #fff; font-size: 0.14rem; padding: 0.1rem 0.25rem; border-radius: 0.05rem; z-index: 1; } .banner-bottom-dj{ top: 69%; left: 53%; background: rgba(0,149,255,0.9); cursor: pointer; color: #fff; font-size: 0.14rem; padding: 0.1rem 0.25rem; border-radius: 0.05rem; z-index: 1; } /* 痛点 */ .painpoint .painpoint-content { padding: 0 11%; display: flex; margin-top: 0.6rem; } .painpoint .painpoint-content .painpoint-content-item { width: calc(33.3% - 0.16rem); padding: 0.35rem 4% 0.5rem; cursor: pointer; border-radius: 0.15rem; box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(133,133,133,0.15); transition: all 0.5s; } .painpoint .painpoint-content .painpoint-content-item ~ .painpoint-content-item { margin-left: 0.24rem; } .painpoint .painpoint-content .painpoint-content-item .painpoint-content-item-image { width: 0.9rem; height: 0.9rem; border-radius: 50%; /* border: 1px solid #999; */ padding: 22.0.05rem; } .painpoint .painpoint-content .painpoint-content-item .painpoint-content-item-imagea { display: none; } .painpoint .painpoint-content .painpoint-content-item:hover .painpoint-content-item-imaged { display: none; } .painpoint .painpoint-content .painpoint-content-item:hover .painpoint-content-item-imagea { display: block; } .painpoint .painpoint-content .painpoint-content-item:hover { color: #fff; background-color: rgba(0,0,0,0.8); transform: translateY(-0.1rem); } /* 方案 */ .solute .solute-item { display: flex; padding-top: 0.8rem; } .solute .solute-item .solute-item-oneleft { width: 50%; padding-left: 5%; } .solute .solute-item .solute-item-oneright { width: 50%; padding-left: 11%; padding-right: 10%; } .solute .solute-item .solute-item-twoleft { width: 50%; padding-left: 10%; padding-right: 11%; } .solute .solute-item .solute-item-tworight { width: 50%; padding-right: 5%; } .solute .solute-item .solute-item-image { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid #0195FF; padding: 0.225rem; } /* 案例 */ .caseshow { background-image: url(https://alicdn.vgometa.com/home/images/solution/casebg.png); background-size: 100% 100%; background-repeat: no-repeat; } .caseshow .caseshow-btn { cursor: pointer; padding: 0.1rem 0.4rem; border: 1px solid #fff; border-radius: 0.3rem; font-size: 0.16rem; color: #fff; background-color: rgba(255,255,255,0.2); overflow: hidden; } .caseshow .caseshow-btn:hover { background-color: rgba(255,255,255,0.5); } } @media screen and (max-width: 768px) { /* 轮播 */ .banner-index .banner-pagination .swiper-pagination-bullet { width: 0.35rem; height: 0.05rem; border-radius: 0; } .banner-index .swiper-wrapper{ min-height: 2rem; } /* 痛点 */ .painpoint .painpoint-content { padding: 0; display: flex; margin-top: 0.2rem; flex-wrap: wrap; } .painpoint .painpoint-content .painpoint-content-item { width: 100%; padding: 0.2rem 4%; cursor: pointer; border-radius: 0.15rem; box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(133,133,133,0.15); transition: all 0.5s; } .painpoint .painpoint-content .painpoint-content-item ~ .painpoint-content-item { margin-left: 0; margin-top: 0.15rem; } .painpoint .painpoint-content .painpoint-content-item .painpoint-content-item-image { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid #999; padding: 0.225rem; } .painpoint .painpoint-content .painpoint-content-item .painpoint-content-item-imagea { display: none; } .painpoint .painpoint-content .painpoint-content-item:hover .painpoint-content-item-imaged { display: none; } .painpoint .painpoint-content .painpoint-content-item:hover .painpoint-content-item-imagea { display: block; } .painpoint .painpoint-content .painpoint-content-item:hover { color: #fff; background-color: rgba(0,0,0,0.8); transform: translateY(-0.1rem); } /* 方案 */ .solute .solute-item { display: flex; padding-top: 0.2rem; flex-wrap: wrap; } .solute .solute-item:nth-child(2n) { flex-direction: column-reverse; } .solute .solute-item .solute-item-oneleft { width: 100%; padding-left: 0; } .solute .solute-item .solute-item-oneright { width: 100%; padding-left: 0%; padding-right: 0%; margin-top: 0.2rem; } .solute .solute-item .solute-item-twoleft { width: 100%; padding-left: 0%; padding-right: 0%; margin-top: 0.2rem; } .solute .solute-item .solute-item-tworight { width: 100%; padding-right: 0; } .solute .solute-item .solute-item-image { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid #0195FF; padding: 0.225rem; } /* 案例 */ .caseshow { background-image: url(https://alicdn.vgometa.com/home/images/solution/casebg.png); background-size: 100% 100%; background-repeat: no-repeat; } .caseshow .caseshow-btn { cursor: pointer; padding: 0.1rem 0.4rem; border: 1px solid #fff; border-radius: 0.3rem; font-size: 0.16rem; color: #fff; background-color: rgba(255,255,255,0.2); overflow: hidden; } .caseshow .caseshow-btn:hover { background-color: rgba(255,255,255,0.5); } }