.head-box{ position: sticky; z-index: 100; top: 0;left: 0;right: 0; background-color: red; height: 200px; /* overflow: hidden; */ } .head-box img{ width: 100%; object-fit: contain; } /* 轮播样式 start */ .banner-swiper { width: 880px; overflow-x: hidden; position: fixed; left: 0; right: 0; background-color: #FFFFFF; padding: 0 30px; margin: 0 auto; height: calc(360*4px); /* max-width: 880px; */ } .banner-swiper::-webkit-scrollbar{ display: none; } .banner-swiper .swiper-slide { position: relative; display: flex; justify-content: space-between; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid #999; height: 360px!important; } .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 */ .content-box{display: flex;justify-content: space-between;padding: 20px 20px;color: #666;font-size: 20px;} .coupon{height: 280px;width: calc(100% - 230px);} .content-head{display: flex;} .content-head-right{width: 230px;flex-shrink: 0; position: relative; display: flex;align-items: center;background-color: #f0dfed; flex-direction: column;justify-content: center;padding: 0px 10px;} .qrcode{box-shadow: 0px 0px 10px rgba(0,0,0,.9);margin-top: 10px;z-index: 1;} .content-head-right > span {margin-top: 10px;font-size: 20px;color: rgba(255,255,255,.6);text-shadow: 0px 0px 10px rgba(0,0,0,.8);} .content-head-bol{position: absolute;left: -6px;display: flex;flex-direction: column;height: 280px;overflow: hidden;} .content-head-bol span{width: 20px;height: 20px;background-color: #f0dfed;border-radius: 100%;} .random-color1{background-color: #00AADC;} .random-color2{background-color: #00aa7f;} .random-color3{background-color: #5500ff;} .random-color4{background-color: #ffaa7f;} .random-color5{background-color: #005500;} .random-color6{background-color: #000c10;} .random-color7{background-color: #aa00ff;} .random-color8{background-color: #ff557f;} .random-color9{background-color: #00ffff;} .random-color10{background-color: #003c4d;}