215 lines
3.0 KiB
Plaintext
215 lines
3.0 KiB
Plaintext
/* 商品图背景 */
|
|
.image{
|
|
width: 390px;
|
|
height: 300px;
|
|
}
|
|
/* 价格 */
|
|
.box1{
|
|
width: 390px;
|
|
height: 80px;
|
|
background-color: #eec2c7;
|
|
position: relative;
|
|
top:0rpx;
|
|
border-radius: 15px;
|
|
}
|
|
.z1{
|
|
top: 20rpx;
|
|
left: 20rpx;
|
|
position: relative;
|
|
}
|
|
.z2{
|
|
top: 80rpx;
|
|
right: 140rpx;
|
|
position: relative;
|
|
font-weight: bolder;
|
|
font-size: 20px;
|
|
}
|
|
/* 商品底部 */
|
|
/* 商品价格 */
|
|
|
|
.z3{
|
|
font-size: 22px;
|
|
font-weight: bolder;
|
|
position: relative;
|
|
top:25rpx;
|
|
right: 60rpx;
|
|
}
|
|
.z4{
|
|
position: relative;
|
|
color: rgb(29, 18, 18);
|
|
}
|
|
.box8{
|
|
width: 400rpx;
|
|
position: relative;
|
|
left: 240rpx;
|
|
top: 25rpx;
|
|
}
|
|
/* 商品介绍 */
|
|
|
|
.z5{
|
|
font-size: 15px;
|
|
position: relative;
|
|
top:20rpx;
|
|
color: darkgrey;
|
|
left: 5px;
|
|
}
|
|
/* 中间信息 */
|
|
.z6{
|
|
font-size: 22px;
|
|
color: rgb(190, 57, 57);
|
|
position: absolute;
|
|
top:140px;
|
|
left: 10px;
|
|
}
|
|
.z7{
|
|
font-size: 22px;
|
|
position: absolute;
|
|
top:140px;
|
|
left: 130px;
|
|
}
|
|
.z8{
|
|
font-size: 22px;
|
|
position: absolute;
|
|
top:140px;
|
|
left: 250px;
|
|
}
|
|
/* 详情介绍 */
|
|
.box3{
|
|
width: 50px;
|
|
height: 2px;
|
|
position: absolute;
|
|
top:174px;
|
|
left: 32px;
|
|
background-color: rgb(169, 169, 169);
|
|
}
|
|
.Box3{
|
|
width: 390px;
|
|
height: 220px;
|
|
background-color: rgba(169, 169, 169, 0.53);
|
|
position: absolute;
|
|
top:180px;
|
|
border-radius: 20px;
|
|
}
|
|
.Box4{
|
|
width: 388px;
|
|
height: 218px;
|
|
background-color: #ffffff;
|
|
position: absolute;
|
|
top:1px;
|
|
left: 1px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* 内部盒子 */
|
|
.Box5{
|
|
width: 340px;
|
|
height: 130px;
|
|
background-color:rgba(169, 169, 169, 0.53) ;
|
|
position: absolute;
|
|
top:70px;
|
|
left: 30px;
|
|
border-radius: 10px;
|
|
}
|
|
.box6{
|
|
width:338px ;
|
|
height: 128px;
|
|
background-color: #ffffff;
|
|
position: absolute;
|
|
top:1px;
|
|
left: 1px;
|
|
border-radius: 10px;
|
|
}
|
|
.box7{
|
|
width: 338px;
|
|
height: 30px;
|
|
background-color:#FEFA83;
|
|
position: absolute;
|
|
}
|
|
.w4{
|
|
position: absolute;
|
|
top:5px;
|
|
left: 5px;
|
|
}
|
|
.w5{
|
|
position: absolute;
|
|
top:5px;
|
|
left: 240px;
|
|
}
|
|
.w6{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top:35px;
|
|
left: 5px;
|
|
}
|
|
.w7{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top:60px;
|
|
left: 5px;
|
|
}
|
|
.w8{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top:85px;
|
|
left: 5px;
|
|
}
|
|
.w9{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top:85px;
|
|
left: 60px;
|
|
}
|
|
.w10{
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top:110px;
|
|
left: 5px;
|
|
}
|
|
.box9{
|
|
position: relative;
|
|
top: 35rpx;
|
|
}
|
|
.container {
|
|
padding: 16px;
|
|
}
|
|
.box10{
|
|
display: block;
|
|
margin-top: 15rpx;
|
|
}
|
|
.box11{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
/* Add this in your style section */
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
position: absolute;
|
|
top: 700px;
|
|
left: 28px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #f3bfc1; /* Light pink background color */
|
|
color: #000000; /* Text color */
|
|
border-radius: 20px; /* Rounded edges */
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
width: 100px;
|
|
}
|
|
|
|
/* Additional styling for individual buttons if needed */
|
|
.add-to-cart {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.buy-now {
|
|
margin-left: 20px;
|
|
}
|