test/pages/index/index.wxss

/**index.wxss**/
/* 元旦修改 */
page {
  padding-bottom: 36.67rpx;
}
.swiper,.swiper image {
  width: 100%;
  display: block;
  height: 908rpx;
}

.top-box {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 30rpx;
  z-index: 2;
}
.top-box image {
  flex-shrink: 0;
  width: 40rpx;
  height: 40rpx;
  /* 样式改版 */
  /* width: 63rpx;
  height: 63rpx; */
  display: block;
  margin-left: 18rpx;
}
.search-box {
  flex: 1;
  width: 100%;
  height: 64rpx;
  border-radius: 27rpx;
  color: #666666;
  display: flex;
  align-items: center;
  font-size: 25rpx;
  padding: 2rpx 5rpx;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
}
.search-box .iconfont {
  font-size: 30rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  /* color: #72674E; */
}

.banner-main{
    position: absolute;
    z-index: 3;
    width: 100%;
    left: 0;
    bottom: 0rpx;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 187rpx 30rpx 30rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2))
}
.banner-main image{
    width: 153.33rpx;
    height: 133.33rpx;
}

.main-content{
    background-color:#E8F9FA;
    margin-top: -10rpx;
    border-radius: 20rpx;
    position: relative;
    z-index: 4;
    background-image: url("https://static.ticket.sz-trip.com/uploads/20250526/150bd1f9312967bd7d9bedc6dbb8dd48.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    /* padding-top: 63rpx; */
}

.top-icons {
  display: flex;
  padding:0 20rpx;
  align-items: center;
}
.top-icon-item {
  margin-bottom: 20rpx;
  line-height: 37rpx;
  font-size: 25rpx;
  color: #000;
  text-align: center;
  flex-shrink: 0;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.top-icon-item:nth-child(5n){
  margin-right: 0;
}
.top-icon-item image {
  width: 80rpx;
  height: 80rpx;
  display: block;
  transition: all 0.2s;
  /* margin: 0 auto; */
  /* margin-bottom: 10rpx; */
}
/* 金刚区滚动效果 */
.top-icon-item.active{
   height: 170rpx !important;
   margin-bottom: 0;
}
.top-icon-item.active image{
    height: 130rpx;
    width: 130rpx;
}

.content-box {
  margin: 0 25rpx;
}
.common-header-img{
    height: 63.33rpx;
}

.small-swiper {
    height: 154rpx;
}
.small-swiper image {
    display: block;
    width: 100%;
    height: 154rpx;
}
.small-swiper-box {
    margin: 50rpx 0;
    width: 100%;
    height: 154rpx;
    border-radius: 20rpx;
    /* border-radius: 77rpx; */
    overflow: hidden;
    margin-top: 33rpx;
    position: relative;
}

.sale-road-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  position: relative;
  align-items: flex-end;
}

/* 元旦修改新增样式 */
.xpth {
    border-radius: 20rpx;
    padding: 22.67rpx 0 15.33rpx 0;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
  }
  
  
/* 热门推荐 限时特惠 */
.xsth-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
    margin-bottom: 20rpx;
  }
  .xpth-left {
    width: 393rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .season-hot{
      display: flex;
  }
  .season-hot .season-item{
      width: 266rpx;
      height: 332rpx;
      margin-right: 14rpx;
      flex-shrink: 0;
      font-weight: bold;
        font-size: 25rpx;
        color: #000000;
      position: relative;
      background: white;
  }
 
  .season-hot .season-item image{
      width: 100%;
      height: 200rpx;
      border-top-right-radius: 14rpx;
  }
  .season-hot .season-item .hot-cover-img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 0;
  }

  .xsth-more {
    margin-top: 19.33rpx;
    font-size: 27rpx;
    font-family: HYZhongYuan;
    font-weight: normal;
    color: #FFE7C0;
  }
  .xsth-more image {
    margin-left: 14.67rpx;
    width: 12.67rpx;
    height: 22.67rpx;
    vertical-align: middle;
  }

  /* 元旦修改新增样式 */
  .xpth-product {
    width: 700rpx;
    height: 373rpx;
    border-radius: 27rpx;
    padding: 25rpx 13rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
  }
  /* 元旦修改新增样式 */
  .xpth-banner {
    flex: 1;
    margin-left: 15rpx;
    height: 322rpx;
    width: 100%;
    border-radius: 0rpx;
    overflow: hidden;
    position: relative;
    /* background-image: url("https://static.ticket.sz-trip.com/uploads/20250526/90645448ce9a82c91916543bc6c4935c.png");
    background-size: 100% 100%; */
    /* padding: 3rpx; */
  }
  .xpth-banner-swiper{
      height: 100%;
      /* border-radius: 20rpx; */
      overflow: hidden;
  }
  .xpth-banner image {
    flex: 1;
    height: 100%;
    width: 100%;
    /* border-radius: 20rpx; */
  }
  .xpth-banner-dot-list{
      position: absolute;
      right: 0;
      bottom: 10rpx;
      padding: 10rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
  }
  .xpth-banner-dot-list .xpth-dot{
      width: 9rpx;
      height: 9rpx;
      background: #FFFFFF;
      border-radius: 50%;
      opacity: 0.6;
      margin: 0 4rpx;
  }
  .xpth-banner-dot-list .xpth-dot.active{
      opacity: 1;
  }
  /* 元旦修改新增样式 */
  .xpth-item {
    border-radius: 20rpx;
    height: 153rpx;
    width: 100%;
    display: flex;
    margin-bottom: 13rpx;
    /* background-image: url("https://static.ticket.sz-trip.com/uploads/20250526/ed62e372f9c8874f9b50b40f70982202.png"); */
    background: white;
    position: relative;
  }
  .xpth-product .cover-image{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .xpth-item:last-child {
    margin-bottom: 0;
  }
  /* 元旦修改新增样式 */
  .xpth-item .prod-img {
    width: 157rpx;
    height: 100%;
    border-radius: 20rpx;
    flex-shrink: 0;
  }
  /* 元旦修改新增样式 */
  .xpth-item-content {
    width: 220rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* background: #FBECDE; */
    padding:0 14rpx;
    border-radius: 0 15rpx 15rpx 0;
    background: white;
    box-sizing: border-box;
  }
  /* 元旦修改新增样式 */
  .xpth-item-title {
    width: 210rpx;
    font-size: 27rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    /* height: 80rpx; */
  }

  /* 元旦修改新增样式 */
  .xpth-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* 元旦修改新增样式 */
  .xpth-item-price {
    font-size: 31rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ED1C19;
  }
  /* 元旦修改新增样式 */
  .xpth-item-price::before {
    content: "￥";
    font-size: 23rpx;
  }





.price {
  color: #D62828;
  font-size: 24rpx;
}
.price text:nth-child(2){
  font-weight: 500;
  font-size: 33rpx;
}
.price text:nth-child(3){
  font-size: 20rpx;
  color: #8D8D8D;
  margin-left: 4rpx;
}
.sale-number {
  font-size: 24rpx;
  color: #666;
}
.sale-number text {
  font-size: 21rpx;
}
.more-btn {
  line-height: 77rpx;
  border: 1rpx solid #0B898E;
  border-radius: 39rpx;
  text-align: center;
  color: #0B898E;
  font-size: 31rpx;
  font-weight: 500;
}

.pic-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.new-pic {
    width: 340rpx;
    height: 140rpx;
    margin-bottom: 20rpx;
  }

.title-more {
  font-size: 27rpx;
  font-weight: 500;
  color: #1A9BA7;
  z-index: 9;
  width: 173rpx;
  height: 63.33rpx;
  border-radius: 20rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.title-more .iconfont {
  font-size: 22rpx;
}
.slide-out-box {
  margin-top: 30rpx;
  border-radius: 27rpx;
  padding-bottom: 1rpx;
  margin-bottom: 40rpx;
}
.pbservice {
  width: calc(186rpx * 7);
  display: flex;
  flex-wrap: wrap;
}
.pbservice-item {
  /* 元旦修改 截止到注释的width*/
  width: 158rpx;
  margin-bottom: 22rpx;
  margin-right: 22rpx;
  text-align: center;
  font-size: 25rpx;
  color: #111111;
  line-height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.text {
  width: 200rpx;
}
.pbservice-item image {
  width: 158rpx;
  height: 152rpx;
  /* margin-bottom: 10rpx; */
}
.six-box {
  margin-top: 43rpx;
  display: flex;
  margin-bottom: 50rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}
.six-box image {
  width: 128rpx;
  height: 110rpx;
  margin-bottom: 20rpx;
}
.hot-list {
  display: flex;
  margin-top: 47rpx;
  justify-content: space-between;
}
.hot-list-item {
  width: 337rpx;
}
.hot-item {
  background: white;
  /* box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1); */
  border-radius: 15rpx;
  margin-bottom: 15rpx;
}
.hot-item image:nth-child(1) {
  display: block;
  width: 100%;
  border-radius: 15rpx 15rpx 0 0;
}
.hot-item .hot-info {
  padding: 12rpx;
}
.hot-item .hot-title {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
}
.hot-info .tags {
  display: flex;
  align-items: center;
  width: 286rpx;
  margin: 15rpx 0;
}
.hot-info .tag {
  margin-right: 16rpx;
  line-height: 32rpx;
  border: 1rpx solid #0B898E;
  border-radius: 5rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  color: #0B898E;
  font-size: 20rpx;
}
.hot-info .tag:last-child {
  margin-right: 0;
}
.hot-price {
  color: #D62828;
  font-size: 24rpx;
}
.hot-price text:nth-child(2){
  font-size: 33rpx;
  font-weight: 500;
}
.hot-price text:nth-child(3){
  font-size: 20rpx;
  color: #8D8D8D;
  margin-left: 4rpx;
}
.hot-location {
  position: absolute;
  color: #fff;
  line-height: 32rpx;
  font-size: 19rpx;
  padding: 20rpx;
  bottom: 0;
  left: 0;
  right: 0;
}
.hot-location .iconfont {
  font-size: 22rpx;
  margin-right: 10rpx;
}
.hot-info .tags .icon-box {
  flex-shrink: 0;
  width: 50%;
  text-align: left;
  color: #666666;
  font-size: 21rpx;
  display: flex;
  align-items: center;
}
.hot-info .tags .icon-box .iconfont {
  font-size: 30rpx;
  margin-right: 5rpx;
}
.today-hot {
  position: relative;
  border-radius: 15rpx;
  font-size: 0;
  overflow: hidden;
}
.today-hot .today-main-img {
  border-radius: 15rpx;
  height: 615rpx;
}
.today-hot-box {
  position: absolute;
  left: 10rpx;
  right: 10rpx;
  bottom: 10rpx;
}
.today-hot-tag {
  line-height: 34rpx;
  max-width: 265rpx;
  background: #FF2245;
  border-radius: 15rpx 15rpx 0px 0px;
  padding: 0 15rpx;
  color: #fff;
  font-size: 20rpx;
  display: inline-block;
  margin: 0 40rpx;
}
.today-hot-title {
  background: rgba(255, 255, 255, 0.8);
  padding: 20rpx 28rpx;
  border-radius: 13rpx;
  font-size: 33rpx;
  color: #000;
  font-weight: 500;

}
.today-hot .today-tip-img {
  position: absolute;
  width: 154rpx;
  left: 11rpx;
  top: 31rpx;
}
.today-date {
  position: absolute;
  top: 65rpx;
  left: 11rpx;
  width: 154rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  letter-spacing: 3rpx;
  font-weight: 500;
}

.more-btn-text {
  text-align: center;
  margin: 20rpx auto;
  width: 200rpx;
  height: 67rpx;
  line-height: 67rpx;
  border: 1px solid #2BB2D2;
  font-size: 27rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2BB2D2;
}
.scroll-line {

  width: 34rpx !important;
  height: 7rpx;
  background: #87E1EC;
  border-radius: 3rpx;
  margin: 33.33rpx auto;
}
.scroll-line-bg {
  height: 7rpx;
  background: #30A7CD;
  border-radius: 3rpx;
}


.nomore-tip-btn {
  position: absolute;
  left: 0;
  right: 0;
  height: 78rpx;
  bottom: 0;
}

.other-plats {
  display: flex;
  font-size: 25rpx;
  text-align: center;
  margin: 30rpx 0;
  color: #333333;
  line-height: 42rpx;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 187rpx;
  border-radius: 27rpx;
  align-items: center;
}
.other-plats image {
  width: 153.33rpx;
  display: block;
  height: 111.33rpx;
  margin-bottom: 15rpx;
}

.dot-list {
  display: flex;
  position: absolute;
  right: 43rpx;
  bottom: 15rpx;
}
.dot {
  width: 11rpx;
  height: 11rpx;
  background: #FFFFFF;
  opacity: 0.4;
  border-radius: 50%;
  margin-left: 8rpx;
}
.dot.active {
  opacity: 1;
}
.sm-dot-list {
  left: 0;
  justify-content: center;
  bottom: 11rpx;
}
.sm-dot-list .dot {
  width: 7rpx;
  height: 7rpx;
}
.sm-dot-list .dot:nth-child(1){
  margin-left: 0;
}
.sm-dot-list .dot.active {
  width: 20rpx;
  height: 7rpx;
  border-radius: 3rpx;
}
/* 弹窗广告 */
.zzc{
  background: gray;
  position: fixed;
  left: 0px;
  top: 0px;
  width:100%;
  height: 100%;
  z-index: 998;
  filter: alpha(opacity=80);
  opacity: 0.8 !important;
}
.alertavd{
  width: 500rpx;
  height: 700rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-250rpx,-300rpx);
  z-index: 999;

}
.alertsp{
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.fullavd{
  position: fixed;
  left: 0px;
  top: 0px;
  width:100%;
  height: 100%;
  z-index: 1001;
  background-color: #fff;
  opacity: 1;
  transition: all 1s;
  
}

.time{
  width: 150rpx;
  height: 60rpx;
  background-color: #fff;
  color: #000;
  position: absolute;
  left: 20rpx;
  top: 120rpx;
  border-radius:6rpx ;
  text-align: center;
  line-height: 60rpx;
  z-index: 1002;
}




.ggfw-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ggfw-list .ggfw {
  width: 220rpx;
  height: 72rpx;
  margin-bottom: 14rpx;
}
.ggfw image{
  width: 100%;
  height: 100%;
}

.six-box-new {
  width: 697rpx;
  /* background: linear-gradient(-90deg, #FF9B6A, #D02E25); */
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: scroll;
  margin: 32rpx 0 53.33rpx;
  z-index: 1;
  position: relative;
}

.six-box-new image {
  width: 334rpx;
  height: 193.33rpx !important;
  /* background: #FFE7C0; */
  border-radius: 20rpx;
  flex-shrink: 0;
  margin-right: 13.33rpx;
}
/* 春节金刚区字体颜色样式更换 */
.top-icon-text {
  color: #111111;
}

.rmtj-right {
  /* width: 313.33rpx;
  height: 154rpx; */
  width: 240rpx;
  height: 66rpx;
  position: absolute;
  right: -22rpx;
  right: 0;
  z-index: 2;
  /* top: -20rpx; */
}

.Qtop{
  width: 100%;
}
.Qtop img{
  width: 100%;
}
.miao{
  position: fixed;
  top: 100rpx;
  background: antiquewhite;
  margin: 18rpx;
  width: 129rpx;
  height: 63rpx;
  background: rgba(17, 17, 17, 0.1);
  text-align: center;
  border-radius: 13rpx;
  line-height: 63rpx;
}
.topBox {
    /* display: flex;
    padding-top: 120rpx;
    padding-left: 20rpx; */
}
.jumpBox {
    color: #000;
    background: rgba(255,255,255, 0.911);
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    position: fixed;
    top: 150rpx;
    left: 20rpx;
}
.time{
  padding-right: 10rpx;
}

.muteImg {
	width: 62rpx;
	height: 62rpx;
	position: absolute;
	top: 194rpx;
	right: 38rpx;
}
.logoImg {
	width: 464.67rpx;
	height: 342.67rpx;
	position: absolute;
	top: 406rpx;
	left: 142rpx;
}
.btnImg {
	width: 296.67rpx;
	height: 79.33rpx;
	position: absolute;
	left: 226rpx;
	bottom: 208rpx;
}
.playImg {
	position: absolute;
	width: 31.33rpx;
	height: 38rpx;
	left: 56.67rpx;
	bottom: 64rpx;
}
.jqssd {
  /* background: url("https://static.ticket.sz-trip.com/uploads/20240606/20c06c5bf8d5e498667ebd954a1d95f8.png");
  background-size: 100% 100%; */
  width: 344.33rpx;
  height: 160rpx;
  flex-shrink: 0;
}
.jqssd image, .sslk image{
  width: 100%;
  height: 100%;
}
.sslk {
  /* background: url("https://static.ticket.sz-trip.com/uploads/20240729/c1554fdd645a0d3a47c8e683186e1a73.png");
  background-size: 100% 100%; */
  width: 344rpx;
  height: 160rpx;
  flex-shrink: 0;
}

.xsth-left{
    /* flex: 1;
    width: 1rpx; */
}
.xsth-left>image{
    max-width: 100%;
    overflow: hidden;
}

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}

.xpth-cover{
    width: 255rpx;
    height: 95rpx;
    background: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    position: absolute;
    bottom: 8rpx;
    left: 9rpx;
    right: 9rpx;
    border-radius: 13rpx;
    padding: 15rpx 10rpx;
    box-sizing: border-box;
}