/* 轮播样式 start */ /* .banner-swiper { overflow-x: hidden; height: 76vh; position: relative; background-color: #FFFFFF; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner-swiper .swiper-slide h1{ position: absolute; color: #FFFFFF; text-shadow: 2px 3px 10px rgba(0,0,0,.8); } */ /* 指示点默认样式 */ /* .banner-swiper .swiper-pagination-bullet { width: 20px; height: 20px; line-height: 20px; text-align: center; } */ /* 鼠标悬浮样式、当前选中指示点样式 */ /* .banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active { background-color: rgba(0,0,0,.8); color: #FFFFFF; opacity: 1; } */ /* 轮播样式 end */ /* 导航 start */ .header { position: sticky; top: 0; box-shadow: 0px 2px 0px rgba(0,0,0,.1); } .header-content { display: flex; justify-content: space-between; align-items: center; } /* 导航 end */ .footer { position: fixed; bottom: 0px; z-index: 2; width: 100%; display: flex; justify-content: space-between; background-color: #fff; padding: 15px 45px 6px 45px; box-shadow: 0px -3px 10px rgba(178, 45, 42,.5); } .footer a { width: 55px; height: 50px; object-fit: inherit; position: relative; } .footer a:nth-child(2){ width: 110px; height: 110px; margin-top: -65px; } .introduce-box { position: relative; } .introduce-content { font-size: 0.75rem; text-shadow: 0px 0px .5px #b22d2a; color: #b22d2a; letter-spacing:.05em; background: url(../imgs/public/introduce.png) no-repeat; background-size: 100% 100%; padding: 1.25rem 3rem 2rem 3rem; } .introduce-content p { color: #b22d2a; font-weight: bold; text-align: right; font-size: 14px; margin-top: 6px; opacity: 1; } .review-box { background: url(../imgs/public/foot-img.png) no-repeat; background-size: 100% 100%; padding: 20px; padding-bottom: 71px; } .huigu-box { background-color: #fff; border-radius: 10px; padding: 20px 15px 16px 15px; box-shadow: 0px 0px 10px rgba(0,0,0,.4); color: #b22f2c; margin-bottom: 40px; overflow: hidden; } .huigu-box p { font-size: 1rem; text-align: center; } .video-box { height: 10rem; margin: 15px 0px; position: relative; overflow: hidden; border-radius: 12px; } .cover-img { object-fit: contain; } .play-img { width: 65px!important; height: 65px!important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .huigu-box span { font-size: 0.75rem; font-weight: bold; } .video-play-box { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; display: none; justify-content: center; align-items: center; flex-direction: column; background-color: rgba(0,0,0,.5); padding: 0 20px; } .video-play-box img { width: 50px; height: 50px; margin-top: 20px; } .info-box { position: fixed; top: 100%; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,1); z-index: 3; padding: 20px; transition: all .5s ease-in-out; color: #000000; overflow: hidden; overflow-y: scroll; padding-bottom: 84px; font-size: 14px; } .info-box h1{ color: #b22f2c!important; } .taskBox { top: 0!important; } .close-box { position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 0; padding: 20px; background-color: #FFFFFF; transition: all .5s ease-in-out; } .btn-close { position: fixed; } .close-box div { padding: 10px; text-align: center; background-color: rgba(178, 45, 42,1); color: #fff; border-radius: 6px; font-size: 16px; } /* 寄语 */ .box-content { background: url(../imgs/public/massage-icon.png) no-repeat; background-size: 100% 100%; background-attachment:fixed; padding-bottom: 50px; position: relative; height: 100vh; } .bao-box { position: fixed; top: 200px; bottom: 71px; overflow: hidden; overflow-y: scroll; } .massage-slide { height: 190px; overflow: hidden; position: relative; } .item-slide { display: inline-flex; align-items: center; background-color: rgba(255,255,255,.5); padding: 4px; border-radius: 50px; color: #FFFFFF; font-size: 14px; font-weight: bold; margin-bottom: 10px; } .massage-slide img { width: 30px; height: 30px; border-radius: 100%; } .massage-box { background-color: #FFFFFF; position: fixed; bottom: 40px; left: 30px; right: 30px; padding: 15px; border-radius: 4px; display: none; } .massage-box ul { display: flex; flex-wrap: wrap; max-height: 200px; overflow: hidden; overflow-y: scroll; padding-bottom: 50px; } .massage-box ul li { display: inline-flex; padding: 4px 10px; border-radius: 50px; color: #b22f2c; border: 1px solid #b22f2c; margin-bottom: 6px; font-weight: bold; font-size: 12px; } .massage-box ul .itemActive { background-color: #b22f2c; color: #FFFFFF; } .massage-box span { margin-right: 6px; } .fun-box { position: fixed; right: 15px; bottom: 130px; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; } .fun-box img { width: 100px; height: 100px; margin-top: -30px; } .send-img { width: 50px!important; height: 50px!important; display: none; } .swiper-container {width: 100%;height: 160px;overflow: visible!important;margin-bottom: 20px;} .swiper-container .swiper-wrapper .swiper-slide{ border-radius: 12px;width: 57%;position: relative;} .swiper-container .swiper-wrapper .swiper-slide img{height: 160px; border-radius: 12px;} .swiper-container .swiper-wrapper .swiper-slide-prev{ height: 160px;} .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 160px;} .swiper-container .swiper-wrapper .swiper-slide-next{ height: 160px;} .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 160px;} .swiper-container .swiper-wrapper .swiper-slide-active{ width: 57%;} .swiper-container .swiper-wrapper .swiper-slide-active .play-img { width: 65px!important; height: 65px!important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }