page { background: #f6f6f6; } .all { margin: 0 30rpx; width: 690rpx; } .image { width: 690rpx; height: 460rpx; margin: 30rpx; border-radius: 30rpx; } .store { margin: 30rpx; border-radius: 30rpx; background: #ffffff; padding: 20rpx 20rpx 1rpx 20rpx; .desc { margin: 20rpx 0; } .desc-i { overflow: hidden; //一定要写 text-overflow: ellipsis; //超出省略号 display: -webkit-box; //一定要写 // -webkit-line-clamp: 2; //控制行数 -webkit-box-orient: vertical; //一定要写 } .store-name { font-size: 42rpx; } .store-box { display: flex; justify-content: space-between; margin-top: 10rpx; .store-evaluation { display: flex; color: red; .price { font-size: 28rpx; margin-top: 8rpx; } .evaluation { font-size: 28rpx; margin: 8rpx 20rpx 0 20rpx; color: #229293; } } .evaluation-number { margin-top: 10rpx; font-size: 28rpx; } } .box-image { white-space: nowrap; box-sizing: border-box; margin-top: 30rpx; .images { display: inline-block; width: 200rpx; height: 150rpx; margin-right: 10rpx; } } .box-title { display: flex; justify-content: space-between; border-bottom: 1rpx solid #229293; padding: 20rpx 0; .box-time { display: flex; .state { margin-right: 20rpx; } } .vr_btn { margin-top: 10rpx; width: 140rpx; height: 70rpx; border-radius: 40rpx; text-align: center; line-height: 70rpx; background-color: #229293; color: #ffffff; } } .address { width: 100%; padding: 30rpx 0; display: flex; // border-bottom: 1rpx solid #f6f6f6; .address-details { width: 75%; overflow: hidden; //一定要写 text-overflow: ellipsis; //超出省略号 display: -webkit-box; //一定要写 -webkit-line-clamp: 2; //控制行数 -webkit-box-orient: vertical; //一定要写 .addres { height: 80rpx; margin-top: 20rpx; color: #afa9a9; } .way { display: flex; margin-top: 20rpx; color: #afa9a9; font-size: 24rpx; } } .taxi { display: flex; justify-content: space-between; margin: 0rpx 0 0 10rpx; .taxi-box { margin-right: 20rpx; .taxi-phone { text-align: center; margin-bottom: 5rpx; } } .taxi-boxs { margin-right: 0rpx; .taxi-phone { text-align: center; margin-bottom: 10rpx; } } } } .take-out { margin-top: 20rpx; } .store-goods { display: flex; padding: 10rpx; position: relative; padding-bottom: 18rpx; border-bottom: 1rpx solid #e2e2e2; .images { width: 180rpx; height: 160rpx; border-radius: 10rpx; } .goods-details { margin-left: 20rpx; .goods-name {} .goods-time { font-size: 24rpx; color: #afa9a9; margin-top: 10rpx; } .goods-title { display: flex; justify-content: space-between; .goods-price { display: flex; margin-top: 15rpx; font-size: 32rpx; .price { color: red; } .original { text-decoration: line-through; color: #afa9a9; font-size: 28rpx; } } } } .buy { position: absolute; background: #229293; color: #ffffff; border-radius: 20rpx; padding: 14rpx; text-align: center; width: 128rpx; top: 52%; right: -6rpx; font-size: 28rpx; } } } .box { padding: 30rpx; border-radius: 30rpx; background: #ffffff; margin: 30rpx; .comment { padding: 20rpx 0; .comment-header { display: flex; align-items: center; justify-content: space-between; .header-text { flex: 1; padding: 0 10rpx; } .header-avatar { width: 80rpx; height: 80rpx; .header-avatar-image { width: 100%; height: 100%; margin: 0 auto; border-radius: 50%; } } } .comment-content { .comment-text { padding: 10rpx 0; } .comment-images { display: flex; flex-wrap: wrap; } .comment-image { width: 210rpx; height: 210rpx; background: #ffffff; } } } .recommended-box { display: flex; justify-content: space-between; margin: 1rpx 0 30rpx 0rpx; .recommended { font-size: 36rpx; font-weight: 500; color: #222222; margin-left: 10rpx; } .recommended-icon { width: 6rpx; height: 36rpx; background: #229293; border-radius: 3rpx; margin-top: 5rpx; } } .evaluation-box { .evaluation-describe { font-size: 30rpx; color: #222222; margin-top: 30rpx; } .evaluation-image { display: flex; flex-wrap: wrap; margin-top: 20rpx; .images { width: 200rpx; height: 200rpx; margin-right: 10rpx; } } .evaluation-name { display: flex; justify-content: space-between; .name { display: flex; .images { width: 80rpx; height: 80rpx; border-radius: 50%; } .names { margin: 5rpx 0 0 20rpx; .username { font-size: 24rpx; font-weight: 400; color: #222222; } } } .time { font-size: 24rpx; color: #999999; } } } } .to_order { position: fixed; top: 40%; right: 1%; width: 88rpx; padding: 20rpx; z-index: 999; text-align: center; font-size: 30rpx; border-radius: 40rpx; background-color: #229293; color: #ffffff; }