/* 单个分享按钮 */
.share-web-qrcode--share-icon {
    display: block;
    cursor: pointer;
    background-size: 100% 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAACRUlEQVQ4T52TSWgTYRSAnWzaDBG1Igj2Il5cQHoQag8VIShoRfQsIkhWkojFBQRrQJRqIBNiQhZPRgsSlaIH90PBgxcvFm3FBU8xLsx1QhKT+L0wonhIMv7weP//z3vf/7ZRlv3HKhQKpxVFOdjpdH602+3zoVDojWKVUywWb+C8B78isK3A9qF3WwLlcrlRm832qtVqjYbD4QUJIp/P3wL0wRIIJ3n9ZiAQGP6dCXdnuVthCURaJ0glBWQKmEaE64jwCXe3BwLhsA0HAWxH7iFHpNDoNUTz3m637+2CyuWyS9f1AxhPcPyGnvP5fEvpdHqly+WSDp3jfq7RaMSi0egX7jc4nU6vw+H4XqlUHsfj8baSSCRUj8fzHONNvPISvRanneLMOcj+JxIilae9OqwwE3EMjjabzR2RSEQ3O+EHVGCvVavVM7wosJ5LQB+xSPFi5m9L7heJaDoYDN7tB5HvCu37TE0u+/3+6/+AFhi8K0zt7KCgFGnsqtfrY7FYrC5OdGkS+AOzzdKtvkvJZDLDdOAFlkOk8hC9HvB+9mX0Ic6vkeOk/q5nseWjpmmr3G73MZwncNZJaZaU5rPZ7Agt1jCZRKSG0wCNUqmkGoYxRtRfKcnbbo36xvwn1bRpm0OfRFYjy3n8EfN1eCCQACSKWq120YRcZVAvUNeNZHCfu2sDgwTGv+YlgjukJ9F0F2MiU++0ChoHNI/jZmCfTFAeXbUEMh2foUdoyAzF3sL+FHuvZVAymRxSVfUSgHHEQGbkP/wFREYCcCnkMF4AAAAASUVORK5CYII=');
}

.share-web-qrcode--bubble {
    display: none;
    position: absolute;
    z-index: 99;
    width: 167px;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    background-color: #ffffff;
}

.share-web-qrcode--bubble.is-active {
    display: block;
}

.share-web-qrcode--bubble-inner {
    position: relative;
    text-align: center;
}

.share-web-qrcode--bubble::before {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
}

.share-web-qrcode--bubble-inner::after,
.share-web-qrcode--bubble-inner::before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
}

.share-web-qrcode--bubble .qrcode-copy-title {
    font-size: 14px;
    color: #999999;
    margin-bottom: 10px;
    line-height: 20px;
    height: 20px;
}

.share-web-qrcode--bubble .qrcode-image {
    font-size: 0;
    line-height: 0;
    margin-bottom: 10px;
}

