.banner { width: 750rpx; height: 417rpx; } .banner image { width: 100%; height: 417rpx; } .m-menu { background: #fff; display: flex; align-items: center; flex-wrap: wrap; padding-bottom: 0rpx; padding-top: 25rpx; } .m-menu .item { width: 150rpx; height: 126rpx; } .m-menu image { display: block; width: 58rpx; height: 58rpx; margin: 0 auto; margin-bottom: 12rpx; } .m-menu text { display: block; font-size: 24rpx; text-align: center; margin: 0 auto; line-height: 1; color: #333; } .a-section { width: 750rpx; height: auto; overflow: hidden; background: #fff; color: #333; margin-top: 20rpx; } .a-section .h { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 130rpx; } .a-section .h .txt { padding-right: 30rpx; background-size: 16.656rpx 27rpx; display: inline-block; height: 36rpx; font-size: 33rpx; line-height: 36rpx; } .a-brand .b { width: 750rpx; height: auto; overflow: hidden; position: relative; } .a-brand .wrap { position: relative; } .a-brand .img { position: absolute; left: 0; top: 0; } .a-brand .mt { position: absolute; z-index: 2; padding: 27rpx 31rpx; left: 0; top: 0; } .a-brand .mt .brand { display: block; font-size: 33rpx; height: 43rpx; color: #fff; } .a-brand .mt .price, .a-brand .mt .unit { font-size: 25rpx; color: #fff; } .a-brand .item-1 { float: left; width: 375rpx; height: 252rpx; overflow: hidden; border-top: 1rpx solid #fff; margin-left: 1rpx; } .a-brand .item-1:nth-child(2n+1) { margin-left: 0; width: 374rpx; } .a-brand .item-1 .img { width: 375rpx; height: 253rpx; } .a-coupon { width: 750rpx; height: auto; overflow: hidden; } .a-groupon { width: 750rpx; height: auto; overflow: hidden; } .a-groupon .b .item { border-top: 1px solid #d9d9d9; margin: 0 20rpx; height: 244rpx; width: 710rpx; } .a-groupon .b .img { margin-top: 12rpx; margin-right: 12rpx; float: left; width: 220rpx; height: 220rpx; } .a-groupon .b .right { float: left; height: 244rpx; width: 476rpx; display: flex; flex-flow: row nowrap; } .a-groupon .b .text { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; overflow: hidden; height: 244rpx; width: 476rpx; } .a-groupon .b .name { float: left; display: block; color: #333; line-height: 50rpx; font-size: 30rpx; overflow: hidden; text-overflow: ellipsis; } .a-groupon .b .desc { width: 476rpx; display: block; color: #999; line-height: 50rpx; font-size: 25rpx; } .a-groupon .b .price { width: 476rpx; display: flex; color: #ab956d; line-height: 50rpx; font-size: 33rpx; } .a-groupon .b .counterPrice { text-decoration: line-through; font-size: 28rpx; color: #999; } .a-groupon .b .retailPrice { margin-left: 30rpx; font-size: 28rpx; color: #a78845; } .a-new .b { width: 750rpx; height: auto; overflow: hidden; padding: 0 31rpx 45rpx 31rpx; } .a-new .b .item { float: left; width: 302rpx; margin-top: 10rpx; margin-left: 21rpx; margin-right: 21rpx; } .a-new .b .item-b { margin-left: 42rpx; } .a-new .b .img { width: 302rpx; height: 302rpx; } .a-new .b .name { text-align: center; display: block; width: 302rpx; height: 35rpx; margin-bottom: 14rpx; overflow: hidden; font-size: 30rpx; color: #333; } .a-new .b .price { display: block; text-align: center; line-height: 30rpx; font-size: 30rpx; color: #ab956d; } .a-popular { width: 750rpx; height: auto; overflow: hidden; } .a-popular .b .item { border-top: 1px solid #d9d9d9; margin: 0 20rpx; height: 264rpx; width: 710rpx; } .a-popular .b .img { margin-top: 12rpx; margin-right: 12rpx; float: left; width: 240rpx; height: 240rpx; } .a-popular .b .right { float: left; height: 264rpx; width: 456rpx; display: flex; flex-flow: row nowrap; } .a-popular .b .text { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; overflow: hidden; height: 264rpx; width: 456rpx; } .a-popular .b .name { width: 456rpx; display: block; color: #333; line-height: 50rpx; font-size: 30rpx; } .a-popular .b .desc { width: 456rpx; display: block; color: #999; line-height: 50rpx; font-size: 25rpx; } .a-popular .b .price { width: 456rpx; display: block; color: #ab956d; line-height: 50rpx; font-size: 33rpx; } .a-topic .b { height: 533rpx; width: 750rpx; padding: 0 0 48rpx 0; } .a-topic .b .list { height: 533rpx; width: 750rpx; white-space: nowrap; } .a-topic .b .item { display: inline-block; height: 533rpx; width: 680.5rpx; margin-left: 30rpx; overflow: hidden; } .a-topic .b .item:last-child { margin-right: 30rpx; } .a-topic .b .img { height: 387.5rpx; width: 680.5rpx; margin-bottom: 30rpx; } .a-topic .b .np { height: 35rpx; margin-bottom: 13.5rpx; color: #333; font-size: 30rpx; } .a-topic .b .np .price { margin-left: 20.8rpx; color: #ab956d; } .a-topic .b .desc { display: block; height: 30rpx; color: #999; font-size: 24rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .good-grid { width: 750rpx; height: auto; overflow: hidden; } .good-grid .h { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 130rpx; font-size: 33rpx; color: #333; } .good-grid .b { width: 750rpx; padding: 0 6.25rpx; height: auto; overflow: hidden; } .good-grid .b .item { float: left; background: #fff; width: 365rpx; margin-bottom: 6.25rpx; height: 452rpx; overflow: hidden; text-align: center; } .good-grid .b .item .a { height: 452rpx; width: 100%; } .good-grid .b .item-b { margin-left: 6.25rpx; } .good-grid .item .img { margin-top: 20rpx; width: 302rpx; height: 302rpx; } .good-grid .item .name { display: block; width: 365.625rpx; padding: 0 20rpx; overflow: hidden; height: 35rpx; margin: 11.5rpx 0 22rpx 0; text-align: center; font-size: 30rpx; color: #333; } .good-grid .item .price { display: block; width: 365.625rpx; height: 30rpx; text-align: center; font-size: 30rpx; color: #ab956d; } .good-grid .t { height: 100rpx; background: #fff; display: flex; align-items: center; justify-content: center; } .search { height: 88rpx; width: 100%; padding: 0 30rpx; background: #fff; display: flex; align-items: center; } .search .van-icon-search { line-height: 59rpx; } .search .input { width: 690rpx; height: 56rpx; background: #ededed; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; } .search .txt { height: 42rpx; line-height: 42rpx; color: #666; padding-left: 10rpx; font-size: 30rpx; } /* 优惠券 */ .coupon_item { position: relative; /* background: linear-gradient(to right, #cfa568, #e3bf79); */ background: linear-gradient(136deg,#fdda96 0,#e3ad61 100%); margin: 0 .5rem; margin-bottom: .75rem; display: flex; border-radius: .3rem; } .coupon_item view { color: #fff; } .coupon_price { display: flex; position: relative; width: 6rem; font-size: .7rem; text-align: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: .2rem; -webkit-box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%); box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%); background: linear-gradient(136deg,#ff8787 0,#fb3636 100%); } .coupon_price .price{ line-height: 1; font-size: 1.8rem; } .coupon_price .p{ margin-top: .25rem; font-size: .6rem; line-height: 1; } .coupon_msg{ flex: 1; overflow: hidden; padding: .3rem 0 0 .35rem; } .coupon_condition{ min-height: 1.8rem; line-height: .95rem; font-size: .6rem; padding-right: .6rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .coupon_condition .text{ font-size: 0.8rem; vertical-align: middle; display: inline; user-select: none; white-space: pre-wrap; } .coupon_tag{ display: inline-block; height: .7rem; color: #fff; line-height: .7rem; text-align: center; padding: 0 .25rem; border-radius: .35rem; margin-right: .25rem; border-color: #fe5b5b; background-color: #fe5b5b; } .coupon_tag_text{ font-size: .5rem; } .coupon_instruction{ min-width: 7.5rem; height: .95rem; line-height: .95rem; padding-right: .6rem; text-overflow: ellipsis; overflow: hidden; } .coupon_date{ font-size: .65rem; /* line-height: .5rem; */ padding: .5rem 0; padding-right: .5rem; width: 100%; }