.app { padding: 0; .close { width: 31rpx; height: 31rpx; position: absolute; top: 2%; right: 2%; z-index: 999; } .scroll-Y { height: 550rpx; background-color: #F4F5F7; } .mask { .couponmask { z-index: 999; height: 800rpx; position: fixed; bottom: 0; width: 100%; background: #FFFFFF; border-radius: 30rpx; .titles { width: 100%; height: 40rpx; font-size: 42rpx; margin: 20rpx auto; text-align: center; } .item { width: 94%; height: 240rpx; margin: 20rpx auto 0; border: 1rpx solid #f4f5f7; border-radius: 10rpx; .bottom { font-size: 22rpx; color: #969394; line-height: 60rpx; padding-left: 25rpx; border-radius: 0 0 10rpx 10rpx; } .top { width: 100%; height: 180rpx; background: #FDE9E8; position: relative; color: #F44B2F; border-radius: 10rpx 10rpx 0 0; .what { // width: 120rpx; padding: 0 10rpx; height: 40rpx; background: #FED1D2; border-radius: 16rpx; font-size: 20rpx; line-height: 40rpx; text-align: center; position: absolute; top: 120rpx; left: 20rpx; } .btn2 { width: 130rpx; height: 180rpx; background: #DFDEDE; position: absolute; top: 0; right: 0; text-align: center; line-height: 180rpx; } .btn { width: 98rpx; height: 50rpx; border: 2rpx solid #F44B2F; border-radius: 24rpx; font-size: 24rpx; position: absolute; top: 70rpx; right: 20rpx; text-align: center; line-height: 49rpx; } .time { font-size: 24rpx; position: absolute; top: 120rpx; left: 200rpx; } .texts { font-size: 32rpx; font-weight: 800; position: absolute; top: 44rpx; left: 200rpx; } .title { position: absolute; top: 30rpx; left: 10rpx; .price { font-size: 54rpx; font-weight: 700; } .text { font-weight: 600; font-size: 34rpx; } } } } } .information { width: 70%; height: 400rpx; margin: 50% auto; background: #FFFFFF; border-radius: 30rpx; text-align: center; color: #FFFFFF; position: relative; .determine, .cancel { width: 200rpx; height: 70rpx; border-radius: 26rpx; font-size: 34rpx; line-height: 70rpx; position: absolute; top: 74%; } .determine { background: #26A888; right: 36rpx; } .cancel { background: #C5BFBF; left: 36rpx; } .title { font-size: 42rpx; margin-top: 40rpx; color: #000000; } image { width: 100rpx; height: 100rpx; margin: 10% 0 0 0; } } } .mask { .PurchasePage { position: fixed; bottom: 0; height: 1000rpx; width: 100%; background: #FFFFFF; border-radius: 30rpx 30rpx 0px 0px; font-size: 36rpx; padding-bottom: 20rpx; z-index: 10; .bodys { background-color: #FFFFFF; width: 96%; margin: 10rpx auto 0; border-radius: 20rpx; padding: 15rpx 0 20rpx; position: relative; .addressinfo { font-size: 32rpx; line-height: 65rpx; margin-left: 90rpx; image { width: 40rpx; height: 50rpx; position: absolute; top: 50%; left: 20rpx; transform: translateY(-50%); } .address { padding-top: 10rpx; width: 92%; font-size: 30rpx; word-break: break-all; line-height: 45rpx; } .namephone { width: 70%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .picture2 { position: absolute; top: 50%; right: 20rpx; transform: translateY(-50%); image { width: 18rpx; height: 18rpx; color: #FFFFFF; margin-left: 20rpx; } } } } .topcontent { width: 96%; margin: 0 auto; padding-bottom: 15rpx; position: relative; .goodsStock { font-size: 24rpx; position: absolute; top: 55%; right: 10rpx; } .prices { position: absolute; top: 65%; left: 230rpx; .Paidinprice { font-size: 28rpx; margin-left: 10rpx; color: #fff; border-radius: 20rpx; display: inline-block; padding: 0 10rpx; background-color: #D43953; } .price { color: #D43953; } } .title { font-size: 36rpx; position: absolute; top: 3%; left: 230rpx; font-weight: 600; width: 58%; // height: 85rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; } .image { width: 200rpx; height: 200rpx; margin: 15rpx 0 0 0; image { width: 201rpx; height: 201rpx; margin: 7rpx 0 0 7rpx; } } } .buy { width: 60%; height: 71rpx; background: #26A888; color: #FFFFFF; text-align: center; line-height: 71rpx; border-radius: 26rpx; position: absolute; bottom: 30rpx; left: 20%; } .bottomcontent { margin-top: 10rpx; padding: 35rpx 0; background-color: #FFFFFF; border-radius: 15rpx; .coupon { display: inline-block; font-size: 30rpx; position: absolute; top: 50%; right: 70rpx; transform: translateY(-50%); } .chat { height: 130rpx; position: relative; span { font-size: 30rpx; position: absolute; left: 130rpx; top: 50%; transform: translateY(-50%); } image { position: absolute; left: 30rpx; top: 50%; transform: translateY(-50%); width: 65rpx; height: 55rpx; } } .img { position: absolute; top: 50%; right: 20rpx; transform: translateY(-50%); } .header { font-size: 32rpx; display: inline-block; vertical-align: middle; margin-left: 17rpx; } .number { display: inline-block; position: absolute; right: 10%; } } .centercontent { font-size: 32rpx; background-color: #FFFFFF; margin-top: 10rpx; padding-top: 20rpx; border-radius: 20rpx; .header { margin-bottom: 20rpx; margin-left: 17rpx; } .productmodel { border: 4rpx solid #FFFFFF; } .Productmodel { background: #ECF1FA; border: 4rpx solid #26A888; color: #26A888; } .productmodel, .Productmodel { background-color: #F6F6F6; height: 300rpx; text-align: center; width: 30%; font-size: 24rpx; border-radius: 10rpx; margin: 5rpx 1.5% 10rpx; padding: 0 0 10rpx; view { background-color: #F6F6F6; margin: 10rpx auto; width: 98%; // height: 90rpx; border-radius: 10rpx; font-size: 24rpx; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } image { border-radius: 10rpx; width: 100%; height: 200rpx; } } } } } .Purchasecolumn { width: 100%; height: 110rpx; background: #FFFFFF; position: fixed; bottom: 0; .buy { width: 263rpx; height: 80rpx; background: #26A888; border-radius: 25rpx; font-size: 38rpx; color: #FFFFFF; line-height: 80rpx; text-align: center; position: absolute; right: 5%; top: 15rpx; } } .common { padding-left: 5%; } .choice, .Discount, .service { height: 80rpx; background: #FFFFFF; box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03); font-size: 34rpx; line-height: 80rpx; margin-bottom: 15rpx; position: relative; image { width: 17rpx; height: 26rpx; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); } .content { width: 65%; display: inline-block; position: absolute; left: 25%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #000111; } .selected { color: #969394; display: inline-block; } } .picture { background: #FFFFFF; box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03); position: relative; padding-bottom: 110rpx; // ::v-deep p{ // word-break:break-all; // text-indent: 2rem; // } .textInfo { word-break: break-all; font-size: 29rpx; text-indent: 2rem; line-height: 42rpx; // color: #666666; padding: 0 20rpx; /deep/ .richPic { width: 100% !important; height: 100% !important; } } .selected { padding: 20rpx 0 0 5%; color: #969394; display: inline-block; margin-bottom: 20rpx; font-size: 34rpx; } image { height: 750rpx; width: 100%; background-size: 100%; } } .service { height: 130rpx; line-height: 65rpx; .content { display: inline-block; position: absolute; left: 25%; } .selected { color: #969394; display: inline-block; } } .Commodity { background: #FFFFFF; margin: 15rpx 0 15rpx 0; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); font-size: 36rpx; line-height: 60rpx; .name, .number { word-break: break-all; width: 100%; display: inline-block; line-height: 50rpx; } .price { color: #D43953; line-height: 70rpx; } .number { padding-left: 30rpx; } } }