zx_flk_app/component/shareBox/index.css

.share-wrap {
    width: 100%;
    visibility: hidden;
}

.share-wrap.active {
    visibility: visible;
}

.share-back {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 888;
    opacity: 0;
    transition: all 0.3s;
}

.share-back.active {
    opacity: 1;
    transition: all 0.3s;
}

.share-container {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-radius: 16rpx 16rpx 0 0;
    transform: translateY(100%);
    transition: all 0.3s;
}

.share-container.active {
    transform: translateY(0%);
    transition: all 0.3s;
}

.close {
    width: 30rpx;
    height: 30rpx;
    overflow: hidden;
    position: absolute;
    right: 64rpx;
    top: 64rpx;
}

.close::after {
    transform: rotate(-45deg);
}

.close::before {
    transform: rotate(45deg);
}

.close::before,
.close::after {
    content: '';
    position: absolute;
    height: 3rpx;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -2rpx;
    background: #9c9c9c;
}

.share-image {
    width: 420rpx;
    margin: 66rpx auto 0;
    display: block;
    border-radius: 16rpx;
    box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}

.share-tips {
    width: 100%;
    text-align: center;
    color: #3c3c3c;
    font-size: 28rpx;
    margin: 32rpx 0;
}

.save-btn {
    width: 336rpx;
    height: 96rpx;
    margin: 0 auto 94rpx;
    background: url('https://qiniu-image.qtshe.com/20190506save-btn.png') center center;
    background-size: 100% 100%;
}