You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1752 lines
33 KiB
1752 lines
33 KiB
/**index.wxss**/
|
|
/* 元旦修改 */
|
|
|
|
.bg{
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
/* padding-bottom: 100rpx; */
|
|
background-color: rgba(80, 84, 136, 1);
|
|
background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/index2026/bgs.jpg");
|
|
}
|
|
.top-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
.swiper{
|
|
display: block;
|
|
width: 697rpx;
|
|
height: 340rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.swiper image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
|
|
.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: 36rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
padding: 2rpx 5rpx;
|
|
box-sizing: border-box;
|
|
background: rgba(253, 227, 208, 0.6);
|
|
}
|
|
.search-box .iconfont {
|
|
font-size: 30rpx;
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
/* color: #72674E; */
|
|
}
|
|
|
|
.banner-main{
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 26rpx 28rpx 30rpx;
|
|
box-sizing: border-box;
|
|
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) */
|
|
}
|
|
.banner-main image{
|
|
width: 156rpx;
|
|
height: 156rpx;
|
|
}
|
|
|
|
.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
|
|
margin-bottom: -10rpx;
|
|
}
|
|
|
|
.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;
|
|
flex-wrap: wrap;
|
|
border-radius: 20rpx;
|
|
/* background: #FFEEAD; */
|
|
padding-top: 13rpx;
|
|
/* background-image: url("https://static.ticket.sz-trip.com/uploads/20251127/971ccf61fe5446130501fb26ac7e8ffc.png"); */
|
|
background-size: 100% 100%;
|
|
}
|
|
.top-icon-item {
|
|
margin-bottom: 37rpx;
|
|
line-height: 37rpx;
|
|
font-size: 24rpx;
|
|
color: #000;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
width: 25%;
|
|
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: 66.33rpx;
|
|
height: 66.33rpx;
|
|
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: 133rpx;
|
|
width: 133rpx;
|
|
}
|
|
|
|
.content-box {
|
|
margin: 0 25rpx;
|
|
}
|
|
|
|
.content-margin{
|
|
margin: 0 25rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 25rpx;
|
|
}
|
|
|
|
.common-header-img{
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.small-swiper {
|
|
height: 366.73rpx;
|
|
}
|
|
.small-swiper image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 366.73rpx;
|
|
}
|
|
.small-swiper-box {
|
|
width: 306.73rpx;
|
|
height: 366.73rpx;
|
|
border-radius: 20rpx;
|
|
/* border-radius: 77rpx; */
|
|
overflow: hidden;
|
|
/* margin-top: 33rpx; */
|
|
position: relative;
|
|
}
|
|
|
|
.small-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 306.73rpx;
|
|
height: 366.73rpx;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.sale-road-boxes {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 48rpx;
|
|
position: relative;
|
|
align-items: flex-end;
|
|
width: 750rpx;
|
|
left: -25rpx;
|
|
}
|
|
|
|
/* 元旦修改新增样式 */
|
|
.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;
|
|
margin-right: 14rpx;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
font-size: 25rpx;
|
|
color: #000000;
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
}
|
|
.season-hot .season-content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.season-hot .season-item image{
|
|
width: 100%;
|
|
height: 200rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
.season-hot .season-item .hot-cover-img{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
.season-hot .tags{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: hidden;
|
|
}
|
|
.season-hot .tag{
|
|
height: 27rpx;
|
|
border: 1px solid #FF8623;
|
|
line-height: 27rpx;
|
|
padding: 0 10rpx;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #FF8623;
|
|
margin-right: 8rpx;
|
|
flex-shrink: 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: 157.33rpx;
|
|
height: 226.67rpx;
|
|
}
|
|
|
|
.title-more {
|
|
font-size: 27rpx;
|
|
font-weight: 500;
|
|
color: #000;
|
|
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;
|
|
flex-direction: column;
|
|
height: 350rpx;
|
|
}
|
|
.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: 166.67rpx;
|
|
height: 146.67rpx;
|
|
/* 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: 340rpx;
|
|
}
|
|
.hot-item {
|
|
background: white;
|
|
/* box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1); */
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
height: 498rpx;
|
|
overflow: hidden;
|
|
}
|
|
.hot-item image:nth-child(1) {
|
|
display: block;
|
|
width: 100%;
|
|
height: 327rpx;
|
|
/* border-radius: 15rpx 15rpx 0 0; */
|
|
}
|
|
.hot-item .hot-info {
|
|
padding: 12rpx;
|
|
height: 170rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
background: #FFFCEE;
|
|
}
|
|
.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: white;
|
|
border-radius: 3rpx;
|
|
margin: 33.33rpx auto;
|
|
}
|
|
.scroll-line-bg {
|
|
height: 7rpx;
|
|
background: #b2b2b2;
|
|
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: 340rpx;
|
|
display: block;
|
|
height: 146.67rpx;
|
|
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: grid;
|
|
grid-template-columns: repeat(4, 157.33rpx);
|
|
row-gap: 23rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ggfw-list .ggfw {
|
|
width: 157.33rpx;
|
|
height: 130.67rpx;
|
|
margin-bottom: 21rpx;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #FFF2E0;
|
|
text-align: center;
|
|
}
|
|
.ggfw image{
|
|
width: 113.33rpx;
|
|
height: 113.33rpx;
|
|
}
|
|
|
|
.six-box-new {
|
|
width: 100%;
|
|
/* background: linear-gradient(-90deg, #FF9B6A, #D02E25); */
|
|
border-radius: 20rpx;
|
|
margin: -40rpx 0 53.33rpx;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.six-box-new .big-image-box {
|
|
width: 100%;
|
|
height: 346rpx;
|
|
position: relative;
|
|
|
|
}
|
|
.six-box-new .big-image-box image{
|
|
height: 100%;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
.six-box-new .big-image-box .text-container{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.six-box-new .small-image-box{
|
|
width: 100%;
|
|
padding: 10rpx 16rpx;
|
|
overflow-x: auto;
|
|
background: white;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
height: 120rpx;
|
|
}
|
|
.six-box-new .small-image-box .small-image-item{
|
|
width: 120rpx;
|
|
height: 100rpx;
|
|
background: #FF8623;
|
|
border-radius: 13rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 27rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.six-box-new .small-image-box .small-image-item.active{
|
|
border: 2px solid #000;
|
|
}
|
|
.six-box-new .small-image-box .small-image-item:last-of-type{
|
|
margin-right: 0rpx;
|
|
}
|
|
.six-box-new .small-image-box image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 13rpx;
|
|
}
|
|
.six-box-new .small-image-box .small-image-item .text-box{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #FFC543;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
border-radius: 0 0 13rpx 13rpx;
|
|
}
|
|
.six-box-new .small-image-box .small-image-item.active .text-box{
|
|
background: #FF8623;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 春节金刚区字体颜色样式更换 */
|
|
.top-icon-text {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: -6rpx;
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
.ai-box{
|
|
/* margin: 15rpx 0 40rpx; */
|
|
width: 373.33rpx;
|
|
position: relative;
|
|
}
|
|
.ai-text{
|
|
position: absolute;
|
|
font-weight: 500;
|
|
font-size: 25rpx;
|
|
color: #111111;
|
|
top: 97rpx;
|
|
left: 210rpx;
|
|
width: 320rpx;
|
|
}
|
|
|
|
.ai-fix{
|
|
/* position: fixed;
|
|
width: 150.33rpx;
|
|
height: 200rpx;
|
|
bottom: 30rpx;
|
|
right: 24rpx;
|
|
z-index: 100; */
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.hot-prod-new{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
.hot-prod-left{
|
|
width: 400rpx;
|
|
height: 350rpx;
|
|
position: relative;
|
|
}
|
|
.hot-prod-left .prod-img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
.hot-prod-left .xpth-item-title{
|
|
position: absolute;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.5)) ;
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
padding: 0 8rpx 6rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.hot-prod-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 350rpx;
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
width: 100rpx;
|
|
padding-left: 14rpx;
|
|
}
|
|
|
|
.hot-prod-right .hot-right-item{
|
|
|
|
height: 167rpx;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.small-box {
|
|
/* width: 100%; */
|
|
height: 366.73rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 30rpx;
|
|
}
|
|
|
|
.small-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Tab */
|
|
.custom-tabs {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.tab-btn {
|
|
display: inline-block;
|
|
width: 200rpx;
|
|
height: 53rpx;
|
|
line-height: 53rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
margin-right: 10rpx;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transition: all 0.3s;
|
|
color: #111;
|
|
background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/index2026/hotBg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
font-weight: bold;
|
|
color: #E33929;
|
|
}
|
|
|
|
/* Stack Swiper */
|
|
.stack-swiper {
|
|
position: relative;
|
|
width: 700rpx;
|
|
height: 850rpx;
|
|
margin: 0 auto;
|
|
/* padding-right: 50rpx; */
|
|
box-sizing: border-box;
|
|
margin-left: -10rpx;
|
|
}
|
|
|
|
.stack-item {
|
|
position: absolute;
|
|
width: 630rpx;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
top: 0;
|
|
left: 10rpx;
|
|
|
|
/* 动画过渡 */
|
|
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s;
|
|
|
|
box-shadow: -4rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-inner-border {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
background-color: transparent;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
/* Content Demo */
|
|
.product-content-demo {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.demo-img {
|
|
width: 100%;
|
|
height: 350rpx;
|
|
background-color: #ddd;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.demo-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.demo-tags text {
|
|
display: inline-block;
|
|
border: 1px solid #ff6b6b;
|
|
color: #ff6b6b;
|
|
font-size: 20rpx;
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.demo-price-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.price {
|
|
color: #d43d3d;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buy-btn {
|
|
background: linear-gradient(90deg, #ff6b6b, #e03e3e);
|
|
color: #fff;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.see-more-link {
|
|
text-align: center;
|
|
width: 220rpx; /* 3.03rem */
|
|
height: 50rpx; /* 0.7rem */
|
|
background: #FFF9F2;
|
|
border-radius: 25rpx; /* 0.35rem */
|
|
font-weight: bold;
|
|
font-size: 26rpx; /* 0.42rem */
|
|
color: #CE3B2B;
|
|
line-height: 50rpx;
|
|
margin: 0 0 20rpx auto;
|
|
display: block;
|
|
}
|
|
|
|
.yjgl {
|
|
width: 373.33rpx;
|
|
height: 133.33rpx;
|
|
}
|
|
|
|
.product-item {
|
|
width: 100%; /* 自动填满容器 */
|
|
height: 220rpx; /* 3rem ≈ 210-220rpx */
|
|
background: #FFF9F2;
|
|
border-radius: 14rpx; /* 0.2rem */
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 10rpx; /* 稍微加点内边距 */
|
|
}
|
|
|
|
.product-img {
|
|
width: 200rpx; /* 3rem */
|
|
height: 200rpx; /* 3rem */
|
|
background: #F9EFD7;
|
|
border-radius: 14rpx; /* 0.2rem */
|
|
border: 1rpx solid #FAD29B;
|
|
margin-right: 14rpx; /* 0.19rem */
|
|
flex-shrink: 0; /* 防止图片被压缩 */
|
|
}
|
|
|
|
.product-content {
|
|
height: 200rpx; /* 3rem */
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-right: 10rpx;
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 30rpx; /* 0.42rem */
|
|
color: #000000;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* 多行省略通用样式 */
|
|
.text-overflowRows {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制2行 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
margin: 8rpx 0;
|
|
}
|
|
|
|
.tag-item {
|
|
line-height: 36rpx; /* 0.5rem */
|
|
border-radius: 8rpx; /* 0.1rem */
|
|
border: 1rpx solid #CE3B2B;
|
|
padding: 0 10rpx;
|
|
margin-right: 10rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx; /* 0.34rem */
|
|
color: #CE3B2B;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end; /* 底部对齐 */
|
|
}
|
|
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 32rpx; /* 0.42rem 稍微调大增加强调 */
|
|
color: #DD2723;
|
|
}
|
|
|
|
.btn-img {
|
|
width: 150rpx; /* 2.1rem */
|
|
height: 50rpx; /* 0.71rem */
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 24rpx; /* 0.34rem */
|
|
color: #F9EFD7;
|
|
/* 请确保背景图链接有效 */
|
|
background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/index2026/btnBg.png');
|
|
background-size: 100% 100%;
|
|
border-radius: 25rpx; /* 按钮圆角 */
|
|
}
|
|
|
|
|
|
/* ================= 十二时辰样式 ================= */
|
|
|
|
.twelve-container {
|
|
width: 750rpx;
|
|
left: -25rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
/* === 上部：时间轴 === */
|
|
.arc-layout {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 320rpx; /* 增加高度以容纳波浪效果 */
|
|
}
|
|
|
|
.bg-line-img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 74rpx;
|
|
top: 78rpx; /* 调整线条位置 */
|
|
left: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 横向滚动容器 */
|
|
.nav-scroll-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
/* pointer-events: none; */
|
|
}
|
|
|
|
/* 滚动轨道 */
|
|
.nav-track {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
/* 左右留白，让第一个和最后一个可以滚到中间 */
|
|
padding: 0 302rpx; /* (750 - 146) / 2 = 302 */
|
|
box-sizing: border-box;
|
|
/* pointer-events: auto; */
|
|
}
|
|
|
|
/* 单个时间段容器 */
|
|
.item-box {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 146rpx;
|
|
flex-shrink: 0; /* 防止被压缩 */
|
|
position: relative;
|
|
z-index: 2;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
/* 顶部文字 */
|
|
.item-box .top-text {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: rgba(251, 225, 199, .6);
|
|
margin-bottom: 6rpx;
|
|
text-align: center;
|
|
transition: all 0.4s ease-out;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.item-box.active .top-text {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #FBE1C7;
|
|
}
|
|
|
|
/* 图标容器 */
|
|
.item-box .icon-wrapper {
|
|
width: 74rpx;
|
|
height: 66rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.item-box .icon-bg-circle {
|
|
width: 74rpx;
|
|
height: 66rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.item-box .real-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* 描述文字（竖排） */
|
|
.item-box .desc-text {
|
|
width: 46rpx;
|
|
padding: 10rpx 6rpx;
|
|
box-sizing: border-box;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: rgba(251, 225, 199, .6);
|
|
|
|
/* 竖排文字 */
|
|
writing-mode: vertical-rl;
|
|
|
|
letter-spacing: 5rpx;
|
|
transition: all 0.6s ease;
|
|
text-align: center;
|
|
min-height: 140rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background-color: transparent;
|
|
filter: grayscale(100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.item-box.active .desc-text {
|
|
background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/index2026/12bg.png');
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
color: #F3531C;
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* === 下部：内容区（保持不变） === */
|
|
.content-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.my-swipe {
|
|
width: 100%;
|
|
min-height: 1500rpx;
|
|
}
|
|
|
|
.swiper-scroll {
|
|
height: 100%;
|
|
}
|
|
|
|
.slide-card-container {
|
|
width: 100%;
|
|
padding: 0 26rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* === 美食卡片样式 === */
|
|
.food-card {
|
|
width: 696rpx;
|
|
height: 213rpx;
|
|
margin: 0 auto 20rpx;
|
|
background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/index2026/foodBg.png');
|
|
background-size: 100% 100%;
|
|
padding: 26rpx;
|
|
display: flex;
|
|
background-color: #FBEBD1;
|
|
border-radius: 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.food-card .headimg {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.food-card .content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6rpx 0;
|
|
}
|
|
|
|
.food-card .top {
|
|
border-bottom: 1rpx solid #CCCCCC;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.food-card .title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.food-card .address {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.food-card .bottom {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 13rpx;
|
|
}
|
|
|
|
.food-card .tag {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
background: linear-gradient(139deg, #EF3E17, #F76B22);
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.food-card .price {
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #E02D24;
|
|
margin-right: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* === 普通卡片样式 === */
|
|
.slide-item {
|
|
margin-bottom: 20rpx;
|
|
width: 336rpx;
|
|
height: 400rpx;
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
border-radius: 26rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-item .content {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 133rpx;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
padding: 0 26rpx 26rpx 26rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-item .imgBg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 查看更多按钮 */
|
|
.more-btn-img {
|
|
width: 274rpx;
|
|
display: block;
|
|
margin: 26rpx auto;
|
|
}
|
|
|
|
/* === 工具类 === */
|
|
.flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.text-overflow {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.text-overflowRowss {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 激活项 */
|
|
.item-box.item-pos-0 {
|
|
margin-top: 0rpx;
|
|
}
|
|
|
|
/* 右边相邻 */
|
|
.item-box.item-pos-1,
|
|
.item-box.item-pos--1 { /* 左边相邻 */
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
/* 右边第二个 */
|
|
.item-box.item-pos-2,
|
|
.item-box.item-pos--2 { /* 左边第二个 */
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
/* 左右第三层及更远（±3、±4、±5...） */
|
|
.item-box.item-pos-3,
|
|
.item-box.item-pos--3,
|
|
.item-box.item-pos-4,
|
|
.item-box.item-pos--4,
|
|
.item-box.item-pos-5,
|
|
.item-box.item-pos--5 {
|
|
margin-top: 40rpx !important;
|
|
}
|
|
|
|
|