test/pages/index/index.wxss

/**index.wxss**/
/* 元旦修改 */
page {
  background: #8F1D22;
  /* background: #FFF6E8; */
}
.swiper,.swiper image {
  width: 690rpx;
  display: block;
  height: 358rpx;
  border-radius: 13rpx;
}
.swiper {
  margin: 0 auto;
}
.top-box {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
  margin: 0 30rpx;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}
.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; */
  /* background: rgba(255, 255, 255, 0.6); */
  /* border-radius: 32rpx; */
  /* color: #666; */
  height: 70.67rpx;
  color: #F9F1DB;
  background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/springFestival2024/searchBg.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  font-size: 25rpx;
}
.search-box .iconfont {
  font-size: 30rpx;
  margin-left: 20rpx;
  margin-right: 10rpx;
}
.top-box .weather-num,.top-box .weather {
  flex-shrink: 0;
  color: #333;
}
.top-box .weather-num {
  font-size: 29rpx;
  margin-bottom: 10rpx;
  margin-left: 4rpx;
}
.top-box .weather {
  font-size: 19rpx;
  margin-top: 20rpx;
  margin-left: -4rpx;
  margin-right: 30rpx;
}
.top-icons {
  /* background: #FFFFFF; */
  /* box-shadow: 0px 3rpx 26rpx 0px rgba(6, 0, 1, 0.13); */
  border-radius: 27rpx;
  margin: 0 20rpx;
  position: relative;
  z-index: 1;
  display: flex;
  padding: 34rpx 0;
  padding-bottom: 7rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top-icon-item {
  margin-bottom: 30rpx;
  line-height: 37rpx;
  font-size: 25rpx;
  color: #000;
  text-align: center;
  flex-shrink: 0;
  width: 20%;
}
.top-icon-item:nth-child(5n){
  margin-right: 0;
}
.top-icon-item image {
  width: 87rpx;
  display: block;
  margin: 0 auto;
  margin-bottom: 18rpx;
}
.content {
  margin: 0 25rpx;
}
.sale-road-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  position: relative;
}
.sale-box {
  flex-shrink: 0;
  width: 337rpx;
}
.sale-title {
  color: #999999;
  font-size: 20rpx;
  margin-bottom: 20rpx;
}
.sale-title text {
  color: #000000;
  font-size: 32rpx;
  font-weight: 500;
  margin-right: 8rpx;
}
.sale-product {
  width: 337rpx;
  position: relative;
  height: 165rpx;
  overflow: hidden;
  border-radius: 8rpx;
}
.sale-product-bg {
  width: 197rpx;
  height: 165rpx;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #F78C56, #FB6044);
  
}
.road-product-bg {
  background: linear-gradient(90deg, #35CFB4, #00A6A0);
}
.sale-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 173rpx;
  height: 165rpx;
}
.sale-info {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  bottom: 20rpx;
  width: 140rpx;
}
.sale-product-title {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
  line-height: 36rpx;
}
.sale-price {
  padding: 0 10rpx;
  color: #F44747;
  font-size: 25rpx;
  line-height: 39rpx;
  background: #FFFFFF;
  border-radius: 5rpx;
  margin-top: 15rpx;
  display: inline-block;
}
.sale-tip-img {
  position: absolute;
  width: 200rpx;
  height: 165rpx;
  left: 0;
  top: 0;
}
.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: 77rpx;
  overflow: hidden;
  margin-bottom: 63rpx;
  position: relative;
}
.product-tags {
  display: flex;
  margin-top: 40rpx;
  margin-bottom: 50rpx;
  overflow-x: auto;
}
.product-tag {
  padding: 0 20rpx;
  height: 43rpx;
  background: #F4F4F4;
  border-radius: 21rpx;
  font-size: 27rpx;
  color: #666;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.product-tag.active {
  background: #0B898E;
  color: #fff;
}
.tag-product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tag-product {
  width: 337rpx;
  background: #FFFFFF;
  box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1);
  border-radius: 13rpx;
  margin-bottom: 35rpx;
}
.tag-product image {
  display: block;
  width: 337rpx;
  height: 213rpx;
  border-radius: 13rpx 13rpx 0px 0px;
}
.tag-product .product-info {
  padding: 20rpx;
  padding-bottom: 0;
}
.tag-product .tag-product-title {
  font-size: 33rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 10rpx;
}
.tag-product .tag-product-address {
  color: #999;
  font-size: 22rpx;
  line-height: 40rpx;
  padding-bottom: 10rpx;
}
.tag-product-price-box {
  display: flex;
  height: 70rpx;
  align-items: center;
  border-top: 1rpx solid #ccc;
  justify-content: space-between;
}
.tag-product .tag-product-address .iconfont {
  font-size: 26rpx;
}
.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 {
  display: flex;
  justify-content: space-between;
  margin: 60rpx 0;
}
.pic-list image {
  width: 155.33rpx;
  height: 200rpx;
  display: block;
} */
/* 元旦修改 以上两个样式为注释掉的 下面的.pic-list是新改的 */
.pic-list {
  width: 100%;
  display: flex;
  margin-right: 26rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.title-more {
  font-size: 27rpx;
  /* color: #0B898E; */
  /* 元旦修改 */
  color: #FFEEDB;
  z-index: 9;
}
.title-more .iconfont {
  font-size: 22rpx;
}
.pbservice {
  /* width: calc(175rpx * 6); */
  /* 元旦修改 */
  width: calc(190rpx * 6);
  display: flex;
  margin-top: 20rpx;
  flex-wrap: wrap;
  /* margin-bottom: 60rpx; */
  /* 元旦修改 注释margin-bottom */
}
.pbservice-item {
  /* 元旦修改 截止到注释的width*/
  width: 120rpx;
  margin-bottom: 33.33rpx;
  margin-right: 62.33rpx;
  /* width: 175rpx; */
  text-align: center;
  font-size: 25rpx;
  /* color: #333; */
  /* 春节调整颜色改版 */
  color: #FFEEDB;
  line-height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.text {
  width: 200rpx;
}
.pbservice-item image {
  /* width: 60rpx;
  margin-bottom: 20rpx;
  margin-top: 50rpx; */
  /* 元旦修改 以上都是之前的*/
  width: 93.33rpx;
  margin-bottom: 16.67rpx;
}
.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: 35rpx;
}
.hot-item image:nth-child(1) {
  display: block;
  width: 100%;
  border-radius: 15rpx 15rpx 0 0;
}
.hot-item .hot-info {
  padding: 20rpx 25rpx;
}
.hot-item .hot-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
.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;
  margin-top:28rpx;

}
.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;
}
.title-header .icon-fanhui1 {
  display: none;
}
.more-btn-text {
  text-align: center;
  color: #0b898e;
  font-size: 27rpx;
  width: 200rpx;
  line-height: 65rpx;
  border: 1px solid #0b898e;
  border-radius: 33rpx;
  margin: 20rpx auto;
}
.scroll-line {
  /* height: 6rpx;
  border-radius: 3rpx;
  background: #ccc;
  overflow: hidden;
  margin: 30rpx auto; */
  /* 元旦修改 以上为注释部分 下面为新内容*/
  width: 73rpx !important;
  height: 7rpx;
  background: #FFDA9F;
  border-radius: 3rpx;
  margin: 33.33rpx auto;
}
.scroll-line-bg {
  /* width: 300rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background: #0B898E; */
  /* 元旦修改 以上为注释部分 下面为新内容*/
  height: 7rpx;
  background: #D02E25;
  border-radius: 3rpx;
}
/* 元旦修改  新增样式 */
.scroll-line-bg2 {
  margin-left: 37.33rpx;
  background: #D02E25;
  height: 7rpx;
  border-radius: 3rpx;
}
.nomore-tip-btn {
  position: absolute;
  left: 0;
  right: 0;
  height: 78rpx;
  bottom: 0;
}
.prize-tip-text {
  width: 267rpx;
  display: block;
  top: 39rpx;
  left: 134rpx;
  position: absolute;
}
.prize-name {
  position: absolute;
  text-align: center;
  left: 132rpx;
  right: 132rpx;
  top: 169rpx;
  font-size: 31rpx;
  color: #333333;  
}
.prize-img {
  width: 333rpx;
  height: 240rpx;
  border-radius: 13rpx;
  overflow: hidden;
  position: absolute;
  left: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 269rpx;
}
.prize-img image {
  display: block;
  width: 333rpx;
  height: 240rpx;
}
.btn-box {
  position: absolute;
  width: 400rpx;
  height: 87rpx;
  left: 67rpx;
  bottom: 78rpx;
  text-align: center;
  line-height: 87rpx;
}
.btn-box image {
  display: block;
  width: 100%;
}
.btn-box navigator,.btn-box view {
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  right: 0;
}
.prize-coupon {
  width: 293rpx;
  height: 227rpx;
  position: absolute;
  top: 274rpx;
  left: 120rpx;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}
