NurseStationApp/pages/CommodityDetails/CommodityDetailsstyle.scss

246 lines
4.1 KiB
SCSS
Raw Normal View History

2022-10-24 14:42:03 +08:00
.app {
.mask {
.PurchasePage {
position: fixed;
bottom: 0;
width: 100%;
background: #FFFFFF;
border-radius: 30rpx 30rpx 0px 0px;
font-size: 36rpx;
padding-bottom: 20rpx;
.close {
width: 31rpx;
height: 31rpx;
position: absolute;
top: 2%;
right: 2%;
}
.topcontent {
width: 90%;
margin: 0 auto;
padding-bottom: 24rpx;
border-bottom: 1rpx solid #D8D4D4;
position: relative;
.price {
color: #D43953;
position: absolute;
top: 60%;
left: 37%;
}
.title {
font-size: 36rpx;
position: absolute;
top: 12%;
left: 38%;
font-weight: 600;
width: 58%;
height: 85rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.image {
width: 215rpx;
height: 215rpx;
background: rgba(150, 147, 148, 0.21);
margin: 35rpx 0 0 0;
image {
width: 201rpx;
height: 201rpx;
margin: 7rpx 0 0 7rpx;
}
}
}
.buy {
width: 60%;
height: 71rpx;
background: #4C7BC9;
color: #FFFFFF;
text-align: center;
line-height: 71rpx;
border-radius: 26rpx;
margin: 40rpx 0 0 20%;
}
.bottomcontent {
margin-top: 34rpx;
padding-bottom: 35rpx;
.header {
display: inline-block;
vertical-align: middle;
}
.number {
display: inline-block;
position: absolute;
right: 10%;
}
}
.centercontent {
margin-top: 34rpx;
font-size: 36rpx;
.header {
margin-bottom: 20rpx;
}
.productmodel {
font-size: 24rpx;
display: inline-block;
width: 30%;
height: 60rpx;
border: 1rpx solid #D8D4D4;
line-height: 60rpx;
border-radius: 25rpx;
text-align: center;
margin: 15rpx 10rpx 0 0;
}
.Productmodel {
font-size: 24rpx;
display: inline-block;
width: 30%;
height: 60rpx;
background: #ECF1FA;
border: 1rpx solid #4C7BC9;
line-height: 60rpx;
border-radius: 25rpx;
color: #4C7BC9;
text-align: center;
margin: 15rpx 10rpx 0 0;
}
}
}
}
.Purchasecolumn {
width: 100%;
height: 110rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
.buy {
width: 263rpx;
height: 80rpx;
background: #4C7BC9;
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;
.selected {
padding: 20rpx 0 0 5%;
color: #969394;
display: inline-block;
}
image {
margin-top: 20rpx;
height: 850rpx;
width: 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 {
width: 100%;
display: inline-block;
line-height: 50rpx;
}
.price {
color: #D43953;
line-height: 70rpx;
}
.number {
padding-left: 30rpx;
}
}
}