Files
AGuestSaas/pages/mall/mall_details/mall_details.wxss
2020-12-28 09:16:11 +08:00

947 lines
15 KiB
Plaintext

/*
* 手太欠
* 企获客商城模块
*/
page {
background-color: #f7f7f7;
}
/* 商品轮播 */
.banner {
overflow: hidden;
position: relative;
padding-top: 100%;
}
.swiperCont,
.swiperImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 商品名称 */
.goods {
padding: 30rpx;
box-sizing: border-box;
background-color: white;
position: relative;
}
.goodsShare {
position: absolute;
right: 0;
top: 50rpx;
background-color: #fa8442;
color: #fff;
display: flex;
font-size: 26rpx;
border-radius: 30rpx 0 0 30rpx;
line-height: 52rpx;
height: 52rpx;
padding: 0 12rpx 0 18rpx;
box-sizing: border-box;
}
.goodsShare image {
width: 28rpx;
height: 28rpx;
margin: 12rpx 10rpx 0 0;
}
.goods-price {
display: flex;
color: #ea4e2f;
}
.goods-price-prime {
font-size: 36rpx;
}
.goods-price-cost {
font-size: 26rpx;
color: #999;
text-decoration: line-through;
margin: 10rpx 0 0 30rpx;
}
.recommend-tips {
margin: 20rpx 0 30rpx;
}
.recommend-mark {
background-color: #f2e4c0;
border-radius: 6rpx;
display: inline-block;
font-size: 26rpx;
overflow: hidden;
height: 45rpx;
line-height: 45rpx;
padding-right: 20rpx;
}
.recommend-vip {
display: inline-block;
line-height: 45rpx;
background-color: #333333;
color: #f2e4c0;
padding: 0 20rpx;
}
.goods-title-name {
font-size: 36rpx;
margin-bottom: 20rpx;
}
.goods-title-text {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
}
.goodsMember,
.goods-tips {
margin: 30rpx 0 20rpx;
border-radius: 10rpx;
line-height: 78rpx;
display: flex;
font-size: 26rpx;
}
.goodsMember {
background-color: #fbf7ec;
padding-right: 20rpx;
box-sizing: border-box;
}
.goodsMember-name {
display: flex;
flex: 1;
}
.goodsMember-btn {
display: flex;
}
.goods-tips-arrow {
width: 24rpx;
height: 24rpx;
margin: 28rpx 0 0 10rpx;
}
.goods-tips {
background-color: #f7f7f7;
border: 2rpx #f2f2f2 dotted;
}
.goods-tips text {
color: #ea4e2f;
padding-left: 20rpx;
}
.goods-tips-gold {
width: 34rpx;
height: 34rpx;
margin: 22rpx 20rpx;
}
.specs {
display: flex;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
}
.specsName {
flex: 1;
display: flex;
}
.specsName text {
color: #a9a9a9;
padding: 0 10rpx;
}
.specsGive:last-child text {
display: none;
}
.specsTitle,
.specsText {
color: #000;
padding-right: 20rpx;
}
.specs,
.specsText text {
color: #666;
}
.specsGive {
font-size: 28rpx;
/* margin-right: 30rpx; */
line-height: 84rpx;
}
/* 优惠券 */
.coupon {
background-color: white;
padding: 10rpx 30rpx;
box-sizing: border-box;
margin: 20rpx 0;
}
.specsName-arrow {
width: 30rpx;
height: 30rpx;
margin-top: 25rpx;
}
.couponTips {
position: relative;
border: 2rpx dotted #ea4e2f;
color: #ea4e2f;
border-radius: 10rpx;
height: 52rpx;
line-height: 52rpx;
font-size: 26rpx;
padding: 0 10rpx;
margin-top: 12rpx;
}
/* 企业名称 */
.specsName-company {
width: 36rpx;
height: 36rpx;
margin: 22rpx 20rpx 22rpx 0;
}
.specsUser,
.specsUser-text {
display: flex;
}
.specsUser-img {
width: 54rpx;
height: 54rpx;
margin: 13rpx 10rpx 0 0;
}
.specsUser-member {
border: 2rpx solid #ab8553;
color: #ab8553;
border-radius: 50rpx;
height: 44rpx;
line-height: 44rpx;
font-size: 26rpx;
display: flex;
margin: 16rpx 0 16rpx 10rpx;
padding: 0 10rpx;
}
.specsUser-member image {
width: 30rpx;
height: 30rpx;
margin: 7rpx 7rpx 7rpx 0;
}
/* 评价列表 */
.assess {
background-color: white;
}
.assess-title {
padding: 30rpx;
box-sizing: border-box;
display: flex;
}
.assess-title-name {
flex: 1;
font-size: 30rpx;
}
.assess-title-name text {
color: #999;
padding-left: 10rpx;
}
.assess-title-more image {
width: 30rpx;
height: 30rpx;
}
.assess-list {
white-space: nowrap;
}
.assess-label {
width: 500rpx;
height: 200rpx;
border-radius: 10rpx;
display: inline-block;
position: relative;
border: 2rpx solid #e7e7e7;
overflow: hidden;
margin: 0 0 20rpx 30rpx;
}
.assess-label:last-child {
margin-right: 30rpx;
}
.assess-img {
width: 200rpx;
height: 200rpx;
position: absolute;
right: 0;
top: 0;
}
.assess-cont {
position: absolute;
left: 0;
top: 0;
width: calc(100% - 200rpx);
font-size: 26rpx;
padding: 20rpx;
box-sizing: border-box;
}
.assess-user {
display: flex;
line-height: 60rpx;
margin-bottom: 25rpx;
}
.assess-user-head {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
}
.assess-user-text {
padding: 0 10rpx;
box-sizing: border-box;
line-height: 40rpx;
white-space: initial;
}
/* 商品详情 */
.details {
background-color: white;
margin: 30rpx 0;
padding: 30rpx;
box-sizing: border-box;
}
.details-title {
margin-bottom: 20rpx;
font-weight: 600;
}
.details-footer {
border-bottom: solid 130rpx transparent;
line-height: 40rpx;
text-align: center;
font-size: 24rpx;
color: #747788;
padding-top: 20rpx;
margin-bottom: 20rpx;
}
/* 底部菜单栏 */
.footer {
background: #fff;
height: 100rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
width: 100%;
display: flex;
box-shadow: 0 -3rpx 3rpx 0 rgba(0, 0, 0, 0.05);
}
.footer-img,
.specsEject-footer-img {
width: 300rpx;
text-align: center;
font-size: 26rpx;
color: #575757;
display: flex;
margin-right: 20rpx;
}
.footer-img-tool {
width: 140rpx;
position: relative;
}
.footer-img-tool:first-child::after {
position: absolute;
content: '';
right: 0;
top: 15rpx;
background-color: #f1f1f1;
width: 2rpx;
height: calc(100% - 30rpx);
}
.footer-img-tool text {
font-size: 24rpx;
background-color: #fff;
border: #ff7020 2rpx solid;
color: #ff7020;
border-radius: 50%;
position: absolute;
display: inline-block;
top: 5rpx;
right: 25rpx;
width: 30rpx;
height: 30rpx;
transform: scale(0.8);
}
.footer-img image {
width: 48rpx;
height: 48rpx;
display: block;
margin: 10rpx auto 0;
}
.footer-btn{
width: calc(100% - 240rpx);
display: flex;
}
.footer-btn view,
.specsEject-footer view {
color: #fff;
height: 100%;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
width: 50%;
}
view.footer-btn-car {
background-color: #f8c232;
}
view.footer-btn-buy {
background-color: #f97b35;
}
/* 优惠券弹出层 */
.couponBack,
.specsBack {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 100;
display: none;
}
.couponBack.active,
.specsBack.active {
display: block;
}
.couponEject,
.specsEject {
position: fixed;
width: 100%;
bottom: -100%;
left: 0;
border-radius: 30rpx 30rpx 0 0;
background-color: white;
z-index: 101;
transition: .2s;
}
.couponEject.active,
.specsEject.active {
bottom: 0;
}
.couponClose {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 30rpx;
right: 30rpx;
z-index: 103;
}
.couponEject-title {
text-align: center;
width: 100%;
padding: 30rpx 0 10rpx;
font-weight: 600;
}
.couponEject-list {
padding: 20rpx 30rpx;
box-sizing: border-box;
}
.couponEject-list-label {
position: relative;
width: 100%;
padding-top: 32%;
margin-bottom: 20rpx;
}
.couponEject-list-label::after,
.couponEject-list-label::before,
.couponDraw-list-label::after,
.couponDraw-list-label::before {
position: absolute;
content: '';
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background-color: white;
z-index: 111;
}
.couponEject-list-label::after {
top: -15rpx;
right: 160rpx;
}
.couponEject-list-label::before {
bottom: -15rpx;
right: 160rpx;
}
.couponEject-list-title {
margin-bottom: 30rpx;
}
.couponEject-list-back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 20rpx;
}
.couponEject-list-tips,
.couponDraw-list-tips {
position: absolute;
top: 0;
left: 0;
background-color: #c0d3fc;
color: #2151f5;
z-index: 102;
font-size: 26rpx;
border-radius: 10rpx 0 10rpx 0;
padding: 6rpx 20rpx;
}
.couponEject-list-cont {
z-index: 102;
position: absolute;
top: calc(50% - 45rpx);
left: 0;
right: 0;
color: #fff;
display: flex;
height: 90rpx;
}
.couponEject-list-left {
width: calc(100% - 200rpx);
display: flex;
margin-right: 40rpx;
}
.couponEject-list-price {
font-size: 50rpx;
position: relative;
width: 45%;
text-align: center;
font-weight: 600;
line-height: 90rpx;
}
.couponEject-list-price::after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 2rpx;
height: 100%;
background-color: rgba(255, 255, 255, .5);
}
.couponEject-list-price text,
.couponDraw-list-part text {
font-size: 28rpx;
font-weight: normal;
}
.couponEject-list-name {
text-align: center;
width: 55%;
}
.couponEject-list-name text {
font-size: 26rpx;
display: block;
margin-top: 10rpx;
}
.couponEject-list-btn {
width: 140rpx;
color: #2d6bf6;
background-color: #fff;
border-radius: 50rpx;
text-align: center;
height: 56rpx;
line-height: 56rpx;
font-size: 28rpx;
box-shadow: 0 0 10rpx rgba(0, 50, 61, .2);
margin-top: 20rpx;
}
.couponEject-list-line {
position: absolute;
width: 0;
height: 100%;
content: '';
border: 2rpx dotted #fff;
right: 175rpx;
top: 0;
z-index: 102;
}
.couponEject-list-tips-yellow {
background-color: #fae5c2;
color: #bf7b06;
}
.couponEject-list-yellow {
color: #b67c18;
}
/* 已领取的优惠券 */
.couponDraw-list-label {
position: relative;
width: 100%;
padding-top: 32%;
border: 2rpx solid #eeeeee;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.couponDraw-list-label::after {
top: -15rpx;
left: calc(40% - 15rpx);
}
.couponDraw-list-label::before {
bottom: -15rpx;
left: calc(40% - 15rpx);
}
.couponDraw-list-tips {
background-color: #fae5c2;
color: #9b6404;
}
.couponDraw-list-price {
width: 40%;
background-color: #eea931;
color: #fff;
position: absolute;
height: 100%;
left: 0;
top: 0;
border-radius: 10rpx 0 0 10rpx;
text-align: center;
}
.couponDraw-list-part {
position: absolute;
width: 100%;
height: 70rpx;
top: calc(50% - 35rpx);
z-index: 102;
text-align: center;
font-size: 50rpx;
font-weight: 600;
}
.couponDraw-list-text {
position: absolute;
right: 0;
top: 0;
width: 60%;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.couponDraw-list-name text {
color: #999;
display: block;
font-size: 26rpx;
margin: 10rpx 0 5rpx;
}
.couponDraw-list-btn {
color: #b67c18;
border: 2rpx solid #b67c18;
border-radius: 50rpx;
display: inline-block;
font-size: 26rpx;
padding: 4rpx 30rpx;
float: right;
margin-bottom: 20rpx;
}
.couponDraw-list-time {
font-size: 26rpx;
color: #999;
clear: both;
}
/* 规格弹出 */
.specsEject-cont {
width: 100%;
padding: 30rpx;
box-sizing: border-box;
}
.specsEject-goods {
position: relative;
}
.specsEject-goods-img {
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
}
.specsEject-goods-text {
width: calc(100% - 160rpx);
left: 160rpx;
top: 0;
position: absolute;
}
.specsEject-goods-price {
color: #eb532a;
font-size: 34rpx;
}
.specsEject-goods-norms {
display: flex;
}
.specsEject-goods-norms,
.specsEject-goods-stock {
font-size: 26rpx;
margin-top: 10rpx;
}
.specsEject-goods-tips {
color: #999;
width: 80rpx;
}
.jectGive {
width: calc(100% - 80rpx);
}
.jectGive text {
padding-right: 10rpx;
}
.specsEject-label {
margin: 20rpx 0;
flex-wrap: wrap;
}
.specsEject-label-title {
margin-bottom: 20rpx;
}
.specsEject-label-opt {
margin: 0 -20rpx;
}
.specsEject-label-opt text {
font-size: 26rpx;
border: 2rpx solid #dedede;
border-radius: 50rpx;
margin: 10rpx;
padding: 10rpx 40rpx;
display: inline-block;
}
.specsEject-label-opt text.active {
border-color: #eb532a;
color: #eb532a;
}
.specsEject-number {
display: flex;
border: 2rpx solid #dddddd;
border-radius: 10rpx;
overflow: hidden;
width: 270rpx;
height: 64rpx;
line-height: 64rpx;
}
.specsEject-number-btn,
.specsEject-number-input {
width: 90rpx;
height: 100%;
text-align: center;
display: inline-block;
}
.specsEject-number-input {
position: relative;
}
.specsEject-number-input::after,
.specsEject-number-input::before {
position: absolute;
content: '';
top: 0;
width: 2rpx;
height: 100%;
background-color: #dddddd;
}
.specsEject-number-input::after {
left: 0;
}
.specsEject-number-input::before {
right: 0;
}
.specsEject-footer {
display: flex;
}
/* 分享弹出 */
.share-back {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 99;
left: 0;
top: 0;
display: none;
}
.share-back.active {
display: block;
}
.share-layer {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background: white;
z-index: 100;
transition: all 0.2s;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
.share-layer.active {
bottom: 0;
}
.share-title {
display: flex;
padding: 20rpx;
background: #f7f7f7;
margin-bottom: 20rpx;
}
.share-title text {
flex: 1;
}
.share-close {
width: 46rpx;
height: 46rpx;
}
.share-cont {
display: flex;
}
.share-list {
text-align: center;
flex: 2;
background: #fff;
}
.share-list-img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
padding: 8rpx;
margin: 20rpx auto;
}
.share-list-img image {
width: 100%;
height: 100%;
}
.share-list-text {
font-size: 28rpx;
color: #6b6b6b;
font-weight: normal;
}
.share-tips {
background: #f7f7f7;
border-radius: 30rpx;
display: inline-flex;
padding: 8rpx 20rpx;
font-size: 26rpx;
margin: 40rpx 10rpx 30rpx 20rpx;
}
.share-list-after {
position: relative;
}
.share-list-after::after {
position: absolute;
content: '';
right: 0;
top: 25%;
height: 60%;
bottom: 15%;
background: #e9e9e9;
width: 2rpx;
}