/* 相册弹层通用模板 */ .photo-swiper-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 100; display: none; } .photo-swiper-mask .photo-box { position: relative; width: 100%; height: 100%; padding: 150px 100px; } .photo-swiper-mask .thumb-box { position: absolute; bottom: 0; left: 0; width: 100%; height: 84px; padding: 10px 0; background-color: rgba(0, 0, 0, .8); text-align: center; z-index: 101; } .photo-swiper-mask .thumb-swiper-container { width:704px; display: inline-block; vertical-align: top; overflow: hidden; position: relative; } .photo-swiper-mask .thumb-swiper-container .swiper-slide { /* width: 89px !important; */ border: 2px solid transparent; } .photo-swiper-mask .thumb-swiper-container .swiper-slide-thumb-active { border-color: #ef3929; } .photo-swiper-mask .adv-box { border-left: 1px solid #4e4e4e; display: inline-block; height: 64px; margin-left: 25px; padding-left: 35px; position: relative; } .photo-swiper-mask .adv-box .adv-ava { float: left; width: 48px; height: 48px; margin-right: 12px; margin: 8px 0; } .photo-swiper-mask .adv-box .adv-ava img { border-radius: 50%; height: 100%; } .photo-swiper-mask .adv-box .adv-info { float: left; color: #fff; text-align: left; font-size: 14px; margin: 8px 0 8px 15px; } .photo-swiper-mask .adv-box .name { max-width: 90px; font-size: 16px; font-weight: 700; } .photo-swiper-mask .adv-box .msg { line-height: 1.2; padding-right: 100px; margin-top: 8px; font-size: 14px; } .photo-swiper-mask .adv-box .free-call { position: absolute; right: -20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 96px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 4px; } .photo-swiper-mask .thumb-swiper-container img { /* width: 85px; */ height: 64px; } .photo-swiper-mask .photo-close { position: absolute; right: 30px; top: 30px; color: #fff; z-index: 100; } .photo-swiper-mask .photo-close i.icon { font-size: 24px; } .photo-swiper-mask .photo-swiper-container { width: 100%; height: 100%; } .photo-swiper-mask .photo-swiper-container .swiper-slide img { width: auto; max-width: 80%; height: auto; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .photo-swiper-mask .change-btn { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); color: #fff; z-index: 100; } .photo-swiper-mask .change-btn i.icon { font-size: 72px; } .photo-swiper-mask .photo-prev { left: 100px; } .photo-swiper-mask .photo-next { right: 100px; }