231 lines
3.2 KiB
Plaintext
231 lines
3.2 KiB
Plaintext
![]() |
/* 商品图背景 */
|
||
|
.Box1 image{
|
||
|
width: 390px;
|
||
|
height: 300px;
|
||
|
}
|
||
|
/* 价格 */
|
||
|
.box1{
|
||
|
width: 390px;
|
||
|
height: 80px;
|
||
|
background-color: #eec2c7;
|
||
|
position: absolute;
|
||
|
top:240px;
|
||
|
border-radius: 15px;
|
||
|
}
|
||
|
.z1{
|
||
|
top: 10px;
|
||
|
left: 10px;
|
||
|
position: absolute;
|
||
|
}
|
||
|
.z2{
|
||
|
top: 30px;
|
||
|
left: 10px;
|
||
|
position: absolute;
|
||
|
font-weight: bolder;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
/* 商品底部 */
|
||
|
/* 商品价格 */
|
||
|
.Box2{
|
||
|
width: 390px;
|
||
|
height: 400px;
|
||
|
background-color: #ffffff;
|
||
|
position: absolute;
|
||
|
top:295px;
|
||
|
border-radius: 15px;
|
||
|
}
|
||
|
.z3{
|
||
|
font-size: 22px;
|
||
|
font-weight: bolder;
|
||
|
position: absolute;
|
||
|
top:15px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
.z4{
|
||
|
position: absolute;
|
||
|
top:46px;
|
||
|
left: 20px;
|
||
|
color: darkgrey;
|
||
|
}
|
||
|
/* 商品介绍 */
|
||
|
.box2{
|
||
|
width: 390px;
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
top:78px;
|
||
|
background-color: rgba(169, 169, 169, 0.53);
|
||
|
}
|
||
|
.z5{
|
||
|
font-size: 15px;
|
||
|
position: absolute;
|
||
|
top:88px;
|
||
|
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;
|
||
|
}
|
||
|
/* 内部介绍 */
|
||
|
.w1{
|
||
|
font-size: 13px;
|
||
|
position: absolute;
|
||
|
top:5px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
.w2{
|
||
|
font-size: 13px;
|
||
|
position: absolute;
|
||
|
top:24px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
.box5{
|
||
|
width: 390px;
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
background-color: rgb(169, 169, 169);
|
||
|
top:44px;
|
||
|
}
|
||
|
.w3{
|
||
|
font-size: 13px;
|
||
|
position: absolute;
|
||
|
top:50px;
|
||
|
left: 10px;
|
||
|
}
|
||
|
/* 内部盒子 */
|
||
|
.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;
|
||
|
}
|
||
|
/* 预约框 */
|
||
|
.Box6{
|
||
|
width: 100px;
|
||
|
height: 35px;
|
||
|
position: absolute;
|
||
|
background-color: #58A55C;
|
||
|
top:222px;
|
||
|
left: 260px;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
.zt1{
|
||
|
position: absolute;
|
||
|
top:6px;
|
||
|
left: 20px;
|
||
|
}
|
||
|
/* 购物车框 */
|
||
|
.Box7{
|
||
|
width: 100px;
|
||
|
height: 35px;
|
||
|
position: absolute;
|
||
|
background-color: #E89709;
|
||
|
top:222px;
|
||
|
left: 140px;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
.zt2{
|
||
|
position: absolute;
|
||
|
top:6px;
|
||
|
left: 10px;
|
||
|
}
|