HKRentingMiniprogram/template/commonList/commonList.wxss

/* template/commonList/commonList.wxss */
@import '/app.wxss';

.item {
    position: relative;
    background-color: #fff;
    margin: 0 28rpx;
    border-radius: 24rpx;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}


.content {
    padding: 0 20rpx;
    position: relative;
}

.top-right-corner {
    top: 0;
    right: 0;
    background-color: #fddf6d;
    /* background-color: transparent; */
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 10rpx;
}

.top-right-corner .top-right-corner-content {
    background-color: #fff;
    border-radius: 0 35rpx 0 0;

    width: 100%;
    height: 100%;

}

.title {
    color: #000000;
    font-size: 30rpx;
    line-height: 48rpx;
    padding-top: 27rpx;
    margin-bottom: 27rpx;
}

.tab-list {
    padding-top: 12.5rpx;
    color: #555;
    font-size: 21rpx;
}

.area-list {
    flex-wrap: wrap;
}

.area-list .area-item {
    font-size: 24rpx;
    color: #555;
    padding: 0 12rpx;
    background-color: rgba(242, 242, 242, 1);
    border-radius: 15rpx;
    height: 44rpx;
    line-height: 44rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
}

.area-list .area-icon {
    width: 27rpx;
    height: 27rpx;
    margin-right: 8rpx;
}

.area-list .area-vertical {
    width: 1rpx;
    height: 24rpx;
    background-color: #D7D7D7;
    margin: 0 10rpx;
}

.area-list .area-distance {
    color: #50E3C2;
}



.price-section {
    color: #555555;
    margin-top: 20rpx;
    margin-bottom: 30rpx;
}

.price-section .unit {
    color: #000000;
    font-size: 21rpx;
    font-weight: bolder;
}

.price-section .price {
    color: #F95D5D;
    font-size: 30rpx;
    font-weight: bolder;
    padding: 0 15rpx;
}

.information {
    justify-content: space-between;
}

.image {
    width: 200rpx;
    height: 174rpx;
    border-radius: 15rpx;
}

.video {
    position: relative;
    border-radius: 15rpx;
    overflow: hidden;
}

.video .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(51, 51, 51, 0.733);
}

.video .video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45rpx;
    height: 45rpx;
}

.footer {
    padding: 0 20rpx;
    font-size: 21rpx;
    color: #555;
    height: 87rpx;
    border-top: 1rpx dashed #d7d7d7;
}

.footer .avatar {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    margin-right: 18rpx;

}

.footer .name {
    margin-right: 18rpx;
}

.footer .label {
    height: 36rpx;
    border-radius: 63rpx;
    border: 1rpx solid rgba(215, 215, 215, 1);
    padding: 0 10rpx;
    margin-right: 18rpx;

}

.footer .user-tag {
    width: 127.5rpx;
    height: 30rpx;
    margin-right: 18rpx;

}

.head {
    width: 640.5rpx;
    border-radius: 24rpx 0 0 0;
    height: 48rpx;
    padding-left: 20rpx;
    color: #fff;
    font-size: 24rpx;
    background-image: linear-gradient(to right, #8080ff, #fff);
}

.head .head-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 15rpx;
    margin-left: 6rpx;
}

.footer .footer-collect {
    width: 36rpx;
    height: 35.4rpx;
}