.prize-coupon image {
  display: block;
  width: 100%;
}
.prize-coupon-money {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 80rpx;
  font-weight: bold;
  line-height: 110rpx;
  top: 12rpx;
}
.prize-coupon-money::before{
  content: "￥";
  font-size: 32rpx;
}
.prize-coupon-tip {
  position: absolute;
  left: 0;
  right: 0;
  top: 120rpx;
}
.other-plats {
  display: flex;
  font-size: 25rpx;
  margin: 20rpx;
  text-align: center;
  margin-bottom: 70rpx;
  color: #333333;
  line-height: 42rpx;
  flex-wrap: wrap;
}
.other-plats image {
  width: 107rpx;
  display: block;
  height: 107rpx;
}
.other-plat {
  margin-right: 79rpx;
  margin-top: 20rpx;
  /* 春节新增样式 */
  color: #FFEEDB;
}
.other-plat:nth-child(4n){
  margin-right: 0;
}
.old-btn {
  position: fixed;
  left: 0;
  top: 170rpx;
  writing-mode:tb-rl;
  margin-top: 142rpx;
  color: #0B898E;
  font-size: 29rpx;
  width: 64rpx;
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 3rpx;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 13rpx 0px rgba(0, 0, 0, 0.3);
  border-radius: 0 13rpx 13rpx 0;
  font-weight: 500;
  z-index: 1;
}
.top-bg-img {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
}
.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;
}
.fullsp{
  width: 100%;
  height: 100%;
}
.time{
  width: 150rpx;
  height: 60rpx;
  background-color: #999999;
  color: #fff;
  position: absolute;
  right: 20rpx;
  top: 200rpx;
  border-radius:6rpx ;
  text-align: center;
  line-height: 60rpx;
  z-index: 1002;
}

