NurseStationApp/pages/CommodityDetails/CommodityDetailsstyle.scss

404 lines
7.1 KiB
SCSS
Raw Normal View History

2023-01-10 10:35:17 +08:00
.app {
padding: 0;
.scroll-Y {
height: 790rpx;
background-color: #F4F5F7;
}
.mask {
.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: #4C7BC9;
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;
2022-10-31 09:04:45 +08:00
}
}
2023-01-10 10:35:17 +08:00
}
2022-10-24 14:42:03 +08:00
.mask {
.PurchasePage {
position: fixed;
bottom: 0;
2023-01-10 10:35:17 +08:00
height: 1150rpx;
2022-10-24 14:42:03 +08:00
width: 100%;
background: #FFFFFF;
border-radius: 30rpx 30rpx 0px 0px;
font-size: 36rpx;
padding-bottom: 20rpx;
2023-01-10 10:35:17 +08:00
.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{
2023-01-13 13:55:31 +08:00
padding-top: 10rpx;
2023-01-10 10:35:17 +08:00
width:92%;
2023-01-13 13:55:31 +08:00
font-size: 30rpx;
2023-01-10 10:35:17 +08:00
word-break:break-all;
2023-01-13 13:55:31 +08:00
line-height: 45rpx;
2023-01-10 10:35:17 +08:00
}
.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;
}
}
}
}
2022-10-24 14:42:03 +08:00
.close {
width: 31rpx;
height: 31rpx;
position: absolute;
top: 2%;
right: 2%;
2023-01-10 10:35:17 +08:00
z-index: 999;
2022-10-24 14:42:03 +08:00
}
.topcontent {
2023-01-10 10:35:17 +08:00
width: 96%;
2022-10-24 14:42:03 +08:00
margin: 0 auto;
2023-01-10 10:35:17 +08:00
padding-bottom: 15rpx;
2022-10-24 14:42:03 +08:00
position: relative;
2023-01-10 10:35:17 +08:00
.goodsStock{
2022-10-31 09:04:45 +08:00
font-size: 24rpx;
position: absolute;
top: 73%;
left: 75%;
}
2022-10-24 14:42:03 +08:00
.price {
color: #D43953;
position: absolute;
2022-10-31 09:04:45 +08:00
top: 70%;
2022-10-24 14:42:03 +08:00
left: 37%;
}
.title {
font-size: 36rpx;
position: absolute;
2023-01-10 10:35:17 +08:00
top: 3%;
2022-10-24 14:42:03 +08:00
left: 38%;
font-weight: 600;
width: 58%;
2023-01-10 10:35:17 +08:00
// height: 85rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
2022-10-24 14:42:03 +08:00
}
.image {
2023-01-10 10:35:17 +08:00
width: 200rpx;
height: 200rpx;
margin: 15rpx 0 0 0;
2022-10-24 14:42:03 +08:00
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;
2023-01-10 10:35:17 +08:00
position: absolute;
bottom:30rpx;
left:20%;
2022-10-24 14:42:03 +08:00
}
.bottomcontent {
2023-01-10 10:35:17 +08:00
margin-top: 10rpx;
padding: 35rpx 0;
background-color: #FFFFFF;
border-radius: 15rpx;
.chat {
2023-01-13 13:55:31 +08:00
height: 130rpx;
2023-01-10 10:35:17 +08:00
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;
}
}
2022-10-24 14:42:03 +08:00
.header {
2023-01-10 10:35:17 +08:00
font-size: 32rpx;
2022-10-24 14:42:03 +08:00
display: inline-block;
vertical-align: middle;
2023-01-10 10:35:17 +08:00
margin-left: 17rpx;
2022-10-24 14:42:03 +08:00
}
.number {
display: inline-block;
position: absolute;
right: 10%;
}
}
.centercontent {
2023-01-10 10:35:17 +08:00
font-size: 32rpx;
background-color: #FFFFFF;
margin-top: 10rpx;
padding-top: 20rpx;
border-radius: 20rpx;
2022-10-24 14:42:03 +08:00
.header {
margin-bottom: 20rpx;
2023-01-10 10:35:17 +08:00
margin-left: 17rpx;
2022-10-24 14:42:03 +08:00
}
2023-01-10 10:35:17 +08:00
2022-10-24 14:42:03 +08:00
.productmodel {
2023-01-13 13:55:31 +08:00
border: 4rpx solid #FFFFFF;
2022-10-24 14:42:03 +08:00
}
.Productmodel {
background: #ECF1FA;
2023-01-13 13:55:31 +08:00
border: 4rpx solid #4C7BC9;
2022-10-24 14:42:03 +08:00
color: #4C7BC9;
2023-01-10 10:35:17 +08:00
}
.productmodel,.Productmodel{
background-color: #F6F6F6;
height: 300rpx;
2022-10-24 14:42:03 +08:00
text-align: center;
2023-01-10 10:35:17 +08:00
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;
}
2022-10-24 14:42:03 +08:00
}
}
}
}
.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;
2023-01-10 10:35:17 +08:00
.textInfo {
word-break:break-all;
2022-12-02 16:04:52 +08:00
font-size: 29rpx;
text-indent: 2rem;
line-height: 42rpx;
// color: #666666;
padding: 0 20rpx;
/deep/ .richPic {
width: 100% !important;
height: 100% !important;
}
}
2022-10-24 14:42:03 +08:00
.selected {
padding: 20rpx 0 0 5%;
color: #969394;
display: inline-block;
2022-11-11 14:19:07 +08:00
margin-bottom: 20rpx;
2022-10-24 14:42:03 +08:00
}
image {
2022-12-02 16:04:52 +08:00
height: 750rpx;
2022-10-24 14:42:03 +08:00
width: 100%;
2022-12-02 16:04:52 +08:00
background-size: 100%;
2022-10-24 14:42:03 +08:00
}
}
.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 {
2023-01-10 10:35:17 +08:00
word-break: break-all;
2022-10-24 14:42:03 +08:00
width: 100%;
display: inline-block;
line-height: 50rpx;
}
.price {
color: #D43953;
line-height: 70rpx;
}
.number {
padding-left: 30rpx;
}
}
}