.share-web-qrcode--bubble .qrcode-image img {
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.share-web-qrcode--bubble .qrcode-copy-link {
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: #d22222;
}

.share-web-qrcode--bubble .qrcode-copy-link::before,
.share-web-qrcode--bubble .qrcode-copy-link span {
    display: inline-block;
    vertical-align: middle;
}

.share-web-qrcode--bubble .qrcode-copy-link::before {
    content: '';
    width: 15px;
    height: 16px;
    margin-right: 3px;
    background-size: 100% 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAAXNSR0IArs4c6QAABPxJREFUWEell3ePFVUYh7kKIiBVqgIuCKjEIGoAlRZAmgqC2BLQP4BE4wfQ74DBxMQQCAkEgpFIDb13BJVqABVWWJQiIEVQqcvlea7vbGYvu+Tu5SRP5u7MmfM7bz2zmVpFjmw2+wCv1oem0BgeCRpwfRCuwV9w0msmk7melsoUqVsLYYUehxJoBY1iIw9zdd1/4DQchWMIn7lvYUS16jnoDb2gLTwEWdATt+ASnIXf4EfYifi5RLxGFod7de0zMAwGwNOxmIteCGt1teJe/4P9sBz2wN9QXlPhZrz0IgyBQdABdKkLu6jxrA1NwLlPQQlchs2wNuZeLlgYa+vwUjd4F96AJ+BP2BoL7uVqHHX5o6D7X4Y+0AbKYA2sgtM1EdaCwTARjKuu1YKloLXniKHuNfEUbwHmQX/oAVaAsf4WSgsSZiHd1x508UhoHoss4boZQUun0ggPmfUvwHAwRGUwGw4UKmwW69ru0BlMmF2wF1GzVyvrcnGDN7h3M+5ZWsb5PRgF52Ea7L6nMIslz3VTy8BY58oEgXLmGD+TzDo2Y4+ma5bnPvsQxsXzL7l+X6VwuMmysSbNWruOu9ei294LURvHq9AT3NBPsJ5nR8JiY90VPoB3wIbyeZXCiFoKXaAj3ICDUKqQiyWDea35PRTeivnHuFqrK5jrb91vgr0GY8GE3A2TYFcli0PUJLBGbRInwATaku61zNPtWvo+2L2uhOg8F2eufyv8CpePwOTSeteaAodywtGRjJF1OgIsG8tnJ8yEdamEMaYDQde5sK7fApbJRuadZ716/DYZja2Y3dvha1gNpzJ5ou7MVlgCWmuNuuB+FmRq9rEQHcO1L1i3G2EhfJdb8P95z/LbLFbUKtD1X8FisOlcc5Zl0A7eBhc0vnYgd2bMfgATTPfaDJynpR4Idi03tskDINYyrm/CeHgefoYVMIs5B7jmhsJa4Q4/AV1oXSq6AEwGG7/u9UBwY7bAtKXbWNBsNWS2SpPI2Jt4rjUL9NzhdJ4orJgJ5Q7NVPvpN7A14mWZ9IMJYOcypjZ8Ld3gHEVD2FgaAjfpWh4ec5lzKJmTXBX+jD/sSGapp4tZtyg5OyPTLZmPocQNuRhUWJoSNhwek4r+C34EWIq5TpYeCs+IyXaYbfAFE3c4KTqXMXNTr8eLxstavRhz7GqeuzYZvWPjMRQeGpVqP1/Y2lPU76b1MJUX9sWidi7LzOcmoIfBLzz/PZ67KcvGRPsDdHvSr71X7dBiTwtftmNZt3NAN+ZejEzVkiz3dJ/3XNzmb6t8Ekwua/iuWFanrPDkeFnxwzAfKpJGdyebSBbhnv13NNhoGoLNYTbzPLEKGgp/mtq9nygrwXLyI+0Si5nFucFcRbTQOjXhOoG1aQNZwlxrtqChsMeVmWipeO76CWMX0nqzskxx5tlrXwKbvl3JDdjdpsMyOM48j8WChsJ2IXdu1trejKMx89NGqxX34LdUrFHr3u8pjz5rfiaCnmA1GgqbmUlnMln8xDGTTSgtsGxMNA8NM9tnutQmswF+TXekQtUV9oTyvwKPQXurzcTysR4VF92cfCNbNutgIYLHCxXKn1dxHkfiaJFlYv92MyZTsgHPWOu3VIsRNQRFj/wPAS3zC1LR5J8y61trdbkt9Uw604tVvuubK85nhRw2iuSfsKsIXi1WqFpXV7VgxD/ZRHl+I7mfTdwBWivi9WrNapEAAAAASUVORK5CYII=');
}

.share-web-qrcode--tips {
    display: none;
    z-index: 99;
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 4px;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, .5);
}


/* 详情 start */
.share-web-qrcode--detail {
    position: relative;
    width: 20px;
    height: 20px;
}

.share-web-qrcode--detail .share-web-qrcode--share-icon {
    width: 100%;
    height: 100%;
}

.share-web-qrcode--detail .share-web-qrcode--bubble::before {
    width: 15px;
    height: 100%;
    top: 0px;
    right: -15px;
}

.share-web-qrcode--detail .share-web-qrcode--bubble-inner::after {
    top: 20px;
    right: -20px;
    border-top: 5px solid transparent;
    border-left: 10px solid #e3e3e3;
    border-bottom: 5px solid transparent;
}

.share-web-qrcode--detail .share-web-qrcode--bubble-inner::before {
    top: 20px;
    right: -18px;
    border-top: 5px solid transparent;
    border-left: 10px solid #ffffff;
    border-bottom: 5px solid transparent;
    z-index: 1;
}

.share-web-qrcode--detail .share-web-qrcode--bubble {
    left: -180px;
    top: -25px;
}

.share-web-qrcode--detail .share-web-qrcode--bubble.right {
    right: -180px;
    left: unset;
}

.share-web-qrcode--detail .share-web-qrcode--bubble.right::before {
    left: -15px;
    right: unset;
}

.share-web-qrcode--detail .right .share-web-qrcode--bubble-inner::before {
    left: -18px;
    right: unset;
    border-top: 5px solid transparent;
    border-right: 10px solid #ffffff;
    border-bottom: 5px solid transparent;
    border-left: none;
}

.share-web-qrcode--detail .right .share-web-qrcode--bubble-inner::after {
    left: -20px;
    right: unset;
    border-top: 5px solid transparent;
    border-right: 10px solid #e3e3e3;
    border-bottom: 5px solid transparent;
    border-left: none;
}

/* 详情 end */