/* 元旦修改新增样式 */
.xpth {
  /* width: 697rpx; */
  height: 462rpx;
  /* background: linear-gradient(-90deg,  #FF9B6A, #D02E25);  */
  border-radius: 20rpx;
  padding: 22.67rpx 18rpx 15.33rpx;
  position: relative;
}
/* 元旦修改新增样式 */
.time-box {
  font-size: 25rpx;
  font-family: DIN;
  font-weight: 500;
  color: #FDEBC6;
  display: flex;
  align-items: center;
  height: 37px;
  margin-left: -50rpx;
}
/* 元旦修改新增样式 */
.xsth-time {
  margin: 0 5rpx;
  width: 50rpx;
  height: 33rpx;
  background: #F9F1DB;
  border-radius: 5rpx;
  font-size: 25rpx;
  font-family: DIN;
  font-weight: 500;
  color: #E63100;
  text-align: center;
  line-height: 33rpx;
}
/* 元旦修改新增样式 */
.xpth-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 元旦修改新增样式 */
.xsth-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
/* 元旦修改新增样式 */
.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;
}
/* 元旦修改新增样式 */
.yanhua {
  height: 104rpx;
  width: 104rpx;
  position: absolute;
  right: 120rpx;
  z-index: 999;
}
/* 元旦修改新增样式 */
.xpth-product {
  position: absolute;
  left: 0;
  bottom: 15.33rpx;
  display: flex;
  width: 710rpx;
  justify-content: space-between;
}
/* 元旦修改新增样式 */
.xpth-banner {
  width: 270rpx;
  height: 333rpx;
  /* background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/springFestival2024/xpth-hBg.png"); */
  background-size: 100% 100%;
  border-radius: 20rpx;
}
.xpth-banner image {
  width: 270rpx;
  height: 333rpx;
  border-radius: 20rpx;
}
/* 元旦修改新增样式 */
.xpth-item {
  width: 413rpx;
  height: 170rpx;
  /* background: #FFFFFF; */
  background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/springFestival2024/xpth-hBg.png");
  background-size: 100% 100%;
  border-radius: 20rpx;
  display: flex;
  /* padding: 5rpx; */
}
/* 元旦修改新增样式 */
.xpth-item image {
  width: 160rpx;
  height: 170rpx;
  background: #FFE7C0;
  border-radius: 15rpx 0 0 15rpx;
  /* margin-right: 15.33rpx; */
  flex-shrink: 0;
}
/* 元旦修改新增样式 */
.xpth-item-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #FBECDE;
  padding-left: 15.33rpx;
  border-radius: 0 15rpx 15rpx 0;
}
/* 元旦修改新增样式 */
.xpth-item-title {
  width: 230rpx;
  font-size: 27rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 18rpx;
  /* height: 80rpx; */
}
.xpth-tag {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #E5A54A;
}
/* 元旦修改新增样式 */
.xpth-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 13.33rpx;
}
/* 元旦修改新增样式 */
.xpth-item-price {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #D62828;
}
/* 元旦修改新增样式 */
.xpth-item-price::before {
  content: "￥";
  font-size: 20rpx;
}
/* 元旦修改新增样式 */
.xpth-item-buy {
  width: 111rpx;
  height: 36rpx;
  background: linear-gradient(180deg, #FF9B6A, #E63100);
  border-radius: 18rpx;
  font-size: 21rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFE7C0;
  text-align: center;
  line-height: 36rpx;
}
/* 元旦修改新增样式 */
.new-pic {
  width: 153.33rpx !important;
  height: 253.33rpx !important;
  margin-bottom: 26.67rpx;
}

.ggfw-list {
  justify-content: space-around !important;
}
.ggfw {
  width: auto;
  margin-bottom: 54rpx;
}
.ggfw image{
  margin-bottom: 16.67rpx;
  width: 93.33rpx !important;
  height: 93.33rpx !important;
}

.six-box-new {
  width: 697rpx;
  height: 285rpx;
  /* background: linear-gradient(-90deg, #FF9B6A, #D02E25); */
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 13.33rpx;
  overflow: scroll;
  margin-bottom: 53.33rpx;
}

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

.rmtj-right {
  width: 256.67rpx;
  height: 146.67rpx;
  position: absolute;
  right: -20rpx;
  top: -20rpx;
}