.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-coupon .b .item { position: relative; height: 200rpx; width: 700rpx; background: linear-gradient(to right, #cfa568, #e3bf79); margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx; padding-top: 30rpx; } .a-coupon .b .tag { height: 32rpx; background: #a48143; padding-left: 16rpx; padding-right: 16rpx; position: absolute; left: 20rpx; color: #fff; top: 20rpx; font-size: 20rpx; text-align: center; line-height: 32rpx; } .a-coupon .b .content { margin-top: 24rpx; margin-left: 40rpx; display: flex; margin-right: 40rpx; flex-direction: row; } .a-coupon .b .content .left { flex: 1; } .a-coupon .b .discount { font-size: 50rpx; color: #b4282d; } .a-coupon .b .min { color: #fff; } .a-coupon .b .content .right { width: 400rpx; } .a-coupon .b .name { font-size: 44rpx; color: #fff; margin-bottom: 14rpx; } .a-coupon .b .desc { font-size: 24rpx; color: #fff; } .a-coupon .b .time { font-size: 24rpx; color: #fff; line-height: 30rpx; } .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; } .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; }