yuminge-app/yun-min-program-plugin-master/mycomponent/yz_specs/yz_specs.wxss

304 lines
4.8 KiB
Plaintext

.popupMode {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
z-index: 999;
transition: 0.6s ease-out;
}
.popupModeShow {
opacity: 0;
transition: 0.6s ease-out;
}
.shadeMode {
position: fixed;
background: #fff;
top: auto;
right: auto;
bottom: -1000rpx;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: 100%;
z-index: 1001;
overflow: visible;
transition: 0.6s ease-out;
}
.shadeMode_1 {
position: fixed;
background: #fff;
top: auto;
right: auto;
bottom: -1000rpx;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: 100%;
z-index: 2001;
overflow: visible;
transition: 0.6s ease-out;
}
.shadeMode_2 {
position: fixed;
background: #fff;
top: auto;
right: auto;
bottom: -1000rpx;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: 100%;
z-index: 2001;
overflow: visible;
transition: 0.6s ease-out;
}
.shadeMode .specifications {
display: none;
overflow: visible;
position: relative;
width: 100%;
padding-top: 20rpx;
}
.shadeMode_2 .specifications {
overflow: visible;
position: relative;
width: 100%;
padding-top: 20rpx;
}
.shadeModeShow {
bottom: 0;
border-radius: 30rpx 30rpx 0 0;
}
.shadeModeShow .specifications {
display: block;
}
.specifications .icon_close {
position: absolute;
top: -40rpx;
right: 0;
width: 80rpx;
height: 100rpx;
}
.specifications .icon_close .guanbi_icon {
position: absolute;
left: 25%;
top: 50%;
width: 40rpx;
}
.specifications .shopimg {
display: flex;
overflow: visible;
}
.specifications .shopimg .chooser_img {
position: relative;
width: 180rpx;
height: 150rpx;
overflow: visible;
}
.specifications .shopimg .chooser_img image {
position: absolute;
top: -70rpx;
left: 20rpx;
width: 100%;
height: 180rpx;
border-radius: 8rpx;
border: 2rpx solid #f0f1f3;
}
.specifications .shopimg .right {
width: 440rpx;
margin-left: 60rpx;
}
.specifications .shopimg .price {
color: #f15353;
font-size: 32rpx;
line-height: 60rpx;
/* height: 60rpx; */
/* overflow: hidden; */
}
.specifications .shopimg .price text {
font-size: 36rpx;
}
.specifications .shopimg .option {
color: #999;
font-size: 20rpx;
line-height: 32rpx;
/* height: 32rpx; */
/* overflow: hidden; */
}
.specifications .goodsnum {
border-top: solid 2rpx #f2f2f2;
border-bottom: solid 2rpx #f2f2f2;
margin: 40rpx 28rpx;
padding: 0;
font-size: 28rpx;
display: flex;
justify-content: space-between;
}
.specifications .goodsnum .num {
height: 120rpx;
line-height: 120rpx;
}
.specifications .goodsnum .calculation {
display: flex;
margin-top: 32rpx;
border-radius: 4rpx;
background-color: #fff;
}
.specifications .goodsnum .calculation .leftnav {
height: 56rpx;
width: 56rpx;
background-color: #f2f2f2;
color: #999;
text-align: center;
border-radius: 4rpx;
line-height: 56rpx;
font-size: 36rpx;
font-weight: bold;
}
.specifications .goodsnum .calculation .shownum {
height: 56rpx;
width: 56rpx;
border: 0;
margin: 0px 8px ;
padding: 0;
text-align: center;
color: #333;
}
.specifications .goodsnum .calculation .rightnav {
height: 56rpx;
width: 56rpx;
background-color: #f2f2f2;
color: #999;
text-align: center;
border-radius: 4rpx;
line-height: 56rpx;
font-size: 36rpx;
font-weight: bold;
}
.specifications .shopinfoContent {
overflow-y: auto;
max-height: 450rpx;
}
.specifications .shopinfo {
text-align: left;
padding-left: 20rpx;
margin: 20rpx 0;
/* max-height: 200rpx;
overflow: scroll; */
}
.specifications .shopinfo .dl .dt {
margin-bottom: 10rpx;
}
.specifications .shopinfo .dl .dd {
margin-bottom: 10rpx;
display: flex;
flex-wrap: wrap;
}
.specifications .shopinfo .dl .dd .spec {
border: 1px solid #bfcbd9;
padding: 10rpx;
min-width: 50rpx;
border-radius: 6rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
text-align: center;
}
.specifications .shopinfo .dl .dd .spec.sele {
background-color: #f15353;
border-color: #f15353;
color: #fff;
}
.specifications .shopinfo .dl .dd .spec.disab {
opacity: 0.5;
}
.specifications .subbtn {
line-height: 100rpx;
width: 94%;
border-radius: 10rpx;
margin: 0 auto 10rpx auto;
text-align: center;
background: #ee0a24;
color: #fff;
font-size: 30rpx;
}
/* 图片弹窗 */
.sku_swiper {
position: relative;
/* top: 50%;
left: 0; */
width: 100vw;
height: 760rpx;
/* transform: translateY(-50%) */
}
.sku_swiper_child {
width: 100%;
height: 760rpx !important;
display: flex;
align-items: center;
}
.sku_swiper_child image {
width: 100%;
}
.sku_other {
margin-top: 12rpx;
color: #fff;
display: flex;
align-items: center;
}
.sku_title {
flex: 1;
font-size: 32rpx;
text-align: center;
}
.swiper_num {
width: 80rpx;
display: block;
text-align: center;
}